@birdapi/velinstyle 0.8.0 → 0.9.0

package/dist/chunks/velin-icon-WTFPG2DD.js

@@ -0,0 +1,191 @@
+import {
+  sanitizeSVG,
+  sanitizeURL
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-icon.js
+var PROVIDER_CDNS = {
+  lucide: "https://unpkg.com/lucide-static@latest/icons/{name}.svg",
+  heroicons: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+  bootstrap: "https://unpkg.com/bootstrap-icons@latest/icons/{name}.svg",
+  material: "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/{name}/default/24px.svg",
+  fontawesome: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg"
+};
+var PROVIDER_VARIANTS = {
+  fontawesome: {
+    regular: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/regular/{name}.svg",
+    solid: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg",
+    brands: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/brands/{name}.svg"
+  },
+  heroicons: {
+    outline: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+    solid: "https://unpkg.com/heroicons@2/24/solid/{name}.svg",
+    mini: "https://unpkg.com/heroicons@2/20/solid/{name}.svg"
+  }
+};
+function resolveProviderUrl(provider, variant) {
+  const variants = PROVIDER_VARIANTS[provider];
+  if (variant && variants?.[variant]) return variants[variant];
+  return PROVIDER_CDNS[provider];
+}
+var _svgCache = /* @__PURE__ */ new Map();
+var VelinIcon = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "provider", "variant", "sprite"];
+  }
+  constructor() {
+    super();
+    this._rendered = false;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._render();
+  }
+  _render() {
+    const name = this.getAttribute("name");
+    const size = this.getAttribute("size") || "24";
+    const a11y = this._resolveA11y();
+    const provider = this.getAttribute("provider");
+    const variant = this.getAttribute("variant");
+    if (!name) {
+      this.innerHTML = "";
+      return;
+    }
+    if (provider && (PROVIDER_CDNS[provider] || PROVIDER_VARIANTS[provider])) {
+      this._renderFromCDN(name, size, a11y, provider, variant);
+      return;
+    }
+    this._renderFromSprite(name, size, a11y);
+  }
+  _resolveA11y() {
+    const label = (this.getAttribute("label") || this.getAttribute("aria-label") || "").trim();
+    if (label) return { label, hidden: false };
+    const hidden = this.getAttribute("aria-hidden") !== "false";
+    return { label: "", hidden };
+  }
+  _renderFromSprite(name, size, a11y) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    this._applyStyle(svg);
+    const use = document.createElementNS(svgNS, "use");
+    const spriteAttr = this.getAttribute("sprite");
+    const localSymbol = document.getElementById(name);
+    const isLocalSymbol = localSymbol && localSymbol.tagName && localSymbol.tagName.toLowerCase() === "symbol";
+    let href;
+    if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
+      href = `#${name}`;
+    } else {
+      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      href = `${spriteUrl}#${name}`;
+    }
+    use.setAttribute("href", href);
+    svg.appendChild(use);
+    this._applyA11y(svg, a11y);
+    this.innerHTML = "";
+    this.appendChild(svg);
+    this._rendered = true;
+  }
+  async _renderFromCDN(name, size, a11y, provider, variant) {
+    const cacheKey = `${provider}:${variant || "default"}:${name}`;
+    if (_svgCache.has(cacheKey)) {
+      this._injectSVG(_svgCache.get(cacheKey), size, a11y);
+      return;
+    }
+    const template = resolveProviderUrl(provider, variant);
+    if (!template) {
+      this._renderFromSprite(name, size, a11y);
+      return;
+    }
+    const url = sanitizeURL(template.replace("{name}", name));
+    if (!url) {
+      this._renderFromSprite(name, size, a11y);
+      return;
+    }
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`${res.status}`);
+      const text = await res.text();
+      if (!text.includes("<svg")) throw new Error("Not SVG");
+      const clean = await sanitizeSVG(text);
+      _svgCache.set(cacheKey, clean);
+      this._injectSVG(clean, size, a11y);
+    } catch {
+      this._renderFromSprite(name, size, a11y);
+    }
+  }
+  _stripForeignA11y(svg) {
+    svg.removeAttribute("role");
+    svg.removeAttribute("aria-label");
+    svg.removeAttribute("aria-labelledby");
+    svg.removeAttribute("aria-hidden");
+    svg.querySelector("title")?.remove();
+    svg.querySelector("desc")?.remove();
+  }
+  _injectSVG(svgText, size, a11y) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) {
+      this.innerHTML = "";
+      return;
+    }
+    this._stripForeignA11y(svg);
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    if (!svg.getAttribute("viewBox")) svg.setAttribute("viewBox", "0 0 24 24");
+    this._applyStyle(svg);
+    this._applyA11y(svg, a11y);
+    this.innerHTML = "";
+    this.appendChild(document.importNode(svg, true));
+    this._rendered = true;
+  }
+  _applyStyle(svg) {
+    svg.style.display = "inline-block";
+    svg.style.verticalAlign = "middle";
+    svg.style.flexShrink = "0";
+  }
+  _applyA11y(svg, a11y) {
+    const { label, hidden } = a11y;
+    const use = svg.querySelector("use");
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("focusable");
+      if (use) use.removeAttribute("aria-hidden");
+    } else if (hidden) {
+      svg.setAttribute("role", "presentation");
+      svg.setAttribute("aria-hidden", "true");
+      svg.setAttribute("focusable", "false");
+      svg.removeAttribute("aria-label");
+      if (use) {
+        use.setAttribute("aria-hidden", "true");
+        use.setAttribute("focusable", "false");
+      }
+    }
+  }
+  static get providers() {
+    return Object.keys(PROVIDER_CDNS);
+  }
+  static registerProvider(name, urlTemplate, variantTemplates) {
+    PROVIDER_CDNS[name] = urlTemplate;
+    if (variantTemplates && PROVIDER_VARIANTS[name]) {
+      Object.assign(PROVIDER_VARIANTS[name], variantTemplates);
+    }
+  }
+};
+customElements.define("velin-icon", VelinIcon);
+var velin_icon_default = VelinIcon;
+export {
+  velin_icon_default as default
+};

package/dist/chunks/velin-icon-ZTSKUOVN.js

@@ -0,0 +1,193 @@
+import {
+  sanitizeSVG,
+  sanitizeURL
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-icon.js
+var PROVIDER_CDNS = {
+  lucide: "https://unpkg.com/lucide-static@latest/icons/{name}.svg",
+  heroicons: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+  bootstrap: "https://unpkg.com/bootstrap-icons@latest/icons/{name}.svg",
+  material: "https://fonts.gstatic.com/s/i/short-term/release/materialsymbolsoutlined/{name}/default/24px.svg",
+  fontawesome: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg"
+};
+var PROVIDER_VARIANTS = {
+  fontawesome: {
+    regular: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/regular/{name}.svg",
+    solid: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg",
+    brands: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/brands/{name}.svg"
+  },
+  heroicons: {
+    outline: "https://unpkg.com/heroicons@2/24/outline/{name}.svg",
+    solid: "https://unpkg.com/heroicons@2/24/solid/{name}.svg",
+    mini: "https://unpkg.com/heroicons@2/20/solid/{name}.svg"
+  }
+};
+function resolveProviderUrl(provider, variant) {
+  const variants = PROVIDER_VARIANTS[provider];
+  if (variant && variants?.[variant]) return variants[variant];
+  return PROVIDER_CDNS[provider];
+}
+var _svgCache = /* @__PURE__ */ new Map();
+var VelinIcon = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "provider", "variant", "sprite", "aria-hidden", "aria-label"];
+  }
+  constructor() {
+    super();
+    this._rendered = false;
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._render();
+  }
+  _render() {
+    const name = this.getAttribute("name");
+    const size = this.getAttribute("size") || "24";
+    const a11y = this._resolveA11y();
+    const provider = this.getAttribute("provider");
+    const variant = this.getAttribute("variant");
+    if (!name) {
+      this.innerHTML = "";
+      return;
+    }
+    if (provider && (PROVIDER_CDNS[provider] || PROVIDER_VARIANTS[provider])) {
+      this._renderFromCDN(name, size, a11y, provider, variant);
+      return;
+    }
+    this._renderFromSprite(name, size, a11y);
+  }
+  _resolveA11y() {
+    const label = (this.getAttribute("label") || this.getAttribute("aria-label") || "").trim();
+    if (label) return { label, hidden: false };
+    const hidden = this.getAttribute("aria-hidden") !== "false";
+    return { label: "", hidden };
+  }
+  _renderFromSprite(name, size, a11y) {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    this._applyStyle(svg);
+    this._applyA11y(svg, a11y);
+    const use = document.createElementNS(svgNS, "use");
+    const spriteAttr = this.getAttribute("sprite");
+    const localSymbol = document.getElementById(name);
+    const isLocalSymbol = localSymbol && localSymbol.tagName && localSymbol.tagName.toLowerCase() === "symbol";
+    let href;
+    if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
+      href = `#${name}`;
+    } else {
+      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      href = `${spriteUrl}#${name}`;
+    }
+    use.setAttribute("href", href);
+    svg.appendChild(use);
+    this.innerHTML = "";
+    this.appendChild(svg);
+    this._rendered = true;
+  }
+  async _renderFromCDN(name, size, a11y, provider, variant) {
+    const cacheKey = `${provider}:${variant || "default"}:${name}`;
+    if (_svgCache.has(cacheKey)) {
+      this._injectSVG(_svgCache.get(cacheKey), size, a11y);
+      return;
+    }
+    const template = resolveProviderUrl(provider, variant);
+    if (!template) {
+      this._renderFromSprite(name, size, a11y);
+      return;
+    }
+    const url = sanitizeURL(template.replace("{name}", name));
+    if (!url) {
+      this._renderFromSprite(name, size, a11y);
+      return;
+    }
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error(`${res.status}`);
+      const text = await res.text();
+      if (!text.includes("<svg")) throw new Error("Not SVG");
+      const clean = await sanitizeSVG(text);
+      _svgCache.set(cacheKey, clean);
+      this._injectSVG(clean, size, a11y);
+    } catch {
+      this._renderFromSprite(name, size, a11y);
+    }
+  }
+  _stripForeignA11y(svg) {
+    svg.removeAttribute("role");
+    svg.removeAttribute("aria-label");
+    svg.removeAttribute("aria-labelledby");
+    svg.removeAttribute("aria-hidden");
+    svg.querySelector("title")?.remove();
+    svg.querySelector("desc")?.remove();
+  }
+  _injectSVG(svgText, size, a11y) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+    const svg = doc.querySelector("svg");
+    if (!svg) {
+      this.innerHTML = "";
+      return;
+    }
+    this._stripForeignA11y(svg);
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    if (!svg.getAttribute("viewBox")) svg.setAttribute("viewBox", "0 0 24 24");
+    this._applyStyle(svg);
+    this._applyA11y(svg, a11y);
+    this.innerHTML = "";
+    this.appendChild(document.importNode(svg, true));
+    this._rendered = true;
+  }
+  _applyStyle(svg) {
+    svg.style.display = "inline-block";
+    svg.style.verticalAlign = "middle";
+    svg.style.flexShrink = "0";
+  }
+  _applyA11y(svg, a11y) {
+    const { label, hidden } = a11y;
+    const use = svg.querySelector("use");
+    if (label) {
+      svg.setAttribute("role", "img");
+      svg.setAttribute("aria-label", label);
+      svg.removeAttribute("aria-hidden");
+      svg.removeAttribute("focusable");
+      this.removeAttribute("aria-hidden");
+      if (use) use.removeAttribute("aria-hidden");
+    } else if (hidden) {
+      svg.setAttribute("role", "presentation");
+      svg.setAttribute("aria-hidden", "true");
+      svg.setAttribute("focusable", "false");
+      svg.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+      if (use) {
+        use.setAttribute("aria-hidden", "true");
+        use.setAttribute("focusable", "false");
+      }
+    }
+  }
+  static get providers() {
+    return Object.keys(PROVIDER_CDNS);
+  }
+  static registerProvider(name, urlTemplate, variantTemplates) {
+    PROVIDER_CDNS[name] = urlTemplate;
+    if (variantTemplates && PROVIDER_VARIANTS[name]) {
+      Object.assign(PROVIDER_VARIANTS[name], variantTemplates);
+    }
+  }
+};
+customElements.define("velin-icon", VelinIcon);
+var velin_icon_default = VelinIcon;
+export {
+  velin_icon_default as default
+};

package/dist/chunks/velin-lightbox-6E7CAATP.js

@@ -0,0 +1,149 @@
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
+import {
+  clearBackgroundInert,
+  setBackgroundInert,
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML,
+  sanitizeURL
+} from "./chunk-RDE3QE7Z.js";
+
+// components/velin-lightbox.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.85); opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .content {
+    position: relative; max-inline-size: 90vw; max-block-size: 90vh;
+  }
+  .content img, .content video {
+    max-inline-size: 100%; max-block-size: 85vh; object-fit: contain;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .close {
+    position: absolute; top: -2.5rem; right: 0;
+    background: none; border: none; color: #fff; font-size: 1.5rem;
+    cursor: pointer; min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(255,255,255,0.15); border: none; color: #fff;
+    font-size: 1.5rem; cursor: pointer; border-radius: 50%;
+    min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .nav:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav--prev { left: -3.5rem; }
+  .nav--next { right: -3.5rem; }
+  .counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 0.875rem; }
+  @media (prefers-reduced-motion: reduce) { .overlay { transition: none; } }
+  @media (max-width: 48rem) {
+    .nav--prev { left: 0.5rem; }
+    .nav--next { right: 0.5rem; }
+  }
+`;
+var VelinLightbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._items = [];
+    this._previousFocus = null;
+    this._onTrapKey = (e) => {
+      if (e.key === "Tab") trapFocus(this.shadowRoot, e);
+    };
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot></slot>
+      <div class="overlay" role="dialog" aria-modal="true" aria-label="Image lightbox" aria-roledescription="lightbox" part="overlay">
+        <button class="nav nav--prev" aria-label="Previous">&#8249;</button>
+        <div class="content" part="content"></div>
+        <button class="nav nav--next" aria-label="Next">&#8250;</button>
+        <button class="close" aria-label="Close">&times;</button>
+        <div class="counter" part="counter" aria-live="polite" aria-atomic="true"></div>
+      </div>
+    `;
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._items = slot.assignedElements().filter((el) => el.tagName === "IMG" || el.tagName === "VIDEO" || el.dataset.velinLightbox);
+      this._items.forEach((item, i) => {
+        item.style.cursor = "pointer";
+        item.addEventListener("click", () => this.open(i));
+      });
+    });
+    this.shadowRoot.querySelector(".close").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".nav--prev").addEventListener("click", () => this._prev());
+    this.shadowRoot.querySelector(".nav--next").addEventListener("click", () => this._next());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
+      if (e.target.classList.contains("overlay")) this.close();
+    });
+    this.shadowRoot.querySelector(".overlay").addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowLeft") this._prev();
+      if (e.key === "ArrowRight") this._next();
+    });
+  }
+  open(index = 0) {
+    this._previousFocus = document.activeElement;
+    this._index = index;
+    this.setAttribute("open", "");
+    setBackgroundInert(this);
+    this._render();
+    document.body.style.overflow = "hidden";
+    const overlay = this.shadowRoot.querySelector(".overlay");
+    overlay.removeEventListener("keydown", this._onTrapKey);
+    overlay.addEventListener("keydown", this._onTrapKey);
+    this.shadowRoot.querySelector(".close").focus();
+  }
+  close() {
+    this.removeAttribute("open");
+    clearBackgroundInert();
+    document.body.style.overflow = "";
+    if (this._previousFocus) {
+      this._previousFocus.focus();
+      this._previousFocus = null;
+    }
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _prev() {
+    this._index = (this._index - 1 + this._items.length) % this._items.length;
+    this._render();
+  }
+  _next() {
+    this._index = (this._index + 1) % this._items.length;
+    this._render();
+  }
+  _render() {
+    const container = this.shadowRoot.querySelector(".content");
+    const item = this._items[this._index];
+    if (!item) return;
+    const src = sanitizeURL(item.dataset.velinLightbox || item.src);
+    const alt = escapeHTML(item.alt || "");
+    if (item.tagName === "VIDEO") {
+      container.innerHTML = `<video src="${escapeHTML(src)}" controls autoplay></video>`;
+    } else {
+      container.innerHTML = `<img src="${escapeHTML(src)}" alt="${alt}">`;
+    }
+    const counter = this.shadowRoot.querySelector(".counter");
+    const label = `${this._index + 1} / ${this._items.length}`;
+    counter.textContent = label;
+    announce(`Slide ${label}`, "polite");
+  }
+};
+customElements.define("velin-lightbox", VelinLightbox);
+var velin_lightbox_default = VelinLightbox;
+export {
+  velin_lightbox_default as default
+};

package/dist/chunks/velin-lightbox-I75U6JF4.js

@@ -0,0 +1,140 @@
+import {
+  trapFocus
+} from "./chunk-42VVPW6N.js";
+import {
+  escapeHTML,
+  sanitizeURL
+} from "./chunk-LA7264K4.js";
+
+// components/velin-lightbox.js
+var styles = `
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.85); opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .content {
+    position: relative; max-inline-size: 90vw; max-block-size: 90vh;
+  }
+  .content img, .content video {
+    max-inline-size: 100%; max-block-size: 85vh; object-fit: contain;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
+  .close {
+    position: absolute; top: -2.5rem; right: 0;
+    background: none; border: none; color: #fff; font-size: 1.5rem;
+    cursor: pointer; min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .close:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    background: rgba(255,255,255,0.15); border: none; color: #fff;
+    font-size: 1.5rem; cursor: pointer; border-radius: 50%;
+    min-width: 2.75rem; min-height: 2.75rem;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .nav:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .nav--prev { left: -3.5rem; }
+  .nav--next { right: -3.5rem; }
+  .counter { position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 0.875rem; }
+  @media (prefers-reduced-motion: reduce) { .overlay { transition: none; } }
+  @media (max-width: 48rem) {
+    .nav--prev { left: 0.5rem; }
+    .nav--next { right: 0.5rem; }
+  }
+`;
+var VelinLightbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._index = 0;
+    this._items = [];
+    this._previousFocus = null;
+    this._onTrapKey = (e) => {
+      if (e.key === "Tab") trapFocus(this.shadowRoot, e);
+    };
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot></slot>
+      <div class="overlay" role="dialog" aria-modal="true" aria-label="Image lightbox" aria-roledescription="lightbox" part="overlay">
+        <button class="nav nav--prev" aria-label="Previous">&#8249;</button>
+        <div class="content" part="content"></div>
+        <button class="nav nav--next" aria-label="Next">&#8250;</button>
+        <button class="close" aria-label="Close">&times;</button>
+        <div class="counter" part="counter"></div>
+      </div>
+    `;
+    const slot = this.shadowRoot.querySelector("slot");
+    slot.addEventListener("slotchange", () => {
+      this._items = slot.assignedElements().filter((el) => el.tagName === "IMG" || el.tagName === "VIDEO" || el.dataset.velinLightbox);
+      this._items.forEach((item, i) => {
+        item.style.cursor = "pointer";
+        item.addEventListener("click", () => this.open(i));
+      });
+    });
+    this.shadowRoot.querySelector(".close").addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector(".nav--prev").addEventListener("click", () => this._prev());
+    this.shadowRoot.querySelector(".nav--next").addEventListener("click", () => this._next());
+    this.shadowRoot.querySelector(".overlay").addEventListener("click", (e) => {
+      if (e.target.classList.contains("overlay")) this.close();
+    });
+    this.shadowRoot.querySelector(".overlay").addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowLeft") this._prev();
+      if (e.key === "ArrowRight") this._next();
+    });
+  }
+  open(index = 0) {
+    this._previousFocus = document.activeElement;
+    this._index = index;
+    this.setAttribute("open", "");
+    this._render();
+    document.body.style.overflow = "hidden";
+    const overlay = this.shadowRoot.querySelector(".overlay");
+    overlay.removeEventListener("keydown", this._onTrapKey);
+    overlay.addEventListener("keydown", this._onTrapKey);
+    this.shadowRoot.querySelector(".close").focus();
+  }
+  close() {
+    this.removeAttribute("open");
+    document.body.style.overflow = "";
+    if (this._previousFocus) {
+      this._previousFocus.focus();
+      this._previousFocus = null;
+    }
+    this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
+  }
+  _prev() {
+    this._index = (this._index - 1 + this._items.length) % this._items.length;
+    this._render();
+  }
+  _next() {
+    this._index = (this._index + 1) % this._items.length;
+    this._render();
+  }
+  _render() {
+    const container = this.shadowRoot.querySelector(".content");
+    const item = this._items[this._index];
+    if (!item) return;
+    const src = sanitizeURL(item.dataset.velinLightbox || item.src);
+    const alt = escapeHTML(item.alt || "");
+    if (item.tagName === "VIDEO") {
+      container.innerHTML = `<video src="${escapeHTML(src)}" controls autoplay></video>`;
+    } else {
+      container.innerHTML = `<img src="${escapeHTML(src)}" alt="${alt}">`;
+    }
+    const counter = this.shadowRoot.querySelector(".counter");
+    counter.textContent = `${this._index + 1} / ${this._items.length}`;
+  }
+};
+customElements.define("velin-lightbox", VelinLightbox);
+var velin_lightbox_default = VelinLightbox;
+export {
+  velin_lightbox_default as default
+};