@noctuatech/uswds 1.3.2 → 1.3.4

package/src/lib/file-input/file-input-preview/file-input-preview.element.test.ts

@@ -0,0 +1,93 @@
+import './file-input-preview.element.js';
+import '../../link/link.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USAFileInputPreviewElement } from './file-input-preview.element.js';
+
+describe('usa-file-input-preview', () => {
+  it('should be accessible with no files', async () => {
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview> Selected file <usa-link>Change file</usa-link> </usa-file-input-preview>
+    `);
+
+    return assert.isAccessible(fileInputPreview);
+  });
+
+  it('should be accessible with files', async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], 'image1.jpg'));
+    data.items.add(new File([], 'image2.jpg'));
+
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    return assert.isAccessible(fileInputPreview);
+  });
+
+  it('should display file preview for images', async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], 'image1.jpg'));
+    data.items.add(new File([], 'image2.jpg'));
+
+    const { shadowRoot } = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const previewItems = Array.from(shadowRoot?.querySelectorAll('.preview-item') ?? []).map((item) =>
+      item.textContent?.trim(),
+    );
+
+    assert.deepEqual(previewItems, ['image1.jpg', 'image2.jpg']);
+  });
+
+  it('should display fewer previews when the number of items decreases', async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], 'image1.jpg'));
+    data.items.add(new File([], 'image2.jpg'));
+
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const data2 = new DataTransfer();
+    data2.items.add(new File([], 'image1.jpg'));
+
+    fileInputPreview.files = data2.files;
+
+    // need this to wait for effects to resolve
+    await Promise.resolve();
+
+    const previewItems = Array.from(fileInputPreview.shadowRoot?.querySelectorAll('.preview-item') ?? []).map((item) =>
+      item.textContent?.trim(),
+    );
+
+    assert.deepEqual(previewItems, ['image1.jpg']);
+  });
+
+  it('should create preview images for each file', async () => {
+    const data = new DataTransfer();
+    data.items.add(new File(['Image1'], 'image1.jpg', { type: 'image/jpg' }));
+    data.items.add(new File(['Image2'], 'image2.jpg', { type: 'image/jpg' }));
+
+    const { shadowRoot } = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const [first, second] = Array.from(shadowRoot?.querySelectorAll<HTMLImageElement>('.preview-item img') ?? []).map(
+      (item) => item.src.substring(29),
+    );
+
+    // we are just testing that the two hashes are in fact different
+    assert.isFalse(first === second);
+  });
+});

package/src/lib/file-input/file-input-preview/file-input-preview.element.ts

@@ -77,9 +77,9 @@ declare global {
           <div class="preview-item" part="item">
             <j-if bind="each.value.isImage">
               <template>
-                <j-props>
-                  <img height="40" width="40" aria-hidden="true" $.src="each.value.src" />
-                </j-props>
+                <j-bind props="src:each.value.src">
+                  <img height="40" width="40" aria-hidden="true" />
+                </j-bind>
               </template>
 
               <template else>
@@ -87,7 +87,7 @@ declare global {
               </template>
             </j-if>
 
-            <j-value bind="each.value.file.name"></j-value>
+            <j-val bind="each.value.file.name"></j-val>
           </div>
         </template>
       </j-for>
@@ -98,16 +98,18 @@ export class USAFileInputPreviewElement extends HTMLElement {
   @observe()
   accessor files: FileList | null = null;
 
-  @bind((i) => {
-    if (!i.files || i.files.length === 0) {
-      return [];
-    }
+  @bind({
+    compute: (i) => {
+      if (!i.files || i.files.length === 0) {
+        return [];
+      }
 
-    return Array.from(i.files).map((file) => ({
-      file,
-      src: URL.createObjectURL(file),
-      isImage: file.type.startsWith('image'),
-    }));
+      return Array.from(i.files).map((file) => ({
+        file,
+        src: URL.createObjectURL(file),
+        isImage: file.type.startsWith('image'),
+      }));
+    },
   })
   accessor fileEntries: FileEntry[] = [];
 }

package/src/lib/file-input/file-input.element.test.ts

@@ -0,0 +1,73 @@
+import './file-input.element.js';
+
+import { assert, fixture, html } from '@open-wc/testing';
+
+import type { USAFileInputElement } from './file-input.element.js';
+
+describe('usa-file-input', () => {
+  it('should be accessible', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html` <usa-file-input>Hello World</usa-file-input> `);
+
+    return assert.isAccessible(fileInput);
+  });
+
+  it('should submit files with the form', async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], 'first.txt'));
+    data.items.add(new File([], 'second.txt'));
+
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-file-input name="upload" .files=${data.files}>
+          Input accepts a single file
+
+          <div slot="description">Drag file here or <usa-link>choose from folder</usa-link></div>
+        </usa-file-input>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const formData = new FormData(form);
+
+    const fileNames = formData.getAll('upload').map((file) => {
+      if (file instanceof File) {
+        return file.name;
+      }
+
+      return '';
+    });
+
+    assert.deepEqual(fileNames, ['first.txt', 'second.txt']);
+  });
+
+  it('should show file preview after drag and drop', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input> Input accepts a single file </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector('input');
+
+    assert.isOk(nativeInput);
+
+    // Simulate drag and drop with a file
+    const data = new DataTransfer();
+    data.items.add(new File([], 'test.txt'));
+
+    const dropEvent = new DragEvent('drop', {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that filesVisible is true and files are set
+    assert.isTrue(fileInput.filesVisible);
+    assert.equal(fileInput.files?.length, 1);
+    assert.equal(fileInput.files?.[0].name, 'test.txt');
+  });
+});

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

@@ -82,25 +82,17 @@ declare global {
       </label>
 
       <div class="container">
-        <j-props>
-          <input
-            id="file-input"
-            type="file"
-            tabindex="0"
-            $.name="name"
-            $.multiple="multiple"
-            $.accept="accept"
-            $.required="required"
-          />
-        </j-props>
+        <j-bind props="name,multiple,accept,required">
+          <input id="file-input" type="file" tabindex="0" />
+        </j-bind>
 
         <j-if bind="filesVisible">
           <template>
-            <j-props>
-              <usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">
+            <j-bind props="files">
+              <usa-file-input-preview part="preview" exportparts="heading, item">
                 Selected file&nbsp;<usa-link>Change file</usa-link>
               </usa-file-input-preview>
-            </j-props>
+            </j-bind>
           </template>
 
           <template else>
@@ -135,18 +127,16 @@ export class USAFileInputElement extends HTMLElement {
   @bind()
   accessor files: FileList | null = null;
 
-  @bind((i) => !!i.files?.length)
+  @bind({
+    compute: (i) => !!i.files?.length,
+  })
   accessor filesVisible = false;
 
   #internals = this.attachInternals();
   #input = query('input');
 
   connectedCallback() {
-    const input = this.#input();
-
-    if (input.validationMessage) {
-      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
-    }
+    this.syncFormValues();
   }
 
   @effect()

package/src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts

@@ -1,26 +1,29 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import '@joist/templating/define.js';
+
+import { attr, css, element, html, listen } from '@joist/element';
+import { bind } from '@joist/templating';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-in-page-nav-item": USAInPageNavItemElement;
+    'usa-in-page-nav-item': USAInPageNavItemElement;
   }
 }
 
 @element({
-  tagName: "usa-in-page-nav-item",
+  tagName: 'usa-in-page-nav-item',
   shadowDom: [
     css`
       :host {
-        border-left: solid .25rem transparent;
+        border-left: solid 0.25rem transparent;
         display: flex;
-        font-size: .93rem;
+        font-size: 0.93rem;
         line-height: 1.1;
         position: relative;
       }
 
       a {
         color: #005ea2;
-        padding: .5rem 1rem;
+        padding: 0.5rem 1rem;
         text-decoration: none;
       }
 
@@ -42,21 +45,24 @@ declare global {
       }
     `,
     html`
-      <a>
-        <slot></slot>
-      </a>
+      <j-bind props="href:target">
+        <a>
+          <slot></slot>
+        </a>
+      </j-bind>
     `,
   ],
 })
 export class USAInPageNavItemElement extends HTMLElement {
   @attr()
-  accessor role = "listitem";
+  accessor role = 'listitem';
 
   @attr()
   accessor primary = false;
 
   @attr()
-  accessor target = "";
+  @bind()
+  accessor target = '';
 
   @attr()
   accessor active = false;
@@ -65,20 +71,14 @@ export class USAInPageNavItemElement extends HTMLElement {
     return document.getElementById(this.target);
   }
 
-  #a = query("a");
-
-  attributeChangedCallback() {
-    this.#a({ href: `#${this.target}` });
-  }
-
-  @listen("click")
+  @listen('click')
   async onClick(e: Event) {
     e.preventDefault();
 
     if (this.targetElement) {
-      this.targetElement.scrollIntoView({ behavior: "smooth" });
+      this.targetElement.scrollIntoView({ behavior: 'smooth' });
     }
 
-    history.pushState(null, "", `#${this.target}`);
+    history.pushState(null, '', `#${this.target}`);
   }
 }

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

@@ -1,38 +1,35 @@
-import "./in-page-nav.element.js";
-import "./in-page-nav-item/in-page-nav-item.element.js";
+import './in-page-nav.element.js';
+import './in-page-nav-item/in-page-nav-item.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import type { USAInPageNavElement } from "./in-page-nav.element.js";
+import type { USAInPageNavElement } from './in-page-nav.element.js';
 
-describe("usa-in-page-nav", () => {
-  it("should be accessible", async () => {
+describe('usa-in-page-nav', () => {
+  it('should be accessible', async () => {
     const inPageNav = await fixture<USAInPageNavElement>(html`
       <usa-in-page-nav>
-        <usa-in-page-nav-item target="lorem-ipsum-dolor" primary>
-          Lorem ipsum dolor
-        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="lorem-ipsum-dolor" primary>Lorem ipsum dolor</usa-in-page-nav-item>
+
         <usa-in-page-nav-item target="consectetuer-adipiscing-elit" primary>
           Consectetuer adipiscing elit
         </usa-in-page-nav-item>
-        <usa-in-page-nav-item target="nullam-sit-amet-enim">
-          Nullam sit amet enim
-        </usa-in-page-nav-item>
+
+        <usa-in-page-nav-item target="nullam-sit-amet-enim">Nullam sit amet enim</usa-in-page-nav-item>
+
         <usa-in-page-nav-item target="vivamus-pharetra-posuere-sapien">
           Vivamus pharetra posuere sapien
         </usa-in-page-nav-item>
-        <usa-in-page-nav-item target="suspendisse-id-velit">
-          Suspendisse id velit
-        </usa-in-page-nav-item>
-        <usa-in-page-nav-item target="orci-magna-rhoncus-neque">
-          Orci magna rhoncus neque
-        </usa-in-page-nav-item>
+
+        <usa-in-page-nav-item target="suspendisse-id-velit">Suspendisse id velit</usa-in-page-nav-item>
+
+        <usa-in-page-nav-item target="orci-magna-rhoncus-neque">Orci magna rhoncus neque</usa-in-page-nav-item>
+
         <usa-in-page-nav-item target="aliquam-erat-volutpat-velit-vitae-ligula-volutpat" primary>
           Aliquam erat volutpat: velit vitae ligula volutpat
         </usa-in-page-nav-item>
-        <usa-in-page-nav-item target="vitae-ligula">
-          Vitae ligula
-        </usa-in-page-nav-item>
+
+        <usa-in-page-nav-item target="vitae-ligula">Vitae ligula</usa-in-page-nav-item>
       </usa-in-page-nav>
     `);
 

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

@@ -2,6 +2,7 @@ import './input.element.js';
 
 import { assert, fixture, html } from '@open-wc/testing';
 import { userEvent } from '@testing-library/user-event';
+import { USATextInputElement } from './input.element.js';
 
 describe('usa-input', () => {
   it('should be accessible', async () => {
@@ -24,6 +25,16 @@ describe('usa-input', () => {
     assert.equal(value.get('fname'), 'Foo');
   });
 
+  it('should display default attribute value', async () => {
+    const input = await fixture<USATextInputElement>(html`
+      <usa-input name="fname" value="Foo">Hello World</usa-input>
+    `);
+
+    const nativeInput = input.shadowRoot?.querySelector('input');
+
+    assert.equal(nativeInput?.value, 'Foo');
+  });
+
   it('should update form value as input value changed', async () => {
     const form = await fixture<HTMLFormElement>(html`
       <form>

package/src/lib/input/input.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';
 
 import type { MaskableElement } from '../input-mask/maskable.element.js';
 
@@ -89,7 +92,26 @@ declare global {
 
         <slot></slot>
 
-        <input tabindex="0" part="input" />
+        <j-bind
+          props="
+            autocomplete,
+            autofocus,
+            placeholder,
+            name,
+            type,
+            required,
+            min,
+            max,
+            minLength,
+            maxLength,
+            disabled,
+            value,
+            selectionStart,
+            selectionEnd
+          "
+        >
+          <input tabindex="0" part="input" />
+        </j-bind>
       </label>
     `,
   ],
@@ -98,94 +120,84 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
   static formAssociated = true;
 
   @attr()
+  @bind()
   accessor name = '';
 
   @attr()
+  @bind()
   accessor autocomplete: AutoFill = 'on';
 
   @attr()
+  @bind()
   accessor placeholder = '';
 
   @attr()
+  @bind()
   accessor min = '';
 
   @attr()
+  @bind()
   accessor max = '';
 
   @attr()
-  accessor minLength = -1;
+  @bind()
+  accessor minLength = 0;
 
   @attr()
-  accessor maxLength = -1;
+  @bind()
+  accessor maxLength = 524_288;
 
   @attr()
+  @bind()
   accessor required = false;
 
   @attr()
+  @bind()
   accessor disabled = false;
 
   @attr()
+  @bind()
   accessor type: 'text' | 'password' | 'number' = 'text';
 
+  @attr()
+  @bind()
+  accessor autofocus = false;
+
   @attr()
   accessor detail: 'pfx' | 'sfx' | '' = '';
 
   @attr({
     reflect: false,
   })
-  @observe()
+  @bind()
   accessor value = '';
 
-  @observe()
+  @bind({
+    alwaysUpdate: true,
+  })
   accessor selectionStart: number | null = null;
 
-  @observe()
+  @bind({
+    alwaysUpdate: true,
+  })
   accessor selectionEnd: number | null = null;
 
-  get validationMessage() {
-    return this.#input().validationMessage;
-  }
-
   #internals = this.attachInternals();
   #input = query('input');
 
-  @ready()
-  onReady() {
-    this.#input({ autofocus: this.autofocus });
-  }
-
-  attributeChangedCallback() {
-    this.#input({
-      autocomplete: this.autocomplete,
-      placeholder: this.placeholder,
-      name: this.name,
-      type: this.type,
-      required: this.required,
-      min: this.min,
-      max: this.max,
-      minLength: this.minLength,
-      maxLength: this.maxLength,
-      disabled: this.disabled,
-    });
-  }
-
   connectedCallback() {
     this.#syncFormState();
   }
 
-  focus(options?: FocusOptions): void {
-    this.#input().focus(options);
-  }
-
   @effect()
   onChange() {
-    const { value, selectionStart, selectionEnd } = this;
-
-    this.#input({ value, selectionStart, selectionEnd });
-
     this.#syncFormState();
   }
 
+  focus(options?: FocusOptions): void {
+    this.#input().focus(options);
+  }
+
   @listen('keydown')
   onKeyDown(e: KeyboardEvent) {
     const form = this.#internals.form;
@@ -205,12 +217,16 @@ export class USATextInputElement extends HTMLElement implements MaskableElement
   }
 
   @listen('input')
-  onInputChange() {
+  onInputChange(e: Event) {
+    e.stopPropagation();
+
     const input = this.#input();
 
     this.value = input.value;
     this.selectionStart = input.selectionStart;
     this.selectionEnd = input.selectionEnd;
+
+    this.dispatchEvent(new Event('input', { bubbles: true }));
   }
 
   #syncFormState() {

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

@@ -37,7 +37,7 @@ export class USAInputMaskElement extends HTMLElement {
   }
 
   @listen('input')
-  onInput(e: Event) {
+  async onInput(e: Event) {
     const input = e.target as MaskableElement;
     const selectionStart = input.selectionStart || 0;
     const prev = input.value;

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

@@ -13,6 +13,8 @@ const meta = {
         <usa-input name="phone" placeholder=${args.mask} autocomplete="off" mask=${args.mask} value="1234567890">
           Phone:
         </usa-input>
+
+        <input type="text" placeholder=${args.mask} autocomplete="off" mask=${args.mask} value="1234567890" />
       </usa-input-mask>
     `;
   },