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

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 (91) 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 +39 -136
  6. package/dist/components/frameworks/react/{UsaLink.d.ts → OGDSAlert.d.ts} +15 -14
  7. package/dist/components/frameworks/react/OGDSAlert.js +23 -0
  8. package/dist/components/frameworks/react/OgdsAccordionToggle.d.ts +4 -6
  9. package/dist/components/frameworks/react/OgdsAccordionToggle.js +1 -3
  10. package/dist/components/frameworks/react/{UsaBanner.d.ts → OgdsBanner.d.ts} +9 -9
  11. package/dist/components/frameworks/react/{UsaBanner.js → OgdsBanner.js} +3 -3
  12. package/dist/components/frameworks/react/OgdsTaskList.d.ts +48 -0
  13. package/dist/components/frameworks/react/{UsaLink.js → OgdsTaskList.js} +4 -7
  14. package/dist/components/frameworks/react/index.d.ts +3 -2
  15. package/dist/components/frameworks/react/index.js +3 -2
  16. package/dist/components/index.cjs +15 -1
  17. package/dist/components/index.cjs.map +1 -1
  18. package/dist/components/index.d.ts +4 -3
  19. package/dist/components/index.js +162 -4
  20. package/dist/components/index.js.map +1 -1
  21. package/dist/components/ogds-accordion/index.d.ts +36 -0
  22. package/dist/components/ogds-accordion/ogds-accordion.spec.d.ts +1 -0
  23. package/dist/components/ogds-accordion-toggle/index.d.ts +25 -0
  24. package/dist/components/ogds-accordion-toggle/ogds-accordion-toggle.spec.d.ts +1 -0
  25. package/dist/components/ogds-alert/index.d.ts +21 -0
  26. package/dist/components/{usa-banner → ogds-banner}/index.d.ts +7 -7
  27. package/dist/components/ogds-banner.cjs +1 -0
  28. package/dist/components/ogds-banner.cjs.map +1 -0
  29. package/dist/components/ogds-banner.js +7 -0
  30. package/dist/components/ogds-banner.js.map +1 -0
  31. package/dist/components/task-list/index.d.ts +21 -0
  32. package/dist/core/token-styles.d.ts +1 -0
  33. package/dist/index-CC1QRihN.cjs +95 -0
  34. package/dist/index-CC1QRihN.cjs.map +1 -0
  35. package/dist/{components/usa-banner.js → index-DDf2o6Dk.js} +34 -28
  36. package/dist/index-DDf2o6Dk.js.map +1 -0
  37. package/dist/types/custom-element-jsx.d.ts +32 -22
  38. package/dist/types/custom-element-solidjs.d.ts +39 -27
  39. package/dist/types/custom-element-svelte.d.ts +32 -22
  40. package/dist/types/custom-element-vuejs.d.ts +32 -22
  41. package/package.json +44 -29
  42. package/src/Globals.d.ts +3 -0
  43. package/src/components/index.ts +3 -3
  44. package/src/components/ogds-accordion/docs.mdx +31 -20
  45. package/src/components/ogds-accordion/ogds-accordion.stories.ts +12 -0
  46. package/src/components/ogds-accordion-toggle/docs.mdx +54 -0
  47. package/src/components/ogds-accordion-toggle/index.ts +38 -11
  48. package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.css +31 -0
  49. package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.spec.ts +227 -0
  50. package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.stories.ts +95 -0
  51. package/src/components/ogds-alert/base-variables.css +496 -0
  52. package/src/components/ogds-alert/index.ts +78 -0
  53. package/src/components/ogds-alert/ogds-alert.css +119 -0
  54. package/src/components/ogds-alert/ogds-alert.stories.ts +75 -0
  55. package/src/components/{usa-banner → ogds-banner}/docs.mdx +1 -10
  56. package/src/components/{usa-banner → ogds-banner}/index.ts +17 -15
  57. package/src/components/{usa-banner/usa-banner.spec.ts → ogds-banner/ogds-banner.spec.ts} +5 -5
  58. package/src/components/{usa-banner/usa-banner.stories.ts → ogds-banner/ogds-banner.stories.ts} +2 -2
  59. package/src/components/task-list/docs.mdx +23 -0
  60. package/src/components/task-list/index.ts +65 -0
  61. package/src/components/task-list/ogds-task-list.css +34 -0
  62. package/src/components/task-list/ogds-task-list.stories.ts +46 -0
  63. package/src/core/token-styles.ts +2 -0
  64. package/src/declaration.d.ts +5 -0
  65. package/storybook/contributing.mdx +1 -110
  66. package/storybook/framework-guidance.mdx +5 -5
  67. package/storybook/readme.mdx +1 -1
  68. package/dist/components/usa-banner/usa-banner.stories.d.ts +0 -95
  69. package/dist/components/usa-banner.cjs +0 -95
  70. package/dist/components/usa-banner.cjs.map +0 -1
  71. package/dist/components/usa-banner.js.map +0 -1
  72. package/dist/components/usa-header/index.d.ts +0 -6
  73. package/dist/components/usa-link/index.d.ts +0 -30
  74. package/dist/components/usa-link/usa-link.spec.d.ts +0 -0
  75. package/dist/components/usa-link.cjs +0 -5
  76. package/dist/components/usa-link.cjs.map +0 -1
  77. package/dist/components/usa-link.js +0 -32
  78. package/dist/components/usa-link.js.map +0 -1
  79. package/dist/core/OgdsElement.d.ts +0 -3
  80. package/dist/index-7kIMQwBw.cjs +0 -1
  81. package/dist/index-7kIMQwBw.cjs.map +0 -1
  82. package/dist/index-BrHk1-6T.js +0 -10
  83. package/dist/index-BrHk1-6T.js.map +0 -1
  84. package/src/components/ogds-accordion/.claude/settings.local.json +0 -7
  85. package/src/components/usa-header/index.ts +0 -50
  86. package/src/components/usa-header/usa-header.css +0 -1
  87. package/src/components/usa-link/index.ts +0 -66
  88. package/src/components/usa-link/usa-link.css +0 -24
  89. package/src/components/usa-link/usa-link.spec.ts +0 -50
  90. /package/dist/components/{usa-banner/usa-banner.spec.d.ts → ogds-banner/ogds-banner.spec.d.ts} +0 -0
  91. /package/src/components/{usa-banner/usa-banner.css → ogds-banner/ogds-banner.css} +0 -0
package/dist/components/usa-banner/usa-banner.stories.d.ts DELETED
@@ -1,95 +0,0 @@
1
- import { default as ComponentDocs } from './docs.mdx';
2
- import { Args, ArgTypes } from 'storybook/internal/csf';
3
- declare const _default: {
4
- title: string;
5
- component: string;
6
- tags: string[];
7
- args: {
8
- label: string;
9
- tld: string;
10
- lang: string;
11
- };
12
- parameters: {
13
- docs: {
14
- page: typeof ComponentDocs;
15
- };
16
- };
17
- argTypes: ArgTypes<Args>;
18
- render: (args: Args) => import('lit-html').TemplateResult;
19
- };
20
- export default _default;
21
- export declare const Default: {};
22
- export declare const CustomContent: {
23
- argTypes: {
24
- tld: {
25
- table: {
26
- disable: boolean;
27
- };
28
- };
29
- lang: {
30
- table: {
31
- disable: boolean;
32
- };
33
- };
34
- };
35
- args: {
36
- label: string;
37
- /**
38
- * The `getStorybookHelpers` function from @wc-toolkit/storybook-helpers`
39
- * automatically appends the `slot` attribute to avoid collisions with other props.
40
- *
41
- * To set the content for this story, the key should have the suffix `-slot`,
42
- * even though the slot name in the component is `banner-text`, `banner-action`, etc.
43
- */
44
- "banner-text-slot": string;
45
- "banner-action-slot": string;
46
- "domain-heading-slot": string;
47
- "domain-text-slot": string;
48
- "https-heading-slot": string;
49
- "https-text-slot": string;
50
- };
51
- };
52
- export declare const Mil: {
53
- args: {
54
- tld: string;
55
- };
56
- };
57
- export declare const EspañolGov: {
58
- args: {
59
- lang: string;
60
- };
61
- };
62
- export declare const EspañolMil: {
63
- args: {
64
- lang: string;
65
- tld: string;
66
- };
67
- };
68
- export declare const CustomThemeExample: {
69
- parameters: {
70
- docs: {
71
- disable: boolean;
72
- };
73
- };
74
- args: {
75
- "--ogds-banner-background-color": string;
76
- "--ogds-banner-button-close-background-color": string;
77
- "--ogds-banner-focus-outline-color": string;
78
- "--ogds-banner-font-family": string;
79
- "--ogds-banner-link-hover-color": string;
80
- "--ogds-banner-text-color": string;
81
- "--ogds-banner-link-color": string;
82
- "--ogds-banner-icon-gov-color": string;
83
- "--ogds-banner-icon-https-color": string;
84
- };
85
- };
86
- export declare const ToggleBannerTest: {
87
- parameters: {
88
- docs: {
89
- disable: boolean;
90
- };
91
- };
92
- play: ({ canvasElement }: {
93
- canvasElement: HTMLElement;
94
- }) => Promise<void>;
95
- };
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-header/index.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { OgdsElement } from '../../core/OgdsElement';
2
- export declare class UsaHeader extends OgdsElement {
3
- constructor();
4
- static styles: import('lit').CSSResult[];
5
- render(): import('lit-html').TemplateResult<1>;
6
- }
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-header/index.ts DELETED
@@ -1,50 +0,0 @@
1
- import { html } from "lit";
2
- import { OgdsElement } from "../../core/OgdsElement";
3
- import { defineCustomElement } from "../../utils";
4
-
5
- import styles from "./usa-header.css";
6
-
7
- export class UsaHeader extends OgdsElement {
8
- constructor() {
9
- super();
10
- }
11
-
12
- static styles = [styles];
13
-
14
- render() {
15
- return html`
16
- <div class="header__logo">LOGO</div>
17
- <nav aria-label="Primary navigation">
18
- <ul>
19
- <li>
20
- <a href="#">A link</a>
21
- </li>
22
- <li>
23
- <button popovertarget="primary-nav-1">
24
- First item with dropdown
25
- </button>
26
- <ul popover id="primary-nav-1">
27
- <li><a href="#">Subnav 1</a></li>
28
- <li><a href="#">Subnav 2</a></li>
29
- <li><a href="#">Subnav 3</a></li>
30
- <li><a href="#">Subnav 4</a></li>
31
- </ul>
32
- </li>
33
- <li>
34
- <button popovertarget="primary-nav-2">
35
- Second item with dropdown
36
- </button>
37
- <ul popover id="primary-nav-2">
38
- <li><a href="#">Second Subnav 1</a></li>
39
- <li><a href="#">Subnav 2</a></li>
40
- <li><a href="#">Subnav 3</a></li>
41
- <li><a href="#">Subnav 4</a></li>
42
- </ul>
43
- </li>
44
- </ul>
45
- </nav>
46
- `;
47
- }
48
- }
49
-
50
- defineCustomElement("usa-header", UsaHeader);
package/src/components/usa-header/usa-header.css DELETED
@@ -1 +0,0 @@
1
- /* Hi */
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
- }