@birdapi/velinstyle 1.1.0 → 1.2.1

package/dist/chunks/velin-combobox-2KDTCQ7N.js

@@ -1,155 +0,0 @@
-import {
-  rovingTabindex
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-combobox.js
-var styles = `
-  :host { display: inline-block; position: relative; }
-  .listbox {
-    position: absolute; z-index: var(--velin-z-dropdown, 100);
-    inset-block-start: 100%; inset-inline-start: 0;
-    min-inline-size: 100%; margin-block-start: var(--velin-space-1, 0.25rem);
-    padding-block: var(--velin-space-1, 0.25rem);
-    background: var(--velin-color-surface-bright, #fff);
-    border: 1px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem);
-    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
-    opacity: 0; visibility: hidden;
-    transition: opacity 150ms ease, visibility 150ms ease;
-  }
-  :host([open]) .listbox { opacity: 1; visibility: visible; }
-  ::slotted([role="option"]) {
-    display: block; inline-size: 100%;
-    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
-    min-block-size: 2.5rem;
-    text-align: start; background: none; border: none;
-    cursor: pointer; font-size: var(--velin-text-base, 1rem);
-  }
-  ::slotted([role="option"][aria-selected="true"]) {
-    background: var(--velin-color-surface-dim, #eee);
-  }
-`;
-var VelinCombobox = class extends HTMLElement {
-  static get observedAttributes() {
-    return ["open", "aria-label"];
-  }
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open", delegatesFocus: true });
-    this._onDocClick = this._onDocClick.bind(this);
-    this._onKey = this._onKey.bind(this);
-  }
-  connectedCallback() {
-    const listId = `velin-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
-    this._listId = listId;
-    const listLabel = escapeHTML(this.getAttribute("aria-label") || "Options");
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <slot name="trigger"></slot>
-      <div class="listbox" id="${listId}" role="listbox" aria-label="${listLabel}" part="listbox"><slot></slot></div>
-    `;
-    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener("slotchange", () => this._wireTrigger());
-    this.shadowRoot.querySelector("slot:not([name])")?.addEventListener("slotchange", () => this._wireOptions());
-    this._wireTrigger();
-    this._wireOptions();
-    this.addEventListener("keydown", this._onKey);
-  }
-  _wireTrigger() {
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (!trigger) return;
-    trigger.setAttribute("role", "combobox");
-    trigger.setAttribute("aria-expanded", this.hasAttribute("open") ? "true" : "false");
-    trigger.setAttribute("aria-controls", this._listId);
-    trigger.setAttribute("aria-autocomplete", "list");
-    if (!trigger.id) trigger.id = `velin-combobox-trigger-${Math.random().toString(36).slice(2, 9)}`;
-    const list = this.shadowRoot.querySelector(".listbox");
-    if (list) list.setAttribute("aria-labelledby", trigger.id);
-    if (!trigger.dataset.velinComboWired) {
-      trigger.dataset.velinComboWired = "1";
-      trigger.addEventListener("click", () => this.toggle());
-      trigger.addEventListener("keydown", (e) => {
-        if (e.key === "ArrowDown" || e.key === "Enter") {
-          e.preventDefault();
-          this.open();
-        }
-      });
-    }
-  }
-  _wireOptions() {
-    const options = this._getOptions();
-    options.forEach((el, i) => {
-      el.setAttribute("role", "option");
-      el.setAttribute("aria-selected", el.hasAttribute("selected") ? "true" : "false");
-      el.setAttribute("tabindex", i === 0 ? "0" : "-1");
-    });
-  }
-  _getOptions() {
-    const slot = this.shadowRoot.querySelector("slot:not([name])");
-    return slot ? slot.assignedElements().filter((el) => !el.hidden) : [];
-  }
-  toggle() {
-    this.hasAttribute("open") ? this.close() : this.open();
-  }
-  open() {
-    this.setAttribute("open", "");
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (trigger) trigger.setAttribute("aria-expanded", "true");
-    document.addEventListener("click", this._onDocClick, true);
-    requestAnimationFrame(() => {
-      const opts = this._getOptions();
-      if (opts.length) opts[0].focus();
-    });
-  }
-  close() {
-    this.removeAttribute("open");
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-expanded", "false");
-      trigger.focus();
-    }
-    document.removeEventListener("click", this._onDocClick, true);
-    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
-  }
-  _onDocClick(e) {
-    if (!this.contains(e.target)) this.close();
-  }
-  _onKey(e) {
-    if (!this.hasAttribute("open")) return;
-    if (e.key === "Escape") {
-      this.close();
-      return;
-    }
-    const options = this._getOptions();
-    if (!options.length) return;
-    rovingTabindex(this, options, e);
-    if (e.key === "Enter" && options.includes(e.target)) {
-      this._selectOption(e.target);
-      this.close();
-    }
-  }
-  _selectOption(el) {
-    this._getOptions().forEach((o) => o.setAttribute("aria-selected", o === el ? "true" : "false"));
-    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-    if (trigger && "value" in trigger) trigger.value = el.textContent?.trim() || "";
-    this.dispatchEvent(new CustomEvent("velin-select", { bubbles: true, detail: { option: el } }));
-  }
-  attributeChangedCallback(name) {
-    if (name === "open") this._wireTrigger();
-    if (name === "aria-label") {
-      const list = this.shadowRoot?.querySelector(".listbox");
-      if (list) list.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Options"));
-    }
-  }
-  disconnectedCallback() {
-    document.removeEventListener("click", this._onDocClick, true);
-  }
-};
-customElements.define("velin-combobox", VelinCombobox);
-var velin_combobox_default = VelinCombobox;
-export {
-  velin_combobox_default as default
-};

package/dist/chunks/velin-command-M7RNHUPR.js

@@ -1,136 +0,0 @@
-import {
-  SHADOW_A11Y_STYLES
-} from "./chunk-F7OLHTGX.js";
-import {
-  clearBackgroundInert,
-  restoreFocus,
-  saveFocus,
-  setBackgroundInert,
-  trapFocus
-} from "./chunk-42VVPW6N.js";
-import {
-  escapeHTML
-} from "./chunk-MKZP2TBH.js";
-
-// components/velin-command.js
-var styles = `
-  ${SHADOW_A11Y_STYLES}
-  :host { display: contents; }
-  .overlay {
-    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
-    display: flex; align-items: flex-start; justify-content: center;
-    padding: 10vh var(--velin-space-4, 1rem) var(--velin-space-4, 1rem);
-    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
-    opacity: 0; visibility: hidden;
-    transition: opacity 150ms ease, visibility 150ms ease;
-  }
-  :host([open]) .overlay { opacity: 1; visibility: visible; }
-  .panel {
-    inline-size: min(32rem, 100%);
-    background: var(--velin-color-surface-bright, #fff);
-    border-radius: var(--velin-radius-lg, 0.75rem);
-    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
-    overflow: hidden;
-  }
-  .search {
-    inline-size: 100%; padding: var(--velin-space-4, 1rem);
-    border: none; border-bottom: 1px solid var(--velin-color-border, #ddd);
-    font-size: var(--velin-text-base, 1rem);
-    background: transparent;
-    color: var(--velin-color-text, #111);
-  }
-  .results { max-block-size: 20rem; overflow-y: auto; padding: var(--velin-space-2, 0.5rem); }
-  ::slotted(button) {
-    display: flex; inline-size: 100%;
-    padding: var(--velin-space-3, 0.75rem) var(--velin-space-4, 1rem);
-    min-block-size: 2.5rem;
-    border: none; background: none; text-align: start;
-    cursor: pointer; font-size: var(--velin-text-base, 1rem);
-    border-radius: var(--velin-radius-sm, 0.25rem);
-  }
-  ::slotted(button[hidden]) { display: none; }
-  ::slotted(button:focus-visible) {
-    background: var(--velin-color-surface-dim, #eee);
-  }
-`;
-var VelinCommand = 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);
-    this._onInput = this._onInput.bind(this);
-  }
-  connectedCallback() {
-    const placeholder = escapeHTML(this.getAttribute("placeholder") || "Search commands\u2026");
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div class="overlay" part="overlay">
-        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette" part="panel">
-          <input class="search" type="search" autocomplete="off" placeholder="${placeholder}" aria-label="Search" part="search" />
-          <div class="results" part="results"><slot></slot></div>
-        </div>
-      </div>
-    `;
-    this.shadowRoot.querySelector(".search").addEventListener("input", this._onInput);
-    this.shadowRoot.querySelector("slot")?.addEventListener("slotchange", () => this._filter(""));
-    this._filter("");
-  }
-  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);
-    requestAnimationFrame(() => {
-      this.shadowRoot.querySelector(".search")?.focus();
-      this._filter("");
-    });
-  }
-  _close() {
-    document.removeEventListener("keydown", this._onKey);
-    clearBackgroundInert();
-    restoreFocus(this._prev);
-    const input = this.shadowRoot.querySelector(".search");
-    if (input) input.value = "";
-    this._filter("");
-  }
-  _onInput(e) {
-    this._filter(e.target.value);
-  }
-  _filter(query) {
-    const q = query.trim().toLowerCase();
-    const slot = this.shadowRoot.querySelector("slot");
-    slot?.assignedElements().forEach((btn) => {
-      const text = btn.textContent?.trim().toLowerCase() || "";
-      const match = !q || text.includes(q);
-      btn.hidden = !match;
-    });
-  }
-  _onKey(e) {
-    if (e.key === "Escape") {
-      this.close();
-      return;
-    }
-    trapFocus(this.shadowRoot, e);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this._onKey);
-  }
-};
-customElements.define("velin-command", VelinCommand);
-var velin_command_default = VelinCommand;
-export {
-  velin_command_default as default
-};

package/dist/chunks/velin-copy-T5KDTDXP.js

@@ -1,81 +0,0 @@
-import {
-  escapeHTML
-} from "./chunk-LA7264K4.js";
-
-// components/velin-copy.js
-var styles = `
-  :host { display: inline-flex; }
-  button {
-    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
-    min-width: 2.75rem; min-height: 2.75rem; padding: 0.375rem 0.625rem;
-    background: var(--velin-color-surface-dim, #f0f0f0);
-    border: 1px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
-    color: var(--velin-color-text-muted, #666);
-    font-size: var(--velin-text-sm, 0.875rem);
-    transition: background 150ms ease, color 150ms ease;
-  }
-  button:hover { background: var(--velin-color-surface, #e0e0e0); color: var(--velin-color-text, #111); }
-  button:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
-  button[data-copied] { color: var(--velin-color-success, #16a34a); border-color: var(--velin-color-success, #16a34a); }
-  svg { width: 1rem; height: 1rem; flex-shrink: 0; }
-  .check { display: none; }
-  button[data-copied] .copy-icon { display: none; }
-  button[data-copied] .check { display: block; }
-  @media (prefers-reduced-motion: reduce) { button { transition: none; } }
-`;
-var VelinCopy = class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-  }
-  connectedCallback() {
-    const label = escapeHTML(this.getAttribute("label") || "");
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <button part="button" aria-label="Copy">
-        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
-        </svg>
-        <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <polyline points="20 6 9 17 4 12"/>
-        </svg>
-        ${label ? `<span>${label}</span>` : ""}
-      </button>
-    `;
-    this.shadowRoot.querySelector("button").addEventListener("click", () => this._copy());
-  }
-  _getCopyText() {
-    return this.getAttribute("value") || this.getAttribute("text") || this.dataset.source || "";
-  }
-  async _copy() {
-    const value = this._getCopyText();
-    if (!value) return;
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-      const ta = document.createElement("textarea");
-      ta.value = value;
-      ta.style.cssText = "position:fixed;opacity:0";
-      document.body.appendChild(ta);
-      ta.select();
-      document.execCommand("copy");
-      ta.remove();
-    }
-    const btn = this.shadowRoot.querySelector("button");
-    btn.setAttribute("data-copied", "");
-    btn.setAttribute("aria-label", "Copied");
-    this.dispatchEvent(new CustomEvent("velin-copied", { bubbles: true, detail: { value } }));
-    setTimeout(() => {
-      btn.removeAttribute("data-copied");
-      btn.setAttribute("aria-label", "Copy");
-    }, 2e3);
-  }
-};
-if (!customElements.get("velin-copy")) {
-  customElements.define("velin-copy", VelinCopy);
-}
-var velin_copy_default = VelinCopy;
-export {
-  velin_copy_default as default
-};

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

@@ -1,101 +0,0 @@
-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-counter-ISCTEAHI.js

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