@noctuatech/uswds 0.0.22 → 0.0.24

package/src/lib/button/button.test.ts

@@ -1,11 +1,11 @@
 import "./button.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { BUTTON_VARIANTS, USAButtonElement } from "./button.element.js";
+import { BUTTON_VARIANTS, type USAButtonElement } from "./button.element.js";
 
 describe("usa-button", () => {
-  for (let variant of BUTTON_VARIANTS) {
+  for (const variant of BUTTON_VARIANTS) {
     it("should be accessible", async () => {
       const button = await fixture<USAButtonElement>(html`
         <usa-button variant=${variant}>Hello World</usa-button>

package/src/lib/card/card.test.ts

@@ -5,9 +5,9 @@ import "./card-group/card-group.element.js";
 import "./card-header/card-header.element.js";
 import "./card-media/card-media.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USACardElement } from "./card.element.js";
+import type { USACardElement } from "./card.element.js";
 
 describe("usa-card", () => {
   it("should be accessible", async () => {

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

@@ -16,14 +16,8 @@ declare global {
 
       :host {
         display: inline-block;
-        font-family:
-          Source Sans Pro Web,
-          Helvetica Neue,
-          Helvetica,
-          Roboto,
-          Arial,
-          sans-serif;
         max-width: 30rem;
+        position: relative;
       }
 
       :host([tiled]) label {
@@ -71,11 +65,7 @@ declare global {
       }
 
       input {
-        height: 0;
-        width: 0;
         position: absolute;
-        left: -999em;
-        right: auto;
       }
 
       input:focus + .checkbox {
@@ -107,7 +97,7 @@ declare global {
     `,
     html`
       <label>
-        <input type="checkbox" />
+        <input type="checkbox" tabindex="0"/>
 
         <div class="checkbox"></div>
 
@@ -130,23 +120,25 @@ export class USACheckboxElement extends HTMLElement {
   @attr()
   accessor value = "";
 
+  @attr()
+  accessor required = false;
+
   @attr({
     observed: false,
   })
   accessor tiled = false;
 
   #checkbox = query("input");
+
   #internals = this.attachInternals();
 
   connectedCallback() {
     const checkbox = this.#checkbox();
 
-    if (this.checked) {
-      this.#internals.setFormValue(this.value);
-    }
-
     checkbox.checked = this.checked;
     checkbox.name = this.name;
+
+    this.#syncFormState();
   }
 
   attributeChangedCallback() {
@@ -154,16 +146,35 @@ export class USACheckboxElement extends HTMLElement {
 
     checkbox.checked = this.checked;
     checkbox.name = this.name;
+
+    this.#syncFormState();
   }
 
   @listen("change", "input[type=checkbox]")
   onCheckboxChange() {
     const checkbox = this.#checkbox();
+    this.checked = checkbox.checked;
+
+    this.#syncFormState();
+  }
+
+  #syncFormState() {
+    const checkbox = this.#checkbox();
 
     if (checkbox.checked) {
       this.#internals.setFormValue(this.value);
     } else {
       this.#internals.setFormValue(null);
     }
+
+    if (this.required && !checkbox.checked) {
+      this.#internals.setValidity(
+        { valueMissing: true },
+        "Please check this box if you want to proceed",
+        this.#checkbox(),
+      );
+    } else {
+      this.#internals.setValidity({});
+    }
   }
 }

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

@@ -21,7 +21,7 @@ const meta = {
         Hello World
         ${when(
           args.description,
-          () => html`<usa-description>${args.description}</usa-description>`
+          () => html`<usa-description>${args.description}</usa-description>`,
         )}
       </usa-checkbox>
     `;

package/src/lib/checkbox/checkbox.test.ts

@@ -1,6 +1,6 @@
 import "./checkbox.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
 describe("usa-checkbox", () => {
   it("should be accessible", async () => {
@@ -36,12 +36,29 @@ describe("usa-checkbox", () => {
       </form>
     `);
 
-    const checkbox = form.querySelector("usa-checkbox")!;
-    const nativeInput = checkbox.shadowRoot!.querySelector("input")!;
-    nativeInput.click();
+    const checkbox = form.querySelector("usa-checkbox");
+    const nativeInput = checkbox?.shadowRoot?.querySelector("input");
+
+    if (nativeInput) {
+      nativeInput.click();
+    }
 
     const value = new FormData(form);
 
     assert.equal(value.get("enabled"), "test");
   });
+
+  it("should not submit when not valid", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-checkbox name="enabled" value="test" required>
+          Hello World
+        </usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    assert.equal(form.checkValidity(), false);
+  });
 });

package/src/lib/config/config.element.ts

@@ -1,12 +1,13 @@
-import { created, injectable, Injector } from "@joist/di";
+import { injectable } from "@joist/di";
 import { attr, css, element, html } from "@joist/element";
 
 export class USAConfig {
-  iconPath: string = "";
+  iconPath = "";
 }
 
 @injectable({
-  name: "USAConfigElement",
+  name: "usa-config-ctx",
+  provideSelfAs: [USAConfig],
 })
 @element({
   tagName: "usa-config",
@@ -24,9 +25,4 @@ export class USAConfigElement extends HTMLElement {
     name: "icon-path",
   })
   accessor iconPath = "/assets/usa-icons/";
-
-  @created()
-  onInjectorCreated({ providers }: Injector) {
-    providers.set(USAConfig, { factory: () => this });
-  }
 }

package/src/lib/config/config.test.ts

@@ -1,8 +1,8 @@
 import "./config.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USAConfigElement } from "./config.element.js";
+import type { USAConfigElement } from "./config.element.js";
 
 describe("usa-config", () => {
   it("should be accessible", async () => {

package/src/lib/description/description.test.ts

@@ -1,8 +1,8 @@
 import "./description.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USADescriptionElement } from "./description.element.js";
+import type { USADescriptionElement } from "./description.element.js";
 
 describe("usa-description", () => {
   it("should be accessible", async () => {

package/src/lib/file-input/file-input-preview/file-input-preview.element.ts

@@ -83,16 +83,24 @@ export class USAFileInputPreviewElement extends HTMLElement {
     this.onChange();
   }
 
+  get shadow() {
+    if (!this.shadowRoot) {
+      throw new Error("no shadow root");
+    }
+
+    return this.shadowRoot;
+  }
+
   @effect()
   onChange() {
     const template = this.#template();
 
-    if (this.files && this.files.length) {
+    if (this.files?.length) {
       this.hidden = false;
 
-      let names = new Set<string>();
+      const names = new Set<string>();
 
-      for (let file of this.files) {
+      for (const file of this.files) {
         names.add(file.name);
 
         if (!this.#items.has(file.name)) {
@@ -102,16 +110,19 @@ export class USAFileInputPreviewElement extends HTMLElement {
           item.id = file.name;
           item.append(document.createTextNode(file.name));
 
-          const img = item.querySelector("img")!;
-          img.src = URL.createObjectURL(file);
+          const img = item.querySelector("img");
+
+          if (img) {
+            img.src = URL.createObjectURL(file);
+          }
 
-          this.shadowRoot!.append(item);
+          this.shadow.append(item);
 
           this.#items.set(file.name, item);
         }
       }
 
-      for (let [name, item] of this.#items) {
+      for (const [name, item] of this.#items) {
         if (!names.has(name)) {
           item.remove();
           this.#items.delete(name);

package/src/lib/file-input/file-input-preview/file-input-preview.test.ts

@@ -3,7 +3,7 @@ import "../../link/link.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
 
-import { USAFileInputPreviewElement } from "./file-input-preview.element.js";
+import type { USAFileInputPreviewElement } from "./file-input-preview.element.js";
 
 describe("usa-file-input-preview", () => {
   it("should be accessible with no files", async () => {
@@ -42,7 +42,7 @@ describe("usa-file-input-preview", () => {
     `);
 
     const previewItems = Array.from(
-      shadowRoot!.querySelectorAll(".preview-item")
+      shadowRoot?.querySelectorAll(".preview-item") ?? [],
     ).map((item) => item.textContent?.trim());
 
     assert.deepEqual(previewItems, ["image1.jpg", "image2.jpg"]);
@@ -68,7 +68,7 @@ describe("usa-file-input-preview", () => {
     await Promise.resolve();
 
     const previewItems = Array.from(
-      fileInputPreview.shadowRoot!.querySelectorAll(".preview-item")
+      fileInputPreview.shadowRoot?.querySelectorAll(".preview-item") ?? [],
     ).map((item) => item.textContent?.trim());
 
     assert.deepEqual(previewItems, ["image1.jpg"]);
@@ -86,7 +86,7 @@ describe("usa-file-input-preview", () => {
     `);
 
     const [first, second] = Array.from(
-      shadowRoot!.querySelectorAll<HTMLImageElement>(".preview-item img")
+      shadowRoot?.querySelectorAll<HTMLImageElement>(".preview-item img") ?? [],
     ).map((item) => item.src.substring(29));
 
     // we are just testing that the two hashes are in fact different

package/src/lib/file-input/file-input.element.ts

@@ -74,7 +74,7 @@ declare global {
         <slot class="label"></slot>
 
         <div class="container">
-          <input type="file" />
+          <input type="file" tabindex="0"/>
 
           <div class="box">
             <slot name="description">
@@ -137,10 +137,10 @@ export class USAFileInputElement extends HTMLElement {
 
     const formData = new FormData();
 
-    if (input.files && input.files.length) {
+    if (input.files?.length) {
       box.style.display = "none";
 
-      for (let file of input.files) {
+      for (const file of input.files) {
         formData.append(this.name, file);
       }
     } else {

package/src/lib/file-input/file-input.test.ts

@@ -1,8 +1,8 @@
 import "./file-input.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USAFileInputElement } from "./file-input.element.js";
+import type { USAFileInputElement } from "./file-input.element.js";
 
 describe("usa-file-input", () => {
   it("should be accessible", async () => {

package/src/lib/icon/icon.element.ts

@@ -1,8 +1,8 @@
-import { attr, css, element } from "@joist/element";
 import { inject, injectable, injected } from "@joist/di";
+import { attr, css, element } from "@joist/element";
 
-import { USAIcon } from "./icon-types.js";
 import { IconService } from "../services/icon.service.js";
+import type { USAIcon } from "./icon-types.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -39,10 +39,6 @@ export class USAIconElement extends HTMLElement {
   #icon = inject(IconService);
   #injected = false;
 
-  get #shadow() {
-    return this.shadowRoot!;
-  }
-
   @injected()
   onInjected() {
     this.#injected = true;
@@ -58,6 +54,8 @@ export class USAIconElement extends HTMLElement {
   async #updateIcon() {
     const icon = this.#icon();
 
-    this.#shadow.append(await icon.getIcon(this.icon));
+    if (this.shadowRoot) {
+      this.shadowRoot.append(await icon.getIcon(this.icon));
+    }
   }
 }

package/src/lib/icon/icon.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import type { USAIconElement } from "./icon.element.js";
 import { ICON_TYPES } from "./icon-types.js";
+import type { USAIconElement } from "./icon.element.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
@@ -24,7 +24,7 @@ export const AllIcons: Story = {
     async function copyIcon(icon: string) {
       try {
         await navigator.clipboard.writeText(
-          `<usa-icon icon=${icon}></usa-icon>`
+          `<usa-icon icon=${icon}></usa-icon>`,
         );
         alert(`copied markup for ${icon}`);
       } catch (err) {
@@ -43,7 +43,7 @@ export const AllIcons: Story = {
 
             ${icon}
           </button>
-        `
+        `,
       )}`}
     </div>`;
   },

package/src/lib/input/input.element.ts

@@ -1,7 +1,7 @@
 import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { type Changes, effect, observe } from "@joist/observable";
 
-import { MaskableElement } from "../input-mask/maskable.element.js";
+import type { MaskableElement } from "../input-mask/maskable.element.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,6 +28,7 @@ declare global {
         font-weight: 400;
         max-width: 30rem;
         margin-bottom: 1.5rem;
+        position: relative;
       }
 
       input {
@@ -49,12 +50,43 @@ declare global {
         outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
+
+      slot[name="detail"]::slotted(*) {
+        color: #757575;
+      }
+
+      slot[name="detail"]::slotted(usa-icon) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      slot[name="detail"] {
+        display: block;
+        position: absolute;
+        bottom: 0.21rem;
+        left: 0.5rem;
+      }
+
+      :host([detail="pfx"]) input {
+        padding-left: 2.5rem;
+      }
+
+      :host([detail="sfx"]) input {
+        padding-right: 2.5rem;
+      }
+
+      :host([detail="sfx"]) slot[name="detail"] {
+        right: 0.5rem;
+        left: auto;
+      }
     `,
     html`
       <label>
+        <slot name="detail"></slot>
+
         <slot></slot>
 
-        <input />
+        <input tabindex="0" />
       </label>
     `,
   ],
@@ -74,6 +106,14 @@ export class USATextInputElement
   @attr()
   accessor placeholder = "";
 
+  @attr()
+  accessor required = false;
+
+  @attr({
+    observed: false,
+  })
+  accessor detail: "pfx" | "sfx" | "" = "";
+
   @attr({
     reflect: false,
   })
@@ -95,13 +135,25 @@ export class USATextInputElement
     input.autofocus = this.autofocus;
   }
 
+  connectedCallback() {
+    this.#syncFormState();
+  }
+
   @effect()
-  onChange() {
+  onChange(changes: Changes<this>) {
     const input = this.#input();
 
     input.value = this.value;
-    input.selectionStart = this.selectionStart;
-    input.selectionEnd = this.selectionEnd;
+
+    if (changes.has("selectionStart")) {
+      input.selectionStart = this.selectionStart;
+    }
+
+    if (changes.has("selectionEnd")) {
+      input.selectionEnd = this.selectionEnd;
+    }
+
+    this.#syncFormState();
   }
 
   @listen("input")
@@ -111,8 +163,6 @@ export class USATextInputElement
     this.value = input.value;
     this.selectionStart = input.selectionStart;
     this.selectionEnd = input.selectionEnd;
-
-    this.#internals.setFormValue(input.value);
   }
 
   attributeChangedCallback(attr: string) {
@@ -130,11 +180,18 @@ export class USATextInputElement
       case "name":
         input.name = this.name;
         break;
+    }
+  }
 
-      case "value":
-        input.value = this.value;
-        this.#internals.setFormValue(this.value);
-        break;
+  #syncFormState() {
+    const input = this.#input();
+
+    this.#internals.setFormValue(input.value);
+
+    if (this.required && !input.value) {
+      this.#internals.setValidity({ valueMissing: true }, "Required", input);
+    } else {
+      this.#internals.setValidity({});
     }
   }
 }

package/src/lib/input/input.stories.ts

@@ -10,7 +10,9 @@ const meta = {
   render() {
     return html`
       <form>
-        <usa-input name="fname" value="Danny" autocomplete="off">
+        <usa-input name="fname" value="Danny" autocomplete="off" detail="pfx">
+          <usa-icon icon="credit_card" slot="detail"></usa-icon>
+
           First name
         </usa-input>
 

package/src/lib/input/input.test.ts

@@ -1,7 +1,7 @@
 import "./input.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
 import { fireEvent } from "@noctuatech-uswds/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
 describe("usa-input", () => {
   it("should be accessible", async () => {
@@ -35,14 +35,29 @@ describe("usa-input", () => {
       </form>
     `);
 
-    const input = form.querySelector("usa-input")!;
-    const nativeInput = input.shadowRoot!.querySelector("input")!;
-    nativeInput.value = "Bar";
+    const input = form.querySelector("usa-input");
+    const nativeInput = input?.shadowRoot?.querySelector("input");
 
-    await fireEvent.input(nativeInput, { bubbles: true });
+    if (nativeInput) {
+      nativeInput.value = "Bar";
+
+      await fireEvent.input(nativeInput, { bubbles: true });
+    }
 
     const value = new FormData(form);
 
     assert.equal(value.get("fname"), "Bar");
   });
+
+  it("should not submit when not valid", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-input name="fname" required>Hello World</usa-input>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    assert.equal(form.checkValidity(), false);
+  });
 });

package/src/lib/input-mask/format.ts

@@ -23,7 +23,7 @@ export function format(value: string, pattern: string): FormattedResult {
   let count = 0;
   let formatted = "";
 
-  for (var i = 0; i < pattern.length; i++) {
+  for (let i = 0; i < pattern.length; i++) {
     const patternChar = pattern[i];
     const char = chars[count];
 

package/src/lib/input-mask/input-mask.element.ts

@@ -1,7 +1,7 @@
 import { attr, css, element, html, listen } from "@joist/element";
 
-import { MaskableElement } from "./maskable.element.js";
-import { format, PATTERN_CHARS, PatternChar, REG_EXPS } from "./format.js";
+import { PATTERN_CHARS, PatternChar, REG_EXPS, format } from "./format.js";
+import type { MaskableElement } from "./maskable.element.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,15 +25,17 @@ export class USAInputMaskElement extends HTMLElement {
   accessor mask = "";
 
   connectedCallback() {
-    for (let input of this.querySelectorAll<MaskableElement>("[mask]")) {
+    for (const input of this.querySelectorAll<MaskableElement>("[mask]")) {
       const { formatted } = format(input.value, this.#getMaskFor(input));
 
-      input.value = formatted;
+      if (formatted) {
+        input.value = formatted;
+      }
     }
   }
 
   @listen("input")
-  async onInput(e: Event) {
+  onInput(e: Event) {
     const input = e.target as MaskableElement;
     const selectionStart = input.selectionStart || 0;
     const prev = input.value;
@@ -54,10 +56,6 @@ export class USAInputMaskElement extends HTMLElement {
       input.selectionStart = selectionStart;
       input.selectionEnd = selectionStart;
     }
-
-    if (prev !== input.value) {
-      input.dispatchEvent(new Event("input", { bubbles: true }));
-    }
   }
 
   @listen("keydown")