@birdapi/velinstyle 0.7.0 → 0.9.0

package/dist/chunks/velin-sheet-R2Y67X6H.js

@@ -0,0 +1,119 @@
+import {
+  SHADOW_A11Y_STYLES
+} from "./chunk-F7OLHTGX.js";
+import {
+  clearBackgroundInert,
+  getFocusableElements,
+  restoreFocus,
+  saveFocus,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-sheet.js
+var styles = `
+  ${SHADOW_A11Y_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; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { 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: 600; margin: 0; }
+  .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
+  @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
+`;
+var VelinSheet = 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 = escapeHTML(this.getAttribute("title") || this.getAttribute("label") || "");
+    const titleId = "velin-sheet-title";
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}">${title}</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());
+    if (this.hasAttribute("open")) this._open();
+  }
+  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-sheet", VelinSheet);
+var velin_sheet_default = VelinSheet;
+export {
+  velin_sheet_default as default
+};

package/dist/chunks/velin-sparkline-GVEANJVW.js

@@ -0,0 +1,184 @@
+// components/velin-sparkline.js
+var NS = "http://www.w3.org/2000/svg";
+function parseValues(raw) {
+  if (!raw) return [];
+  const trimmed = String(raw).trim();
+  if (trimmed.startsWith("[")) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      return Array.isArray(parsed) ? parsed.map(Number).filter((n) => Number.isFinite(n)) : [];
+    } catch {
+      return [];
+    }
+  }
+  return trimmed.split(/[\s,]+/).map((s) => Number.parseFloat(s)).filter((n) => Number.isFinite(n));
+}
+function buildPoints(values, w, h, min, max) {
+  const n = values.length;
+  if (n === 0) return [];
+  if (n === 1) {
+    return [[0, h / 2], [w, h / 2]];
+  }
+  const range = Math.max(max - min, 1e-6);
+  const stepX = w / (n - 1);
+  return values.map((v, i) => {
+    const x = i * stepX;
+    const y = h - (v - min) / range * h;
+    return [x, y];
+  });
+}
+function pointsToPath(points) {
+  if (!points.length) return "";
+  return points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+function pointsToArea(points, h) {
+  if (!points.length) return "";
+  const line = pointsToPath(points);
+  const last = points[points.length - 1][0];
+  const first = points[0][0];
+  return `${line} L${last.toFixed(2)},${h} L${first.toFixed(2)},${h} Z`;
+}
+var VelinSparkline = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["values", "width", "height", "min", "max", "area", "glow", "animate", "label", "aria-hidden", "aria-label"];
+  }
+  constructor() {
+    super();
+    this._values = [];
+    this._gradientId = `velin-spark-grad-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+  get values() {
+    return this._values.slice();
+  }
+  set values(arr) {
+    if (!Array.isArray(arr)) return;
+    this._values = arr.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this.setAttribute("values", this._values.join(","));
+  }
+  update(values) {
+    if (!Array.isArray(values)) return;
+    this._values = values.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this._render({ tick: true });
+  }
+  _render({ tick = false } = {}) {
+    const w = Number.parseFloat(this.getAttribute("width")) || 320;
+    const h = Number.parseFloat(this.getAttribute("height")) || 96;
+    const values = this._values.length ? this._values : parseValues(this.getAttribute("values"));
+    this._values = values;
+    if (!values.length) {
+      this.innerHTML = "";
+      return;
+    }
+    const minAttr = Number.parseFloat(this.getAttribute("min"));
+    const maxAttr = Number.parseFloat(this.getAttribute("max"));
+    const min = Number.isFinite(minAttr) ? minAttr : Math.min(...values);
+    const max = Number.isFinite(maxAttr) ? maxAttr : Math.max(...values);
+    const wantsArea = this.hasAttribute("area") && this.getAttribute("area") !== "false";
+    const wantsGlow = this.hasAttribute("glow") && this.getAttribute("glow") !== "false";
+    const animate = (this.getAttribute("animate") || "draw").toLowerCase();
+    const points = buildPoints(values, w, h, min, max);
+    const linePath = pointsToPath(points);
+    const areaPath = wantsArea ? pointsToArea(points, h) : "";
+    this.innerHTML = "";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.style.display = "block";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    this._applyA11y(svg);
+    if (wantsArea) {
+      const defs = document.createElementNS(NS, "defs");
+      const grad = document.createElementNS(NS, "linearGradient");
+      grad.setAttribute("id", this._gradientId);
+      grad.setAttribute("x1", "0");
+      grad.setAttribute("x2", "0");
+      grad.setAttribute("y1", "0");
+      grad.setAttribute("y2", "1");
+      const stops = [
+        ["0%", "currentColor", "0.35"],
+        ["100%", "currentColor", "0"]
+      ];
+      stops.forEach(([offset, color, op]) => {
+        const stop = document.createElementNS(NS, "stop");
+        stop.setAttribute("offset", offset);
+        stop.setAttribute("stop-color", color);
+        stop.setAttribute("stop-opacity", op);
+        grad.appendChild(stop);
+      });
+      defs.appendChild(grad);
+      svg.appendChild(defs);
+      const area = document.createElementNS(NS, "path");
+      area.setAttribute("d", areaPath);
+      area.setAttribute("fill", `url(#${this._gradientId})`);
+      area.setAttribute("stroke", "none");
+      area.classList.add("velin-chart-area");
+      svg.appendChild(area);
+    }
+    const line = document.createElementNS(NS, "path");
+    line.setAttribute("d", linePath);
+    line.setAttribute("fill", "none");
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    line.setAttribute("stroke-linejoin", "round");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.appendChild(line);
+    if (wantsGlow) svg.classList.add("velin-chart-glow");
+    this.appendChild(svg);
+    if (animate !== "none") {
+      const len = typeof line.getTotalLength === "function" && line.getTotalLength() || w;
+      line.style.setProperty("--velin-chart-len", len.toFixed(2));
+      line.classList.add("velin-chart-line");
+    } else {
+      line.style.strokeDasharray = "";
+      line.style.strokeDashoffset = "";
+    }
+    if (tick) {
+      this.classList.remove("velin-spark-tick");
+      void this.offsetWidth;
+      this.classList.add("velin-spark-tick");
+    }
+  }
+  _applyA11y(svg) {
+    const label = (this.getAttribute("label") || this.getAttribute("aria-label") || "").trim();
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("aria-labelledby");
+      this.removeAttribute("aria-hidden");
+      return;
+    }
+    const cap = this.closest("figure")?.querySelector("figcaption");
+    const capText = cap?.textContent?.trim();
+    if (capText) {
+      if (!cap.id) cap.id = `velin-sparkline-cap-${Math.random().toString(36).slice(2, 9)}`;
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-labelledby", cap.id);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("aria-label");
+      this.removeAttribute("aria-hidden");
+      return;
+    }
+    svg.setAttribute("role", "presentation");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.removeAttribute("aria-label");
+    svg.removeAttribute("aria-labelledby");
+    this.setAttribute("aria-hidden", "true");
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-sparkline")) {
+  customElements.define("velin-sparkline", VelinSparkline);
+}
+var velin_sparkline_default = VelinSparkline;
+export {
+  velin_sparkline_default as default
+};

package/dist/chunks/velin-sparkline-KDA3GQAN.js

@@ -0,0 +1,162 @@
+// components/velin-sparkline.js
+var NS = "http://www.w3.org/2000/svg";
+function parseValues(raw) {
+  if (!raw) return [];
+  const trimmed = String(raw).trim();
+  if (trimmed.startsWith("[")) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      return Array.isArray(parsed) ? parsed.map(Number).filter((n) => Number.isFinite(n)) : [];
+    } catch {
+      return [];
+    }
+  }
+  return trimmed.split(/[\s,]+/).map((s) => Number.parseFloat(s)).filter((n) => Number.isFinite(n));
+}
+function buildPoints(values, w, h, min, max) {
+  const n = values.length;
+  if (n === 0) return [];
+  if (n === 1) {
+    return [[0, h / 2], [w, h / 2]];
+  }
+  const range = Math.max(max - min, 1e-6);
+  const stepX = w / (n - 1);
+  return values.map((v, i) => {
+    const x = i * stepX;
+    const y = h - (v - min) / range * h;
+    return [x, y];
+  });
+}
+function pointsToPath(points) {
+  if (!points.length) return "";
+  return points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+function pointsToArea(points, h) {
+  if (!points.length) return "";
+  const line = pointsToPath(points);
+  const last = points[points.length - 1][0];
+  const first = points[0][0];
+  return `${line} L${last.toFixed(2)},${h} L${first.toFixed(2)},${h} Z`;
+}
+var VelinSparkline = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["values", "width", "height", "min", "max", "area", "glow", "animate", "label"];
+  }
+  constructor() {
+    super();
+    this._values = [];
+    this._gradientId = `velin-spark-grad-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+  get values() {
+    return this._values.slice();
+  }
+  set values(arr) {
+    if (!Array.isArray(arr)) return;
+    this._values = arr.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this.setAttribute("values", this._values.join(","));
+  }
+  update(values) {
+    if (!Array.isArray(values)) return;
+    this._values = values.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this._render({ tick: true });
+  }
+  _render({ tick = false } = {}) {
+    const w = Number.parseFloat(this.getAttribute("width")) || 320;
+    const h = Number.parseFloat(this.getAttribute("height")) || 96;
+    const values = this._values.length ? this._values : parseValues(this.getAttribute("values"));
+    this._values = values;
+    if (!values.length) {
+      this.innerHTML = "";
+      return;
+    }
+    const minAttr = Number.parseFloat(this.getAttribute("min"));
+    const maxAttr = Number.parseFloat(this.getAttribute("max"));
+    const min = Number.isFinite(minAttr) ? minAttr : Math.min(...values);
+    const max = Number.isFinite(maxAttr) ? maxAttr : Math.max(...values);
+    const wantsArea = this.hasAttribute("area") && this.getAttribute("area") !== "false";
+    const wantsGlow = this.hasAttribute("glow") && this.getAttribute("glow") !== "false";
+    const animate = (this.getAttribute("animate") || "draw").toLowerCase();
+    const label = this.getAttribute("label");
+    const points = buildPoints(values, w, h, min, max);
+    const linePath = pointsToPath(points);
+    const areaPath = wantsArea ? pointsToArea(points, h) : "";
+    this.innerHTML = "";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.style.display = "block";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+    } else {
+      svg.setAttribute("aria-hidden", "true");
+    }
+    if (wantsArea) {
+      const defs = document.createElementNS(NS, "defs");
+      const grad = document.createElementNS(NS, "linearGradient");
+      grad.setAttribute("id", this._gradientId);
+      grad.setAttribute("x1", "0");
+      grad.setAttribute("x2", "0");
+      grad.setAttribute("y1", "0");
+      grad.setAttribute("y2", "1");
+      const stops = [
+        ["0%", "currentColor", "0.35"],
+        ["100%", "currentColor", "0"]
+      ];
+      stops.forEach(([offset, color, op]) => {
+        const stop = document.createElementNS(NS, "stop");
+        stop.setAttribute("offset", offset);
+        stop.setAttribute("stop-color", color);
+        stop.setAttribute("stop-opacity", op);
+        grad.appendChild(stop);
+      });
+      defs.appendChild(grad);
+      svg.appendChild(defs);
+      const area = document.createElementNS(NS, "path");
+      area.setAttribute("d", areaPath);
+      area.setAttribute("fill", `url(#${this._gradientId})`);
+      area.setAttribute("stroke", "none");
+      area.classList.add("velin-chart-area");
+      svg.appendChild(area);
+    }
+    const line = document.createElementNS(NS, "path");
+    line.setAttribute("d", linePath);
+    line.setAttribute("fill", "none");
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    line.setAttribute("stroke-linejoin", "round");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.appendChild(line);
+    if (wantsGlow) svg.classList.add("velin-chart-glow");
+    this.appendChild(svg);
+    if (animate !== "none") {
+      const len = typeof line.getTotalLength === "function" && line.getTotalLength() || w;
+      line.style.setProperty("--velin-chart-len", len.toFixed(2));
+      line.classList.add("velin-chart-line");
+    } else {
+      line.style.strokeDasharray = "";
+      line.style.strokeDashoffset = "";
+    }
+    if (tick) {
+      this.classList.remove("velin-spark-tick");
+      void this.offsetWidth;
+      this.classList.add("velin-spark-tick");
+    }
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-sparkline")) {
+  customElements.define("velin-sparkline", VelinSparkline);
+}
+var velin_sparkline_default = VelinSparkline;
+export {
+  velin_sparkline_default as default
+};

package/dist/chunks/velin-sparkline-XVTFC6GE.js

@@ -0,0 +1,181 @@
+// components/velin-sparkline.js
+var NS = "http://www.w3.org/2000/svg";
+function parseValues(raw) {
+  if (!raw) return [];
+  const trimmed = String(raw).trim();
+  if (trimmed.startsWith("[")) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      return Array.isArray(parsed) ? parsed.map(Number).filter((n) => Number.isFinite(n)) : [];
+    } catch {
+      return [];
+    }
+  }
+  return trimmed.split(/[\s,]+/).map((s) => Number.parseFloat(s)).filter((n) => Number.isFinite(n));
+}
+function buildPoints(values, w, h, min, max) {
+  const n = values.length;
+  if (n === 0) return [];
+  if (n === 1) {
+    return [[0, h / 2], [w, h / 2]];
+  }
+  const range = Math.max(max - min, 1e-6);
+  const stepX = w / (n - 1);
+  return values.map((v, i) => {
+    const x = i * stepX;
+    const y = h - (v - min) / range * h;
+    return [x, y];
+  });
+}
+function pointsToPath(points) {
+  if (!points.length) return "";
+  return points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+}
+function pointsToArea(points, h) {
+  if (!points.length) return "";
+  const line = pointsToPath(points);
+  const last = points[points.length - 1][0];
+  const first = points[0][0];
+  return `${line} L${last.toFixed(2)},${h} L${first.toFixed(2)},${h} Z`;
+}
+var VelinSparkline = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["values", "width", "height", "min", "max", "area", "glow", "animate", "label"];
+  }
+  constructor() {
+    super();
+    this._values = [];
+    this._gradientId = `velin-spark-grad-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+  get values() {
+    return this._values.slice();
+  }
+  set values(arr) {
+    if (!Array.isArray(arr)) return;
+    this._values = arr.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this.setAttribute("values", this._values.join(","));
+  }
+  update(values) {
+    if (!Array.isArray(values)) return;
+    this._values = values.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this._render({ tick: true });
+  }
+  _render({ tick = false } = {}) {
+    const w = Number.parseFloat(this.getAttribute("width")) || 320;
+    const h = Number.parseFloat(this.getAttribute("height")) || 96;
+    const values = this._values.length ? this._values : parseValues(this.getAttribute("values"));
+    this._values = values;
+    if (!values.length) {
+      this.innerHTML = "";
+      return;
+    }
+    const minAttr = Number.parseFloat(this.getAttribute("min"));
+    const maxAttr = Number.parseFloat(this.getAttribute("max"));
+    const min = Number.isFinite(minAttr) ? minAttr : Math.min(...values);
+    const max = Number.isFinite(maxAttr) ? maxAttr : Math.max(...values);
+    const wantsArea = this.hasAttribute("area") && this.getAttribute("area") !== "false";
+    const wantsGlow = this.hasAttribute("glow") && this.getAttribute("glow") !== "false";
+    const animate = (this.getAttribute("animate") || "draw").toLowerCase();
+    const points = buildPoints(values, w, h, min, max);
+    const linePath = pointsToPath(points);
+    const areaPath = wantsArea ? pointsToArea(points, h) : "";
+    this.innerHTML = "";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.style.display = "block";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    this._applyA11y(svg);
+    if (wantsArea) {
+      const defs = document.createElementNS(NS, "defs");
+      const grad = document.createElementNS(NS, "linearGradient");
+      grad.setAttribute("id", this._gradientId);
+      grad.setAttribute("x1", "0");
+      grad.setAttribute("x2", "0");
+      grad.setAttribute("y1", "0");
+      grad.setAttribute("y2", "1");
+      const stops = [
+        ["0%", "currentColor", "0.35"],
+        ["100%", "currentColor", "0"]
+      ];
+      stops.forEach(([offset, color, op]) => {
+        const stop = document.createElementNS(NS, "stop");
+        stop.setAttribute("offset", offset);
+        stop.setAttribute("stop-color", color);
+        stop.setAttribute("stop-opacity", op);
+        grad.appendChild(stop);
+      });
+      defs.appendChild(grad);
+      svg.appendChild(defs);
+      const area = document.createElementNS(NS, "path");
+      area.setAttribute("d", areaPath);
+      area.setAttribute("fill", `url(#${this._gradientId})`);
+      area.setAttribute("stroke", "none");
+      area.classList.add("velin-chart-area");
+      svg.appendChild(area);
+    }
+    const line = document.createElementNS(NS, "path");
+    line.setAttribute("d", linePath);
+    line.setAttribute("fill", "none");
+    line.setAttribute("stroke", "currentColor");
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    line.setAttribute("stroke-linejoin", "round");
+    line.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.appendChild(line);
+    if (wantsGlow) svg.classList.add("velin-chart-glow");
+    this.appendChild(svg);
+    if (animate !== "none") {
+      const len = typeof line.getTotalLength === "function" && line.getTotalLength() || w;
+      line.style.setProperty("--velin-chart-len", len.toFixed(2));
+      line.classList.add("velin-chart-line");
+    } else {
+      line.style.strokeDasharray = "";
+      line.style.strokeDashoffset = "";
+    }
+    if (tick) {
+      this.classList.remove("velin-spark-tick");
+      void this.offsetWidth;
+      this.classList.add("velin-spark-tick");
+    }
+  }
+  _applyA11y(svg) {
+    const label = (this.getAttribute("label") || this.getAttribute("aria-label") || "").trim();
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("aria-labelledby");
+      return;
+    }
+    const cap = this.closest("figure")?.querySelector("figcaption");
+    const capText = cap?.textContent?.trim();
+    if (capText) {
+      if (!cap.id) cap.id = `velin-sparkline-cap-${Math.random().toString(36).slice(2, 9)}`;
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-labelledby", cap.id);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("aria-label");
+      return;
+    }
+    svg.setAttribute("role", "presentation");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.removeAttribute("aria-label");
+    svg.removeAttribute("aria-labelledby");
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("velin-sparkline")) {
+  customElements.define("velin-sparkline", VelinSparkline);
+}
+var velin_sparkline_default = VelinSparkline;
+export {
+  velin_sparkline_default as default
+};