@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-countdown-5XSTN3BH.js

@@ -0,0 +1,101 @@
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-countdown.js
+var styles = `
+  :host { display: inline-flex; font-variant-numeric: tabular-nums; }
+  .wrap { display: inline-flex; gap: var(--velin-space-3, 0.75rem); align-items: flex-start; }
+  .segment {
+    display: flex; flex-direction: column; align-items: center;
+    min-width: 3.5rem;
+  }
+  .value {
+    font-size: var(--velin-text-3xl, 1.953rem);
+    font-weight: var(--velin-weight-bold, 700);
+    line-height: 1;
+    color: var(--velin-color-text, #1a1a2e);
+  }
+  .label {
+    font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #888);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: var(--velin-space-1, 0.25rem);
+  }
+  .separator {
+    font-size: var(--velin-text-2xl, 1.563rem);
+    font-weight: 700;
+    color: var(--velin-color-text-muted, #888);
+    align-self: flex-start;
+    padding-top: 0.2em;
+  }
+  :host([size="sm"]) .value { font-size: var(--velin-text-xl, 1.25rem); }
+  :host([size="sm"]) .segment { min-width: 2.5rem; }
+  :host([size="lg"]) .value { font-size: var(--velin-text-5xl, 3.052rem); }
+`;
+var VelinCountdown = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["datetime"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._timer = null;
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="wrap"></div>`;
+    this._wrap = this.shadowRoot.querySelector(".wrap");
+    this.setAttribute("role", "timer");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-atomic", "true");
+    this._start();
+  }
+  _start() {
+    this._update();
+    this._timer = setInterval(() => this._update(), 1e3);
+  }
+  _update() {
+    const target = new Date(this.getAttribute("datetime")).getTime();
+    const now = Date.now();
+    const diff = Math.max(0, target - now);
+    const days = Math.floor(diff / 864e5);
+    const hours = Math.floor(diff % 864e5 / 36e5);
+    const minutes = Math.floor(diff % 36e5 / 6e4);
+    const seconds = Math.floor(diff % 6e4 / 1e3);
+    const pad = (n) => String(n).padStart(2, "0");
+    const showDays = this.getAttribute("show-days") !== "false";
+    const lDays = escapeHTML(this.getAttribute("label-days") || "Days");
+    const lHours = escapeHTML(this.getAttribute("label-hours") || "Hours");
+    const lMin = escapeHTML(this.getAttribute("label-minutes") || "Min");
+    const lSec = escapeHTML(this.getAttribute("label-seconds") || "Sec");
+    let html = "";
+    if (showDays) html += `<div class="segment" part="days"><span class="value">${pad(days)}</span><span class="label">${lDays}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="hours"><span class="value">${pad(hours)}</span><span class="label">${lHours}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="minutes"><span class="value">${pad(minutes)}</span><span class="label">${lMin}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="seconds"><span class="value">${pad(seconds)}</span><span class="label">${lSec}</span></div>`;
+    if (this._wrap) {
+      this._wrap.innerHTML = html;
+    }
+    const ariaText = `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds remaining`;
+    this.setAttribute("aria-label", ariaText);
+    if (diff <= 0) {
+      clearInterval(this._timer);
+      this.dispatchEvent(new CustomEvent("velin-countdown-end", { bubbles: true }));
+    }
+  }
+  disconnectedCallback() {
+    if (this._timer) clearInterval(this._timer);
+  }
+  attributeChangedCallback() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._start();
+    }
+  }
+};
+customElements.define("velin-countdown", VelinCountdown);
+var velin_countdown_default = VelinCountdown;
+export {
+  velin_countdown_default as default
+};

package/dist/chunks/velin-countdown-7AIY66CU.js

@@ -0,0 +1,101 @@
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-countdown.js
+var styles = `
+  :host { display: inline-flex; font-variant-numeric: tabular-nums; }
+  .wrap { display: inline-flex; gap: var(--velin-space-3, 0.75rem); align-items: flex-start; }
+  .segment {
+    display: flex; flex-direction: column; align-items: center;
+    min-width: 3.5rem;
+  }
+  .value {
+    font-size: var(--velin-text-3xl, 1.953rem);
+    font-weight: var(--velin-weight-bold, 700);
+    line-height: 1;
+    color: var(--velin-color-text, #1a1a2e);
+  }
+  .label {
+    font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #888);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: var(--velin-space-1, 0.25rem);
+  }
+  .separator {
+    font-size: var(--velin-text-2xl, 1.563rem);
+    font-weight: 700;
+    color: var(--velin-color-text-muted, #888);
+    align-self: flex-start;
+    padding-top: 0.2em;
+  }
+  :host([size="sm"]) .value { font-size: var(--velin-text-xl, 1.25rem); }
+  :host([size="sm"]) .segment { min-width: 2.5rem; }
+  :host([size="lg"]) .value { font-size: var(--velin-text-5xl, 3.052rem); }
+`;
+var VelinCountdown = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["datetime"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._timer = null;
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="wrap"></div>`;
+    this._wrap = this.shadowRoot.querySelector(".wrap");
+    this.setAttribute("role", "timer");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-atomic", "true");
+    this._start();
+  }
+  _start() {
+    this._update();
+    this._timer = setInterval(() => this._update(), 1e3);
+  }
+  _update() {
+    const target = new Date(this.getAttribute("datetime")).getTime();
+    const now = Date.now();
+    const diff = Math.max(0, target - now);
+    const days = Math.floor(diff / 864e5);
+    const hours = Math.floor(diff % 864e5 / 36e5);
+    const minutes = Math.floor(diff % 36e5 / 6e4);
+    const seconds = Math.floor(diff % 6e4 / 1e3);
+    const pad = (n) => String(n).padStart(2, "0");
+    const showDays = this.getAttribute("show-days") !== "false";
+    const lDays = escapeHTML(this.getAttribute("label-days") || "Days");
+    const lHours = escapeHTML(this.getAttribute("label-hours") || "Hours");
+    const lMin = escapeHTML(this.getAttribute("label-minutes") || "Min");
+    const lSec = escapeHTML(this.getAttribute("label-seconds") || "Sec");
+    let html = "";
+    if (showDays) html += `<div class="segment" part="days"><span class="value">${pad(days)}</span><span class="label">${lDays}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="hours"><span class="value">${pad(hours)}</span><span class="label">${lHours}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="minutes"><span class="value">${pad(minutes)}</span><span class="label">${lMin}</span></div><span class="separator">:</span>`;
+    html += `<div class="segment" part="seconds"><span class="value">${pad(seconds)}</span><span class="label">${lSec}</span></div>`;
+    if (this._wrap) {
+      this._wrap.innerHTML = html;
+    }
+    const ariaText = `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds remaining`;
+    this.setAttribute("aria-label", ariaText);
+    if (diff <= 0) {
+      clearInterval(this._timer);
+      this.dispatchEvent(new CustomEvent("velin-countdown-end", { bubbles: true }));
+    }
+  }
+  disconnectedCallback() {
+    if (this._timer) clearInterval(this._timer);
+  }
+  attributeChangedCallback() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._start();
+    }
+  }
+};
+customElements.define("velin-countdown", VelinCountdown);
+var velin_countdown_default = VelinCountdown;
+export {
+  velin_countdown_default as default
+};

package/dist/chunks/velin-counter-ISCTEAHI.js

@@ -0,0 +1,118 @@
+// components/velin-counter.js
+var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+function buildFormatter(host) {
+  const format = (host.getAttribute("format") || "number").toLowerCase();
+  const locale = host.getAttribute("locale") || void 0;
+  const decimalsAttr = host.getAttribute("decimals");
+  const decimals = decimalsAttr != null ? Math.max(0, Number.parseInt(decimalsAttr, 10) || 0) : null;
+  const opts = {};
+  if (decimals != null) {
+    opts.minimumFractionDigits = decimals;
+    opts.maximumFractionDigits = decimals;
+  }
+  if (format === "currency") {
+    opts.style = "currency";
+    opts.currency = host.getAttribute("currency") || "EUR";
+  } else if (format === "percent") {
+    opts.style = "percent";
+  }
+  try {
+    return new Intl.NumberFormat(locale, opts);
+  } catch {
+    return new Intl.NumberFormat(void 0, opts);
+  }
+}
+var VelinCounter = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["from", "to", "duration", "decimals", "prefix", "suffix", "format", "currency", "locale"];
+  }
+  constructor() {
+    super();
+    this._rafId = 0;
+    this._started = false;
+    this._observer = null;
+  }
+  connectedCallback() {
+    this._render(this._fromValue());
+    if (this.getAttribute("autostart") === "false") return;
+    this._scheduleStart();
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this._rafId);
+    this._observer?.disconnect();
+  }
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === "to" || name === "from") {
+      this.start();
+    } else {
+      this._render(this._lastValue ?? this._toValue());
+    }
+  }
+  _fromValue() {
+    return Number.parseFloat(this.getAttribute("from")) || 0;
+  }
+  _toValue() {
+    return Number.parseFloat(this.getAttribute("to")) || 0;
+  }
+  _duration() {
+    return Math.max(0, Number.parseFloat(this.getAttribute("duration")) || 900);
+  }
+  _scheduleStart() {
+    if (this._started) return;
+    if (typeof IntersectionObserver === "undefined") {
+      this.start();
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          this.start();
+          this._observer.disconnect();
+          this._observer = null;
+          break;
+        }
+      }
+    }, { threshold: 0.2 });
+    this._observer.observe(this);
+  }
+  start() {
+    cancelAnimationFrame(this._rafId);
+    this._started = true;
+    const from = this._fromValue();
+    const to = this._toValue();
+    const duration = this._duration();
+    const reduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || duration === 0) {
+      this._render(to);
+      return;
+    }
+    const start = performance.now();
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const value = from + (to - from) * easeOutExpo(t);
+      this._render(value);
+      if (t < 1) this._rafId = requestAnimationFrame(tick);
+    };
+    this._rafId = requestAnimationFrame(tick);
+  }
+  reset() {
+    cancelAnimationFrame(this._rafId);
+    this._started = false;
+    this._render(this._fromValue());
+  }
+  _render(value) {
+    this._lastValue = value;
+    const formatter = buildFormatter(this);
+    const prefix = this.getAttribute("prefix") || "";
+    const suffix = this.getAttribute("suffix") || "";
+    this.textContent = `${prefix}${formatter.format(value)}${suffix}`;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-counter")) {
+  customElements.define("velin-counter", VelinCounter);
+}
+var velin_counter_default = VelinCounter;
+export {
+  velin_counter_default as default
+};

package/dist/chunks/velin-counter-L5FYJF7A.js

@@ -0,0 +1,121 @@
+// components/velin-counter.js
+var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+function buildFormatter(host) {
+  const format = (host.getAttribute("format") || "number").toLowerCase();
+  const locale = host.getAttribute("locale") || void 0;
+  const decimalsAttr = host.getAttribute("decimals");
+  const decimals = decimalsAttr != null ? Math.max(0, Number.parseInt(decimalsAttr, 10) || 0) : null;
+  const opts = {};
+  if (decimals != null) {
+    opts.minimumFractionDigits = decimals;
+    opts.maximumFractionDigits = decimals;
+  }
+  if (format === "currency") {
+    opts.style = "currency";
+    opts.currency = host.getAttribute("currency") || "EUR";
+  } else if (format === "percent") {
+    opts.style = "percent";
+  }
+  try {
+    return new Intl.NumberFormat(locale, opts);
+  } catch {
+    return new Intl.NumberFormat(void 0, opts);
+  }
+}
+var VelinCounter = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["from", "to", "duration", "decimals", "prefix", "suffix", "format", "currency", "locale"];
+  }
+  constructor() {
+    super();
+    this._rafId = 0;
+    this._started = false;
+    this._observer = null;
+  }
+  connectedCallback() {
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-atomic", "true");
+    this._render(this._fromValue());
+    if (this.getAttribute("autostart") === "false") return;
+    this._scheduleStart();
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this._rafId);
+    this._observer?.disconnect();
+  }
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === "to" || name === "from") {
+      this.start();
+    } else {
+      this._render(this._lastValue ?? this._toValue());
+    }
+  }
+  _fromValue() {
+    return Number.parseFloat(this.getAttribute("from")) || 0;
+  }
+  _toValue() {
+    return Number.parseFloat(this.getAttribute("to")) || 0;
+  }
+  _duration() {
+    return Math.max(0, Number.parseFloat(this.getAttribute("duration")) || 900);
+  }
+  _scheduleStart() {
+    if (this._started) return;
+    if (typeof IntersectionObserver === "undefined") {
+      this.start();
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          this.start();
+          this._observer.disconnect();
+          this._observer = null;
+          break;
+        }
+      }
+    }, { threshold: 0.2 });
+    this._observer.observe(this);
+  }
+  start() {
+    cancelAnimationFrame(this._rafId);
+    this._started = true;
+    const from = this._fromValue();
+    const to = this._toValue();
+    const duration = this._duration();
+    const reduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || duration === 0) {
+      this._render(to);
+      return;
+    }
+    const start = performance.now();
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const value = from + (to - from) * easeOutExpo(t);
+      this._render(value);
+      if (t < 1) this._rafId = requestAnimationFrame(tick);
+    };
+    this._rafId = requestAnimationFrame(tick);
+  }
+  reset() {
+    cancelAnimationFrame(this._rafId);
+    this._started = false;
+    this._render(this._fromValue());
+  }
+  _render(value) {
+    this._lastValue = value;
+    const formatter = buildFormatter(this);
+    const prefix = this.getAttribute("prefix") || "";
+    const suffix = this.getAttribute("suffix") || "";
+    this.textContent = `${prefix}${formatter.format(value)}${suffix}`;
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-counter")) {
+  customElements.define("velin-counter", VelinCounter);
+}
+var velin_counter_default = VelinCounter;
+export {
+  velin_counter_default as default
+};

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

@@ -0,0 +1,144 @@
+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
+};