@noctuatech/uswds 1.3.2 → 1.3.4

package/src/lib/search/search.element.test.ts

@@ -0,0 +1,71 @@
+import './search.element.js';
+import '../input/input.element.js';
+import '../button/button.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import { userEvent } from '@testing-library/user-event';
+import type { USASearchElement } from './search.element.js';
+
+describe('usa-search', () => {
+  it('should be accessible', async () => {
+    const search = await fixture<USASearchElement>(html` <usa-search name="search">Hello World</usa-search> `);
+
+    return assert.isAccessible(search);
+  });
+
+  it('should have default attribute values', async () => {
+    const search = await fixture<USASearchElement>(html` <usa-search></usa-search> `);
+
+    assert.equal(search.name, 'search');
+    assert.equal(search.placeholder, 'Search');
+    assert.equal(search.required, false);
+    assert.equal(search.disabled, false);
+    assert.equal(search.autocomplete, 'off');
+    assert.equal(search.value, '');
+  });
+
+  it('should update attributes when changed', async () => {
+    const search = await fixture<USASearchElement>(html` <usa-search></usa-search> `);
+
+    search.name = 'custom-name';
+    search.placeholder = 'Custom Placeholder';
+    search.required = true;
+    search.disabled = true;
+    search.autocomplete = 'on';
+    search.value = 'test value';
+
+    assert.equal(search.name, 'custom-name');
+    assert.equal(search.placeholder, 'Custom Placeholder');
+    assert.equal(search.required, true);
+    assert.equal(search.disabled, true);
+    assert.equal(search.autocomplete, 'on');
+    assert.equal(search.value, 'test value');
+  });
+
+  it('should handle form submission', async () => {
+    const search = await fixture<USASearchElement>(html` <usa-search></usa-search> `);
+
+    let submitted = false;
+
+    search.addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      submitted = true;
+    });
+
+    const form = search.shadowRoot?.querySelector('form');
+    form?.dispatchEvent(new Event('submit', { bubbles: true, composed: true }));
+
+    assert.isTrue(submitted);
+  });
+
+  it('should update value on input change', async () => {
+    const search = await fixture<USASearchElement>(html` <usa-search></usa-search> `);
+
+    const input = search.shadowRoot?.querySelector('usa-input');
+    input?.dispatchEvent(new Event('input', { bubbles: true }));
+
+    assert.equal(search.value, '');
+  });
+});

package/src/lib/select/{select.test.ts → select.element.test.ts}

@@ -1,11 +1,11 @@
-import "./select.element.js";
-import "./select-option/select-option.element.js";
+import './select.element.js';
+import './select-option/select-option.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-select", () => {
-  it("should be accessible", async () => {
+describe('usa-select', () => {
+  it('should be accessible', async () => {
     const el = await fixture<HTMLFormElement>(html`
       <usa-select name="example">
         Hello World
@@ -19,7 +19,7 @@ describe("usa-select", () => {
     return assert.isAccessible(el);
   });
 
-  it("should create local select options", async () => {
+  it('should create local select options', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-select name="example">
@@ -32,17 +32,15 @@ describe("usa-select", () => {
       </form>
     `);
 
-    const nativeInputs = form
-      .querySelector("usa-select")
-      ?.shadowRoot?.querySelectorAll("option");
+    const nativeInputs = form.querySelector('usa-select')?.shadowRoot?.querySelectorAll('option');
 
     assert.deepEqual(
       Array.from(nativeInputs ?? []).map((input) => input.value),
-      ["first", "second", "third"],
+      ['first', 'second', 'third'],
     );
   });
 
-  it("should remove select options when options are removed", async () => {
+  it('should remove select options when options are removed', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-select name="example">
@@ -55,21 +53,19 @@ describe("usa-select", () => {
       </form>
     `);
 
-    const options = form.querySelectorAll("usa-select-option");
+    const options = form.querySelectorAll('usa-select-option');
 
     options[1].remove();
 
-    const nativeInputs = form
-      .querySelector("usa-select")
-      ?.shadowRoot?.querySelectorAll("option");
+    const nativeInputs = form.querySelector('usa-select')?.shadowRoot?.querySelectorAll('option');
 
     assert.deepEqual(
       Array.from(nativeInputs ?? []).map((input) => input.value),
-      ["first", "third"],
+      ['first', 'third'],
     );
   });
 
-  it("should submit form with default values", async () => {
+  it('should submit form with default values', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-select name="example" value="second">
@@ -84,10 +80,10 @@ describe("usa-select", () => {
 
     const value = new FormData(form);
 
-    assert.equal(value.get("example"), "second");
+    assert.equal(value.get('example'), 'second');
   });
 
-  it("should update form value as select value changed", async () => {
+  it('should update form value as select value changed', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-select name="example" value="second">
@@ -100,24 +96,25 @@ describe("usa-select", () => {
       </form>
     `);
 
-    const select = form.querySelector("usa-select");
-    const nativeSelect = select?.shadowRoot?.querySelector("select");
+    const select = form.querySelector('usa-select');
+    const nativeSelect = select?.shadowRoot?.querySelector('select');
 
     if (nativeSelect) {
-      await userEvent.selectOptions(nativeSelect, "third");
+      await userEvent.selectOptions(nativeSelect, 'third');
     }
 
     const value = new FormData(form);
 
-    assert.equal(value.get("example"), "third");
+    assert.equal(value.get('example'), 'third');
   });
 
-  it("should not submit when not valid", async () => {
+  it('should not submit when not valid', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
-        <usa-select name="example" required>
+        <usa-select id="TEST" name="example" required>
           Hello World
 
+          <usa-select-option value="">-Select One -</usa-select-option>
           <usa-select-option value="first">First</usa-select-option>
           <usa-select-option value="second">Second</usa-select-option>
           <usa-select-option value="third">Third</usa-select-option>

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

@@ -1,20 +1,24 @@
-import { injectable } from "@joist/di";
-import { attr, css, element, html, listen, query } from "@joist/element";
+import '@joist/templating/define.js';
 
-import { SELECT_CONTEXT, type SelectContainer } from "./context.js";
+import { injectable } from '@joist/di';
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { bind } from '@joist/templating';
+
+import { SELECT_CONTEXT, type SelectContainer } from './context.js';
+import { effect } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-select": USASelectElement;
+    'usa-select': USASelectElement;
   }
 }
 
 @injectable({
-  name: "usa-select-ctx",
+  name: 'usa-select-ctx',
   provideSelfAs: [SELECT_CONTEXT],
 })
 @element({
-  tagName: "usa-select",
+  tagName: 'usa-select',
   shadowDom: [
     css`
       :host {
@@ -69,7 +73,9 @@ declare global {
           <slot></slot>
         </div>
 
-        <select part="select"></select>
+        <j-bind props="value,name,required">
+          <select part="select"></select>
+        </j-bind>
       </label>
     `,
   ],
@@ -78,63 +84,56 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
   static formAssociated = true;
 
   @attr()
-  accessor value = "";
+  @bind()
+  accessor value = '';
 
   @attr()
-  accessor name = "";
+  @bind()
+  accessor name = '';
 
   @attr()
+  @bind()
   accessor required = false;
 
-  #select = query("select");
+  #select = query('select');
   #internals = this.attachInternals();
 
   connectedCallback() {
-    this.#select({
-      value: this.value,
-      name: this.name,
-      required: this.required,
-    });
-
     this.#syncFormState();
   }
 
-  attributeChangedCallback() {
-    this.#select({
-      value: this.value,
-      name: this.name,
-      required: this.required,
-    });
-
+  @effect()
+  onChange() {
     this.#syncFormState();
   }
 
-  @listen("change")
+  @listen('change')
   onSelectChange() {
     const select = this.#select();
 
     this.value = select.value;
-
-    this.#syncFormState();
   }
 
   addSelectOption(option: HTMLOptionElement) {
     const select = this.#select();
+
+    if (!this.value && !select.children.length) {
+      this.value = option.value;
+    }
+
     select.append(option);
   }
 
-  #syncFormState() {
+  async #syncFormState() {
     const select = this.#select();
 
     this.#internals.setFormValue(this.value);
     this.#internals.setValidity({});
 
+    await Promise.resolve();
+
     if (select.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        select.validationMessage,
-        select,
-      );
+      this.#internals.setValidity({ customError: true }, select.validationMessage, select);
     }
   }
 }

package/src/lib/side-nav/{side-nav.test.ts → side-nav.element.test.ts}

@@ -1,13 +1,13 @@
-import "../link/link.element.js";
-import "./side-nav.element.js";
-import "./side-nav-item/side-nav-item.element.js";
+import '../link/link.element.js';
+import './side-nav.element.js';
+import './side-nav-item/side-nav-item.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USASideNavElement } from "./side-nav.element.js";
+import type { USASideNavElement } from './side-nav.element.js';
 
-describe("usa-side-nav", () => {
-  it("should be accessible", async () => {
+describe('usa-side-nav', () => {
+  it('should be accessible', async () => {
     const sideNav = await fixture<USASideNavElement>(html`
       <usa-side-nav>
         <usa-side-nav-item current>
@@ -51,7 +51,7 @@ describe("usa-side-nav", () => {
     return assert.isAccessible(sideNav);
   });
 
-  it("should set child padding correctly", async () => {
+  it('should set child padding correctly', async () => {
     const sideNav = await fixture<USASideNavElement>(html`
       <usa-side-nav>
         <usa-side-nav-item current>
@@ -92,20 +92,10 @@ describe("usa-side-nav", () => {
       </usa-side-nav>
     `);
 
-    const items = sideNav.querySelectorAll("usa-side-nav-item");
-
-    assert.equal(
-      getComputedStyle(items[1]).getPropertyValue(
-        "--usa-nav-item-padding-left",
-      ),
-      "2rem",
-    );
-
-    assert.equal(
-      getComputedStyle(items[3]).getPropertyValue(
-        "--usa-nav-item-padding-left",
-      ),
-      "3rem",
-    );
+    const items = sideNav.querySelectorAll('usa-side-nav-item');
+
+    assert.equal(getComputedStyle(items[1]).getPropertyValue('--usa-nav-item-padding-left'), '2rem');
+
+    assert.equal(getComputedStyle(items[3]).getPropertyValue('--usa-nav-item-padding-left'), '3rem');
   });
 });

package/src/lib/step-indicator/step/step.element.ts

@@ -1,13 +1,13 @@
-import { attr, attrChanged, css, element, html } from "@joist/element";
+import { attr, attrChanged, css, element, html } from '@joist/element';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-step": USAStepIndicatorStepElement;
+    'usa-step': USAStepIndicatorStepElement;
   }
 }
 
 @element({
-  tagName: "usa-step",
+  tagName: 'usa-step',
   shadowDom: [
     css`
       :host {
@@ -42,26 +42,26 @@ declare global {
         box-sizing: border-box;
       }
 
-      :host([state="complete"]) {
+      :host([state='complete']) {
         color: #162e51;
       }
 
-      :host([state="complete"])::before {
+      :host([state='complete'])::before {
         background-color: #162e51;
       }
 
-      :host([state="current"]) {
+      :host([state='current']) {
         color: #005ea2;
         font-weight: bold;
       }
 
-      :host([state="current"])::before {
+      :host([state='current'])::before {
         background-color: #005ea2;
       }
 
       :host:before {
         background-color: #919191;
-        content: "";
+        content: '';
         display: block;
         height: 0.5rem;
       }
@@ -78,19 +78,19 @@ declare global {
         margin-top: 1.5rem;
       }
 
-      :host([counter][state="complete"]):after {
+      :host([counter][state='complete']):after {
         background-color: #162e51;
         box-shadow: 0 0 0 0.25rem #fff;
         color: #fff;
       }
 
-      :host([counter][state="current"]):after {
+      :host([counter][state='current']):after {
         background-color: #005ea2;
         box-shadow: 0 0 0 0.25rem #fff;
         color: #fff;
       }
 
-      :host([counter="small"]):after {
+      :host([counter='small']):after {
         height: 1.5rem;
         width: 1.5rem;
         font-size: 0.93rem;
@@ -109,15 +109,15 @@ declare global {
 })
 export class USAStepIndicatorStepElement extends HTMLElement {
   @attr()
-  accessor state: "complete" | "current" | "" = "";
+  accessor state: 'complete' | 'current' | '' = '';
 
   @attr()
-  accessor role = "listitem";
+  accessor role = 'listitem';
 
-  @attrChanged("state")
+  @attrChanged('state')
   onStateAttrChanged() {
-    if (this.state === "current") {
-      this.ariaCurrent = "step";
+    if (this.state === 'current') {
+      this.ariaCurrent = 'step';
     }
   }
 }

package/src/lib/step-indicator/{step-indicator.test.ts → step-indicator.element.test.ts}

@@ -1,12 +1,12 @@
-import "./step-indicator.element.js";
-import "./step/step.element.js";
+import './step-indicator.element.js';
+import './step/step.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USAStepIndicatorElement } from "./step-indicator.element.js";
+import type { USAStepIndicatorElement } from './step-indicator.element.js';
 
-describe("usa-step-indicator", () => {
-  it("should be accessible", async () => {
+describe('usa-step-indicator', () => {
+  it('should be accessible', async () => {
     const stepIndicator = await fixture<USAStepIndicatorElement>(html`
       <usa-step-indicator>
         <usa-step state="complete" counter="on">Personal information</usa-step>

package/src/lib/summary-box/summary-box.element.test.ts

@@ -0,0 +1,13 @@
+import './summary-box.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USASummaryBoxElement } from './summary-box.element.js';
+
+describe('usa-summary-box', () => {
+  it('should be accessible', async () => {
+    const summaryBox = await fixture<USASummaryBoxElement>(html` <usa-summary-box>Hello World</usa-summary-box> `);
+
+    return assert.isAccessible(summaryBox);
+  });
+});

package/src/lib/tag/tag.element.test.ts

@@ -0,0 +1,13 @@
+import './tag.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USATagElement } from './tag.element.js';
+
+describe('usa-tag', () => {
+  it('should be accessible', async () => {
+    const tag = await fixture<USATagElement>(html` <usa-tag>Hello World</usa-tag> `);
+
+    return assert.isAccessible(tag);
+  });
+});

package/src/lib/textarea/{textarea.test.ts → textarea.element.test.ts}

@@ -1,10 +1,10 @@
-import "./textarea.element.js";
+import './textarea.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-textarea", () => {
-  it("should be accessible", async () => {
+describe('usa-textarea', () => {
+  it('should be accessible', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <usa-textarea name="fname" value="Foo">Hello World</usa-textarea>
     `);
@@ -12,7 +12,7 @@ describe("usa-textarea", () => {
     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-textarea name="fname" value="Foo">Hello World</usa-textarea>
@@ -23,10 +23,10 @@ describe("usa-textarea", () => {
 
     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-textarea name="fname">Hello World</usa-textarea>
@@ -35,19 +35,19 @@ describe("usa-textarea", () => {
       </form>
     `);
 
-    const input = form.querySelector("usa-textarea");
-    const nativeInput = input?.shadowRoot?.querySelector("textarea");
+    const input = form.querySelector('usa-textarea');
+    const nativeInput = input?.shadowRoot?.querySelector('textarea');
 
     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-textarea name="fname" required>Hello World</usa-textarea>

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

@@ -1,5 +1,8 @@
-import { attr, css, element, html, listen, query, ready } from '@joist/element';
-import { effect, observe } from '@joist/observable';
+import '@joist/templating/define.js';
+
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { effect } from '@joist/observable';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -59,11 +62,15 @@ declare global {
       }
     `,
     html`
-      <label for="textarea" part="label">
-        <slot></slot>
-      </label>
-
-      <textarea id="textarea" part="textarea"></textarea>
+      <j-bind attrs="for:name">
+        <label part="label">
+          <slot></slot>
+        </label>
+      </j-bind>
+
+      <j-bind props="name,placeholder,autocomplete,required,value,id:name">
+        <textarea id="textarea" part="textarea"></textarea>
+      </j-bind>
     `,
   ],
 })
@@ -71,48 +78,40 @@ export class USATextareaElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
+  @bind()
   accessor name = '';
 
   @attr()
+  @bind()
   accessor autocomplete: AutoFill = 'on';
 
   @attr()
+  @bind()
   accessor placeholder = '';
 
   @attr()
+  @bind()
   accessor required = false;
 
+  @attr()
+  @bind()
+  accessor autofocus = false;
+
   @attr({
     reflect: false,
   })
-  @observe()
+  @bind()
   accessor value = '';
 
   #internals = this.attachInternals();
   #input = query('textarea');
 
-  @ready()
-  onReady() {
-    this.#input({ autofocus: this.autofocus });
-  }
-
-  attributeChangedCallback() {
-    this.#input({
-      name: this.name,
-      placeholder: this.placeholder,
-      autocomplete: this.autocomplete,
-      required: this.required,
-    });
-  }
-
   connectedCallback() {
     this.#syncFormState();
   }
 
   @effect()
   onChange() {
-    this.#input({ value: this.value });
-
     this.#syncFormState();
   }