@noctuatech/uswds 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.1.2",
+  "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

@@ -47,7 +47,8 @@ export class USAComboBoxOptionElement extends HTMLElement {
     const value = this.value.split(" ").join("-").toLocaleLowerCase();
 
     this.#li().dataset.value = this.value;
-    this.#slot().name = value;
+
+    this.#slot({ name: value });
 
     this.slot = value;
   }

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

@@ -1,5 +1,13 @@
 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";
 
@@ -17,26 +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: var(--usa-combo-max-height);
         overflow-y: scroll;
-        overflow-x: visible;
         z-index: 1001;
       }
 
@@ -60,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" role="listbox"></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>
     `,
   ],
 })
@@ -71,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");
@@ -94,6 +193,8 @@ export class USAComboBoxElement
 
     const list = this.list();
 
+    this.input({ ariaExpanded: "true" });
+
     const fragment = document.createDocumentFragment();
 
     for (const item of this.#allListItems) {
@@ -103,7 +204,7 @@ export class USAComboBoxElement
     list.replaceChildren(fragment);
   }
 
-  @listen("input", (host) => host)
+  @listen("input")
   async onInput() {
     const input = this.input();
     const list = this.list();
@@ -131,6 +232,8 @@ export class USAComboBoxElement
       if (!this.contains(document.activeElement)) {
         this.list({ innerHTML: "" });
         this.currentItemEl = null;
+
+        this.input({ ariaExpanded: "false" });
       }
     }, 0);
   }
@@ -192,13 +295,11 @@ export class USAComboBoxElement
 
     const value = target.dataset.value || "";
 
-    this.input({
-      value,
-      selectionStart: value.length,
-      selectionEnd: value.length,
-    }).focus();
+    this.input().focus();
 
     this.list({ innerHTML: "" });
+
+    this.value = value;
   }
 
   @listen("click")
@@ -207,16 +308,29 @@ export class USAComboBoxElement
       const value = e.target.getAttribute("value");
 
       if (value) {
-        this.input({
-          value,
-          selectionStart: value.length,
-          selectionEnd: value.length,
-        }).focus();
+        this.input().focus();
 
         this.list({ innerHTML: "" });
 
         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,
+      );
+    }
+  }
 }

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

@@ -9,215 +9,207 @@ const meta = {
   tags: ["autodocs"],
   render() {
     return html`
-      <usa-combo-box>
-        <usa-input
-          placeholder="Select a state"
-          name="state" 
-          slot="input" 
-          autocomplete="off" 
-          detail="sfx">
-          States
-          <usa-icon slot="detail" icon="expand_more"></usa-icon>
-        </usa-input>
+      <usa-combo-box placeholder="Select a state" name="state">
+        <span slot="label">States</span>
 
         <usa-combo-box-option value="Alabama">
-          <img src="/assets/flags/alabama.svg" alt="Alabama" height="20" /> Alabama
+          <img loading="lazy" src="./flags/alabama.svg" alt="Alabama" height="20" /> Alabama
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Alaska">
-          <img src="/assets/flags/alaska.svg" alt="Alaska" height="20" /> Alaska
+          <img loading="lazy" src="./flags/alaska.svg" alt="Alaska" height="20" /> Alaska
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Arizona">
-          <img src="/assets/flags/arizona.svg" alt="Arizona" height="20" /> Arizona
+          <img loading="lazy" src="./flags/arizona.svg" alt="Arizona" height="20" /> Arizona
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Arkansas">
-          <img src="/assets/flags/arkansas.svg" alt="Arkansas" height="20" /> Arkansas
+          <img loading="lazy" src="./flags/arkansas.svg" alt="Arkansas" height="20" /> Arkansas
         </usa-combo-box-option>
 
         <usa-combo-box-option value="California">
-          <img src="/assets/flags/california.svg" alt="California" height="20" /> California
+          <img loading="lazy" src="./flags/california.svg" alt="California" height="20" /> California
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Colorado">
-          <img src="/assets/flags/colorado.svg" alt="Colorado" height="20" /> Colorado
+          <img loading="lazy" src="./flags/colorado.svg" alt="Colorado" height="20" /> Colorado
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Connecticut">
-          <img src="/assets/flags/connecticut.svg" alt="Connecticut" height="20" /> Connecticut
+          <img loading="lazy" src="./flags/connecticut.svg" alt="Connecticut" height="20" /> Connecticut
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Delaware">
-          <img src="/assets/flags/delaware.svg" alt="Delaware" height="20" /> Delaware
+          <img loading="lazy" src="./flags/delaware.svg" alt="Delaware" height="20" /> Delaware
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Florida">
-          <img src="/assets/flags/florida.svg" alt="Florida" height="20" /> Florida
+          <img loading="lazy" src="./flags/florida.svg" alt="Florida" height="20" /> Florida
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Georgia">
-          <img src="/assets/flags/georgia.svg" alt="Georgia" height="20" /> Georgia
+          <img loading="lazy" src="./flags/georgia.svg" alt="Georgia" height="20" /> Georgia
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Hawaii">
-          <img src="/assets/flags/hawaii.svg" alt="Hawaii" height="20" /> Hawaii
+          <img loading="lazy" src="./flags/hawaii.svg" alt="Hawaii" height="20" /> Hawaii
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Idaho">
-          <img src="/assets/flags/idaho.svg" alt="Idaho" height="20" /> Idaho
+          <img loading="lazy" src="./flags/idaho.svg" alt="Idaho" height="20" /> Idaho
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Illinois">
-          <img src="/assets/flags/illinois.svg" alt="Illinois" height="20" /> Illinois
+          <img loading="lazy" src="./flags/illinois.svg" alt="Illinois" height="20" /> Illinois
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Indiana">
-          <img src="/assets/flags/indiana.svg" alt="Indiana" height="20" /> Indiana
+          <img loading="lazy" src="./flags/indiana.svg" alt="Indiana" height="20" /> Indiana
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Iowa">
-          <img src="/assets/flags/iowa.svg" alt="Iowa" height="20" /> Iowa
+          <img loading="lazy" src="./flags/iowa.svg" alt="Iowa" height="20" /> Iowa
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Kansas">
-          <img src="/assets/flags/kansas.svg" alt="Kansas" height="20" /> Kansas
+          <img loading="lazy" src="./flags/kansas.svg" alt="Kansas" height="20" /> Kansas
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Kentucky">
-          <img src="/assets/flags/kentucky.svg" alt="Kentucky" height="20" /> Kentucky
+          <img loading="lazy" src="./flags/kentucky.svg" alt="Kentucky" height="20" /> Kentucky
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Louisiana">
-          <img src="/assets/flags/louisiana.svg" alt="Louisiana" height="20" /> Louisiana
+          <img loading="lazy" src="./flags/louisiana.svg" alt="Louisiana" height="20" /> Louisiana
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Maine">
-          <img src="/assets/flags/maine.svg" alt="Maine" height="20" /> Maine
+          <img loading="lazy" src="./flags/maine.svg" alt="Maine" height="20" /> Maine
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Maryland">
-          <img src="/assets/flags/maryland.svg" alt="Maryland" height="20" /> Maryland
+          <img loading="lazy" src="./flags/maryland.svg" alt="Maryland" height="20" /> Maryland
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Massachusetts">
-          <img src="/assets/flags/massachusetts.svg" alt="Massachusetts" height="20" /> Massachusetts
+          <img loading="lazy" src="./flags/massachusetts.svg" alt="Massachusetts" height="20" /> Massachusetts
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Michigan">
-          <img src="/assets/flags/michigan.svg" alt="Michigan" height="20" /> Michigan
+          <img loading="lazy" src="./flags/michigan.svg" alt="Michigan" height="20" /> Michigan
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Minnesota">
-          <img src="/assets/flags/minnesota.svg" alt="Minnesota" height="20" /> Minnesota
+          <img loading="lazy" src="./flags/minnesota.svg" alt="Minnesota" height="20" /> Minnesota
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Mississippi">
-          <img src="/assets/flags/mississippi.svg" alt="Mississippi" height="20" /> Mississippi
+          <img loading="lazy" src="./flags/mississippi.svg" alt="Mississippi" height="20" /> Mississippi
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Missouri">
-          <img src="/assets/flags/missouri.svg" alt="Missouri" height="20" /> Missouri
+          <img loading="lazy" src="./flags/missouri.svg" alt="Missouri" height="20" /> Missouri
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Montana">
-          <img src="/assets/flags/montana.svg" alt="Montana" height="20" /> Montana
+          <img loading="lazy" src="./flags/montana.svg" alt="Montana" height="20" /> Montana
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Nebraska">
-          <img src="/assets/flags/nebraska.svg" alt="Nebraska" height="20" /> Nebraska
+          <img loading="lazy" src="./flags/nebraska.svg" alt="Nebraska" height="20" /> Nebraska
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Nevada">
-          <img src="/assets/flags/nevada.svg" alt="Nevada" height="20" /> Nevada
+          <img loading="lazy" src="./flags/nevada.svg" alt="Nevada" height="20" /> Nevada
         </usa-combo-box-option>
 
         <usa-combo-box-option value="New Hampshire">
-          <img src="/assets/flags/new_hampshire.svg" alt="New Hampshire" height="20" /> New Hampshire
+          <img loading="lazy" src="./flags/new_hampshire.svg" alt="New Hampshire" height="20" /> New Hampshire
         </usa-combo-box-option>
 
         <usa-combo-box-option value="New Jersey">
-          <img src="/assets/flags/new_jersey.svg" alt="New Jersey" height="20" /> New Jersey
+          <img loading="lazy" src="./flags/new_jersey.svg" alt="New Jersey" height="20" /> New Jersey
         </usa-combo-box-option>
 
         <usa-combo-box-option value="New Mexico">
-          <img src="/assets/flags/new_mexico.svg" alt="New Mexico" height="20" /> New Mexico
+          <img loading="lazy" src="./flags/new_mexico.svg" alt="New Mexico" height="20" /> New Mexico
         </usa-combo-box-option>
 
         <usa-combo-box-option value="New York">
-          <img src="/assets/flags/new_york.svg" alt="New York" height="20" /> New York
+          <img loading="lazy" src="./flags/new_york.svg" alt="New York" height="20" /> New York
         </usa-combo-box-option>
 
         <usa-combo-box-option value="North Carolina">
-          <img src="/assets/flags/north_carolina.svg" alt="North Carolina" height="20" /> North Carolina
+          <img loading="lazy" src="./flags/north_carolina.svg" alt="North Carolina" height="20" /> North Carolina
         </usa-combo-box-option>
 
         <usa-combo-box-option value="North Dakota">
-          <img src="/assets/flags/north_dakota.svg" alt="North Dakota" height="20" /> North Dakota
+          <img loading="lazy" src="./flags/north_dakota.svg" alt="North Dakota" height="20" /> North Dakota
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Ohio">
-          <img src="/assets/flags/ohio.svg" alt="Ohio" height="20" /> Ohio
+          <img loading="lazy" src="./flags/ohio.svg" alt="Ohio" height="20" /> Ohio
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Oklahoma">
-          <img src="/assets/flags/oklahoma.svg" alt="Oklahoma" height="20" /> Oklahoma
+          <img loading="lazy" src="./flags/oklahoma.svg" alt="Oklahoma" height="20" /> Oklahoma
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Oregon">
-          <img src="/assets/flags/oregon.svg" alt="Oregon" height="20" /> Oregon
+          <img loading="lazy" src="./flags/oregon.svg" alt="Oregon" height="20" /> Oregon
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Pennsylvania">
-          <img src="/assets/flags/pennsylvania.svg" alt="Pennsylvania" height="20" /> Pennsylvania
+          <img loading="lazy" src="./flags/pennsylvania.svg" alt="Pennsylvania" height="20" /> Pennsylvania
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Rhode Island">
-          <img src="/assets/flags/rhode_island.svg" alt="Rhode Island" height="20" /> Rhode Island
+          <img loading="lazy" src="./flags/rhode_island.svg" alt="Rhode Island" height="20" /> Rhode Island
         </usa-combo-box-option>
 
         <usa-combo-box-option value="South Carolina">
-          <img src="/assets/flags/south_carolina.svg" alt="South Carolina" height="20" /> South Carolina
+          <img loading="lazy" src="./flags/south_carolina.svg" alt="South Carolina" height="20" /> South Carolina
         </usa-combo-box-option>
 
         <usa-combo-box-option value="South Dakota">
-          <img src="/assets/flags/south_dakota.svg" alt="South Dakota" height="20" /> South Dakota
+          <img loading="lazy" src="./flags/south_dakota.svg" alt="South Dakota" height="20" /> South Dakota
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Tennessee">
-          <img src="/assets/flags/tennessee.svg" alt="Tennessee" height="20" /> Tennessee
+          <img loading="lazy" src="./flags/tennessee.svg" alt="Tennessee" height="20" /> Tennessee
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Texas">
-          <img src="/assets/flags/texas.svg" alt="Texas" height="20" /> Texas
+          <img loading="lazy" src="./flags/texas.svg" alt="Texas" height="20" /> Texas
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Utah">
-          <img src="/assets/flags/utah.svg" alt="Utah" height="20" /> Utah
+          <img loading="lazy" src="./flags/utah.svg" alt="Utah" height="20" /> Utah
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Vermont">
-          <img src="/assets/flags/vermont.svg" alt="Vermont" height="20" /> Vermont
+          <img loading="lazy" src="./flags/vermont.svg" alt="Vermont" height="20" /> Vermont
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Virginia">
-          <img src="/assets/flags/virginia.svg" alt="Virginia" height="20" /> Virginia
+          <img loading="lazy" src="./flags/virginia.svg" alt="Virginia" height="20" /> Virginia
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Washington">
-          <img src="/assets/flags/washington.svg" alt="Washington" height="20" /> Washington
+          <img loading="lazy" src="./flags/washington.svg" alt="Washington" height="20" /> Washington
         </usa-combo-box-option>
 
         <usa-combo-box-option value="West Virginia">
-          <img src="/assets/flags/west_virginia.svg" alt="West Virginia" height="20" /> West Virginia
+          <img loading="lazy" src="./flags/west_virginia.svg" alt="West Virginia" height="20" /> West Virginia
         </usa-combo-box-option>
 
         <usa-combo-box-option value="Wisconsin">
-          <img src="/assets/flags/wisconsin.svg" alt="Wisconsin" height="20" /> Wisconsin
+          <img loading="lazy" src="./flags/wisconsin.svg" alt="Wisconsin" height="20" /> Wisconsin
         </usa-combo-box-option>
         
         <usa-combo-box-option value="Wyoming">
-          <img src="/assets/flags/wyoming.svg" alt="Wyoming" height="20" /> Wyoming
+          <img loading="lazy" src="./flags/wyoming.svg" alt="Wyoming" height="20" /> Wyoming
         </usa-combo-box-option>
       </usa-combo-box>
     `;