@ogds/elements 1.0.0-alpha.6

package/dist/components/frameworks/react/UsaBanner.d.ts

@@ -0,0 +1,82 @@
+import React from "react";
+import { UsaBanner as UsaBannerElement } from "../../usa-banner.js";
+
+export type { UsaBannerElement };
+
+export interface UsaBannerProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  isOpen?: boolean;
+
+  /** The element's language. */
+  lang?: UsaBannerElement["lang"];
+
+  /** The custom aria label users can override. */
+  label?: UsaBannerElement["label"];
+
+  /** The top level domain for the site. */
+  tld?: UsaBannerElement["tld"];
+
+  /** undefined */
+  flagSrc?: UsaBannerElement["flagSrc"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * The usa-banner component.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - **banner-text** - The text for official government website text.
+ * - **banner-action** - Action text label "Here's how you know."
+ * - **domain-heading** - Heading text for the domain section.
+ * - **domain-text** - Body text for domain section.
+ * - **https-heading** - Heading for HTTPs section.
+ * - **https-text** - Body text for HTTPs section.
+ *
+ * ### **CSS Properties:**
+ *  - **--ogds-banner-background-color** - Sets banner background color. _(default: undefined)_
+ * - **--ogds-banner-button-close-background-color** - Sets the background color for the close control on smaller viewports. _(default: undefined)_
+ * - **--ogds-banner-focus-outline-color** - Sets banner focus outline color. _(default: undefined)_
+ * - **--ogds-banner-font-family** - Sets banner font family. _(default: undefined)_
+ * - **--ogds-banner-icon-gov-color** - Sets the color for the official government domain icon in the expanded state of the banner. _(default: undefined)_
+ * - **--ogds-banner-icon-https-color** - Sets the color for the https icon in the expanded state of the banner. _(default: undefined)_
+ * - **--ogds-banner-link-color** - Sets the default link color. _(default: undefined)_
+ * - **--ogds-banner-link-hover-color** - Sets the default link color. _(default: undefined)_
+ * - **--ogds-banner-text-color** - Sets the default text color. _(default: undefined)_
+ */
+export const UsaBanner: React.ForwardRefExoticComponent<UsaBannerProps>;

package/dist/components/frameworks/react/UsaBanner.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import "../../usa-banner.js";
+
+export const UsaBanner = forwardRef((props, forwardedRef) => {
+  const { isOpen, lang, label, tld, flagSrc, ...filteredProps } = props;
+
+  return React.createElement(
+    "usa-banner",
+    {
+      ...filteredProps,
+      lang: props.lang,
+      label: props.label,
+      tld: props.tld,
+      flagSrc: props.flagSrc,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      isOpen: props.isOpen ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/components/frameworks/react/UsaLink.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { UsaLink as UsaLinkElement } from "../../usa-link.js";
+
+export type { UsaLinkElement };
+
+export interface UsaLinkProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** The url for the link */
+  href?: UsaLinkElement["href"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * 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)_
+ */
+export const UsaLink: React.ForwardRefExoticComponent<UsaLinkProps>;

package/dist/components/frameworks/react/UsaLink.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import "../../usa-link.js";
+
+export const UsaLink = forwardRef((props, forwardedRef) => {
+  const { href, ...filteredProps } = props;
+
+  return React.createElement(
+    "usa-link",
+    {
+      ...filteredProps,
+      href: props.href,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/components/frameworks/react/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./OgdsAccordion.js";
+export * from "./OgdsAccordionToggle.js";
+export * from "./UsaBanner.js";
+export * from "./UsaLink.js";

package/dist/components/frameworks/react/index.js

@@ -0,0 +1,4 @@
+export * from "./OgdsAccordion.js";
+export * from "./OgdsAccordionToggle.js";
+export * from "./UsaBanner.js";
+export * from "./UsaLink.js";

package/dist/components/frameworks/react/react-utils.js

@@ -0,0 +1,34 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export function useProperties(targetElement, propName, value) {
+  useEffect(() => {
+    if (
+      value !== undefined &&
+      targetElement.current &&
+      targetElement.current[propName] !== value
+    ) {
+      // add try catch to avoid errors when setting read-only properties
+      try {
+        targetElement.current[propName] = value;
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  }, [value, targetElement.current]);
+}
+
+export function useEventListener(targetElement, eventName, eventHandler) {
+  useLayoutEffect(() => {
+    if (eventHandler !== undefined) {
+      targetElement?.current?.addEventListener(eventName, eventHandler);
+    }
+
+    return () => {
+      if (eventHandler?.cancel) {
+        eventHandler.cancel();
+      }
+
+      targetElement?.current?.removeEventListener(eventName, eventHandler);
+    };
+  }, [eventName, eventHandler, targetElement.current]);
+}

package/dist/components/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./usa-link.cjs"),e=require("./usa-banner.cjs");exports.UsaLink=n.UsaLink;exports.UsaBanner=e.UsaBanner;

package/dist/components/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+import { UsaLink } from './usa-link';
+import { UsaBanner } from './usa-banner';
+export { UsaLink, UsaBanner };

package/dist/components/index.js

@@ -0,0 +1,6 @@
+import { UsaLink as a } from "./usa-link.js";
+import { UsaBanner as n } from "./usa-banner.js";
+export {
+  n as UsaBanner,
+  a as UsaLink
+};

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,82 @@
+import { OgdsElement } from '../../core/OgdsElement';
+interface UsaBannerTranslations {
+    banner: {
+        label: string;
+        text: string;
+        action: string;
+    };
+    domain: {
+        heading: string;
+        text1: string;
+        text2: string;
+    };
+    https: {
+        heading1: string;
+        heading2: string;
+        text1: string;
+        text2: string;
+        text3: string;
+    };
+}
+/**
+ * @summary The usa-banner component.
+ *
+ * @attribute {string} lang - The element's language.
+ * @attribute {string} label - The custom aria label users can override.
+ * @attribute {string} tld - The top level domain for the site.
+ *
+ * @cssprop --ogds-banner-background-color - Sets banner background color.
+ * @cssprop --ogds-banner-button-close-background-color - Sets the background color for the close control on smaller viewports.
+ * @cssprop --ogds-banner-focus-outline-color - Sets banner focus outline color.
+ * @cssprop --ogds-banner-font-family - Sets banner font family.
+ * @cssprop --ogds-banner-icon-gov-color - Sets the color for the official government domain icon in the expanded state of the banner.
+ * @cssprop --ogds-banner-icon-https-color - Sets the color for the https icon in the expanded state of the banner.
+ * @cssprop --ogds-banner-link-color - Sets the default link color.
+ * @cssprop --ogds-banner-link-hover-color - Sets the default link color.
+ * @cssprop --ogds-banner-text-color - Sets the default text color.
+ *
+ * @slot banner-text - The text for official government website text.
+ * @slot banner-action - Action text label "Here's how you know."
+ * @slot domain-heading - Heading text for the domain section.
+ * @slot domain-text - Body text for domain section.
+ * @slot https-heading - Heading for HTTPs section.
+ * @slot https-text - Body text for HTTPs section.
+ *
+ * @element usa-banner
+ */
+export declare class UsaBanner extends OgdsElement {
+    static properties: {
+        flagSrc: {
+            type: StringConstructor;
+        };
+        lang: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        isOpen: {
+            state: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        tld: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    flagSrc: string;
+    lang: "en" | "es";
+    isOpen: boolean;
+    label: string;
+    tld: "gov" | "mil";
+    toggle(): void;
+    constructor();
+    protected get _bannerText(): UsaBannerTranslations;
+    protected get _actionText(): string | undefined;
+    domainTemplate(tld: string): import('lit-html').TemplateResult<1>;
+    lockIcon(): import('lit-html').TemplateResult<1>;
+    httpsTemplate(tld: string): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+export {};

package/dist/components/usa-banner/usa-banner.stories.d.ts

@@ -0,0 +1,95 @@
+import { default as ComponentDocs } from './docs.mdx';
+import { Args, ArgTypes } from 'storybook/internal/csf';
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    args: {
+        label: string;
+        tld: string;
+        lang: string;
+    };
+    parameters: {
+        docs: {
+            page: typeof ComponentDocs;
+        };
+    };
+    argTypes: ArgTypes<Args>;
+    render: (args: Args) => import('lit-html').TemplateResult;
+};
+export default _default;
+export declare const Default: {};
+export declare const CustomContent: {
+    argTypes: {
+        tld: {
+            table: {
+                disable: boolean;
+            };
+        };
+        lang: {
+            table: {
+                disable: boolean;
+            };
+        };
+    };
+    args: {
+        label: string;
+        /**
+         * The `getStorybookHelpers` function from @wc-toolkit/storybook-helpers`
+         * automatically appends the `slot` attribute to avoid collisions with other props.
+         *
+         * To set the content for this story, the key should have the suffix `-slot`,
+         * even though the slot name in the component is `banner-text`, `banner-action`, etc.
+         */
+        "banner-text-slot": string;
+        "banner-action-slot": string;
+        "domain-heading-slot": string;
+        "domain-text-slot": string;
+        "https-heading-slot": string;
+        "https-text-slot": string;
+    };
+};
+export declare const Mil: {
+    args: {
+        tld: string;
+    };
+};
+export declare const EspañolGov: {
+    args: {
+        lang: string;
+    };
+};
+export declare const EspañolMil: {
+    args: {
+        lang: string;
+        tld: string;
+    };
+};
+export declare const CustomThemeExample: {
+    parameters: {
+        docs: {
+            disable: boolean;
+        };
+    };
+    args: {
+        "--ogds-banner-background-color": string;
+        "--ogds-banner-button-close-background-color": string;
+        "--ogds-banner-focus-outline-color": string;
+        "--ogds-banner-font-family": string;
+        "--ogds-banner-link-hover-color": string;
+        "--ogds-banner-text-color": string;
+        "--ogds-banner-link-color": string;
+        "--ogds-banner-icon-gov-color": string;
+        "--ogds-banner-icon-https-color": string;
+    };
+};
+export declare const ToggleBannerTest: {
+    parameters: {
+        docs: {
+            disable: boolean;
+        };
+    };
+    play: ({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }) => Promise<void>;
+};

package/dist/components/usa-banner.cjs

@@ -0,0 +1,95 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),g=require("../index-7kIMQwBw.cjs"),c=require("lit/directives/unsafe-html.js"),l=require("lit/directives/class-map.js"),n=o.css`:root,:host{--ogds-color-black-transparent-5:#00000003;--ogds-color-black-transparent-10:#0000001a;--ogds-color-black-transparent-20:#0003;--ogds-color-black-transparent-30:#0000004d;--ogds-color-black-transparent-40:#0006;--ogds-color-black-transparent-50:#00000080;--ogds-color-black-transparent-60:#0009;--ogds-color-black-transparent-70:#000000b3;--ogds-color-black-transparent-80:#000c;--ogds-color-black-transparent-90:#000000e6;--ogds-color-blue-cool-5:#e7f2f5;--ogds-color-blue-cool-10:#dae9ee;--ogds-color-blue-cool-20:#adcfdc;--ogds-color-blue-cool-30:#82b4c9;--ogds-color-blue-cool-40:#6499af;--ogds-color-blue-cool-50:#3a7d95;--ogds-color-blue-cool-60:#2e6276;--ogds-color-blue-cool-70:#224a58;--ogds-color-blue-cool-80:#14333d;--ogds-color-blue-cool-90:#0f191c;--ogds-color-blue-cool-vivid-5:#e1f3f8;--ogds-color-blue-cool-vivid-10:#c3ebfa;--ogds-color-blue-cool-vivid-20:#97d4ea;--ogds-color-blue-cool-vivid-30:#59b9de;--ogds-color-blue-cool-vivid-40:#28a0cb;--ogds-color-blue-cool-vivid-50:#0d7ea2;--ogds-color-blue-cool-vivid-60:#07648d;--ogds-color-blue-cool-vivid-70:#074b69;--ogds-color-blue-cool-vivid-80:#002d3f;--ogds-color-blue-warm-5:#ecf1f7;--ogds-color-blue-warm-10:#e1e7f1;--ogds-color-blue-warm-20:#bbcae4;--ogds-color-blue-warm-30:#98afd2;--ogds-color-blue-warm-40:#7292c7;--ogds-color-blue-warm-50:#4a77b4;--ogds-color-blue-warm-60:#345d96;--ogds-color-blue-warm-70:#2f4668;--ogds-color-blue-warm-80:#252f3e;--ogds-color-blue-warm-90:#13171f;--ogds-color-blue-warm-vivid-5:#edf5ff;--ogds-color-blue-warm-vivid-10:#d4e5ff;--ogds-color-blue-warm-vivid-20:#adcdff;--ogds-color-blue-warm-vivid-30:#81aefc;--ogds-color-blue-warm-vivid-40:#5994f6;--ogds-color-blue-warm-vivid-50:#2672de;--ogds-color-blue-warm-vivid-60:#0050d8;--ogds-color-blue-warm-vivid-70:#1a4480;--ogds-color-blue-warm-vivid-80:#162e51;--ogds-color-blue-5:#eff6fb;--ogds-color-blue-10:#d9e8f6;--ogds-color-blue-20:#aacdec;--ogds-color-blue-30:#73b3e7;--ogds-color-blue-40:#4f97d1;--ogds-color-blue-50:#2378c3;--ogds-color-blue-60:#2c608a;--ogds-color-blue-70:#274863;--ogds-color-blue-80:#1f303e;--ogds-color-blue-90:#11181d;--ogds-color-blue-vivid-5:#e8f5ff;--ogds-color-blue-vivid-10:#cfe8ff;--ogds-color-blue-vivid-20:#a1d3ff;--ogds-color-blue-vivid-30:#58b4ff;--ogds-color-blue-vivid-40:#2491ff;--ogds-color-blue-vivid-50:#0076d6;--ogds-color-blue-vivid-60:#005ea2;--ogds-color-blue-vivid-70:#0b4778;--ogds-color-blue-vivid-80:#112f4e;--ogds-color-cyan-5:#e7f6f8;--ogds-color-cyan-10:#ccecf2;--ogds-color-cyan-20:#99deea;--ogds-color-cyan-30:#5dc0d1;--ogds-color-cyan-40:#449dac;--ogds-color-cyan-50:#168092;--ogds-color-cyan-60:#2a646d;--ogds-color-cyan-70:#2c4a4e;--ogds-color-cyan-80:#203133;--ogds-color-cyan-90:#111819;--ogds-color-cyan-vivid-5:#e5faff;--ogds-color-cyan-vivid-10:#a8f2ff;--ogds-color-cyan-vivid-20:#52daf2;--ogds-color-cyan-vivid-30:#00bde3;--ogds-color-cyan-vivid-40:#009ec1;--ogds-color-cyan-vivid-50:#0081a1;--ogds-color-cyan-vivid-60:#00687d;--ogds-color-cyan-vivid-70:#0e4f5c;--ogds-color-cyan-vivid-80:#093b44;--ogds-color-transparent:#0000;--ogds-color-black:#000;--ogds-color-white:#fff;--ogds-color-gold-5:#f5f0e6;--ogds-color-gold-10:#f1e5cd;--ogds-color-gold-20:#dec69a;--ogds-color-gold-30:#c7a97b;--ogds-color-gold-40:#ad8b65;--ogds-color-gold-50:#8e704f;--ogds-color-gold-60:#6b5947;--ogds-color-gold-70:#4d4438;--ogds-color-gold-80:#322d26;--ogds-color-gold-90:#191714;--ogds-color-gold-vivid-5:#fef0c8;--ogds-color-gold-vivid-10:#ffe396;--ogds-color-gold-vivid-20:#ffbe2e;--ogds-color-gold-vivid-30:#e5a000;--ogds-color-gold-vivid-40:#c2850c;--ogds-color-gold-vivid-50:#936f38;--ogds-color-gold-vivid-60:#7a591a;--ogds-color-gold-vivid-70:#5c410a;--ogds-color-gold-vivid-80:#3b2b15;--ogds-color-gray-cool-1:#fbfcfd;--ogds-color-gray-cool-2:#f7f9fa;--ogds-color-gray-cool-3:#f5f6f7;--ogds-color-gray-cool-4:#f1f3f6;--ogds-color-gray-cool-5:#edeff0;--ogds-color-gray-cool-10:#dfe1e2;--ogds-color-gray-cool-20:#c6cace;--ogds-color-gray-cool-30:#a9aeb1;--ogds-color-gray-cool-40:#8d9297;--ogds-color-gray-cool-50:#71767a;--ogds-color-gray-cool-60:#565c65;--ogds-color-gray-cool-70:#3d4551;--ogds-color-gray-cool-80:#2d2e2f;--ogds-color-gray-cool-90:#1c1d1f;--ogds-color-gray-warm-1:#fcfcfb;--ogds-color-gray-warm-2:#f9f9f7;--ogds-color-gray-warm-3:#f6f6f2;--ogds-color-gray-warm-4:#f5f5f0;--ogds-color-gray-warm-5:#f0f0ec;--ogds-color-gray-warm-10:#e6e6e2;--ogds-color-gray-warm-20:#cac9c0;--ogds-color-gray-warm-30:#afaea2;--ogds-color-gray-warm-40:#929285;--ogds-color-gray-warm-50:#76766a;--ogds-color-gray-warm-60:#5d5d52;--ogds-color-gray-warm-70:#454540;--ogds-color-gray-warm-80:#2e2e2a;--ogds-color-gray-warm-90:#171716;--ogds-color-gray-1:#fcfcfc;--ogds-color-gray-2:#f9f9f9;--ogds-color-gray-3:#f6f6f6;--ogds-color-gray-4:#f3f3f3;--ogds-color-gray-5:#f0f0f0;--ogds-color-gray-10:#e6e6e6;--ogds-color-gray-20:#c9c9c9;--ogds-color-gray-30:#adadad;--ogds-color-gray-40:#919191;--ogds-color-gray-50:#757575;--ogds-color-gray-60:#5c5c5c;--ogds-color-gray-70:#454545;--ogds-color-gray-80:#2e2e2e;--ogds-color-gray-90:#1b1b1b;--ogds-color-gray-100:#000;--ogds-color-green-cool-5:#ecf3ec;--ogds-color-green-cool-10:#dbebde;--ogds-color-green-cool-20:#b4d0b9;--ogds-color-green-cool-30:#86b98e;--ogds-color-green-cool-40:#5e9f69;--ogds-color-green-cool-50:#4d8055;--ogds-color-green-cool-60:#446443;--ogds-color-green-cool-70:#37493b;--ogds-color-green-cool-80:#28312a;--ogds-color-green-cool-90:#1a1f1a;--ogds-color-green-cool-vivid-5:#e3f5e1;--ogds-color-green-cool-vivid-10:#b7f5bd;--ogds-color-green-cool-vivid-20:#70e17b;--ogds-color-green-cool-vivid-30:#21c834;--ogds-color-green-cool-vivid-40:#00a91c;--ogds-color-green-cool-vivid-50:#008817;--ogds-color-green-cool-vivid-60:#216e1f;--ogds-color-green-cool-vivid-70:#154c21;--ogds-color-green-cool-vivid-80:#19311e;--ogds-color-green-warm-5:#f1f4d7;--ogds-color-green-warm-10:#e7eab7;--ogds-color-green-warm-20:#cbd17a;--ogds-color-green-warm-30:#a6b557;--ogds-color-green-warm-40:#8a984b;--ogds-color-green-warm-50:#6f7a41;--ogds-color-green-warm-60:#5a5f38;--ogds-color-green-warm-70:#45472f;--ogds-color-green-warm-80:#2d2f21;--ogds-color-green-warm-90:#171712;--ogds-color-green-warm-vivid-5:#f5fbc1;--ogds-color-green-warm-vivid-10:#e7f434;--ogds-color-green-warm-vivid-20:#c5d30a;--ogds-color-green-warm-vivid-30:#a3b72c;--ogds-color-green-warm-vivid-40:#7e9c1d;--ogds-color-green-warm-vivid-50:#6a7d00;--ogds-color-green-warm-vivid-60:#5a6613;--ogds-color-green-warm-vivid-70:#4b4e10;--ogds-color-green-warm-vivid-80:#38380b;--ogds-color-green-5:#eaf4dd;--ogds-color-green-10:#dfeacd;--ogds-color-green-20:#b8d293;--ogds-color-green-30:#9bb672;--ogds-color-green-40:#7d9b4e;--ogds-color-green-50:#607f35;--ogds-color-green-60:#4c6424;--ogds-color-green-70:#3c4a29;--ogds-color-green-80:#293021;--ogds-color-green-90:#161814;--ogds-color-green-vivid-5:#ddf9c7;--ogds-color-green-vivid-10:#c5ee93;--ogds-color-green-vivid-20:#98d035;--ogds-color-green-vivid-30:#7fb135;--ogds-color-green-vivid-40:#719f2a;--ogds-color-green-vivid-50:#538200;--ogds-color-green-vivid-60:#466c04;--ogds-color-green-vivid-70:#2f4a0b;--ogds-color-green-vivid-80:#243413;--ogds-color-indigo-cool-5:#eef0f9;--ogds-color-indigo-cool-10:#e1e6f9;--ogds-color-indigo-cool-20:#bbc8f5;--ogds-color-indigo-cool-30:#96abee;--ogds-color-indigo-cool-40:#6b8ee8;--ogds-color-indigo-cool-50:#496fd8;--ogds-color-indigo-cool-60:#3f57a6;--ogds-color-indigo-cool-70:#374274;--ogds-color-indigo-cool-80:#292d42;--ogds-color-indigo-cool-90:#151622;--ogds-color-indigo-cool-vivid-5:#edf0ff;--ogds-color-indigo-cool-vivid-10:#dee5ff;--ogds-color-indigo-cool-vivid-20:#b8c8ff;--ogds-color-indigo-cool-vivid-30:#94adff;--ogds-color-indigo-cool-vivid-40:#628ef4;--ogds-color-indigo-cool-vivid-50:#4866ff;--ogds-color-indigo-cool-vivid-60:#3e4ded;--ogds-color-indigo-cool-vivid-70:#222fbf;--ogds-color-indigo-cool-vivid-80:#1b2b85;--ogds-color-indigo-warm-5:#f1eff7;--ogds-color-indigo-warm-10:#e7e3fa;--ogds-color-indigo-warm-20:#cbc4f2;--ogds-color-indigo-warm-30:#afa5e8;--ogds-color-indigo-warm-40:#9287d8;--ogds-color-indigo-warm-50:#7665d1;--ogds-color-indigo-warm-60:#5e519e;--ogds-color-indigo-warm-70:#453c7b;--ogds-color-indigo-warm-80:#2e2c40;--ogds-color-indigo-warm-90:#18161d;--ogds-color-indigo-warm-vivid-5:#f5f2ff;--ogds-color-indigo-warm-vivid-10:#e4deff;--ogds-color-indigo-warm-vivid-20:#cfc4fd;--ogds-color-indigo-warm-vivid-30:#b69fff;--ogds-color-indigo-warm-vivid-40:#967efb;--ogds-color-indigo-warm-vivid-50:#745fe9;--ogds-color-indigo-warm-vivid-60:#5942d2;--ogds-color-indigo-warm-vivid-70:#3d2c9d;--ogds-color-indigo-warm-vivid-80:#261f5b;--ogds-color-indigo-5:#efeff8;--ogds-color-indigo-10:#e5e4fa;--ogds-color-indigo-20:#c5c5f3;--ogds-color-indigo-30:#a5a8eb;--ogds-color-indigo-40:#8889db;--ogds-color-indigo-50:#676cc8;--ogds-color-indigo-60:#4d52af;--ogds-color-indigo-70:#3d4076;--ogds-color-indigo-80:#2b2c40;--ogds-color-indigo-90:#16171f;--ogds-color-indigo-vivid-5:#f0f0ff;--ogds-color-indigo-vivid-10:#e0e0ff;--ogds-color-indigo-vivid-20:#ccceff;--ogds-color-indigo-vivid-30:#a3a7fa;--ogds-color-indigo-vivid-40:#8289ff;--ogds-color-indigo-vivid-50:#656bd7;--ogds-color-indigo-vivid-60:#4a50c4;--ogds-color-indigo-vivid-70:#3333a3;--ogds-color-indigo-vivid-80:#212463;--ogds-color-magenta-5:#f9f0f2;--ogds-color-magenta-10:#f6e1e8;--ogds-color-magenta-20:#f0bbcc;--ogds-color-magenta-30:#e895b3;--ogds-color-magenta-40:#e0699f;--ogds-color-magenta-50:#c84281;--ogds-color-magenta-60:#8b4566;--ogds-color-magenta-70:#66364b;--ogds-color-magenta-80:#402731;--ogds-color-magenta-90:#1b1617;--ogds-color-magenta-vivid-5:#fff2f5;--ogds-color-magenta-vivid-10:#ffddea;--ogds-color-magenta-vivid-20:#ffb4cf;--ogds-color-magenta-vivid-30:#ff87b2;--ogds-color-magenta-vivid-40:#fd4496;--ogds-color-magenta-vivid-50:#d72d79;--ogds-color-magenta-vivid-60:#ab2165;--ogds-color-magenta-vivid-70:#731f44;--ogds-color-magenta-vivid-80:#4f172e;--ogds-color-mint-cool-5:#e0f7f6;--ogds-color-mint-cool-10:#c4eeeb;--ogds-color-mint-cool-20:#9bd4cf;--ogds-color-mint-cool-30:#6fbab3;--ogds-color-mint-cool-40:#4f9e99;--ogds-color-mint-cool-50:#40807e;--ogds-color-mint-cool-60:#376462;--ogds-color-mint-cool-70:#2a4b45;--ogds-color-mint-cool-80:#203131;--ogds-color-mint-cool-90:#111818;--ogds-color-mint-cool-vivid-5:#d5fbf3;--ogds-color-mint-cool-vivid-10:#7efbe1;--ogds-color-mint-cool-vivid-20:#29e1cb;--ogds-color-mint-cool-vivid-30:#1dc2ae;--ogds-color-mint-cool-vivid-40:#00a398;--ogds-color-mint-cool-vivid-50:#008480;--ogds-color-mint-cool-vivid-60:#0f6460;--ogds-color-mint-cool-vivid-70:#0b4b3f;--ogds-color-mint-cool-vivid-80:#123131;--ogds-color-mint-5:#dbf6ed;--ogds-color-mint-10:#c7efe2;--ogds-color-mint-20:#92d9bb;--ogds-color-mint-30:#5abf95;--ogds-color-mint-40:#34a37e;--ogds-color-mint-50:#2e8367;--ogds-color-mint-60:#286846;--ogds-color-mint-70:#204e34;--ogds-color-mint-80:#193324;--ogds-color-mint-90:#0d1a12;--ogds-color-mint-vivid-5:#c9fbeb;--ogds-color-mint-vivid-10:#83fcd4;--ogds-color-mint-vivid-20:#0ceda6;--ogds-color-mint-vivid-30:#04c585;--ogds-color-mint-vivid-40:#00a871;--ogds-color-mint-vivid-50:#008659;--ogds-color-mint-vivid-60:#146947;--ogds-color-mint-vivid-70:#0c4e29;--ogds-color-mint-vivid-80:#0d351e;--ogds-color-orange-warm-5:#faeee5;--ogds-color-orange-warm-10:#fbe0d0;--ogds-color-orange-warm-20:#f7bca2;--ogds-color-orange-warm-30:#f3966d;--ogds-color-orange-warm-40:#e17141;--ogds-color-orange-warm-50:#bd5727;--ogds-color-orange-warm-60:#914734;--ogds-color-orange-warm-70:#633a32;--ogds-color-orange-warm-80:#3d2925;--ogds-color-orange-warm-90:#1c1615;--ogds-color-orange-warm-vivid-5:#fff3ea;--ogds-color-orange-warm-vivid-10:#ffe2d1;--ogds-color-orange-warm-vivid-20:#fbbaa7;--ogds-color-orange-warm-vivid-30:#fc906d;--ogds-color-orange-warm-vivid-40:#ff580a;--ogds-color-orange-warm-vivid-50:#cf4900;--ogds-color-orange-warm-vivid-60:#a72f10;--ogds-color-orange-warm-vivid-70:#782312;--ogds-color-orange-warm-vivid-80:#3d231d;--ogds-color-orange-5:#f6efe9;--ogds-color-orange-10:#f2e4d4;--ogds-color-orange-20:#f3bf90;--ogds-color-orange-30:#f09860;--ogds-color-orange-40:#dd7533;--ogds-color-orange-50:#a86437;--ogds-color-orange-60:#775540;--ogds-color-orange-70:#524236;--ogds-color-orange-80:#332d27;--ogds-color-orange-90:#1b1614;--ogds-color-orange-vivid-5:#fef2e4;--ogds-color-orange-vivid-10:#fce2c5;--ogds-color-orange-vivid-20:#ffbc78;--ogds-color-orange-vivid-30:#fa9441;--ogds-color-orange-vivid-40:#e66f0e;--ogds-color-orange-vivid-50:#c05600;--ogds-color-orange-vivid-60:#8c471c;--ogds-color-orange-vivid-70:#5f3617;--ogds-color-orange-vivid-80:#352313;--ogds-color-red-cool-5:#f8eff1;--ogds-color-red-cool-10:#f3e1e4;--ogds-color-red-cool-20:#ecbec6;--ogds-color-red-cool-30:#e09aa6;--ogds-color-red-cool-40:#e16b80;--ogds-color-red-cool-50:#cd425b;--ogds-color-red-cool-60:#9e394b;--ogds-color-red-cool-70:#68363f;--ogds-color-red-cool-80:#40282c;--ogds-color-red-cool-90:#1e1517;--ogds-color-red-cool-vivid-5:#fff2f5;--ogds-color-red-cool-vivid-10:#f8dfe2;--ogds-color-red-cool-vivid-20:#f8b9c5;--ogds-color-red-cool-vivid-30:#fd8ba0;--ogds-color-red-cool-vivid-40:#f45d79;--ogds-color-red-cool-vivid-50:#e41d3d;--ogds-color-red-cool-vivid-60:#b21d38;--ogds-color-red-cool-vivid-70:#822133;--ogds-color-red-cool-vivid-80:#4f1c24;--ogds-color-red-warm-5:#f6efea;--ogds-color-red-warm-10:#f4e3db;--ogds-color-red-warm-20:#ecc0a7;--ogds-color-red-warm-30:#dca081;--ogds-color-red-warm-40:#d27a56;--ogds-color-red-warm-50:#c3512c;--ogds-color-red-warm-60:#805039;--ogds-color-red-warm-70:#524236;--ogds-color-red-warm-80:#332d29;--ogds-color-red-warm-90:#1f1c18;--ogds-color-red-warm-vivid-5:#fff5ee;--ogds-color-red-warm-vivid-10:#fce1d4;--ogds-color-red-warm-vivid-20:#f6bd9c;--ogds-color-red-warm-vivid-30:#f39268;--ogds-color-red-warm-vivid-40:#ef5e25;--ogds-color-red-warm-vivid-50:#d54309;--ogds-color-red-warm-vivid-60:#9c3d10;--ogds-color-red-warm-vivid-70:#63340f;--ogds-color-red-warm-vivid-80:#3e2a1e;--ogds-color-red-5:#f9eeee;--ogds-color-red-10:#f8e1de;--ogds-color-red-20:#f7bbb1;--ogds-color-red-30:#f2938c;--ogds-color-red-40:#e9695f;--ogds-color-red-50:#d83933;--ogds-color-red-60:#a23737;--ogds-color-red-70:#6f3331;--ogds-color-red-80:#3e2927;--ogds-color-red-90:#1b1616;--ogds-color-red-vivid-5:#fff3f2;--ogds-color-red-vivid-10:#fde0db;--ogds-color-red-vivid-20:#fdb8ae;--ogds-color-red-vivid-30:#ff8d7b;--ogds-color-red-vivid-40:#fb5a47;--ogds-color-red-vivid-50:#e52207;--ogds-color-red-vivid-60:#b50909;--ogds-color-red-vivid-70:#8b0a03;--ogds-color-red-vivid-80:#5c1111;--ogds-color-violet-warm-5:#f8f0f9;--ogds-color-violet-warm-10:#f6dff8;--ogds-color-violet-warm-20:#e2bee4;--ogds-color-violet-warm-30:#d29ad8;--ogds-color-violet-warm-40:#bf77c8;--ogds-color-violet-warm-50:#b04abd;--ogds-color-violet-warm-60:#864381;--ogds-color-violet-warm-70:#5c395a;--ogds-color-violet-warm-80:#382936;--ogds-color-violet-warm-90:#1b151b;--ogds-color-violet-warm-vivid-5:#fef2ff;--ogds-color-violet-warm-vivid-10:#fbdcff;--ogds-color-violet-warm-vivid-20:#f4b2ff;--ogds-color-violet-warm-vivid-30:#ee83ff;--ogds-color-violet-warm-vivid-40:#d85bef;--ogds-color-violet-warm-vivid-50:#be32d0;--ogds-color-violet-warm-vivid-60:#93348c;--ogds-color-violet-warm-vivid-70:#711e6c;--ogds-color-violet-warm-vivid-80:#481441;--ogds-color-violet-5:#f4f1f9;--ogds-color-violet-10:#ebe3f9;--ogds-color-violet-20:#d0c3e9;--ogds-color-violet-30:#b8a2e3;--ogds-color-violet-40:#9d84d2;--ogds-color-violet-50:#8168b3;--ogds-color-violet-60:#665190;--ogds-color-violet-70:#4c3d69;--ogds-color-violet-80:#312b3f;--ogds-color-violet-90:#18161d;--ogds-color-violet-vivid-5:#f7f2ff;--ogds-color-violet-vivid-10:#ede3ff;--ogds-color-violet-vivid-20:#d5bfff;--ogds-color-violet-vivid-30:#c39deb;--ogds-color-violet-vivid-40:#ad79e9;--ogds-color-violet-vivid-50:#9355dc;--ogds-color-violet-vivid-60:#783cb9;--ogds-color-violet-vivid-70:#54278f;--ogds-color-violet-vivid-80:#39215e;--ogds-color-white-transparent-5:#ffffff03;--ogds-color-white-transparent-10:#ffffff1a;--ogds-color-white-transparent-20:#fff3;--ogds-color-white-transparent-30:#ffffff4d;--ogds-color-white-transparent-40:#fff6;--ogds-color-white-transparent-50:#ffffff80;--ogds-color-white-transparent-60:#fff9;--ogds-color-white-transparent-70:#ffffffb3;--ogds-color-white-transparent-80:#fffc;--ogds-color-white-transparent-90:#ffffffe6;--ogds-color-yellow-5:#faf3d1;--ogds-color-yellow-10:#f5e6af;--ogds-color-yellow-20:#e6c74c;--ogds-color-yellow-30:#c9ab48;--ogds-color-yellow-40:#a88f48;--ogds-color-yellow-50:#8a7237;--ogds-color-yellow-60:#6b5a39;--ogds-color-yellow-70:#504332;--ogds-color-yellow-80:#332d27;--ogds-color-yellow-90:#1a1614;--ogds-color-yellow-vivid-5:#fff5c2;--ogds-color-yellow-vivid-10:#fee685;--ogds-color-yellow-vivid-20:#face00;--ogds-color-yellow-vivid-30:#ddaa01;--ogds-color-yellow-vivid-40:#b38c00;--ogds-color-yellow-vivid-50:#947100;--ogds-color-yellow-vivid-60:#776017;--ogds-color-yellow-vivid-70:#5c4809;--ogds-color-yellow-vivid-80:#422d19}`,t=o.css`:root,:host{--ogds-column-gap-0:0px;--ogds-column-gap-1:.5rem;--ogds-column-gap-2:1rem;--ogds-column-gap-3:1.5rem;--ogds-column-gap-4:2rem;--ogds-column-gap-5:2.5rem;--ogds-column-gap-6:3rem;--ogds-column-gap-2px:2px;--ogds-column-gap-05:.25rem;--ogds-grid-base:8px;--ogds-input-width-2xs:5ex;--ogds-input-width-xs:9ex;--ogds-input-width-sm:13ex;--ogds-input-width-md:20ex;--ogds-input-width-lg:30ex;--ogds-input-width-xl:40ex;--ogds-input-width-2xl:50ex;--ogds-spacing-1:.5rem;--ogds-spacing-2:1rem;--ogds-spacing-3:1.5rem;--ogds-spacing-4:2rem;--ogds-spacing-5:2.5rem;--ogds-spacing-6:3rem;--ogds-spacing-7:3.5rem;--ogds-spacing-8:4rem;--ogds-spacing-9:4.5rem;--ogds-spacing-10:5rem;--ogds-spacing-15:7.5rem;--ogds-spacing-105:.75rem;--ogds-spacing-205:1.25rem;--ogds-spacing-05:.25rem;--ogds-spacing-neg-05:-.25rem;--ogds-spacing-neg-1:-.5rem;--ogds-spacing-neg-105:-.75rem;--ogds-spacing-neg-2:-1rem;--ogds-spacing-neg-205:-1.25rem;--ogds-spacing-neg-3:-1.5rem;--ogds-spacing-neg-4:-2rem;--ogds-spacing-neg-5:-2.5rem;--ogds-spacing-neg-6:-3rem;--ogds-spacing-neg-7:-3.5rem;--ogds-spacing-neg-8:-4rem;--ogds-spacing-neg-9:-4.5rem;--ogds-spacing-neg-10:-5rem;--ogds-spacing-neg-15:-7.5rem;--ogds-site-margins-mobile-width:1rem;--ogds-site-margins-width:2rem;--ogds-size-touch-target:3rem}`,v=o.css`:root,:host{--ogds-breakpoint-card:10rem;--ogds-breakpoint-card-lg:15rem;--ogds-breakpoint-mobile:20rem;--ogds-breakpoint-mobile-lg:30rem;--ogds-breakpoint-tablet:40rem;--ogds-breakpoint-tablet-lg:55rem;--ogds-breakpoint-desktop:64rem;--ogds-breakpoint-desktop-lg:75rem;--ogds-breakpoint-widescreen:87.5rem}`,f=o.css`:host{--ogds-banner-background-color:var(--ogds-color-base-lightest,#f0f0f0);--ogds-banner-button-close-background-color:var(--ogds-color-base-lighter,#dfe1e2);--ogds-banner-focus-outline-color:var(--ogds-color-blue-vivid-40,#2491ff);--ogds-banner-font-family:system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;--ogds-banner-font-size-xs:.75rem;--ogds-banner-font-size-sm:.875rem;--ogds-banner-font-size-base:.94rem;--ogds-banner-icon-gov-color:var(--ogds-color-blue-50,#2378c3);--ogds-banner-icon-https-color:var(--ogds-color-green-vivid-40,#719f2a);--ogds-banner-line-height-sm:1.2;--ogds-banner-line-height-base:1.6;--ogds-banner-link-color:var(--ogds-color-blue-vivid-60,#005ea2);--ogds-banner-link-hover-color:var(--ogds-color-blue-warm-vivid-70,#1a4480);--ogds-banner-max-width:var(--ogds-breakpoint-desktop);--ogds-banner-text-color:var(--ogds-color-base-darkest,#1b1b1b);--ogds-icon-lock:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='64' viewBox='0 0 52 64' class='usa-banner__lock-image' role='img' aria-labelledby='banner-lock-description-default' focusable='false'%3E%3Ctitle id='banner-lock-title-default'%3ELock%3C/title%3E%3Cdesc id='banner-lock-description-default'%3ELocked padlock icon%3C/desc%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z'%3E%3C/path%3E%3C/svg%3E\")}*{box-sizing:border-box}section{background-color:var(--ogds-banner-background-color);box-sizing:border-box;font-family:var(--ogds-banner-font-family);font-size:var(--ogds-banner-font-size-xs);text-align:start}section *,section :before,section :after{box-sizing:border-box}@media(min-width:40em){section{font-size:var(--ogds-banner-font-size-xs);padding-block-end:0}}section .usa-accordion{font-family:inherit}section .grid-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--ogds-breakpoint-tablet) / 2)),1fr));display:grid}@media(min-width:40em){section .grid-row{gap:var(--ogds-spacing-2)}}@media(min-width:64em){section .grid-row{gap:calc(var(--ogds-spacing-05) / 2)}}.grid-col-auto{flex:0 auto}.grid-col-fill{flex:1 1 0;width:auto;min-width:1px;max-width:100%}@media(min-width:40em){.tablet\\:grid-col-auto{flex:0 auto;width:auto;max-width:100%}}section .tablet\\:grid-col-6{gap:var(--ogds-spacing-1);flex:none;width:100%}header,.content{color:var(--ogds-banner-text-color)}.content{font-size:var(--ogds-banner-font-size-base);line-height:var(--ogds-banner-line-height-base);max-width:var(--ogds-banner-max-width);padding-block-start:var(--ogds-spacing-05);padding-block-end:var(--ogds-spacing-2);padding-inline:var(--ogds-spacing-1);width:100%;margin-inline:auto;overflow:hidden}@media(min-width:40em){.content{padding-block:var(--ogds-spacing-3)}}@media(min-width:64em){.content{padding-inline:var(--ogds-spacing-4)}}.content p:first-child{margin:0}.inner{max-width:var(--ogds-banner-max-width);flex-wrap:nowrap;align-items:flex-start;margin-inline:auto;padding-inline-start:var(--ogds-spacing-2);padding-inline-end:var(--ogds-spacing-05);display:flex}@media(min-width:40em){.inner{align-items:center}}@media(min-width:64em){.inner{padding-inline:var(--ogds-spacing-4)}}header{font-size:var(--ogds-banner-font-size-xs);min-height:var(--ogds-size-touch-target);padding-block:var(--ogds-spacing-1);font-weight:400;position:relative}@media(min-width:40em){header{min-height:0;padding-block:var(--ogds-spacing-05)}}.header-text{font-size:var(--ogds-banner-font-size-xs);line-height:var(--ogds-banner-line-height-sm);margin-block:0}.header-flag{float:left;width:var(--ogds-spacing-2);margin-inline-end:var(--ogds-spacing-1);padding-block-start:0}.header-action{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;line-height:var(--ogds-banner-line-height-sm);background:0 0;border:none;margin-block:2px 0;padding:0;text-decoration:underline}.header-action:hover{color:var(--ogds-banner-link-hover-color)}.header-action:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);vertical-align:middle;background-color:currentColor;width:1rem;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1rem 1rem;mask-size:1rem 1rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.expanded .header-action{display:none}@media(min-width:40em){.header-action{display:none}}@media(forced-colors:active){.header-action{color:linktext}.header-action:after{background-color:buttontext}}header.expanded{padding-inline-end:calc(var(--ogds-size-touch-target) + var(--ogds-spacing-1))}@media(min-width:40em){header.expanded{font-size:var(--ogds-banner-font-size-sm);min-height:0;padding-inline-end:0;font-weight:400;display:block}}header.expanded .inner{margin-inline-start:0}@media(min-width:40em){header.expanded .inner{margin-inline-start:auto}}header.expanded .header-action{display:none}button{color:var(--ogds-banner-link-color);cursor:pointer;font:inherit;font-size:var(--ogds-banner-font-size-xs);height:auto;line-height:var(--ogds-banner-line-height-sm);outline:inherit;background:0 0;border:none;width:auto;padding:0;padding-block-start:0;padding-inline-start:0;text-decoration:none;display:block;position:absolute;top:0;bottom:0;left:0}button:hover{color:var(--ogds-banner-link-hover-color)}@media(max-width:39.99em){button{width:100%}button:enabled:focus{outline-offset:-.25rem}}button:not([disabled]):focus{outline:var(--ogds-spacing-05) solid var(--ogds-banner-focus-outline-color)}@media(min-width:40em){button{margin-inline-start:var(--ogds-spacing-1);display:inline;position:relative;top:auto;bottom:auto;left:auto}button:after{content:\"\";height:1rem;-webkit-mask-image:var(--ogds-icon-expand-more);mask-image:var(--ogds-icon-expand-more);background-color:currentColor;width:1rem;margin-block:0;display:inline-block;position:absolute;top:0;right:-18px;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}button:hover{text-decoration:none}}@media(forced-colors:active){button:after,button:hover:after{background-color:buttontext}}button[aria-expanded=false],button[aria-expanded=false]:hover,button[aria-expanded=true],button[aria-expanded=true]:hover{background-image:none}@media(forced-colors:active){button[aria-expanded=false]:before,button[aria-expanded=false]:hover:before,button[aria-expanded=true]:before,button[aria-expanded=true]:hover:before{content:none}}@media(max-width:39.99em){button[aria-expanded=true]:before{background-color:var(--ogds-banner-button-close-background-color);content:\"\";height:var(--ogds-size-touch-target);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0}button[aria-expanded=true]:after{background-color:var(--ogds-banner-link-color);content:\"\";height:var(--ogds-size-touch-target);-webkit-mask-image:var(--ogds-icon-close);mask-image:var(--ogds-icon-close);width:var(--ogds-size-touch-target);display:block;position:absolute;top:0;bottom:0;right:0;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:1.5rem 1.5rem;mask-size:1.5rem 1.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}@media(min-width:40em){button[aria-expanded=true]{height:auto;padding:0;position:relative}button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{-webkit-mask-image:var(--ogds-icon-expand-less);mask-image:var(--ogds-icon-expand-less);position:absolute}}@media(forced-colors:active){button[aria-expanded=true]:after,button[aria-expanded=true]:hover:after{background-color:buttontext}}.button-text{text-decoration:underline;position:absolute;left:-999em;right:auto}@media(min-width:40em){.button-text{display:inline;position:static;left:auto;right:auto}}@media(forced-colors:active){.button-text{color:linktext}}.guidance{max-width:62ex;align-items:flex-start;padding-block-start:var(--ogds-spacing-2);display:flex}@media(max-width:39.99em){.guidance{padding-inline-end:.75rem}}@media(min-width:40em){.guidance{padding-block-start:0;padding-inline-end:var(--ogds-spacing-1)}}.icon{width:var(--ogds-spacing-5)}.icon-lock,::slotted(.usa-banner__icon-lock){height:1.5ex;-webkit-mask-image:var(--ogds-icon-lock);mask-image:var(--ogds-icon-lock);background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:cover;width:1.21875ex;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov,.icon-https{padding-inline-start:calc(var(--ogds-spacing-5) + var(--ogds-spacing-1));position:relative}:is(.icon-gov,.icon-https):before{content:\"\";height:var(--ogds-spacing-5);width:var(--ogds-spacing-5);display:inline-block;position:absolute;top:0;left:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-gov:before{background-color:var(--ogds-banner-icon-gov-color);-webkit-mask-image:var(--ogds-icon-gov);mask-image:var(--ogds-icon-gov)}.icon-https:before{background-color:var(--ogds-banner-icon-https-color);-webkit-mask-image:var(--ogds-icon-https);mask-image:var(--ogds-icon-https)}`,m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==",b="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e",p="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e",w="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e",h="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e",u="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e",s={en:{banner:{label:"Official website of the United States government",text:"An official website of the United States government",action:"Here’s how you know"},domain:{heading:"Official websites use",text1:"A",text2:"website belongs to an official government organization in the United States."},https:{heading1:"Secure",heading2:"websites use HTTPS",text1:"A <strong>lock</strong>",text2:"or <strong>https://</strong> means you’ve safely connected to the",text3:"website. Share sensitive information only on official, secure websites."}},es:{banner:{label:"Un sitio oficial del Gobierno de Estados Unidos",text:"Un sitio oficial del Gobierno de Estados Unidos",action:"Así es como usted puede verificarlo"},domain:{heading:"Los sitios web oficiales usan",text1:"Un sitio web",text2:"pertenece a una organización oficial del Gobierno de Estados Unidos."},https:{heading1:"Los sitios web seguros",heading2:"usan HTTPS",text1:"Un <strong>candado</strong>",text2:"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web",text3:"Comparta información sensible sólo en sitios web oficiales y seguros."}}},a=class a extends g.OgdsElement{toggle(){this.isOpen=!this.isOpen;const d=this.shadowRoot?.querySelector(".content");d&&d.toggleAttribute("hidden")}constructor(){super(),this.flagSrc=m,this.lang="en",this.isOpen=!1,this.tld="gov"}get _bannerText(){return s[this.lang]||s.en}get _actionText(){return this.querySelector('[slot="banner-action"]')?.textContent}domainTemplate(d){const{domain:e}=this._bannerText;return o.html`
+      <div class="icon-gov">
+        <p>
+          <strong>
+            <slot name="domain-heading"> ${e.heading} .${d} </slot>
+          </strong>
+          <br />
+          <slot name="domain-text">
+            ${e.text1} <strong>.${d}</strong> ${e.text2}
+          </slot>
+        </p>
+      </div>
+    `}lockIcon(){return o.html`
+      <span
+        class="icon-lock"
+        role="img"
+        aria-label="Locked padlock icon"
+      ></span>
+    `}httpsTemplate(d){const{https:e}=this._bannerText;return o.html`
+      <div class="icon-https">
+        <p>
+          <strong>
+            <slot name="https-heading">
+              ${e.heading1} .${d} ${e.heading2}
+            </slot> </strong
+          ><br />
+          <slot name="https-text">
+            ${c.unsafeHTML(e.text1)} (${this.lockIcon()})
+            ${c.unsafeHTML(e.text2)} .${d} ${e.text3}
+          </slot>
+        </p>
+      </div>
+    `}render(){const d={expanded:this.isOpen},e=this.tld==="mil"?"mil":"gov",{banner:r}=this._bannerText;return o.html`
+      <section aria-label=${this.label||r.label}>
+        <div class="usa-accordion">
+          <header class="${l.classMap(d)}">
+            <div class="inner">
+              <div class="grid-col-auto">
+                <img
+                  aria-hidden="true"
+                  class="header-flag"
+                  src=${this.flagSrc}
+                  alt=""
+                />
+              </div>
+              <div
+                class="grid-col-fill tablet:grid-col-auto"
+                aria-hidden="true"
+              >
+                <p class="header-text">
+                  <slot name="banner-text">${r.text}</slot>
+                </p>
+                <!-- 
+                  Since the header-action text below is underlined, the slot and p 
+                  need to be on the same line to avoid one extra space of underline 
+                  before the expand icon.
+                -->
+                <!-- prettier-ignore -->
+                <p class="header-action"><slot name="banner-action">${r.action}</slot></p>
+              </div>
+              <button
+                type="button"
+                class="usa-accordion__button"
+                aria-expanded="${this.isOpen}"
+                aria-controls="gov-banner-default"
+                @click="${this.toggle}"
+              >
+                <span class="button-text">
+                  ${this._actionText||r.action}
+                </span>
+              </button>
+            </div>
+          </header>
+          <div class="content usa-accordion__content" hidden>
+            <div class="grid-row grid-gap-lg">
+              <div class="guidance tablet:grid-col-6">
+                ${this.domainTemplate(e)}
+              </div>
+              <div class="guidance tablet:grid-col-6">
+                ${this.httpsTemplate(e)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    `}};a.properties={flagSrc:{type:String},lang:{type:String,reflect:!0},isOpen:{state:!0},label:{type:String},tld:{type:String,reflect:!0}},a.styles=[o.css`
+      :host {
+        /** Icons */
+        --ogds-icon-close: url("${o.unsafeCSS(w)}");
+        --ogds-icon-expand-less: url("${o.unsafeCSS(u)}");
+        --ogds-icon-expand-more: url("${o.unsafeCSS(h)}");
+        --ogds-icon-gov: url("${o.unsafeCSS(b)}");
+        --ogds-icon-https: url("${o.unsafeCSS(p)}");
+      }
+    `,v,n,t,f];let i=a;g.defineCustomElement("usa-banner",i);exports.UsaBanner=i;

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

@@ -0,0 +1 @@
+{"version":3,"file":"usa-banner.cjs","sources":["../../node_modules/@uswds/uswds/dist/img/us_flag_small.png","../../node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg","../../node_modules/@uswds/uswds/dist/img/icon-https.svg","../../src/shared/icons/close.svg","../../src/shared/icons/expand_more.svg","../../src/shared/icons/expand_less.svg","../../src/components/usa-banner/index.ts"],"sourcesContent":["export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAsBAMAAAAncaPMAAAAAXNSR0IArs4c6QAAABtQTFRF////4EAg2z8g2z8f2z4f2j4fHjSyHjOxHTOxQEYPwgAAAIdJREFUeNrNkUENxDAMBEOhFJaCKZiCKZhCKBj2ebV3rdR71+pIq+Qxj1GyqjJ3U8VlHkc07hFm0awBYe91juq6MSI0yhSAEgkzJ4TMKiXyzFw3pgR9lmIBJlqj2AmBedf+IycExmlKZVzvZEJ4A0oBrjBl/m6PCy95B3fFAN6YuQPxhbcB4QMkEj04wQXD5wAAAABJRU5ErkJggg==\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-dot-gov%3c/title%3e%3cpath%20fill='%232378C3'%20fill-rule='evenodd'%20d='m32%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032-32-14.3-32-32%2014.3-32%2032-32zm0%201.2c-17%200-30.8%2013.8-30.8%2030.8s13.8%2030.8%2030.8%2030.8%2030.8-13.8%2030.8-30.8-13.8-30.8-30.8-30.8zm11.4%2038.9c.5%200%20.9.4.9.8v1.6h-24.6v-1.6c0-.5.4-.8.9-.8zm-17.1-12.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h1.6v-9.8h3.3v9.8h.8c.5%200%20.9.4.9.8v.8h-21.4v-.8c0-.5.4-.8.9-.8h.8v-9.8zm5.7-8.2%2012.3%204.9v1.6h-1.6c0%20.5-.4.8-.9.8h-19.6c-.5%200-.9-.4-.9-.8h-1.6v-1.6s12.3-4.9%2012.3-4.9z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2064%2064'%3e%3ctitle%3eicon-https%3c/title%3e%3cpath%20fill='%23719F2A'%20fill-rule='evenodd'%20d='M32%200c17.673%200%2032%2014.327%2032%2032%200%2017.673-14.327%2032-32%2032C14.327%2064%200%2049.673%200%2032%200%2014.327%2014.327%200%2032%200zm0%201.208C14.994%201.208%201.208%2014.994%201.208%2032S14.994%2062.792%2032%2062.792%2062.792%2049.006%2062.792%2032%2049.006%201.208%2032%201.208zm0%2018.886a7.245%207.245%200%200%201%207.245%207.245v3.103h.52c.86%200%201.557.698%201.557%201.558v9.322c0%20.86-.697%201.558-1.557%201.558h-15.53c-.86%200-1.557-.697-1.557-1.558V32c0-.86.697-1.558%201.557-1.558h.52V27.34A7.245%207.245%200%200%201%2032%2020.094zm0%203.103a4.142%204.142%200%200%200-4.142%204.142v3.103h8.284V27.34A4.142%204.142%200%200%200%2032%2023.197z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='m12%208-6%206%201.41%201.41L12%2010.83l4.59%204.58L18%2014z'/%3e%3c/svg%3e\"","import { html, css, unsafeCSS } from \"lit\";\nimport { OgdsElement } from \"../../core/OgdsElement\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport colorTokens from \"@ogds/tokens/styles/css/colors.css\";\nimport spacingTokens from \"@ogds/tokens/styles/css/spacing.css\";\nimport breakpointTokens from \"@ogds/tokens/styles/css/breakpoints.css\";\nimport styles from \"./usa-banner.css\";\n\nimport usFlagSmall from \"@uswds/uswds/img/us_flag_small.png\";\nimport iconDotGov from \"@uswds/uswds/img/icon-dot-gov.svg\";\nimport iconHttps from \"@uswds/uswds/img/icon-https.svg\";\nimport iconClose from \"../../shared/icons/close.svg\";\nimport iconExpandMore from \"../../shared/icons/expand_more.svg\";\nimport iconExpandLess from \"../../shared/icons/expand_less.svg\";\nimport { defineCustomElement } from \"../../utils\";\n\ninterface UsaBannerTranslations {\n  banner: {\n    label: string;\n    text: string;\n    action: string;\n  };\n  domain: {\n    heading: string;\n    text1: string;\n    text2: string;\n  };\n  https: {\n    heading1: string;\n    heading2: string;\n    text1: string;\n    text2: string;\n    text3: string;\n  };\n}\n\ntype SupportedLanguage = \"en\" | \"es\";\n\nconst USA_BANNER_TRANSLATIONS: Record<\n  SupportedLanguage,\n  UsaBannerTranslations\n> = {\n  en: {\n    banner: {\n      label: \"Official website of the United States government\",\n      text: \"An official website of the United States government\",\n      action: \"Here’s how you know\",\n    },\n    domain: {\n      heading: \"Official websites use\",\n      text1: \"A\",\n      text2:\n        \"website belongs to an official government organization in the United States.\",\n    },\n    https: {\n      heading1: \"Secure\",\n      heading2: \"websites use HTTPS\",\n      text1: \"A <strong>lock</strong>\",\n      text2:\n        \"or <strong>https://</strong> means you’ve safely connected to the\",\n      text3:\n        \"website. Share sensitive information only on official, secure websites.\",\n    },\n  },\n  es: {\n    banner: {\n      label: \"Un sitio oficial del Gobierno de Estados Unidos\",\n      text: \"Un sitio oficial del Gobierno de Estados Unidos\",\n      action: \"Así es como usted puede verificarlo\",\n    },\n    domain: {\n      heading: \"Los sitios web oficiales usan\",\n      text1: \"Un sitio web\",\n      text2:\n        \"pertenece a una organización oficial del Gobierno de Estados Unidos.\",\n    },\n    https: {\n      heading1: \"Los sitios web seguros\",\n      heading2: \"usan HTTPS\",\n      text1: \"Un <strong>candado</strong>\",\n      text2:\n        \"o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web\",\n      text3:\n        \"Comparta información sensible sólo en sitios web oficiales y seguros.\",\n    },\n  },\n};\n\n/**\n * @summary The usa-banner component.\n *\n * @attribute {string} lang - The element's language.\n * @attribute {string} label - The custom aria label users can override.\n * @attribute {string} tld - The top level domain for the site.\n *\n * @cssprop --ogds-banner-background-color - Sets banner background color.\n * @cssprop --ogds-banner-button-close-background-color - Sets the background color for the close control on smaller viewports.\n * @cssprop --ogds-banner-focus-outline-color - Sets banner focus outline color.\n * @cssprop --ogds-banner-font-family - Sets banner font family.\n * @cssprop --ogds-banner-icon-gov-color - Sets the color for the official government domain icon in the expanded state of the banner.\n * @cssprop --ogds-banner-icon-https-color - Sets the color for the https icon in the expanded state of the banner.\n * @cssprop --ogds-banner-link-color - Sets the default link color.\n * @cssprop --ogds-banner-link-hover-color - Sets the default link color.\n * @cssprop --ogds-banner-text-color - Sets the default text color.\n *\n * @slot banner-text - The text for official government website text.\n * @slot banner-action - Action text label \"Here's how you know.\"\n * @slot domain-heading - Heading text for the domain section.\n * @slot domain-text - Body text for domain section.\n * @slot https-heading - Heading for HTTPs section.\n * @slot https-text - Body text for HTTPs section.\n *\n * @element usa-banner\n */\nexport class UsaBanner extends OgdsElement {\n  static properties = {\n    flagSrc: { type: String },\n    lang: { type: String, reflect: true },\n    isOpen: { state: true },\n    label: { type: String },\n    tld: { type: String, reflect: true },\n  };\n\n  // Property declarations\n  flagSrc!: string;\n  lang!: \"en\" | \"es\";\n  isOpen!: boolean;\n  label!: string;\n  tld!: \"gov\" | \"mil\";\n\n  toggle() {\n    this.isOpen = !this.isOpen;\n    const contentElement = this.shadowRoot?.querySelector(\".content\");\n    if (contentElement) {\n      contentElement.toggleAttribute(\"hidden\");\n    }\n  }\n\n  constructor() {\n    super();\n    this.flagSrc = usFlagSmall;\n    this.lang = \"en\";\n    this.isOpen = false;\n    this.tld = \"gov\";\n  }\n\n  // Get English or Spanish strings. Default to English if an unknown `lang` is passed.\n  // Ex: <usa-banner lang=\"zy\"></usa-banner>\n  protected get _bannerText() {\n    return USA_BANNER_TRANSLATIONS[this.lang] || USA_BANNER_TRANSLATIONS[\"en\"];\n  }\n\n  // Get the action text and use for both mobile & desktop buttons.\n  protected get _actionText() {\n    const bannerActionText = this.querySelector('[slot=\"banner-action\"]');\n\n    return bannerActionText?.textContent;\n  }\n\n  domainTemplate(tld: string) {\n    const { domain } = this._bannerText;\n\n    return html`\n      <div class=\"icon-gov\">\n        <p>\n          <strong>\n            <slot name=\"domain-heading\"> ${domain.heading} .${tld} </slot>\n          </strong>\n          <br />\n          <slot name=\"domain-text\">\n            ${domain.text1} <strong>.${tld}</strong> ${domain.text2}\n          </slot>\n        </p>\n      </div>\n    `;\n  }\n\n  lockIcon() {\n    return html`\n      <span\n        class=\"icon-lock\"\n        role=\"img\"\n        aria-label=\"Locked padlock icon\"\n      ></span>\n    `;\n  }\n\n  httpsTemplate(tld: string) {\n    const { https } = this._bannerText;\n\n    return html`\n      <div class=\"icon-https\">\n        <p>\n          <strong>\n            <slot name=\"https-heading\">\n              ${https.heading1} .${tld} ${https.heading2}\n            </slot> </strong\n          ><br />\n          <slot name=\"https-text\">\n            ${unsafeHTML(https.text1)} (${this.lockIcon()})\n            ${unsafeHTML(https.text2)} .${tld} ${https.text3}\n          </slot>\n        </p>\n      </div>\n    `;\n  }\n\n  static styles = [\n    css`\n      :host {\n        /** Icons */\n        --ogds-icon-close: url(\"${unsafeCSS(iconClose)}\");\n        --ogds-icon-expand-less: url(\"${unsafeCSS(iconExpandLess)}\");\n        --ogds-icon-expand-more: url(\"${unsafeCSS(iconExpandMore)}\");\n        --ogds-icon-gov: url(\"${unsafeCSS(iconDotGov)}\");\n        --ogds-icon-https: url(\"${unsafeCSS(iconHttps)}\");\n      }\n    `,\n    breakpointTokens,\n    colorTokens,\n    spacingTokens,\n    styles,\n  ];\n\n  render() {\n    const classes = { [\"expanded\"]: this.isOpen };\n    // ? Is there a better way to fallback to a default value is passed value doesn't match?\n    // Example: User passes `tld=\"zzz\"` --> uses \"gov\" domain instead of `zzz`.\n    const tld = this.tld === \"mil\" ? \"mil\" : \"gov\";\n    const { banner } = this._bannerText;\n\n    return html`\n      <section aria-label=${this.label || banner.label}>\n        <div class=\"usa-accordion\">\n          <header class=\"${classMap(classes)}\">\n            <div class=\"inner\">\n              <div class=\"grid-col-auto\">\n                <img\n                  aria-hidden=\"true\"\n                  class=\"header-flag\"\n                  src=${this.flagSrc}\n                  alt=\"\"\n                />\n              </div>\n              <div\n                class=\"grid-col-fill tablet:grid-col-auto\"\n                aria-hidden=\"true\"\n              >\n                <p class=\"header-text\">\n                  <slot name=\"banner-text\">${banner.text}</slot>\n                </p>\n                <!-- \n                  Since the header-action text below is underlined, the slot and p \n                  need to be on the same line to avoid one extra space of underline \n                  before the expand icon.\n                -->\n                <!-- prettier-ignore -->\n                <p class=\"header-action\"><slot name=\"banner-action\">${banner.action}</slot></p>\n              </div>\n              <button\n                type=\"button\"\n                class=\"usa-accordion__button\"\n                aria-expanded=\"${this.isOpen}\"\n                aria-controls=\"gov-banner-default\"\n                @click=\"${this.toggle}\"\n              >\n                <span class=\"button-text\">\n                  ${this._actionText || banner.action}\n                </span>\n              </button>\n            </div>\n          </header>\n          <div class=\"content usa-accordion__content\" hidden>\n            <div class=\"grid-row grid-gap-lg\">\n              <div class=\"guidance tablet:grid-col-6\">\n                ${this.domainTemplate(tld)}\n              </div>\n              <div class=\"guidance tablet:grid-col-6\">\n                ${this.httpsTemplate(tld)}\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    `;\n  }\n}\n\ndefineCustomElement(\"usa-banner\", UsaBanner);\n"],"names":["usFlagSmall","iconDotGov","iconHttps","iconClose","iconExpandMore","iconExpandLess","USA_BANNER_TRANSLATIONS","_UsaBanner","OgdsElement","contentElement","tld","domain","html","https","unsafeHTML","classes","banner","classMap","css","unsafeCSS","breakpointTokens","colorTokens","spacingTokens","styles","UsaBanner","defineCustomElement"],"mappings":"oi3BAAAA,EAAe,iWCAfC,EAAe,2vBCAfC,EAAe,w6BCAfC,EAAe,0SCAfC,EAAe,qNCAfC,EAAe,kNCwCTC,EAGF,CACF,GAAI,CACF,OAAQ,CACN,MAAO,mDACP,KAAM,sDACN,OAAQ,qBAAA,EAEV,OAAQ,CACN,QAAS,wBACT,MAAO,IACP,MACE,8EAAA,EAEJ,MAAO,CACL,SAAU,SACV,SAAU,qBACV,MAAO,0BACP,MACE,oEACF,MACE,yEAAA,CACJ,EAEF,GAAI,CACF,OAAQ,CACN,MAAO,kDACP,KAAM,kDACN,OAAQ,qCAAA,EAEV,OAAQ,CACN,QAAS,gCACT,MAAO,eACP,MACE,sEAAA,EAEJ,MAAO,CACL,SAAU,yBACV,SAAU,aACV,MAAO,8BACP,MACE,4FACF,MACE,uEAAA,CACJ,CAEJ,EA4BaC,EAAN,MAAMA,UAAkBC,EAAAA,WAAY,CAgBzC,QAAS,CACP,KAAK,OAAS,CAAC,KAAK,OACpB,MAAMC,EAAiB,KAAK,YAAY,cAAc,UAAU,EAC5DA,GACFA,EAAe,gBAAgB,QAAQ,CAE3C,CAEA,aAAc,CACZ,MAAA,EACA,KAAK,QAAUT,EACf,KAAK,KAAO,KACZ,KAAK,OAAS,GACd,KAAK,IAAM,KACb,CAIA,IAAc,aAAc,CAC1B,OAAOM,EAAwB,KAAK,IAAI,GAAKA,EAAwB,EACvE,CAGA,IAAc,aAAc,CAG1B,OAFyB,KAAK,cAAc,wBAAwB,GAE3C,WAC3B,CAEA,eAAeI,EAAa,CAC1B,KAAM,CAAE,OAAAC,GAAW,KAAK,YAExB,OAAOC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,2CAIgCD,EAAO,OAAO,KAAKD,CAAG;AAAA;AAAA;AAAA;AAAA,cAInDC,EAAO,KAAK,aAAaD,CAAG,aAAaC,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA,KAKjE,CAEA,UAAW,CACT,OAAOC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,KAOT,CAEA,cAAcF,EAAa,CACzB,KAAM,CAAE,MAAAG,GAAU,KAAK,YAEvB,OAAOD,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gBAKKC,EAAM,QAAQ,KAAKH,CAAG,IAAIG,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,cAI1CC,EAAAA,WAAWD,EAAM,KAAK,CAAC,KAAK,KAAK,UAAU;AAAA,cAC3CC,EAAAA,WAAWD,EAAM,KAAK,CAAC,KAAKH,CAAG,IAAIG,EAAM,KAAK;AAAA;AAAA;AAAA;AAAA,KAK1D,CAmBA,QAAS,CACP,MAAME,EAAU,CAAG,SAAa,KAAK,MAAA,EAG/BL,EAAM,KAAK,MAAQ,MAAQ,MAAQ,MACnC,CAAE,OAAAM,GAAW,KAAK,YAExB,OAAOJ,EAAAA;AAAAA,4BACiB,KAAK,OAASI,EAAO,KAAK;AAAA;AAAA,2BAE3BC,EAAAA,SAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMpB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6CASSC,EAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sEAQcA,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKlD,KAAK,MAAM;AAAA;AAAA,0BAElB,KAAK,MAAM;AAAA;AAAA;AAAA,oBAGjB,KAAK,aAAeA,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQnC,KAAK,eAAeN,CAAG,CAAC;AAAA;AAAA;AAAA,kBAGxB,KAAK,cAAcA,CAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOvC,CACF,EA3KEH,EAAO,WAAa,CAClB,QAAS,CAAE,KAAM,MAAA,EACjB,KAAM,CAAE,KAAM,OAAQ,QAAS,EAAA,EAC/B,OAAQ,CAAE,MAAO,EAAA,EACjB,MAAO,CAAE,KAAM,MAAA,EACf,IAAK,CAAE,KAAM,OAAQ,QAAS,EAAA,CAAK,EAuFrCA,EAAO,OAAS,CACdW,EAAAA;AAAAA;AAAAA;AAAAA,kCAG8BC,EAAAA,UAAUhB,CAAS,CAAC;AAAA,wCACdgB,EAAAA,UAAUd,CAAc,CAAC;AAAA,wCACzBc,EAAAA,UAAUf,CAAc,CAAC;AAAA,gCACjCe,EAAAA,UAAUlB,CAAU,CAAC;AAAA,kCACnBkB,EAAAA,UAAUjB,CAAS,CAAC;AAAA;AAAA,MAGlDkB,EACAC,EACAC,EACAC,CAAA,EA3GG,IAAMC,EAANjB,EA8KPkB,EAAAA,oBAAoB,aAAcD,CAAS","x_google_ignoreList":[0,1,2]}