@birdapi/velinstyle 1.1.0 → 1.2.1

package/dist/chunks/velin-dialog-D2GUHSCD.js

@@ -1,144 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-RDE3QE7Z.js";
-
-// components/velin-dialog.js
-var styles = `
-  :host { display: contents; }
-  dialog {
-    border: none; border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
-    padding: 0; max-inline-size: min(28rem, 90vw); inline-size: 100%;
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  dialog::backdrop { background: rgba(0,0,0,0.5); }
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .title { font-size: var(--velin-text-lg, 1.125rem); font-weight: 600; margin: 0; }
-  .close {
-    background: none; border: none; cursor: pointer; font-size: 1.25rem;
-    color: var(--velin-color-text-muted, #888); min-width: 2.75rem; min-height: 2.75rem;
-    display: flex; align-items: center; justify-content: center;
-    border-radius: var(--velin-radius-sm, 0.25rem);
-  }
-  .close:hover { background: var(--velin-color-surface-dim, #f5f5f5); }
-  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .body { padding: var(--velin-space-6, 1.5rem); }
-  .footer {
-    display: flex; justify-content: flex-end; gap: var(--velin-space-2, 0.5rem);
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-top: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .btn {
-    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); cursor: pointer;
-    min-height: 2.75rem; border: 1px solid var(--velin-color-border, #ddd);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .btn--primary {
-    background: var(--velin-color-primary, #2563eb);
-    color: var(--velin-color-on-primary, #fff);
-    border-color: var(--velin-color-primary, #2563eb);
-  }
-  .btn--danger {
-    background: var(--velin-color-danger, #dc2626);
-    color: #fff; border-color: var(--velin-color-danger, #dc2626);
-  }
-  .btn:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .input {
-    inline-size: 100%; padding: var(--velin-space-3, 0.75rem);
-    border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); margin-top: var(--velin-space-3, 0.75rem);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .input:focus { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 0; border-color: var(--velin-color-primary, #2563eb); }
-`;
-var VelinDialog = class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._resolve = null;
-    this._previousFocus = null;
-  }
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
-  }
-  alert(message, { title = "Alert", confirmText = "OK" } = {}) {
-    return this._show("alert", message, { title, confirmText });
-  }
-  confirm(message, { title = "Confirm", confirmText = "Confirm", cancelText = "Cancel", danger = false } = {}) {
-    return this._show("confirm", message, { title, confirmText, cancelText, danger });
-  }
-  prompt(message, { title = "Input", confirmText = "Submit", cancelText = "Cancel", placeholder = "", defaultValue = "" } = {}) {
-    return this._show("prompt", message, { title, confirmText, cancelText, placeholder, defaultValue });
-  }
-  _show(type, message, opts) {
-    const dialog = this.shadowRoot.querySelector("dialog");
-    this._previousFocus = document.activeElement;
-    const safeTitle = escapeHTML(opts.title);
-    const safeMsg = escapeHTML(message);
-    const safeConfirm = escapeHTML(opts.confirmText);
-    const safeCancel = escapeHTML(opts.cancelText || "");
-    const safePlaceholder = escapeHTML(opts.placeholder || "");
-    const safeDefault = escapeHTML(opts.defaultValue || "");
-    const footerBtns = type === "alert" ? `<button class="btn btn--primary" data-action="confirm">${safeConfirm}</button>` : `<button class="btn" data-action="cancel">${safeCancel}</button>
-         <button class="btn ${opts.danger ? "btn--danger" : "btn--primary"}" data-action="confirm">${safeConfirm}</button>`;
-    const input = type === "prompt" ? `<input class="input" placeholder="${safePlaceholder}" value="${safeDefault}" part="input">` : "";
-    dialog.innerHTML = `
-      <div class="header"><h3 class="title">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
-      <div class="body"><p>${safeMsg}</p>${input}</div>
-      <div class="footer">${footerBtns}</div>
-    `;
-    dialog.showModal();
-    if (type !== "prompt") {
-      const firstBtn = dialog.querySelector("[data-action]");
-      if (firstBtn) firstBtn.focus();
-    }
-    return new Promise((resolve) => {
-      this._resolve = resolve;
-      dialog.querySelector(".close").addEventListener("click", () => this._dismiss(type, false, dialog));
-      dialog.querySelectorAll("[data-action]").forEach((btn) => {
-        btn.addEventListener("click", () => this._dismiss(type, btn.dataset.action === "confirm", dialog));
-      });
-      dialog.addEventListener("cancel", (e) => {
-        e.preventDefault();
-        this._dismiss(type, false, dialog);
-      });
-      if (type === "prompt") {
-        const inp = dialog.querySelector(".input");
-        inp.focus();
-        inp.addEventListener("keydown", (e) => {
-          if (e.key === "Enter") this._dismiss(type, true, dialog);
-        });
-      }
-    });
-  }
-  _dismiss(type, confirmed, dialog) {
-    if (!this._resolve) return;
-    let value;
-    if (type === "alert") value = true;
-    else if (type === "confirm") value = confirmed;
-    else value = confirmed ? dialog.querySelector(".input")?.value ?? "" : null;
-    dialog.close();
-    if (this._previousFocus) {
-      this._previousFocus.focus();
-      this._previousFocus = null;
-    }
-    this._resolve(value);
-    this._resolve = null;
-    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail: { value } }));
-  }
-};
-customElements.define("velin-dialog", VelinDialog);
-var velin_dialog_default = VelinDialog;
-export {
-  velin_dialog_default as default
-};

package/dist/chunks/velin-dialog-IJLFDXAJ.js

@@ -1,144 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-dialog.js
-var styles = `
-  :host { display: contents; }
-  dialog {
-    border: none; border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
-    padding: 0; max-inline-size: min(28rem, 90vw); inline-size: 100%;
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  dialog::backdrop { background: rgba(0,0,0,0.5); }
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .title { font-size: var(--velin-text-lg, 1.125rem); font-weight: 600; margin: 0; }
-  .close {
-    background: none; border: none; cursor: pointer; font-size: 1.25rem;
-    color: var(--velin-color-text-muted, #888); min-width: 2.75rem; min-height: 2.75rem;
-    display: flex; align-items: center; justify-content: center;
-    border-radius: var(--velin-radius-sm, 0.25rem);
-  }
-  .close:hover { background: var(--velin-color-surface-dim, #f5f5f5); }
-  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .body { padding: var(--velin-space-6, 1.5rem); }
-  .footer {
-    display: flex; justify-content: flex-end; gap: var(--velin-space-2, 0.5rem);
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-top: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .btn {
-    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); cursor: pointer;
-    min-height: 2.75rem; border: 1px solid var(--velin-color-border, #ddd);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .btn--primary {
-    background: var(--velin-color-primary, #2563eb);
-    color: var(--velin-color-on-primary, #fff);
-    border-color: var(--velin-color-primary, #2563eb);
-  }
-  .btn--danger {
-    background: var(--velin-color-danger, #dc2626);
-    color: #fff; border-color: var(--velin-color-danger, #dc2626);
-  }
-  .btn:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .input {
-    inline-size: 100%; padding: var(--velin-space-3, 0.75rem);
-    border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); margin-top: var(--velin-space-3, 0.75rem);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .input:focus { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 0; border-color: var(--velin-color-primary, #2563eb); }
-`;
-var VelinDialog = class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._resolve = null;
-    this._previousFocus = null;
-  }
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
-  }
-  alert(message, { title = "Alert", confirmText = "OK" } = {}) {
-    return this._show("alert", message, { title, confirmText });
-  }
-  confirm(message, { title = "Confirm", confirmText = "Confirm", cancelText = "Cancel", danger = false } = {}) {
-    return this._show("confirm", message, { title, confirmText, cancelText, danger });
-  }
-  prompt(message, { title = "Input", confirmText = "Submit", cancelText = "Cancel", placeholder = "", defaultValue = "" } = {}) {
-    return this._show("prompt", message, { title, confirmText, cancelText, placeholder, defaultValue });
-  }
-  _show(type, message, opts) {
-    const dialog = this.shadowRoot.querySelector("dialog");
-    this._previousFocus = document.activeElement;
-    const safeTitle = escapeHTML(opts.title);
-    const safeMsg = escapeHTML(message);
-    const safeConfirm = escapeHTML(opts.confirmText);
-    const safeCancel = escapeHTML(opts.cancelText || "");
-    const safePlaceholder = escapeHTML(opts.placeholder || "");
-    const safeDefault = escapeHTML(opts.defaultValue || "");
-    const footerBtns = type === "alert" ? `<button class="btn btn--primary" data-action="confirm">${safeConfirm}</button>` : `<button class="btn" data-action="cancel">${safeCancel}</button>
-         <button class="btn ${opts.danger ? "btn--danger" : "btn--primary"}" data-action="confirm">${safeConfirm}</button>`;
-    const input = type === "prompt" ? `<input class="input" placeholder="${safePlaceholder}" value="${safeDefault}" part="input">` : "";
-    dialog.innerHTML = `
-      <div class="header"><h3 class="title">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
-      <div class="body"><p>${safeMsg}</p>${input}</div>
-      <div class="footer">${footerBtns}</div>
-    `;
-    dialog.showModal();
-    if (type !== "prompt") {
-      const firstBtn = dialog.querySelector("[data-action]");
-      if (firstBtn) firstBtn.focus();
-    }
-    return new Promise((resolve) => {
-      this._resolve = resolve;
-      dialog.querySelector(".close").addEventListener("click", () => this._dismiss(type, false, dialog));
-      dialog.querySelectorAll("[data-action]").forEach((btn) => {
-        btn.addEventListener("click", () => this._dismiss(type, btn.dataset.action === "confirm", dialog));
-      });
-      dialog.addEventListener("cancel", (e) => {
-        e.preventDefault();
-        this._dismiss(type, false, dialog);
-      });
-      if (type === "prompt") {
-        const inp = dialog.querySelector(".input");
-        inp.focus();
-        inp.addEventListener("keydown", (e) => {
-          if (e.key === "Enter") this._dismiss(type, true, dialog);
-        });
-      }
-    });
-  }
-  _dismiss(type, confirmed, dialog) {
-    if (!this._resolve) return;
-    let value;
-    if (type === "alert") value = true;
-    else if (type === "confirm") value = confirmed;
-    else value = confirmed ? dialog.querySelector(".input")?.value ?? "" : null;
-    dialog.close();
-    if (this._previousFocus) {
-      this._previousFocus.focus();
-      this._previousFocus = null;
-    }
-    this._resolve(value);
-    this._resolve = null;
-    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail: { value } }));
-  }
-};
-customElements.define("velin-dialog", VelinDialog);
-var velin_dialog_default = VelinDialog;
-export {
-  velin_dialog_default as default
-};

package/dist/chunks/velin-dialog-TNS3WXMB.js

@@ -1,144 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-dialog.js
-var styles = `
-  :host { display: contents; }
-  dialog {
-    border: none; border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
-    padding: 0; max-inline-size: min(28rem, 90vw); inline-size: 100%;
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  dialog::backdrop { background: rgba(0,0,0,0.5); }
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-bottom: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .title { font-size: var(--velin-text-lg, 1.125rem); font-weight: 600; margin: 0; }
-  .close {
-    background: none; border: none; cursor: pointer; font-size: 1.25rem;
-    color: var(--velin-color-text-muted, #888); min-width: 2.75rem; min-height: 2.75rem;
-    display: flex; align-items: center; justify-content: center;
-    border-radius: var(--velin-radius-sm, 0.25rem);
-  }
-  .close:hover { background: var(--velin-color-surface-dim, #f5f5f5); }
-  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .body { padding: var(--velin-space-6, 1.5rem); }
-  .footer {
-    display: flex; justify-content: flex-end; gap: var(--velin-space-2, 0.5rem);
-    padding: var(--velin-space-4, 1rem) var(--velin-space-6, 1.5rem);
-    border-top: 1px solid var(--velin-color-border, #e5e5e5);
-  }
-  .btn {
-    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); cursor: pointer;
-    min-height: 2.75rem; border: 1px solid var(--velin-color-border, #ddd);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .btn--primary {
-    background: var(--velin-color-primary, #2563eb);
-    color: var(--velin-color-on-primary, #fff);
-    border-color: var(--velin-color-primary, #2563eb);
-  }
-  .btn--danger {
-    background: var(--velin-color-danger, #dc2626);
-    color: #fff; border-color: var(--velin-color-danger, #dc2626);
-  }
-  .btn:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  .input {
-    inline-size: 100%; padding: var(--velin-space-3, 0.75rem);
-    border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.375rem);
-    font-size: var(--velin-text-base, 1rem); margin-top: var(--velin-space-3, 0.75rem);
-    background: var(--velin-color-surface-bright, #fff);
-    color: var(--velin-color-text, #1a1a2e);
-  }
-  .input:focus { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 0; border-color: var(--velin-color-primary, #2563eb); }
-`;
-var VelinDialog = class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._resolve = null;
-    this._previousFocus = null;
-  }
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
-  }
-  alert(message, { title = "Alert", confirmText = "OK" } = {}) {
-    return this._show("alert", message, { title, confirmText });
-  }
-  confirm(message, { title = "Confirm", confirmText = "Confirm", cancelText = "Cancel", danger = false } = {}) {
-    return this._show("confirm", message, { title, confirmText, cancelText, danger });
-  }
-  prompt(message, { title = "Input", confirmText = "Submit", cancelText = "Cancel", placeholder = "", defaultValue = "" } = {}) {
-    return this._show("prompt", message, { title, confirmText, cancelText, placeholder, defaultValue });
-  }
-  _show(type, message, opts) {
-    const dialog = this.shadowRoot.querySelector("dialog");
-    this._previousFocus = document.activeElement;
-    const safeTitle = escapeHTML(opts.title);
-    const safeMsg = escapeHTML(message);
-    const safeConfirm = escapeHTML(opts.confirmText);
-    const safeCancel = escapeHTML(opts.cancelText || "");
-    const safePlaceholder = escapeHTML(opts.placeholder || "");
-    const safeDefault = escapeHTML(opts.defaultValue || "");
-    const footerBtns = type === "alert" ? `<button class="btn btn--primary" data-action="confirm">${safeConfirm}</button>` : `<button class="btn" data-action="cancel">${safeCancel}</button>
-         <button class="btn ${opts.danger ? "btn--danger" : "btn--primary"}" data-action="confirm">${safeConfirm}</button>`;
-    const input = type === "prompt" ? `<input class="input" placeholder="${safePlaceholder}" value="${safeDefault}" part="input">` : "";
-    dialog.innerHTML = `
-      <div class="header"><h3 class="title">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
-      <div class="body"><p>${safeMsg}</p>${input}</div>
-      <div class="footer">${footerBtns}</div>
-    `;
-    dialog.showModal();
-    if (type !== "prompt") {
-      const firstBtn = dialog.querySelector("[data-action]");
-      if (firstBtn) firstBtn.focus();
-    }
-    return new Promise((resolve) => {
-      this._resolve = resolve;
-      dialog.querySelector(".close").addEventListener("click", () => this._dismiss(type, false, dialog));
-      dialog.querySelectorAll("[data-action]").forEach((btn) => {
-        btn.addEventListener("click", () => this._dismiss(type, btn.dataset.action === "confirm", dialog));
-      });
-      dialog.addEventListener("cancel", (e) => {
-        e.preventDefault();
-        this._dismiss(type, false, dialog);
-      });
-      if (type === "prompt") {
-        const inp = dialog.querySelector(".input");
-        inp.focus();
-        inp.addEventListener("keydown", (e) => {
-          if (e.key === "Enter") this._dismiss(type, true, dialog);
-        });
-      }
-    });
-  }
-  _dismiss(type, confirmed, dialog) {
-    if (!this._resolve) return;
-    let value;
-    if (type === "alert") value = true;
-    else if (type === "confirm") value = confirmed;
-    else value = confirmed ? dialog.querySelector(".input")?.value ?? "" : null;
-    dialog.close();
-    if (this._previousFocus) {
-      this._previousFocus.focus();
-      this._previousFocus = null;
-    }
-    this._resolve(value);
-    this._resolve = null;
-    this.dispatchEvent(new CustomEvent("velin-dialog-close", { bubbles: true, detail: { value } }));
-  }
-};
-customElements.define("velin-dialog", VelinDialog);
-var velin_dialog_default = VelinDialog;
-export {
-  velin_dialog_default as default
-};

package/dist/chunks/velin-drawer-MJS6WCF7.js

@@ -1,130 +0,0 @@
-import {
-  clearBackgroundInert,
-  getFocusableElements,
-  restoreFocus,
-  saveFocus,
-  setBackgroundInert,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-drawer.js
-var styles = `
-  :host { display: contents; }
-  .overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--velin-z-overlay, 400);
-    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 200ms ease, visibility 200ms ease;
-  }
-  :host([open]) .overlay { opacity: 1; visibility: visible; }
-  .drawer {
-    position: fixed;
-    z-index: var(--velin-z-modal, 500);
-    background: var(--velin-color-surface-bright, #fff);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
-    display: flex;
-    flex-direction: column;
-    transition: transform 250ms ease;
-    overflow: hidden;
-  }
-  /* Side positioning -- default = start */
-  .drawer { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; inline-size: min(20rem, 85vw); transform: translateX(-100%); }
-  :host([open]) .drawer, :host([open][side="start"]) .drawer { transform: translateX(0); }
-  :host([side="end"]) .drawer { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
-  :host([open][side="end"]) .drawer { transform: translateX(0); }
-  :host([side="top"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: 0; inset-block-end: auto; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(-100%); }
-  :host([open][side="top"]) .drawer { transform: translateY(0); }
-  :host([side="bottom"]) .drawer { inset-inline: 0; inset-inline-start: 0; inset-block-start: auto; inset-block-end: 0; block-size: min(50vh, 24rem); inline-size: 100%; transform: translateY(100%); }
-  :host([open][side="bottom"]) .drawer { transform: translateY(0); }
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: var(--velin-weight-semibold, 600); margin: 0; }
-  .close-btn {
-    min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
-    background: none; border: none; border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
-    color: var(--velin-color-text-muted, #666); font-size: 1.5rem; line-height: 1;
-  }
-  .close-btn:hover { background: var(--velin-color-surface-dim, #eee); color: var(--velin-color-text, #111); }
-  .body { flex: 1; padding: var(--velin-space-5, 1.25rem); overflow-y: auto; }
-  @media (prefers-reduced-motion: reduce) { .overlay, .drawer { transition: none; } }
-`;
-var VelinDrawer = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open", delegatesFocus: true });
-    this._prev = null;
-    this._onKey = this._onKey.bind(this);
-  }
-  connectedCallback() {
-    const title = this.getAttribute("title") || "";
-    const safeTitle = escapeHTML(title);
-    const titleId = "velin-drawer-title";
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="overlay" part="overlay"></div>
-      <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
-        <div class="header" part="header">
-          <h2 class="title" id="${titleId}">${safeTitle}</h2>
-          <button class="close-btn" aria-label="Close" part="close">&#215;</button>
-        </div>
-        <div class="body" part="body"><slot></slot></div>
-      </div>
-    `;
-    this.shadowRoot.querySelector(".close-btn").addEventListener("click", () => this.close());
-    this.shadowRoot.querySelector(".overlay").addEventListener("click", () => this.close());
-  }
-  attributeChangedCallback(name) {
-    if (name === "open") this.hasAttribute("open") ? this._open() : this._close();
-  }
-  open() {
-    this.setAttribute("open", "");
-  }
-  close() {
-    this.removeAttribute("open");
-    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
-  }
-  _open() {
-    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();
-    });
-  }
-  _close() {
-    document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
-    restoreFocus(this._prev);
-  }
-  _onKey(e) {
-    if (e.key === "Escape") {
-      this.close();
-      return;
-    }
-    trapFocus(this.shadowRoot, e);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this._onKey);
-    document.body.style.overflow = "";
-  }
-};
-customElements.define("velin-drawer", VelinDrawer);
-var velin_drawer_default = VelinDrawer;
-export {
-  velin_drawer_default as default
-};

package/dist/chunks/velin-email-N5B5ZYTE.js

@@ -1,90 +0,0 @@
-import {
-  escapeHTML,
-  escapeHTMLAttribute
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-email.js
-var styles = `
-  :host { display: inline; }
-  button {
-    font: inherit;
-    color: var(--velin-color-primary, #4338ca);
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-    min-height: 2.75rem;
-    min-width: 2.75rem;
-  }
-  button:focus-visible {
-    outline: 3px solid var(--velin-color-focus, #2563eb);
-    outline-offset: 2px;
-    border-radius: 2px;
-  }
-  .revealed { text-decoration: none; user-select: text; }
-`;
-function decodeObfuscated(raw, method) {
-  if (!raw) return "";
-  if (method === "rot13") {
-    return raw.replace(/[a-zA-Z]/g, (c) => {
-      const base = c <= "Z" ? 65 : 97;
-      return String.fromCharCode((c.charCodeAt(0) - base + 13) % 26 + base);
-    });
-  }
-  try {
-    return atob(raw);
-  } catch {
-    return raw;
-  }
-}
-var VelinEmail = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["value", "obfuscate", "label"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this._revealed = false;
-  }
-  connectedCallback() {
-    this.render();
-  }
-  attributeChangedCallback() {
-    if (this.isConnected) this.render();
-  }
-  get email() {
-    const method = this.getAttribute("obfuscate") || "";
-    const raw = this.getAttribute("value") || "";
-    return method ? decodeObfuscated(raw, method) : raw;
-  }
-  render() {
-    const label = this.getAttribute("label") || "Show email address";
-    const email = this.email;
-    const safeEmail = escapeHTML(email);
-    if (this._revealed) {
-      this.shadowRoot.innerHTML = `
-        <style>${styles}</style>
-        <span class="revealed" part="email"><a href="mailto:${escapeHTMLAttribute(email)}">${safeEmail}</a></span>
-      `;
-      return;
-    }
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <button type="button" part="reveal" aria-label="${escapeHTMLAttribute(label)}">${escapeHTML(label)}</button>
-    `;
-    this.shadowRoot.querySelector("button").addEventListener("click", () => {
-      this._revealed = true;
-      this.render();
-      this.dispatchEvent(new CustomEvent("velin-email-reveal", { bubbles: true, detail: { email } }));
-    });
-  }
-};
-if (!customElements.get("velin-email")) {
-  customElements.define("velin-email", VelinEmail);
-}
-var velin_email_default = VelinEmail;
-export {
-  velin_email_default as default
-};