@birdapi/velinstyle 1.1.0 → 1.2.0

package/dist/chunks/velin-data-table-UVR42UUM.js

@@ -0,0 +1,372 @@
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
+
+// components/velin-data-table.js
+var SORT_TYPES = /* @__PURE__ */ new Set(["text", "number", "date"]);
+var warnedMissingName = false;
+function sortValue(cell, type) {
+  const raw = cell?.dataset?.sortValue ?? cell?.textContent ?? "";
+  const text = raw.trim();
+  if (type === "number") {
+    const num = Number.parseFloat(text.replace(/[^\d.,-]/g, "").replace(",", "."));
+    return Number.isNaN(num) ? Number.NEGATIVE_INFINITY : num;
+  }
+  if (type === "date") {
+    const time = Date.parse(text);
+    return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+  }
+  return text.toLowerCase();
+}
+var VelinDataTable = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["page-size", "filter-input", "empty-text", "label", "editable"];
+  }
+  constructor() {
+    super();
+    this._table = null;
+    this._page = 1;
+    this._query = "";
+    this._sortIndex = -1;
+    this._sortDirection = "ascending";
+    this._filterEl = null;
+    this._pagination = null;
+    this._emptyRow = null;
+    this._filterTimer = null;
+    this._onFilterInput = this._onFilterInput.bind(this);
+  }
+  connectedCallback() {
+    this.classList.add("velin-data-table");
+    requestAnimationFrame(() => this._init());
+  }
+  disconnectedCallback() {
+    if (this._filterEl) this._filterEl.removeEventListener("input", this._onFilterInput);
+    if (this._filterTimer) clearTimeout(this._filterTimer);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this._table) return;
+    if (name === "page-size") {
+      this._page = 1;
+      this._render();
+    } else if (name === "filter-input") {
+      this._bindFilterInput();
+    } else if (name === "label") {
+      this._ensureAccessibleName();
+    }
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  /** @returns {HTMLTableRowElement[]} */
+  get rows() {
+    const body = this._table?.tBodies?.[0];
+    return body ? [...body.rows].filter((row) => row !== this._emptyRow) : [];
+  }
+  /** Rows matching the current filter, across all pages. */
+  get matchingRows() {
+    return this.rows.filter((row) => !row.dataset.velinFiltered);
+  }
+  /** Rows visible on the current page. */
+  get visibleRows() {
+    return this.matchingRows.filter((row) => !row.hidden);
+  }
+  get page() {
+    return this._page;
+  }
+  get pageSize() {
+    const size = Number.parseInt(this.getAttribute("page-size") || "", 10);
+    return Number.isFinite(size) && size > 0 ? size : 0;
+  }
+  get pageCount() {
+    const size = this.pageSize;
+    if (!size) return 1;
+    return Math.max(1, Math.ceil(this.matchingRows.length / size));
+  }
+  /**
+   * @param {number} index Column index
+   * @param {'ascending' | 'descending'} [direction]
+   */
+  sort(index, direction) {
+    const headers = this._headers();
+    const header = headers[index];
+    if (!header) return;
+    const type = this._sortType(header);
+    if (type === "none") return;
+    this._sortDirection = direction || (this._sortIndex === index && this._sortDirection === "ascending" ? "descending" : "ascending");
+    this._sortIndex = index;
+    const factor = this._sortDirection === "ascending" ? 1 : -1;
+    const body = this._table.tBodies[0];
+    const sorted = this.rows.slice().sort((a, b) => {
+      const av = sortValue(a.cells[index], type);
+      const bv = sortValue(b.cells[index], type);
+      if (av < bv) return -1 * factor;
+      if (av > bv) return 1 * factor;
+      return 0;
+    });
+    for (const row of sorted) body.appendChild(row);
+    this._syncSortState();
+    this._page = 1;
+    this._render();
+    const label = header.dataset.sortLabel || header.textContent.trim();
+    announce(`${label} sorted ${this._sortDirection}`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-sort", {
+      bubbles: true,
+      detail: { index, direction: this._sortDirection, column: label }
+    }));
+  }
+  /** @param {string} query */
+  filter(query) {
+    this._query = String(query || "").trim().toLowerCase();
+    for (const row of this.rows) {
+      const match = !this._query || this._rowText(row).includes(this._query);
+      if (match) delete row.dataset.velinFiltered;
+      else row.dataset.velinFiltered = "true";
+    }
+    this._page = 1;
+    this._render();
+    const count = this.matchingRows.length;
+    announce(count === 1 ? "1 row matches" : `${count} rows match`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-filter", {
+      bubbles: true,
+      detail: { query: this._query, count }
+    }));
+  }
+  /** @param {number} page */
+  goToPage(page) {
+    const target = Math.min(Math.max(1, Math.trunc(page) || 1), this.pageCount);
+    if (target === this._page) return;
+    this._page = target;
+    this._render();
+    announce(`Page ${this._page} of ${this.pageCount}`);
+    this.dispatchEvent(new CustomEvent("velin-data-table-page", {
+      bubbles: true,
+      detail: { page: this._page, pageCount: this.pageCount }
+    }));
+  }
+  // ── Setup ──────────────────────────────────────────────────────────────────
+  _init() {
+    this._table = this.querySelector("table");
+    if (!this._table || !this._table.tBodies.length) return;
+    this._ensureAccessibleName();
+    this._setupSorting();
+    this._setupEditable();
+    this._bindFilterInput();
+    this._render();
+  }
+  _headers() {
+    const headRow = this._table.tHead?.rows?.[0];
+    return headRow ? [...headRow.cells] : [];
+  }
+  /** @param {HTMLTableCellElement} header */
+  _sortType(header) {
+    const declared = (header.dataset.sort || "").toLowerCase();
+    if (declared === "none") return "none";
+    if (SORT_TYPES.has(declared)) return declared;
+    return this.hasAttribute("sortable") ? "text" : "none";
+  }
+  /**
+   * A table without a name is unusable with a screen reader, so surface it
+   * instead of failing silently (WCAG 1.3.1 / 2.4.6).
+   */
+  _ensureAccessibleName() {
+    const table = this._table;
+    if (!table) return;
+    const label = this.getAttribute("label");
+    const hasName = table.caption?.textContent.trim() || table.getAttribute("aria-label")?.trim() || table.getAttribute("aria-labelledby")?.trim();
+    if (!hasName && label) {
+      table.setAttribute("aria-label", label);
+      return;
+    }
+    if (!hasName && !warnedMissingName) {
+      warnedMissingName = true;
+      console.warn("[velinstyle] <velin-data-table> needs a <caption>, aria-label, or a label attribute.");
+    }
+  }
+  /** Sortable headers get a real button so keyboard and AT support come for free. */
+  _setupSorting() {
+    this._headers().forEach((header, index) => {
+      if (this._sortType(header) === "none") return;
+      if (header.querySelector(".velin-data-table__sort")) return;
+      const label = header.textContent.trim();
+      header.dataset.sortLabel = label;
+      header.setAttribute("aria-sort", "none");
+      header.classList.add("velin-data-table__th");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "velin-data-table__sort";
+      button.textContent = label;
+      const icon = document.createElement("span");
+      icon.className = "velin-data-table__sort-icon";
+      icon.setAttribute("aria-hidden", "true");
+      button.appendChild(icon);
+      button.addEventListener("click", () => this.sort(index));
+      header.textContent = "";
+      header.appendChild(button);
+    });
+  }
+  /**
+   * Inline edit: double-click or Enter on focused cell with data-editable / host editable.
+   * Enter saves, Escape cancels. Dispatches velin-data-table-edit.
+   */
+  _setupEditable() {
+    if (!this.hasAttribute("editable") && !this.querySelector("[data-editable]")) return;
+    const body = this._table.tBodies[0];
+    if (!body || body.dataset.velinEditBound) return;
+    body.dataset.velinEditBound = "true";
+    body.addEventListener("dblclick", (e) => {
+      const cell = e.target.closest("td");
+      if (!cell || !body.contains(cell)) return;
+      if (!this.hasAttribute("editable") && !cell.hasAttribute("data-editable")) return;
+      this._beginEdit(cell);
+    });
+    body.addEventListener("keydown", (e) => {
+      const cell = e.target.closest("td");
+      if (!cell || e.target !== cell) return;
+      if (e.key === "Enter" || e.key === "F2") {
+        if (!this.hasAttribute("editable") && !cell.hasAttribute("data-editable")) return;
+        e.preventDefault();
+        this._beginEdit(cell);
+      }
+    });
+    for (const cell of body.querySelectorAll("td[data-editable], td")) {
+      if (!this.hasAttribute("editable") && !cell.hasAttribute("data-editable")) continue;
+      if (!cell.hasAttribute("tabindex")) cell.setAttribute("tabindex", "0");
+    }
+  }
+  /** @param {HTMLTableCellElement} cell */
+  _beginEdit(cell) {
+    if (cell.querySelector("input")) return;
+    const previous = cell.textContent.trim();
+    const input = document.createElement("input");
+    input.className = "velin-input velin-data-table__edit";
+    input.value = previous;
+    input.setAttribute("aria-label", "Edit cell");
+    cell.textContent = "";
+    cell.appendChild(input);
+    input.focus();
+    input.select();
+    const commit = (save) => {
+      const next = save ? input.value.trim() : previous;
+      cell.textContent = next;
+      if (save && next !== previous) {
+        this.dispatchEvent(new CustomEvent("velin-data-table-edit", {
+          bubbles: true,
+          detail: {
+            cell,
+            row: cell.parentElement,
+            previous,
+            value: next,
+            columnIndex: cell.cellIndex
+          }
+        }));
+        announce("Cell updated");
+      }
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commit(true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        commit(false);
+      }
+    });
+    input.addEventListener("blur", () => commit(true));
+  }
+  _syncSortState() {
+    this._headers().forEach((header, index) => {
+      if (this._sortType(header) === "none") return;
+      const active = index === this._sortIndex;
+      header.setAttribute("aria-sort", active ? this._sortDirection : "none");
+      header.querySelector(".velin-data-table__sort")?.classList.toggle("velin-data-table__sort--active", active);
+    });
+  }
+  _bindFilterInput() {
+    if (this._filterEl) this._filterEl.removeEventListener("input", this._onFilterInput);
+    const selector = this.getAttribute("filter-input");
+    this._filterEl = selector ? document.querySelector(selector) : null;
+    if (this._filterEl) this._filterEl.addEventListener("input", this._onFilterInput);
+  }
+  _onFilterInput(event) {
+    if (this._filterTimer) clearTimeout(this._filterTimer);
+    const value = event.target.value;
+    this._filterTimer = setTimeout(() => this.filter(value), 150);
+  }
+  /** @param {HTMLTableRowElement} row */
+  _rowText(row) {
+    const scoped = [...row.cells].filter((cell) => cell.hasAttribute("data-filter"));
+    const cells = scoped.length ? scoped : [...row.cells];
+    return cells.map((cell) => cell.textContent || "").join(" ").toLowerCase();
+  }
+  // ── Rendering ──────────────────────────────────────────────────────────────
+  _render() {
+    const size = this.pageSize;
+    this._page = Math.min(this._page, this.pageCount);
+    const matching = this.matchingRows;
+    const start = size ? (this._page - 1) * size : 0;
+    const end = size ? start + size : matching.length;
+    for (const row of this.rows) {
+      const index = matching.indexOf(row);
+      row.hidden = index === -1 || index < start || index >= end;
+    }
+    this._renderEmptyState(matching.length === 0);
+    this._renderPagination();
+  }
+  /** @param {boolean} isEmpty */
+  _renderEmptyState(isEmpty) {
+    if (!isEmpty) {
+      this._emptyRow?.remove();
+      this._emptyRow = null;
+      return;
+    }
+    if (this._emptyRow?.isConnected) return;
+    const columns = this._headers().length || 1;
+    const row = document.createElement("tr");
+    row.className = "velin-data-table__empty";
+    const cell = document.createElement("td");
+    cell.colSpan = columns;
+    cell.textContent = this.getAttribute("empty-text") || "No matching rows";
+    row.appendChild(cell);
+    this._table.tBodies[0].appendChild(row);
+    this._emptyRow = row;
+  }
+  _renderPagination() {
+    if (!this.pageSize || this.pageCount <= 1) {
+      this._pagination?.remove();
+      this._pagination = null;
+      return;
+    }
+    if (!this._pagination?.isConnected) {
+      const nav = document.createElement("nav");
+      nav.className = "velin-data-table__pagination";
+      nav.setAttribute("aria-label", this.getAttribute("pagination-label") || "Table pagination");
+      const previous2 = document.createElement("button");
+      previous2.type = "button";
+      previous2.className = "velin-btn velin-btn--outline velin-btn--sm";
+      previous2.dataset.velinPage = "previous";
+      previous2.textContent = this.getAttribute("previous-text") || "Previous";
+      previous2.addEventListener("click", () => this.goToPage(this._page - 1));
+      const status2 = document.createElement("p");
+      status2.className = "velin-data-table__page-status";
+      status2.dataset.velinPage = "status";
+      const next2 = document.createElement("button");
+      next2.type = "button";
+      next2.className = "velin-btn velin-btn--outline velin-btn--sm";
+      next2.dataset.velinPage = "next";
+      next2.textContent = this.getAttribute("next-text") || "Next";
+      next2.addEventListener("click", () => this.goToPage(this._page + 1));
+      nav.append(previous2, status2, next2);
+      this.appendChild(nav);
+      this._pagination = nav;
+    }
+    const status = this._pagination.querySelector('[data-velin-page="status"]');
+    if (status) status.textContent = `Page ${this._page} of ${this.pageCount}`;
+    const previous = this._pagination.querySelector('[data-velin-page="previous"]');
+    const next = this._pagination.querySelector('[data-velin-page="next"]');
+    if (previous) previous.disabled = this._page <= 1;
+    if (next) next.disabled = this._page >= this.pageCount;
+  }
+};
+customElements.define("velin-data-table", VelinDataTable);
+var velin_data_table_default = VelinDataTable;
+export {
+  velin_data_table_default as default
+};

package/dist/chunks/{velin-dialog-GTTZI564.js → velin-dialog-3YK2RPRV.js}

@@ -1,6 +1,6 @@
 import {
   escapeHTML
-} from "./chunk-RDE3QE7Z.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-dialog.js
 var styles = `
@@ -70,6 +70,10 @@ var VelinDialog = class extends HTMLElement {
   }
   connectedCallback() {
     this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
+    const dialog = this.shadowRoot.querySelector("dialog");
+    if (dialog) {
+      dialog.setAttribute("aria-label", this.getAttribute("aria-label") || "Dialog");
+    }
   }
   alert(message, { title = "Alert", confirmText = "OK" } = {}) {
     return this._show("alert", message, { title, confirmText });
@@ -99,6 +103,7 @@ var VelinDialog = class extends HTMLElement {
       <div class="footer">${footerBtns}</div>
     `;
     dialog.setAttribute("aria-modal", "true");
+    dialog.removeAttribute("aria-label");
     dialog.setAttribute("aria-labelledby", titleId);
     dialog.showModal();
     if (type !== "prompt") {
@@ -137,7 +142,9 @@ var VelinDialog = class extends HTMLElement {
     }
     this._resolve(value);
     this._resolve = null;
-    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail: { value } }));
+    const detail = { value };
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true, detail }));
+    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail }));
   }
 };
 customElements.define("velin-dialog", VelinDialog);

package/dist/chunks/{velin-dialog-ELFOZIXZ.js → velin-dialog-S24KAP4S.js}

@@ -142,7 +142,9 @@ var VelinDialog = class extends HTMLElement {
     }
     this._resolve(value);
     this._resolve = null;
-    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail: { value } }));
+    const detail = { value };
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true, detail }));
+    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail }));
   }
 };
 customElements.define("velin-dialog", VelinDialog);

package/dist/chunks/{velin-drawer-BE6TYN3H.js → velin-drawer-5PNU624J.js}

@@ -99,7 +99,6 @@ var VelinDrawer = class extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKey);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -107,8 +106,7 @@ var VelinDrawer = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
   _onKey(e) {
@@ -120,7 +118,7 @@ var VelinDrawer = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-drawer", VelinDrawer);

package/dist/chunks/{velin-drawer-DLL2GLT6.js → velin-drawer-CCM6S25D.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-drawer.js
 var styles = `
@@ -99,7 +99,6 @@ var VelinDrawer = class extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKey);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -107,8 +106,7 @@ var VelinDrawer = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
   _onKey(e) {
@@ -120,7 +118,7 @@ var VelinDrawer = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-drawer", VelinDrawer);

package/dist/chunks/{velin-email-RBX6ZR4S.js → velin-email-TNFONXPW.js}

@@ -1,7 +1,7 @@
 import {
   escapeHTML,
   escapeHTMLAttribute
-} from "./chunk-LA7264K4.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-email.js
 var styles = `

package/dist/chunks/velin-file-dropzone-QRGF2JNA.js

@@ -0,0 +1,154 @@
+import {
+  escapeHTML
+} from "./chunk-L7ZGUU4D.js";
+
+// components/velin-file-dropzone.js
+var styles = `
+  :host { display: block; }
+  .zone {
+    border: 2px dashed var(--velin-color-border, #cbd5e1);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    padding: var(--velin-space-6, 1.5rem);
+    background: var(--velin-color-surface-dim, var(--velin-color-bg-subtle, #f8fafc));
+    color: var(--velin-color-text, #111);
+    text-align: center;
+    transition: border-color 150ms ease, background 150ms ease;
+  }
+  :host([dragging]) .zone {
+    border-color: var(--velin-color-primary, #2563eb);
+    background: var(--velin-color-primary-subtle, #eff6ff);
+  }
+  .hint { margin: 0 0 var(--velin-space-3, 0.75rem); color: var(--velin-color-text-muted, #64748b); }
+  .browse {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-block-size: 2.75rem; padding-inline: var(--velin-space-4, 1rem);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    border: none; cursor: pointer;
+    background: var(--velin-color-primary, #2563eb);
+    color: var(--velin-color-on-primary, #fff);
+    font: inherit;
+  }
+  .browse:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  input[type="file"] {
+    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); border: 0;
+  }
+  .list { list-style: none; padding: 0; margin: var(--velin-space-4, 1rem) 0 0; text-align: start; }
+  .list li {
+    display: flex; justify-content: space-between; gap: var(--velin-space-3, 0.75rem);
+    padding: var(--velin-space-2, 0.5rem) 0;
+    border-block-end: 1px solid var(--velin-color-border, #e2e8f0);
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  .progress {
+    margin-block-start: var(--velin-space-3, 0.75rem);
+    block-size: 0.5rem; border-radius: 999px;
+    background: var(--velin-color-border, #e2e8f0); overflow: hidden;
+  }
+  .bar {
+    block-size: 100%; inline-size: 0%;
+    background: var(--velin-color-primary, #2563eb);
+    transition: inline-size 150ms ease;
+  }
+  .status { margin: var(--velin-space-2, 0.5rem) 0 0; font-size: var(--velin-text-sm, 0.875rem); }
+  .status[data-tone="error"] { color: var(--velin-color-danger, #b91c1c); }
+`;
+var VelinFileDropzone = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["accept", "multiple", "label", "progress"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._files = [];
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot?.querySelector(".zone")) this._render();
+  }
+  get files() {
+    return this._files.slice();
+  }
+  _emitFiles(fileList) {
+    const accept = this.getAttribute("accept");
+    const files = [...fileList];
+    if (accept) {
+      const parts = accept.split(",").map((s) => s.trim().toLowerCase());
+      const bad = files.find((f) => {
+        const name = f.name.toLowerCase();
+        const type = (f.type || "").toLowerCase();
+        return !parts.some((p) => p.startsWith(".") ? name.endsWith(p) : type === p || type.startsWith(p.replace("/*", "/")));
+      });
+      if (bad) {
+        this._setStatus(`File type not allowed: ${bad.name}`, "error");
+        this.dispatchEvent(new CustomEvent("velin-error", { bubbles: true, detail: { message: "accept", file: bad } }));
+        return;
+      }
+    }
+    this._files = files;
+    this._setStatus(files.length ? `${files.length} file(s) ready` : "", "ok");
+    this.dispatchEvent(new CustomEvent("velin-files", { bubbles: true, detail: { files } }));
+    this._renderList();
+  }
+  _setStatus(text, tone = "ok") {
+    const el = this.shadowRoot?.querySelector(".status");
+    if (!el) return;
+    el.textContent = text;
+    el.dataset.tone = tone;
+  }
+  _renderList() {
+    const ul = this.shadowRoot?.querySelector(".list");
+    if (!ul) return;
+    ul.innerHTML = this._files.map((f) => `<li><span>${escapeHTML(f.name)}</span><span>${Math.round(f.size / 1024)} KB</span></li>`).join("");
+  }
+  _render() {
+    const label = escapeHTML(this.getAttribute("label") || "Upload files");
+    const accept = this.getAttribute("accept") || "";
+    const multiple = this.hasAttribute("multiple");
+    const progress = Math.max(0, Math.min(100, Number(this.getAttribute("progress") || 0)));
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="zone" role="group" aria-label="${label}">
+        <p class="hint">Drag and drop files here, or browse. Client-side only \u2014 wire <code>velin-files</code> to your upload API.</p>
+        <button type="button" class="browse">Browse files</button>
+        <input type="file" ${accept ? `accept="${escapeHTML(accept)}"` : ""} ${multiple ? "multiple" : ""} />
+        <div class="progress" hidden="${progress <= 0 ? "true" : "false"}" aria-hidden="${progress <= 0 ? "true" : "false"}">
+          <div class="bar" style="inline-size:${progress}%"></div>
+        </div>
+        <p class="status" role="status" aria-live="polite"></p>
+        <ul class="list"></ul>
+      </div>
+    `;
+    const input = this.shadowRoot.querySelector("input");
+    const browse = this.shadowRoot.querySelector(".browse");
+    const zone = this.shadowRoot.querySelector(".zone");
+    browse.addEventListener("click", () => input.click());
+    input.addEventListener("change", () => {
+      if (input.files?.length) this._emitFiles(input.files);
+    });
+    ["dragenter", "dragover"].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.setAttribute("dragging", "");
+      });
+    });
+    ["dragleave", "drop"].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.removeAttribute("dragging");
+      });
+    });
+    zone.addEventListener("drop", (e) => {
+      const list = e.dataTransfer?.files;
+      if (list?.length) this._emitFiles(list);
+    });
+    this._renderList();
+  }
+};
+customElements.define("velin-file-dropzone", VelinFileDropzone);
+var velin_file_dropzone_default = VelinFileDropzone;
+export {
+  velin_file_dropzone_default as default
+};