@noctuatech/uswds 0.0.36 → 0.1.2

package/assets/flags/west_virginia.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#FFFFFF"/>
+  <rect x="0" y="0" width="24" height="16" fill="#002868"/>
+  
+  <!-- State seal circle -->
+  <circle cx="12" cy="8" r="6" fill="#FFFFFF"/>
+  <circle cx="12" cy="8" r="5" fill="#002868"/>
+  
+  <!-- Rhododendron flowers -->
+  <circle cx="8" cy="6" r="1" fill="#FFFFFF"/>
+  <circle cx="16" cy="6" r="1" fill="#FFFFFF"/>
+  <circle cx="8" cy="10" r="1" fill="#FFFFFF"/>
+  <circle cx="16" cy="10" r="1" fill="#FFFFFF"/>
+  <circle cx="12" cy="8" r="1" fill="#FFFFFF"/>
+  
+  <!-- Crossed rifles -->
+  <path d="M10 6L14 10" stroke="#FFFFFF" stroke-width="1"/>
+  <path d="M14 6L10 10" stroke="#FFFFFF" stroke-width="1"/>
+  
+  <!-- Mining tools -->
+  <path d="M8 8L16 8" stroke="#FFFFFF" stroke-width="1"/>
+  <path d="M12 6L12 10" stroke="#FFFFFF" stroke-width="1"/>
+</svg> 

package/assets/flags/wisconsin.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#002868"/>
+  <path d="M12 4L16 8L12 12L8 8L12 4Z" fill="#FFD700"/>
+</svg> 

package/assets/flags/wyoming.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="24" height="16" fill="#002868"/>
+  <path d="M12 4L16 8L12 12L8 8L12 4Z" fill="#FFD700"/>
+</svg> 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.0.36",
+  "version": "0.1.2",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -26,13 +26,13 @@
     },
     "test": {
       "command": "wtr",
-      "dependencies": ["tsc"]
+      "dependencies": ["tsc", "build_testing_library"]
     },
     "build": {
       "dependencies": ["build_storybook", "build_website"]
     },
     "preview": {
-      "command": "eleventy --serve --incremental --quiet",
+      "command": "eleventy --serve --incremental",
       "service": true,
       "dependencies": [
         {
@@ -48,14 +48,19 @@
       "command": "eleventy --pathprefix=uswds",
       "dependencies": ["tsc", "copy_icons"]
     },
+    "build_testing_library": {
+      "command": "./scripts/build_testing_library.sh",
+      "files": ["node_modules/@testing-library/**"],
+      "output": ["testing-library/**"]
+    },
     "tsc": {
       "command": "tsc --build --pretty",
       "clean": "if-file-deleted",
       "files": ["src/**", "tsconfig.json"],
-      "dependencies": ["./packages/testing:build"]
+      "output": ["target/**"]
     },
     "copy_icons": {
-      "command": "cp -a node_modules/@uswds/uswds/dist/img/usa-icons/. assets/usa-icons/",
+      "command": "./scripts/copy_usa_icons.sh",
       "files": ["node_modules/@uswds/uswds/dist/img/usa-icons/**"],
       "output": ["assets/usa-icon/**"]
     }
@@ -76,9 +81,12 @@
     "@storybook/addon-essentials": "^8.6.0",
     "@storybook/web-components": "^8.6.0",
     "@storybook/web-components-vite": "^8.6.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/mocha": "^10.0.7",
     "@types/node": "^22.0.0",
     "@uswds/uswds": "^3.10.0",
+    "@web/dev-server-import-maps": "^0.2.1",
     "@web/test-runner": "^0.20.0",
     "husky": "^9.0.11",
     "js-beautify": "^1.15.1",

package/src/lib/accordion/accordion.test.ts

@@ -1,6 +1,8 @@
 import "./accordion.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import { userEvent } from "@testing-library/user-event";
 
 import type { USAAccordionElement } from "./accordion.element.js";
 
@@ -36,10 +38,10 @@ describe("usa-accordion", () => {
       </usa-accordion>
     `);
 
-    const heading = accordion.querySelector("h4");
+    const heading = await screen.findByRole("heading");
     const content = accordion.querySelector<HTMLDivElement>(".content");
 
-    heading?.click();
+    await userEvent.click(heading);
 
     assert.isTrue(content?.checkVisibility());
   });
@@ -58,12 +60,12 @@ describe("usa-accordion", () => {
       </usa-accordion>
     `);
 
-    const heading = accordion.querySelector("h4");
+    const heading = await screen.findByRole("heading");
     const content = accordion.querySelector<HTMLDivElement>(".content");
 
     assert.isFalse(content?.checkVisibility());
 
-    heading?.click();
+    await userEvent.click(heading);
 
     assert.isTrue(content.checkVisibility());
   });
@@ -91,21 +93,21 @@ describe("usa-accordion", () => {
     const headings = el.querySelectorAll("h4");
     const content = Array.from(el.querySelectorAll<HTMLDivElement>(".content"));
 
-    headings[0].click();
+    await userEvent.click(headings[0]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [true, false, false],
     );
 
-    headings[1].click();
+    await userEvent.click(headings[1]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [false, true, false],
     );
 
-    headings[2].click();
+    await userEvent.click(headings[2]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
@@ -136,21 +138,21 @@ describe("usa-accordion", () => {
     const headings = el.querySelectorAll("h4");
     const content = Array.from(el.querySelectorAll<HTMLDivElement>(".content"));
 
-    headings[0].click();
+    await userEvent.click(headings[0]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [true, false, false],
     );
 
-    headings[1].click();
+    await userEvent.click(headings[1]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [false, true, false],
     );
 
-    headings[2].click();
+    await userEvent.click(headings[2]);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),

package/src/lib/button/button.stories.ts

@@ -7,7 +7,7 @@ import { BUTTON_VARIANTS, type USAButtonElement } from "./button.element.js";
 const meta = {
   title: "usa-button",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
       <div style="display: inline-flex; flex-direction: column; gap: 1rem">
         ${BUTTON_VARIANTS.map(

package/src/lib/card/card.stories.ts

@@ -7,7 +7,6 @@ import type { USACardElement } from "./card.element.js";
 const meta = {
   title: "usa-card",
   tags: ["autodocs"],
-
   argTypes: {},
   args: {},
 } satisfies Meta<USACardElement>;

package/src/lib/checkbox/checkbox.element.ts

@@ -150,17 +150,6 @@ export class USACheckboxElement extends HTMLElement {
 
   #internals = this.attachInternals();
 
-  connectedCallback() {
-    this.#checkbox({
-      checked: this.checked,
-      name: this.name,
-      disabled: this.disabled,
-      required: this.required,
-    });
-
-    this.#syncFormState();
-  }
-
   attributeChangedCallback() {
     this.#checkbox({
       checked: this.checked,
@@ -184,12 +173,7 @@ export class USACheckboxElement extends HTMLElement {
     const checkbox = this.#checkbox();
 
     this.#internals.setValidity({});
-
-    if (checkbox.checked) {
-      this.#internals.setFormValue(this.value);
-    } else {
-      this.#internals.setFormValue(null);
-    }
+    this.#internals.setFormValue(checkbox.checked ? this.value : null);
 
     if (checkbox.validationMessage) {
       this.#internals.setValidity(

package/src/lib/checkbox/checkbox.stories.ts

@@ -1,39 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import { ifDefined } from "lit/directives/if-defined.js";
-import { when } from "lit/directives/when.js";
-
 import type { USACheckboxElement } from "./checkbox.element.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
   title: "usa-checkbox",
   tags: ["autodocs"],
-  render() {
-    return html`
-      <usa-checkbox-group>
-        <legend class="usa-legend">Select any historical figure</legend>
-
-        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
-          Sojourner Truth
-          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
-          Frederick Douglass
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
-          Booker T. Washington
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
-          George Washington Carver
-        </usa-checkbox>
-      </usa-checkbox-group>
-    `;
-  },
   argTypes: {},
   args: {},
 } satisfies Meta<USACheckboxElement & { description: string }>;

package/src/lib/combo-box/combo-box-option/combo-box-option.element.ts

@@ -0,0 +1,68 @@
+import { inject, injectable } from "@joist/di";
+import { attr, css, element, html, query } from "@joist/element";
+
+import { COMBO_BOX_CTX } from "../context.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-combo-box-option": USAComboBoxOptionElement;
+  }
+}
+
+const template = document.createElement("template");
+
+template.innerHTML = /*html*/ `
+  <li tabindex="-1" role="option">
+    <slot></slot>
+  </li>
+`;
+
+@injectable({
+  name: "usa-combo-box-option-ctx",
+})
+@element({
+  tagName: "usa-combo-box-option",
+  shadowDom: [
+    css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem;  
+    }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+export class USAComboBoxOptionElement extends HTMLElement {
+  @attr()
+  accessor value = "";
+
+  #listItem = template.content.cloneNode(true) as HTMLLIElement;
+  #li = query("li", this.#listItem);
+  #slot = query("slot", this.#listItem);
+  #ctx = inject(COMBO_BOX_CTX);
+
+  attributeChangedCallback() {
+    const value = this.value.split(" ").join("-").toLocaleLowerCase();
+
+    this.#li().dataset.value = this.value;
+    this.#slot().name = value;
+
+    this.slot = value;
+  }
+
+  connectedCallback() {
+    const ctx = this.#ctx();
+
+    ctx.addOption(this.#li());
+  }
+
+  disconnectedCallback() {
+    const ctx = this.#ctx();
+
+    ctx.removeOption(this.#li());
+
+    this.#li().remove();
+  }
+}

package/src/lib/combo-box/combo-box.element.ts

@@ -0,0 +1,222 @@
+import { injectable } from "@joist/di";
+import { css, element, html, listen, query } from "@joist/element";
+
+import { COMBO_BOX_CTX, type ComboBoxContainer } from "./context.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-combo-box": USAComboBoxElement;
+  }
+}
+
+@injectable({
+  name: "usa-combo-box-ctx",
+  provideSelfAs: [COMBO_BOX_CTX],
+})
+@element({
+  tagName: "usa-combo-box",
+  shadowDom: [
+    css`
+      :host {
+        --usa-combo-max-height: 12.5em;
+
+        display: block;
+        max-width: 30rem;
+        position: relative;
+      }
+
+      ul {
+        padding: 0;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        transform: translateY(100%);
+        margin: 0;
+        border: 1px solid rgb(92, 92, 92);
+        max-height: var(--usa-combo-max-height);
+        overflow-y: scroll;
+        overflow-x: visible;
+        z-index: 1001;
+      }
+
+      ul:empty {
+        border: none;
+      }
+
+      ul li {
+        background: #ffff;
+        list-style: none;
+        border-bottom: 1px solid #e6e6e6;
+        cursor: pointer;
+        display: block;
+      }
+
+      ul li:hover {
+        background-color: #f0f0f0;
+      }
+
+      li:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: -0.25rem;
+      }
+    `,
+    html`
+      <slot name="input"></slot>
+      <ul tabindex="-1" role="listbox"></ul>
+    `,
+  ],
+})
+export class USAComboBoxElement
+  extends HTMLElement
+  implements ComboBoxContainer
+{
+  list = query("ul");
+  input = query<HTMLInputElement>('[slot="input"]', this);
+  currentItemEl: Element | null = null;
+  #allListItems = new Set<HTMLLIElement>();
+
+  listItems() {
+    return this.list().querySelectorAll("li");
+  }
+
+  addOption(el: HTMLLIElement) {
+    this.#allListItems.add(el);
+  }
+
+  removeOption(el: HTMLLIElement) {
+    this.#allListItems.delete(el);
+  }
+
+  @listen("focus", (host) => host.input())
+  onFocusIn() {
+    this.currentItemEl = null;
+
+    const list = this.list();
+
+    const fragment = document.createDocumentFragment();
+
+    for (const item of this.#allListItems) {
+      fragment.append(item);
+    }
+
+    list.replaceChildren(fragment);
+  }
+
+  @listen("input", (host) => host)
+  async onInput() {
+    const input = this.input();
+    const list = this.list();
+
+    this.currentItemEl = null;
+
+    const fragment = document.createDocumentFragment();
+
+    for (const item of this.#allListItems) {
+      if (
+        item.dataset.value?.toLowerCase().startsWith(input.value.toLowerCase())
+      ) {
+        fragment.append(item);
+      }
+    }
+
+    list.replaceChildren(fragment);
+  }
+
+  @listen("focusout")
+  onFocusOut() {
+    setTimeout(() => {
+      // This needs to be in a timeout so that it runs as part of the next loop.
+      // the active element will not be set until after all of the focus and blur events are done
+      if (!this.contains(document.activeElement)) {
+        this.list({ innerHTML: "" });
+        this.currentItemEl = null;
+      }
+    }, 0);
+  }
+
+  @listen("keydown")
+  onArrowDown(e: KeyboardEvent): void {
+    if (e.key.toUpperCase() !== "ARROWDOWN") {
+      return;
+    }
+
+    e.preventDefault();
+
+    if (this.currentItemEl === null) {
+      // if there is no current item, set the first item as the current item
+      const list = this.list();
+
+      this.currentItemEl = list.firstElementChild;
+    } else if (this.currentItemEl.nextSibling) {
+      // if there is a current item, set the next item as the current item
+      this.currentItemEl = this.currentItemEl.nextElementSibling;
+    }
+
+    if (this.currentItemEl instanceof HTMLElement) {
+      this.currentItemEl.focus();
+    }
+  }
+
+  @listen("keydown")
+  onArrowUp(e: KeyboardEvent): void {
+    if (e.key.toUpperCase() !== "ARROWUP") {
+      return;
+    }
+
+    e.preventDefault();
+
+    if (this.currentItemEl?.previousElementSibling) {
+      this.currentItemEl = this.currentItemEl.previousElementSibling;
+
+      if (this.currentItemEl instanceof HTMLElement) {
+        this.currentItemEl.focus();
+      }
+    } else {
+      this.input().focus();
+      this.currentItemEl = null;
+    }
+  }
+
+  @listen("keydown")
+  onEnter(e: KeyboardEvent): void {
+    if (e.key.toUpperCase() !== "ENTER") {
+      return;
+    }
+
+    e.preventDefault();
+
+    const target = e.target as HTMLElement;
+
+    this.currentItemEl = null;
+
+    const value = target.dataset.value || "";
+
+    this.input({
+      value,
+      selectionStart: value.length,
+      selectionEnd: value.length,
+    }).focus();
+
+    this.list({ innerHTML: "" });
+  }
+
+  @listen("click")
+  onClick(e: MouseEvent) {
+    if (e.target instanceof HTMLElement) {
+      const value = e.target.getAttribute("value");
+
+      if (value) {
+        this.input({
+          value,
+          selectionStart: value.length,
+          selectionEnd: value.length,
+        }).focus();
+
+        this.list({ innerHTML: "" });
+
+        this.currentItemEl = null;
+      }
+    }
+  }
+}