@noctuatech/uswds 1.3.2 → 1.3.4

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

@@ -1,9 +1,9 @@
-import "./checkbox.element.js";
+import './checkbox.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-describe("usa-checkbox", () => {
-  it("should be accessible", async () => {
+describe('usa-checkbox', () => {
+  it('should be accessible', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>
     `);
@@ -11,12 +11,10 @@ describe("usa-checkbox", () => {
     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-checkbox name="enabled" value="test" checked>
-          Hello World
-        </usa-checkbox>
+        <usa-checkbox name="enabled" value="test" checked> Hello World </usa-checkbox>
 
         <button>Submit</button>
       </form>
@@ -24,10 +22,10 @@ describe("usa-checkbox", () => {
 
     const value = new FormData(form);
 
-    assert.equal(value.get("enabled"), "test");
+    assert.equal(value.get('enabled'), 'test');
   });
 
-  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-checkbox name="enabled" value="test">Hello World</usa-checkbox>
@@ -36,24 +34,24 @@ describe("usa-checkbox", () => {
       </form>
     `);
 
-    const checkbox = form.querySelector("usa-checkbox");
-    const nativeInput = checkbox?.shadowRoot?.querySelector("input");
+    const checkbox = form.querySelector('usa-checkbox');
+    const nativeInput = checkbox?.shadowRoot?.querySelector('input');
 
     if (nativeInput) {
       nativeInput.click();
     }
 
+    await Promise.resolve();
+
     const value = new FormData(form);
 
-    assert.equal(value.get("enabled"), "test");
+    assert.equal(value.get('enabled'), 'test');
   });
 
-  it("should not submit when not valid", async () => {
+  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>
+        <usa-checkbox name="enabled" value="test" required> Hello World </usa-checkbox>
 
         <button>Submit</button>
       </form>

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

@@ -1,13 +1,17 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import '@joist/templating/define.js';
+
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { bind } from '@joist/templating';
+import { effect } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-checkbox": USACheckboxElement;
+    'usa-checkbox': USACheckboxElement;
   }
 }
 
 @element({
-  tagName: "usa-checkbox",
+  tagName: 'usa-checkbox',
   shadowDom: [
     css`
       * {
@@ -69,9 +73,9 @@ declare global {
         background-color: #005ea2;
         box-shadow: 0 0 0 2px #005ea2;
       }
-      
+
       input:checked + .checkbox::after {
-        content: " ";
+        content: ' ';
         display: block;
         height: 1rem;
         width: 0.5rem;
@@ -112,14 +116,14 @@ declare global {
     `,
     html`
       <label>
-        <input type="checkbox" tabindex="0"/>
-
-        <div class="checkbox" part="checkbox"></div>
+        <j-bind props="checked,required,disabled" target="input">
+          <input type="checkbox" tabindex="0" />
+          <div class="checkbox" part="checkbox"></div>
+        </j-bind>
 
         <div class="title" part="title">
-            <slot></slot>
-          </div>
-        </j-props>
+          <slot></slot>
+        </div>
       </label>
     `,
   ],
@@ -128,18 +132,23 @@ export class USACheckboxElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
+  @bind()
   accessor checked = false;
 
   @attr()
-  accessor name = "";
+  @bind()
+  accessor name = '';
 
   @attr()
-  accessor value = "";
+  @bind()
+  accessor value = '';
 
   @attr()
+  @bind()
   accessor required = false;
 
   @attr()
+  @bind()
   accessor disabled = false;
 
   @attr({
@@ -147,41 +156,28 @@ export class USACheckboxElement extends HTMLElement {
   })
   accessor tiled = false;
 
-  #checkbox = query("input");
-
+  #checkbox = query('input');
   #internals = this.attachInternals();
 
-  attributeChangedCallback() {
-    this.#checkbox({
-      checked: this.checked,
-      name: this.name,
-      disabled: this.disabled,
-      required: this.required,
-    });
-
+  @effect()
+  onChange() {
     this.#syncFormState();
   }
 
-  @listen("change", "input[type=checkbox]")
+  @listen('change', 'input[type=checkbox]')
   onCheckboxChange() {
     const checkbox = this.#checkbox();
     this.checked = checkbox.checked;
-
-    this.#syncFormState();
   }
 
   #syncFormState() {
     const checkbox = this.#checkbox();
 
     this.#internals.setValidity({});
-    this.#internals.setFormValue(checkbox.checked ? this.value : null);
+    this.#internals.setFormValue(this.checked ? this.value : null);
 
     if (checkbox.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        checkbox.validationMessage,
-        checkbox,
-      );
+      this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
     }
   }
 }

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

@@ -1,12 +1,12 @@
-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 { USACheckboxElement } from "./checkbox.element.js";
+import type { USACheckboxElement } from './checkbox.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-checkbox",
-  tags: ["autodocs"],
+  title: 'usa-checkbox',
+  tags: ['autodocs'],
   argTypes: {},
   args: {},
 } satisfies Meta<USACheckboxElement & { description: string }>;
@@ -19,15 +19,15 @@ type Story = StoryObj<USACheckboxElement>;
 export const Primary: Story = {
   render(args) {
     return html`
-      <usa-checkbox name="${args.name}" value="${args.value}" ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required}>
+      <usa-checkbox name="${args.name}" value="${args.value}" required>
         I agree to the above terms and conditions
       </usa-checkbox>
     `;
   },
   args: {
     checked: false,
-    name: "toc",
-    value: "agree",
+    name: 'toc',
+    value: 'agree',
     disabled: false,
     required: false,
   },
@@ -39,21 +39,10 @@ export const Group: Story = {
       <usa-checkbox-group>
         <legend>Select any historical figure</legend>
 
-        <usa-checkbox name="historical-figure" value="sojurner-truth">
-          Sojourner Truth
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="frederick-douglass">
-          Frederick Douglass
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="booker-t-washington">
-          Booker T. Washington
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="gw-carver" disabled>
-          George Washington Carver
-        </usa-checkbox>
+        <usa-checkbox name="historical-figure" value="sojurner-truth">Sojourner Truth</usa-checkbox>
+        <usa-checkbox name="historical-figure" value="frederick-douglass">Frederick Douglass </usa-checkbox>
+        <usa-checkbox name="historical-figure" value="booker-t-washington">Booker T. Washington</usa-checkbox>
+        <usa-checkbox name="historical-figure" value="gw-carver" disabled>George Washington Carver</usa-checkbox>
       </usa-checkbox-group>
     `;
   },
@@ -67,17 +56,12 @@ export const Tiled: Story = {
 
         <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
           Sojourner Truth
-          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
-        </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
-          Frederick Douglass
+          <usa-description>
+            This is optional text that can be used to describe the label in more detail.
+          </usa-description>
         </usa-checkbox>
-
-        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
-          Booker T. Washington
-        </usa-checkbox>
-
+        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled> Frederick Douglass </usa-checkbox>
+        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled> Booker T. Washington </usa-checkbox>
         <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
           George Washington Carver
         </usa-checkbox>

package/src/lib/collection/collection-item/collection-item.element.test.ts

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

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

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

package/src/lib/combo-box/{combo-box.test.ts → combo-box.element.test.ts}

@@ -1,12 +1,12 @@
-import "./combo-box.element.js";
-import "./combo-box-option/combo-box-option.element.js";
-import "../input/input.element.js";
+import './combo-box.element.js';
+import './combo-box-option/combo-box-option.element.js';
+import '../input/input.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USAComboBoxElement } from "./combo-box.element.js";
+import type { USAComboBoxElement } from './combo-box.element.js';
 
-describe("usa-combo-box", () => {
+describe('usa-combo-box', () => {
   let autocomplete: USAComboBoxElement;
   let input: HTMLInputElement;
 
@@ -25,123 +25,94 @@ describe("usa-combo-box", () => {
     input = autocomplete.input();
   });
 
-  it("should filter items based on input", async () => {
-    input.value = "b";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should filter items based on input', async () => {
+    input.value = 'b';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     const suggestions = autocomplete.listItems();
 
     assert.equal(suggestions.length, 2);
-    assert.equal(suggestions[0].dataset.value, "Banana");
-    assert.equal(suggestions[1].dataset.value, "Blueberry");
+    assert.equal(suggestions[0].dataset.value, 'Banana');
+    assert.equal(suggestions[1].dataset.value, 'Blueberry');
   });
 
-  it("should show all suggestions when input is empty", async () => {
-    input.value = "";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should show all suggestions when input is empty', async () => {
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     const suggestions = autocomplete.listItems();
     assert.equal(suggestions.length, 4);
   });
 
-  it("should handle case-insensitive search", async () => {
-    input.value = "B";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should handle case-insensitive search', async () => {
+    input.value = 'B';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     const suggestions = autocomplete.listItems();
     assert.equal(suggestions.length, 2);
-    assert.equal(suggestions[0].dataset.value, "Banana");
-    assert.equal(suggestions[1].dataset.value, "Blueberry");
+    assert.equal(suggestions[0].dataset.value, 'Banana');
+    assert.equal(suggestions[1].dataset.value, 'Blueberry');
   });
 
-  it("should navigate suggestions with arrow keys", async () => {
+  it('should navigate suggestions with arrow keys', async () => {
     // select item from list
-    input.value = "b";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.value = 'b';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     // Arrow down
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-    assert.equal(
-      autocomplete.currentItemEl?.getAttribute("data-value"),
-      "Banana",
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Banana');
 
     // Arrow down again
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-    assert.equal(
-      autocomplete.currentItemEl?.getAttribute("data-value"),
-      "Blueberry",
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Blueberry');
   });
 
-  it("should select suggestion with enter key", async () => {
-    input.value = "b";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should select suggestion with enter key', async () => {
+    input.value = 'b';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     // Navigate to first suggestion
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
 
     // Select suggestion
     const firstSuggestion = autocomplete.listItems()[0];
 
-    firstSuggestion?.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
-    );
+    firstSuggestion?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
 
-    assert.equal(input.value, "Banana");
-    assert.equal(autocomplete.list().innerHTML, "");
+    assert.equal(input.value, 'Banana');
+    assert.equal(autocomplete.list().innerHTML, '');
   });
 
-  it("should focus back on the input if no other items", async () => {
-    input.value = "b";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should focus back on the input if no other items', async () => {
+    input.value = 'b';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
 
     // Try to go up from first suggestion
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
 
     assert.equal(autocomplete.currentItemEl, null);
   });
 
-  it("should not go below last suggestion with arrow down", async () => {
-    input.value = "b";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+  it('should not go below last suggestion with arrow down', async () => {
+    input.value = 'b';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     // Navigate to last suggestion
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-
-    input.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    );
-
-    assert.equal(
-      autocomplete.currentItemEl?.getAttribute("data-value"),
-      "Blueberry",
-    );
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+
+    assert.equal(autocomplete.currentItemEl?.getAttribute('data-value'), 'Blueberry');
   });
 
-  it("should submit form with default values", async () => {
+  it('should submit form with default values', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" value="Apple" placeholder="Select a fruit">
@@ -158,10 +129,10 @@ describe("usa-combo-box", () => {
     `);
 
     const value = new FormData(form);
-    assert.equal(value.get("search"), "Apple");
+    assert.equal(value.get('search'), 'Apple');
   });
 
-  it("should update form value when an option is selected", async () => {
+  it('should update form value when an option is selected', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" placeholder="Select a fruit">
@@ -177,35 +148,35 @@ describe("usa-combo-box", () => {
       </form>
     `);
 
-    const comboBox = form.querySelector("usa-combo-box");
+    const comboBox = form.querySelector('usa-combo-box');
 
     if (!comboBox) {
-      throw new Error("Combo box not found");
+      throw new Error('Combo box not found');
     }
 
-    const input = comboBox.shadowRoot?.querySelector("input");
+    const input = comboBox.shadowRoot?.querySelector('input');
 
     if (!input) {
-      throw new Error("input not found");
+      throw new Error('input not found');
     }
 
     // Type to show suggestions
-    input.value = "Ban";
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.value = 'Ban';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
 
     // Select the first suggestion
     const suggestions = comboBox.listItems();
 
     suggestions[0]
-      .querySelector("slot")
+      .querySelector('slot')
       ?.assignedElements()[0]
-      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      .dispatchEvent(new MouseEvent('click', { bubbles: true }));
 
     const value = new FormData(form);
-    assert.equal(value.get("search"), "Banana");
+    assert.equal(value.get('search'), 'Banana');
   });
 
-  it("should not submit when required and no value is selected", async () => {
+  it('should not submit when required and no value is selected', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" required placeholder="Select a fruit">
@@ -224,7 +195,7 @@ describe("usa-combo-box", () => {
     assert.equal(form.checkValidity(), false);
   });
 
-  it("should not show suggestions when disabled", async () => {
+  it('should not show suggestions when disabled', async () => {
     const disabledComboBox = await fixture<USAComboBoxElement>(html`
       <usa-combo-box name="search" disabled placeholder="Select a fruit">
         <span slot="label">Fruits</span>

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

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

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

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