@noctuatech/uswds 1.3.7 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -103,10 +103,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.2.4-next.2",
-    "@joist/element": "^4.2.4-next.2",
-    "@joist/observable": "^4.2.4-next.2",
-    "@joist/templating": "^4.2.4-next.2",
+    "@joist/di": "^4.2.4-next.5",
+    "@joist/element": "^4.2.4-next.5",
+    "@joist/observable": "^4.2.4-next.5",
+    "@joist/templating": "^4.2.4-next.5",
     "tslib": "2.8.1"
   },
   "devDependencies": {

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

@@ -1,9 +1,9 @@
-import { attr, css, element, html, query } from '@joist/element';
+import { attr, css, element, html } from '@joist/element';
+import { observe } from '@joist/observable';
+import { bind } from '@joist/templating';
 
 import { type USAAlertType, USA_ALERT_CONFIG } from './alert-types.js';
-import { bind } from '@joist/templating';
 import { USAIcon } from '../icon/icon-types.js';
-import { observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -84,6 +84,7 @@ declare global {
           <slot id="heading" name="heading"></slot>
         </div>
 
+        <!-- this makes the heading and content are aligned properly -->
         <div class="spacer"></div>
 
         <div>

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

@@ -66,7 +66,6 @@ describe('usa-file-input', () => {
     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

@@ -86,7 +86,7 @@ declare global {
           <input id="file-input" type="file" tabindex="0" />
         </j-bind>
 
-        <j-if bind="filesVisible">
+        <j-if bind="files.length">
           <template>
             <j-bind props="files">
               <usa-file-input-preview part="preview" exportparts="heading, item">
@@ -95,7 +95,7 @@ declare global {
             </j-bind>
           </template>
 
-          <template else>
+          <template id="test" else>
             <div class="box" part="input">
               <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
             </div>
@@ -114,7 +114,7 @@ export class USAFileInputElement extends HTMLElement {
 
   @attr()
   @bind()
-  accessor multiple = true;
+  accessor multiple = false;
 
   @attr()
   @bind()
@@ -127,11 +127,6 @@ export class USAFileInputElement extends HTMLElement {
   @bind()
   accessor files: FileList | null = null;
 
-  @bind({
-    compute: (i) => !!i.files?.length,
-  })
-  accessor filesVisible = false;
-
   #internals = this.attachInternals();
   #input = query('input');
 
@@ -160,13 +155,15 @@ export class USAFileInputElement extends HTMLElement {
     }
   }
 
-  @listen('change')
-  onInputChange() {
+  @listen('input')
+  onInputChange(e: Event) {
+    e.stopPropagation();
+
     const input = this.#input();
 
     this.files = input.files;
 
-    this.dispatchEvent(new Event('change'));
+    this.dispatchEvent(new Event('input', { bubbles: true }));
   }
 
   @listen('dragenter')

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

@@ -1,19 +1,31 @@
-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 { USAFileInputElement } from "./file-input.element.js";
+import type { USAFileInputElement } from './file-input.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-file-input",
-  tags: ["autodocs"],
+  title: 'usa-file-input',
+  tags: ['autodocs'],
+
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAFileInputElement>;
+
+export default meta;
+
+type Story = StoryObj<USAFileInputElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Single: Story = {
+  args: {},
   render() {
     function onSubmit(e: Event) {
       e.preventDefault();
 
       const data = new FormData(e.target as HTMLFormElement);
 
-      console.log(data.getAll("upload"));
+      console.log(data.getAll('upload'));
     }
 
     return html`
@@ -21,24 +33,36 @@ const meta = {
         <usa-file-input name="upload" required>
           Input accepts a single file
 
-          <div slot="description">
-            Drag file here or <usa-link>choose from folder</usa-link>
-          </div>
+          <div slot="description">Drag file here or <usa-link>choose from folder</usa-link></div>
         </usa-file-input>
 
         <usa-button type="submit">SUBMIT</usa-button>
       </form>
     `;
   },
-  argTypes: {},
+};
+
+export const Multiple: Story = {
   args: {},
-} satisfies Meta<USAFileInputElement>;
+  render() {
+    function onSubmit(e: Event) {
+      e.preventDefault();
 
-export default meta;
+      const data = new FormData(e.target as HTMLFormElement);
 
-type Story = StoryObj<USAFileInputElement>;
+      console.log(data.getAll('upload'));
+    }
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {},
+    return html`
+      <form @submit=${onSubmit}>
+        <usa-file-input name="upload" required multiple>
+          Input accepts multiple files
+
+          <div slot="description">Drag file here or <usa-link>choose from folder</usa-link></div>
+        </usa-file-input>
+
+        <usa-button type="submit">SUBMIT</usa-button>
+      </form>
+    `;
+  },
 };

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

@@ -116,8 +116,12 @@ export class USATextareaElement extends HTMLElement {
   }
 
   @listen('input')
-  onInputChange() {
+  onInputChange(e: Event) {
+    e.stopPropagation();
+
     this.value = this.#input().value;
+
+    this.dispatchEvent(new Event('input', { bubbles: true }));
   }
 
   #syncFormState() {

package/src/lib/textarea/textarea.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 { USATextareaElement } from "./textarea.element.js";
+import type { USATextareaElement } from './textarea.element.js';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-  title: "usa-textarea",
-  tags: ["autodocs"],
+  title: 'usa-textarea',
+  tags: ['autodocs'],
   render(args) {
     return html`<usa-textarea>Hello World</usa-textarea>`;
   },

package/target/lib/alert/alert.element.js

@@ -1,8 +1,8 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { attr, css, element, html } from '@joist/element';
-import { USA_ALERT_CONFIG } from './alert-types.js';
-import { bind } from '@joist/templating';
 import { observe } from '@joist/observable';
+import { bind } from '@joist/templating';
+import { USA_ALERT_CONFIG } from './alert-types.js';
 let USAAlertElement = (() => {
     let _classDecorators = [element({
             tagName: 'usa-alert',

package/target/lib/alert/alert.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA0F/B,eAAe;4BAlF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC;oBACJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;iBAC9C,CAAC;YAJF,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAKrC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YARlC,6KASC;;;YATY,uDAAe;;QAG1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAKrC,wHAAyB,MAAM,GAAC;QAAhC,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;;;;;;;;SARrB,eAAe"}
+{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IA4F1D,eAAe;4BAnF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC;oBACJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;iBAC9C,CAAC;YAJF,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAKrC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YARlC,6KASC;;;YATY,uDAAe;;QAG1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAKrC,wHAAyB,MAAM,GAAC;QAAhC,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;;;;;;;;SARrB,eAAe"}

package/target/lib/file-input/file-input.element.d.ts

@@ -12,10 +12,9 @@ export declare class USAFileInputElement extends HTMLElement {
     accessor accept: string;
     accessor required: boolean;
     accessor files: FileList | null;
-    accessor filesVisible: boolean;
     connectedCallback(): void;
     syncFormValues(): void;
-    onInputChange(): void;
+    onInputChange(e: Event): void;
     onDragEnter(): void;
     onDragLeave(): void;
     onDrop(e: DragEvent): void;

package/target/lib/file-input/file-input.element.js

@@ -8,7 +8,7 @@ let USAFileInputElement = (() => {
             tagName: 'usa-file-input',
             shadowDom: [
                 css `*{box-sizing:border-box}:host{display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}label{display:block}input{cursor:pointer;left:0;margin:0;max-width:none;position:absolute;text-indent:-999em;width:100%;z-index:1;bottom:0;top:0}input:focus{outline:.25rem solid #2491ff;outline-offset:0}label slot.label{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;margin-bottom:.5rem}:host(.dragenter) .box{border-color:#2491ff}.box{border:1px dashed #adadad;border-radius:0;display:flex;font-size:.93rem;position:relative;text-align:center;width:100%;height:5.2rem;align-items:center;justify-content:center}.container{position:relative}`,
-                html `<label for="file-input"><slot class="label"></slot></label><div class="container"><j-bind props="name,multiple,accept,required"><input id="file-input" type="file" tabindex="0"></j-bind><j-if bind="filesVisible"><template><j-bind props="files"><usa-file-input-preview part="preview" exportparts="heading, item">Selected file <usa-link>Change file</usa-link></usa-file-input-preview></j-bind></template><template else><div class="box" part="input"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div>`,
+                html `<label for="file-input"><slot class="label"></slot></label><div class="container"><j-bind props="name,multiple,accept,required"><input id="file-input" type="file" tabindex="0"></j-bind><j-if bind="files.length"><template><j-bind props="files"><usa-file-input-preview part="preview" exportparts="heading, item">Selected file <usa-link>Change file</usa-link></usa-file-input-preview></j-bind></template><template id="test" else><div class="box" part="input"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div>`,
             ],
         })];
     let _classDescriptor;
@@ -31,9 +31,6 @@ let USAFileInputElement = (() => {
     let _files_decorators;
     let _files_initializers = [];
     let _files_extraInitializers = [];
-    let _filesVisible_decorators;
-    let _filesVisible_initializers = [];
-    let _filesVisible_extraInitializers = [];
     let _syncFormValues_decorators;
     let _onInputChange_decorators;
     let _onDragEnter_decorators;
@@ -48,11 +45,8 @@ let USAFileInputElement = (() => {
             _accept_decorators = [attr(), bind()];
             _required_decorators = [attr(), bind()];
             _files_decorators = [bind()];
-            _filesVisible_decorators = [bind({
-                    compute: (i) => !!i.files?.length,
-                })];
             _syncFormValues_decorators = [effect()];
-            _onInputChange_decorators = [listen('change')];
+            _onInputChange_decorators = [listen('input')];
             _onDragEnter_decorators = [listen('dragenter')];
             _onDragLeave_decorators = [listen('dragleave')];
             _onDrop_decorators = [listen('drop')];
@@ -61,7 +55,6 @@ let USAFileInputElement = (() => {
             __esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
             __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
             __esDecorate(this, null, _files_decorators, { kind: "accessor", name: "files", static: false, private: false, access: { has: obj => "files" in obj, get: obj => obj.files, set: (obj, value) => { obj.files = value; } }, metadata: _metadata }, _files_initializers, _files_extraInitializers);
-            __esDecorate(this, null, _filesVisible_decorators, { kind: "accessor", name: "filesVisible", static: false, private: false, access: { has: obj => "filesVisible" in obj, get: obj => obj.filesVisible, set: (obj, value) => { obj.filesVisible = value; } }, metadata: _metadata }, _filesVisible_initializers, _filesVisible_extraInitializers);
             __esDecorate(this, null, _syncFormValues_decorators, { kind: "method", name: "syncFormValues", static: false, private: false, access: { has: obj => "syncFormValues" in obj, get: obj => obj.syncFormValues }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onDragEnter_decorators, { kind: "method", name: "onDragEnter", static: false, private: false, access: { has: obj => "onDragEnter" in obj, get: obj => obj.onDragEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -75,7 +68,7 @@ let USAFileInputElement = (() => {
         #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ''));
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
-        #multiple_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _multiple_initializers, true));
+        #multiple_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _multiple_initializers, false));
         get multiple() { return this.#multiple_accessor_storage; }
         set multiple(value) { this.#multiple_accessor_storage = value; }
         #accept_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _accept_initializers, ''));
@@ -87,10 +80,7 @@ let USAFileInputElement = (() => {
         #files_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _files_initializers, null));
         get files() { return this.#files_accessor_storage; }
         set files(value) { this.#files_accessor_storage = value; }
-        #filesVisible_accessor_storage = (__runInitializers(this, _files_extraInitializers), __runInitializers(this, _filesVisible_initializers, false));
-        get filesVisible() { return this.#filesVisible_accessor_storage; }
-        set filesVisible(value) { this.#filesVisible_accessor_storage = value; }
-        #internals = (__runInitializers(this, _filesVisible_extraInitializers), this.attachInternals());
+        #internals = (__runInitializers(this, _files_extraInitializers), this.attachInternals());
         #input = query('input');
         connectedCallback() {
             this.syncFormValues();
@@ -111,10 +101,11 @@ let USAFileInputElement = (() => {
                 this.#internals.setValidity({});
             }
         }
-        onInputChange() {
+        onInputChange(e) {
+            e.stopPropagation();
             const input = this.#input();
             this.files = input.files;
-            this.dispatchEvent(new Event('change'));
+            this.dispatchEvent(new Event('input', { bubbles: true }));
         }
         onDragEnter() {
             this.classList.add('dragenter');

package/target/lib/file-input/file-input.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}

package/target/lib/file-input/file-input.element.test.js

@@ -35,7 +35,6 @@ describe('usa-file-input', () => {
         // 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/target/lib/file-input/file-input.element.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;KAQpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;KAQpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/file-input/file-input.stories.d.ts

@@ -1,12 +1,12 @@
-import type { StoryObj } from "@storybook/web-components";
-import type { USAFileInputElement } from "./file-input.element.js";
+import type { StoryObj } from '@storybook/web-components';
+import type { USAFileInputElement } from './file-input.element.js';
 declare const meta: {
     title: string;
     tags: string[];
-    render(): import("lit-html").TemplateResult<1>;
     argTypes: {};
     args: {};
 };
 export default meta;
 type Story = StoryObj<USAFileInputElement>;
-export declare const Primary: Story;
+export declare const Single: Story;
+export declare const Multiple: Story;

package/target/lib/file-input/file-input.stories.js

@@ -1,22 +1,33 @@
-import { html } from "lit";
+import { html } from 'lit';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-    title: "usa-file-input",
-    tags: ["autodocs"],
+    title: 'usa-file-input',
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Single = {
+    args: {},
     render() {
         function onSubmit(e) {
             e.preventDefault();
             const data = new FormData(e.target);
-            console.log(data.getAll("upload"));
+            console.log(data.getAll('upload'));
         }
         return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required>Input accepts a single file<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
     },
-    argTypes: {},
-    args: {},
 };
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
+export const Multiple = {
     args: {},
+    render() {
+        function onSubmit(e) {
+            e.preventDefault();
+            const data = new FormData(e.target);
+            console.log(data.getAll('upload'));
+        }
+        return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required multiple="multiple">Input accepts multiple files<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
+    },
 };
 //# sourceMappingURL=file-input.stories.js.map

package/target/lib/file-input/file-input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;;;KAWzB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"file-input.stories.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE;IACR,MAAM;QACJ,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;KASzB,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE;IACR,MAAM;QACJ,SAAS,QAAQ,CAAC,CAAQ;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;YAEvD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,IAAI,CAAA;sBACO,QAAQ;;;;;;;;;KASzB,CAAC;IACJ,CAAC;CACF,CAAC"}

package/target/lib/textarea/textarea.element.d.ts

@@ -15,5 +15,5 @@ export declare class USATextareaElement extends HTMLElement {
     accessor value: string;
     connectedCallback(): void;
     onChange(): void;
-    onInputChange(): void;
+    onInputChange(e: Event): void;
 }

package/target/lib/textarea/textarea.element.js

@@ -89,8 +89,10 @@ let USATextareaElement = (() => {
         onChange() {
             this.#syncFormState();
         }
-        onInputChange() {
+        onInputChange(e) {
+            e.stopPropagation();
             this.value = this.#input().value;
+            this.dispatchEvent(new Event('input', { bubbles: true }));
         }
         #syncFormState() {
             const input = this.#input();

package/target/lib/textarea/textarea.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.element.js","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"textarea.element.js","sourceRoot":"","sources":["../../../src/lib/textarea/textarea.element.ts"],"names":[],"mappings":"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"}

package/target/lib/textarea/textarea.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj } from "@storybook/web-components";
-import type { USATextareaElement } from "./textarea.element.js";
+import type { StoryObj } from '@storybook/web-components';
+import type { USATextareaElement } from './textarea.element.js';
 declare const meta: {
     title: string;
     tags: string[];

package/target/lib/textarea/textarea.stories.js

@@ -1,8 +1,8 @@
-import { html } from "lit";
+import { html } from 'lit';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-    title: "usa-textarea",
-    tags: ["autodocs"],
+    title: 'usa-textarea',
+    tags: ['autodocs'],
     render(args) {
         return html `<usa-textarea>Hello World</usa-textarea>`;
     },