@birdapi/velinstyle 1.0.0 → 1.2.0

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
+};

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

@@ -0,0 +1,154 @@
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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
+};