@noctuatech/uswds 1.5.4 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -132,7 +132,7 @@
     "plop": "^4.0.1",
     "prettier": "^3.5.3",
     "storybook": "^10.2.1",
-    "typescript": "^5.8.0",
+    "typescript": "^6.0.0",
     "wireit": "^0.14.9"
   },
   "lint-staged": {

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

@@ -1,6 +1,6 @@
 import './accordion.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 import { screen } from '@testing-library/dom';
 import { userEvent } from '@testing-library/user-event';
 
@@ -8,7 +8,7 @@ import type { USAAccordionElement } from './accordion.element.js';
 
 describe('usa-accordion', () => {
   it('should be accessible', async () => {
-    const accordion = await fixture<USAAccordionElement>(html`
+    const accordion = fixtureSync<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
@@ -24,7 +24,7 @@ describe('usa-accordion', () => {
   });
 
   it('should toggle the open state when clicked', async () => {
-    const accordion = await fixture<USAAccordionElement>(html`
+    const accordion = fixtureSync<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
@@ -45,7 +45,7 @@ describe('usa-accordion', () => {
   });
 
   it('should toggle the open state when clicked', async () => {
-    const accordion = await fixture<USAAccordionElement>(html`
+    const accordion = fixtureSync<USAAccordionElement>(html`
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>
 
@@ -68,7 +68,7 @@ describe('usa-accordion', () => {
   });
 
   it('should only allow a single accordion in a group to be open', async () => {
-    const el = await fixture(html`
+    const el = fixtureSync(html`
       <section>
         <usa-accordion name="ammendment">
           <h4 slot="heading">First Ammendment</h4>
@@ -90,21 +90,21 @@ describe('usa-accordion', () => {
     const headings = el.querySelectorAll('h4');
     const content = Array.from(el.querySelectorAll<HTMLDivElement>('.content'));
 
-    await userEvent.click(headings[0]);
+    await userEvent.click(headings[0]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [true, false, false],
     );
 
-    await userEvent.click(headings[1]);
+    await userEvent.click(headings[1]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [false, true, false],
     );
 
-    await userEvent.click(headings[2]);
+    await userEvent.click(headings[2]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
@@ -113,7 +113,7 @@ describe('usa-accordion', () => {
   });
 
   it('should not close accordion not in the same group', async () => {
-    const el = await fixture(html`
+    const el = fixtureSync(html`
       <section>
         <usa-accordion name="ammendment">
           <h4 slot="heading">First Ammendment</h4>
@@ -135,21 +135,21 @@ describe('usa-accordion', () => {
     const headings = el.querySelectorAll('h4');
     const content = Array.from(el.querySelectorAll<HTMLDivElement>('.content'));
 
-    await userEvent.click(headings[0]);
+    await userEvent.click(headings[0]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [true, false, false],
     );
 
-    await userEvent.click(headings[1]);
+    await userEvent.click(headings[1]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),
       [false, true, false],
     );
 
-    await userEvent.click(headings[2]);
+    await userEvent.click(headings[2]!);
 
     assert.deepEqual(
       content.map((el) => el.checkVisibility()),

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

@@ -1,13 +1,13 @@
 import './alert.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 
 import { USA_ALERT_TYPES } from './alert-types.js';
 
 describe('usa-alert', () => {
   for (const alert of USA_ALERT_TYPES) {
     it(`should be accessible: ${alert}`, async () => {
-      const form = await fixture(html`
+      const form = fixtureSync(html`
         <usa-alert type=${alert}>
           <h3 slot="heading">Status</h3>
 

package/src/lib/alert/alert.element.ts

@@ -3,7 +3,7 @@ import { observe } from '@joist/observable';
 import { bind } from '@joist/templating';
 
 import { type USAAlertType, USA_ALERT_CONFIG } from './alert-types.js';
-import { USAIcon } from '../icon/icon-types.js';
+import { type USAIcon } from '../icon/icon-types.js';
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,13 +1,13 @@
 import './breadcrumbs.element.js';
 import './breadcrumb/breadcrumb.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 
 import type { USABreadcrumbsElement } from './breadcrumbs.element.js';
 
 describe('usa-breadcrumbs', () => {
   it('should be accessible', async () => {
-    const breadcrumbs = await fixture<USABreadcrumbsElement>(html`
+    const breadcrumbs = fixtureSync<USABreadcrumbsElement>(html`
       <usa-breadcrumbs>
         <usa-breadcrumb href="/">Home</usa-breadcrumb>
         <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>

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

@@ -1,13 +1,13 @@
 import './button.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 
 import { BUTTON_VARIANTS, type USAButtonElement } from './button.element.js';
 
 describe('usa-button', () => {
   for (const variant of BUTTON_VARIANTS) {
     it('should be accessible', async () => {
-      const button = await fixture<USAButtonElement>(html` <usa-button variant=${variant}>Hello World</usa-button> `);
+      const button = fixtureSync<USAButtonElement>(html` <usa-button variant=${variant}>Hello World</usa-button> `);
 
       return assert.isAccessible(button);
     });

package/src/lib/button-group/button-group.element.test.ts

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

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

@@ -5,13 +5,13 @@ import './card-group/card-group.element.js';
 import './card-header/card-header.element.js';
 import './card-media/card-media.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 
 import type { USACardElement } from './card.element.js';
 
 describe('usa-card', () => {
   it('should be accessible', async () => {
-    const card = await fixture<USACardElement>(html`
+    const card = fixtureSync<USACardElement>(html`
       <usa-card-group>
         <usa-card>
           <usa-card-media>

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

@@ -1,10 +1,10 @@
 import './checkbox.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 
 describe('usa-checkbox', () => {
   it('should be accessible', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>
     `);
 
@@ -12,7 +12,7 @@ describe('usa-checkbox', () => {
   });
 
   it('should submit form with default values', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-checkbox name="enabled" value="test" checked> Hello World </usa-checkbox>
 
@@ -20,13 +20,15 @@ describe('usa-checkbox', () => {
       </form>
     `);
 
+    await Promise.resolve();
+
     const value = new FormData(form);
 
     assert.equal(value.get('enabled'), 'test');
   });
 
   it('should update form value as input value changed', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-checkbox name="enabled" value="test">Hello World</usa-checkbox>
 
@@ -49,7 +51,7 @@ describe('usa-checkbox', () => {
   });
 
   it('should not submit when not valid', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-checkbox name="enabled" value="test" required> Hello World </usa-checkbox>
 
@@ -57,6 +59,9 @@ describe('usa-checkbox', () => {
       </form>
     `);
 
+    await Promise.resolve();
+    await Promise.resolve();
+
     assert.equal(form.checkValidity(), false);
   });
 });

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

@@ -1,12 +1,12 @@
 import './collection-item.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, 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`
+    const collectionItem = fixtureSync<USACollectionItemElement>(html`
       <usa-collection-item>Hello World</usa-collection-item>
     `);
 

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

@@ -1,12 +1,12 @@
 import './collection.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, 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> `);
+    const collection = fixtureSync<USACollectionElement>(html` <usa-collection>Hello World</usa-collection> `);
 
     return assert.isAccessible(collection);
   });

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

@@ -2,7 +2,7 @@ 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, fixtureSync, html } from '@open-wc/testing';
 
 import type { USAComboBoxElement } from './combo-box.element.js';
 
@@ -11,7 +11,7 @@ describe('usa-combo-box', () => {
   let input: HTMLInputElement;
 
   beforeEach(async () => {
-    autocomplete = await fixture<USAComboBoxElement>(html`
+    autocomplete = fixtureSync<USAComboBoxElement>(html`
       <usa-combo-box name="search" placeholder="Select a fruit">
         <span slot="label">Fruits</span>
 
@@ -32,8 +32,8 @@ describe('usa-combo-box', () => {
     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 () => {
@@ -50,8 +50,8 @@ describe('usa-combo-box', () => {
 
     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 () => {
@@ -113,7 +113,7 @@ describe('usa-combo-box', () => {
   });
 
   it('should submit form with default values', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" value="Apple" placeholder="Select a fruit">
           <span slot="label">Fruits</span>
@@ -133,7 +133,7 @@ describe('usa-combo-box', () => {
   });
 
   it('should update form value when an option is selected', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" placeholder="Select a fruit">
           <span slot="label">Fruits</span>
@@ -167,17 +167,17 @@ describe('usa-combo-box', () => {
     // Select the first suggestion
     const suggestions = comboBox.listItems();
 
-    suggestions[0]
+    suggestions[0]!
       .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');
   });
 
   it('should not submit when required and no value is selected', async () => {
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-combo-box name="search" required placeholder="Select a fruit">
           <span slot="label">Fruits</span>
@@ -196,7 +196,7 @@ describe('usa-combo-box', () => {
   });
 
   it('should not show suggestions when disabled', async () => {
-    const disabledComboBox = await fixture<USAComboBoxElement>(html`
+    const disabledComboBox = fixtureSync<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

@@ -1,12 +1,12 @@
 import './config.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, 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> `);
+    const config = fixtureSync<USAConfigElement>(html` <usa-config>Hello World</usa-config> `);
 
     return assert.isAccessible(config);
   });

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

@@ -1,12 +1,12 @@
 import './description.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, 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> `);
+    const description = fixtureSync<USADescriptionElement>(html` <usa-description>Hello World</usa-description> `);
 
     return assert.isAccessible(description);
   });

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

@@ -1,13 +1,13 @@
 import './file-input-preview.element.js';
 import '../../link/link.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, 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`
+    const fileInputPreview = fixtureSync<USAFileInputPreviewElement>(html`
       <usa-file-input-preview> Selected file <usa-link>Change file</usa-link> </usa-file-input-preview>
     `);
 
@@ -19,7 +19,7 @@ describe('usa-file-input-preview', () => {
     data.items.add(new File([], 'image1.jpg'));
     data.items.add(new File([], 'image2.jpg'));
 
-    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+    const fileInputPreview = fixtureSync<USAFileInputPreviewElement>(html`
       <usa-file-input-preview .files=${data.files}>
         Selected file <usa-link>Change file</usa-link>
       </usa-file-input-preview>
@@ -33,12 +33,14 @@ describe('usa-file-input-preview', () => {
     data.items.add(new File([], 'image1.jpg'));
     data.items.add(new File([], 'image2.jpg'));
 
-    const { shadowRoot } = await fixture<USAFileInputPreviewElement>(html`
+    const { shadowRoot } = fixtureSync<USAFileInputPreviewElement>(html`
       <usa-file-input-preview .files=${data.files}>
         Selected file <usa-link>Change file</usa-link>
       </usa-file-input-preview>
     `);
 
+    await Promise.resolve();
+
     const previewItems = Array.from(shadowRoot?.querySelectorAll('.preview-item') ?? []).map((item) =>
       item.textContent?.trim(),
     );
@@ -51,7 +53,7 @@ describe('usa-file-input-preview', () => {
     data.items.add(new File([], 'image1.jpg'));
     data.items.add(new File([], 'image2.jpg'));
 
-    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+    const fileInputPreview = fixtureSync<USAFileInputPreviewElement>(html`
       <usa-file-input-preview .files=${data.files}>
         Selected file <usa-link>Change file</usa-link>
       </usa-file-input-preview>
@@ -77,12 +79,14 @@ describe('usa-file-input-preview', () => {
     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`
+    const { shadowRoot } = fixtureSync<USAFileInputPreviewElement>(html`
       <usa-file-input-preview .files=${data.files}>
         Selected file <usa-link>Change file</usa-link>
       </usa-file-input-preview>
     `);
 
+    await Promise.resolve();
+
     const [first, second] = Array.from(shadowRoot?.querySelectorAll<HTMLImageElement>('.preview-item img') ?? []).map(
       (item) => item.src.substring(29),
     );

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

@@ -1,6 +1,6 @@
 import './file-input.element.js';
 
-import { assert, fixture, html } from '@open-wc/testing';
+import { assert, fixtureSync, html } from '@open-wc/testing';
 import { DOMInjector } from '@joist/di';
 
 import type { USAFileInputElement } from './file-input.element.js';
@@ -8,7 +8,7 @@ import { HttpService } from '../services/http.service.js';
 
 describe('usa-file-input', () => {
   it('should be accessible', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html` <usa-file-input>Hello World</usa-file-input> `);
+    const fileInput = fixtureSync<USAFileInputElement>(html` <usa-file-input>Hello World</usa-file-input> `);
 
     return assert.isAccessible(fileInput);
   });
@@ -18,7 +18,7 @@ describe('usa-file-input', () => {
     data.items.add(new File([], 'first.txt'));
     data.items.add(new File([], 'second.txt'));
 
-    const form = await fixture<HTMLFormElement>(html`
+    const form = fixtureSync<HTMLFormElement>(html`
       <form>
         <usa-file-input name="upload" .files=${data.files}>
           Input accepts a single file
@@ -44,7 +44,7 @@ describe('usa-file-input', () => {
   });
 
   it('should show file preview after drag and drop', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input> Input accepts a single file </usa-file-input>
     `);
 
@@ -69,11 +69,11 @@ describe('usa-file-input', () => {
 
     // Verify that filesVisible is true and files are set
     assert.equal(fileInput.files?.length, 1);
-    assert.equal(fileInput.files?.[0].name, 'test.txt');
+    assert.equal(fileInput.files?.[0]!.name, 'test.txt');
   });
 
   it('should fire input event when a file is dragged and dropped', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input> Input accepts a single file </usa-file-input>
     `);
 
@@ -107,7 +107,7 @@ describe('usa-file-input', () => {
   });
 
   it('should filter dropped files based on accept MIME type', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input accept="image/*"> Input accepts only images </usa-file-input>
     `);
 
@@ -134,12 +134,12 @@ describe('usa-file-input', () => {
 
     // Verify that only image files were accepted
     assert.equal(fileInput.files?.length, 2);
-    assert.equal(fileInput.files?.[0].name, 'image.png');
-    assert.equal(fileInput.files?.[1].name, 'photo.jpg');
+    assert.equal(fileInput.files?.[0]!.name, 'image.png');
+    assert.equal(fileInput.files?.[1]!.name, 'photo.jpg');
   });
 
   it('should filter dropped files based on accept file extension', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input accept=".txt,.pdf"> Input accepts text and PDF files </usa-file-input>
     `);
 
@@ -166,12 +166,12 @@ describe('usa-file-input', () => {
 
     // Verify that only .txt and .pdf files were accepted
     assert.equal(fileInput.files?.length, 2);
-    assert.equal(fileInput.files?.[0].name, 'document.txt');
-    assert.equal(fileInput.files?.[1].name, 'report.pdf');
+    assert.equal(fileInput.files?.[0]!.name, 'document.txt');
+    assert.equal(fileInput.files?.[1]!.name, 'report.pdf');
   });
 
   it('should accept all dropped files when accept property is not set', async () => {
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input> Input accepts all files </usa-file-input>
     `);
 
@@ -204,7 +204,7 @@ describe('usa-file-input', () => {
     const initialData = new DataTransfer();
     initialData.items.add(new File([], 'existing.txt'));
 
-    const fileInput = await fixture<USAFileInputElement>(html`
+    const fileInput = fixtureSync<USAFileInputElement>(html`
       <usa-file-input .files=${initialData.files}> Input accepts files </usa-file-input>
     `);
 
@@ -214,7 +214,7 @@ describe('usa-file-input', () => {
 
     // Verify initial files are set
     assert.equal(fileInput.files?.length, 1);
-    assert.equal(fileInput.files?.[0].name, 'existing.txt');
+    assert.equal(fileInput.files?.[0]!.name, 'existing.txt');
 
     // Trigger input event with 0 files
     nativeInput.files = new DataTransfer().files;
@@ -231,7 +231,7 @@ describe('usa-file-input', () => {
 
     // Verify that existing files were not cleared
     assert.equal(fileInput.files?.length, 1);
-    assert.equal(fileInput.files?.[0].name, 'existing.txt');
+    assert.equal(fileInput.files?.[0]!.name, 'existing.txt');
   });
 
   it('should load file from url and set files', async () => {
@@ -257,7 +257,7 @@ describe('usa-file-input', () => {
 
     root.attach(document.body);
 
-    const fileInput = await fixture<USAFileInputElement>(html`<usa-file-input></usa-file-input>`);
+    const fileInput = fixtureSync<USAFileInputElement>(html`<usa-file-input></usa-file-input>`);
 
     fileInput.url = 'https://example.com/path/to/test-file.txt';
 
@@ -266,8 +266,8 @@ describe('usa-file-input', () => {
         'input',
         () => {
           assert.equal(fileInput.files?.length, 1);
-          assert.equal(fileInput.files?.[0].name, 'test-file.txt');
-          assert.equal(fileInput.files?.[0].type, 'text/plain');
+          assert.equal(fileInput.files?.[0]!.name, 'test-file.txt');
+          assert.equal(fileInput.files?.[0]!.type, 'text/plain');
 
           root.detach();
 

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

@@ -2,7 +2,7 @@ import '../templating.js';
 
 import { inject, injectable } from '@joist/di';
 import { attr, css, element, html, listen, query } from '@joist/element';
-import { Changes, effect } from '@joist/observable';
+import { type Changes, effect } from '@joist/observable';
 import { bind } from '@joist/templating';
 
 import { HttpService } from '../services/http.service.js';
@@ -123,7 +123,7 @@ declare global {
           <template>
             <usa-bind props="files">
               <usa-file-input-preview part="preview" exportparts="heading, item">
-                Selected file <span class="link">Change file</span>
+                Selected file <span class="link" part="change-file-btn">Change file</span>
               </usa-file-input-preview>
             </usa-bind>
           </template>
@@ -313,7 +313,7 @@ export class USAFileInputElement extends HTMLElement {
 
     this.files = dataTransfer.files;
 
-    this.dispatchEvent(new Event('input'));
+    this.dispatchEvent(new Event('input', { bubbles: true }));
 
     return void 0;
   }