@noctuatech/uswds 1.3.2 → 1.3.4

package/src/lib/link/link.element.ts

@@ -1,13 +1,16 @@
-import { attr, css, element, html, query } from "@joist/element";
+import '@joist/templating/define.js';
+
+import { attr, css, element, html, query } from '@joist/element';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-link": USALinkElement;
+    'usa-link': USALinkElement;
   }
 }
 
 @element({
-  tagName: "usa-link",
+  tagName: 'usa-link',
   shadowDom: [
     css`
       :host {
@@ -20,38 +23,28 @@ declare global {
         color: inherit;
         text-decoration: inherit;
         display: inherit;
-        text-overflow: inherit
+        text-overflow: inherit;
       }
     `,
     html`
-      <a>
-        <slot></slot>
-      </a>
+      <j-bind props="href,target,title">
+        <a>
+          <slot></slot>
+        </a>
+      </j-bind>
     `,
   ],
 })
 export class USALinkElement extends HTMLElement {
   @attr()
-  accessor href = "";
+  @bind()
+  accessor href = '';
 
   @attr()
-  accessor target: "_blank" | "_parent" | "_self" | "_top" | "" = "";
+  @bind()
+  accessor target: '_blank' | '_parent' | '_self' | '_top' | '' = '';
 
   @attr()
-  accessor title = "";
-
-  @attr({
-    observed: false,
-  })
-  accessor disabled = false;
-
-  #anchor = query("a");
-
-  attributeChangedCallback() {
-    this.#anchor({
-      href: this.href,
-      target: this.target,
-      title: this.title,
-    });
-  }
+  @bind()
+  accessor title = '';
 }

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

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

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

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

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

@@ -0,0 +1,23 @@
+import './modal.element.js';
+import './modal-heading/modal-heading.element.js';
+import './modal-close/modal-close.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USAModalElement } from './modal.element.js';
+
+describe('usa-modal', () => {
+  it('should be accessible', async () => {
+    const modal = await fixture<USAModalElement>(html`
+      <usa-modal open>
+        <usa-modal-close></usa-modal-close>
+
+        <usa-modal-heading> Are you sure you want to continue? </usa-modal-heading>
+
+        <p>This is some other example of content</p>
+      </usa-modal>
+    `);
+
+    return assert.isAccessible(modal);
+  });
+});

package/src/lib/pagination/pagination-item/pagination-item.element.ts

@@ -1,13 +1,13 @@
-import { css, element, html } from "@joist/element";
+import { css, element, html } from '@joist/element';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-pagination-item": USAPaginationItemElement;
+    'usa-pagination-item': USAPaginationItemElement;
   }
 }
 
 @element({
-  tagName: "usa-pagination-item",
+  tagName: 'usa-pagination-item',
   shadowDom: [
     css`
       :host {
@@ -26,10 +26,13 @@ declare global {
       :host(:last-child) {
         margin-left: 1rem;
       }
+
+      ::slotted(usa-link) {
+        display: inline-flex;
+        align-items: center;
+      }
     `,
-    html`
-      <slot></slot>
-    `,
+    html` <slot></slot> `,
   ],
 })
 export class USAPaginationItemElement extends HTMLElement {}

package/src/lib/pagination/pagination-no/pagination-no.element.ts

@@ -1,19 +1,22 @@
-import { attr, css, element, html, query } from "@joist/element";
+import '@joist/templating/define.js';
+
+import { attr, css, element, html } from '@joist/element';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-pagination-no": USAPaginationNoElement;
+    'usa-pagination-no': USAPaginationNoElement;
   }
 }
 
 @element({
-  tagName: "usa-pagination-no",
+  tagName: 'usa-pagination-no',
   shadowDom: [
     css`
       :host {
         align-items: center;
-        border-color: rgba(27, 27, 27, .2);
-        border-radius: .25rem;
+        border-color: rgba(27, 27, 27, 0.2);
+        border-radius: 0.25rem;
         border-style: solid;
         border-width: 1px;
         color: #005ea2;
@@ -27,7 +30,7 @@ declare global {
         justify-content: center;
         text-decoration: underline;
         cursor: pointer;
-        padding: .5rem;
+        padding: 0.5rem;
         color: inherit;
       }
 
@@ -35,25 +38,22 @@ declare global {
         background-color: #1b1b1b;
         border-color: transparent;
         color: #fff;
-      }   
+      }
     `,
     html`
-      <a>
-        <slot></slot>
-      </a>
+      <j-bind props="href">
+        <a>
+          <slot></slot>
+        </a>
+      </j-bind>
     `,
   ],
 })
 export class USAPaginationNoElement extends HTMLElement {
   @attr()
-  accessor href = "#";
+  @bind()
+  accessor href = '#';
 
   @attr()
   accessor active = false;
-
-  #a = query("a");
-
-  attributeChangedCallback() {
-    this.#a({ href: this.href });
-  }
 }

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

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

package/src/lib/process-list/{process-list.test.ts → process-list.element.test.ts}

@@ -1,22 +1,25 @@
-import "./process-list.element.js";
-import "./process-list-item/process-list-item.element.js";
+import './process-list.element.js';
+import './process-list-item/process-list-item.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USAProcessListElement } from "./process-list.element.js";
+import type { USAProcessListElement } from './process-list.element.js';
 
-describe("usa-process-list", () => {
-  it("should be accessible", async () => {
+describe('usa-process-list', () => {
+  it('should be accessible', async () => {
     const processList = await fixture<USAProcessListElement>(html`
       <usa-process-list>
         <usa-process-list-item>
           <h4 slot="title">Start a process</h4>
 
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci
+          magna rhoncus neque.
 
           <ul>
             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-            <li>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li>
+            <li>
+              Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
+            </li>
             <li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li>
             <li>Aliquam erat volutpat. Sed quis velit.</li>
           </ul>
@@ -24,14 +27,18 @@ describe("usa-process-list", () => {
 
         <usa-process-list-item>
           <h4 slot="title">Proceed to the second step</h4>
-          
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci
+          magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae
+          ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
+          pharetra posuere sapien.
         </usa-process-list-item>
 
         <usa-process-list-item>
           <h4 slot="title">Complete the step-by-step process</h4>
-          
-          Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
+
+          Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis
+          velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
         </usa-process-list-item>
       </usa-process-list>
     `);

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

@@ -0,0 +1,20 @@
+import '../radio.element.js';
+import './radio-option.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USARadioOptionElement } from './radio-option.element.js';
+
+describe('usa-radio-option', () => {
+  it('should map value to slot', async () => {
+    const radio = await fixture<USARadioOptionElement>(html`
+      <usa-radio>
+        <usa-radio-option value="first">First</usa-radio-option>
+      </usa-radio>
+    `);
+
+    const option = radio.querySelectorAll('usa-radio-option');
+
+    assert.equal(option[0].value, option[0].slot);
+  });
+});

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

@@ -0,0 +1,121 @@
+import './radio.element.js';
+import './radio-option/radio-option.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USARadioElement } from './radio.element.js';
+
+describe('usa-radio', () => {
+  it('should be accessible', async () => {
+    const radio = await fixture<USARadioElement>(html`
+      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+        <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
+
+        <usa-radio-option value="frederick-douglass"> Frederick Douglass </usa-radio-option>
+
+        <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
+
+        <usa-radio-option value="george-washington-carver"> George Washington Carver </usa-radio-option>
+      </usa-radio>
+    `);
+
+    return assert.isAccessible(radio);
+  });
+
+  it('should create local inputs for each option', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass"> Frederick Douglass </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver"> George Washington Carver </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
+
+    assert.deepEqual(
+      Array.from(nativeInputs).map((input) => input.value),
+      ['sojourner-truth', 'frederick-douglass', 'booker-t-washington', 'george-washington-carver'],
+    );
+  });
+
+  it('should remove inputs when options are removed', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass"> Frederick Douglass </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver"> George Washington Carver </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const options = form.querySelectorAll('usa-radio-option');
+
+    options[2].remove();
+
+    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'],
+    );
+  });
+
+  it('should submit form with default values', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass"> Frederick Douglass </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver"> George Washington Carver </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
+
+    assert.equal(nativeInputs[1].checked, true);
+    assert.equal(value.get('historical-figures'), 'frederick-douglass');
+  });
+
+  it('should submit form with changed value', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth"> Sojourner Truth </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass"> Frederick Douglass </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington"> Booker T. Washington </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver"> George Washington Carver </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
+
+    nativeInputs[3].click();
+
+    const value = new FormData(form);
+
+    assert.equal(value.get('historical-figures'), 'george-washington-carver');
+  });
+});

package/src/lib/range-slider/range-slider.element.test.ts

@@ -0,0 +1,57 @@
+import './range-slider.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+import { userEvent } from '@testing-library/user-event';
+
+import type { USARangeSliderElement } from './range-slider.element.js';
+
+describe('usa-range-slider', () => {
+  it('should be accessible', async () => {
+    const rangeSlider = await fixture<USARangeSliderElement>(html`
+      <usa-range-slider name="slider" value="0">Hello World</usa-range-slider>
+    `);
+
+    return assert.isAccessible(rangeSlider);
+  });
+
+  it('should submit form with default values', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    assert.equal(value.get('slider'), '50');
+  });
+
+  it('should update form value as input value changed', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const input = form.querySelector('usa-range-slider');
+
+    assert.ok(input?.shadowRoot);
+
+    const nativeInput = input.shadowRoot.querySelector('input');
+
+    assert.ok(nativeInput);
+
+    nativeInput.value = '75';
+    nativeInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+    await Promise.resolve();
+
+    const value = new FormData(form);
+
+    assert.equal(value.get('slider'), '75');
+  });
+});

package/src/lib/range-slider/range-slider.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 { effect } from '@joist/observable';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-range-slider": USARangeSliderElement;
+    'usa-range-slider': USARangeSliderElement;
   }
 }
 
 @element({
-  tagName: "usa-range-slider",
+  tagName: 'usa-range-slider',
   shadowDom: [
     css`
       :host {
@@ -24,11 +28,11 @@ declare global {
         border-radius: 0;
         color: #1b1b1b;
         display: block;
-        margin-top: .5rem;
+        margin-top: 0.5rem;
       }
 
       input:focus {
-        outline: .25rem solid #2491ff;
+        outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
 
@@ -42,7 +46,7 @@ declare global {
         cursor: pointer;
         -webkit-appearance: none;
         appearance: none;
-        margin-top: -.19rem;
+        margin-top: -0.19rem;
       }
 
       input::-webkit-slider-runnable-track {
@@ -55,11 +59,15 @@ declare global {
       }
     `,
     html`
-      <label part="label">
-        <slot></slot>
-      </label>
-
-      <input type="range" part="input">
+      <j-bind attrs="for:name">
+        <label part="label">
+          <slot></slot>
+        </label>
+      </j-bind>
+
+      <j-bind props="id:name,name,value,min,max,step">
+        <input type="range" part="input" />
+      </j-bind>
     `,
   ],
 })
@@ -67,45 +75,52 @@ export class USARangeSliderElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  @bind()
+  accessor name = '';
 
   @attr()
-  accessor value = "0";
+  @bind()
+  accessor value = '0';
 
   @attr()
-  accessor min = "0";
+  @bind()
+  accessor min = '0';
 
   @attr()
-  accessor max = "100";
+  @bind()
+  accessor max = '100';
 
   @attr()
-  accessor step = "1";
+  @bind()
+  accessor step = '1';
 
-  #label = query("label");
-  #input = query("input");
+  #input = query('input');
   #internals = this.attachInternals();
 
-  attributeChangedCallback() {
-    this.#label({
-      htmlFor: this.name,
-    });
-
-    this.#input({
-      name: this.name,
-      value: this.value,
-      min: this.min,
-      max: this.max,
-      step: this.step,
-      id: this.name,
-    });
+  connectedCallback() {
+    this.#syncFormState();
+  }
 
-    this.#internals.setFormValue(this.value);
+  @effect()
+  onChange() {
+    this.#syncFormState();
   }
 
-  @listen("change")
+  @listen('change')
   onInputChange() {
     const input = this.#input();
 
     this.value = input.value;
   }
+
+  #syncFormState() {
+    const input = this.#input();
+
+    this.#internals.setValidity({});
+    this.#internals.setFormValue(this.value);
+
+    if (input.validationMessage) {
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
+    }
+  }
 }