@birdapi/velinstyle 1.1.0 → 1.2.1

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

@@ -1,213 +0,0 @@
-// 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-code-block-ASUBTAQV.js

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

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

@@ -1,123 +0,0 @@
-import {
-  highlightElement,
-  initHighlight
-} from "./chunk-J472ERN2.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 lines = source.split("\n");
-      const lineCount = lines.length;
-      gutter.textContent = "";
-      for (let i = 0; i < lineCount; i += 1) {
-        const n = i + 1;
-        const span = document.createElement("span");
-        if (highlightLines.has(n)) span.className = "velin-code-block__line--highlight";
-        span.textContent = String(n);
-        gutter.appendChild(span);
-      }
-      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
-};

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

@@ -1,119 +0,0 @@
-import {
-  highlightElement,
-  initHighlight
-} from "./chunk-J472ERN2.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
-};