@helixui/library 3.8.0 → 3.9.0-next.149

package/dist/shared/{hx-file-upload-D3rKROK5.js → hx-file-upload-CU5QGZSP.js}

@@ -1,14 +1,14 @@
-import { css as g, nothing as p, html as f } from "lit";
-import { property as n, state as v, query as x, customElement as _ } from "lit/decorators.js";
+import { css as v, nothing as c, html as p } from "lit";
+import { property as a, state as b, query as g, customElement as _ } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { repeat as w } from "lit/directives/repeat.js";
-import { F as z } from "./FormMixin-B8PXk5RQ.js";
-import { b as F } from "./forced-colors-CTEDFRGa.js";
-import { m as $ } from "./aria-delegation-Doq6RRUy.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import { repeat as z } from "lit/directives/repeat.js";
+import { F } from "./FormMixin-B8PXk5RQ.js";
+import { b as $ } from "./forced-colors-CTEDFRGa.js";
+import { m as w } from "./aria-delegation-Doq6RRUy.js";
 import { c as D } from "./id-counter-DuX8vsui.js";
 import { H as S } from "./helix-element-BNEYeiys.js";
-const k = g`
+const C = v`
   :host {
     display: block;
   }
@@ -189,6 +189,10 @@ const k = g`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  .file-item__remove-glyph {
+    --hx-icon-size: 14px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .file-item__remove {
       transition: none;
@@ -289,15 +293,15 @@ const k = g`
     }
   }
 `;
-var L = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (e, r, t, i) => {
-  for (var l = i > 1 ? void 0 : i ? C(r, t) : r, a = e.length - 1, d; a >= 0; a--)
-    (d = e[a]) && (l = (i ? d(r, t, l) : d(l)) || l);
-  return i && l && L(r, t, l), l;
+var I = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (e, r, t, i) => {
+  for (var l = i > 1 ? void 0 : i ? L(r, t) : r, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (l = (i ? h(r, t, l) : h(l)) || l);
+  return i && l && I(r, t, l), l;
 };
-const I = D("hx-file-upload");
-let o = class extends z($(S)) {
+const k = D("hx-file-upload");
+let o = class extends F(w(S)) {
   constructor() {
-    super(...arguments), this.name = "", this.accept = "", this.maxSize = 0, this.maxFiles = 0, this.multiple = !1, this.label = "", this.disabled = !1, this.error = "", this.labelDropzone = "Drag files here or click to browse", this.labelFileList = "Selected files", this.accessibleLabel = "", this.labelUploadProgress = (e, r) => `Upload progress for ${e}: ${r}%`, this.labelDragDetected = "File detected. Release to upload.", this._files = [], this._dragOver = !1, this._hasFileListSlot = !1, this._baseId = I(), this._labelId = `${this._baseId}-label`, this._errorId = `${this._baseId}-error`, this._dropzoneId = `${this._baseId}-dropzone`, this._liveId = `${this._baseId}-live`;
+    super(...arguments), this.name = "", this.accept = "", this.maxSize = 0, this.maxFiles = 0, this.multiple = !1, this.label = "", this.disabled = !1, this.required = !1, this.error = "", this.labelDropzone = "Drag files here or click to browse", this.labelFileList = "Selected files", this.accessibleLabel = "", this.labelUploadProgress = (e, r) => `Upload progress for ${e}: ${r}%`, this.labelDragDetected = "File detected. Release to upload.", this._files = [], this._dragOver = !1, this._hasFileListSlot = !1, this._baseId = k(), this._labelId = `${this._baseId}-label`, this._errorId = `${this._baseId}-error`, this._dropzoneId = `${this._baseId}-dropzone`, this._liveId = `${this._baseId}-live`;
   }
   /**
    * Returns the effective label for the dropzone, checking accessible-label first,
@@ -332,7 +336,7 @@ let o = class extends z($(S)) {
   // ─── Form Integration ───
   /** @internal */
   _onFormReset() {
-    this._files = [], this._internals.setFormValue(null), this._resetInteractionState();
+    this._files = [], this._internals.setFormValue(null), this._resetInteractionState(), this._updateValidity();
   }
   /** @internal */
   _onFormDisabled(e) {
@@ -358,6 +362,66 @@ let o = class extends z($(S)) {
       e.append(this.name, r.file, r.file.name);
     this._internals.setFormValue(e);
   }
+  /**
+   * Constraint validation: surfaces native `validity` flags through
+   * `ElementInternals.setValidity()` so the upload field participates in
+   * `form.checkValidity()` / `form.reportValidity()`.
+   *
+   * Flags applied (in priority order):
+   *   - `valueMissing` when `required` is set and no files are selected.
+   *   - `customError` when any file exceeds `maxSize`. The platform's
+   *     `ValidityState` has no perfect "file too big" flag, so `customError`
+   *     is the correct surface per the HTML spec.
+   *   - `customError` when `files.length > maxFiles`.
+   *   - `customError` when `accept` is set and any file's MIME or extension
+   *     does not match the accept pattern.
+   *
+   * The validity anchor is the visible upload trigger (the dropzone button)
+   * inside shadow DOM so `reportValidity()` focuses the correct element. If
+   * the dropzone has not yet rendered, the anchor is omitted.
+   *
+   * Called automatically by `FormMixin.updated()` after every Lit cycle.
+   * @internal
+   */
+  _updateValidity() {
+    var r;
+    const e = ((r = this.shadowRoot) == null ? void 0 : r.querySelector('[part="dropzone"]')) ?? void 0;
+    if (this.required && this._files.length === 0) {
+      this._internals.setValidity({ valueMissing: !0 }, "Please select a file.", e);
+      return;
+    }
+    if (this.maxSize > 0) {
+      for (const t of this._files)
+        if (t.file.size > this.maxSize) {
+          this._internals.setValidity(
+            { customError: !0 },
+            `File "${t.file.name}" exceeds maximum size of ${this._formatSize(this.maxSize)}.`,
+            e
+          );
+          return;
+        }
+    }
+    if (this.maxFiles > 0 && this._files.length > this.maxFiles) {
+      this._internals.setValidity(
+        { customError: !0 },
+        `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? "" : "s"} allowed.`,
+        e
+      );
+      return;
+    }
+    if (this.accept && this._files.length > 0) {
+      for (const t of this._files)
+        if (!this._isAccepted(t.file)) {
+          this._internals.setValidity(
+            { customError: !0 },
+            `File "${t.file.name}" has an unsupported file type. Accepted types: ${this.accept}.`,
+            e
+          );
+          return;
+        }
+    }
+    this._internals.setValidity({});
+  }
   // ─── Validation ───
   /**
    * Validates a file against `accept` and `maxSize` constraints.
@@ -395,9 +459,9 @@ let o = class extends z($(S)) {
   _processFiles(e) {
     if (this.disabled) return;
     const r = this.multiple ? e : e.slice(0, 1), t = [], i = [], l = [];
-    for (const c of r) {
-      const m = this._validateFile(c);
-      m ? (i.push(c), l.push(m)) : t.push(c);
+    for (const f of r) {
+      const m = this._validateFile(f);
+      m ? (i.push(f), l.push(m)) : t.push(f);
     }
     if (i.length > 0 && this.dispatchEvent(
       new CustomEvent("hx-error", {
@@ -406,8 +470,8 @@ let o = class extends z($(S)) {
         detail: { message: l.join(" "), files: i }
       })
     ), t.length === 0) return;
-    const a = this.multiple ? this._files.length : 0, d = this.maxFiles > 0 ? Math.max(0, this.maxFiles - a) : t.length, h = t.slice(0, d);
-    if (h.length === 0 && this.maxFiles > 0) {
+    const n = this.multiple ? this._files.length : 0, h = this.maxFiles > 0 ? Math.max(0, this.maxFiles - n) : t.length, d = t.slice(0, h);
+    if (d.length === 0 && this.maxFiles > 0) {
       this.dispatchEvent(
         new CustomEvent("hx-error", {
           bubbles: !0,
@@ -420,17 +484,17 @@ let o = class extends z($(S)) {
       );
       return;
     }
-    if (h.length > 0) {
-      const c = h.map((m) => ({ file: m, progress: 0 }));
-      this.multiple ? this._files = [...this._files, ...c] : this._files = c, this._handleInteractionInput(), this.dispatchEvent(
+    if (d.length > 0) {
+      const f = d.map((m) => ({ file: m, progress: 0 }));
+      this.multiple ? this._files = [...this._files, ...f] : this._files = f, this._handleInteractionInput(), this.dispatchEvent(
         new CustomEvent("hx-upload", {
           bubbles: !0,
           composed: !0,
-          detail: { files: h }
+          detail: { files: d }
         })
       );
     }
-    const u = t.slice(d);
+    const u = t.slice(h);
     u.length > 0 && this.maxFiles > 0 && this.dispatchEvent(
       new CustomEvent("hx-error", {
         bubbles: !0,
@@ -516,13 +580,13 @@ let o = class extends z($(S)) {
     ), this.updateComplete.then(() => {
       var i, l;
       if (this._files.length === 0) {
-        const a = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[part="dropzone"]');
-        a == null || a.focus();
+        const n = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[part="dropzone"]');
+        n == null || n.focus();
       } else {
-        const a = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(".file-item__remove");
-        if (a && a.length > 0) {
-          const d = e < this._files.length ? e : this._files.length - 1, h = a[d];
-          h && h.focus();
+        const n = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(".file-item__remove");
+        if (n && n.length > 0) {
+          const h = e < this._files.length ? e : this._files.length - 1, d = n[h];
+          d && d.focus();
         }
       }
     }).catch(() => {
@@ -536,12 +600,12 @@ let o = class extends z($(S)) {
   // ─── Render Helpers ───
   /** @internal */
   _renderFileList() {
-    return this._hasFileListSlot ? p : this._files.length === 0 ? p : f`
+    return this._hasFileListSlot ? c : this._files.length === 0 ? c : p`
       <ul part="file-list" class="file-list" aria-label=${this.labelFileList}>
-        ${w(
+        ${z(
       this._files,
       (e) => e.file.name + e.file.size,
-      (e, r) => f`
+      (e, r) => p`
             <li part="file-item" class="file-item">
               <div class="file-item__row">
                 <span class="file-item__name" title=${e.file.name}> ${e.file.name} </span>
@@ -552,22 +616,12 @@ let o = class extends z($(S)) {
                   aria-label=${`Remove ${e.file.name}`}
                   @click=${() => this._handleRemove(r)}
                 >
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 14 14"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <hx-icon
+                    class="file-item__remove-glyph"
+                    library="helix"
+                    name="close"
                     aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path
-                      d="M1 1L13 13M13 1L1 13"
-                      stroke="currentColor"
-                      stroke-width="1.75"
-                      stroke-linecap="round"
-                    />
-                  </svg>
+                  ></hx-icon>
                 </button>
               </div>
               <div
@@ -597,13 +651,13 @@ let o = class extends z($(S)) {
       "dropzone--drag-over": this._dragOver,
       "dropzone--error": e
     }, t = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;
-    return f`
+    return p`
       <div class="field">
-        ${this.label ? f`
+        ${this.label ? p`
               <label part="label" class="field__label" id=${this._labelId} for=${this._dropzoneId}>
                 ${this.label}
               </label>
-            ` : p}
+            ` : c}
 
         <div
           part="dropzone"
@@ -611,13 +665,13 @@ let o = class extends z($(S)) {
           id=${this._dropzoneId}
           role="button"
           tabindex=${this.disabled ? "-1" : "0"}
-          aria-label=${b(this._effectiveLabel || (this.label ? void 0 : t))}
-          aria-labelledby=${b(
+          aria-label=${x(this._effectiveLabel || (this.label ? void 0 : t))}
+          aria-labelledby=${x(
       !this._effectiveLabel && this.label ? this._labelId : void 0
     )}
-          aria-disabled=${this.disabled ? "true" : p}
-          aria-invalid=${e ? "true" : p}
-          aria-describedby=${b(e ? this._errorId : void 0)}
+          aria-disabled=${this.disabled ? "true" : c}
+          aria-invalid=${e ? "true" : c}
+          aria-describedby=${x(e ? this._errorId : void 0)}
           @click=${this._handleDropzoneClick}
           @keydown=${this._handleDropzoneKeyDown}
           @dragover=${this._handleDragOver}
@@ -632,7 +686,7 @@ let o = class extends z($(S)) {
           type="file"
           tabindex="-1"
           aria-hidden="true"
-          accept=${b(this.accept || void 0)}
+          accept=${x(this.accept || void 0)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           @change=${this._handleFileInputChange}
@@ -641,11 +695,11 @@ let o = class extends z($(S)) {
         <slot name="file-list" @slotchange=${this._handleFileListSlotChange}></slot>
 
         ${this._renderFileList()}
-        ${e ? f`
+        ${e ? p`
               <div part="error" class="field__error" id=${this._errorId} role="alert">
                 ${this.error}
               </div>
-            ` : p}
+            ` : c}
 
         <div id=${this._liveId} class="sr-only" aria-live="polite" aria-atomic="true">
           ${this._dragOver ? this.labelDragDetected : ""}
@@ -654,58 +708,61 @@ let o = class extends z($(S)) {
     `;
   }
 };
-o.styles = [k, F];
+o.styles = [C, $];
 o.formAssociated = !0;
 s([
-  n({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], o.prototype, "name", 2);
 s([
-  n({ type: String })
+  a({ type: String })
 ], o.prototype, "accept", 2);
 s([
-  n({ type: Number, attribute: "max-size" })
+  a({ type: Number, attribute: "max-size" })
 ], o.prototype, "maxSize", 2);
 s([
-  n({ type: Number, attribute: "max-files" })
+  a({ type: Number, attribute: "max-files" })
 ], o.prototype, "maxFiles", 2);
 s([
-  n({ type: Boolean })
+  a({ type: Boolean })
 ], o.prototype, "multiple", 2);
 s([
-  n({ type: String })
+  a({ type: String })
 ], o.prototype, "label", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
 s([
-  n({ type: String })
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+s([
+  a({ type: String })
 ], o.prototype, "error", 2);
 s([
-  n({ type: String, attribute: "label-dropzone" })
+  a({ type: String, attribute: "label-dropzone" })
 ], o.prototype, "labelDropzone", 2);
 s([
-  n({ type: String, attribute: "label-file-list" })
+  a({ type: String, attribute: "label-file-list" })
 ], o.prototype, "labelFileList", 2);
 s([
-  n({ type: String, attribute: "accessible-label" })
+  a({ type: String, attribute: "accessible-label" })
 ], o.prototype, "accessibleLabel", 2);
 s([
-  n({ attribute: !1 })
+  a({ attribute: !1 })
 ], o.prototype, "labelUploadProgress", 2);
 s([
-  n({ attribute: "label-drag-detected" })
+  a({ attribute: "label-drag-detected" })
 ], o.prototype, "labelDragDetected", 2);
 s([
-  v()
+  b()
 ], o.prototype, "_files", 2);
 s([
-  v()
+  b()
 ], o.prototype, "_dragOver", 2);
 s([
-  v()
+  b()
 ], o.prototype, "_hasFileListSlot", 2);
 s([
-  x(".file-input")
+  g(".file-input")
 ], o.prototype, "_fileInput", 2);
 o = s([
   _("hx-file-upload")
@@ -713,4 +770,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-file-upload-D3rKROK5.js.map
+//# sourceMappingURL=hx-file-upload-CU5QGZSP.js.map

package/dist/shared/hx-file-upload-CU5QGZSP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-file-upload-CU5QGZSP.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-file-upload-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Label ─── */\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-space-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #66787b));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-text-secondary, #313e4b);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-color: var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #429797);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #429797) 8%,\n        var(--hx-color-surface-default, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-surface-default, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-text-muted, #4a5362);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    min-height: 44px;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-text-muted, #4a5362);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-file-upload-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .file-item__remove-glyph {\n    --hx-icon-size: 14px;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));\n    background-color: var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    width: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));\n    border-radius: inherit;\n    transform-origin: left center;\n    transform: scaleX(var(--_progress-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */\n\n  @media (forced-colors: active) {\n    .dropzone {\n      border: 2px dashed ButtonText;\n      background-color: Canvas;\n      color: ButtonText;\n    }\n\n    .dropzone--drag-over {\n      border: 2px solid Highlight;\n      outline: none;\n      background-color: Canvas;\n    }\n\n    .dropzone--error {\n      border: 2px solid LinkText;\n    }\n\n    .dropzone:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .progress-bar {\n      background: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .file-item__remove:hover {\n      outline: 2px solid Highlight;\n      background-color: transparent;\n      color: ButtonText;\n    }\n\n    .file-item__remove:focus-visible {\n      outline: 2px solid Highlight;\n    }\n\n    :host([disabled]) .dropzone {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '../hx-icon/hx-icon.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextFileUploadId = createIdCounter('hx-file-upload');\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/** Detail for the hx-upload event dispatched by hx-file-upload. */\nexport interface HxFileUploadDetail {\n  files: File[];\n}\n\n/** Detail for the hx-remove event dispatched by hx-file-upload. */\nexport interface HxFileRemoveDetail {\n  file: File;\n  index: number;\n}\n\n/** Detail for the hx-error event dispatched by hx-file-upload. */\nexport interface HxFileErrorDetail {\n  message: string;\n  files: File[];\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-file-upload-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-32] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-file-upload-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-file-upload-progress-height=var(--hx-space-1)] - Height.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-file-upload/AAA-AUDIT.md\n * @keyboard-contract activate=Enter,Space; disabled-suppresses=true\n * @aria-pattern button\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/button/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated true\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-file-upload\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends FormMixin(mixinDelegatesAria(HelixElement)) {\n  static override styles = [helixFileUploadStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the field must have at least one file selected for form submission.\n   * Drives `validity.valueMissing` when the file list is empty.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  /** Accessible label for the selected files list. */\n  @property({ type: String, attribute: 'label-file-list' })\n  labelFileList = 'Selected files';\n\n  /**\n   * Accessible label for the dropzone when no visible label text is provided.\n   * Falls back to `label-dropzone` prop value, then a default string.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the dropzone, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\n\n  /**\n   * Generates upload progress description for screen readers.\n   * @param name - file name\n   * @param progress - progress percentage 0-100\n   */\n  @property({ attribute: false })\n  labelUploadProgress: (name: string, progress: number) => string = (name, progress) =>\n    `Upload progress for ${name}: ${progress}%`;\n\n  /**\n   * Screen reader announcement when file drag detected. Override for i18n.\n   * @attr label-drag-detected\n   */\n  @property({ attribute: 'label-drag-detected' })\n  labelDragDetected = 'File detected. Release to upload.';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _baseId = _nextFileUploadId();\n  /** @internal */\n  private readonly _labelId = `${this._baseId}-label`;\n  /** @internal */\n  private readonly _errorId = `${this._baseId}-error`;\n  /** @internal */\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  /** @internal */\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files' as keyof HelixFileUpload) || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n    this._updateValidity();\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    _state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (_mode === 'restore' || _mode === 'autocomplete') {\n      this._files = [];\n      this._internals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  /**\n   * Constraint validation: surfaces native `validity` flags through\n   * `ElementInternals.setValidity()` so the upload field participates in\n   * `form.checkValidity()` / `form.reportValidity()`.\n   *\n   * Flags applied (in priority order):\n   *   - `valueMissing` when `required` is set and no files are selected.\n   *   - `customError` when any file exceeds `maxSize`. The platform's\n   *     `ValidityState` has no perfect \"file too big\" flag, so `customError`\n   *     is the correct surface per the HTML spec.\n   *   - `customError` when `files.length > maxFiles`.\n   *   - `customError` when `accept` is set and any file's MIME or extension\n   *     does not match the accept pattern.\n   *\n   * The validity anchor is the visible upload trigger (the dropzone button)\n   * inside shadow DOM so `reportValidity()` focuses the correct element. If\n   * the dropzone has not yet rendered, the anchor is omitted.\n   *\n   * Called automatically by `FormMixin.updated()` after every Lit cycle.\n   * @internal\n   */\n  override _updateValidity(): void {\n    const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]') ?? undefined;\n\n    if (this.required && this._files.length === 0) {\n      this._internals.setValidity({ valueMissing: true }, 'Please select a file.', dropzone);\n      return;\n    }\n\n    if (this.maxSize > 0) {\n      for (const entry of this._files) {\n        if (entry.file.size > this.maxSize) {\n          this._internals.setValidity(\n            { customError: true },\n            `File \"${entry.file.name}\" exceeds maximum size of ${this._formatSize(this.maxSize)}.`,\n            dropzone,\n          );\n          return;\n        }\n      }\n    }\n\n    if (this.maxFiles > 0 && this._files.length > this.maxFiles) {\n      this._internals.setValidity(\n        { customError: true },\n        `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n        dropzone,\n      );\n      return;\n    }\n\n    if (this.accept && this._files.length > 0) {\n      for (const entry of this._files) {\n        if (!this._isAccepted(entry.file)) {\n          this._internals.setValidity(\n            { customError: true },\n            `File \"${entry.file.name}\" has an unsupported file type. Accepted types: ${this.accept}.`,\n            dropzone,\n          );\n          return;\n        }\n      }\n    }\n\n    this._internals.setValidity({});\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  /** @internal */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  /** @internal */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  /** @internal */\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this._handleInteractionInput();\n\n      this.dispatchEvent(\n        new CustomEvent<{ files: File[] }>('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  /** @internal */\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  /** @internal */\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  /** @internal */\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  /** @internal */\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  /** @internal */\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  /** @internal */\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  /** @internal */\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent<{ file: File; index: number }>('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n\n    // Restore focus after removal so keyboard users are not stranded.\n    this.updateComplete\n      .then(() => {\n        if (this._files.length === 0) {\n          // List is now empty — return focus to the dropzone.\n          const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]');\n          dropzone?.focus();\n        } else {\n          // Focus the remove button at the same position, or the previous one if\n          // the removed item was the last in the list.\n          const removeButtons =\n            this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-item__remove');\n          if (removeButtons && removeButtons.length > 0) {\n            const targetIndex = index < this._files.length ? index : this._files.length - 1;\n            const targetButton = removeButtons[targetIndex];\n            if (targetButton) {\n              targetButton.focus();\n            }\n          }\n        }\n      })\n      .catch(() => {\n        // Focus restoration is best-effort; ignore errors.\n      });\n  }\n\n  // ─── Formatters ───\n\n  /** @internal */\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=${this.labelFileList}>\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <hx-icon\n                    class=\"file-item__remove-glyph\"\n                    library=\"helix\"\n                    name=\"close\"\n                    aria-hidden=\"true\"\n                  ></hx-icon>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${this.labelUploadProgress(entry.file.name, entry.progress)}\n              >\n                <div\n                  class=\"progress-bar\"\n                  style=\"--_progress-ratio: ${String(entry.progress / 100)}\"\n                ></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(this._effectiveLabel || (!this.label ? dropzoneLabel : undefined))}\n          aria-labelledby=${ifDefined(\n            !this._effectiveLabel && this.label ? this._labelId : undefined,\n          )}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-invalid=${hasError ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${this._dragOver ? this.labelDragDetected : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_nextFileUploadId","createIdCounter","HelixFileUpload","FormMixin","mixinDelegatesAria","HelixElement","name","progress","_a","_b","slot","changedProperties","errorEl","msg","disabled","_state","_mode","firstEntry","formData","entry","dropzone","file","maxMb","tokens","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dt","input","removedFile","_","removeButtons","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","forcedColorsField","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/hx-help-text-CNaZ82LT.js

@@ -0,0 +1,137 @@
+import { css as p, nothing as h, html as o } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { a as g } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+const d = p`
+  :host {
+    display: block;
+  }
+
+  .help-text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hx-help-text-icon-gap, 0.375rem);
+    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
+    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
+    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
+    color: var(--hx-help-text-color, var(--hx-color-text-muted, #4a5362));
+    margin: 0;
+  }
+
+  .help-text__icon {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* Render the migrated hx-icon glyph at 1em (matches the previous inline SVG sizing). */
+  .help-text__glyph {
+    --hx-icon-size: 1em;
+  }
+
+  .help-text__text {
+    min-width: 0;
+  }
+
+  /* ─── Variant: default ─── */
+
+  .help-text--default {
+    --hx-help-text-color: var(--hx-color-text-muted, #4a5362);
+  }
+
+  /* ─── Variant: error ─── */
+
+  .help-text--error {
+    --hx-help-text-color: var(--hx-color-error-600, #c92a2a);
+  }
+
+  /* ─── Variant: warning ─── */
+
+  .help-text--warning {
+    --hx-help-text-color: var(--hx-color-warning-700, #804605);
+  }
+
+  /* ─── Variant: success ─── */
+
+  .help-text--success {
+    --hx-help-text-color: var(--hx-color-success-700, #146831);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .help-text {
+      color: GrayText;
+    }
+
+    .help-text--error {
+      color: LinkText;
+    }
+
+    .help-text--warning {
+      color: CanvasText;
+    }
+
+    .help-text--success {
+      color: CanvasText;
+    }
+  }
+`;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, x = (l, e, a, r) => {
+  for (var t = r > 1 ? void 0 : r ? y(e, a) : e, n = l.length - 1, s; n >= 0; n--)
+    (s = l[n]) && (t = (r ? s(e, a, t) : s(t)) || t);
+  return r && t && _(e, a, t), t;
+};
+const w = o`<hx-icon
+  class="help-text__glyph"
+  library="helix"
+  name="error"
+  aria-hidden="true"
+></hx-icon>`, b = o`<hx-icon
+  class="help-text__glyph"
+  library="helix"
+  name="warning"
+  aria-hidden="true"
+></hx-icon>`, H = o`<hx-icon
+  class="help-text__glyph"
+  library="helix"
+  name="success"
+  aria-hidden="true"
+></hx-icon>`, T = {
+  default: h,
+  error: w,
+  warning: b,
+  success: H
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "default";
+  }
+  render() {
+    const l = {
+      "help-text": !0,
+      [`help-text--${this.variant}`]: !0
+    }, e = T[this.variant], a = this.variant === "error" ? "alert" : void 0, r = this.variant === "warning" || this.variant === "success" ? "polite" : void 0;
+    return o`<span
+      part="base"
+      class=${v(l)}
+      role=${c(a)}
+      aria-live=${c(r)}
+      >${e !== h ? o`<span part="icon" class="help-text__icon">${e}</span>` : h}<span part="text" class="help-text__text"><slot></slot></span>
+    </span>`;
+  }
+};
+i.styles = [d, g];
+x([
+  m({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+i = x([
+  f("hx-help-text")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-help-text-CNaZ82LT.js.map