@birdapi/velinstyle 0.8.0 → 0.9.0

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

@@ -0,0 +1,136 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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-command-TMLSRGIU.js

@@ -0,0 +1,136 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.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-G2TZ5YBB.js

@@ -0,0 +1,81 @@
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.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-copy-NYDBOKXT.js

@@ -0,0 +1,81 @@
+import {
+  escapeHTML
+} from "./chunk-MKZP2TBH.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-copy-T5KDTDXP.js

@@ -0,0 +1,81 @@
+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-4ZVDGK4R.js

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