@noctuatech/uswds 0.1.0 → 0.1.3

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.1.0",
+  "version": "0.1.3",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -29,7 +29,7 @@
       "dependencies": ["tsc", "build_testing_library"]
     },
     "build": {
-      "dependencies": ["build_storybook", "build_website"]
+      "dependencies": ["tsc", "build_storybook", "minify_html_literals"]
     },
     "preview": {
       "command": "eleventy --serve --incremental",
@@ -42,11 +42,7 @@
       ]
     },
     "build_storybook": {
-      "command": "storybook build -o _site/storybook"
-    },
-    "build_website": {
-      "command": "eleventy --pathprefix=uswds",
-      "dependencies": ["tsc", "copy_icons"]
+      "command": "storybook build"
     },
     "build_testing_library": {
       "command": "./scripts/build_testing_library.sh",
@@ -57,21 +53,26 @@
       "command": "tsc --build --pretty",
       "clean": "if-file-deleted",
       "files": ["src/**", "tsconfig.json"],
-      "output": ["target/**"]
+      "output": ["target/**", "tsconfig.tsbuildinfo"]
     },
     "copy_icons": {
       "command": "./scripts/copy_usa_icons.sh",
       "files": ["node_modules/@uswds/uswds/dist/img/usa-icons/**"],
       "output": ["assets/usa-icon/**"]
+    },
+    "minify_html_literals": {
+      "command": "node ./scripts/minify_html_literals.js",
+      "files": ["target/**/*.js"],
+      "dependencies": []
     }
   },
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.0.0",
-    "@joist/element": "^4.0.0",
-    "@joist/observable": "^4.0.0",
+    "@joist/di": "^4.2.0",
+    "@joist/element": "^4.2.0",
+    "@joist/observable": "^4.2.0",
     "tslib": "2.8.1"
   },
   "devDependencies": {
@@ -92,6 +93,7 @@
     "js-beautify": "^1.15.1",
     "lint-staged": "^15.2.2",
     "lit": "^3.2.1",
+    "minify-html-literals": "^1.3.5",
     "mocha": "^11.0.0",
     "plop": "^4.0.1",
     "storybook": "^8.6.0",

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

@@ -1,5 +1,5 @@
 import { inject, injectable } from "@joist/di";
-import { attr, css, element, html } from "@joist/element";
+import { attr, css, element, html, query } from "@joist/element";
 
 import { COMBO_BOX_CTX } from "../context.js";
 
@@ -9,42 +9,61 @@ declare global {
   }
 }
 
+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: [html`<slot></slot>`],
+  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 = "";
 
-  #li = document.createElement("li");
+  #listItem = template.content.cloneNode(true) as HTMLLIElement;
+  #li = query("li", this.#listItem);
+  #slot = query("slot", this.#listItem);
   #ctx = inject(COMBO_BOX_CTX);
 
-  constructor() {
-    super();
+  attributeChangedCallback() {
+    const value = this.value.split(" ").join("-").toLocaleLowerCase();
+
+    this.#li().dataset.value = this.value;
 
-    this.#li.tabIndex = -1;
-  }
+    this.#slot({ name: value });
 
-  attributeChangedCallback() {
-    this.#li.dataset.value = this.value;
-    this.#li.textContent = this.value;
+    this.slot = value;
   }
 
   connectedCallback() {
     const ctx = this.#ctx();
 
-    ctx.addOption(this.#li);
+    ctx.addOption(this.#li());
   }
 
   disconnectedCallback() {
     const ctx = this.#ctx();
 
-    ctx.removeOption(this.#li);
+    ctx.removeOption(this.#li());
 
-    this.#li.remove();
+    this.#li().remove();
   }
 }

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

@@ -1,5 +1,14 @@
 import { injectable } from "@joist/di";
-import { css, element, html, listen, query } from "@joist/element";
+import {
+  attr,
+  attrChanged,
+  css,
+  element,
+  html,
+  listen,
+  query,
+} from "@joist/element";
+
 import { COMBO_BOX_CTX, type ComboBoxContainer } from "./context.js";
 
 declare global {
@@ -16,24 +25,50 @@ declare global {
   tagName: "usa-combo-box",
   shadowDom: [
     css`
+      * {
+        box-sizing: border-box
+      }
+      
       :host {
+        --usa-combo-max-height: 12.5em;
+
         display: block;
         max-width: 30rem;
         position: relative;
+        margin-bottom: 1.5rem;
+      }
+      
+      input {
+        border-width: 1px;
+        border-color: #5c5c5c;
+        border-style: solid;
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        height: 2.5rem;
+        line-height: 1.3;
+        font-size: 1.06rem;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        width: 100%;
+        padding-right: 2.8rem;
+      }
+
+      input:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
       }
 
       ul {
         padding: 0;
         position: absolute;
         bottom: 0;
-        left: 0;
-        right: 0;
+        width: 100%;
         transform: translateY(100%);
         margin: 0;
         border: 1px solid rgb(92, 92, 92);
-        max-height: 12em;
+        max-height: var(--usa-combo-max-height);
         overflow-y: scroll;
-        overflow-x: visible;
         z-index: 1001;
       }
 
@@ -47,7 +82,6 @@ declare global {
         border-bottom: 1px solid #e6e6e6;
         cursor: pointer;
         display: block;
-        padding: 0.5rem;
       }
 
       ul li:hover {
@@ -58,10 +92,44 @@ declare global {
         outline: 0.25rem solid #2491ff;
         outline-offset: -0.25rem;
       }
+
+      .usa-combo-box-icon {
+        display: block;
+        position: absolute;
+        bottom: 0rem;
+        right: 0.5rem;
+        cursor: pointer;
+      }
+
+      .usa-combo-box-icon .line {
+        width: 1px;
+        top: 0.3rem;
+        bottom: 0.5rem;
+        left: -0.3rem;
+        position: absolute;
+        background-color: #c6cace;
+      }
     `,
     html`
-      <slot name="input"></slot>
-      <ul tabindex="-1"></ul>
+      <label>
+        <slot name="label"></slot>
+
+        <input 
+          tabindex="0" 
+          role="combobox" 
+          autocomplete="off" 
+          aria-controls="combo-box-list" 
+          aria-expanded="false"
+        />
+
+        <div class="usa-combo-box-icon">
+          <div class="line"></div>
+
+          <usa-icon icon="expand_more"></usa-icon>
+        </div>
+      </label>
+
+      <ul tabindex="-1" role="listbox" id="combo-box-list"></ul>
     `,
   ],
 })
@@ -69,10 +137,43 @@ export class USAComboBoxElement
   extends HTMLElement
   implements ComboBoxContainer
 {
+  static formAssociated = true;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor required = false;
+
+  @attr()
+  accessor value = "";
+
+  @attr()
+  accessor placeholder = "";
+
   list = query("ul");
-  input = query<HTMLInputElement>('[slot="input"]', this);
+  input = query("input");
   currentItemEl: Element | null = null;
+
   #allListItems = new Set<HTMLLIElement>();
+  #internals = this.attachInternals();
+
+  attributeChangedCallback() {
+    this.input({
+      name: this.name,
+      placeholder: this.placeholder,
+      required: this.required,
+    });
+  }
+
+  @attrChanged("value", "required")
+  onValueChanged() {
+    this.#syncFormState();
+  }
+
+  connectedCallback() {
+    this.#syncFormState();
+  }
 
   listItems() {
     return this.list().querySelectorAll("li");
@@ -86,39 +187,41 @@ export class USAComboBoxElement
     this.#allListItems.delete(el);
   }
 
-  @listen("focusin", (host) => host)
-  onFocusIn(e: FocusEvent) {
-    if (e.target instanceof HTMLElement) {
-      if (e.target.getAttribute("slot") === "input") {
-        const list = this.list();
-
-        for (const item of this.#allListItems) {
-          if (!list.contains(item)) {
-            list.append(item);
-          }
-        }
-      }
+  @listen("focus", (host) => host.input())
+  onFocusIn() {
+    this.currentItemEl = null;
+
+    const list = this.list();
+
+    this.input({ ariaExpanded: "true" });
+
+    const fragment = document.createDocumentFragment();
+
+    for (const item of this.#allListItems) {
+      fragment.append(item);
     }
+
+    list.replaceChildren(fragment);
   }
 
-  @listen("input", (host) => host)
+  @listen("input")
   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())
       ) {
-        if (!list.contains(item)) {
-          list.append(item);
-        }
-      } else {
-        item.remove();
+        fragment.append(item);
       }
     }
+
+    list.replaceChildren(fragment);
   }
 
   @listen("focusout")
@@ -127,8 +230,10 @@ export class USAComboBoxElement
       // 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({ textContent: "" });
+        this.list({ innerHTML: "" });
         this.currentItemEl = null;
+
+        this.input({ ariaExpanded: "false" });
       }
     }, 0);
   }
@@ -190,29 +295,42 @@ export class USAComboBoxElement
 
     const value = target.dataset.value || "";
 
-    this.input({
-      value,
-      selectionStart: value.length,
-      selectionEnd: value.length,
-    }).focus();
+    this.input().focus();
 
-    this.list({ textContent: "" });
+    this.list({ innerHTML: "" });
+
+    this.value = value;
   }
 
   @listen("click")
   onClick(e: MouseEvent) {
-    if (e.target instanceof HTMLLIElement) {
-      const value = e.target.dataset.value || "";
+    if (e.target instanceof HTMLElement) {
+      const value = e.target.getAttribute("value");
 
-      this.input({
-        value,
-        selectionStart: value.length,
-        selectionEnd: value.length,
-      }).focus();
+      if (value) {
+        this.input().focus();
 
-      this.list({ textContent: "" });
+        this.list({ innerHTML: "" });
 
-      this.currentItemEl = null;
+        this.currentItemEl = null;
+
+        this.value = value;
+      }
+    }
+  }
+
+  #syncFormState() {
+    const input = this.input({ value: this.value });
+
+    this.#internals.setValidity({});
+    this.#internals.setFormValue(this.value);
+
+    if (input.validationMessage) {
+      this.#internals.setValidity(
+        { customError: true },
+        input.validationMessage,
+        input,
+      );
     }
   }
 }