@noctuatech/uswds 0.0.29 → 0.0.31

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

@@ -52,7 +52,7 @@ declare global {
         margin-bottom: 0.5rem;
       }
 
-      :host([dragenter]) .box {
+      :host(.dragenter) .box {
         border-color: #2491ff;
       }
 
@@ -115,23 +115,19 @@ export class USAFileInputElement extends HTMLElement {
   #preview = query("usa-file-input-preview");
 
   attributeChangedCallback() {
-    const input = this.#input();
-    input.name = this.name;
-    input.multiple = this.multiple;
-    input.accept = this.accept;
+    this.#input({
+      name: this.name,
+      multiple: this.multiple,
+      accept: this.accept,
+    });
   }
 
   @effect()
   onChange() {
-    const input = this.#input();
-    const box = this.#box();
-    const preview = this.#preview();
+    this.#input({ files: this.files });
+    this.#preview({ files: this.files });
 
-    if (input.files !== this.files) {
-      input.files = this.files;
-    }
-
-    preview.files = this.files;
+    const box = this.#box();
 
     const formData = new FormData();
 
@@ -158,18 +154,18 @@ export class USAFileInputElement extends HTMLElement {
   }
 
   @listen("dragenter")
-  onDragEnter(e: DragEvent) {
-    this.setAttribute("dragenter", "");
+  onDragEnter() {
+    this.classList.add("dragenter");
   }
 
   @listen("dragleave")
-  onDragLeave(e: DragEvent) {
-    this.removeAttribute("dragenter");
+  onDragLeave() {
+    this.classList.remove("dragenter");
   }
 
   @listen("drop")
   onDrop(e: DragEvent) {
-    this.removeAttribute("dragenter");
+    this.classList.remove("dragenter");
 
     if (e.dataTransfer?.items) {
       e.preventDefault();

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

@@ -11,10 +11,6 @@ declare global {
 
 @element({
   tagName: "usa-input",
-  shadowDomOpts: {
-    mode: "open",
-    delegatesFocus: true,
-  },
   shadowDom: [
     css`
       * {
@@ -131,8 +127,15 @@ export class USATextInputElement
 
   @ready()
   onReady() {
-    const input = this.#input();
-    input.autofocus = this.autofocus;
+    this.#input({ autofocus: this.autofocus });
+  }
+
+  attributeChangedCallback() {
+    this.#input({
+      autocomplete: this.autocomplete,
+      placeholder: this.placeholder,
+      name: this.name,
+    });
   }
 
   connectedCallback() {
@@ -143,7 +146,9 @@ export class USATextInputElement
   onChange(changes: Changes<this>) {
     const input = this.#input();
 
-    input.value = this.value;
+    if (input.value !== this.value) {
+      input.value = this.value;
+    }
 
     if (changes.has("selectionStart")) {
       input.selectionStart = this.selectionStart;
@@ -156,6 +161,24 @@ export class USATextInputElement
     this.#syncFormState();
   }
 
+  @listen("keydown")
+  onKeyDown(e: KeyboardEvent) {
+    const form = this.#internals.form;
+
+    if (form) {
+      const hasModifier = e.metaKey || e.ctrlKey || e.shiftKey || e.altKey;
+
+      if (e.key.toUpperCase() === "ENTER" && !hasModifier) {
+        // this makes sure that the user has a chance to cancel the event before submitting
+        setTimeout(() => {
+          if (!e.defaultPrevented && !e.isComposing) {
+            this.#submit(form);
+          }
+        });
+      }
+    }
+  }
+
   @listen("input")
   onInputChange() {
     const input = this.#input();
@@ -165,24 +188,6 @@ export class USATextInputElement
     this.selectionEnd = input.selectionEnd;
   }
 
-  attributeChangedCallback(attr: string) {
-    const input = this.#input();
-
-    switch (attr) {
-      case "autocomplete":
-        input.autocomplete = this.autocomplete;
-        break;
-
-      case "placeholder":
-        input.placeholder = this.placeholder;
-        break;
-
-      case "name":
-        input.name = this.name;
-        break;
-    }
-  }
-
   #syncFormState() {
     const input = this.#input();
 
@@ -194,4 +199,13 @@ export class USATextInputElement
       this.#internals.setValidity({});
     }
   }
+
+  #submit(form: HTMLFormElement) {
+    const btn = document.createElement("button");
+    btn.type = "submit";
+    form.append(btn);
+
+    btn.click();
+    btn.remove();
+  }
 }

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

@@ -9,7 +9,13 @@ const meta = {
   tags: ["autodocs"],
   render() {
     return html`
-      <form>
+      <form @submit=${(e: Event) => {
+        e.preventDefault();
+
+        const data = new FormData(e.target as HTMLFormElement);
+
+        console.log(Array.from(data.entries()));
+      }}>
         <usa-input name="fname" value="Danny" autocomplete="off" detail="pfx">
           <usa-icon icon="credit_card" slot="detail"></usa-icon>
 

package/src/lib/link/link.element.ts

@@ -46,21 +46,11 @@ export class USALinkElement extends HTMLElement {
 
   #anchor = query("a");
 
-  attributeChangedCallback(attr: string) {
-    const anchor = this.#anchor();
-
-    switch (attr) {
-      case "href":
-        anchor.href = this.href;
-        break;
-
-      case "target":
-        anchor.target = this.target;
-        break;
-
-      case "title":
-        anchor.target = this.title;
-        break;
-    }
+  attributeChangedCallback() {
+    this.#anchor({
+      href: this.href,
+      target: this.target,
+      title: this.title,
+    });
   }
 }

package/src/lib/select/select.element.ts

@@ -83,17 +83,13 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
   #internals = this.attachInternals();
 
   connectedCallback() {
-    const select = this.#select();
-    select.value = this.value;
-    select.name = this.name;
+    this.#select({ value: this.value, name: this.name });
 
     this.#syncFormState();
   }
 
   attributeChangedCallback() {
-    const select = this.#select();
-    select.value = this.value;
-    select.name = this.name;
+    this.#select({ value: this.value, name: this.name });
 
     this.#syncFormState();
   }

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

@@ -43,6 +43,7 @@ declare global {
         appearance: none;
         width: 100%;
         height: 100%;
+        resize: none;
       }
 
       textarea:not(:disabled):focus {
@@ -95,36 +96,24 @@ export class USATextareaElement extends HTMLElement {
 
   @effect()
   onChange() {
-    const input = this.#input();
-
-    input.value = this.value;
+    this.#input({
+      value: this.value,
+    });
 
     this.#syncFormState();
   }
 
   @listen("input")
   onInputChange() {
-    const input = this.#input();
-
-    this.value = input.value;
+    this.value = this.#input().value;
   }
 
-  attributeChangedCallback(attr: string) {
-    const input = this.#input();
-
-    switch (attr) {
-      case "autocomplete":
-        input.autocomplete = this.autocomplete;
-        break;
-
-      case "placeholder":
-        input.placeholder = this.placeholder;
-        break;
-
-      case "name":
-        input.name = this.name;
-        break;
-    }
+  attributeChangedCallback() {
+    this.#input({
+      name: this.name,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete,
+    });
   }
 
   #syncFormState() {

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

@@ -112,8 +112,9 @@ let USAAlertElement = (() => {
         set type(value) { this.#type_accessor_storage = value; }
         #icon = (__runInitializers(this, _type_extraInitializers), query("usa-icon"));
         attributeChangedCallback() {
-            const icon = this.#icon();
-            icon.icon = USA_ALERT_CONFIG[this.type].icon;
+            this.#icon({
+                icon: USA_ALERT_CONFIG[this.type].icon,
+            });
         }
     };
     return USAAlertElement = _classThis;

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,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IA+F1D,eAAe;4BAvF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAFvC,6KAWC;;;YAXY,uDAAe;;QAE1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAErC,KAAK,sDAAG,KAAK,CAAC,UAAU,CAAC,EAAC;QAE1B,wBAAwB;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC/C,CAAC;;;;SAVU,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,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IA+F1D,eAAe;4BAvF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAFvC,6KAWC;;;YAXY,uDAAe;;QAE1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAErC,KAAK,sDAAG,KAAK,CAAC,UAAU,CAAC,EAAC;QAE1B,wBAAwB;YACtB,IAAI,CAAC,KAAK,CAAC;gBACT,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI;aACvC,CAAC,CAAC;QACL,CAAC;;;;SAVU,eAAe"}

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

@@ -14,7 +14,6 @@ export declare class USAButtonElement extends HTMLElement {
     accessor value: string;
     accessor tabIndex: number;
     onReady(): void;
-    onKeyDown(e: KeyboardEvent): void;
     onInternalClick(): void;
     attributeChangedCallback(): void;
 }

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

@@ -20,7 +20,7 @@ let USAButtonElement = (() => {
         display: contents;
       }
 
-      .usa-button {
+      button {
         box-sizing: border-box;
         font-size: 1.06rem;
         line-height: 0.9;
@@ -46,114 +46,114 @@ let USAButtonElement = (() => {
       }
 
       @media all and (min-width: 30em) {
-        .usa-button {
+        button {
           width: auto;
         }
       }
 
-      .usa-button:visited {
+      button:visited {
         color: white;
       }
 
-      .usa-button:hover {
+      button:hover {
         color: white;
         background-color: #1a4480;
         border-bottom: 0;
         text-decoration: none;
       }
 
-      .usa-button:active {
+      button:active {
         color: white;
         background-color: #162e51;
       }
 
-      .usa-button:not([disabled]):focus {
+      button:not([disabled]):focus {
         outline-offset: 0.25rem;
       }
 
-      .usa-button:disabled {
+      button:disabled {
         color: #454545;
         background-color: #c9c9c9;
         cursor: not-allowed;
         opacity: 1;
       }
 
-      .usa-button:disabled:hover,
-      .usa-button:disabled:active,
-      .usa-button:disabled:focus {
+      button:disabled:hover,
+      button:disabled:active,
+      button:disabled:focus {
         color: #454545;
         background-color: #c9c9c9;
       }
 
-      .usa-button:focus {
+      button:focus {
         outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
 
       /** Secondary */
-      :host([variant="secondary"]) .usa-button {
+      :host([variant="secondary"]) button {
         color: #fff;
         background-color: #d83933;
       }
 
-      :host([variant="secondary"]) .usa-button:hover {
+      :host([variant="secondary"]) button:hover {
         background-color: #b50909;
       }
 
-      :host([variant="secondary"]) .usa-button:active {
+      :host([variant="secondary"]) button:active {
         background-color: #8b0a03;
       }
 
       /** cool */
-      :host([variant="cool"]) .usa-button {
+      :host([variant="cool"]) button {
         color: #1b1b1b;
         background-color: #00bde3;
       }
 
-      :host([variant="cool"]) .usa-button:hover {
+      :host([variant="cool"]) button:hover {
         background-color: #28a0cb;
       }
 
-      :host([variant="cool"]) .usa-button:active {
+      :host([variant="cool"]) button:active {
         color: #fff;
         background-color: #07648d;
       }
 
       /** warm */
-      :host([variant="warm"]) .usa-button {
+      :host([variant="warm"]) button {
         color: #1b1b1b;
         background-color: #fa9441;
       }
 
-      :host([variant="warm"]) .usa-button:hover {
+      :host([variant="warm"]) button:hover {
         color: #fff;
         background-color: #c05600;
       }
 
-      :host([variant="warm"]) .usa-button:active {
+      :host([variant="warm"]) button:active {
         color: #fff;
         background-color: #775540;
       }
 
       /** outline */
-      :host([variant="outline"]) .usa-button {
+      :host([variant="outline"]) button {
         background-color: transparent;
         box-shadow: inset 0 0 0 2px #005ea2;
         color: #005ea2;
       }
 
-      :host([variant="outline"]) .usa-button:hover {
+      :host([variant="outline"]) button:hover {
         box-shadow: inset 0 0 0 2px #1a4480;
         color: #1a4480;
       }
 
-      :host([variant="outline"]) .usa-button:active {
+      :host([variant="outline"]) button:active {
         box-shadow: inset 0 0 0 2px #162e51;
         color: #162e51;
       }
     `,
                 html `
-      <button class="usa-button" tabindex="0">
+      <button tabindex="0">
         <slot></slot>
       </button>
     `,
@@ -177,7 +177,6 @@ let USAButtonElement = (() => {
     let _value_initializers = [];
     let _value_extraInitializers = [];
     let _onReady_decorators;
-    let _onKeyDown_decorators;
     let _onInternalClick_decorators;
     var USAButtonElement = class extends _classSuper {
         static { _classThis = this; }
@@ -188,14 +187,12 @@ let USAButtonElement = (() => {
             _variant_decorators = [attr()];
             _value_decorators = [attr()];
             _onReady_decorators = [ready()];
-            _onKeyDown_decorators = [listen("keydown", () => document.body)];
             _onInternalClick_decorators = [listen("click")];
             __esDecorate(this, 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(this, 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(this, 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(this, 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(this, 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(this, 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(this, 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);
             USAButtonElement = _classThis = _classDescriptor.value;
@@ -220,39 +217,32 @@ let USAButtonElement = (() => {
         #internals = this.attachInternals();
         #button = query("button");
         onReady() {
-            const input = this.#button();
-            input.autofocus = this.autofocus;
-        }
-        onKeyDown(e) {
-            if (this.type === "submit") {
-                if (e.key.toUpperCase() === "ENTER") {
-                    this.#handleForm();
-                }
-            }
+            this.#button({ autofocus: this.autofocus });
         }
         onInternalClick() {
             this.#handleForm();
         }
         attributeChangedCallback() {
-            const button = this.#button();
-            button.type = this.type;
-            button.disabled = this.disabled;
+            this.#button({ type: this.type, disabled: this.disabled });
         }
         #handleForm() {
             const { form } = this.#internals;
             if (form) {
                 if (this.type === "submit") {
-                    const btn = document.createElement("button");
-                    btn.type = "submit";
-                    form.append(btn);
-                    btn.click();
-                    btn.remove();
+                    this.#submit(form);
                 }
                 else if (this.type === "reset") {
                     form.reset();
                 }
             }
         }
+        #submit(form) {
+            const btn = document.createElement("button");
+            btn.type = "submit";
+            form.append(btn);
+            btn.click();
+            btn.remove();
+        }
         static {
             __runInitializers(_classThis, _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":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAQhF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,SAAS;IACT,WAAW;IACX,MAAM;IACN,MAAM;IACN,SAAS;CACD,CAAC;IA2JE,gBAAgB;4BAvJ5B,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwIF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACoC,WAAW;;;;;;;;;;;;;;;;;gCAAnB,SAAQ,WAAW;;;;gCAG9C,IAAI,EAAE;oCAGN,IAAI,EAAE;mCAGN,IAAI,EAAE;iCAGN,IAAI,EAAE;mCAQN,KAAK,EAAE;qCAMP,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;2CAStC,MAAM,CAAC,OAAO,CAAC;YA/BhB,iKAAS,IAAI,6BAAJ,IAAI,mFAA2C;YAGxD,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAG1B,0KAAS,OAAO,6BAAP,OAAO,yFAA4B;YAG5C,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAQpB,wKAAA,OAAO,6DAGN;YAGD,8KAAA,SAAS,6DAMR;YAGD,gMAAA,eAAe,6DAEd;YAtCH,6KA8DC;;;;QA7DC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAG7B,0BAJW,mDAAgB,8CAIoB,QAAQ,GAAC;QAAxD,IAAS,IAAI,0CAA2C;QAAxD,IAAS,IAAI,gDAA2C;QAGxD,gIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAG1B,kIAAkC,SAAS,GAAC;QAA5C,IAAS,OAAO,6CAA4B;QAA5C,IAAS,OAAO,mDAA4B;QAG5C,6HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,iFAAoB,CAAC,EAAC;QAAtB,IAAS,QAAQ,8CAAK;QAAtB,IAAS,QAAQ,oDAAK;QAEtB,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACpC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;QAG1B,OAAO;YACL,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7B,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC;QAGD,SAAS,CAAC,CAAgB;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE,CAAC;oBACpC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAGD,eAAe;YACb,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,wBAAwB;YACtB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACxB,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAClC,CAAC;QAED,WAAW;YACT,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;YAEjC,IAAI,IAAI,EAAE,CAAC;gBACT,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;oBAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC7C,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC;oBACpB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;oBAEjB,GAAG,CAAC,KAAK,EAAE,CAAC;oBACZ,GAAG,CAAC,MAAM,EAAE,CAAC;gBACf,CAAC;qBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;oBACjC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,CAAC;YACH,CAAC;QACH,CAAC;;YA7DU,uDAAgB;;;;;SAAhB,gBAAgB"}
+{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}

package/target/lib/checkbox/checkbox.element.js

@@ -165,15 +165,11 @@ let USACheckboxElement = (() => {
         #checkbox = (__runInitializers(this, _tiled_extraInitializers), query("input"));
         #internals = this.attachInternals();
         connectedCallback() {
-            const checkbox = this.#checkbox();
-            checkbox.checked = this.checked;
-            checkbox.name = this.name;
+            this.#checkbox({ checked: this.checked, name: this.name });
             this.#syncFormState();
         }
         attributeChangedCallback() {
-            const checkbox = this.#checkbox();
-            checkbox.checked = this.checked;
-            checkbox.name = this.name;
+            this.#checkbox({ checked: this.checked, name: this.name });
             this.#syncFormState();
         }
         onCheckboxChange() {

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

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

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

@@ -13,7 +13,7 @@ export declare class USAFileInputElement extends HTMLElement {
     attributeChangedCallback(): void;
     onChange(): void;
     onInputChange(): void;
-    onDragEnter(e: DragEvent): void;
-    onDragLeave(e: DragEvent): void;
+    onDragEnter(): void;
+    onDragLeave(): void;
     onDrop(e: DragEvent): void;
 }

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

@@ -47,7 +47,7 @@ let USAFileInputElement = (() => {
         margin-bottom: 0.5rem;
       }
 
-      :host([dragenter]) .box {
+      :host(.dragenter) .box {
         border-color: #2491ff;
       }
 
@@ -155,19 +155,16 @@ let USAFileInputElement = (() => {
         #box = query(".box");
         #preview = query("usa-file-input-preview");
         attributeChangedCallback() {
-            const input = this.#input();
-            input.name = this.name;
-            input.multiple = this.multiple;
-            input.accept = this.accept;
+            this.#input({
+                name: this.name,
+                multiple: this.multiple,
+                accept: this.accept,
+            });
         }
         onChange() {
-            const input = this.#input();
+            this.#input({ files: this.files });
+            this.#preview({ files: this.files });
             const box = this.#box();
-            const preview = this.#preview();
-            if (input.files !== this.files) {
-                input.files = this.files;
-            }
-            preview.files = this.files;
             const formData = new FormData();
             if (this.files?.length) {
                 box.style.display = "none";
@@ -185,14 +182,14 @@ let USAFileInputElement = (() => {
             this.files = input.files;
             this.dispatchEvent(new Event("change"));
         }
-        onDragEnter(e) {
-            this.setAttribute("dragenter", "");
+        onDragEnter() {
+            this.classList.add("dragenter");
         }
-        onDragLeave(e) {
-            this.removeAttribute("dragenter");
+        onDragLeave() {
+            this.classList.remove("dragenter");
         }
         onDrop(e) {
-            this.removeAttribute("dragenter");
+            this.classList.remove("dragenter");
             if (e.dataTransfer?.items) {
                 e.preventDefault();
                 const data = new DataTransfer();