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

package/dist/index-CC1QRihN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-CC1QRihN.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/utils/index.ts","../src/components/ogds-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\"","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","import { LitElement, html, css, unsafeCSS } from \"lit\";\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 \"./ogds-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 OgdsBannerTranslations {\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 OGDS_BANNER_TRANSLATIONS: Record<\n  SupportedLanguage,\n  OgdsBannerTranslations\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 solo en sitios web oficiales y seguros.\",\n    },\n  },\n};\n\n/**\n * @summary The ogds-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 ogds-banner\n */\nexport class OgdsBanner extends LitElement {\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 (\n      OGDS_BANNER_TRANSLATIONS[this.lang] || OGDS_BANNER_TRANSLATIONS[\"en\"]\n    );\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(\"ogds-banner\", OgdsBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconChevronDown","iconChevronUp","defineCustomElement","tag","className","OGDS_BANNER_TRANSLATIONS","_OgdsBanner","LitElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","iconExpandLess","iconExpandMore","breakpointTokens","colorTokens","spacingTokens","styles","OgdsBanner"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/{components/usa-banner.js → index-DDf2o6Dk.js}

@@ -1,8 +1,9 @@
-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 { css as r, LitElement as t, html as a, unsafeCSS as d } from "lit";
+import { unsafeHTML as l } 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 = {
+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", z = (g, o) => {
+  !customElements || customElements.get(g) || customElements.define(g, o);
+}, n = {
   en: {
     banner: {
       label: "Official website of the United States government",
@@ -19,33 +20,33 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
       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."
+      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",
+      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."
+      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."
+      text3: ". Comparta información sensible solo en sitios web oficiales y seguros."
     }
   }
-}, c = class c extends n {
+}, c = class c extends t {
   toggle() {
     this.isOpen = !this.isOpen;
-    const e = this.shadowRoot?.querySelector(".content");
-    e && e.toggleAttribute("hidden");
+    const o = this.shadowRoot?.querySelector(".content");
+    o && o.toggleAttribute("hidden");
   }
   constructor() {
     super(), this.flagSrc = w, this.lang = "en", this.isOpen = !1, this.tld = "gov";
@@ -53,23 +54,23 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
   // 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;
+    return n[this.lang] || n.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;
+  domainTemplate(o) {
+    const { domain: e } = this._bannerText;
     return a`
       <div class="icon-gov">
         <p>
           <strong>
-            <slot name="domain-heading"> ${o.heading} .${e} </slot>
+            <slot name="domain-heading"> ${e.heading} .${o} </slot>
           </strong>
           <br />
           <slot name="domain-text">
-            ${o.text1} <strong>.${e}</strong> ${o.text2}
+            ${e.text1} <strong>.${o}</strong> ${e.text2}
           </slot>
         </p>
       </div>
@@ -84,30 +85,30 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
       ></span>
     `;
   }
-  httpsTemplate(e) {
-    const { https: o } = this._bannerText;
+  httpsTemplate(o) {
+    const { https: e } = this._bannerText;
     return a`
       <div class="icon-https">
         <p>
           <strong>
             <slot name="https-heading">
-              ${o.heading1} .${e} ${o.heading2}
+              ${e.heading1} .${o} ${e.heading2}
             </slot> </strong
           ><br />
           <slot name="https-text">
-            ${g(o.text1)} (${this.lockIcon()})
-            ${g(o.text2)} .${e} ${o.text3}
+            ${l(e.text1)} (${this.lockIcon()})
+            ${l(e.text2)} .${o}${e.text3}
           </slot>
         </p>
       </div>
     `;
   }
   render() {
-    const e = { expanded: this.isOpen }, o = this.tld === "mil" ? "mil" : "gov", { banner: i } = this._bannerText;
+    const o = { expanded: this.isOpen }, e = 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)}">
+          <header class="${v(o)}">
             <div class="inner">
               <div class="grid-col-auto">
                 <img
@@ -148,10 +149,10 @@ const f = r`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-
           <div class="content usa-accordion__content" hidden>
             <div class="grid-row grid-gap-lg">
               <div class="guidance tablet:grid-col-6">
-                ${this.domainTemplate(o)}
+                ${this.domainTemplate(e)}
               </div>
               <div class="guidance tablet:grid-col-6">
-                ${this.httpsTemplate(o)}
+                ${this.httpsTemplate(e)}
               </div>
             </div>
           </div>
@@ -183,7 +184,12 @@ c.properties = {
   p
 ];
 let s = c;
-t("usa-banner", s);
+z("ogds-banner", s);
 export {
-  s as UsaBanner
+  s as O,
+  y as a,
+  f as c,
+  z as d,
+  x as i,
+  m as s
 };

package/dist/index-DDf2o6Dk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DDf2o6Dk.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/utils/index.ts","../src/components/ogds-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\"","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","import { LitElement, html, css, unsafeCSS } from \"lit\";\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 \"./ogds-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 OgdsBannerTranslations {\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 OGDS_BANNER_TRANSLATIONS: Record<\n  SupportedLanguage,\n  OgdsBannerTranslations\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 solo en sitios web oficiales y seguros.\",\n    },\n  },\n};\n\n/**\n * @summary The ogds-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 ogds-banner\n */\nexport class OgdsBanner extends LitElement {\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 (\n      OGDS_BANNER_TRANSLATIONS[this.lang] || OGDS_BANNER_TRANSLATIONS[\"en\"]\n    );\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(\"ogds-banner\", OgdsBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconChevronDown","iconChevronUp","defineCustomElement","tag","className","OGDS_BANNER_TRANSLATIONS","_OgdsBanner","LitElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","iconExpandLess","iconExpandMore","breakpointTokens","colorTokens","spacingTokens","styles","OgdsBanner"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/types/custom-element-jsx.d.ts

@@ -74,13 +74,20 @@ export type OgdsAccordionProps = {
 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 = {
+export type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  _headingNodes?: Node[];
+};
+
+export type OgdsBannerProps = {
   /** The element's language. */
   lang?: "en" | "es";
   /** The custom aria label users can override. */
@@ -93,10 +100,7 @@ export type UsaBannerProps = {
   isOpen?: boolean;
 };
 
-export type UsaLinkProps = {
-  /** The url for the link */
-  href?: string | undefined;
-};
+export type OgdsTaskListProps = {};
 
 export type CustomElements = {
   /**
@@ -126,13 +130,28 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
   /**
-   * The usa-banner component.
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
+  /**
+   * The ogds-banner component.
    * ---
    *
    *
@@ -155,21 +174,12 @@ export type CustomElements = {
    * - **--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>;
+  "ogds-banner": Partial<OgdsBannerProps & 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>;
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };

package/dist/types/custom-element-solidjs.d.ts

@@ -78,15 +78,24 @@ type OgdsAccordionProps = {
 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;
 } & JSX.DirectiveFunctionAttributes<OgdsAccordionToggle> &
   JSX.OnAttributes<OgdsAccordionToggle> &
   JSX.OnCaptureAttributes<OgdsAccordionToggle>;
 
-type UsaBannerProps = {
+type OGDSAlertProps = {
+  /** The type of alert (info, warning, etc) */
+  type?: string;
+  /** Use this attribute to hide the icon */
+  noIcon?: string;
+  /**  */
+  "no-icon"?: boolean;
+  /**  */
+  "prop:_headingNodes"?: Node[];
+} & JSX.DirectiveFunctionAttributes<OGDSAlert> &
+  JSX.OnAttributes<OGDSAlert> &
+  JSX.OnCaptureAttributes<OGDSAlert>;
+
+type OgdsBannerProps = {
   /** The element's language. */
   lang?: "en" | "es";
   /** The custom aria label users can override. */
@@ -97,16 +106,13 @@ type UsaBannerProps = {
   flagSrc?: string;
   /**  */
   isOpen?: boolean;
-} & JSX.DirectiveFunctionAttributes<UsaBanner> &
-  JSX.OnAttributes<UsaBanner> &
-  JSX.OnCaptureAttributes<UsaBanner>;
+} & JSX.DirectiveFunctionAttributes<OgdsBanner> &
+  JSX.OnAttributes<OgdsBanner> &
+  JSX.OnCaptureAttributes<OgdsBanner>;
 
-type UsaLinkProps = {
-  /** The url for the link */
-  href?: string | undefined;
-} & JSX.DirectiveFunctionAttributes<UsaLink> &
-  JSX.OnAttributes<UsaLink> &
-  JSX.OnCaptureAttributes<UsaLink>;
+type OgdsTaskListProps = {} & JSX.DirectiveFunctionAttributes<OgdsTaskList> &
+  JSX.OnAttributes<OgdsTaskList> &
+  JSX.OnCaptureAttributes<OgdsTaskList>;
 
 export type CustomElements = {
   /**
@@ -136,13 +142,28 @@ export type CustomElements = {
    * ---
    *
    *
+   * ### **Slots:**
+   *  - **expand-label** - Button label when all panels are collapsed. Defaults to "Expand All".
+   * - **collapse-label** - Button label when one or more panels are open. Defaults to "Collapse All".
+   *
    * ### **CSS Parts:**
    *  - **button** - The toggle button.
    */
   "ogds-accordion-toggle": Partial<OgdsAccordionToggleProps & BaseProps & BaseEvents>;
 
   /**
-   * The usa-banner component.
+   * The ogds-alert component.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **heading** - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+   * - **body** - Body content for the alert. Can contain HTML (links, etc).
+   */
+  "ogds-alert": Partial<OGDSAlertProps & BaseProps & BaseEvents>;
+
+  /**
+   * The ogds-banner component.
    * ---
    *
    *
@@ -165,21 +186,12 @@ export type CustomElements = {
    * - **--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>;
+  "ogds-banner": Partial<OgdsBannerProps & 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>;
+  "ogds-task-list": Partial<OgdsTaskListProps & BaseProps & BaseEvents>;
 };