@noctuatech/uswds 0.0.8 → 0.0.10

package/README.md

@@ -23,10 +23,10 @@ npm i @noctuatech/uswds
   }
 </style>
 
-<script src="/node_modules/@noctuatech/uswds@latest/assets/uswds.min.js"></script>
+<script src="/node_modules/@noctuatech/uswds/assets/uswds.min.js"></script>
 
 <usa-config
-  spritesheet="/node_modules/@noctuatech/uswds@latest/assets/img/sprite.svg"
+  spritesheet="/node_modules/@noctuatech/uswds/assets/img/sprite.svg"
 >
   <usa-alert type="info">
     <h3 slot="heading">Informative status</h3>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -102,6 +102,7 @@
     "@storybook/web-components-vite": "^8.4.4",
     "@types/mocha": "^10.0.7",
     "@types/node": "^22.0.0",
+    "@uswds/uswds": "^3.10.0",
     "@web/test-runner": "^0.19.0",
     "browser-sync": "^3.0.3",
     "husky": "^9.0.11",

package/src/lib/define.ts

@@ -4,7 +4,7 @@ import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
 import "./file-input/file-input.element.js";
-import "./file-input/file-input-preview.element.js";
+import "./file-input/file-input-preview/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
 import "./input-mask/input-mask.element.js";
@@ -16,6 +16,7 @@ import "./select/select-option.element.js";
 import "./tag/tag.element.js";
 import "./accordion/accordion.element.js";
 import "./side-nav/side-nav.element.js";
+import "./summary-box/summary-box.element.js";
 import "./step-indicator/step-indicator.element.js";
 import "./step-indicator/step/step-indicator-step.element.js";
 import "./modal/modal.element.js";

package/src/lib/file-input/{file-input-preview.element.ts → file-input-preview/file-input-preview.element.ts}

@@ -61,14 +61,23 @@ declare global {
         margin-top: 1px;
       }
     `,
-    html`<slot class="preview-heading"></slot>`,
+    html`
+      <template>
+        <div class="preview-item">
+          <img height="40" width="40" aria-hidden="true" />
+        </div>
+      </template>
+
+      <slot class="preview-heading"></slot>
+    `,
   ],
 })
 export class USAFileInputPreviewElement extends HTMLElement {
   @observe()
   accessor files: FileList | null = null;
 
-  #items = new Map<string, HTMLElement>();
+  #items = new Map<string, Element>();
+  #template = query("template");
 
   connectedCallback() {
     this.onChange();
@@ -76,7 +85,9 @@ export class USAFileInputPreviewElement extends HTMLElement {
 
   @effect()
   onChange() {
-    if (this.files) {
+    const template = this.#template();
+
+    if (this.files && this.files.length) {
       this.hidden = false;
 
       let names = new Set<string>();
@@ -85,15 +96,17 @@ export class USAFileInputPreviewElement extends HTMLElement {
         names.add(file.name);
 
         if (!this.#items.has(file.name)) {
-          const item = document.createElement("div");
-          item.id = file.name;
-          item.className = "preview-item";
+          const clone = template.content.cloneNode(true);
 
-          const img = createImagePreview(file);
+          const item = clone.childNodes[1] as Element;
+          item.id = file.name;
+          item.append(document.createTextNode(file.name));
 
-          item.append(img, document.createTextNode(file.name));
+          const img = item.querySelector("img")!;
+          img.src = URL.createObjectURL(file);
 
           this.shadowRoot!.append(item);
+
           this.#items.set(file.name, item);
         }
       }
@@ -109,13 +122,3 @@ export class USAFileInputPreviewElement extends HTMLElement {
     }
   }
 }
-
-function createImagePreview(file: File) {
-  const img = new Image();
-  img.height = 40;
-  img.width = 40;
-  img.src = URL.createObjectURL(file);
-  img.ariaHidden = "true";
-
-  return img;
-}

package/src/lib/file-input/{file-input-preview.test.ts → file-input-preview/file-input-preview.test.ts}

@@ -1,5 +1,5 @@
 import "./file-input-preview.element.js";
-import "../link/link.element.js";
+import "../../link/link.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
 
@@ -43,7 +43,7 @@ describe("usa-file-input-preview", () => {
 
     const previewItems = Array.from(
       shadowRoot!.querySelectorAll(".preview-item")
-    ).map((item) => item.textContent);
+    ).map((item) => item.textContent?.trim());
 
     assert.deepEqual(previewItems, ["image1.jpg", "image2.jpg"]);
   });
@@ -69,7 +69,7 @@ describe("usa-file-input-preview", () => {
 
     const previewItems = Array.from(
       fileInputPreview.shadowRoot!.querySelectorAll(".preview-item")
-    ).map((item) => item.textContent);
+    ).map((item) => item.textContent?.trim());
 
     assert.deepEqual(previewItems, ["image1.jpg"]);
   });

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

@@ -1,6 +1,3 @@
-import "./file-input-preview.element.js";
-import "../link/link.element.js";
-
 import { attr, css, element, html, listen, query } from "@joist/element";
 import { effect, observe } from "@joist/observable";
 
@@ -39,7 +36,7 @@ declare global {
         width: 100%;
         z-index: 1;
         bottom: 0;
-        top: 1.85rem;
+        top: 0;
       }
 
       input:focus {
@@ -47,7 +44,7 @@ declare global {
         outline-offset: 0;
       }
 
-      label slot {
+      label slot.label {
         font-size: 1.06rem;
         line-height: 1.3;
         display: block;
@@ -67,22 +64,29 @@ declare global {
         align-items: center;
         justify-content: center;
       }
+
+      .container {
+        position: relative;
+      }
     `,
     html`
       <label>
-        <slot></slot>
-        <input type="file" />
-      </label>
+        <slot class="label"></slot>
+
+        <div class="container">
+          <input type="file" />
 
-      <div class="box" tabindex="0">
-        <slot name="description">
-          Drag file here or <usa-link>choose from folder</usa-link>
-        </slot>
-      </div>
+          <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>
+          <usa-file-input-preview>
+            Selected file <usa-link>Change file</usa-link>
+          </usa-file-input-preview>
+        </div>
+      </label>
     `,
   ],
 })
@@ -133,14 +137,14 @@ export class USAFileInputElement extends HTMLElement {
 
     const formData = new FormData();
 
-    if (input.files) {
+    if (input.files && input.files.length) {
       box.style.display = "none";
 
       for (let file of input.files) {
         formData.append(this.name, file);
       }
     } else {
-      box.style.display = "block";
+      box.style.display = "flex";
     }
 
     this.#internals.setFormValue(formData);

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

@@ -1,4 +1,4 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { css, element, html, listen, query } from "@joist/element";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,7 +30,6 @@ declare global {
         padding-left: 4rem;
         padding-right: 4rem;
         padding-bottom: 2rem;
-        position: relative;
         width: 100%;
       }
 
@@ -46,17 +45,10 @@ declare global {
   ],
 })
 export class USAModalElement extends HTMLElement {
-  @attr()
-  accessor open = false;
+  modalAction: null | string = null;
 
   #dialog = query("dialog");
 
-  connectedCallback() {
-    if (this.open) {
-      this.openModal();
-    }
-  }
-
   openModal() {
     const dialog = this.#dialog();
 
@@ -83,21 +75,11 @@ export class USAModalElement extends HTMLElement {
   @listen("click", (host) => host)
   onModalAction(e: Event) {
     if (e.target instanceof Element) {
-      const action = e.target.getAttribute("modal-action");
+      this.modalAction = e.target.getAttribute("modal-action");
 
-      switch (action) {
-        case "confirm":
-          this.closeModal();
-          break;
+      this.closeModal();
 
-        case "cancel":
-          this.closeModal();
-          break;
-
-        case "close":
-          this.closeModal();
-          break;
-      }
+      this.dispatchEvent(new Event("usa::modal::close"));
     }
   }
 }

package/src/lib/summary-box/summary-box.element.ts

@@ -0,0 +1,35 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-summary-box": USASummaryBoxElement;
+  }
+}
+
+@element({
+  tagName: "usa-summary-box",
+  shadowDom: [
+    css`
+      :host {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.06rem;
+        line-height: 1.5;
+        color: #1b1b1b;
+        background-color: #e7f6f8;
+        border-radius: 0.25rem;
+        border: 1px #99deea solid;
+        padding: 1.5rem;
+        position: relative;
+        display: block;
+      }
+    `,
+    html` <slot></slot> `,
+  ],
+})
+export class USASummaryBoxElement extends HTMLElement {}

package/src/lib/summary-box/summary-box.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USASummaryBoxElement } from "./summary-box.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-summary-box",
+  tags: ["autodocs"],
+  render(args) {
+    return html` <usa-summary-box> Hello World </usa-summary-box>`;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USASummaryBoxElement>;
+
+export default meta;
+
+type Story = StoryObj<USASummaryBoxElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/summary-box/summary-box.test.ts

@@ -0,0 +1,15 @@
+import "./summary-box.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USASummaryBoxElement } from "./summary-box.element.js";
+
+describe("usa-summary-box", () => {
+  it("should be accessible", async () => {
+    const summaryBox = await fixture<USASummaryBoxElement>(html`
+      <usa-summary-box>Hello World</usa-summary-box>
+    `);
+
+    return assert.isAccessible(summaryBox);
+  });
+});

package/src/lib.ts

@@ -13,8 +13,10 @@ export { USASelecOptionElement } from "./lib/select/select-option.element.js";
 export { USATagElement } from "./lib/tag/tag.element.js";
 export { USAAccordionElement } from "./lib/accordion/accordion.element.js";
 export { USASideNavElement } from "./lib/side-nav/side-nav.element.js";
+export { USASummaryBoxElement } from "./lib/summary-box/summary-box.element.js";
 export { USAStepIndicatorElement } from "./lib/step-indicator/step-indicator.element.js";
 export { USAStepIndicatorStepElement } from "./lib/step-indicator/step/step-indicator-step.element.js";
 export { USAModalElement } from "./lib/modal/modal.element.js";
 export { USAModalCloseElement } from "./lib/modal/modal-close/modal-close.element.js";
 export { USAModalHeadingElement } from "./lib/modal/modal-heading/modal-heading.element.js";
+

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

@@ -11,6 +11,9 @@ export declare class USAButtonElement extends HTMLElement {
     accessor type: "button" | "submit" | "reset";
     accessor disabled: boolean;
     accessor variant: ButtonVariant;
+    accessor value: string;
+    accessor tabIndex: number;
+    onReady(): void;
     onKeyDown(e: KeyboardEvent): void;
     onInternalClick(): void;
     attributeChangedCallback(): void;

package/target/lib/button/button.element.js

@@ -1,5 +1,5 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
 export const BUTTON_VARIANTS = [
     "primary",
     "secondary",
@@ -8,9 +8,13 @@ export const BUTTON_VARIANTS = [
     "outline",
 ];
 let USAButtonElement = (() => {
-    var _USAButtonElement_instances, _USAButtonElement_internals, _USAButtonElement_button, _USAButtonElement_handleForm, _USAButtonElement_type_accessor_storage, _USAButtonElement_disabled_accessor_storage, _USAButtonElement_variant_accessor_storage;
+    var _USAButtonElement_instances, _USAButtonElement_internals, _USAButtonElement_button, _USAButtonElement_handleForm, _USAButtonElement_type_accessor_storage, _USAButtonElement_disabled_accessor_storage, _USAButtonElement_variant_accessor_storage, _USAButtonElement_value_accessor_storage, _USAButtonElement_tabIndex_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-button",
+            shadowDomOpts: {
+                mode: "open",
+                delegatesFocus: true,
+            },
             shadowDom: [
                 css `
       :host {
@@ -177,6 +181,10 @@ let USAButtonElement = (() => {
     let _variant_decorators;
     let _variant_initializers = [];
     let _variant_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _onReady_decorators;
     let _onKeyDown_decorators;
     let _onInternalClick_decorators;
     var USAButtonElement = _classThis = class extends _classSuper {
@@ -186,7 +194,9 @@ let USAButtonElement = (() => {
             _USAButtonElement_type_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, "button")));
             _USAButtonElement_disabled_accessor_storage.set(this, (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disabled_initializers, false)));
             _USAButtonElement_variant_accessor_storage.set(this, (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, "primary")));
-            _USAButtonElement_internals.set(this, (__runInitializers(this, _variant_extraInitializers), this.attachInternals()));
+            _USAButtonElement_value_accessor_storage.set(this, (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, "")));
+            _USAButtonElement_tabIndex_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), 0));
+            _USAButtonElement_internals.set(this, this.attachInternals());
             _USAButtonElement_button.set(this, query("button"));
         }
         get type() { return __classPrivateFieldGet(this, _USAButtonElement_type_accessor_storage, "f"); }
@@ -195,6 +205,14 @@ let USAButtonElement = (() => {
         set disabled(value) { __classPrivateFieldSet(this, _USAButtonElement_disabled_accessor_storage, value, "f"); }
         get variant() { return __classPrivateFieldGet(this, _USAButtonElement_variant_accessor_storage, "f"); }
         set variant(value) { __classPrivateFieldSet(this, _USAButtonElement_variant_accessor_storage, value, "f"); }
+        get value() { return __classPrivateFieldGet(this, _USAButtonElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USAButtonElement_value_accessor_storage, value, "f"); }
+        get tabIndex() { return __classPrivateFieldGet(this, _USAButtonElement_tabIndex_accessor_storage, "f"); }
+        set tabIndex(value) { __classPrivateFieldSet(this, _USAButtonElement_tabIndex_accessor_storage, value, "f"); }
+        onReady() {
+            const input = __classPrivateFieldGet(this, _USAButtonElement_button, "f").call(this);
+            input.autofocus = this.autofocus;
+        }
         onKeyDown(e) {
             if (this.type === "submit") {
                 if (e.key.toUpperCase() === "ENTER") {
@@ -217,6 +235,8 @@ let USAButtonElement = (() => {
     _USAButtonElement_type_accessor_storage = new WeakMap();
     _USAButtonElement_disabled_accessor_storage = new WeakMap();
     _USAButtonElement_variant_accessor_storage = new WeakMap();
+    _USAButtonElement_value_accessor_storage = new WeakMap();
+    _USAButtonElement_tabIndex_accessor_storage = new WeakMap();
     _USAButtonElement_handleForm = function _USAButtonElement_handleForm() {
         const { form } = __classPrivateFieldGet(this, _USAButtonElement_internals, "f");
         if (form) {
@@ -238,11 +258,15 @@ let USAButtonElement = (() => {
         _type_decorators = [attr()];
         _disabled_decorators = [attr()];
         _variant_decorators = [attr()];
+        _value_decorators = [attr()];
+        _onReady_decorators = [ready()];
         _onKeyDown_decorators = [listen("keydown", () => document.body)];
         _onInternalClick_decorators = [listen("click")];
         __esDecorate(_classThis, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
         __esDecorate(_classThis, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
         __esDecorate(_classThis, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+        __esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+        __esDecorate(_classThis, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
         __esDecorate(_classThis, null, _onKeyDown_decorators, { kind: "method", name: "onKeyDown", static: false, private: false, access: { has: obj => "onKeyDown" in obj, get: obj => obj.onKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
         __esDecorate(_classThis, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
         __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);

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

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

package/target/lib/define.d.ts

@@ -4,7 +4,7 @@ import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
 import "./file-input/file-input.element.js";
-import "./file-input/file-input-preview.element.js";
+import "./file-input/file-input-preview/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
 import "./input-mask/input-mask.element.js";
@@ -16,5 +16,9 @@ import "./select/select-option.element.js";
 import "./tag/tag.element.js";
 import "./accordion/accordion.element.js";
 import "./side-nav/side-nav.element.js";
+import "./summary-box/summary-box.element.js";
 import "./step-indicator/step-indicator.element.js";
 import "./step-indicator/step/step-indicator-step.element.js";
+import "./modal/modal.element.js";
+import "./modal/modal-close/modal-close.element.js";
+import "./modal/modal-heading/modal-heading.element.js";

package/target/lib/define.js

@@ -4,7 +4,7 @@ import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
 import "./file-input/file-input.element.js";
-import "./file-input/file-input-preview.element.js";
+import "./file-input/file-input-preview/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
 import "./input-mask/input-mask.element.js";
@@ -16,6 +16,10 @@ import "./select/select-option.element.js";
 import "./tag/tag.element.js";
 import "./accordion/accordion.element.js";
 import "./side-nav/side-nav.element.js";
+import "./summary-box/summary-box.element.js";
 import "./step-indicator/step-indicator.element.js";
 import "./step-indicator/step/step-indicator-step.element.js";
+import "./modal/modal.element.js";
+import "./modal/modal-close/modal-close.element.js";
+import "./modal/modal-heading/modal-heading.element.js";
 //# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,4CAA4C,CAAC;AACpD,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,sDAAsD,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+DAA+D,CAAC;AACvE,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,sDAAsD,CAAC;AAC9D,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC"}

package/target/lib/file-input/{file-input-preview.element.js → file-input-preview/file-input-preview.element.js}

@@ -1,8 +1,8 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-import { css, element, html } from "@joist/element";
+import { css, element, html, query } from "@joist/element";
 import { effect, observe } from "@joist/observable";
 let USAFileInputPreviewElement = (() => {
-    var _USAFileInputPreviewElement_items, _USAFileInputPreviewElement_files_accessor_storage;
+    var _USAFileInputPreviewElement_items, _USAFileInputPreviewElement_template, _USAFileInputPreviewElement_files_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-file-input-preview",
             shadowDom: [
@@ -57,7 +57,15 @@ let USAFileInputPreviewElement = (() => {
         margin-top: 1px;
       }
     `,
-                html `<slot class="preview-heading"></slot>`,
+                html `
+      <template>
+        <div class="preview-item">
+          <img height="40" width="40" aria-hidden="true" />
+        </div>
+      </template>
+
+      <slot class="preview-heading"></slot>
+    `,
             ],
         })];
     let _classDescriptor;
@@ -74,6 +82,7 @@ let USAFileInputPreviewElement = (() => {
             super(...arguments);
             _USAFileInputPreviewElement_files_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _files_initializers, null)));
             _USAFileInputPreviewElement_items.set(this, (__runInitializers(this, _files_extraInitializers), new Map()));
+            _USAFileInputPreviewElement_template.set(this, query("template"));
         }
         get files() { return __classPrivateFieldGet(this, _USAFileInputPreviewElement_files_accessor_storage, "f"); }
         set files(value) { __classPrivateFieldSet(this, _USAFileInputPreviewElement_files_accessor_storage, value, "f"); }
@@ -81,17 +90,19 @@ let USAFileInputPreviewElement = (() => {
             this.onChange();
         }
         onChange() {
-            if (this.files) {
+            const template = __classPrivateFieldGet(this, _USAFileInputPreviewElement_template, "f").call(this);
+            if (this.files && this.files.length) {
                 this.hidden = false;
                 let names = new Set();
                 for (let file of this.files) {
                     names.add(file.name);
                     if (!__classPrivateFieldGet(this, _USAFileInputPreviewElement_items, "f").has(file.name)) {
-                        const item = document.createElement("div");
+                        const clone = template.content.cloneNode(true);
+                        const item = clone.childNodes[1];
                         item.id = file.name;
-                        item.className = "preview-item";
-                        const img = createImagePreview(file);
-                        item.append(img, document.createTextNode(file.name));
+                        item.append(document.createTextNode(file.name));
+                        const img = item.querySelector("img");
+                        img.src = URL.createObjectURL(file);
                         this.shadowRoot.append(item);
                         __classPrivateFieldGet(this, _USAFileInputPreviewElement_items, "f").set(file.name, item);
                     }
@@ -109,6 +120,7 @@ let USAFileInputPreviewElement = (() => {
         }
     };
     _USAFileInputPreviewElement_items = new WeakMap();
+    _USAFileInputPreviewElement_template = new WeakMap();
     _USAFileInputPreviewElement_files_accessor_storage = new WeakMap();
     __setFunctionName(_classThis, "USAFileInputPreviewElement");
     (() => {
@@ -125,12 +137,4 @@ let USAFileInputPreviewElement = (() => {
     return USAFileInputPreviewElement = _classThis;
 })();
 export { USAFileInputPreviewElement };
-function createImagePreview(file) {
-    const img = new Image();
-    img.height = 40;
-    img.width = 40;
-    img.src = URL.createObjectURL(file);
-    img.ariaHidden = "true";
-    return img;
-}
 //# sourceMappingURL=file-input-preview.element.js.map

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

@@ -0,0 +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":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IAyEvC,0BAA0B;;4BAjEtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;uDAAnB,SAAQ,WAAW;;;YAEhD,8DAFE,mDAA0B,+CAEH,IAAI,IAAC;YAEvC,gGAAS,IAAI,GAAG,EAAmB,GAAC;YACpC,+CAAY,KAAK,CAAC,UAAU,CAAC,EAAC;QA4ChC,CAAC;QA/CC,IAAS,KAAK,oGAAyB;QAAvC,IAAS,KAAK,yGAAyB;QAKvC,iBAAiB;YACf,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;QAGD,QAAQ;YACN,MAAM,QAAQ,GAAG,uBAAA,IAAI,4CAAU,MAAd,IAAI,CAAY,CAAC;YAElC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACpC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBAEpB,IAAI,KAAK,GAAG,IAAI,GAAG,EAAU,CAAC;gBAE9B,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC5B,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAErB,IAAI,CAAC,uBAAA,IAAI,yCAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;wBAChC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;wBAE/C,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAY,CAAC;wBAC5C,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;wBACpB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;wBAEhD,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAE,CAAC;wBACvC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;wBAEpC,IAAI,CAAC,UAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;wBAE9B,uBAAA,IAAI,yCAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;oBACnC,CAAC;gBACH,CAAC;gBAED,KAAK,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,uBAAA,IAAI,yCAAO,EAAE,CAAC;oBACrC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;wBACrB,IAAI,CAAC,MAAM,EAAE,CAAC;wBACd,uBAAA,IAAI,yCAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC;gBACH,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;;;;;6BA/CA,OAAO,EAAE;gCAUT,MAAM,EAAE;QATT,0KAAS,KAAK,6BAAL,KAAK,qFAAyB;QAUvC,iLAAA,QAAQ,6DAoCP;QAhDH,6KAiDC;;;QAjDY,uDAA0B;;;;SAA1B,0BAA0B"}

package/target/lib/file-input/{file-input-preview.test.d.ts → file-input-preview/file-input-preview.test.d.ts}

@@ -1,2 +1,2 @@
 import "./file-input-preview.element.js";
-import "../link/link.element.js";
+import "../../link/link.element.js";