@noctuatech/uswds 0.0.21 → 0.0.23

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;
@@ -46,18 +48,13 @@ export class USAInputMaskElement extends HTMLElement {
     const offset = input.value.length - prev.length;
     const maskChar = mask[selectionStart - 1] as PatternChar | undefined;
 
-    // This is a hack to make sure that changes are propagated appropriately
-    await Promise.resolve();
-
     // check if the current value is not a space for characters and has an offset greater then 0
     if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
-      input.setSelectionRange(selectionStart + offset, selectionStart + offset);
+      input.selectionStart = selectionStart + offset;
+      input.selectionEnd = selectionStart + offset;
     } else {
-      input.setSelectionRange(selectionStart, selectionStart);
-    }
-
-    if (prev !== input.value) {
-      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.selectionStart = selectionStart;
+      input.selectionEnd = selectionStart;
     }
   }
 

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

@@ -15,7 +15,6 @@ const meta = {
           placeholder=${args.mask}
           autocomplete="off"
           mask=${args.mask}
-          value="3042616138"
         >
           Phone:
         </usa-input>

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

@@ -4,7 +4,7 @@ import "../input/input.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 
 import { format } from "./format.js";
-import { USAInputMaskElement } from "./input-mask.element.js";
+import type { USAInputMaskElement } from "./input-mask.element.js";
 
 describe("format", () => {
   it("should retrn the correct raw value", () => {
@@ -51,9 +51,9 @@ describe("usa-input-mask", () => {
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("input")!;
+    const input = el.querySelector("input");
 
-    assert.equal(input.value, "(123) 456-7890");
+    assert.equal(input?.value, "(123) 456-7890");
   });
 
   it("should update value when on input event", async () => {
@@ -63,12 +63,14 @@ describe("usa-input-mask", () => {
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("input")!;
+    const input = el.querySelector("input");
 
-    input.value = "8888888888";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    if (input) {
+      input.value = "8888888888";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
 
-    assert.equal(input.value, "(888) 888-8888");
+    assert.equal(input?.value, "(888) 888-8888");
   });
 });
 
@@ -80,9 +82,9 @@ describe("usa-input-mask with usa-input", () => {
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("usa-input")!;
+    const input = el.querySelector("usa-input");
 
-    assert.equal(input.value, "(123) 456-7890");
+    assert.equal(input?.value, "(123) 456-7890");
   });
 
   it("should update value when on input event", async () => {
@@ -96,11 +98,13 @@ describe("usa-input-mask with usa-input", () => {
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("usa-input")!;
+    const input = el.querySelector("usa-input");
 
-    input.value = "8888888888";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    if (input) {
+      input.value = "8888888888";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
 
-    assert.equal(input.value, "(888) 888-8888");
+    assert.equal(input?.value, "(888) 888-8888");
   });
 });

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

@@ -1,5 +1,5 @@
 export interface MaskableElement extends HTMLElement {
   value: string;
   selectionStart: number | null;
-  setSelectionRange(start: number, end: number): void;
+  selectionEnd: number | null;
 }

package/src/lib/modal/modal-close/modal-close.test.ts

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

package/src/lib/modal/modal-heading/modal-heading.test.ts

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

package/src/lib/modal/modal.test.ts

@@ -2,9 +2,9 @@ import "./modal.element.js";
 import "./modal-heading/modal-heading.element.js";
 import "./modal-close/modal-close.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USAModalElement } from "./modal.element.js";
+import type { USAModalElement } from "./modal.element.js";
 
 describe("usa-modal", () => {
   it("should be accessible", async () => {

package/src/lib/radio/context.ts

@@ -0,0 +1,9 @@
+import { StaticToken } from "@joist/di";
+
+export interface RadioContainer extends Node {
+  name: string;
+  value: string;
+  addRadioOption(el: HTMLElement): void;
+}
+
+export const RADIO_CTX = new StaticToken<RadioContainer>("RADIO_CTX");

package/src/lib/radio/radio-option/radio-option.element.ts

@@ -1,4 +1,7 @@
-import { attr, css, element, html } from "@joist/element";
+import { attr, css, element, html, query } from "@joist/element";
+
+import { inject, injectable, injected } from "@joist/di";
+import { RADIO_CTX } from "../context.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -6,6 +9,9 @@ declare global {
   }
 }
 
+@injectable({
+  name: "usa-radio-option-ctx",
+})
 @element({
   tagName: "usa-radio-option",
   shadowDom: [
@@ -16,49 +22,62 @@ declare global {
         margin-top: 0.05rem;
       }
     `,
-    html`<slot></slot>`,
+    html`
+      <!-- This label will be moved to the shadow dom of its parent -->
+      <label>
+        <input type="radio" tabindex="0" />
+        <slot name="reserved"></slot>
+      </label>
+
+      <slot></slot>
+    `,
   ],
 })
 export class USARadioOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
-  @attr()
-  accessor name = "";
-
-  @attr()
-  accessor checked = false;
+  #label = query("label");
+  #input = query("input");
+  #slot = query("slot");
+  #radio = inject(RADIO_CTX);
 
-  readonly radio = document.createElement("label");
+  #observer = new MutationObserver(() => {
+    const input = this.#input();
+    const radio = this.#radio();
 
-  readonly #input = document.createElement("input");
-  readonly #slotEl = document.createElement("slot");
+    input.name = radio.name;
+    input.checked = radio.value === this.value;
+  });
 
-  constructor() {
-    super();
+  attributeChangedCallback() {
+    const input = this.#input();
+    const slot = this.#slot();
 
-    this.#input.type = "radio";
+    this.slot = this.value;
 
-    this.radio.append(this.#input, this.#slotEl);
+    slot.name = this.value;
+    input.value = this.value;
   }
 
-  attributeChangedCallback() {
-    this.slot = this.value;
+  @injected()
+  onInjected() {
+    const input = this.#input();
+    const radio = this.#radio();
 
-    this.#input.name = this.name;
-    this.#input.value = this.value;
-    this.#input.checked = this.checked;
+    radio.addRadioOption(this.#label());
 
-    this.#slotEl.name = this.value;
-  }
+    input.name = radio.name;
+    input.checked = radio.value === this.value;
 
-  connectedCallback() {
-    this.dispatchEvent(
-      new Event("usa::radio::option::added", { bubbles: true })
-    );
+    this.#observer.observe(radio, {
+      attributeFilter: ["value", "name"],
+    });
   }
 
   disconnectedCallback() {
-    this.radio.remove();
+    this.#label().remove();
+
+    this.#observer.disconnect();
   }
 }

package/src/lib/radio/radio-option/radio-option.test.ts

@@ -3,7 +3,7 @@ import "./radio-option.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
 
-import { USARadioOptionElement } from "./radio-option.element.js";
+import type { USARadioOptionElement } from "./radio-option.element.js";
 
 describe("usa-radio-option", () => {
   it("should map value to slot", async () => {

package/src/lib/radio/radio.element.ts

@@ -1,6 +1,7 @@
-import { attr, css, element, html, listen } from "@joist/element";
+import { injectable } from "@joist/di";
+import { attr, css, element, html, listen, query } from "@joist/element";
 
-import type { USARadioOptionElement } from "./radio-option/radio-option.element.js";
+import { RADIO_CTX, type RadioContainer } from "./context.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,6 +9,10 @@ declare global {
   }
 }
 
+@injectable({
+  name: "usa-radio-ctx",
+  provideSelfAs: [RADIO_CTX],
+})
 @element({
   tagName: "usa-radio",
   shadowDom: [
@@ -24,12 +29,11 @@ declare global {
         display: flex;
         cursor: pointer;
         gap: 0.5rem;
+        position: relative;
       }
 
       input {
         position: absolute;
-        left: -999em;
-        right: auto;
       }
 
       label::before {
@@ -42,6 +46,8 @@ declare global {
         background: #fff;
         box-shadow: 0 0 0 2px #1b1b1b;
         flex: 0 0 1.25rem;
+        position: relative;
+        z-index: 1000;
       }
 
       label:has(input:checked)::before {
@@ -77,10 +83,14 @@ declare global {
         display: flex;
       }
     `,
-    html`<slot id="main"></slot>`,
+    html`
+      <slot name="legend" id="legend" tabindex="-1"></slot>
+
+      <slot></slot>
+    `,
   ],
 })
-export class USARadioElement extends HTMLElement {
+export class USARadioElement extends HTMLElement implements RadioContainer {
   static formAssociated = true;
 
   @attr()
@@ -89,49 +99,50 @@ export class USARadioElement extends HTMLElement {
   @attr()
   accessor name = "";
 
+  @attr()
+  accessor required = false;
+
   @attr({
     observed: false,
   })
   accessor tiled = false;
 
-  get shadow() {
-    return this.shadowRoot!;
+  #internals = this.attachInternals();
+  #legend = query("#legend");
+
+  connectedCallback() {
+    this.#syncFormState();
   }
 
-  #internals = this.attachInternals();
+  addRadioOption(el: HTMLElement) {
+    this.shadowRoot?.append(el);
+
+    this.#syncFormState();
+  }
 
   @listen("change")
   onChange(e: Event) {
     if (e.target instanceof HTMLInputElement) {
       if (e.target.checked) {
         this.value = e.target.value;
-        this.#internals.setFormValue(e.target.value);
-      }
-    }
-  }
-
-  connectedCallback() {
-    if (this.value) {
-      this.#internals.setFormValue(this.value);
-    }
-  }
 
-  attributeChangedCallback() {
-    for (let radio of this.shadow.querySelectorAll("usa-radio-option")) {
-      radio.checked = radio.value === this.value;
-      radio.name = this.name;
+        this.#syncFormState();
+      }
     }
   }
 
-  @listen("usa::radio::option::added", (el) => el)
-  onOptionAdded(e: Event) {
-    e.stopPropagation();
+  #syncFormState() {
+    this.#internals.setFormValue(this.value);
+    this.#internals.setValidity({});
 
-    const target = e.target as USARadioOptionElement;
+    if (this.required && !this.value) {
+      const input = this.shadowRoot?.querySelector("input");
 
-    target.checked = target.value === this.value;
-    target.name = this.name;
-
-    this.shadow.append(target.radio);
+      this.#internals.setValidity(
+        { valueMissing: true },
+        "Please select an option if you want to proceed",
+        input ?? this.#legend(),
+      );
+    }
   }
 }

package/src/lib/radio/radio.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import type { USARadioElement } from "./radio.element.js";
 import { when } from "lit/directives/when.js";
+import type { USARadioElement } from "./radio.element.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
@@ -25,7 +25,7 @@ const meta = {
           Frederick Douglass
           ${when(
             args.description,
-            () => html`<usa-description>${args.description}</usa-description>`
+            () => html`<usa-description>${args.description}</usa-description>`,
           )}
         </usa-radio-option>
 

package/src/lib/radio/radio.test.ts

@@ -1,9 +1,9 @@
 import "./radio.element.js";
 import "./radio-option/radio-option.element.js";
 
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 
-import { USARadioElement } from "./radio.element.js";
+import type { USARadioElement } from "./radio.element.js";
 
 describe("usa-radio", () => {
   it("should be accessible", async () => {
@@ -53,9 +53,9 @@ describe("usa-radio", () => {
       </form>
     `);
 
-    const nativeInputs = form
-      .querySelector("usa-radio")!
-      .shadowRoot!.querySelectorAll("input");
+    const nativeInputs =
+      form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+      [];
 
     assert.deepEqual(
       Array.from(nativeInputs).map((input) => input.value),
@@ -64,7 +64,7 @@ describe("usa-radio", () => {
         "frederick-douglass",
         "booker-t-washington",
         "george-washington-carver",
-      ]
+      ],
     );
   });
 
@@ -95,13 +95,13 @@ describe("usa-radio", () => {
 
     options[2].remove();
 
-    const nativeInputs = form
-      .querySelector("usa-radio")!
-      .shadowRoot!.querySelectorAll("input");
+    const nativeInputs =
+      form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+      [];
 
     assert.deepEqual(
       Array.from(nativeInputs).map((input) => input.value),
-      ["sojourner-truth", "frederick-douglass", "george-washington-carver"]
+      ["sojourner-truth", "frederick-douglass", "george-washington-carver"],
     );
   });
 
@@ -130,9 +130,9 @@ describe("usa-radio", () => {
 
     const value = new FormData(form);
 
-    const nativeInputs = form
-      .querySelector("usa-radio")!
-      .shadowRoot!.querySelectorAll("input");
+    const nativeInputs =
+      form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+      [];
 
     assert.equal(nativeInputs[1].checked, true);
     assert.equal(value.get("historical-figures"), "frederick-douglass");
@@ -161,9 +161,9 @@ describe("usa-radio", () => {
       </form>
     `);
 
-    const nativeInputs = form
-      .querySelector("usa-radio")!
-      .shadowRoot!.querySelectorAll("input");
+    const nativeInputs =
+      form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+      [];
 
     nativeInputs[3].click();
 

package/src/lib/select/context.ts

@@ -0,0 +1,10 @@
+import { StaticToken } from "@joist/di";
+
+export interface SelectContainer extends Node {
+  value: string;
+  addSelectOption: (el: HTMLOptionElement) => void;
+}
+
+export const SELECT_CONTEXT = new StaticToken<SelectContainer>(
+  "SELECT_CONTEXT",
+);

package/src/lib/select/select-option/select-option.element.ts

@@ -1,5 +1,8 @@
 import { attr, css, element, html, listen } from "@joist/element";
 
+import { inject, injectable, injected } from "@joist/di";
+import { SELECT_CONTEXT } from "../context.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "usa-select-option": USASelecOptionElement;
@@ -17,20 +20,37 @@ declare global {
     html`<slot></slot>`,
   ],
 })
+@injectable()
 export class USASelecOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
   readonly option = document.createElement("option");
 
+  #select = inject(SELECT_CONTEXT);
+
+  #observer = new MutationObserver(() => {
+    const { value } = this.#select();
+
+    this.option.selected = value === this.value;
+  });
+
   attributeChangedCallback() {
     this.option.value = this.value;
   }
 
-  connectedCallback() {
-    this.dispatchEvent(
-      new Event("usa::select::option::added", { bubbles: true })
-    );
+  @injected()
+  onInjected() {
+    const select = this.#select();
+
+    this.option.selected = select.value === this.value;
+
+    select.addSelectOption(this.option);
+
+    this.#observer.observe(select, {
+      attributes: true,
+      attributeFilter: ["value"],
+    });
   }
 
   @listen("slotchange")
@@ -39,6 +59,8 @@ export class USASelecOptionElement extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.#observer.disconnect();
+
     this.option.remove();
   }
 }