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

package/src/components/ogds-alert/ogds-alert.stories.ts

@@ -0,0 +1,75 @@
+import "./index.ts";
+import { html, nothing } from "lit";
+
+const meta = {
+  title: "Components/Alert",
+  component: "ogds-alert",
+  tags: ["experimental"],
+  render: ({
+    heading,
+    type,
+    body,
+    noIcon,
+  }: {
+    heading: string;
+    type: string;
+    body: string;
+    noIcon: boolean;
+  }) => {
+    return html`
+      <ogds-alert type="${type}" ?no-icon="${noIcon}">
+        ${heading ? html`<h3 slot="heading">${heading}</h3>` : nothing}
+        <p slot="body" .innerHTML=${body}></p>
+      </ogds-alert>
+    `;
+  },
+};
+
+export default meta;
+
+export const InformationalAlert = {
+  args: {
+    heading: "Informational Alert",
+    type: "info",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+  },
+};
+
+export const WarningAlert = {
+  args: {
+    heading: "Warning Alert",
+    type: "warning",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+  },
+};
+
+export const SuccessAlert = {
+  args: {
+    heading: "Success Alert",
+    type: "success",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+  },
+};
+
+export const ErrorAlert = {
+  args: {
+    heading: "Error Alert",
+    type: "error",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+  },
+};
+
+export const SlimAlert = {
+  args: {
+    type: "info",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+  },
+};
+
+export const AlertWithNoIcon = {
+  args: {
+    type: "info",
+    body: `Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod.`,
+    noIcon: "true",
+  },
+};

package/src/components/ogds-banner/index.ts

@@ -60,20 +60,20 @@ const OGDS_BANNER_TRANSLATIONS: Record<
       text2:
         "or <strong>https://</strong> means you’ve safely connected to the",
       text3:
-        "website. Share sensitive information only on official, secure websites.",
+        " 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.",
+        "pertenece a una organización oficial del gobierno de Estados Unidos.",
     },
     https: {
       heading1: "Los sitios web seguros",
@@ -82,7 +82,7 @@ const OGDS_BANNER_TRANSLATIONS: Record<
       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.",
+        ". Comparta información sensible solo en sitios web oficiales y seguros.",
     },
   },
 };
@@ -201,7 +201,7 @@ export class OgdsBanner extends LitElement {
           ><br />
           <slot name="https-text">
             ${unsafeHTML(https.text1)} (${this.lockIcon()})
-            ${unsafeHTML(https.text2)} .${tld} ${https.text3}
+            ${unsafeHTML(https.text2)} .${tld}${https.text3}
           </slot>
         </p>
       </div>

package/src/components/ogds-banner/ogds-banner.spec.ts

@@ -58,7 +58,7 @@ describe("Spanish variant", async () => {
 
   it("renders correctly", () => {
     expect(getInsideBanner().textContent).toContain(
-      "Un sitio oficial del Gobierno de Estados Unidos",
+      "Un sitio oficial del gobierno de Estados Unidos",
     );
   });
 });

package/src/components/task-list/docs.mdx

@@ -0,0 +1,23 @@
+import { Meta, Title, Primary, Stories } from "@storybook/addon-docs/blocks";
+
+<Meta isTemplate />
+
+<Title />
+
+A Task List displays user tasks, their status (e.g. "not started", "completed", "in progress"), and an actionable link for each task.
+
+---
+
+## Default
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+## Guidance
+
+The Task List is used primarily for lengthy or complex workflows (non-sequential), e.g. registration, rather than simple, short steps.

package/src/components/task-list/index.ts

@@ -0,0 +1,65 @@
+import { LitElement, html, unsafeCSS } from "lit";
+
+import styles from "./ogds-task-list.css";
+import { adoptTokenStyles } from "../../core/token-styles";
+
+import { property } from "lit/decorators.js";
+
+/**
+ * @summary The ogds-task-list component. For now, this is intended for non-sequential task lists (order doesn't matter).
+ * @element ogds-task-list
+ */
+
+interface TaskStep {
+  title: string;
+  description: string;
+  status: StepStatus;
+  url?: string;
+}
+
+type StepStatus = "not-started" | "in-progress" | "completed";
+
+export class OgdsTaskList extends LitElement {
+  /** @ignore */
+
+  @property({ type: Array })
+  steps: TaskStep[] = [];
+
+  static styles = unsafeCSS(styles);
+
+  override connectedCallback() {
+    super.connectedCallback();
+    adoptTokenStyles();
+  }
+
+  renderAction(step: TaskStep) {
+    switch (step.status) {
+      case "in-progress":
+        return html`<a href=${step.url}>Continue</a>`;
+      case "completed":
+        return html`
+          <span class="completed">Completed</span><a href=${step.url}>Edit</a>
+        `;
+      default:
+        return html`<a href=${step.url}>Start </a>`;
+    }
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.steps.map(
+          (step) => html`
+            <li class="step" data-status=${step.status}>
+              <h2 class="heading">${step.title}</h2>
+              <div class="description">${step.description}</div>
+              <div class="action">${this.renderAction(step)}</div>
+            </li>
+          `,
+        )}
+      </ul>
+    `;
+  }
+}
+
+customElements.define("ogds-task-list", OgdsTaskList);

package/src/components/task-list/ogds-task-list.css

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+ul {
+  list-style: none;
+  padding-left: 1.5rem;
+}
+
+li {
+  border-block-end: 2px solid var(--ogds-theme-color-base-lightest);
+  margin-block-end: 2rem;
+  padding-block-end: 1.25rem;
+}
+
+.heading {
+  margin-block-end: 0.25rem;
+}
+
+.description {
+  color: var(--ogds-theme-color-base);
+  margin-block-end: 0.5rem;
+}
+
+.action {
+  display: flex;
+  flex-direction: column;
+}
+
+.completed {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+}

package/src/components/task-list/ogds-task-list.stories.ts

@@ -0,0 +1,46 @@
+import { html } from "lit";
+import "./index";
+import ComponentDocs from "./docs.mdx";
+
+export default {
+  title: "Components/TaskList",
+  component: "ogds-task-list",
+  tags: ["experimental"],
+  parameters: {
+    docs: {
+      page: ComponentDocs,
+    },
+  },
+};
+
+const exampleSteps = [
+  {
+    title: "Tell us about you",
+    description:
+      " Confirm the legal entity structure, your employer details, and your EIN. ",
+    status: "in-progress",
+    url: "",
+  },
+  {
+    title: "Set up your employer profile",
+    description: "Click the link we sent to your inbox.",
+    status: "completed",
+    url: "",
+  },
+  {
+    title: "Enter the employer’s address",
+    description: "Tell us more about yourself.",
+    status: "completed",
+    url: "",
+  },
+  {
+    title: "Submit your Maryland Resident Agent details",
+    description: "Review and submit profile details.",
+    status: "not-started",
+    url: "",
+  },
+];
+
+export const Default = {
+  render: () => html`<ogds-task-list .steps=${exampleSteps}></ogds-task-list>`,
+};

package/src/core/token-styles.ts

@@ -2,6 +2,7 @@ import colorTokens from "@ogds/tokens/styles/css/colors.css";
 import spacingTokens from "@ogds/tokens/styles/css/spacing.css";
 import typographyTokens from "@ogds/tokens/styles/css/typography.css";
 import themeColorTokens from "@ogds/tokens/styles/css/theme-color.css";
+import themeComponentTokens from "@ogds/tokens/styles/css/theme-components.css";
 import themeSpacingTokens from "@ogds/tokens/styles/css/theme-spacing.css";
 import themeTypographyTokens from "@ogds/tokens/styles/css/theme-typography.css";
 
@@ -12,6 +13,7 @@ sheet.replaceSync(
     spacingTokens,
     typographyTokens,
     themeColorTokens,
+    themeComponentTokens,
     themeSpacingTokens,
     themeTypographyTokens,
   ]

package/storybook/contributing.mdx

@@ -1,115 +1,6 @@
 import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 import Contributing from "../CONTRIBUTING.md?raw";
 
-<Meta title="Documentation/Contributing" />
+<Meta title="Documentation/Contributing Code" />
 
 <Markdown>{Contributing}</Markdown>
-
-## Overview
-
-This information is for OGDS Core team members contribute to the OGDS Elements project.
-
-## Project setup
-
-It is helpful to have [nvm installed](https://github.com/nvm-sh/nvm) and use the correct version of Node.js. From the project root, run the following command:
-
-```bash
-npm install
-```
-
-### Installing Playwright (for E2E testing)
-
-If you plan to run or write end-to-end tests, please see the [Playwright documentation](https://playwright.dev/docs/intro) for installation instructions and the [README.md file in the `e2e` directory](https://github.com/open-government-design-system/ogds-elements/tree/develop/e2e).
-
-## Development Workflow
-
-The development workflow uses [Storybook](https://storybook.js.org/) and [custom elements manifest](https://github.com/webcomponents/custom-elements-manifest) to generate a custom elements manifest and watch for changes to the custom elements manifest. Storybook handles documentation of component usage, styling, and properties.
-
-### Running StorybookJS
-
-Start the development server with Storybook and custom elements manifest watch process:
-
-```bash
-npm run start
-```
-
-This runs Storybook on port 8008 at `http://localhost:8008`.
-
----
-
-### Creating stories
-
-Stories should document the following component features:
-
-- Variants (e.g. default, primary, secondary, etc.)
-- Properties
-- CSS Custom Properties
-
-### Story File Structure
-
-Stories and functional tests should be created alongside components:
-
-```
-src/components/usa-example/
-  ├── docs.mdx
-  ├── index.ts
-  ├── usa-example.css
-  ├── usa-example.spec.ts
-  └── usa-example.stories.ts
-```
-
-## Project Structure
-
-- **`src/components/`** - Web Component implementations
-- **`src/core/`** - Core utilities and base classes
-- **`src/shared/`** - Static asset files like fonts and icons
-- **`e2e/`** - Playwright end-to-end tests
-- **`storybook/`** - Storybook documentation files
-- **`.storybook/`** - Storybook configuration
-- **`tokens/`** - Design token definitions (Style Dictionary)
-- **`internals/`** - Internal build scripts and utilities
-- **`config/`** - Config files for project tooling and testing
-
-## Component Development Checklist
-
-When creating a new component:
-
-- Create component files in `src/components/[component-name]/`
-- Add JSDoc comments to component files documenting the component's API
-- Write component implementation (TypeScript + Lit)
-- Create component styles in an external CSS file and import it into the component
-- Export component from `index.ts`
-- Add component to for package exports `src/components/index.js`
-- Create Storybook stories documenting all variants and props
-- Write unit tests with Vitest
-- Write E2E tests with Playwright (including visual regression tests)
-- Build the custom elements manifest to keep it synced with JSDoc comments
-- Test accessibility with Storybook's a11y addon
-
----
-
-## Pre-commit Hooks
-
-This project uses [Husky](https://typicode.github.io/husky/) for Git hooks. Hooks are automatically set up when you run `npm install` via the `prepare` script.
-
-## Publishing and Releases
-
-The package is published as `@ogds/elements` on npm. The current version can be found in `package.json`
-
-Component maturity levels:
-
-- **Pre-alpha**: Experimental, API may change significantly
-- **Alpha**: Core functionality stable, refinements expected
-- **Beta**: Feature complete, undergoing final testing
-- **Stable**: Production ready
-
-Check the README for current component status.
-
-## Additional Resources
-
-- [USWDS Design System](https://designsystem.digital.gov)
-- [Web Components MDN Guide](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
-- [Lit Documentation](https://lit.dev)
-- [Storybook Documentation](https://storybook.js.org)
-- [Playwright Documentation](https://playwright.dev)
-- [E2E Testing Guide](https://github.com/open-government-design-system/ogds-elements/tree/develop/e2e) (detailed testing documentation)

package/storybook/readme.mdx

@@ -1,6 +1,6 @@
 import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 import Readme from "../README.md?raw";
 
-<Meta title="README" />
+<Meta title="OGDS Elements (README)" />
 
 <Markdown>{Readme}</Markdown>

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

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

package/dist/index-Bl2KLDbH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-Bl2KLDbH.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 sólo 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/index-DTiLuJoA.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DTiLuJoA.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 sólo 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/src/components/usa-header/index.ts

@@ -1,49 +0,0 @@
-import { LitElement, html } from "lit";
-import { defineCustomElement } from "../../utils";
-
-import styles from "./usa-header.css";
-
-export class UsaHeader extends LitElement {
-  constructor() {
-    super();
-  }
-
-  static styles = [styles];
-
-  render() {
-    return html`
-      <div class="header__logo">LOGO</div>
-      <nav aria-label="Primary navigation">
-        <ul>
-          <li>
-            <a href="#">A link</a>
-          </li>
-          <li>
-            <button popovertarget="primary-nav-1">
-              First item with dropdown
-            </button>
-            <ul popover id="primary-nav-1">
-              <li><a href="#">Subnav 1</a></li>
-              <li><a href="#">Subnav 2</a></li>
-              <li><a href="#">Subnav 3</a></li>
-              <li><a href="#">Subnav 4</a></li>
-            </ul>
-          </li>
-          <li>
-            <button popovertarget="primary-nav-2">
-              Second item with dropdown
-            </button>
-            <ul popover id="primary-nav-2">
-              <li><a href="#">Second Subnav 1</a></li>
-              <li><a href="#">Subnav 2</a></li>
-              <li><a href="#">Subnav 3</a></li>
-              <li><a href="#">Subnav 4</a></li>
-            </ul>
-          </li>
-        </ul>
-      </nav>
-    `;
-  }
-}
-
-defineCustomElement("usa-header", UsaHeader);

package/src/components/usa-header/usa-header.css

@@ -1 +0,0 @@
-/* Hi */