@noctuatech/uswds 1.3.1 → 1.3.2

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

@@ -1,18 +1,16 @@
-import "./input.element.js";
+import './input.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
-import { userEvent } from "@testing-library/user-event";
+import { assert, fixture, html } from '@open-wc/testing';
+import { userEvent } from '@testing-library/user-event';
 
-describe("usa-input", () => {
-  it("should be accessible", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <usa-input name="fname" value="Foo">Hello World</usa-input>
-    `);
+describe('usa-input', () => {
+  it('should be accessible', async () => {
+    const form = await fixture<HTMLFormElement>(html` <usa-input name="fname" value="Foo">Hello World</usa-input> `);
 
     return assert.isAccessible(form);
   });
 
-  it("should submit form with default values", async () => {
+  it('should submit form with default values', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname" value="Foo">Hello World</usa-input>
@@ -23,10 +21,10 @@ describe("usa-input", () => {
 
     const value = new FormData(form);
 
-    assert.equal(value.get("fname"), "Foo");
+    assert.equal(value.get('fname'), 'Foo');
   });
 
-  it("should update form value as input value changed", async () => {
+  it('should update form value as input value changed', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname">Hello World</usa-input>
@@ -35,19 +33,19 @@ describe("usa-input", () => {
       </form>
     `);
 
-    const input = form.querySelector("usa-input");
-    const nativeInput = input?.shadowRoot?.querySelector("input");
+    const input = form.querySelector('usa-input');
+    const nativeInput = input?.shadowRoot?.querySelector('input');
 
     if (nativeInput) {
-      await userEvent.type(nativeInput, "Bar");
+      await userEvent.type(nativeInput, 'Bar');
     }
 
     const value = new FormData(form);
 
-    assert.equal(value.get("fname"), "Bar");
+    assert.equal(value.get('fname'), 'Bar');
   });
 
-  it("should not submit when not valid", async () => {
+  it('should not submit when not valid', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-input name="fname" required>Hello World</usa-input>

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

@@ -1,16 +1,16 @@
-import { attr, css, element, html, listen, queryAll } from "@joist/element";
+import { attr, css, element, html, listen, queryAll } from '@joist/element';
 
-import { PATTERN_CHARS, type PatternChar, REG_EXPS, format } from "./format.js";
-import type { MaskableElement } from "./maskable.element.js";
+import { PATTERN_CHARS, type PatternChar, REG_EXPS, format } from './format.js';
+import type { MaskableElement } from './maskable.element.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-input-mask": USAInputMaskElement;
+    'usa-input-mask': USAInputMaskElement;
   }
 }
 
 @element({
-  tagName: "usa-input-mask",
+  tagName: 'usa-input-mask',
   shadowDom: [
     css`
       :host {
@@ -22,13 +22,13 @@ declare global {
 })
 export class USAInputMaskElement extends HTMLElement {
   @attr()
-  accessor mask = "";
+  accessor mask = '';
 
-  #maskables = queryAll<MaskableElement>("[mask]", this);
+  #maskables = queryAll<MaskableElement>('[mask]', this);
 
   connectedCallback() {
     for (const input of this.#maskables()) {
-      const { formatted } = format(input.value, this.#getMaskFor(input));
+      const { formatted } = format(input.value || input.getAttribute('value') || '', this.#getMaskFor(input));
 
       if (formatted) {
         input.value = formatted;
@@ -36,7 +36,7 @@ export class USAInputMaskElement extends HTMLElement {
     }
   }
 
-  @listen("input")
+  @listen('input')
   onInput(e: Event) {
     const input = e.target as MaskableElement;
     const selectionStart = input.selectionStart || 0;
@@ -60,7 +60,7 @@ export class USAInputMaskElement extends HTMLElement {
     }
   }
 
-  @listen("keydown")
+  @listen('keydown')
   onKeyDown(e: KeyboardEvent) {
     const input = e.target as MaskableElement;
     const mask = this.#getMaskFor(input);
@@ -72,12 +72,12 @@ export class USAInputMaskElement extends HTMLElement {
       if (input.value.length >= mask.length) {
         // prevent default once value is the same as the mask length
         e.preventDefault();
-      } else if (patternChar === "9") {
+      } else if (patternChar === '9') {
         if (!REG_EXPS.Numbers.test(e.key)) {
           // if pattern char specifies number and is not
           e.preventDefault();
         }
-      } else if (patternChar === "A") {
+      } else if (patternChar === 'A') {
         if (!REG_EXPS.Letters.test(e.key)) {
           // if pattern char specifies letter and is not
           e.preventDefault();
@@ -87,6 +87,6 @@ export class USAInputMaskElement extends HTMLElement {
   }
 
   #getMaskFor(input: MaskableElement) {
-    return this.mask || input.getAttribute("mask") || "";
+    return this.mask || input.getAttribute('mask') || '';
   }
 }

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

@@ -1,21 +1,16 @@
-import type { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
 
-import type { USAInputMaskElement } from "./input-mask.element.js";
+import type { USAInputMaskElement } from './input-mask.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "input-mask",
-  tags: ["autodocs"],
+  title: 'input-mask',
+  tags: ['autodocs'],
   render(args) {
     return html`
       <usa-input-mask>
-        <usa-input
-          name="phone"
-          placeholder=${args.mask}
-          autocomplete="off"
-          mask=${args.mask}
-        >
+        <usa-input name="phone" placeholder=${args.mask} autocomplete="off" mask=${args.mask} value="1234567890">
           Phone:
         </usa-input>
       </usa-input-mask>
@@ -23,7 +18,7 @@ const meta = {
   },
   argTypes: {},
   args: {
-    mask: "(999) 999-9999",
+    mask: '(999) 999-9999',
   },
 } satisfies Meta<USAInputMaskElement>;
 

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

@@ -1,110 +1,105 @@
-import "./input-mask.element.js";
-import "../input/input.element.js";
+import './input-mask.element.js';
+import '../input/input.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import { format } from "./format.js";
-import type { USAInputMaskElement } from "./input-mask.element.js";
+import { format } from './format.js';
+import type { USAInputMaskElement } from './input-mask.element.js';
 
-describe("format", () => {
-  it("should retrn the correct raw value", () => {
-    assert.deepEqual(format("(123) 456 7890", "(***) ***-****"), {
-      raw: "1234567890",
-      formatted: "(123) 456-7890",
+describe('format', () => {
+  it('should retrn the correct raw value', () => {
+    assert.deepEqual(format('(123) 456 7890', '(***) ***-****'), {
+      raw: '1234567890',
+      formatted: '(123) 456-7890',
     });
   });
 
-  it("should return a formatted phone number (***) ***-****", () => {
-    assert.deepEqual(format("1234567890", "(***) ***-****"), {
-      raw: "1234567890",
-      formatted: "(123) 456-7890",
+  it('should return a formatted phone number (***) ***-****', () => {
+    assert.deepEqual(format('1234567890', '(***) ***-****'), {
+      raw: '1234567890',
+      formatted: '(123) 456-7890',
     });
   });
 
-  it("should return a formatted phone number ***-***-****", () => {
-    assert.deepEqual(format("1234567890", "***-***-****"), {
-      raw: "1234567890",
-      formatted: "123-456-7890",
+  it('should return a formatted phone number ***-***-****', () => {
+    assert.deepEqual(format('1234567890', '***-***-****'), {
+      raw: '1234567890',
+      formatted: '123-456-7890',
     });
   });
 
-  it("should only allow numbers", () => {
-    assert.deepEqual(format("304213abcd", "999-999-9999"), {
-      raw: "304213abcd",
-      formatted: "304-213-",
+  it('should only allow numbers', () => {
+    assert.deepEqual(format('304213abcd', '999-999-9999'), {
+      raw: '304213abcd',
+      formatted: '304-213-',
     });
   });
 
-  it("should only allow a mix of letters and numbers", () => {
-    assert.deepEqual(format("C94749", "A-99999"), {
-      raw: "C94749",
-      formatted: "C-94749",
+  it('should only allow a mix of letters and numbers', () => {
+    assert.deepEqual(format('C94749', 'A-99999'), {
+      raw: 'C94749',
+      formatted: 'C-94749',
     });
   });
 });
 
-describe("usa-input-mask", () => {
-  it("should format default value", async () => {
+describe('usa-input-mask', () => {
+  it('should format default value', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask mask="(999) 999-9999">
         <input name="phone" value="1234567890" 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 () => {
+  it('should update value when on input event', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask>
         <input name="phone" mask="(999) 999-9999" />
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("input");
+    const input = el.querySelector('input');
 
     if (input) {
-      input.value = "8888888888";
-      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.value = '8888888888';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
     }
-
-    assert.equal(input?.value, "(888) 888-8888");
+    assert.equal(input?.value, '(888) 888-8888');
   });
 });
 
-describe("usa-input-mask with usa-input", () => {
-  it("should format default value", async () => {
+describe('usa-input-mask with usa-input', () => {
+  it('should format default value', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask mask="(999) 999-9999">
         <usa-input name="phone" value="1234567890" id="TEST" mask></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 () => {
+  it('should update value when on input event', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask>
-        <usa-input
-          name="phone"
-          value="1234567890"
-          mask="(999) 999-9999"
-        ></usa-input>
+        <usa-input name="phone" value="1234567890" mask="(999) 999-9999"></usa-input>
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("usa-input");
+    const input = el.querySelector('usa-input');
 
     if (input) {
-      input.value = "8888888888";
-      input.dispatchEvent(new Event("input", { bubbles: true }));
+      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/services/icon.service.test.ts

@@ -1,11 +1,11 @@
-import { Injector } from "@joist/di";
-import { assert } from "@open-wc/testing";
+import { Injector } from '@joist/di';
+import { assert } from '@open-wc/testing';
 
-import { HttpService } from "./http.service.js";
-import { IconService } from "./icon.service.js";
+import { HttpService } from './http.service.js';
+import { IconService } from './icon.service.js';
 
-describe("IconService", () => {
-  it("should fetch icon if not in cache", async () => {
+describe('IconService', () => {
+  it('should fetch icon if not in cache', async () => {
     let callCount = 0;
 
     const app = new Injector({
@@ -16,7 +16,7 @@ describe("IconService", () => {
             use: class extends HttpService {
               async fetch(): Promise<Response> {
                 callCount++;
-                return new Response("<svg></svg>");
+                return new Response('<svg></svg>');
               }
             },
           },
@@ -26,13 +26,13 @@ describe("IconService", () => {
 
     const icon = app.inject(IconService);
 
-    const res = await icon.getIcon("test");
+    const res = await icon.getIcon('test' as any);
 
-    assert.equal(res.nodeName, "svg");
+    assert.equal(res.nodeName, 'svg');
     assert.equal(callCount, 1);
   });
 
-  it("should not fetch new icon if the icon is found in the cache", async () => {
+  it('should not fetch new icon if the icon is found in the cache', async () => {
     let callCount = 0;
 
     const app = new Injector({
@@ -43,7 +43,7 @@ describe("IconService", () => {
             use: class extends HttpService {
               async fetch(): Promise<Response> {
                 callCount++;
-                return new Response("<svg></svg>");
+                return new Response('<svg></svg>');
               }
             },
           },
@@ -53,11 +53,11 @@ describe("IconService", () => {
 
     const icon = app.inject(IconService);
 
-    await icon.getIcon("test");
+    await icon.getIcon('accessibility_new');
 
-    const res = await icon.getIcon("test");
+    const res = await icon.getIcon('accessibility_new');
 
-    assert.equal(res.nodeName, "svg");
+    assert.equal(res.nodeName, 'svg');
     assert.equal(callCount, 1);
   });
 });

package/src/lib/services/icon.service.ts

@@ -1,52 +1,53 @@
-import { inject, injectable } from "@joist/di";
+import { inject, injectable } from '@joist/di';
 
-import { USAConfig } from "../config/config.element.js";
-import { HttpService } from "./http.service.js";
+import { USAConfig } from '../config/config.element.js';
+import { HttpService } from './http.service.js';
+import { USAIcon } from '../icon/icon-types.js';
 
 @injectable()
 export class IconService {
   #config = inject(USAConfig);
   #http = inject(HttpService);
-  #iconCache: Map<string, Promise<HTMLTemplateElement>> = new Map();
+  #iconCache: Map<USAIcon, HTMLTemplateElement> = new Map();
 
-  async getIcon(icon: string): Promise<Node> {
+  async getIcon(icon: USAIcon, abortSignal?: AbortSignal): Promise<Node> {
     const config = this.#config();
     const http = this.#http();
 
     const cached = this.#iconCache.get(icon);
 
     if (cached) {
-      return cached.then((res) => {
-        if (!res.content.firstElementChild) {
-          throw Error("cached value is not valid");
-        }
+      if (!cached.content.firstElementChild) {
+        throw Error('cached value is not valid');
+      }
 
-        return res.content.firstElementChild.cloneNode(true);
-      });
+      return cached.content.firstElementChild.cloneNode(true);
     }
 
     const svg = http
-      .fetch(`${config.iconPath}${icon}.svg`)
+      .fetch(`${config.iconPath}${icon}.svg`, {
+        signal: abortSignal,
+      })
       .then((res) => {
         switch (res.status) {
           case 200:
             return res.text();
         }
 
-        return "";
+        return '';
       })
       .then((res) => {
-        const template = document.createElement("template");
+        const template = document.createElement('template');
         template.innerHTML = res;
 
+        this.#iconCache.set(icon, template);
+
         return template;
       });
 
-    this.#iconCache.set(icon, svg);
-
     return svg.then((res) => {
       if (!res.content.firstElementChild) {
-        throw Error("ICON is not valid");
+        throw Error('ICON is not valid');
       }
 
       return res.content.firstElementChild.cloneNode(true);

package/src/lib/textarea/textarea.element.ts

@@ -1,14 +1,14 @@
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { attr, css, element, html, listen, query, ready } from '@joist/element';
+import { effect, observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-textarea": USATextareaElement;
+    'usa-textarea': USATextareaElement;
   }
 }
 
 @element({
-  tagName: "usa-textarea",
+  tagName: 'usa-textarea',
   shadowDom: [
     css`
       * {
@@ -34,7 +34,7 @@ declare global {
         border-radius: 0;
         color: #1b1b1b;
         display: block;
-        padding: .5rem;
+        padding: 0.5rem;
         border-width: 1px;
         border-color: #5c5c5c;
         border-style: solid;
@@ -62,7 +62,7 @@ declare global {
       <label for="textarea" part="label">
         <slot></slot>
       </label>
-      
+
       <textarea id="textarea" part="textarea"></textarea>
     `,
   ],
@@ -71,13 +71,13 @@ export class USATextareaElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  accessor name = '';
 
   @attr()
-  accessor autocomplete: AutoFill = "on";
+  accessor autocomplete: AutoFill = 'on';
 
   @attr()
-  accessor placeholder = "";
+  accessor placeholder = '';
 
   @attr()
   accessor required = false;
@@ -86,10 +86,10 @@ export class USATextareaElement extends HTMLElement {
     reflect: false,
   })
   @observe()
-  accessor value = "";
+  accessor value = '';
 
   #internals = this.attachInternals();
-  #input = query("textarea");
+  #input = query('textarea');
 
   @ready()
   onReady() {
@@ -116,7 +116,7 @@ export class USATextareaElement extends HTMLElement {
     this.#syncFormState();
   }
 
-  @listen("input")
+  @listen('input')
   onInputChange() {
     this.value = this.#input().value;
   }
@@ -124,15 +124,11 @@ export class USATextareaElement extends HTMLElement {
   #syncFormState() {
     const input = this.#input();
 
-    this.#internals.setFormValue(input.value);
+    this.#internals.setFormValue(this.value);
     this.#internals.setValidity({});
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     }
   }
 }

package/target/lib/accordion/accordion.element.d.ts

@@ -1,13 +1,14 @@
-import "@joist/templating/define.js";
-import { USAAccordionToggleEvent } from "./events.js";
+import '@joist/templating/define.js';
+import { USAAccordionToggleEvent } from './events.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-accordion": USAAccordionElement;
+        'usa-accordion': USAAccordionElement;
     }
 }
 export declare class USAAccordionElement extends HTMLElement {
     accessor name: string;
     accessor open: boolean;
+    accessor icon: 'add' | 'remove';
     onClick(e: Event): void;
     onAccordionToggle(e: USAAccordionToggleEvent): void;
 }