Last active
August 21, 2025 16:51
-
-
Save caseywatts/553d5feaf5e3d8057f8360b7990d7b1d to your computer and use it in GitHub Desktop.
USWDS Alert Web Component (Maryland version, alpha)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { css, html, LitElement, nothing } from "lit"; | |
| import { | |
| customElement, | |
| property, | |
| queryAssignedNodes, | |
| state, | |
| } from "lit/decorators.js"; | |
| const sharedCSS = css` | |
| :host { | |
| --usa-color-black-transparent-5: rgba(0,0,0,0.01); | |
| --usa-color-black-transparent-10: rgba(0,0,0,0.1); | |
| --usa-color-black-transparent-20: rgba(0,0,0,0.2); | |
| --usa-color-black-transparent-30: rgba(0,0,0,0.3); | |
| --usa-color-black-transparent-40: rgba(0,0,0,0.4); | |
| --usa-color-black-transparent-50: rgba(0,0,0,0.5); | |
| --usa-color-black-transparent-60: rgba(0,0,0,0.6); | |
| --usa-color-black-transparent-70: rgba(0,0,0,0.7); | |
| --usa-color-black-transparent-80: rgba(0,0,0,0.8); | |
| --usa-color-black-transparent-90: rgba(0,0,0,0.9); | |
| --usa-color-blue-cool-5: #e7f2f5; | |
| --usa-color-blue-cool-10: #dae9ee; | |
| --usa-color-blue-cool-20: #adcfdc; | |
| --usa-color-blue-cool-30: #82b4c9; | |
| --usa-color-blue-cool-40: #6499af; | |
| --usa-color-blue-cool-50: #3a7d95; | |
| --usa-color-blue-cool-60: #2e6276; | |
| --usa-color-blue-cool-70: #224a58; | |
| --usa-color-blue-cool-80: #14333d; | |
| --usa-color-blue-cool-90: #0f191c; | |
| --usa-color-blue-cool-vivid-5: #e1f3f8; | |
| --usa-color-blue-cool-vivid-10: #c3ebfa; | |
| --usa-color-blue-cool-vivid-20: #97d4ea; | |
| --usa-color-blue-cool-vivid-30: #59b9de; | |
| --usa-color-blue-cool-vivid-40: #28a0cb; | |
| --usa-color-blue-cool-vivid-50: #0d7ea2; | |
| --usa-color-blue-cool-vivid-60: #07648d; | |
| --usa-color-blue-cool-vivid-70: #074b69; | |
| --usa-color-blue-cool-vivid-80: #002d3f; | |
| --usa-color-blue-warm-5: #ecf1f7; | |
| --usa-color-blue-warm-10: #e1e7f1; | |
| --usa-color-blue-warm-20: #bbcae4; | |
| --usa-color-blue-warm-30: #98afd2; | |
| --usa-color-blue-warm-40: #7292c7; | |
| --usa-color-blue-warm-50: #4a77b4; | |
| --usa-color-blue-warm-60: #345d96; | |
| --usa-color-blue-warm-70: #2f4668; | |
| --usa-color-blue-warm-80: #252f3e; | |
| --usa-color-blue-warm-90: #13171f; | |
| --usa-color-blue-warm-vivid-5: #edf5ff; | |
| --usa-color-blue-warm-vivid-10: #d4e5ff; | |
| --usa-color-blue-warm-vivid-20: #adcdff; | |
| --usa-color-blue-warm-vivid-30: #81aefc; | |
| --usa-color-blue-warm-vivid-40: #5994f6; | |
| --usa-color-blue-warm-vivid-50: #2672de; | |
| --usa-color-blue-warm-vivid-60: #0050d8; | |
| --usa-color-blue-warm-vivid-70: #1a4480; | |
| --usa-color-blue-warm-vivid-80: #162e51; | |
| --usa-color-blue-5: #eff6fb; | |
| --usa-color-blue-10: #d9e8f6; | |
| --usa-color-blue-20: #aacdec; | |
| --usa-color-blue-30: #73b3e7; | |
| --usa-color-blue-40: #4f97d1; | |
| --usa-color-blue-50: #2378c3; | |
| --usa-color-blue-60: #2c608a; | |
| --usa-color-blue-70: #274863; | |
| --usa-color-blue-80: #1f303e; | |
| --usa-color-blue-90: #11181d; | |
| --usa-color-blue-vivid-5: #e8f5ff; | |
| --usa-color-blue-vivid-10: #cfe8ff; | |
| --usa-color-blue-vivid-20: #a1d3ff; | |
| --usa-color-blue-vivid-30: #58b4ff; | |
| --usa-color-blue-vivid-40: #2491ff; | |
| --usa-color-blue-vivid-50: #0076d6; | |
| --usa-color-blue-vivid-60: #005ea2; | |
| --usa-color-blue-vivid-70: #0b4778; | |
| --usa-color-blue-vivid-80: #112f4e; | |
| --usa-color-cyan-5: #e7f6f8; | |
| --usa-color-cyan-10: #ccecf2; | |
| --usa-color-cyan-20: #99deea; | |
| --usa-color-cyan-30: #5dc0d1; | |
| --usa-color-cyan-40: #449dac; | |
| --usa-color-cyan-50: #168092; | |
| --usa-color-cyan-60: #2a646d; | |
| --usa-color-cyan-70: #2c4a4e; | |
| --usa-color-cyan-80: #203133; | |
| --usa-color-cyan-90: #111819; | |
| --usa-color-cyan-vivid-5: #e5faff; | |
| --usa-color-cyan-vivid-10: #a8f2ff; | |
| --usa-color-cyan-vivid-20: #52daf2; | |
| --usa-color-cyan-vivid-30: #00bde3; | |
| --usa-color-cyan-vivid-40: #009ec1; | |
| --usa-color-cyan-vivid-50: #0081a1; | |
| --usa-color-cyan-vivid-60: #00687d; | |
| --usa-color-cyan-vivid-70: #0e4f5c; | |
| --usa-color-cyan-vivid-80: #093b44; | |
| --usa-color-transparent: rgba(0,0,0,0); | |
| --usa-color-black: #000; | |
| --usa-color-white: #fff; | |
| --usa-color-gold-5: #f5f0e6; | |
| --usa-color-gold-10: #f1e5cd; | |
| --usa-color-gold-20: #dec69a; | |
| --usa-color-gold-30: #c7a97b; | |
| --usa-color-gold-40: #ad8b65; | |
| --usa-color-gold-50: #8e704f; | |
| --usa-color-gold-60: #6b5947; | |
| --usa-color-gold-70: #4d4438; | |
| --usa-color-gold-80: #322d26; | |
| --usa-color-gold-90: #191714; | |
| --usa-color-gold-vivid-5: #fef0c8; | |
| --usa-color-gold-vivid-10: #ffe396; | |
| --usa-color-gold-vivid-20: #ffbe2e; | |
| --usa-color-gold-vivid-30: #e5a000; | |
| --usa-color-gold-vivid-40: #c2850c; | |
| --usa-color-gold-vivid-50: #936f38; | |
| --usa-color-gold-vivid-60: #7a591a; | |
| --usa-color-gold-vivid-70: #5c410a; | |
| --usa-color-gold-vivid-80: #3b2b15; | |
| --usa-color-gray-cool-1: #fbfcfd; | |
| --usa-color-gray-cool-2: #f7f9fa; | |
| --usa-color-gray-cool-3: #f5f6f7; | |
| --usa-color-gray-cool-4: #f1f3f6; | |
| --usa-color-gray-cool-5: #edeff0; | |
| --usa-color-gray-cool-10: #dfe1e2; | |
| --usa-color-gray-cool-20: #c6cace; | |
| --usa-color-gray-cool-30: #a9aeb1; | |
| --usa-color-gray-cool-40: #8d9297; | |
| --usa-color-gray-cool-50: #71767a; | |
| --usa-color-gray-cool-60: #565c65; | |
| --usa-color-gray-cool-70: #3d4551; | |
| --usa-color-gray-cool-80: #2d2e2f; | |
| --usa-color-gray-cool-90: #1c1d1f; | |
| --usa-color-gray-warm-1: #fcfcfb; | |
| --usa-color-gray-warm-2: #f9f9f7; | |
| --usa-color-gray-warm-3: #f6f6f2; | |
| --usa-color-gray-warm-4: #f5f5f0; | |
| --usa-color-gray-warm-5: #f0f0ec; | |
| --usa-color-gray-warm-10: #e6e6e2; | |
| --usa-color-gray-warm-20: #cac9c0; | |
| --usa-color-gray-warm-30: #afaea2; | |
| --usa-color-gray-warm-40: #929285; | |
| --usa-color-gray-warm-50: #76766a; | |
| --usa-color-gray-warm-60: #5d5d52; | |
| --usa-color-gray-warm-70: #454540; | |
| --usa-color-gray-warm-80: #2e2e2a; | |
| --usa-color-gray-warm-90: #171716; | |
| --usa-color-gray-1: #fcfcfc; | |
| --usa-color-gray-2: #f9f9f9; | |
| --usa-color-gray-3: #f6f6f6; | |
| --usa-color-gray-4: #f3f3f3; | |
| --usa-color-gray-5: #f0f0f0; | |
| --usa-color-gray-10: #e6e6e6; | |
| --usa-color-gray-20: #c9c9c9; | |
| --usa-color-gray-30: #adadad; | |
| --usa-color-gray-40: #919191; | |
| --usa-color-gray-50: #757575; | |
| --usa-color-gray-60: #5c5c5c; | |
| --usa-color-gray-70: #454545; | |
| --usa-color-gray-80: #2e2e2e; | |
| --usa-color-gray-90: #1b1b1b; | |
| --usa-color-gray-100: #000; | |
| --usa-color-green-cool-5: #ecf3ec; | |
| --usa-color-green-cool-10: #dbebde; | |
| --usa-color-green-cool-20: #b4d0b9; | |
| --usa-color-green-cool-30: #86b98e; | |
| --usa-color-green-cool-40: #5e9f69; | |
| --usa-color-green-cool-50: #4d8055; | |
| --usa-color-green-cool-60: #446443; | |
| --usa-color-green-cool-70: #37493b; | |
| --usa-color-green-cool-80: #28312a; | |
| --usa-color-green-cool-90: #1a1f1a; | |
| --usa-color-green-cool-vivid-5: #e3f5e1; | |
| --usa-color-green-cool-vivid-10: #b7f5bd; | |
| --usa-color-green-cool-vivid-20: #70e17b; | |
| --usa-color-green-cool-vivid-30: #21c834; | |
| --usa-color-green-cool-vivid-40: #00a91c; | |
| --usa-color-green-cool-vivid-50: #008817; | |
| --usa-color-green-cool-vivid-60: #216e1f; | |
| --usa-color-green-cool-vivid-70: #154c21; | |
| --usa-color-green-cool-vivid-80: #19311e; | |
| --usa-color-green-warm-5: #f1f4d7; | |
| --usa-color-green-warm-10: #e7eab7; | |
| --usa-color-green-warm-20: #cbd17a; | |
| --usa-color-green-warm-30: #a6b557; | |
| --usa-color-green-warm-40: #8a984b; | |
| --usa-color-green-warm-50: #6f7a41; | |
| --usa-color-green-warm-60: #5a5f38; | |
| --usa-color-green-warm-70: #45472f; | |
| --usa-color-green-warm-80: #2d2f21; | |
| --usa-color-green-warm-90: #171712; | |
| --usa-color-green-warm-vivid-5: #f5fbc1; | |
| --usa-color-green-warm-vivid-10: #e7f434; | |
| --usa-color-green-warm-vivid-20: #c5d30a; | |
| --usa-color-green-warm-vivid-30: #a3b72c; | |
| --usa-color-green-warm-vivid-40: #7e9c1d; | |
| --usa-color-green-warm-vivid-50: #6a7d00; | |
| --usa-color-green-warm-vivid-60: #5a6613; | |
| --usa-color-green-warm-vivid-70: #4b4e10; | |
| --usa-color-green-warm-vivid-80: #38380b; | |
| --usa-color-green-5: #eaf4dd; | |
| --usa-color-green-10: #dfeacd; | |
| --usa-color-green-20: #b8d293; | |
| --usa-color-green-30: #9bb672; | |
| --usa-color-green-40: #7d9b4e; | |
| --usa-color-green-50: #607f35; | |
| --usa-color-green-60: #4c6424; | |
| --usa-color-green-70: #3c4a29; | |
| --usa-color-green-80: #293021; | |
| --usa-color-green-90: #161814; | |
| --usa-color-green-vivid-5: #ddf9c7; | |
| --usa-color-green-vivid-10: #c5ee93; | |
| --usa-color-green-vivid-20: #98d035; | |
| --usa-color-green-vivid-30: #7fb135; | |
| --usa-color-green-vivid-40: #719f2a; | |
| --usa-color-green-vivid-50: #538200; | |
| --usa-color-green-vivid-60: #466c04; | |
| --usa-color-green-vivid-70: #2f4a0b; | |
| --usa-color-green-vivid-80: #243413; | |
| --usa-color-indigo-cool-5: #eef0f9; | |
| --usa-color-indigo-cool-10: #e1e6f9; | |
| --usa-color-indigo-cool-20: #bbc8f5; | |
| --usa-color-indigo-cool-30: #96abee; | |
| --usa-color-indigo-cool-40: #6b8ee8; | |
| --usa-color-indigo-cool-50: #496fd8; | |
| --usa-color-indigo-cool-60: #3f57a6; | |
| --usa-color-indigo-cool-70: #374274; | |
| --usa-color-indigo-cool-80: #292d42; | |
| --usa-color-indigo-cool-90: #151622; | |
| --usa-color-indigo-cool-vivid-5: #edf0ff; | |
| --usa-color-indigo-cool-vivid-10: #dee5ff; | |
| --usa-color-indigo-cool-vivid-20: #b8c8ff; | |
| --usa-color-indigo-cool-vivid-30: #94adff; | |
| --usa-color-indigo-cool-vivid-40: #628ef4; | |
| --usa-color-indigo-cool-vivid-50: #4866ff; | |
| --usa-color-indigo-cool-vivid-60: #3e4ded; | |
| --usa-color-indigo-cool-vivid-70: #222fbf; | |
| --usa-color-indigo-cool-vivid-80: #1b2b85; | |
| --usa-color-indigo-warm-5: #f1eff7; | |
| --usa-color-indigo-warm-10: #e7e3fa; | |
| --usa-color-indigo-warm-20: #cbc4f2; | |
| --usa-color-indigo-warm-30: #afa5e8; | |
| --usa-color-indigo-warm-40: #9287d8; | |
| --usa-color-indigo-warm-50: #7665d1; | |
| --usa-color-indigo-warm-60: #5e519e; | |
| --usa-color-indigo-warm-70: #453c7b; | |
| --usa-color-indigo-warm-80: #2e2c40; | |
| --usa-color-indigo-warm-90: #18161d; | |
| --usa-color-indigo-warm-vivid-5: #f5f2ff; | |
| --usa-color-indigo-warm-vivid-10: #e4deff; | |
| --usa-color-indigo-warm-vivid-20: #cfc4fd; | |
| --usa-color-indigo-warm-vivid-30: #b69fff; | |
| --usa-color-indigo-warm-vivid-40: #967efb; | |
| --usa-color-indigo-warm-vivid-50: #745fe9; | |
| --usa-color-indigo-warm-vivid-60: #5942d2; | |
| --usa-color-indigo-warm-vivid-70: #3d2c9d; | |
| --usa-color-indigo-warm-vivid-80: #261f5b; | |
| --usa-color-indigo-5: #efeff8; | |
| --usa-color-indigo-10: #e5e4fa; | |
| --usa-color-indigo-20: #c5c5f3; | |
| --usa-color-indigo-30: #a5a8eb; | |
| --usa-color-indigo-40: #8889db; | |
| --usa-color-indigo-50: #676cc8; | |
| --usa-color-indigo-60: #4d52af; | |
| --usa-color-indigo-70: #3d4076; | |
| --usa-color-indigo-80: #2b2c40; | |
| --usa-color-indigo-90: #16171f; | |
| --usa-color-indigo-vivid-5: #f0f0ff; | |
| --usa-color-indigo-vivid-10: #e0e0ff; | |
| --usa-color-indigo-vivid-20: #ccceff; | |
| --usa-color-indigo-vivid-30: #a3a7fa; | |
| --usa-color-indigo-vivid-40: #8289ff; | |
| --usa-color-indigo-vivid-50: #656bd7; | |
| --usa-color-indigo-vivid-60: #4a50c4; | |
| --usa-color-indigo-vivid-70: #3333a3; | |
| --usa-color-indigo-vivid-80: #212463; | |
| --usa-color-magenta-5: #f9f0f2; | |
| --usa-color-magenta-10: #f6e1e8; | |
| --usa-color-magenta-20: #f0bbcc; | |
| --usa-color-magenta-30: #e895b3; | |
| --usa-color-magenta-40: #e0699f; | |
| --usa-color-magenta-50: #c84281; | |
| --usa-color-magenta-60: #8b4566; | |
| --usa-color-magenta-70: #66364b; | |
| --usa-color-magenta-80: #402731; | |
| --usa-color-magenta-90: #1b1617; | |
| --usa-color-magenta-vivid-5: #fff2f5; | |
| --usa-color-magenta-vivid-10: #ffddea; | |
| --usa-color-magenta-vivid-20: #ffb4cf; | |
| --usa-color-magenta-vivid-30: #ff87b2; | |
| --usa-color-magenta-vivid-40: #fd4496; | |
| --usa-color-magenta-vivid-50: #d72d79; | |
| --usa-color-magenta-vivid-60: #ab2165; | |
| --usa-color-magenta-vivid-70: #731f44; | |
| --usa-color-magenta-vivid-80: #4f172e; | |
| --usa-color-mint-cool-5: #e0f7f6; | |
| --usa-color-mint-cool-10: #c4eeeb; | |
| --usa-color-mint-cool-20: #9bd4cf; | |
| --usa-color-mint-cool-30: #6fbab3; | |
| --usa-color-mint-cool-40: #4f9e99; | |
| --usa-color-mint-cool-50: #40807e; | |
| --usa-color-mint-cool-60: #376462; | |
| --usa-color-mint-cool-70: #2a4b45; | |
| --usa-color-mint-cool-80: #203131; | |
| --usa-color-mint-cool-90: #111818; | |
| --usa-color-mint-cool-vivid-5: #d5fbf3; | |
| --usa-color-mint-cool-vivid-10: #7efbe1; | |
| --usa-color-mint-cool-vivid-20: #29e1cb; | |
| --usa-color-mint-cool-vivid-30: #1dc2ae; | |
| --usa-color-mint-cool-vivid-40: #00a398; | |
| --usa-color-mint-cool-vivid-50: #008480; | |
| --usa-color-mint-cool-vivid-60: #0f6460; | |
| --usa-color-mint-cool-vivid-70: #0b4b3f; | |
| --usa-color-mint-cool-vivid-80: #123131; | |
| --usa-color-mint-5: #dbf6ed; | |
| --usa-color-mint-10: #c7efe2; | |
| --usa-color-mint-20: #92d9bb; | |
| --usa-color-mint-30: #5abf95; | |
| --usa-color-mint-40: #34a37e; | |
| --usa-color-mint-50: #2e8367; | |
| --usa-color-mint-60: #286846; | |
| --usa-color-mint-70: #204e34; | |
| --usa-color-mint-80: #193324; | |
| --usa-color-mint-90: #0d1a12; | |
| --usa-color-mint-vivid-5: #c9fbeb; | |
| --usa-color-mint-vivid-10: #83fcd4; | |
| --usa-color-mint-vivid-20: #0ceda6; | |
| --usa-color-mint-vivid-30: #04c585; | |
| --usa-color-mint-vivid-40: #00a871; | |
| --usa-color-mint-vivid-50: #008659; | |
| --usa-color-mint-vivid-60: #146947; | |
| --usa-color-mint-vivid-70: #0c4e29; | |
| --usa-color-mint-vivid-80: #0d351e; | |
| --usa-color-orange-warm-5: #faeee5; | |
| --usa-color-orange-warm-10: #fbe0d0; | |
| --usa-color-orange-warm-20: #f7bca2; | |
| --usa-color-orange-warm-30: #f3966d; | |
| --usa-color-orange-warm-40: #e17141; | |
| --usa-color-orange-warm-50: #bd5727; | |
| --usa-color-orange-warm-60: #914734; | |
| --usa-color-orange-warm-70: #633a32; | |
| --usa-color-orange-warm-80: #3d2925; | |
| --usa-color-orange-warm-90: #1c1615; | |
| --usa-color-orange-warm-vivid-5: #fff3ea; | |
| --usa-color-orange-warm-vivid-10: #ffe2d1; | |
| --usa-color-orange-warm-vivid-20: #fbbaa7; | |
| --usa-color-orange-warm-vivid-30: #fc906d; | |
| --usa-color-orange-warm-vivid-40: #ff580a; | |
| --usa-color-orange-warm-vivid-50: #cf4900; | |
| --usa-color-orange-warm-vivid-60: #a72f10; | |
| --usa-color-orange-warm-vivid-70: #782312; | |
| --usa-color-orange-warm-vivid-80: #3d231d; | |
| --usa-color-orange-5: #f6efe9; | |
| --usa-color-orange-10: #f2e4d4; | |
| --usa-color-orange-20: #f3bf90; | |
| --usa-color-orange-30: #f09860; | |
| --usa-color-orange-40: #dd7533; | |
| --usa-color-orange-50: #a86437; | |
| --usa-color-orange-60: #775540; | |
| --usa-color-orange-70: #524236; | |
| --usa-color-orange-80: #332d27; | |
| --usa-color-orange-90: #1b1614; | |
| --usa-color-orange-vivid-5: #fef2e4; | |
| --usa-color-orange-vivid-10: #fce2c5; | |
| --usa-color-orange-vivid-20: #ffbc78; | |
| --usa-color-orange-vivid-30: #fa9441; | |
| --usa-color-orange-vivid-40: #e66f0e; | |
| --usa-color-orange-vivid-50: #c05600; | |
| --usa-color-orange-vivid-60: #8c471c; | |
| --usa-color-orange-vivid-70: #5f3617; | |
| --usa-color-orange-vivid-80: #352313; | |
| --usa-color-red-cool-5: #f8eff1; | |
| --usa-color-red-cool-10: #f3e1e4; | |
| --usa-color-red-cool-20: #ecbec6; | |
| --usa-color-red-cool-30: #e09aa6; | |
| --usa-color-red-cool-40: #e16b80; | |
| --usa-color-red-cool-50: #cd425b; | |
| --usa-color-red-cool-60: #9e394b; | |
| --usa-color-red-cool-70: #68363f; | |
| --usa-color-red-cool-80: #40282c; | |
| --usa-color-red-cool-90: #1e1517; | |
| --usa-color-red-cool-vivid-5: #fff2f5; | |
| --usa-color-red-cool-vivid-10: #f8dfe2; | |
| --usa-color-red-cool-vivid-20: #f8b9c5; | |
| --usa-color-red-cool-vivid-30: #fd8ba0; | |
| --usa-color-red-cool-vivid-40: #f45d79; | |
| --usa-color-red-cool-vivid-50: #e41d3d; | |
| --usa-color-red-cool-vivid-60: #b21d38; | |
| --usa-color-red-cool-vivid-70: #822133; | |
| --usa-color-red-cool-vivid-80: #4f1c24; | |
| --usa-color-red-warm-5: #f6efea; | |
| --usa-color-red-warm-10: #f4e3db; | |
| --usa-color-red-warm-20: #ecc0a7; | |
| --usa-color-red-warm-30: #dca081; | |
| --usa-color-red-warm-40: #d27a56; | |
| --usa-color-red-warm-50: #c3512c; | |
| --usa-color-red-warm-60: #805039; | |
| --usa-color-red-warm-70: #524236; | |
| --usa-color-red-warm-80: #332d29; | |
| --usa-color-red-warm-90: #1f1c18; | |
| --usa-color-red-warm-vivid-5: #fff5ee; | |
| --usa-color-red-warm-vivid-10: #fce1d4; | |
| --usa-color-red-warm-vivid-20: #f6bd9c; | |
| --usa-color-red-warm-vivid-30: #f39268; | |
| --usa-color-red-warm-vivid-40: #ef5e25; | |
| --usa-color-red-warm-vivid-50: #d54309; | |
| --usa-color-red-warm-vivid-60: #9c3d10; | |
| --usa-color-red-warm-vivid-70: #63340f; | |
| --usa-color-red-warm-vivid-80: #3e2a1e; | |
| --usa-color-red-5: #f9eeee; | |
| --usa-color-red-10: #f8e1de; | |
| --usa-color-red-20: #f7bbb1; | |
| --usa-color-red-30: #f2938c; | |
| --usa-color-red-40: #e9695f; | |
| --usa-color-red-50: #d83933; | |
| --usa-color-red-60: #a23737; | |
| --usa-color-red-70: #6f3331; | |
| --usa-color-red-80: #3e2927; | |
| --usa-color-red-90: #1b1616; | |
| --usa-color-red-vivid-5: #fff3f2; | |
| --usa-color-red-vivid-10: #fde0db; | |
| --usa-color-red-vivid-20: #fdb8ae; | |
| --usa-color-red-vivid-30: #ff8d7b; | |
| --usa-color-red-vivid-40: #fb5a47; | |
| --usa-color-red-vivid-50: #e52207; | |
| --usa-color-red-vivid-60: #b50909; | |
| --usa-color-red-vivid-70: #8b0a03; | |
| --usa-color-red-vivid-80: #5c1111; | |
| --usa-color-violet-warm-5: #f8f0f9; | |
| --usa-color-violet-warm-10: #f6dff8; | |
| --usa-color-violet-warm-20: #e2bee4; | |
| --usa-color-violet-warm-30: #d29ad8; | |
| --usa-color-violet-warm-40: #bf77c8; | |
| --usa-color-violet-warm-50: #b04abd; | |
| --usa-color-violet-warm-60: #864381; | |
| --usa-color-violet-warm-70: #5c395a; | |
| --usa-color-violet-warm-80: #382936; | |
| --usa-color-violet-warm-90: #1b151b; | |
| --usa-color-violet-warm-vivid-5: #fef2ff; | |
| --usa-color-violet-warm-vivid-10: #fbdcff; | |
| --usa-color-violet-warm-vivid-20: #f4b2ff; | |
| --usa-color-violet-warm-vivid-30: #ee83ff; | |
| --usa-color-violet-warm-vivid-40: #d85bef; | |
| --usa-color-violet-warm-vivid-50: #be32d0; | |
| --usa-color-violet-warm-vivid-60: #93348c; | |
| --usa-color-violet-warm-vivid-70: #711e6c; | |
| --usa-color-violet-warm-vivid-80: #481441; | |
| --usa-color-violet-5: #f4f1f9; | |
| --usa-color-violet-10: #ebe3f9; | |
| --usa-color-violet-20: #d0c3e9; | |
| --usa-color-violet-30: #b8a2e3; | |
| --usa-color-violet-40: #9d84d2; | |
| --usa-color-violet-50: #8168b3; | |
| --usa-color-violet-60: #665190; | |
| --usa-color-violet-70: #4c3d69; | |
| --usa-color-violet-80: #312b3f; | |
| --usa-color-violet-90: #18161d; | |
| --usa-color-violet-vivid-5: #f7f2ff; | |
| --usa-color-violet-vivid-10: #ede3ff; | |
| --usa-color-violet-vivid-20: #d5bfff; | |
| --usa-color-violet-vivid-30: #c39deb; | |
| --usa-color-violet-vivid-40: #ad79e9; | |
| --usa-color-violet-vivid-50: #9355dc; | |
| --usa-color-violet-vivid-60: #783cb9; | |
| --usa-color-violet-vivid-70: #54278f; | |
| --usa-color-violet-vivid-80: #39215e; | |
| --usa-color-white-transparent-5: rgba(255,255,255,0.01); | |
| --usa-color-white-transparent-10: rgba(255,255,255,0.1); | |
| --usa-color-white-transparent-20: rgba(255,255,255,0.2); | |
| --usa-color-white-transparent-30: rgba(255,255,255,0.3); | |
| --usa-color-white-transparent-40: rgba(255,255,255,0.4); | |
| --usa-color-white-transparent-50: rgba(255,255,255,0.5); | |
| --usa-color-white-transparent-60: rgba(255,255,255,0.6); | |
| --usa-color-white-transparent-70: rgba(255,255,255,0.7); | |
| --usa-color-white-transparent-80: rgba(255,255,255,0.8); | |
| --usa-color-white-transparent-90: rgba(255,255,255,0.9); | |
| --usa-color-yellow-5: #faf3d1; | |
| --usa-color-yellow-10: #f5e6af; | |
| --usa-color-yellow-20: #e6c74c; | |
| --usa-color-yellow-30: #c9ab48; | |
| --usa-color-yellow-40: #a88f48; | |
| --usa-color-yellow-50: #8a7237; | |
| --usa-color-yellow-60: #6b5a39; | |
| --usa-color-yellow-70: #504332; | |
| --usa-color-yellow-80: #332d27; | |
| --usa-color-yellow-90: #1a1614; | |
| --usa-color-yellow-vivid-5: #fff5c2; | |
| --usa-color-yellow-vivid-10: #fee685; | |
| --usa-color-yellow-vivid-20: #face00; | |
| --usa-color-yellow-vivid-30: #ddaa01; | |
| --usa-color-yellow-vivid-40: #b38c00; | |
| --usa-color-yellow-vivid-50: #947100; | |
| --usa-color-yellow-vivid-60: #776017; | |
| --usa-color-yellow-vivid-70: #5c4809; | |
| --usa-color-yellow-vivid-80: #422d19; | |
| --usa-spacing-1: .5rem; | |
| --usa-spacing-2: 1rem; | |
| --usa-spacing-3: 1.5rem; | |
| --usa-spacing-4: 2rem; | |
| --usa-spacing-5: 2.5rem; | |
| --usa-spacing-6: 3rem; | |
| --usa-spacing-05: .025rem; | |
| --base-lightest: var(--usa-color-gray-5); | |
| --base-light: var(--usa-color-gray-10); | |
| --usa-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); | |
| --usa-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E"); | |
| --usa-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' /%3E%3C/svg%3E"); | |
| --usa-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E"); | |
| } | |
| `; | |
| @customElement("maryland-alert") | |
| export class MDAlert extends LitElement { | |
| @property({ type: String }) | |
| type = "info"; | |
| @property({ type: Boolean, attribute: "no-icon" }) | |
| accessor noIcon = false; | |
| @queryAssignedNodes({ slot: "heading", flatten: true }) | |
| _headingNodes!: Array<Node>; | |
| @state() | |
| private accessor _hasHeader = false; | |
| slotChange() { | |
| this._hasHeader = this._headingNodes.length > 0; | |
| } | |
| static styles = css` | |
| ${sharedCSS} | |
| :host { | |
| box-sizing: border-box; | |
| --icon-info: var(--usa-icon-info); | |
| --icon-warning: var(--usa-icon-warning); | |
| --icon-success: var(--usa-icon-check-circle); | |
| --icon-error: var(--usa-icon-error); | |
| --icon-warning: var(--usa-icon-error); | |
| } | |
| .usa-alert { | |
| background-color: var(--base-lightest); | |
| border-left: var(--alert-bar-width, var(--usa-spacing-1)) solid var(--base-light); | |
| .usa-alert__body { | |
| padding-inline: var(--theme-alert-padding-x, var(--usa-spacing-3)); | |
| padding-block: var(--theme-alert-padding-y, var(--usa-spacing-2)); | |
| margin-left: var(--usa-spacing-4); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| .usa-alert__icon { | |
| width: 2rem; | |
| position: absolute; | |
| left: 2rem; // TODO | |
| } | |
| .usa-alert__heading { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .usa-alert__text { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| } | |
| } | |
| .usa-alert--success { | |
| .usa-alert__icon { | |
| content: var(--icon-success); | |
| } | |
| background-color: var(--usa-color-green-cool-5); | |
| border-left-color: var(--usa-color-green-cool-vivid-40); | |
| } | |
| .usa-alert--info { | |
| .usa-alert__icon { | |
| content: var(--icon-info); | |
| } | |
| background-color: var(--usa-color-cyan-5); | |
| border-left-color: var(--usa-color-cyan-vivid-30); | |
| } | |
| .usa-alert--warning { | |
| .usa-alert__icon { | |
| content: var(--icon-warning); | |
| } | |
| background-color: var(--usa-color-yellow-5); | |
| border-left-color: var(--usa-color-gold-vivid-20); | |
| } | |
| .usa-alert--error { | |
| .usa-alert__icon { | |
| content: var(--icon-error); | |
| } | |
| background-color: var(--usa-color-red-warm-10); | |
| border-left-color: var(--usa-color-red-warm-vivid-50); | |
| } | |
| .usa-alert--slim { | |
| .usa-alert__body { | |
| margin-left: 1rem; | |
| .usa-alert__icon { | |
| width: 1.5rem; | |
| } | |
| } | |
| } | |
| .usa-alert--no-icon { | |
| .usa-alert__body { | |
| margin-left: 0; | |
| .usa-alert__icon { | |
| display: none; | |
| } | |
| } | |
| } | |
| ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5), ::slotted(h6) { | |
| font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; /* TODO */ | |
| font-size: 1.33rem; /* TODO */ | |
| line-height: .9; /* TODO */ | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| ::slotted(p), ::slotted(div) { | |
| font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; /* TODO */ | |
| font-size: 1.06rem; /* TODO */ | |
| line-height: 1.5; /* TODO */ | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| `; | |
| render() { | |
| return html` | |
| <div class="usa-alert usa-alert--${this.type} ${this.noIcon ? "usa-alert--no-icon" : ""} ${this._hasHeader ? "" : "usa-alert--slim"}"> | |
| <div class="usa-alert__body"> | |
| <div class="usa-alert__heading" style="${this._hasHeader ? "" : "display:none;"}"> | |
| <img class="usa-alert__icon" aria-hidden="true"></img> | |
| <div> | |
| <slot name="heading" @slotchange=${() => this.slotChange()}></slot> | |
| </div> | |
| </div> | |
| <p class="usa-alert__text"> | |
| ${this._hasHeader ? | |
| nothing : | |
| html`<img class="usa-alert__icon" aria-hidden="true"></img>` | |
| } | |
| <slot name="content"></slot> | |
| <slot></slot> | |
| </p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "./index.ts"; | |
| import { html, nothing } from "lit"; | |
| // More on how to set up stories at: https://storybook.js.org/docs/writing-stories | |
| const meta = { | |
| title: "Components/Alert", | |
| component: "maryland-alert", | |
| tags: ["beta"], | |
| render: ({ heading, type, content, noIcon }) => { | |
| return html` | |
| <maryland-alert type="${type}" ?no-icon="${noIcon}"> | |
| ${heading ? html`<h3 slot="heading">${heading}</h3>` : nothing} | |
| <p slot="content">${content}</p> | |
| </maryland-alert> | |
| `; | |
| }, | |
| }; | |
| export default meta; | |
| // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args | |
| export const InformationalAlert = { | |
| args: { | |
| heading: "Informational Alert", | |
| type: "info", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| }, | |
| }; | |
| export const WarningAlert = { | |
| args: { | |
| heading: "Warning Alert", | |
| type: "warning", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| }, | |
| }; | |
| export const SuccessAlert = { | |
| args: { | |
| heading: "Success Alert", | |
| type: "success", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| }, | |
| }; | |
| export const ErrorAlert = { | |
| args: { | |
| heading: "Error Alert", | |
| type: "error", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| }, | |
| }; | |
| export const SlimAlert = { | |
| args: { | |
| type: "info", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| }, | |
| }; | |
| export const NoIconAlert = { | |
| args: { | |
| type: "info", | |
| content: | |
| " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.", | |
| noIcon: "true", | |
| }, | |
| }; |
Great, thank you for the directional feedback! 👏
We're very aligned on the critical content being in the light DOM, that's important to my team, too!
I also agree the DOM and CSS classes can be cleaned up a lot here too! This is mostly a port of the existing USWDS markup, right.
About BEM specifically: I saw an interesting thread on the Design Systems Slack, and most people who responded DO still seem to use BEM inside of web components 👀
Ok well I guess I do finally need to get in that Slack 😅
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This looks great! Couple of high-level bits of feedback just related how what you have here does/doesn't align with what I expect we'll be doing "upstream" as it were in USWDS:
I'll dig more deeply into this & give you more feedback but I like what you've got here.