@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-bottom-nav-N3DFQR66.js

@@ -0,0 +1,86 @@
+import {
+  escapeHTML
+} from "./chunk-LA7264K4.js";
+
+// components/velin-bottom-nav.js
+var styles = `
+  :host { display: block; }
+  nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    padding-block-end: max(var(--velin-space-2, 0.5rem), env(safe-area-inset-bottom, 0px));
+    background: var(--velin-color-surface-bright, #fff);
+    border-block-start: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted(a), ::slotted(button) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--velin-space-1, 0.25rem);
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #666);
+    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  ::slotted([current]) {
+    color: var(--velin-color-primary, #2563eb);
+    font-weight: var(--velin-weight-semibold, 600);
+  }
+`;
+var VelinBottomNav = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._onSlot = this._onSlot.bind(this);
+  }
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute("aria-label") || "Bottom navigation");
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <nav role="navigation" aria-label="${label}"><slot></slot></nav>
+    `;
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", this._onSlot);
+    this._onSlot();
+  }
+  _onSlot() {
+    this._syncCurrent();
+  }
+  _syncCurrent() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const hostKey = this.getAttribute("current");
+    slot.assignedElements().forEach((el) => {
+      const active = el.hasAttribute("current") || hostKey && (el.dataset.nav === hostKey || el.getAttribute("data-nav") === hostKey);
+      if (active) {
+        el.setAttribute("current", "");
+        el.setAttribute("aria-current", "page");
+      } else {
+        el.removeAttribute("current");
+        el.removeAttribute("aria-current");
+      }
+    });
+  }
+  static get observedAttributes() {
+    return ["aria-label", "current"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "aria-label") {
+      const nav = this.shadowRoot?.querySelector("nav");
+      if (nav) nav.setAttribute("aria-label", escapeHTML(this.getAttribute("aria-label") || "Bottom navigation"));
+    }
+    if (name === "current") this._syncCurrent();
+  }
+};
+customElements.define("velin-bottom-nav", VelinBottomNav);
+var velin_bottom_nav_default = VelinBottomNav;
+export {
+  velin_bottom_nav_default as default
+};

package/dist/chunks/velin-carousel-Y5VCOABZ.js

@@ -0,0 +1,213 @@
+// components/velin-carousel.js
+var styles = `
+  :host { display: block; position: relative; overflow: hidden; }
+  .track {
+    display: flex; transition: transform 400ms ease;
+    touch-action: pan-y pinch-zoom;
+  }
+  ::slotted(*) {
+    flex: 0 0 100%; min-width: 0;
+  }
+  .controls {
+    position: absolute; inset: 0; display: flex;
+    align-items: center; justify-content: space-between;
+    pointer-events: none; padding-inline: var(--velin-space-2, 0.5rem);
+  }
+  button {
+    pointer-events: auto; display: inline-flex; align-items: center; justify-content: center;
+    min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem;
+    background: var(--velin-color-surface-bright, #fff); color: var(--velin-color-text, #111);
+    border: 1px solid var(--velin-color-border, #ddd); border-radius: var(--velin-radius-full, 50%);
+    cursor: pointer; box-shadow: var(--velin-shadow-md, 0 4px 6px rgba(0,0,0,0.07));
+    opacity: 0.9; transition: opacity 150ms ease;
+  }
+  button:hover { opacity: 1; }
+  button:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  button:disabled { opacity: 0.3; cursor: not-allowed; }
+  svg { width: 1.25rem; height: 1.25rem; }
+  .indicators {
+    display: flex; justify-content: center; align-items: center; gap: var(--velin-space-2, 0.5rem);
+    padding-block: var(--velin-space-3, 0.75rem);
+  }
+  .pause-btn {
+    font-size: var(--velin-text-xs, 0.75rem);
+    padding-inline: var(--velin-space-3, 0.75rem);
+    min-inline-size: auto;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .dot {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 2.75rem; min-height: 2.75rem;
+    background: none; border: none; padding: 0; cursor: pointer;
+    border-radius: var(--velin-radius-full, 50%);
+  }
+  .dot::before {
+    content: ""; display: block;
+    width: 0.5rem; height: 0.5rem; border-radius: 50%;
+    background: var(--velin-color-border, #ccc);
+    transition: background 200ms ease, transform 200ms ease;
+  }
+  .dot[aria-current="true"]::before { background: var(--velin-color-primary, #2563eb); transform: scale(1.3); }
+  .dot:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) { .track { transition: none; } }
+`;
+var VelinCarousel = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["autoplay", "interval"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._timer = null;
+    this._startX = 0;
+    this._autoplayPaused = false;
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="track" role="group" aria-roledescription="carousel" part="track"><slot></slot></div>
+      <div class="controls" part="controls">
+        <button class="prev" aria-label="Previous slide" part="prev">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="next" aria-label="Next slide" part="next">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+        </button>
+      </div>
+      <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>
+    `;
+    this.shadowRoot.querySelector(".prev").addEventListener("click", () => this.prev());
+    this.shadowRoot.querySelector(".next").addEventListener("click", () => this.next());
+    const track = this.shadowRoot.querySelector(".track");
+    track.addEventListener("touchstart", (e) => {
+      this._startX = e.touches[0].clientX;
+    }, { passive: true });
+    track.addEventListener("touchend", (e) => {
+      const diff = this._startX - e.changedTouches[0].clientX;
+      if (Math.abs(diff) > 50) diff > 0 ? this.next() : this.prev();
+    });
+    this.addEventListener("mouseenter", () => this._pause());
+    this.addEventListener("mouseleave", () => this._resume());
+    this.addEventListener("focusin", () => this._pause());
+    this.addEventListener("focusout", () => this._resume());
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft") {
+        this.prev();
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        this.next();
+        e.preventDefault();
+      } else if (e.key === "Home") {
+        this.goTo(0);
+        e.preventDefault();
+      } else if (e.key === "End") {
+        this.goTo(this._count - 1);
+        e.preventDefault();
+      }
+    });
+    if (!this.hasAttribute("role")) this.setAttribute("role", "region");
+    this.setAttribute("aria-roledescription", "carousel");
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._buildDots();
+      this._update();
+    });
+    if (this.hasAttribute("autoplay")) this._startAutoplay();
+  }
+  get _slides() {
+    return this.shadowRoot.querySelector("slot").assignedElements();
+  }
+  get _count() {
+    return this._slides.length;
+  }
+  prev() {
+    this._index = (this._index - 1 + this._count) % this._count;
+    this._update();
+    this._emit();
+  }
+  next() {
+    this._index = (this._index + 1) % this._count;
+    this._update();
+    this._emit();
+  }
+  goTo(i) {
+    this._index = Math.max(0, Math.min(i, this._count - 1));
+    this._update();
+    this._emit();
+  }
+  _update() {
+    const track = this.shadowRoot.querySelector(".track");
+    track.style.transform = `translateX(-${this._index * 100}%)`;
+    this._slides.forEach((s, i) => {
+      s.setAttribute("aria-hidden", i !== this._index ? "true" : "false");
+      s.inert = i !== this._index;
+      s.setAttribute("aria-roledescription", "slide");
+      s.setAttribute("aria-label", `Slide ${i + 1} of ${this._count}`);
+    });
+    this.shadowRoot.querySelectorAll(".dot").forEach((d, i) => {
+      d.setAttribute("aria-current", i === this._index ? "true" : "false");
+    });
+  }
+  _buildDots() {
+    const c = this.shadowRoot.querySelector(".indicators");
+    c.innerHTML = "";
+    this._slides.forEach((_, i) => {
+      const d = document.createElement("button");
+      d.type = "button";
+      d.className = "dot";
+      d.setAttribute("aria-label", `Go to slide ${i + 1}`);
+      d.addEventListener("click", () => this.goTo(i));
+      c.appendChild(d);
+    });
+    if (this.hasAttribute("autoplay")) {
+      const pause = document.createElement("button");
+      pause.type = "button";
+      pause.className = "pause-btn";
+      pause.setAttribute("aria-pressed", "false");
+      pause.setAttribute("aria-label", "Pause automatic slide show");
+      pause.textContent = "Pause";
+      pause.addEventListener("click", () => this._toggleAutoplayPause(pause));
+      c.appendChild(pause);
+    }
+    this._update();
+  }
+  _toggleAutoplayPause(btn) {
+    this._autoplayPaused = !this._autoplayPaused;
+    if (this._autoplayPaused) {
+      this._pause();
+      btn.setAttribute("aria-pressed", "true");
+      btn.setAttribute("aria-label", "Resume automatic slide show");
+      btn.textContent = "Play";
+    } else {
+      this._resume();
+      btn.setAttribute("aria-pressed", "false");
+      btn.setAttribute("aria-label", "Pause automatic slide show");
+      btn.textContent = "Pause";
+    }
+  }
+  _emit() {
+    this.dispatchEvent(new CustomEvent("velin-slide-change", { bubbles: true, detail: { index: this._index } }));
+  }
+  _startAutoplay() {
+    const ms = parseInt(this.getAttribute("interval") || "5000", 10);
+    this._timer = setInterval(() => this.next(), ms);
+  }
+  _pause() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+  _resume() {
+    if (this.hasAttribute("autoplay") && !this._timer && !this._autoplayPaused) this._startAutoplay();
+  }
+  disconnectedCallback() {
+    this._pause();
+  }
+};
+customElements.define("velin-carousel", VelinCarousel);
+var velin_carousel_default = VelinCarousel;
+export {
+  velin_carousel_default as default
+};

package/dist/chunks/velin-carousel-ZTBANFQQ.js

@@ -0,0 +1,213 @@
+// components/velin-carousel.js
+var styles = `
+  :host { display: block; position: relative; overflow: hidden; }
+  .track {
+    display: flex; transition: transform 400ms ease;
+    touch-action: pan-y pinch-zoom;
+  }
+  ::slotted(*) {
+    flex: 0 0 100%; min-width: 0;
+  }
+  .controls {
+    position: absolute; inset: 0; display: flex;
+    align-items: center; justify-content: space-between;
+    pointer-events: none; padding-inline: var(--velin-space-2, 0.5rem);
+  }
+  button {
+    pointer-events: auto; display: inline-flex; align-items: center; justify-content: center;
+    min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem;
+    background: var(--velin-color-surface-bright, #fff); color: var(--velin-color-text, #111);
+    border: 1px solid var(--velin-color-border, #ddd); border-radius: var(--velin-radius-full, 50%);
+    cursor: pointer; box-shadow: var(--velin-shadow-md, 0 4px 6px rgba(0,0,0,0.07));
+    opacity: 0.9; transition: opacity 150ms ease;
+  }
+  button:hover { opacity: 1; }
+  button:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  button:disabled { opacity: 0.3; cursor: not-allowed; }
+  svg { width: 1.25rem; height: 1.25rem; }
+  .indicators {
+    display: flex; justify-content: center; align-items: center; gap: var(--velin-space-2, 0.5rem);
+    padding-block: var(--velin-space-3, 0.75rem);
+  }
+  .pause-btn {
+    font-size: var(--velin-text-xs, 0.75rem);
+    padding-inline: var(--velin-space-3, 0.75rem);
+    min-inline-size: auto;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .dot {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-width: 2.75rem; min-height: 2.75rem;
+    background: none; border: none; padding: 0; cursor: pointer;
+    border-radius: var(--velin-radius-full, 50%);
+  }
+  .dot::before {
+    content: ""; display: block;
+    width: 0.5rem; height: 0.5rem; border-radius: 50%;
+    background: var(--velin-color-border, #ccc);
+    transition: background 200ms ease, transform 200ms ease;
+  }
+  .dot[aria-current="true"]::before { background: var(--velin-color-primary, #2563eb); transform: scale(1.3); }
+  .dot:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  @media (prefers-reduced-motion: reduce) { .track { transition: none; } }
+`;
+var VelinCarousel = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["autoplay", "interval"];
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._timer = null;
+    this._startX = 0;
+    this._autoplayPaused = false;
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="track" role="group" aria-roledescription="carousel" part="track"><slot></slot></div>
+      <div class="controls" part="controls">
+        <button class="prev" aria-label="Previous slide" part="prev">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="next" aria-label="Next slide" part="next">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="9 6 15 12 9 18"/></svg>
+        </button>
+      </div>
+      <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>
+    `;
+    this.shadowRoot.querySelector(".prev").addEventListener("click", () => this.prev());
+    this.shadowRoot.querySelector(".next").addEventListener("click", () => this.next());
+    const track = this.shadowRoot.querySelector(".track");
+    track.addEventListener("touchstart", (e) => {
+      this._startX = e.touches[0].clientX;
+    }, { passive: true });
+    track.addEventListener("touchend", (e) => {
+      const diff = this._startX - e.changedTouches[0].clientX;
+      if (Math.abs(diff) > 50) diff > 0 ? this.next() : this.prev();
+    });
+    this.addEventListener("mouseenter", () => this._pause());
+    this.addEventListener("mouseleave", () => this._resume());
+    this.addEventListener("focusin", () => this._pause());
+    this.addEventListener("focusout", () => this._resume());
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft") {
+        this.prev();
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        this.next();
+        e.preventDefault();
+      } else if (e.key === "Home") {
+        this.goTo(0);
+        e.preventDefault();
+      } else if (e.key === "End") {
+        this.goTo(this._count - 1);
+        e.preventDefault();
+      }
+    });
+    if (!this.hasAttribute("role")) this.setAttribute("role", "region");
+    this.setAttribute("aria-roledescription", "carousel");
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._buildDots();
+      this._update();
+    });
+    if (this.hasAttribute("autoplay")) this._startAutoplay();
+  }
+  get _slides() {
+    return this.shadowRoot.querySelector("slot").assignedElements();
+  }
+  get _count() {
+    return this._slides.length;
+  }
+  prev() {
+    this._index = (this._index - 1 + this._count) % this._count;
+    this._update();
+    this._emit();
+  }
+  next() {
+    this._index = (this._index + 1) % this._count;
+    this._update();
+    this._emit();
+  }
+  goTo(i) {
+    this._index = Math.max(0, Math.min(i, this._count - 1));
+    this._update();
+    this._emit();
+  }
+  _update() {
+    const track = this.shadowRoot.querySelector(".track");
+    track.style.transform = `translateX(-${this._index * 100}%)`;
+    this._slides.forEach((s, i) => {
+      s.setAttribute("aria-hidden", i !== this._index ? "true" : "false");
+      s.inert = i !== this._index;
+      s.setAttribute("aria-roledescription", "slide");
+      s.setAttribute("aria-label", `Slide ${i + 1} of ${this._count}`);
+    });
+    this.shadowRoot.querySelectorAll(".dot").forEach((d, i) => {
+      d.setAttribute("aria-current", i === this._index ? "true" : "false");
+    });
+  }
+  _buildDots() {
+    const c = this.shadowRoot.querySelector(".indicators");
+    c.innerHTML = "";
+    this._slides.forEach((_, i) => {
+      const d = document.createElement("button");
+      d.type = "button";
+      d.className = "dot";
+      d.setAttribute("aria-label", `Go to slide ${i + 1}`);
+      d.addEventListener("click", () => this.goTo(i));
+      c.appendChild(d);
+    });
+    if (this.hasAttribute("autoplay")) {
+      const pause = document.createElement("button");
+      pause.type = "button";
+      pause.className = "pause-btn";
+      pause.setAttribute("aria-pressed", "false");
+      pause.setAttribute("aria-label", "Pause automatic slide show");
+      pause.textContent = "Pause";
+      pause.addEventListener("click", () => this._toggleAutoplayPause(pause));
+      c.appendChild(pause);
+    }
+    this._update();
+  }
+  _toggleAutoplayPause(btn) {
+    this._autoplayPaused = !this._autoplayPaused;
+    if (this._autoplayPaused) {
+      this._pause();
+      btn.setAttribute("aria-pressed", "true");
+      btn.setAttribute("aria-label", "Resume automatic slide show");
+      btn.textContent = "Play";
+    } else {
+      this._resume();
+      btn.setAttribute("aria-pressed", "false");
+      btn.setAttribute("aria-label", "Pause automatic slide show");
+      btn.textContent = "Pause";
+    }
+  }
+  _emit() {
+    this.dispatchEvent(new CustomEvent("velin-slide-change", { bubbles: true, detail: { index: this._index } }));
+  }
+  _startAutoplay() {
+    const ms = parseInt(this.getAttribute("interval") || "5000", 10);
+    this._timer = setInterval(() => this.next(), ms);
+  }
+  _pause() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = null;
+    }
+  }
+  _resume() {
+    if (this.hasAttribute("autoplay") && !this._timer && !this._autoplayPaused) this._startAutoplay();
+  }
+  disconnectedCallback() {
+    this._pause();
+  }
+};
+customElements.define("velin-carousel", VelinCarousel);
+var velin_carousel_default = VelinCarousel;
+export {
+  velin_carousel_default as default
+};

package/dist/chunks/velin-code-block-ASUBTAQV.js

@@ -0,0 +1,119 @@
+import {
+  highlightElement,
+  initHighlight
+} from "./chunk-XYLJ2GCB.js";
+import "./chunk-7MCGPHVC.js";
+import "./chunk-M5CHQVP6.js";
+import "./chunk-7FFAMRFV.js";
+
+// components/velin-code-block.js
+function parseLineHighlight(spec) {
+  const lines = /* @__PURE__ */ new Set();
+  if (!spec) return lines;
+  for (const part of spec.split(",")) {
+    const p = part.trim();
+    if (!p) continue;
+    if (p.includes("-")) {
+      const [a, b] = p.split("-").map((n) => parseInt(n, 10));
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i += 1) lines.add(i);
+      }
+    } else {
+      const n = parseInt(p, 10);
+      if (!Number.isNaN(n)) lines.add(n);
+    }
+  }
+  return lines;
+}
+var VelinCodeBlock = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["language", "highlight", "line-numbers", "collapsed"];
+  }
+  connectedCallback() {
+    if (this._built) return;
+    this._built = true;
+    this.classList.add("velin-code-block");
+    this._render();
+    this._setupHighlight();
+  }
+  attributeChangedCallback() {
+    if (!this._built) return;
+    this._render();
+    this._setupHighlight();
+  }
+  _render() {
+    const lang = this.getAttribute("language") || "";
+    const showLines = this.hasAttribute("line-numbers");
+    const collapsed = this.hasAttribute("collapsed");
+    const highlightLines = parseLineHighlight(this.getAttribute("highlight") || "");
+    const source = this.textContent.trim();
+    this.textContent = "";
+    const toolbar = document.createElement("div");
+    toolbar.className = "velin-code-block__toolbar";
+    toolbar.innerHTML = "";
+    const copyWc = document.createElement("velin-copy");
+    copyWc.setAttribute("value", source);
+    copyWc.setAttribute("label", "Copy");
+    toolbar.appendChild(copyWc);
+    if (collapsed) {
+      const toggle = document.createElement("button");
+      toggle.type = "button";
+      toggle.className = "velin-btn velin-btn--sm velin-btn--ghost";
+      toggle.textContent = "Expand";
+      toggle.addEventListener("click", () => {
+        const on = this.hasAttribute("data-collapsed");
+        if (on) {
+          this.removeAttribute("data-collapsed");
+          toggle.textContent = "Collapse";
+        } else {
+          this.setAttribute("data-collapsed", "");
+          toggle.textContent = "Expand";
+        }
+      });
+      this.setAttribute("data-collapsed", "");
+      toolbar.appendChild(toggle);
+    }
+    const wrap = document.createElement("div");
+    wrap.className = showLines ? "velin-code-block__gutter" : "";
+    if (showLines) {
+      const gutter = document.createElement("div");
+      gutter.className = "velin-code-block__line-numbers";
+      const lineCount = source.split("\n").length;
+      gutter.innerHTML = Array.from({ length: lineCount }, (_, i) => {
+        const n = i + 1;
+        const cls = highlightLines.has(n) ? ' class="velin-code-block__line--highlight"' : "";
+        return `<span${cls}>${n}</span>`;
+      }).join("\n");
+      wrap.appendChild(gutter);
+    }
+    const pre = document.createElement("pre");
+    if (lang) {
+      pre.setAttribute("language", lang);
+      pre.dataset.language = lang;
+    }
+    const code = document.createElement("code");
+    if (lang) code.className = `language-${lang}`;
+    code.textContent = source;
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+    this.appendChild(toolbar);
+    this.appendChild(wrap);
+    this._pre = pre;
+  }
+  async _setupHighlight() {
+    if (!this._pre) return;
+    delete this._pre.dataset.velinHighlighted;
+    delete this._pre.dataset.velinObserve;
+    const immediate = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (immediate) {
+      await highlightElement(this._pre);
+    } else {
+      initHighlight(this, { root: this });
+    }
+  }
+};
+customElements.define("velin-code-block", VelinCodeBlock);
+var velin_code_block_default = VelinCodeBlock;
+export {
+  velin_code_block_default as default
+};