@ogds/elements 1.0.0-alpha.6

package/dist/components/usa-banner.js

@@ -0,0 +1,189 @@
+import { css as r, html as a, unsafeCSS as d } from "lit";
+import { O as n, d as t } from "../index-BrHk1-6T.js";
+import { unsafeHTML as g } from "lit/directives/unsafe-html.js";
+import { classMap as v } from "lit/directives/class-map.js";
+const f = r`: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}`, m = r`: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}`, b = r`: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}`, p = r`: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)}`, w = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==", h = "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", u = "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", k = "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", x = "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", y = "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", l = {
+  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."
+    }
+  }
+}, c = class c extends n {
+  toggle() {
+    this.isOpen = !this.isOpen;
+    const e = this.shadowRoot?.querySelector(".content");
+    e && e.toggleAttribute("hidden");
+  }
+  constructor() {
+    super(), this.flagSrc = w, this.lang = "en", this.isOpen = !1, this.tld = "gov";
+  }
+  // Get English or Spanish strings. Default to English if an unknown `lang` is passed.
+  // Ex: <usa-banner lang="zy"></usa-banner>
+  get _bannerText() {
+    return l[this.lang] || l.en;
+  }
+  // Get the action text and use for both mobile & desktop buttons.
+  get _actionText() {
+    return this.querySelector('[slot="banner-action"]')?.textContent;
+  }
+  domainTemplate(e) {
+    const { domain: o } = this._bannerText;
+    return a`
+      <div class="icon-gov">
+        <p>
+          <strong>
+            <slot name="domain-heading"> ${o.heading} .${e} </slot>
+          </strong>
+          <br />
+          <slot name="domain-text">
+            ${o.text1} <strong>.${e}</strong> ${o.text2}
+          </slot>
+        </p>
+      </div>
+    `;
+  }
+  lockIcon() {
+    return a`
+      <span
+        class="icon-lock"
+        role="img"
+        aria-label="Locked padlock icon"
+      ></span>
+    `;
+  }
+  httpsTemplate(e) {
+    const { https: o } = this._bannerText;
+    return a`
+      <div class="icon-https">
+        <p>
+          <strong>
+            <slot name="https-heading">
+              ${o.heading1} .${e} ${o.heading2}
+            </slot> </strong
+          ><br />
+          <slot name="https-text">
+            ${g(o.text1)} (${this.lockIcon()})
+            ${g(o.text2)} .${e} ${o.text3}
+          </slot>
+        </p>
+      </div>
+    `;
+  }
+  render() {
+    const e = { expanded: this.isOpen }, o = this.tld === "mil" ? "mil" : "gov", { banner: i } = this._bannerText;
+    return a`
+      <section aria-label=${this.label || i.label}>
+        <div class="usa-accordion">
+          <header class="${v(e)}">
+            <div class="inner">
+              <div class="grid-col-auto">
+                <img
+                  aria-hidden="true"
+                  class="header-flag"
+                  src=${this.flagSrc}
+                  alt=""
+                />
+              </div>
+              <div
+                class="grid-col-fill tablet:grid-col-auto"
+                aria-hidden="true"
+              >
+                <p class="header-text">
+                  <slot name="banner-text">${i.text}</slot>
+                </p>
+                <!-- 
+                  Since the header-action text below is underlined, the slot and p 
+                  need to be on the same line to avoid one extra space of underline 
+                  before the expand icon.
+                -->
+                <!-- prettier-ignore -->
+                <p class="header-action"><slot name="banner-action">${i.action}</slot></p>
+              </div>
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="${this.isOpen}"
+                aria-controls="gov-banner-default"
+                @click="${this.toggle}"
+              >
+                <span class="button-text">
+                  ${this._actionText || i.action}
+                </span>
+              </button>
+            </div>
+          </header>
+          <div class="content usa-accordion__content" hidden>
+            <div class="grid-row grid-gap-lg">
+              <div class="guidance tablet:grid-col-6">
+                ${this.domainTemplate(o)}
+              </div>
+              <div class="guidance tablet:grid-col-6">
+                ${this.httpsTemplate(o)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+c.properties = {
+  flagSrc: { type: String },
+  lang: { type: String, reflect: !0 },
+  isOpen: { state: !0 },
+  label: { type: String },
+  tld: { type: String, reflect: !0 }
+}, c.styles = [
+  r`
+      :host {
+        /** Icons */
+        --ogds-icon-close: url("${d(k)}");
+        --ogds-icon-expand-less: url("${d(y)}");
+        --ogds-icon-expand-more: url("${d(x)}");
+        --ogds-icon-gov: url("${d(h)}");
+        --ogds-icon-https: url("${d(u)}");
+      }
+    `,
+  b,
+  f,
+  m,
+  p
+];
+let s = c;
+t("usa-banner", s);
+export {
+  s as UsaBanner
+};

package/dist/components/usa-banner.js.map

@@ -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":";;;;w02BAAAA,IAAe,kWCAfC,IAAe,4vBCAfC,IAAe,y6BCAfC,IAAe,2SCAfC,IAAe,sNCAfC,IAAe,mNCwCTC,IAGF;AAAA,EACF,IAAI;AAAA,IACF,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,IAEV,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OACE;AAAA,MACF,OACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,IAEV,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OACE;AAAA,MACF,OACE;AAAA,IAAA;AAAA,EACJ;AAEJ,GA4BaC,IAAN,MAAMA,UAAkBC,EAAY;AAAA,EAgBzC,SAAS;AACP,SAAK,SAAS,CAAC,KAAK;AACpB,UAAMC,IAAiB,KAAK,YAAY,cAAc,UAAU;AAChE,IAAIA,KACFA,EAAe,gBAAgB,QAAQ;AAAA,EAE3C;AAAA,EAEA,cAAc;AACZ,UAAA,GACA,KAAK,UAAUT,GACf,KAAK,OAAO,MACZ,KAAK,SAAS,IACd,KAAK,MAAM;AAAA,EACb;AAAA;AAAA;AAAA,EAIA,IAAc,cAAc;AAC1B,WAAOM,EAAwB,KAAK,IAAI,KAAKA,EAAwB;AAAA,EACvE;AAAA;AAAA,EAGA,IAAc,cAAc;AAG1B,WAFyB,KAAK,cAAc,wBAAwB,GAE3C;AAAA,EAC3B;AAAA,EAEA,eAAeI,GAAa;AAC1B,UAAM,EAAE,QAAAC,MAAW,KAAK;AAExB,WAAOC;AAAA;AAAA;AAAA;AAAA,2CAIgCD,EAAO,OAAO,KAAKD,CAAG;AAAA;AAAA;AAAA;AAAA,cAInDC,EAAO,KAAK,aAAaD,CAAG,aAAaC,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjE;AAAA,EAEA,WAAW;AACT,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT;AAAA,EAEA,cAAcF,GAAa;AACzB,UAAM,EAAE,OAAAG,MAAU,KAAK;AAEvB,WAAOD;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKC,EAAM,QAAQ,KAAKH,CAAG,IAAIG,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,cAI1CC,EAAWD,EAAM,KAAK,CAAC,KAAK,KAAK,UAAU;AAAA,cAC3CC,EAAWD,EAAM,KAAK,CAAC,KAAKH,CAAG,IAAIG,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1D;AAAA,EAmBA,SAAS;AACP,UAAME,IAAU,EAAG,UAAa,KAAK,OAAA,GAG/BL,IAAM,KAAK,QAAQ,QAAQ,QAAQ,OACnC,EAAE,QAAAM,MAAW,KAAK;AAExB,WAAOJ;AAAA,4BACiB,KAAK,SAASI,EAAO,KAAK;AAAA;AAAA,2BAE3BC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMpB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6CASSC,EAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sEAQcA,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKlD,KAAK,MAAM;AAAA;AAAA,0BAElB,KAAK,MAAM;AAAA;AAAA;AAAA,oBAGjB,KAAK,eAAeA,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQnC,KAAK,eAAeN,CAAG,CAAC;AAAA;AAAA;AAAA,kBAGxB,KAAK,cAAcA,CAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvC;AACF;AA3KEH,EAAO,aAAa;AAAA,EAClB,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,MAAM,EAAE,MAAM,QAAQ,SAAS,GAAA;AAAA,EAC/B,QAAQ,EAAE,OAAO,GAAA;AAAA,EACjB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,KAAK,EAAE,MAAM,QAAQ,SAAS,GAAA;AAAK,GAuFrCA,EAAO,SAAS;AAAA,EACdW;AAAA;AAAA;AAAA,kCAG8BC,EAAUhB,CAAS,CAAC;AAAA,wCACdgB,EAAUd,CAAc,CAAC;AAAA,wCACzBc,EAAUf,CAAc,CAAC;AAAA,gCACjCe,EAAUlB,CAAU,CAAC;AAAA,kCACnBkB,EAAUjB,CAAS,CAAC;AAAA;AAAA;AAAA,EAGlDkB;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA;AA3GG,IAAMC,IAANjB;AA8KPkB,EAAoB,cAAcD,CAAS;","x_google_ignoreList":[0,1,2]}

package/dist/components/usa-header/index.d.ts

@@ -0,0 +1,6 @@
+import { OgdsElement } from '../../core/OgdsElement';
+export declare class UsaHeader extends OgdsElement {
+    constructor();
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/usa-link/index.d.ts

@@ -0,0 +1,30 @@
+import { OgdsElement } from '../../core/OgdsElement';
+/**
+ * @summary The usa-link component.
+ *
+ * @slot - This element has a slot
+ *
+ * @attribute {String} href - The url for the link
+ *
+ * @cssprop --theme-link-color - Sets the link color
+ * @cssprop --theme-link-visited-color - Sets the color for visited links
+ * @cssprop --theme-link-hover-color - Sets the hover state link color
+ * @cssprop --theme-link-active-color - Sets the active state link color
+ *
+ * @tagname usa-link
+ */
+export declare class UsaLink extends OgdsElement {
+    static styles: import('lit').CSSResult[];
+    static properties: {
+        href: {
+            type: StringConstructor;
+        };
+    };
+    href?: string;
+    private slottedChildren?;
+    constructor();
+    private hasLinkChild;
+    private templateWithChildren;
+    private templateWithSlots;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/usa-link.cjs

@@ -0,0 +1,5 @@
+"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??""}"
+      >${this.slottedChildren}</a
+    >`}templateWithSlots(){return r.html`<a class="usa-link" href="${this.href??""}"
+      ><slot></slot
+    ></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

@@ -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

@@ -0,0 +1,32 @@
+import { css as o, html as r } from "lit";
+import { O as i, d as h } from "../index-BrHk1-6T.js";
+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 {
+  constructor() {
+    super();
+  }
+  hasLinkChild() {
+    const t = this.querySelector("a");
+    return t && t instanceof HTMLAnchorElement ? (this.href = t.href, this.slottedChildren = t, this.shadowRoot?.appendChild(this.slottedChildren), !0) : !1;
+  }
+  templateWithChildren() {
+    return r`<a class="usa-link" href="${this.href ?? ""}"
+      >${this.slottedChildren}</a
+    >`;
+  }
+  templateWithSlots() {
+    return r`<a class="usa-link" href="${this.href ?? ""}"
+      ><slot></slot
+    ></a>`;
+  }
+  render() {
+    return this.hasLinkChild() ? this.templateWithChildren() : this.templateWithSlots();
+  }
+};
+e.styles = [l], e.properties = {
+  href: { type: String }
+};
+let s = e;
+h("usa-link", s);
+export {
+  s as UsaLink
+};

package/dist/components/usa-link.js.map

@@ -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

@@ -0,0 +1,3 @@
+import { LitElement } from 'lit';
+export declare class OgdsElement extends LitElement {
+}

package/dist/index-7kIMQwBw.cjs

@@ -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

@@ -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

@@ -0,0 +1,10 @@
+import { LitElement as s } from "lit";
+class n extends s {
+}
+const o = (e, t) => {
+  !customElements || customElements.get(e) || customElements.define(e, t);
+};
+export {
+  n as O,
+  o as d
+};

package/dist/index-BrHk1-6T.js.map

@@ -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/dist/types/custom-element-jsx.d.ts

@@ -0,0 +1,175 @@
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ */
+export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+};
+
+type BaseEvents = {};
+
+export type OgdsAccordionProps = {
+  /** Adds `role="list"` to the component and `role="listitem"` to each `<details>` child, conveying the accordion as a list to assistive technologies. Mutually exclusive with `heading-level`. */
+  "use-list-semantics"?: boolean;
+  /** Sets a heading level for each accordion panel by adding `role="heading"` and the corresponding `aria-level` to each `<summary>` element. Has no effect when set to `0` (the default). Mutually exclusive with `use-list-semantics`. */
+  "heading-level"?: number;
+  /**  */
+  detailsChildren?: HTMLCollectionOf<HTMLDetailsElement> | undefined;
+  /**  */
+  childRoles?: Map<HTMLDetailsElement, Set<string>>;
+};
+
+export type OgdsAccordionToggleProps = {
+  /** The `id` of the `<ogds-accordion>` to control. Required. */
+  controls?: string;
+  /** Button label when all panels are collapsed. Defaults to "Expand All". */
+  "expand-label"?: string;
+  /** Button label when one or more panels are open. Defaults to "Collapse All". */
+  "collapse-label"?: string;
+};
+
+export type UsaBannerProps = {
+  /** The element's language. */
+  lang?: "en" | "es";
+  /** The custom aria label users can override. */
+  label?: string;
+  /** The top level domain for the site. */
+  tld?: "gov" | "mil";
+  /**  */
+  flagSrc?: string;
+  /**  */
+  isOpen?: boolean;
+};
+
+export type UsaLinkProps = {
+  /** The url for the link */
+  href?: string | undefined;
+};
+
+export type CustomElements = {
+  /**
+   * The ogds-accordion component.
+   *
+   * Apply these classes to `<ogds-accordion>` to enable variants:
+   * - `bordered` — adds a border to expanded content
+   * - `with-icon` — shows a chevron icon on each summary
+   * - `with-icon plus` — uses plus/minus icons instead of chevrons
+   * - `with-icon right` — aligns the icon to the right
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-accordion-border** - Border used in the bordered variant. _(default: undefined)_
+   * - **--ogds-accordion-content-padding** - Padding for the expanded content area. _(default: undefined)_
+   * - **--ogds-accordion-icon-closed** - Icon shown when a panel is closed. Defaults to a chevron pointing down. CSS-only users must set this to a url() value pointing to their own icon asset. _(default: undefined)_
+   * - **--ogds-accordion-icon-open** - Icon shown when a panel is open. Defaults to a chevron pointing up. CSS-only users must set this to a url() value pointing to their own icon asset. _(default: undefined)_
+   */
+  "ogds-accordion": Partial<OgdsAccordionProps & BaseProps & BaseEvents>;
+
+  /**
+   * A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The toggle button.
+   */
+  "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
+
+  /**
+   * The usa-banner component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **banner-text** - The text for official government website text.
+   * - **banner-action** - Action text label "Here's how you know."
+   * - **domain-heading** - Heading text for the domain section.
+   * - **domain-text** - Body text for domain section.
+   * - **https-heading** - Heading for HTTPs section.
+   * - **https-text** - Body text for HTTPs section.
+   *
+   * ### **CSS Properties:**
+   *  - **--ogds-banner-background-color** - Sets banner background color. _(default: undefined)_
+   * - **--ogds-banner-button-close-background-color** - Sets the background color for the close control on smaller viewports. _(default: undefined)_
+   * - **--ogds-banner-focus-outline-color** - Sets banner focus outline color. _(default: undefined)_
+   * - **--ogds-banner-font-family** - Sets banner font family. _(default: undefined)_
+   * - **--ogds-banner-icon-gov-color** - Sets the color for the official government domain icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-icon-https-color** - Sets the color for the https icon in the expanded state of the banner. _(default: undefined)_
+   * - **--ogds-banner-link-color** - Sets the default link color. _(default: undefined)_
+   * - **--ogds-banner-link-hover-color** - Sets the default link color. _(default: undefined)_
+   * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
+   */
+  "usa-banner": Partial<UsaBannerProps & BaseProps & BaseEvents>;
+
+  /**
+   * The usa-link component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - This element has a slot
+   *
+   * ### **CSS Properties:**
+   *  - **--theme-link-color** - Sets the link color _(default: undefined)_
+   * - **--theme-link-visited-color** - Sets the color for visited links _(default: undefined)_
+   * - **--theme-link-hover-color** - Sets the hover state link color _(default: undefined)_
+   * - **--theme-link-active-color** - Sets the active state link color _(default: undefined)_
+   */
+  "usa-link": Partial<UsaLinkProps & BaseProps & BaseEvents>;
+};