@ogds/elements 1.0.0-alpha.6 → 1.0.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/.storybook/{UswdsTheme.js → OgdsTheme.js} +1 -1
  2. package/.storybook/manager.js +2 -2
  3. package/.storybook/preview.js +2 -2
  4. package/.storybook/worker.js +5 -0
  5. package/README.md +24 -53
  6. package/dist/components/frameworks/react/{UsaBanner.d.ts → OgdsBanner.d.ts} +9 -9
  7. package/dist/components/frameworks/react/{UsaBanner.js → OgdsBanner.js} +3 -3
  8. package/dist/components/frameworks/react/{UsaLink.d.ts → UsaHeader.d.ts} +5 -17
  9. package/dist/components/frameworks/react/{UsaLink.js → UsaHeader.js} +4 -7
  10. package/dist/components/frameworks/react/index.d.ts +2 -2
  11. package/dist/components/frameworks/react/index.js +2 -2
  12. package/dist/components/index.cjs +8 -1
  13. package/dist/components/index.cjs.map +1 -1
  14. package/dist/components/index.d.ts +3 -3
  15. package/dist/components/index.js +95 -4
  16. package/dist/components/index.js.map +1 -1
  17. package/dist/components/ogds-accordion/index.d.ts +36 -0
  18. package/dist/components/ogds-accordion/ogds-accordion.spec.d.ts +1 -0
  19. package/dist/components/ogds-accordion-toggle/index.d.ts +22 -0
  20. package/dist/components/{usa-banner → ogds-banner}/index.d.ts +6 -6
  21. package/dist/components/ogds-banner.cjs +1 -0
  22. package/dist/components/ogds-banner.cjs.map +1 -0
  23. package/dist/components/ogds-banner.js +7 -0
  24. package/dist/components/ogds-banner.js.map +1 -0
  25. package/dist/components/usa-header/index.d.ts +2 -2
  26. package/dist/core/token-styles.d.ts +1 -0
  27. package/dist/{components/usa-banner.js → index-Bl2KLDbH.js} +29 -23
  28. package/dist/index-Bl2KLDbH.js.map +1 -0
  29. package/dist/index-DTiLuJoA.cjs +95 -0
  30. package/dist/index-DTiLuJoA.cjs.map +1 -0
  31. package/dist/types/custom-element-jsx.d.ts +3 -24
  32. package/dist/types/custom-element-solidjs.d.ts +6 -29
  33. package/dist/types/custom-element-svelte.d.ts +3 -24
  34. package/dist/types/custom-element-vuejs.d.ts +3 -24
  35. package/package.json +16 -16
  36. package/src/components/index.ts +2 -3
  37. package/src/components/{usa-banner → ogds-banner}/docs.mdx +1 -10
  38. package/src/components/{usa-banner → ogds-banner}/index.ts +11 -9
  39. package/src/components/{usa-banner/usa-banner.spec.ts → ogds-banner/ogds-banner.spec.ts} +4 -4
  40. package/src/components/{usa-banner/usa-banner.stories.ts → ogds-banner/ogds-banner.stories.ts} +2 -2
  41. package/src/components/usa-header/index.ts +2 -3
  42. package/src/declaration.d.ts +5 -0
  43. package/storybook/contributing.mdx +4 -4
  44. package/storybook/framework-guidance.mdx +5 -5
  45. package/dist/components/usa-banner/usa-banner.stories.d.ts +0 -95
  46. package/dist/components/usa-banner.cjs +0 -95
  47. package/dist/components/usa-banner.cjs.map +0 -1
  48. package/dist/components/usa-banner.js.map +0 -1
  49. package/dist/components/usa-link/index.d.ts +0 -30
  50. package/dist/components/usa-link/usa-link.spec.d.ts +0 -0
  51. package/dist/components/usa-link.cjs +0 -5
  52. package/dist/components/usa-link.cjs.map +0 -1
  53. package/dist/components/usa-link.js +0 -32
  54. package/dist/components/usa-link.js.map +0 -1
  55. package/dist/core/OgdsElement.d.ts +0 -3
  56. package/dist/index-7kIMQwBw.cjs +0 -1
  57. package/dist/index-7kIMQwBw.cjs.map +0 -1
  58. package/dist/index-BrHk1-6T.js +0 -10
  59. package/dist/index-BrHk1-6T.js.map +0 -1
  60. package/src/components/ogds-accordion/.claude/settings.local.json +0 -7
  61. package/src/components/usa-link/index.ts +0 -66
  62. package/src/components/usa-link/usa-link.css +0 -24
  63. package/src/components/usa-link/usa-link.spec.ts +0 -50
  64. /package/dist/components/{usa-banner/usa-banner.spec.d.ts → ogds-banner/ogds-banner.spec.d.ts} +0 -0
  65. /package/src/components/{usa-banner/usa-banner.css → ogds-banner/ogds-banner.css} +0 -0
package/dist/components/usa-banner.cjs DELETED
@@ -1,95 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),g=require("../index-7kIMQwBw.cjs"),c=require("lit/directives/unsafe-html.js"),l=require("lit/directives/class-map.js"),n=o.css`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-black-transparent-10:#0000001a;--ogds-color-black-transparent-20:#0003;--ogds-color-black-transparent-30:#0000004d;--ogds-color-black-transparent-40:#0006;--ogds-color-black-transparent-50:#00000080;--ogds-color-black-transparent-60:#0009;--ogds-color-black-transparent-70:#000000b3;--ogds-color-black-transparent-80:#000c;--ogds-color-black-transparent-90:#000000e6;--ogds-color-blue-cool-5:#e7f2f5;--ogds-color-blue-cool-10:#dae9ee;--ogds-color-blue-cool-20:#adcfdc;--ogds-color-blue-cool-30:#82b4c9;--ogds-color-blue-cool-40:#6499af;--ogds-color-blue-cool-50:#3a7d95;--ogds-color-blue-cool-60:#2e6276;--ogds-color-blue-cool-70:#224a58;--ogds-color-blue-cool-80:#14333d;--ogds-color-blue-cool-90:#0f191c;--ogds-color-blue-cool-vivid-5:#e1f3f8;--ogds-color-blue-cool-vivid-10:#c3ebfa;--ogds-color-blue-cool-vivid-20:#97d4ea;--ogds-color-blue-cool-vivid-30:#59b9de;--ogds-color-blue-cool-vivid-40:#28a0cb;--ogds-color-blue-cool-vivid-50:#0d7ea2;--ogds-color-blue-cool-vivid-60:#07648d;--ogds-color-blue-cool-vivid-70:#074b69;--ogds-color-blue-cool-vivid-80:#002d3f;--ogds-color-blue-warm-5:#ecf1f7;--ogds-color-blue-warm-10:#e1e7f1;--ogds-color-blue-warm-20:#bbcae4;--ogds-color-blue-warm-30:#98afd2;--ogds-color-blue-warm-40:#7292c7;--ogds-color-blue-warm-50:#4a77b4;--ogds-color-blue-warm-60:#345d96;--ogds-color-blue-warm-70:#2f4668;--ogds-color-blue-warm-80:#252f3e;--ogds-color-blue-warm-90:#13171f;--ogds-color-blue-warm-vivid-5:#edf5ff;--ogds-color-blue-warm-vivid-10:#d4e5ff;--ogds-color-blue-warm-vivid-20:#adcdff;--ogds-color-blue-warm-vivid-30:#81aefc;--ogds-color-blue-warm-vivid-40:#5994f6;--ogds-color-blue-warm-vivid-50:#2672de;--ogds-color-blue-warm-vivid-60:#0050d8;--ogds-color-blue-warm-vivid-70:#1a4480;--ogds-color-blue-warm-vivid-80:#162e51;--ogds-color-blue-5:#eff6fb;--ogds-color-blue-10:#d9e8f6;--ogds-color-blue-20:#aacdec;--ogds-color-blue-30:#73b3e7;--ogds-color-blue-40:#4f97d1;--ogds-color-blue-50:#2378c3;--ogds-color-blue-60:#2c608a;--ogds-color-blue-70:#274863;--ogds-color-blue-80:#1f303e;--ogds-color-blue-90:#11181d;--ogds-color-blue-vivid-5:#e8f5ff;--ogds-color-blue-vivid-10:#cfe8ff;--ogds-color-blue-vivid-20:#a1d3ff;--ogds-color-blue-vivid-30:#58b4ff;--ogds-color-blue-vivid-40:#2491ff;--ogds-color-blue-vivid-50:#0076d6;--ogds-color-blue-vivid-60:#005ea2;--ogds-color-blue-vivid-70:#0b4778;--ogds-color-blue-vivid-80:#112f4e;--ogds-color-cyan-5:#e7f6f8;--ogds-color-cyan-10:#ccecf2;--ogds-color-cyan-20:#99deea;--ogds-color-cyan-30:#5dc0d1;--ogds-color-cyan-40:#449dac;--ogds-color-cyan-50:#168092;--ogds-color-cyan-60:#2a646d;--ogds-color-cyan-70:#2c4a4e;--ogds-color-cyan-80:#203133;--ogds-color-cyan-90:#111819;--ogds-color-cyan-vivid-5:#e5faff;--ogds-color-cyan-vivid-10:#a8f2ff;--ogds-color-cyan-vivid-20:#52daf2;--ogds-color-cyan-vivid-30:#00bde3;--ogds-color-cyan-vivid-40:#009ec1;--ogds-color-cyan-vivid-50:#0081a1;--ogds-color-cyan-vivid-60:#00687d;--ogds-color-cyan-vivid-70:#0e4f5c;--ogds-color-cyan-vivid-80:#093b44;--ogds-color-transparent:#0000;--ogds-color-black:#000;--ogds-color-white:#fff;--ogds-color-gold-5:#f5f0e6;--ogds-color-gold-10:#f1e5cd;--ogds-color-gold-20:#dec69a;--ogds-color-gold-30:#c7a97b;--ogds-color-gold-40:#ad8b65;--ogds-color-gold-50:#8e704f;--ogds-color-gold-60:#6b5947;--ogds-color-gold-70:#4d4438;--ogds-color-gold-80:#322d26;--ogds-color-gold-90:#191714;--ogds-color-gold-vivid-5:#fef0c8;--ogds-color-gold-vivid-10:#ffe396;--ogds-color-gold-vivid-20:#ffbe2e;--ogds-color-gold-vivid-30:#e5a000;--ogds-color-gold-vivid-40:#c2850c;--ogds-color-gold-vivid-50:#936f38;--ogds-color-gold-vivid-60:#7a591a;--ogds-color-gold-vivid-70:#5c410a;--ogds-color-gold-vivid-80:#3b2b15;--ogds-color-gray-cool-1:#fbfcfd;--ogds-color-gray-cool-2:#f7f9fa;--ogds-color-gray-cool-3:#f5f6f7;--ogds-color-gray-cool-4:#f1f3f6;--ogds-color-gray-cool-5:#edeff0;--ogds-color-gray-cool-10:#dfe1e2;--ogds-color-gray-cool-20:#c6cace;--ogds-color-gray-cool-30:#a9aeb1;--ogds-color-gray-cool-40:#8d9297;--ogds-color-gray-cool-50:#71767a;--ogds-color-gray-cool-60:#565c65;--ogds-color-gray-cool-70:#3d4551;--ogds-color-gray-cool-80:#2d2e2f;--ogds-color-gray-cool-90:#1c1d1f;--ogds-color-gray-warm-1:#fcfcfb;--ogds-color-gray-warm-2:#f9f9f7;--ogds-color-gray-warm-3:#f6f6f2;--ogds-color-gray-warm-4:#f5f5f0;--ogds-color-gray-warm-5:#f0f0ec;--ogds-color-gray-warm-10:#e6e6e2;--ogds-color-gray-warm-20:#cac9c0;--ogds-color-gray-warm-30:#afaea2;--ogds-color-gray-warm-40:#929285;--ogds-color-gray-warm-50:#76766a;--ogds-color-gray-warm-60:#5d5d52;--ogds-color-gray-warm-70:#454540;--ogds-color-gray-warm-80:#2e2e2a;--ogds-color-gray-warm-90:#171716;--ogds-color-gray-1:#fcfcfc;--ogds-color-gray-2:#f9f9f9;--ogds-color-gray-3:#f6f6f6;--ogds-color-gray-4:#f3f3f3;--ogds-color-gray-5:#f0f0f0;--ogds-color-gray-10:#e6e6e6;--ogds-color-gray-20:#c9c9c9;--ogds-color-gray-30:#adadad;--ogds-color-gray-40:#919191;--ogds-color-gray-50:#757575;--ogds-color-gray-60:#5c5c5c;--ogds-color-gray-70:#454545;--ogds-color-gray-80:#2e2e2e;--ogds-color-gray-90:#1b1b1b;--ogds-color-gray-100:#000;--ogds-color-green-cool-5:#ecf3ec;--ogds-color-green-cool-10:#dbebde;--ogds-color-green-cool-20:#b4d0b9;--ogds-color-green-cool-30:#86b98e;--ogds-color-green-cool-40:#5e9f69;--ogds-color-green-cool-50:#4d8055;--ogds-color-green-cool-60:#446443;--ogds-color-green-cool-70:#37493b;--ogds-color-green-cool-80:#28312a;--ogds-color-green-cool-90:#1a1f1a;--ogds-color-green-cool-vivid-5:#e3f5e1;--ogds-color-green-cool-vivid-10:#b7f5bd;--ogds-color-green-cool-vivid-20:#70e17b;--ogds-color-green-cool-vivid-30:#21c834;--ogds-color-green-cool-vivid-40:#00a91c;--ogds-color-green-cool-vivid-50:#008817;--ogds-color-green-cool-vivid-60:#216e1f;--ogds-color-green-cool-vivid-70:#154c21;--ogds-color-green-cool-vivid-80:#19311e;--ogds-color-green-warm-5:#f1f4d7;--ogds-color-green-warm-10:#e7eab7;--ogds-color-green-warm-20:#cbd17a;--ogds-color-green-warm-30:#a6b557;--ogds-color-green-warm-40:#8a984b;--ogds-color-green-warm-50:#6f7a41;--ogds-color-green-warm-60:#5a5f38;--ogds-color-green-warm-70:#45472f;--ogds-color-green-warm-80:#2d2f21;--ogds-color-green-warm-90:#171712;--ogds-color-green-warm-vivid-5:#f5fbc1;--ogds-color-green-warm-vivid-10:#e7f434;--ogds-color-green-warm-vivid-20:#c5d30a;--ogds-color-green-warm-vivid-30:#a3b72c;--ogds-color-green-warm-vivid-40:#7e9c1d;--ogds-color-green-warm-vivid-50:#6a7d00;--ogds-color-green-warm-vivid-60:#5a6613;--ogds-color-green-warm-vivid-70:#4b4e10;--ogds-color-green-warm-vivid-80:#38380b;--ogds-color-green-5:#eaf4dd;--ogds-color-green-10:#dfeacd;--ogds-color-green-20:#b8d293;--ogds-color-green-30:#9bb672;--ogds-color-green-40:#7d9b4e;--ogds-color-green-50:#607f35;--ogds-color-green-60:#4c6424;--ogds-color-green-70:#3c4a29;--ogds-color-green-80:#293021;--ogds-color-green-90:#161814;--ogds-color-green-vivid-5:#ddf9c7;--ogds-color-green-vivid-10:#c5ee93;--ogds-color-green-vivid-20:#98d035;--ogds-color-green-vivid-30:#7fb135;--ogds-color-green-vivid-40:#719f2a;--ogds-color-green-vivid-50:#538200;--ogds-color-green-vivid-60:#466c04;--ogds-color-green-vivid-70:#2f4a0b;--ogds-color-green-vivid-80:#243413;--ogds-color-indigo-cool-5:#eef0f9;--ogds-color-indigo-cool-10:#e1e6f9;--ogds-color-indigo-cool-20:#bbc8f5;--ogds-color-indigo-cool-30:#96abee;--ogds-color-indigo-cool-40:#6b8ee8;--ogds-color-indigo-cool-50:#496fd8;--ogds-color-indigo-cool-60:#3f57a6;--ogds-color-indigo-cool-70:#374274;--ogds-color-indigo-cool-80:#292d42;--ogds-color-indigo-cool-90:#151622;--ogds-color-indigo-cool-vivid-5:#edf0ff;--ogds-color-indigo-cool-vivid-10:#dee5ff;--ogds-color-indigo-cool-vivid-20:#b8c8ff;--ogds-color-indigo-cool-vivid-30:#94adff;--ogds-color-indigo-cool-vivid-40:#628ef4;--ogds-color-indigo-cool-vivid-50:#4866ff;--ogds-color-indigo-cool-vivid-60:#3e4ded;--ogds-color-indigo-cool-vivid-70:#222fbf;--ogds-color-indigo-cool-vivid-80:#1b2b85;--ogds-color-indigo-warm-5:#f1eff7;--ogds-color-indigo-warm-10:#e7e3fa;--ogds-color-indigo-warm-20:#cbc4f2;--ogds-color-indigo-warm-30:#afa5e8;--ogds-color-indigo-warm-40:#9287d8;--ogds-color-indigo-warm-50:#7665d1;--ogds-color-indigo-warm-60:#5e519e;--ogds-color-indigo-warm-70:#453c7b;--ogds-color-indigo-warm-80:#2e2c40;--ogds-color-indigo-warm-90:#18161d;--ogds-color-indigo-warm-vivid-5:#f5f2ff;--ogds-color-indigo-warm-vivid-10:#e4deff;--ogds-color-indigo-warm-vivid-20:#cfc4fd;--ogds-color-indigo-warm-vivid-30:#b69fff;--ogds-color-indigo-warm-vivid-40:#967efb;--ogds-color-indigo-warm-vivid-50:#745fe9;--ogds-color-indigo-warm-vivid-60:#5942d2;--ogds-color-indigo-warm-vivid-70:#3d2c9d;--ogds-color-indigo-warm-vivid-80:#261f5b;--ogds-color-indigo-5:#efeff8;--ogds-color-indigo-10:#e5e4fa;--ogds-color-indigo-20:#c5c5f3;--ogds-color-indigo-30:#a5a8eb;--ogds-color-indigo-40:#8889db;--ogds-color-indigo-50:#676cc8;--ogds-color-indigo-60:#4d52af;--ogds-color-indigo-70:#3d4076;--ogds-color-indigo-80:#2b2c40;--ogds-color-indigo-90:#16171f;--ogds-color-indigo-vivid-5:#f0f0ff;--ogds-color-indigo-vivid-10:#e0e0ff;--ogds-color-indigo-vivid-20:#ccceff;--ogds-color-indigo-vivid-30:#a3a7fa;--ogds-color-indigo-vivid-40:#8289ff;--ogds-color-indigo-vivid-50:#656bd7;--ogds-color-indigo-vivid-60:#4a50c4;--ogds-color-indigo-vivid-70:#3333a3;--ogds-color-indigo-vivid-80:#212463;--ogds-color-magenta-5:#f9f0f2;--ogds-color-magenta-10:#f6e1e8;--ogds-color-magenta-20:#f0bbcc;--ogds-color-magenta-30:#e895b3;--ogds-color-magenta-40:#e0699f;--ogds-color-magenta-50:#c84281;--ogds-color-magenta-60:#8b4566;--ogds-color-magenta-70:#66364b;--ogds-color-magenta-80:#402731;--ogds-color-magenta-90:#1b1617;--ogds-color-magenta-vivid-5:#fff2f5;--ogds-color-magenta-vivid-10:#ffddea;--ogds-color-magenta-vivid-20:#ffb4cf;--ogds-color-magenta-vivid-30:#ff87b2;--ogds-color-magenta-vivid-40:#fd4496;--ogds-color-magenta-vivid-50:#d72d79;--ogds-color-magenta-vivid-60:#ab2165;--ogds-color-magenta-vivid-70:#731f44;--ogds-color-magenta-vivid-80:#4f172e;--ogds-color-mint-cool-5:#e0f7f6;--ogds-color-mint-cool-10:#c4eeeb;--ogds-color-mint-cool-20:#9bd4cf;--ogds-color-mint-cool-30:#6fbab3;--ogds-color-mint-cool-40:#4f9e99;--ogds-color-mint-cool-50:#40807e;--ogds-color-mint-cool-60:#376462;--ogds-color-mint-cool-70:#2a4b45;--ogds-color-mint-cool-80:#203131;--ogds-color-mint-cool-90:#111818;--ogds-color-mint-cool-vivid-5:#d5fbf3;--ogds-color-mint-cool-vivid-10:#7efbe1;--ogds-color-mint-cool-vivid-20:#29e1cb;--ogds-color-mint-cool-vivid-30:#1dc2ae;--ogds-color-mint-cool-vivid-40:#00a398;--ogds-color-mint-cool-vivid-50:#008480;--ogds-color-mint-cool-vivid-60:#0f6460;--ogds-color-mint-cool-vivid-70:#0b4b3f;--ogds-color-mint-cool-vivid-80:#123131;--ogds-color-mint-5:#dbf6ed;--ogds-color-mint-10:#c7efe2;--ogds-color-mint-20:#92d9bb;--ogds-color-mint-30:#5abf95;--ogds-color-mint-40:#34a37e;--ogds-color-mint-50:#2e8367;--ogds-color-mint-60:#286846;--ogds-color-mint-70:#204e34;--ogds-color-mint-80:#193324;--ogds-color-mint-90:#0d1a12;--ogds-color-mint-vivid-5:#c9fbeb;--ogds-color-mint-vivid-10:#83fcd4;--ogds-color-mint-vivid-20:#0ceda6;--ogds-color-mint-vivid-30:#04c585;--ogds-color-mint-vivid-40:#00a871;--ogds-color-mint-vivid-50:#008659;--ogds-color-mint-vivid-60:#146947;--ogds-color-mint-vivid-70:#0c4e29;--ogds-color-mint-vivid-80:#0d351e;--ogds-color-orange-warm-5:#faeee5;--ogds-color-orange-warm-10:#fbe0d0;--ogds-color-orange-warm-20:#f7bca2;--ogds-color-orange-warm-30:#f3966d;--ogds-color-orange-warm-40:#e17141;--ogds-color-orange-warm-50:#bd5727;--ogds-color-orange-warm-60:#914734;--ogds-color-orange-warm-70:#633a32;--ogds-color-orange-warm-80:#3d2925;--ogds-color-orange-warm-90:#1c1615;--ogds-color-orange-warm-vivid-5:#fff3ea;--ogds-color-orange-warm-vivid-10:#ffe2d1;--ogds-color-orange-warm-vivid-20:#fbbaa7;--ogds-color-orange-warm-vivid-30:#fc906d;--ogds-color-orange-warm-vivid-40:#ff580a;--ogds-color-orange-warm-vivid-50:#cf4900;--ogds-color-orange-warm-vivid-60:#a72f10;--ogds-color-orange-warm-vivid-70:#782312;--ogds-color-orange-warm-vivid-80:#3d231d;--ogds-color-orange-5:#f6efe9;--ogds-color-orange-10:#f2e4d4;--ogds-color-orange-20:#f3bf90;--ogds-color-orange-30:#f09860;--ogds-color-orange-40:#dd7533;--ogds-color-orange-50:#a86437;--ogds-color-orange-60:#775540;--ogds-color-orange-70:#524236;--ogds-color-orange-80:#332d27;--ogds-color-orange-90:#1b1614;--ogds-color-orange-vivid-5:#fef2e4;--ogds-color-orange-vivid-10:#fce2c5;--ogds-color-orange-vivid-20:#ffbc78;--ogds-color-orange-vivid-30:#fa9441;--ogds-color-orange-vivid-40:#e66f0e;--ogds-color-orange-vivid-50:#c05600;--ogds-color-orange-vivid-60:#8c471c;--ogds-color-orange-vivid-70:#5f3617;--ogds-color-orange-vivid-80:#352313;--ogds-color-red-cool-5:#f8eff1;--ogds-color-red-cool-10:#f3e1e4;--ogds-color-red-cool-20:#ecbec6;--ogds-color-red-cool-30:#e09aa6;--ogds-color-red-cool-40:#e16b80;--ogds-color-red-cool-50:#cd425b;--ogds-color-red-cool-60:#9e394b;--ogds-color-red-cool-70:#68363f;--ogds-color-red-cool-80:#40282c;--ogds-color-red-cool-90:#1e1517;--ogds-color-red-cool-vivid-5:#fff2f5;--ogds-color-red-cool-vivid-10:#f8dfe2;--ogds-color-red-cool-vivid-20:#f8b9c5;--ogds-color-red-cool-vivid-30:#fd8ba0;--ogds-color-red-cool-vivid-40:#f45d79;--ogds-color-red-cool-vivid-50:#e41d3d;--ogds-color-red-cool-vivid-60:#b21d38;--ogds-color-red-cool-vivid-70:#822133;--ogds-color-red-cool-vivid-80:#4f1c24;--ogds-color-red-warm-5:#f6efea;--ogds-color-red-warm-10:#f4e3db;--ogds-color-red-warm-20:#ecc0a7;--ogds-color-red-warm-30:#dca081;--ogds-color-red-warm-40:#d27a56;--ogds-color-red-warm-50:#c3512c;--ogds-color-red-warm-60:#805039;--ogds-color-red-warm-70:#524236;--ogds-color-red-warm-80:#332d29;--ogds-color-red-warm-90:#1f1c18;--ogds-color-red-warm-vivid-5:#fff5ee;--ogds-color-red-warm-vivid-10:#fce1d4;--ogds-color-red-warm-vivid-20:#f6bd9c;--ogds-color-red-warm-vivid-30:#f39268;--ogds-color-red-warm-vivid-40:#ef5e25;--ogds-color-red-warm-vivid-50:#d54309;--ogds-color-red-warm-vivid-60:#9c3d10;--ogds-color-red-warm-vivid-70:#63340f;--ogds-color-red-warm-vivid-80:#3e2a1e;--ogds-color-red-5:#f9eeee;--ogds-color-red-10:#f8e1de;--ogds-color-red-20:#f7bbb1;--ogds-color-red-30:#f2938c;--ogds-color-red-40:#e9695f;--ogds-color-red-50:#d83933;--ogds-color-red-60:#a23737;--ogds-color-red-70:#6f3331;--ogds-color-red-80:#3e2927;--ogds-color-red-90:#1b1616;--ogds-color-red-vivid-5:#fff3f2;--ogds-color-red-vivid-10:#fde0db;--ogds-color-red-vivid-20:#fdb8ae;--ogds-color-red-vivid-30:#ff8d7b;--ogds-color-red-vivid-40:#fb5a47;--ogds-color-red-vivid-50:#e52207;--ogds-color-red-vivid-60:#b50909;--ogds-color-red-vivid-70:#8b0a03;--ogds-color-red-vivid-80:#5c1111;--ogds-color-violet-warm-5:#f8f0f9;--ogds-color-violet-warm-10:#f6dff8;--ogds-color-violet-warm-20:#e2bee4;--ogds-color-violet-warm-30:#d29ad8;--ogds-color-violet-warm-40:#bf77c8;--ogds-color-violet-warm-50:#b04abd;--ogds-color-violet-warm-60:#864381;--ogds-color-violet-warm-70:#5c395a;--ogds-color-violet-warm-80:#382936;--ogds-color-violet-warm-90:#1b151b;--ogds-color-violet-warm-vivid-5:#fef2ff;--ogds-color-violet-warm-vivid-10:#fbdcff;--ogds-color-violet-warm-vivid-20:#f4b2ff;--ogds-color-violet-warm-vivid-30:#ee83ff;--ogds-color-violet-warm-vivid-40:#d85bef;--ogds-color-violet-warm-vivid-50:#be32d0;--ogds-color-violet-warm-vivid-60:#93348c;--ogds-color-violet-warm-vivid-70:#711e6c;--ogds-color-violet-warm-vivid-80:#481441;--ogds-color-violet-5:#f4f1f9;--ogds-color-violet-10:#ebe3f9;--ogds-color-violet-20:#d0c3e9;--ogds-color-violet-30:#b8a2e3;--ogds-color-violet-40:#9d84d2;--ogds-color-violet-50:#8168b3;--ogds-color-violet-60:#665190;--ogds-color-violet-70:#4c3d69;--ogds-color-violet-80:#312b3f;--ogds-color-violet-90:#18161d;--ogds-color-violet-vivid-5:#f7f2ff;--ogds-color-violet-vivid-10:#ede3ff;--ogds-color-violet-vivid-20:#d5bfff;--ogds-color-violet-vivid-30:#c39deb;--ogds-color-violet-vivid-40:#ad79e9;--ogds-color-violet-vivid-50:#9355dc;--ogds-color-violet-vivid-60:#783cb9;--ogds-color-violet-vivid-70:#54278f;--ogds-color-violet-vivid-80:#39215e;--ogds-color-white-transparent-5:#ffffff03;--ogds-color-white-transparent-10:#ffffff1a;--ogds-color-white-transparent-20:#fff3;--ogds-color-white-transparent-30:#ffffff4d;--ogds-color-white-transparent-40:#fff6;--ogds-color-white-transparent-50:#ffffff80;--ogds-color-white-transparent-60:#fff9;--ogds-color-white-transparent-70:#ffffffb3;--ogds-color-white-transparent-80:#fffc;--ogds-color-white-transparent-90:#ffffffe6;--ogds-color-yellow-5:#faf3d1;--ogds-color-yellow-10:#f5e6af;--ogds-color-yellow-20:#e6c74c;--ogds-color-yellow-30:#c9ab48;--ogds-color-yellow-40:#a88f48;--ogds-color-yellow-50:#8a7237;--ogds-color-yellow-60:#6b5a39;--ogds-color-yellow-70:#504332;--ogds-color-yellow-80:#332d27;--ogds-color-yellow-90:#1a1614;--ogds-color-yellow-vivid-5:#fff5c2;--ogds-color-yellow-vivid-10:#fee685;--ogds-color-yellow-vivid-20:#face00;--ogds-color-yellow-vivid-30:#ddaa01;--ogds-color-yellow-vivid-40:#b38c00;--ogds-color-yellow-vivid-50:#947100;--ogds-color-yellow-vivid-60:#776017;--ogds-color-yellow-vivid-70:#5c4809;--ogds-color-yellow-vivid-80:#422d19}`,t=o.css`:root,:host{--ogds-column-gap-0:0px;--ogds-column-gap-1:.5rem;--ogds-column-gap-2:1rem;--ogds-column-gap-3:1.5rem;--ogds-column-gap-4:2rem;--ogds-column-gap-5:2.5rem;--ogds-column-gap-6:3rem;--ogds-column-gap-2px:2px;--ogds-column-gap-05:.25rem;--ogds-grid-base:8px;--ogds-input-width-2xs:5ex;--ogds-input-width-xs:9ex;--ogds-input-width-sm:13ex;--ogds-input-width-md:20ex;--ogds-input-width-lg:30ex;--ogds-input-width-xl:40ex;--ogds-input-width-2xl:50ex;--ogds-spacing-1:.5rem;--ogds-spacing-2:1rem;--ogds-spacing-3:1.5rem;--ogds-spacing-4:2rem;--ogds-spacing-5:2.5rem;--ogds-spacing-6:3rem;--ogds-spacing-7:3.5rem;--ogds-spacing-8:4rem;--ogds-spacing-9:4.5rem;--ogds-spacing-10:5rem;--ogds-spacing-15:7.5rem;--ogds-spacing-105:.75rem;--ogds-spacing-205:1.25rem;--ogds-spacing-05:.25rem;--ogds-spacing-neg-05:-.25rem;--ogds-spacing-neg-1:-.5rem;--ogds-spacing-neg-105:-.75rem;--ogds-spacing-neg-2:-1rem;--ogds-spacing-neg-205:-1.25rem;--ogds-spacing-neg-3:-1.5rem;--ogds-spacing-neg-4:-2rem;--ogds-spacing-neg-5:-2.5rem;--ogds-spacing-neg-6:-3rem;--ogds-spacing-neg-7:-3.5rem;--ogds-spacing-neg-8:-4rem;--ogds-spacing-neg-9:-4.5rem;--ogds-spacing-neg-10:-5rem;--ogds-spacing-neg-15:-7.5rem;--ogds-site-margins-mobile-width:1rem;--ogds-site-margins-width:2rem;--ogds-size-touch-target:3rem}`,v=o.css`:root,:host{--ogds-breakpoint-card:10rem;--ogds-breakpoint-card-lg:15rem;--ogds-breakpoint-mobile:20rem;--ogds-breakpoint-mobile-lg:30rem;--ogds-breakpoint-tablet:40rem;--ogds-breakpoint-tablet-lg:55rem;--ogds-breakpoint-desktop:64rem;--ogds-breakpoint-desktop-lg:75rem;--ogds-breakpoint-widescreen:87.5rem}`,f=o.css`:host{--ogds-banner-background-color:var(--ogds-color-base-lightest,#f0f0f0);--ogds-banner-button-close-background-color:var(--ogds-color-base-lighter,#dfe1e2);--ogds-banner-focus-outline-color:var(--ogds-color-blue-vivid-40,#2491ff);--ogds-banner-font-family:system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--ogds-banner-font-size-xs:.75rem;--ogds-banner-font-size-sm:.875rem;--ogds-banner-font-size-base:.94rem;--ogds-banner-icon-gov-color:var(--ogds-color-blue-50,#2378c3);--ogds-banner-icon-https-color:var(--ogds-color-green-vivid-40,#719f2a);--ogds-banner-line-height-sm:1.2;--ogds-banner-line-height-base:1.6;--ogds-banner-link-color:var(--ogds-color-blue-vivid-60,#005ea2);--ogds-banner-link-hover-color:var(--ogds-color-blue-warm-vivid-70,#1a4480);--ogds-banner-max-width:var(--ogds-breakpoint-desktop);--ogds-banner-text-color:var(--ogds-color-base-darkest,#1b1b1b);--ogds-icon-lock:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='64' viewBox='0 0 52 64' class='usa-banner__lock-image' role='img' aria-labelledby='banner-lock-description-default' focusable='false'%3E%3Ctitle id='banner-lock-title-default'%3ELock%3C/title%3E%3Cdesc id='banner-lock-description-default'%3ELocked padlock icon%3C/desc%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z'%3E%3C/path%3E%3C/svg%3E\")}*{box-sizing:border-box}section{background-color:var(--ogds-banner-background-color);box-sizing:border-box;font-family:var(--ogds-banner-font-family);font-size:var(--ogds-banner-font-size-xs);text-align:start}section *,section :before,section :after{box-sizing:border-box}@media(min-width:40em){section{font-size:var(--ogds-banner-font-size-xs);padding-block-end:0}}section .usa-accordion{font-family:inherit}section .grid-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--ogds-breakpoint-tablet) / 2)),1fr));display:grid}@media(min-width:40em){section .grid-row{gap:var(--ogds-spacing-2)}}@media(min-width:64em){section .grid-row{gap:calc(var(--ogds-spacing-05) / 2)}}.grid-col-auto{flex:0 auto}.grid-col-fill{flex:1 1 0;width:auto;min-width:1px;max-width:100%}@media(min-width:40em){.tablet\\:grid-col-auto{flex:0 auto;width:auto;max-width:100%}}section .tablet\\:grid-col-6{gap:var(--ogds-spacing-1);flex:none;width:100%}header,.content{color:var(--ogds-banner-text-color)}.content{font-size:var(--ogds-banner-font-size-base);line-height:var(--ogds-banner-line-height-base);max-width:var(--ogds-banner-max-width);padding-block-start:var(--ogds-spacing-05);padding-block-end:var(--ogds-spacing-2);padding-inline:var(--ogds-spacing-1);width:100%;margin-inline:auto;overflow:hidden}@media(min-width:40em){.content{padding-block:var(--ogds-spacing-3)}}@media(min-width:64em){.content{padding-inline:var(--ogds-spacing-4)}}.content p:first-child{margin:0}.inner{max-width:var(--ogds-banner-max-width);flex-wrap:nowrap;align-items:flex-start;margin-inline:auto;padding-inline-start:var(--ogds-spacing-2);padding-inline-end:var(--ogds-spacing-05);display:flex}@media(min-width:40em){.inner{align-items:center}}@media(min-width:64em){.inner{padding-inline:var(--ogds-spacing-4)}}header{font-size:var(--ogds-banner-font-size-xs);min-height:var(--ogds-size-touch-target);padding-block:var(--ogds-spacing-1);font-weight:400;position:relative}@media(min-width:40em){header{min-height:0;padding-block:var(--ogds-spacing-05)}}.header-text{font-size:var(--ogds-banner-font-size-xs);line-height:var(--ogds-banner-line-height-sm);margin-block:0}.header-flag{float:left;width:var(--ogds-spacing-2);margin-inline-end:var(--ogds-spacing-1);padding-block-start:0}.header-action{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;line-height:var(--ogds-banner-line-height-sm);background:0 0;border:none;margin-block:2px 0;padding:0;text-decoration:underline}.header-action:hover{color:var(--ogds-banner-link-hover-color)}.header-action:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);vertical-align:middle;background-color:currentColor;width:1rem;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.expanded .header-action{display:none}@media(min-width:40em){.header-action{display:none}}@media(forced-colors:active){.header-action{color:linktext}.header-action:after{background-color:buttontext}}header.expanded{padding-inline-end:calc(var(--ogds-size-touch-target) + var(--ogds-spacing-1))}@media(min-width:40em){header.expanded{font-size:var(--ogds-banner-font-size-sm);min-height:0;padding-inline-end:0;font-weight:400;display:block}}header.expanded .inner{margin-inline-start:0}@media(min-width:40em){header.expanded .inner{margin-inline-start:auto}}header.expanded .header-action{display:none}button{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;font-size:var(--ogds-banner-font-size-xs);height:auto;line-height:var(--ogds-banner-line-height-sm);outline:inherit;background:0 0;border:none;width:auto;padding:0;padding-block-start:0;padding-inline-start:0;text-decoration:none;display:block;position:absolute;top:0;bottom:0;left:0}button:hover{color:var(--ogds-banner-link-hover-color)}@media(max-width:39.99em){button{width:100%}button:enabled:focus{outline-offset:-.25rem}}button:not([disabled]):focus{outline:var(--ogds-spacing-05) solid var(--ogds-banner-focus-outline-color)}@media(min-width:40em){button{margin-inline-start:var(--ogds-spacing-1);display:inline;position:relative;top:auto;bottom:auto;left:auto}button:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);background-color:currentColor;width:1rem;margin-block:0;display:inline-block;position:absolute;top:0;right:-18px;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}button:hover{text-decoration:none}}@media(forced-colors:active){button:after,button:hover:after{background-color:buttontext}}button[aria-expanded=false],button[aria-expanded=false]:hover,button[aria-expanded=true],button[aria-expanded=true]:hover{background-image:none}@media(forced-colors:active){button[aria-expanded=false]:before,button[aria-expanded=false]:hover:before,button[aria-expanded=true]:before,button[aria-expanded=true]:hover:before{content:none}}@media(max-width:39.99em){button[aria-expanded=true]:before{background-color:var(--ogds-banner-button-close-background-color);content:\"\";height:var(--ogds-size-touch-target);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0}button[aria-expanded=true]:after{background-color:var(--ogds-banner-link-color);content:\"\";height:var(--ogds-size-touch-target);-webkit-mask-image:var(--ogds-icon-close);mask-image:var(--ogds-icon-close);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1.5rem 1.5rem;mask-size:1.5rem 1.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}@media(min-width:40em){button[aria-expanded=true]{height:auto;padding:0;position:relative}button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{-webkit-mask-image:var(--ogds-icon-expand-less);mask-image:var(--ogds-icon-expand-less);position:absolute}}@media(forced-colors:active){button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{background-color:buttontext}}.button-text{text-decoration:underline;position:absolute;left:-999em;right:auto}@media(min-width:40em){.button-text{display:inline;position:static;left:auto;right:auto}}@media(forced-colors:active){.button-text{color:linktext}}.guidance{max-width:62ex;align-items:flex-start;padding-block-start:var(--ogds-spacing-2);display:flex}@media(max-width:39.99em){.guidance{padding-inline-end:.75rem}}@media(min-width:40em){.guidance{padding-block-start:0;padding-inline-end:var(--ogds-spacing-1)}}.icon{width:var(--ogds-spacing-5)}.icon-lock,::slotted(.usa-banner__icon-lock){height:1.5ex;-webkit-mask-image:var(--ogds-icon-lock);mask-image:var(--ogds-icon-lock);background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:cover;width:1.21875ex;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov,.icon-https{padding-inline-start:calc(var(--ogds-spacing-5) + var(--ogds-spacing-1));position:relative}:is(.icon-gov,.icon-https):before{content:\"\";height:var(--ogds-spacing-5);width:var(--ogds-spacing-5);display:inline-block;position:absolute;top:0;left:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov:before{background-color:var(--ogds-banner-icon-gov-color);-webkit-mask-image:var(--ogds-icon-gov);mask-image:var(--ogds-icon-gov)}.icon-https:before{background-color:var(--ogds-banner-icon-https-color);-webkit-mask-image:var(--ogds-icon-https);mask-image:var(--ogds-icon-https)}`,m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==",b="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e",p="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e",w="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e",h="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e",u="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e",s={en:{banner:{label:"Official website of the United States government",text:"An official website of the United States government",action:"Here’s how you know"},domain:{heading:"Official websites use",text1:"A",text2:"website belongs to an official government organization in the United States."},https:{heading1:"Secure",heading2:"websites use HTTPS",text1:"A <strong>lock</strong>",text2:"or <strong>https://</strong> means you’ve safely connected to the",text3:"website. Share sensitive information only on official, secure websites."}},es:{banner:{label:"Un sitio oficial del Gobierno de Estados Unidos",text:"Un sitio oficial del Gobierno de Estados Unidos",action:"Así es como usted puede verificarlo"},domain:{heading:"Los sitios web oficiales usan",text1:"Un sitio web",text2:"pertenece a una organización oficial del Gobierno de Estados Unidos."},https:{heading1:"Los sitios web seguros",heading2:"usan HTTPS",text1:"Un <strong>candado</strong>",text2:"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web",text3:"Comparta información sensible sólo en sitios web oficiales y seguros."}}},a=class a extends g.OgdsElement{toggle(){this.isOpen=!this.isOpen;const d=this.shadowRoot?.querySelector(".content");d&&d.toggleAttribute("hidden")}constructor(){super(),this.flagSrc=m,this.lang="en",this.isOpen=!1,this.tld="gov"}get _bannerText(){return s[this.lang]||s.en}get _actionText(){return this.querySelector('[slot="banner-action"]')?.textContent}domainTemplate(d){const{domain:e}=this._bannerText;return o.html`
2
- <div class="icon-gov">
3
- <p>
4
- <strong>
5
- <slot name="domain-heading"> ${e.heading} .${d} </slot>
6
- </strong>
7
- <br />
8
- <slot name="domain-text">
9
- ${e.text1} <strong>.${d}</strong> ${e.text2}
10
- </slot>
11
- </p>
12
- </div>
13
- `}lockIcon(){return o.html`
14
- <span
15
- class="icon-lock"
16
- role="img"
17
- aria-label="Locked padlock icon"
18
- ></span>
19
- `}httpsTemplate(d){const{https:e}=this._bannerText;return o.html`
20
- <div class="icon-https">
21
- <p>
22
- <strong>
23
- <slot name="https-heading">
24
- ${e.heading1} .${d} ${e.heading2}
25
- </slot> </strong
26
- ><br />
27
- <slot name="https-text">
28
- ${c.unsafeHTML(e.text1)} (${this.lockIcon()})
29
- ${c.unsafeHTML(e.text2)} .${d} ${e.text3}
30
- </slot>
31
- </p>
32
- </div>
33
- `}render(){const d={expanded:this.isOpen},e=this.tld==="mil"?"mil":"gov",{banner:r}=this._bannerText;return o.html`
34
- <section aria-label=${this.label||r.label}>
35
- <div class="usa-accordion">
36
- <header class="${l.classMap(d)}">
37
- <div class="inner">
38
- <div class="grid-col-auto">
39
- <img
40
- aria-hidden="true"
41
- class="header-flag"
42
- src=${this.flagSrc}
43
- alt=""
44
- />
45
- </div>
46
- <div
47
- class="grid-col-fill tablet:grid-col-auto"
48
- aria-hidden="true"
49
- >
50
- <p class="header-text">
51
- <slot name="banner-text">${r.text}</slot>
52
- </p>
53
- <!--
54
- Since the header-action text below is underlined, the slot and p
55
- need to be on the same line to avoid one extra space of underline
56
- before the expand icon.
57
- -->
58
- <!-- prettier-ignore -->
59
- <p class="header-action"><slot name="banner-action">${r.action}</slot></p>
60
- </div>
61
- <button
62
- type="button"
63
- class="usa-accordion__button"
64
- aria-expanded="${this.isOpen}"
65
- aria-controls="gov-banner-default"
66
- @click="${this.toggle}"
67
- >
68
- <span class="button-text">
69
- ${this._actionText||r.action}
70
- </span>
71
- </button>
72
- </div>
73
- </header>
74
- <div class="content usa-accordion__content" hidden>
75
- <div class="grid-row grid-gap-lg">
76
- <div class="guidance tablet:grid-col-6">
77
- ${this.domainTemplate(e)}
78
- </div>
79
- <div class="guidance tablet:grid-col-6">
80
- ${this.httpsTemplate(e)}
81
- </div>
82
- </div>
83
- </div>
84
- </div>
85
- </section>
86
- `}};a.properties={flagSrc:{type:String},lang:{type:String,reflect:!0},isOpen:{state:!0},label:{type:String},tld:{type:String,reflect:!0}},a.styles=[o.css`
87
- :host {
88
- /** Icons */
89
- --ogds-icon-close: url("${o.unsafeCSS(w)}");
90
- --ogds-icon-expand-less: url("${o.unsafeCSS(u)}");
91
- --ogds-icon-expand-more: url("${o.unsafeCSS(h)}");
92
- --ogds-icon-gov: url("${o.unsafeCSS(b)}");
93
- --ogds-icon-https: url("${o.unsafeCSS(p)}");
94
- }
95
- `,v,n,t,f];let i=a;g.defineCustomElement("usa-banner",i);exports.UsaBanner=i;
package/dist/components/usa-banner.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"usa-banner.cjs","sources":["../../node_modules/@uswds/uswds/dist/img/us_flag_small.png","../../node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg","../../node_modules/@uswds/uswds/dist/img/icon-https.svg","../../src/shared/icons/close.svg","../../src/shared/icons/expand_more.svg","../../src/shared/icons/expand_less.svg","../../src/components/usa-banner/index.ts"],"sourcesContent":["export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e\"","import { html, css, unsafeCSS } from \"lit\";\nimport { OgdsElement } from \"../../core/OgdsElement\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport breakpointTokens from \"@ogds/tokens/styles/css/breakpoints.css\";\nimport styles from \"./usa-banner.css\";\n\nimport usFlagSmall from \"@uswds/uswds/img/us_flag_small.png\";\nimport iconDotGov from \"@uswds/uswds/img/icon-dot-gov.svg\";\nimport iconHttps from \"@uswds/uswds/img/icon-https.svg\";\nimport iconClose from \"../../shared/icons/close.svg\";\nimport iconExpandMore from \"../../shared/icons/expand_more.svg\";\nimport iconExpandLess from \"../../shared/icons/expand_less.svg\";\nimport { defineCustomElement } from \"../../utils\";\n\ninterface UsaBannerTranslations {\n banner: {\n label: string;\n text: string;\n action: string;\n };\n domain: {\n heading: string;\n text1: string;\n text2: string;\n };\n https: {\n heading1: string;\n heading2: string;\n text1: string;\n text2: string;\n text3: string;\n };\n}\n\ntype SupportedLanguage = \"en\" | \"es\";\n\nconst USA_BANNER_TRANSLATIONS: Record<\n SupportedLanguage,\n UsaBannerTranslations\n> = {\n en: {\n banner: {\n label: \"Official website of the United States government\",\n text: \"An official website of the United States government\",\n action: \"Here’s how you know\",\n },\n domain: {\n heading: \"Official websites use\",\n text1: \"A\",\n text2:\n \"website belongs to an official government organization in the United States.\",\n },\n https: {\n heading1: \"Secure\",\n heading2: \"websites use HTTPS\",\n text1: \"A <strong>lock</strong>\",\n text2:\n \"or <strong>https://</strong> means you’ve safely connected to the\",\n text3:\n \"website. Share sensitive information only on official, secure websites.\",\n },\n },\n es: {\n banner: {\n label: \"Un sitio oficial del Gobierno de Estados Unidos\",\n text: \"Un sitio oficial del Gobierno de Estados Unidos\",\n action: \"Así es como usted puede verificarlo\",\n },\n domain: {\n heading: \"Los sitios web oficiales usan\",\n text1: \"Un sitio web\",\n text2:\n \"pertenece a una organización oficial del Gobierno de Estados Unidos.\",\n },\n https: {\n heading1: \"Los sitios web seguros\",\n heading2: \"usan HTTPS\",\n text1: \"Un <strong>candado</strong>\",\n text2:\n \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\",\n text3:\n \"Comparta información sensible sólo en sitios web oficiales y seguros.\",\n },\n },\n};\n\n/**\n * @summary The usa-banner component.\n *\n * @attribute {string} lang - The element's language.\n * @attribute {string} label - The custom aria label users can override.\n * @attribute {string} tld - The top level domain for the site.\n *\n * @cssprop --ogds-banner-background-color - Sets banner background color.\n * @cssprop --ogds-banner-button-close-background-color - Sets the background color for the close control on smaller viewports.\n * @cssprop --ogds-banner-focus-outline-color - Sets banner focus outline color.\n * @cssprop --ogds-banner-font-family - Sets banner font family.\n * @cssprop --ogds-banner-icon-gov-color - Sets the color for the official government domain icon in the expanded state of the banner.\n * @cssprop --ogds-banner-icon-https-color - Sets the color for the https icon in the expanded state of the banner.\n * @cssprop --ogds-banner-link-color - Sets the default link color.\n * @cssprop --ogds-banner-link-hover-color - Sets the default link color.\n * @cssprop --ogds-banner-text-color - Sets the default text color.\n *\n * @slot banner-text - The text for official government website text.\n * @slot banner-action - Action text label \"Here's how you know.\"\n * @slot domain-heading - Heading text for the domain section.\n * @slot domain-text - Body text for domain section.\n * @slot https-heading - Heading for HTTPs section.\n * @slot https-text - Body text for HTTPs section.\n *\n * @element usa-banner\n */\nexport class UsaBanner extends OgdsElement {\n static properties = {\n flagSrc: { type: String },\n lang: { type: String, reflect: true },\n isOpen: { state: true },\n label: { type: String },\n tld: { type: String, reflect: true },\n };\n\n // Property declarations\n flagSrc!: string;\n lang!: \"en\" | \"es\";\n isOpen!: boolean;\n label!: string;\n tld!: \"gov\" | \"mil\";\n\n toggle() {\n this.isOpen = !this.isOpen;\n const contentElement = this.shadowRoot?.querySelector(\".content\");\n if (contentElement) {\n contentElement.toggleAttribute(\"hidden\");\n }\n }\n\n constructor() {\n super();\n this.flagSrc = usFlagSmall;\n this.lang = \"en\";\n this.isOpen = false;\n this.tld = \"gov\";\n }\n\n // Get English or Spanish strings. Default to English if an unknown `lang` is passed.\n // Ex: <usa-banner lang=\"zy\"></usa-banner>\n protected get _bannerText() {\n return USA_BANNER_TRANSLATIONS[this.lang] || USA_BANNER_TRANSLATIONS[\"en\"];\n }\n\n // Get the action text and use for both mobile & desktop buttons.\n protected get _actionText() {\n const bannerActionText = this.querySelector('[slot=\"banner-action\"]');\n\n return bannerActionText?.textContent;\n }\n\n domainTemplate(tld: string) {\n const { domain } = this._bannerText;\n\n return html`\n <div class=\"icon-gov\">\n <p>\n <strong>\n <slot name=\"domain-heading\"> ${domain.heading} .${tld} </slot>\n </strong>\n <br />\n <slot name=\"domain-text\">\n ${domain.text1} <strong>.${tld}</strong> ${domain.text2}\n </slot>\n </p>\n </div>\n `;\n }\n\n lockIcon() {\n return html`\n <span\n class=\"icon-lock\"\n role=\"img\"\n aria-label=\"Locked padlock icon\"\n ></span>\n `;\n }\n\n httpsTemplate(tld: string) {\n const { https } = this._bannerText;\n\n return html`\n <div class=\"icon-https\">\n <p>\n <strong>\n <slot name=\"https-heading\">\n ${https.heading1} .${tld} ${https.heading2}\n </slot> </strong\n ><br />\n <slot name=\"https-text\">\n ${unsafeHTML(https.text1)} (${this.lockIcon()})\n ${unsafeHTML(https.text2)} .${tld} ${https.text3}\n </slot>\n </p>\n </div>\n `;\n }\n\n static styles = [\n css`\n :host {\n /** Icons */\n --ogds-icon-close: url(\"${unsafeCSS(iconClose)}\");\n --ogds-icon-expand-less: url(\"${unsafeCSS(iconExpandLess)}\");\n --ogds-icon-expand-more: url(\"${unsafeCSS(iconExpandMore)}\");\n --ogds-icon-gov: url(\"${unsafeCSS(iconDotGov)}\");\n --ogds-icon-https: url(\"${unsafeCSS(iconHttps)}\");\n }\n `,\n breakpointTokens,\n colorTokens,\n spacingTokens,\n styles,\n ];\n\n render() {\n const classes = { [\"expanded\"]: this.isOpen };\n // ? Is there a better way to fallback to a default value is passed value doesn't match?\n // Example: User passes `tld=\"zzz\"` --> uses \"gov\" domain instead of `zzz`.\n const tld = this.tld === \"mil\" ? \"mil\" : \"gov\";\n const { banner } = this._bannerText;\n\n return html`\n <section aria-label=${this.label || banner.label}>\n <div class=\"usa-accordion\">\n <header class=\"${classMap(classes)}\">\n <div class=\"inner\">\n <div class=\"grid-col-auto\">\n <img\n aria-hidden=\"true\"\n class=\"header-flag\"\n src=${this.flagSrc}\n alt=\"\"\n />\n </div>\n <div\n class=\"grid-col-fill tablet:grid-col-auto\"\n aria-hidden=\"true\"\n >\n <p class=\"header-text\">\n <slot name=\"banner-text\">${banner.text}</slot>\n </p>\n <!-- \n Since the header-action text below is underlined, the slot and p \n need to be on the same line to avoid one extra space of underline \n before the expand icon.\n -->\n <!-- prettier-ignore -->\n <p class=\"header-action\"><slot name=\"banner-action\">${banner.action}</slot></p>\n </div>\n <button\n type=\"button\"\n class=\"usa-accordion__button\"\n aria-expanded=\"${this.isOpen}\"\n aria-controls=\"gov-banner-default\"\n @click=\"${this.toggle}\"\n >\n <span class=\"button-text\">\n ${this._actionText || banner.action}\n </span>\n </button>\n </div>\n </header>\n <div class=\"content usa-accordion__content\" hidden>\n <div class=\"grid-row grid-gap-lg\">\n <div class=\"guidance tablet:grid-col-6\">\n ${this.domainTemplate(tld)}\n </div>\n <div class=\"guidance tablet:grid-col-6\">\n ${this.httpsTemplate(tld)}\n </div>\n </div>\n </div>\n </div>\n </section>\n `;\n }\n}\n\ndefineCustomElement(\"usa-banner\", UsaBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconExpandMore","iconExpandLess","USA_BANNER_TRANSLATIONS","_UsaBanner","OgdsElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","breakpointTokens","colorTokens","spacingTokens","styles","UsaBanner","defineCustomElement"],"mappings":"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","x_google_ignoreList":[0,1,2]}
package/dist/components/usa-banner.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"usa-banner.js","sources":["../../node_modules/@uswds/uswds/dist/img/us_flag_small.png","../../node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg","../../node_modules/@uswds/uswds/dist/img/icon-https.svg","../../src/shared/icons/close.svg","../../src/shared/icons/expand_more.svg","../../src/shared/icons/expand_less.svg","../../src/components/usa-banner/index.ts"],"sourcesContent":["export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e\"","import { html, css, unsafeCSS } from \"lit\";\nimport { OgdsElement } from \"../../core/OgdsElement\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport breakpointTokens from \"@ogds/tokens/styles/css/breakpoints.css\";\nimport styles from \"./usa-banner.css\";\n\nimport usFlagSmall from \"@uswds/uswds/img/us_flag_small.png\";\nimport iconDotGov from \"@uswds/uswds/img/icon-dot-gov.svg\";\nimport iconHttps from \"@uswds/uswds/img/icon-https.svg\";\nimport iconClose from \"../../shared/icons/close.svg\";\nimport iconExpandMore from \"../../shared/icons/expand_more.svg\";\nimport iconExpandLess from \"../../shared/icons/expand_less.svg\";\nimport { defineCustomElement } from \"../../utils\";\n\ninterface UsaBannerTranslations {\n banner: {\n label: string;\n text: string;\n action: string;\n };\n domain: {\n heading: string;\n text1: string;\n text2: string;\n };\n https: {\n heading1: string;\n heading2: string;\n text1: string;\n text2: string;\n text3: string;\n };\n}\n\ntype SupportedLanguage = \"en\" | \"es\";\n\nconst USA_BANNER_TRANSLATIONS: Record<\n SupportedLanguage,\n UsaBannerTranslations\n> = {\n en: {\n banner: {\n label: \"Official website of the United States government\",\n text: \"An official website of the United States government\",\n action: \"Here’s how you know\",\n },\n domain: {\n heading: \"Official websites use\",\n text1: \"A\",\n text2:\n \"website belongs to an official government organization in the United States.\",\n },\n https: {\n heading1: \"Secure\",\n heading2: \"websites use HTTPS\",\n text1: \"A <strong>lock</strong>\",\n text2:\n \"or <strong>https://</strong> means you’ve safely connected to the\",\n text3:\n \"website. Share sensitive information only on official, secure websites.\",\n },\n },\n es: {\n banner: {\n label: \"Un sitio oficial del Gobierno de Estados Unidos\",\n text: \"Un sitio oficial del Gobierno de Estados Unidos\",\n action: \"Así es como usted puede verificarlo\",\n },\n domain: {\n heading: \"Los sitios web oficiales usan\",\n text1: \"Un sitio web\",\n text2:\n \"pertenece a una organización oficial del Gobierno de Estados Unidos.\",\n },\n https: {\n heading1: \"Los sitios web seguros\",\n heading2: \"usan HTTPS\",\n text1: \"Un <strong>candado</strong>\",\n text2:\n \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\",\n text3:\n \"Comparta información sensible sólo en sitios web oficiales y seguros.\",\n },\n },\n};\n\n/**\n * @summary The usa-banner component.\n *\n * @attribute {string} lang - The element's language.\n * @attribute {string} label - The custom aria label users can override.\n * @attribute {string} tld - The top level domain for the site.\n *\n * @cssprop --ogds-banner-background-color - Sets banner background color.\n * @cssprop --ogds-banner-button-close-background-color - Sets the background color for the close control on smaller viewports.\n * @cssprop --ogds-banner-focus-outline-color - Sets banner focus outline color.\n * @cssprop --ogds-banner-font-family - Sets banner font family.\n * @cssprop --ogds-banner-icon-gov-color - Sets the color for the official government domain icon in the expanded state of the banner.\n * @cssprop --ogds-banner-icon-https-color - Sets the color for the https icon in the expanded state of the banner.\n * @cssprop --ogds-banner-link-color - Sets the default link color.\n * @cssprop --ogds-banner-link-hover-color - Sets the default link color.\n * @cssprop --ogds-banner-text-color - Sets the default text color.\n *\n * @slot banner-text - The text for official government website text.\n * @slot banner-action - Action text label \"Here's how you know.\"\n * @slot domain-heading - Heading text for the domain section.\n * @slot domain-text - Body text for domain section.\n * @slot https-heading - Heading for HTTPs section.\n * @slot https-text - Body text for HTTPs section.\n *\n * @element usa-banner\n */\nexport class UsaBanner extends OgdsElement {\n static properties = {\n flagSrc: { type: String },\n lang: { type: String, reflect: true },\n isOpen: { state: true },\n label: { type: String },\n tld: { type: String, reflect: true },\n };\n\n // Property declarations\n flagSrc!: string;\n lang!: \"en\" | \"es\";\n isOpen!: boolean;\n label!: string;\n tld!: \"gov\" | \"mil\";\n\n toggle() {\n this.isOpen = !this.isOpen;\n const contentElement = this.shadowRoot?.querySelector(\".content\");\n if (contentElement) {\n contentElement.toggleAttribute(\"hidden\");\n }\n }\n\n constructor() {\n super();\n this.flagSrc = usFlagSmall;\n this.lang = \"en\";\n this.isOpen = false;\n this.tld = \"gov\";\n }\n\n // Get English or Spanish strings. Default to English if an unknown `lang` is passed.\n // Ex: <usa-banner lang=\"zy\"></usa-banner>\n protected get _bannerText() {\n return USA_BANNER_TRANSLATIONS[this.lang] || USA_BANNER_TRANSLATIONS[\"en\"];\n }\n\n // Get the action text and use for both mobile & desktop buttons.\n protected get _actionText() {\n const bannerActionText = this.querySelector('[slot=\"banner-action\"]');\n\n return bannerActionText?.textContent;\n }\n\n domainTemplate(tld: string) {\n const { domain } = this._bannerText;\n\n return html`\n <div class=\"icon-gov\">\n <p>\n <strong>\n <slot name=\"domain-heading\"> ${domain.heading} .${tld} </slot>\n </strong>\n <br />\n <slot name=\"domain-text\">\n ${domain.text1} <strong>.${tld}</strong> ${domain.text2}\n </slot>\n </p>\n </div>\n `;\n }\n\n lockIcon() {\n return html`\n <span\n class=\"icon-lock\"\n role=\"img\"\n aria-label=\"Locked padlock icon\"\n ></span>\n `;\n }\n\n httpsTemplate(tld: string) {\n const { https } = this._bannerText;\n\n return html`\n <div class=\"icon-https\">\n <p>\n <strong>\n <slot name=\"https-heading\">\n ${https.heading1} .${tld} ${https.heading2}\n </slot> </strong\n ><br />\n <slot name=\"https-text\">\n ${unsafeHTML(https.text1)} (${this.lockIcon()})\n ${unsafeHTML(https.text2)} .${tld} ${https.text3}\n </slot>\n </p>\n </div>\n `;\n }\n\n static styles = [\n css`\n :host {\n /** Icons */\n --ogds-icon-close: url(\"${unsafeCSS(iconClose)}\");\n --ogds-icon-expand-less: url(\"${unsafeCSS(iconExpandLess)}\");\n --ogds-icon-expand-more: url(\"${unsafeCSS(iconExpandMore)}\");\n --ogds-icon-gov: url(\"${unsafeCSS(iconDotGov)}\");\n --ogds-icon-https: url(\"${unsafeCSS(iconHttps)}\");\n }\n `,\n breakpointTokens,\n colorTokens,\n spacingTokens,\n styles,\n ];\n\n render() {\n const classes = { [\"expanded\"]: this.isOpen };\n // ? Is there a better way to fallback to a default value is passed value doesn't match?\n // Example: User passes `tld=\"zzz\"` --> uses \"gov\" domain instead of `zzz`.\n const tld = this.tld === \"mil\" ? \"mil\" : \"gov\";\n const { banner } = this._bannerText;\n\n return html`\n <section aria-label=${this.label || banner.label}>\n <div class=\"usa-accordion\">\n <header class=\"${classMap(classes)}\">\n <div class=\"inner\">\n <div class=\"grid-col-auto\">\n <img\n aria-hidden=\"true\"\n class=\"header-flag\"\n src=${this.flagSrc}\n alt=\"\"\n />\n </div>\n <div\n class=\"grid-col-fill tablet:grid-col-auto\"\n aria-hidden=\"true\"\n >\n <p class=\"header-text\">\n <slot name=\"banner-text\">${banner.text}</slot>\n </p>\n <!-- \n Since the header-action text below is underlined, the slot and p \n need to be on the same line to avoid one extra space of underline \n before the expand icon.\n -->\n <!-- prettier-ignore -->\n <p class=\"header-action\"><slot name=\"banner-action\">${banner.action}</slot></p>\n </div>\n <button\n type=\"button\"\n class=\"usa-accordion__button\"\n aria-expanded=\"${this.isOpen}\"\n aria-controls=\"gov-banner-default\"\n @click=\"${this.toggle}\"\n >\n <span class=\"button-text\">\n ${this._actionText || banner.action}\n </span>\n </button>\n </div>\n </header>\n <div class=\"content usa-accordion__content\" hidden>\n <div class=\"grid-row grid-gap-lg\">\n <div class=\"guidance tablet:grid-col-6\">\n ${this.domainTemplate(tld)}\n </div>\n <div class=\"guidance tablet:grid-col-6\">\n ${this.httpsTemplate(tld)}\n </div>\n </div>\n </div>\n </div>\n </section>\n `;\n }\n}\n\ndefineCustomElement(\"usa-banner\", UsaBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconExpandMore","iconExpandLess","USA_BANNER_TRANSLATIONS","_UsaBanner","OgdsElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","breakpointTokens","colorTokens","spacingTokens","styles","UsaBanner","defineCustomElement"],"mappings":"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","x_google_ignoreList":[0,1,2]}
package/dist/components/usa-link/index.d.ts DELETED
@@ -1,30 +0,0 @@
1
- import { OgdsElement } from '../../core/OgdsElement';
2
- /**
3
- * @summary The usa-link component.
4
- *
5
- * @slot - This element has a slot
6
- *
7
- * @attribute {String} href - The url for the link
8
- *
9
- * @cssprop --theme-link-color - Sets the link color
10
- * @cssprop --theme-link-visited-color - Sets the color for visited links
11
- * @cssprop --theme-link-hover-color - Sets the hover state link color
12
- * @cssprop --theme-link-active-color - Sets the active state link color
13
- *
14
- * @tagname usa-link
15
- */
16
- export declare class UsaLink extends OgdsElement {
17
- static styles: import('lit').CSSResult[];
18
- static properties: {
19
- href: {
20
- type: StringConstructor;
21
- };
22
- };
23
- href?: string;
24
- private slottedChildren?;
25
- constructor();
26
- private hasLinkChild;
27
- private templateWithChildren;
28
- private templateWithSlots;
29
- render(): import('lit-html').TemplateResult<1>;
30
- }
package/dist/components/usa-link/usa-link.spec.d.ts DELETED
File without changes
package/dist/components/usa-link.cjs DELETED
@@ -1,5 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lit"),o=require("../index-7kIMQwBw.cjs"),i=r.css`:host a{color:var(--theme-link-color,#005ea2);text-decoration:underline}:host a:visited{color:var(--theme-link-visited-color,#54278f)}:host a:hover{color:var(--theme-link-hover-color,#1a4480)}:host a:active{color:var(--theme-link-active-color,#162e51)}:host a:focus{outline:var(--theme-focus-width,.25rem) var(--theme-focus-style,solid) var(--theme-focus-color,#2491ff);outline-offset:var(--theme-focus-offset,0)}`,s=class s extends o.OgdsElement{constructor(){super()}hasLinkChild(){const e=this.querySelector("a");return e&&e instanceof HTMLAnchorElement?(this.href=e.href,this.slottedChildren=e,this.shadowRoot?.appendChild(this.slottedChildren),!0):!1}templateWithChildren(){return r.html`<a class="usa-link" href="${this.href??""}"
2
- >${this.slottedChildren}</a
3
- >`}templateWithSlots(){return r.html`<a class="usa-link" href="${this.href??""}"
4
- ><slot></slot
5
- ></a>`}render(){return this.hasLinkChild()?this.templateWithChildren():this.templateWithSlots()}};s.styles=[i],s.properties={href:{type:String}};let t=s;o.defineCustomElement("usa-link",t);exports.UsaLink=t;
package/dist/components/usa-link.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"usa-link.cjs","sources":["../../src/components/usa-link/index.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { OgdsElement } from \"../../core/OgdsElement\";\nimport styles from \"./usa-link.css\";\nimport { defineCustomElement } from \"../../utils\";\n\n/**\n * @summary The usa-link component.\n *\n * @slot - This element has a slot\n *\n * @attribute {String} href - The url for the link\n *\n * @cssprop --theme-link-color - Sets the link color\n * @cssprop --theme-link-visited-color - Sets the color for visited links\n * @cssprop --theme-link-hover-color - Sets the hover state link color\n * @cssprop --theme-link-active-color - Sets the active state link color\n *\n * @tagname usa-link\n */\nexport class UsaLink extends OgdsElement {\n static styles = [styles];\n\n static properties = {\n href: { type: String },\n };\n\n declare href?: string;\n private slottedChildren?: HTMLAnchorElement;\n\n constructor() {\n super();\n }\n\n private hasLinkChild(): boolean {\n const childLink = this.querySelector(\"a\");\n if (!childLink) return false;\n\n if (childLink instanceof HTMLAnchorElement) {\n this.href = childLink.href;\n this.slottedChildren = childLink;\n this.shadowRoot?.appendChild(this.slottedChildren);\n return true;\n }\n\n return false;\n }\n\n private templateWithChildren() {\n return html`<a class=\"usa-link\" href=\"${this.href ?? \"\"}\"\n >${this.slottedChildren}</a\n >`;\n }\n\n private templateWithSlots() {\n return html`<a class=\"usa-link\" href=\"${this.href ?? \"\"}\"\n ><slot></slot\n ></a>`;\n }\n\n render() {\n return this.hasLinkChild()\n ? this.templateWithChildren()\n : this.templateWithSlots();\n }\n}\n\ndefineCustomElement(\"usa-link\", UsaLink);\n"],"names":["_UsaLink","OgdsElement","childLink","html","styles","UsaLink","defineCustomElement"],"mappings":"ijBAmBaA,EAAN,MAAMA,UAAgBC,EAAAA,WAAY,CAUvC,aAAc,CACZ,MAAA,CACF,CAEQ,cAAwB,CAC9B,MAAMC,EAAY,KAAK,cAAc,GAAG,EACxC,OAAKA,GAEDA,aAAqB,mBACvB,KAAK,KAAOA,EAAU,KACtB,KAAK,gBAAkBA,EACvB,KAAK,YAAY,YAAY,KAAK,eAAe,EAC1C,IANc,EAUzB,CAEQ,sBAAuB,CAC7B,OAAOC,EAAAA,iCAAiC,KAAK,MAAQ,EAAE;AAAA,SAClD,KAAK,eAAe;AAAA,MAE3B,CAEQ,mBAAoB,CAC1B,OAAOA,EAAAA,iCAAiC,KAAK,MAAQ,EAAE;AAAA;AAAA,UAGzD,CAEA,QAAS,CACP,OAAO,KAAK,eACR,KAAK,qBAAA,EACL,KAAK,kBAAA,CACX,CACF,EA5CEH,EAAO,OAAS,CAACI,CAAM,EAEvBJ,EAAO,WAAa,CAClB,KAAM,CAAE,KAAM,MAAA,CAAO,EAJlB,IAAMK,EAANL,EA+CPM,EAAAA,oBAAoB,WAAYD,CAAO"}
package/dist/components/usa-link.js DELETED
@@ -1,32 +0,0 @@
1
- import { css as o, html as r } from "lit";
2
- import { O as i, d as h } from "../index-BrHk1-6T.js";
3
- const l = o`:host a{color:var(--theme-link-color,#005ea2);text-decoration:underline}:host a:visited{color:var(--theme-link-visited-color,#54278f)}:host a:hover{color:var(--theme-link-hover-color,#1a4480)}:host a:active{color:var(--theme-link-active-color,#162e51)}:host a:focus{outline:var(--theme-focus-width,.25rem) var(--theme-focus-style,solid) var(--theme-focus-color,#2491ff);outline-offset:var(--theme-focus-offset,0)}`, e = class e extends i {
4
- constructor() {
5
- super();
6
- }
7
- hasLinkChild() {
8
- const t = this.querySelector("a");
9
- return t && t instanceof HTMLAnchorElement ? (this.href = t.href, this.slottedChildren = t, this.shadowRoot?.appendChild(this.slottedChildren), !0) : !1;
10
- }
11
- templateWithChildren() {
12
- return r`<a class="usa-link" href="${this.href ?? ""}"
13
- >${this.slottedChildren}</a
14
- >`;
15
- }
16
- templateWithSlots() {
17
- return r`<a class="usa-link" href="${this.href ?? ""}"
18
- ><slot></slot
19
- ></a>`;
20
- }
21
- render() {
22
- return this.hasLinkChild() ? this.templateWithChildren() : this.templateWithSlots();
23
- }
24
- };
25
- e.styles = [l], e.properties = {
26
- href: { type: String }
27
- };
28
- let s = e;
29
- h("usa-link", s);
30
- export {
31
- s as UsaLink
32
- };
package/dist/components/usa-link.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"usa-link.js","sources":["../../src/components/usa-link/index.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { OgdsElement } from \"../../core/OgdsElement\";\nimport styles from \"./usa-link.css\";\nimport { defineCustomElement } from \"../../utils\";\n\n/**\n * @summary The usa-link component.\n *\n * @slot - This element has a slot\n *\n * @attribute {String} href - The url for the link\n *\n * @cssprop --theme-link-color - Sets the link color\n * @cssprop --theme-link-visited-color - Sets the color for visited links\n * @cssprop --theme-link-hover-color - Sets the hover state link color\n * @cssprop --theme-link-active-color - Sets the active state link color\n *\n * @tagname usa-link\n */\nexport class UsaLink extends OgdsElement {\n static styles = [styles];\n\n static properties = {\n href: { type: String },\n };\n\n declare href?: string;\n private slottedChildren?: HTMLAnchorElement;\n\n constructor() {\n super();\n }\n\n private hasLinkChild(): boolean {\n const childLink = this.querySelector(\"a\");\n if (!childLink) return false;\n\n if (childLink instanceof HTMLAnchorElement) {\n this.href = childLink.href;\n this.slottedChildren = childLink;\n this.shadowRoot?.appendChild(this.slottedChildren);\n return true;\n }\n\n return false;\n }\n\n private templateWithChildren() {\n return html`<a class=\"usa-link\" href=\"${this.href ?? \"\"}\"\n >${this.slottedChildren}</a\n >`;\n }\n\n private templateWithSlots() {\n return html`<a class=\"usa-link\" href=\"${this.href ?? \"\"}\"\n ><slot></slot\n ></a>`;\n }\n\n render() {\n return this.hasLinkChild()\n ? this.templateWithChildren()\n : this.templateWithSlots();\n }\n}\n\ndefineCustomElement(\"usa-link\", UsaLink);\n"],"names":["_UsaLink","OgdsElement","childLink","html","styles","UsaLink","defineCustomElement"],"mappings":";;4aAmBaA,IAAN,MAAMA,UAAgBC,EAAY;AAAA,EAUvC,cAAc;AACZ,UAAA;AAAA,EACF;AAAA,EAEQ,eAAwB;AAC9B,UAAMC,IAAY,KAAK,cAAc,GAAG;AACxC,WAAKA,KAEDA,aAAqB,qBACvB,KAAK,OAAOA,EAAU,MACtB,KAAK,kBAAkBA,GACvB,KAAK,YAAY,YAAY,KAAK,eAAe,GAC1C,MANc;AAAA,EAUzB;AAAA,EAEQ,uBAAuB;AAC7B,WAAOC,8BAAiC,KAAK,QAAQ,EAAE;AAAA,SAClD,KAAK,eAAe;AAAA;AAAA,EAE3B;AAAA,EAEQ,oBAAoB;AAC1B,WAAOA,8BAAiC,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA,EAGzD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,iBACR,KAAK,qBAAA,IACL,KAAK,kBAAA;AAAA,EACX;AACF;AA5CEH,EAAO,SAAS,CAACI,CAAM,GAEvBJ,EAAO,aAAa;AAAA,EAClB,MAAM,EAAE,MAAM,OAAA;AAAO;AAJlB,IAAMK,IAANL;AA+CPM,EAAoB,YAAYD,CAAO;"}
package/dist/core/OgdsElement.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class OgdsElement extends LitElement {
3
- }
package/dist/index-7kIMQwBw.cjs DELETED
@@ -1 +0,0 @@
1
- "use strict";const s=require("lit");class n extends s.LitElement{}const m=(e,t)=>{!customElements||customElements.get(e)||customElements.define(e,t)};exports.OgdsElement=n;exports.defineCustomElement=m;
package/dist/index-7kIMQwBw.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-7kIMQwBw.cjs","sources":["../src/core/OgdsElement.ts","../src/utils/index.ts"],"sourcesContent":["import { LitElement } from \"lit\";\n\nexport class OgdsElement extends LitElement {}\n","export const defineCustomElement = (\n tag: string,\n className: CustomElementConstructor,\n) => {\n if (!customElements || customElements.get(tag)) return;\n\n customElements.define(tag, className);\n};\n"],"names":["OgdsElement","LitElement","defineCustomElement","tag","className"],"mappings":"oCAEO,MAAMA,UAAoBC,EAAAA,UAAW,CAAC,CCFtC,MAAMC,EAAsB,CACjCC,EACAC,IACG,CACC,CAAC,gBAAkB,eAAe,IAAID,CAAG,GAE7C,eAAe,OAAOA,EAAKC,CAAS,CACtC"}
package/dist/index-BrHk1-6T.js DELETED
@@ -1,10 +0,0 @@
1
- import { LitElement as s } from "lit";
2
- class n extends s {
3
- }
4
- const o = (e, t) => {
5
- !customElements || customElements.get(e) || customElements.define(e, t);
6
- };
7
- export {
8
- n as O,
9
- o as d
10
- };
package/dist/index-BrHk1-6T.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-BrHk1-6T.js","sources":["../src/core/OgdsElement.ts","../src/utils/index.ts"],"sourcesContent":["import { LitElement } from \"lit\";\n\nexport class OgdsElement extends LitElement {}\n","export const defineCustomElement = (\n tag: string,\n className: CustomElementConstructor,\n) => {\n if (!customElements || customElements.get(tag)) return;\n\n customElements.define(tag, className);\n};\n"],"names":["OgdsElement","LitElement","defineCustomElement","tag","className"],"mappings":";AAEO,MAAMA,UAAoBC,EAAW;AAAC;ACFtC,MAAMC,IAAsB,CACjCC,GACAC,MACG;AACH,EAAI,CAAC,kBAAkB,eAAe,IAAID,CAAG,KAE7C,eAAe,OAAOA,GAAKC,CAAS;AACtC;"}
package/src/components/ogds-accordion/.claude/settings.local.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "permissions": {
3
- "allow": [
4
- "Bash(git -C /Users/matthenry/Code/ogds/ogds-elements remote -v)"
5
- ]
6
- }
7
- }
package/src/components/usa-link/index.ts DELETED
@@ -1,66 +0,0 @@
1
- import { LitElement, html } from "lit";
2
- import styles from "./usa-link.css";
3
- import { defineCustomElement } from "../../utils";
4
-
5
- /**
6
- * @summary The usa-link component.
7
- *
8
- * @slot - This element has a slot
9
- *
10
- * @attribute {String} href - The url for the link
11
- *
12
- * @cssprop --theme-link-color - Sets the link color
13
- * @cssprop --theme-link-visited-color - Sets the color for visited links
14
- * @cssprop --theme-link-hover-color - Sets the hover state link color
15
- * @cssprop --theme-link-active-color - Sets the active state link color
16
- *
17
- * @tagname usa-link
18
- */
19
- export class UsaLink extends LitElement {
20
- static styles = [styles];
21
-
22
- static properties = {
23
- href: { type: String },
24
- };
25
-
26
- declare href?: string;
27
- private slottedChildren?: HTMLAnchorElement;
28
-
29
- constructor() {
30
- super();
31
- }
32
-
33
- private hasLinkChild(): boolean {
34
- const childLink = this.querySelector("a");
35
- if (!childLink) return false;
36
-
37
- if (childLink instanceof HTMLAnchorElement) {
38
- this.href = childLink.href;
39
- this.slottedChildren = childLink;
40
- this.shadowRoot?.appendChild(this.slottedChildren);
41
- return true;
42
- }
43
-
44
- return false;
45
- }
46
-
47
- private templateWithChildren() {
48
- return html`<a class="usa-link" href="${this.href ?? ""}"
49
- >${this.slottedChildren}</a
50
- >`;
51
- }
52
-
53
- private templateWithSlots() {
54
- return html`<a class="usa-link" href="${this.href ?? ""}"
55
- ><slot></slot
56
- ></a>`;
57
- }
58
-
59
- render() {
60
- return this.hasLinkChild()
61
- ? this.templateWithChildren()
62
- : this.templateWithSlots();
63
- }
64
- }
65
-
66
- defineCustomElement("usa-link", UsaLink);
package/src/components/usa-link/usa-link.css DELETED
@@ -1,24 +0,0 @@
1
- :host {
2
- a {
3
- color: var(--theme-link-color, #005ea2);
4
- text-decoration: underline;
5
- }
6
-
7
- a:visited {
8
- color: var(--theme-link-visited-color, #54278f);
9
- }
10
-
11
- a:hover {
12
- color: var(--theme-link-hover-color, #1a4480);
13
- }
14
-
15
- a:active {
16
- color: var(--theme-link-active-color, #162e51);
17
- }
18
-
19
- a:focus {
20
- outline: var(--theme-focus-width, 0.25rem) var(--theme-focus-style, solid)
21
- var(--theme-focus-color, #2491ff);
22
- outline-offset: var(--theme-focus-offset, 0);
23
- }
24
- }
package/src/components/usa-link/usa-link.spec.ts DELETED
@@ -1,50 +0,0 @@
1
- import { beforeEach, describe, expect, it } from "vitest";
2
-
3
- import "./index.ts";
4
-
5
- function getInsideLink(): HTMLAnchorElement {
6
- const link = document.body
7
- .querySelector("usa-link")
8
- ?.shadowRoot?.querySelector("a");
9
-
10
- if (!link) {
11
- throw new Error("Could not find inner <a> inside <usa-link>");
12
- }
13
-
14
- return link as HTMLAnchorElement;
15
- }
16
-
17
- describe("usa-link component", async () => {
18
- beforeEach(async () => {
19
- document.body.innerHTML = `<usa-link href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</usa-link>`;
20
- });
21
-
22
- it("should show href props", () => {
23
- expect(getInsideLink().getAttribute("href")).toContain(".gov");
24
- });
25
-
26
- it("should show slotted children", () => {
27
- const slot = document.body
28
- .querySelector("usa-link")
29
- ?.shadowRoot?.querySelector("slot");
30
-
31
- expect(
32
- slot?.assignedNodes({ flatten: true })[0].textContent ?? "",
33
- ).toContain("dangerous");
34
- });
35
- });
36
-
37
- describe("progressively enhanced usa-link component", async () => {
38
- beforeEach(async () => {
39
- document.body.innerHTML = `<usa-link><a href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</a></usa-link>`;
40
- });
41
-
42
- it("should show href props", () => {
43
- getInsideLink();
44
- expect(getInsideLink().getAttribute("href")).toContain(".gov");
45
- });
46
-
47
- it("should render link with component markup", () => {
48
- expect(getInsideLink().className).toContain("usa-link");
49
- });
50
- });