@noctuatech/uswds 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -73,6 +73,7 @@
     "@joist/di": "^4.2.3-next.7",
     "@joist/element": "^4.2.3-next.7",
     "@joist/observable": "^4.2.3-next.7",
+    "@joist/templating": "^4.2.3-next.7",
     "tslib": "2.8.1"
   },
   "devDependencies": {

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

@@ -1,5 +1,7 @@
-import { css, element, html, query } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import "@joist/templating/define.js";
+
+import { css, element, html } from "@joist/element";
+import { bind } from "@joist/templating";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -41,7 +43,7 @@ declare global {
 
       .preview-heading {
         align-items: center;
-        background: #d9e8f6;
+        background: var(--usa-input-bg-color);
         display: flex;
         pointer-events: none;
         position: relative;
@@ -54,7 +56,7 @@ declare global {
 
       .preview-item {
         align-items: center;
-        background: #d9e8f6;
+        background: var(--usa-input-bg-color);
         display: flex;
         padding: 0.5rem;
         width: 100%;
@@ -62,88 +64,53 @@ declare global {
       }
     `,
     html`
-      <template>
-        <div class="preview-item">
-          <img height="40" width="40" aria-hidden="true" style="display: none" />
-          <usa-icon icon="file_present" style="display: none"></usa-icon>
-        </div>
-      </template>
-
       <slot class="preview-heading"></slot>
+
+      <j-for bind="fileEntries" key="src">
+        <template>
+          <div class="preview-item">
+            <j-if bind="each.value.isImage">
+              <template>
+                <j-props>
+                  <img height="40" width="40" aria-hidden="true" $.src="each.value.src" />
+                </j-props>
+              </template>
+
+              <template else>
+                <usa-icon icon="file_present"></usa-icon>
+              </template>
+            </j-if>
+
+            <j-value bind="each.value.file.name"></j-value>
+          </div>
+        </template>
+      </j-for>
     `,
   ],
 })
 export class USAFileInputPreviewElement extends HTMLElement {
-  @observe()
-  accessor files: FileList | null = null;
+  @bind()
+  accessor fileEntries: FileEntry[] = [];
 
-  #items = new Map<string, Element>();
-  #template = query("template");
+  #files: FileList | null = null;
 
-  connectedCallback() {
-    this.onChange();
+  get files() {
+    return this.#files;
   }
 
-  get shadow() {
-    if (!this.shadowRoot) {
-      throw new Error("no shadow root");
-    }
+  set files(value: FileList | null) {
+    this.#files = value;
 
-    return this.shadowRoot;
+    this.fileEntries = Array.from(value ?? []).map((file) => ({
+      file,
+      src: URL.createObjectURL(file),
+      isImage: file.type.startsWith("image"),
+    }));
   }
+}
 
-  @effect()
-  onChange() {
-    const template = this.#template();
-
-    if (this.files?.length) {
-      this.hidden = false;
-
-      const names = new Set<string>();
-
-      for (const file of this.files) {
-        names.add(file.name);
-
-        if (!this.#items.has(file.name)) {
-          const clone = template.content.cloneNode(true) as DocumentFragment;
-
-          const item = clone.firstElementChild;
-
-          if (!item) {
-            throw new Error("SOMETHING HAS GONE VERY WRONG");
-          }
-
-          item.id = file.name;
-          item.append(document.createTextNode(file.name));
-
-          const img = item.querySelector("img");
-          const icon = item.querySelector("usa-icon");
-
-          if (!img || !icon) {
-            throw Error("Something went very wrong");
-          }
-
-          if (file.type.startsWith("image")) {
-            img.style.display = "block";
-            img.src = URL.createObjectURL(file);
-          } else {
-            icon.style.display = "block";
-          }
-
-          this.shadow.append(item);
-
-          this.#items.set(file.name, item);
-        }
-      }
-
-      for (const [name, item] of this.#items) {
-        if (!names.has(name)) {
-          item.remove();
-          this.#items.delete(name);
-        }
-      }
-    } else {
-      this.hidden = true;
-    }
-  }
+interface FileEntry {
+  file: File;
+  src: string;
+  isImage: boolean;
 }

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

@@ -1,5 +1,8 @@
+import "@joist/templating/define.js";
+
 import { attr, css, element, html, listen, query } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { effect } from "@joist/observable";
+import { bind } from "@joist/templating";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -16,6 +19,8 @@ declare global {
       }
 
       :host {
+        --usa-input-radius: 0;
+        
         display: block;
         max-width: 30rem;
         position: relative;
@@ -58,6 +63,7 @@ declare global {
 
       .box {
         border: 1px dashed #adadad;
+        border-radius: var(--usa-input-radius);
         display: flex;
         font-size: 0.93rem;
         position: relative;
@@ -79,15 +85,23 @@ declare global {
         <div class="container">
           <input type="file" tabindex="0"/>
 
-          <div class="box">
-            <slot name="description">
-              Drag file here or <usa-link>choose from folder</usa-link>
-            </slot>
-          </div>
-
-          <usa-file-input-preview>
-            Selected file <usa-link>Change file</usa-link>
-          </usa-file-input-preview>
+          <j-if bind="!filesVisible">
+            <template>
+              <div class="box">
+                <slot name="description">
+                  Drag file here or <usa-link>choose from folder</usa-link>
+                </slot>
+              </div>
+            </template>
+
+            <template else>
+              <j-props>
+                <usa-file-input-preview $.files="files">
+                  Selected file <usa-link>Change file</usa-link>
+                </usa-file-input-preview>
+              </j-props>
+            </template>
+          </j-if>
         </div>
       </label>
     `,
@@ -108,13 +122,14 @@ export class USAFileInputElement extends HTMLElement {
   @attr()
   accessor required = false;
 
-  @observe()
+  @bind()
   accessor files: FileList | null = null;
 
+  @bind()
+  accessor filesVisible = false;
+
   #internals = this.attachInternals();
   #input = query("input");
-  #box = query(".box");
-  #preview = query("usa-file-input-preview");
 
   attributeChangedCallback() {
     this.#input({
@@ -138,16 +153,11 @@ export class USAFileInputElement extends HTMLElement {
   }
 
   @effect()
-  onChange() {
+  syncFormValues() {
     const input = this.#input({ files: this.files });
-    this.#preview({ files: this.files });
-
-    const box = this.#box();
 
     const formData = new FormData();
 
-    box.style.display = this.files?.length ? "none" : "flex";
-
     if (this.files?.length) {
       for (const file of this.files) {
         formData.append(this.name, file);
@@ -172,6 +182,7 @@ export class USAFileInputElement extends HTMLElement {
     const input = this.#input();
 
     this.files = input.files;
+    this.filesVisible = !!input.files?.length;
 
     this.dispatchEvent(new Event("change"));
   }

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

@@ -1,3 +1,4 @@
+import "@joist/templating/define.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-file-input-preview": USAFileInputPreviewElement;
@@ -5,8 +6,13 @@ declare global {
 }
 export declare class USAFileInputPreviewElement extends HTMLElement {
     #private;
-    accessor files: FileList | null;
-    connectedCallback(): void;
-    get shadow(): ShadowRoot;
-    onChange(): void;
+    accessor fileEntries: FileEntry[];
+    get files(): FileList | null;
+    set files(value: FileList | null);
 }
+interface FileEntry {
+    file: File;
+    src: string;
+    isImage: boolean;
+}
+export {};

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

@@ -1,91 +1,47 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { css, element, html, query } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import "@joist/templating/define.js";
+import { css, element, html } from "@joist/element";
+import { bind } from "@joist/templating";
 let USAFileInputPreviewElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-file-input-preview",
             shadowDom: [
-                css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{align-items:center;background:#d9e8f6;display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left}.preview-item{align-items:center;background:#d9e8f6;display:flex;padding:.5rem;width:100%;margin-top:1px}`,
-                html `<template><div class="preview-item"><img height="40" width="40" aria-hidden="true" style="display:none"><usa-icon icon="file_present" style="display:none"></usa-icon></div></template><slot class="preview-heading"></slot>`,
+                css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{align-items:center;background:var(--usa-input-bg-color);display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left}.preview-item{align-items:center;background:var(--usa-input-bg-color);display:flex;padding:.5rem;width:100%;margin-top:1px}`,
+                html `<slot class="preview-heading"></slot><j-for bind="fileEntries" key="src"><template><div class="preview-item"><j-if bind="each.value.isImage"><template><j-props><img height="40" width="40" aria-hidden="true" $.src="each.value.src"></j-props></template><template else><usa-icon icon="file_present"></usa-icon></template></j-if><j-value bind="each.value.file.name"></j-value></div></template></j-for>`,
             ],
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
-    let _instanceExtraInitializers = [];
-    let _files_decorators;
-    let _files_initializers = [];
-    let _files_extraInitializers = [];
-    let _onChange_decorators;
+    let _fileEntries_decorators;
+    let _fileEntries_initializers = [];
+    let _fileEntries_extraInitializers = [];
     var USAFileInputPreviewElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _files_decorators = [observe()];
-            _onChange_decorators = [effect()];
-            __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, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _fileEntries_decorators = [bind()];
+            __esDecorate(this, null, _fileEntries_decorators, { kind: "accessor", name: "fileEntries", static: false, private: false, access: { has: obj => "fileEntries" in obj, get: obj => obj.fileEntries, set: (obj, value) => { obj.fileEntries = value; } }, metadata: _metadata }, _fileEntries_initializers, _fileEntries_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USAFileInputPreviewElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #files_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _files_initializers, null));
-        get files() { return this.#files_accessor_storage; }
-        set files(value) { this.#files_accessor_storage = value; }
-        #items = (__runInitializers(this, _files_extraInitializers), new Map());
-        #template = query("template");
-        connectedCallback() {
-            this.onChange();
+        #fileEntries_accessor_storage = __runInitializers(this, _fileEntries_initializers, []);
+        get fileEntries() { return this.#fileEntries_accessor_storage; }
+        set fileEntries(value) { this.#fileEntries_accessor_storage = value; }
+        #files = (__runInitializers(this, _fileEntries_extraInitializers), null);
+        get files() {
+            return this.#files;
         }
-        get shadow() {
-            if (!this.shadowRoot) {
-                throw new Error("no shadow root");
-            }
-            return this.shadowRoot;
-        }
-        onChange() {
-            const template = this.#template();
-            if (this.files?.length) {
-                this.hidden = false;
-                const names = new Set();
-                for (const file of this.files) {
-                    names.add(file.name);
-                    if (!this.#items.has(file.name)) {
-                        const clone = template.content.cloneNode(true);
-                        const item = clone.firstElementChild;
-                        if (!item) {
-                            throw new Error("SOMETHING HAS GONE VERY WRONG");
-                        }
-                        item.id = file.name;
-                        item.append(document.createTextNode(file.name));
-                        const img = item.querySelector("img");
-                        const icon = item.querySelector("usa-icon");
-                        if (!img || !icon) {
-                            throw Error("Something went very wrong");
-                        }
-                        if (file.type.startsWith("image")) {
-                            img.style.display = "block";
-                            img.src = URL.createObjectURL(file);
-                        }
-                        else {
-                            icon.style.display = "block";
-                        }
-                        this.shadow.append(item);
-                        this.#items.set(file.name, item);
-                    }
-                }
-                for (const [name, item] of this.#items) {
-                    if (!names.has(name)) {
-                        item.remove();
-                        this.#items.delete(name);
-                    }
-                }
-            }
-            else {
-                this.hidden = true;
-            }
+        set files(value) {
+            this.#files = value;
+            this.fileEntries = Array.from(value ?? []).map((file) => ({
+                file,
+                src: URL.createObjectURL(file),
+                isImage: file.type.startsWith("image"),
+            }));
         }
     };
     return USAFileInputPreviewElement = _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAuF5B,0BAA0B;4BA/EtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;0CAAnB,SAAQ,WAAW;;;;uCACxD,IAAI,EAAE;YACP,sLAAS,WAAW,6BAAX,WAAW,iGAAmB;YAFzC,6KAmBC;;;YAnBY,uDAA0B;;QAErC,mFAAoC,EAAE,EAAC;QAAvC,IAAS,WAAW,iDAAmB;QAAvC,IAAS,WAAW,uDAAmB;QAEvC,MAAM,6DAAoB,IAAI,EAAC;QAE/B,IAAI,KAAK;YACP,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;QAED,IAAI,KAAK,CAAC,KAAsB;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;gBACxD,IAAI;gBACJ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;gBAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;aACvC,CAAC,CAAC,CAAC;QACN,CAAC;;;;SAlBU,0BAA0B"}

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

@@ -1,3 +1,4 @@
+import "@joist/templating/define.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-file-input": USAFileInputElement;
@@ -11,9 +12,10 @@ export declare class USAFileInputElement extends HTMLElement {
     accessor accept: string;
     accessor required: boolean;
     accessor files: FileList | null;
+    accessor filesVisible: boolean;
     attributeChangedCallback(): void;
     connectedCallback(): void;
-    onChange(): void;
+    syncFormValues(): void;
     onInputChange(): void;
     onDragEnter(): void;
     onDragLeave(): void;

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

@@ -1,12 +1,14 @@
 import { __esDecorate, __runInitializers } from "tslib";
+import "@joist/templating/define.js";
 import { attr, css, element, html, listen, query } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { effect } from "@joist/observable";
+import { bind } from "@joist/templating";
 let USAFileInputElement = (() => {
     let _classDecorators = [element({
             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;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><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><div class="box"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div><usa-file-input-preview>Selected file<usa-link>Change file</usa-link></usa-file-input-preview></div></label>`,
+                css `*{box-sizing:border-box}:host{--usa-input-radius:0;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:var(--usa-input-radius);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><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><j-if bind="!filesVisible"><template><div class="box"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template><template else><j-props><usa-file-input-preview $.files="files">Selected file<usa-link>Change file</usa-link></usa-file-input-preview></j-props></template></j-if></div></label>`,
             ],
         })];
     let _classDescriptor;
@@ -29,7 +31,10 @@ let USAFileInputElement = (() => {
     let _files_decorators;
     let _files_initializers = [];
     let _files_extraInitializers = [];
-    let _onChange_decorators;
+    let _filesVisible_decorators;
+    let _filesVisible_initializers = [];
+    let _filesVisible_extraInitializers = [];
+    let _syncFormValues_decorators;
     let _onInputChange_decorators;
     let _onDragEnter_decorators;
     let _onDragLeave_decorators;
@@ -42,8 +47,9 @@ let USAFileInputElement = (() => {
             _multiple_decorators = [attr()];
             _accept_decorators = [attr()];
             _required_decorators = [attr()];
-            _files_decorators = [observe()];
-            _onChange_decorators = [effect()];
+            _files_decorators = [bind()];
+            _filesVisible_decorators = [bind()];
+            _syncFormValues_decorators = [effect()];
             _onInputChange_decorators = [listen("change")];
             _onDragEnter_decorators = [listen("dragenter")];
             _onDragLeave_decorators = [listen("dragleave")];
@@ -53,7 +59,8 @@ 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, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __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);
             __esDecorate(this, null, _onDragLeave_decorators, { kind: "method", name: "onDragLeave", static: false, private: false, access: { has: obj => "onDragLeave" in obj, get: obj => obj.onDragLeave }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -78,10 +85,11 @@ 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; }
-        #internals = (__runInitializers(this, _files_extraInitializers), this.attachInternals());
+        #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());
         #input = query("input");
-        #box = query(".box");
-        #preview = query("usa-file-input-preview");
         attributeChangedCallback() {
             this.#input({
                 name: this.name,
@@ -96,12 +104,9 @@ let USAFileInputElement = (() => {
                 this.#internals.setValidity({ customError: true }, input.validationMessage, input);
             }
         }
-        onChange() {
+        syncFormValues() {
             const input = this.#input({ files: this.files });
-            this.#preview({ files: this.files });
-            const box = this.#box();
             const formData = new FormData();
-            box.style.display = this.files?.length ? "none" : "flex";
             if (this.files?.length) {
                 for (const file of this.files) {
                     formData.append(this.name, file);
@@ -118,6 +123,7 @@ let USAFileInputElement = (() => {
         onInputChange() {
             const input = this.#input();
             this.files = input.files;
+            this.filesVisible = !!input.files?.length;
             this.dispatchEvent(new Event("change"));
         }
         onDragEnter() {

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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"}