@birdapi/velinstyle 1.0.0 → 1.2.0

package/dist/chunks/velin-form-summary-XRQ7COQH.js

@@ -0,0 +1,273 @@
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
+
+// components/velin-form-summary.js
+var FIELD_SELECTOR = "input, select, textarea";
+var IGNORED_TYPES = /* @__PURE__ */ new Set(["submit", "reset", "button", "image", "hidden"]);
+var fieldIdCounter = 0;
+function escapeSelector(value) {
+  const text = String(value ?? "");
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(text);
+  return text.replace(/[^\w-]/g, (char) => `\\${char}`);
+}
+function fieldLabel(field) {
+  const explicit = field.getAttribute("data-error-label");
+  if (explicit) return explicit;
+  const ariaLabel = field.getAttribute("aria-label");
+  if (ariaLabel?.trim()) return ariaLabel.trim();
+  const labelledBy = field.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const text = labelledBy.split(/\s+/).map((id) => field.ownerDocument.getElementById(id)?.textContent?.trim() || "").filter(Boolean).join(" ");
+    if (text) return text;
+  }
+  if (field.id) {
+    const label = field.ownerDocument.querySelector(`label[for="${escapeSelector(field.id)}"]`);
+    if (label?.textContent.trim()) return label.textContent.trim();
+  }
+  const wrapping = field.closest("label");
+  if (wrapping?.textContent.trim()) return wrapping.textContent.trim();
+  return field.name || "This field";
+}
+function fieldMessage(field) {
+  return field.getAttribute("data-error-message")?.trim() || field.validationMessage || "Invalid value";
+}
+function addDescribedBy(field, id) {
+  const ids = (field.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+  if (!ids.includes(id)) {
+    ids.push(id);
+    field.setAttribute("aria-describedby", ids.join(" "));
+  }
+}
+function removeDescribedBy(field, id) {
+  const ids = (field.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+  const next = ids.filter((value) => value !== id);
+  if (next.length) field.setAttribute("aria-describedby", next.join(" "));
+  else field.removeAttribute("aria-describedby");
+}
+var VelinFormSummary = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["for", "heading"];
+  }
+  constructor() {
+    super();
+    this._form = null;
+    this._panel = null;
+    this._errors = [];
+    this._onSubmit = this._onSubmit.bind(this);
+    this._onFieldChange = this._onFieldChange.bind(this);
+    this._onReset = this._onReset.bind(this);
+  }
+  connectedCallback() {
+    this.classList.add("velin-form-summary");
+    requestAnimationFrame(() => this._bindForm());
+  }
+  disconnectedCallback() {
+    this._unbindForm();
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "for" && this.isConnected) {
+      this._unbindForm();
+      this._bindForm();
+    } else if (name === "heading" && this._panel) {
+      const heading = this._panel.querySelector(".velin-form-summary__heading");
+      if (heading) heading.textContent = this.headingText;
+    }
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  get form() {
+    return this._form;
+  }
+  /** @returns {{ field: HTMLElement, label: string, message: string }[]} */
+  get errors() {
+    return this._errors.slice();
+  }
+  get headingText() {
+    return this.getAttribute("heading") || "There is a problem";
+  }
+  /** Validate the form and render the summary. @returns {boolean} valid */
+  validate() {
+    if (!this._form) return true;
+    const errors = [];
+    for (const field of this._fields()) {
+      if (field.checkValidity()) {
+        this._clearFieldError(field);
+        continue;
+      }
+      const error = { field, label: fieldLabel(field), message: fieldMessage(field) };
+      this._markFieldError(field, error.message);
+      errors.push(error);
+    }
+    this._errors = errors;
+    this._render();
+    return errors.length === 0;
+  }
+  /** Remove the summary and all field error state. */
+  clear() {
+    for (const field of this._fields()) this._clearFieldError(field);
+    this._errors = [];
+    this._render();
+  }
+  /** Move focus to the first field with an error. */
+  focusFirstError() {
+    const first = this._errors[0];
+    if (first) this._focusField(first.field);
+  }
+  // ── Form wiring ────────────────────────────────────────────────────────────
+  _bindForm() {
+    const id = this.getAttribute("for");
+    this._form = id ? this.ownerDocument.getElementById(id) : this.closest("form");
+    if (!this._form) return;
+    if (!this.hasAttribute("native-validation")) this._form.noValidate = true;
+    this._form.addEventListener("submit", this._onSubmit);
+    this._form.addEventListener("reset", this._onReset);
+    this._form.addEventListener("input", this._onFieldChange);
+    this._form.addEventListener("change", this._onFieldChange);
+  }
+  _unbindForm() {
+    if (!this._form) return;
+    this._form.removeEventListener("submit", this._onSubmit);
+    this._form.removeEventListener("reset", this._onReset);
+    this._form.removeEventListener("input", this._onFieldChange);
+    this._form.removeEventListener("change", this._onFieldChange);
+    this._form = null;
+  }
+  /** @returns {HTMLElement[]} */
+  _fields() {
+    if (!this._form) return [];
+    const seenRadioNames = /* @__PURE__ */ new Set();
+    return [...this._form.querySelectorAll(FIELD_SELECTOR)].filter((field) => {
+      if (IGNORED_TYPES.has(field.type)) return false;
+      if (field.disabled || field.hasAttribute("data-error-ignore")) return false;
+      if (typeof field.checkValidity !== "function") return false;
+      if (field.type === "radio" && field.name) {
+        if (seenRadioNames.has(field.name)) return false;
+        seenRadioNames.add(field.name);
+      }
+      return true;
+    });
+  }
+  _onSubmit(event) {
+    if (this.validate()) return;
+    event.preventDefault();
+    this._announceErrors();
+    this._focusPanel();
+    this.dispatchEvent(new CustomEvent("velin-form-invalid", {
+      bubbles: true,
+      detail: { errors: this.errors.map(({ label, message }) => ({ label, message })) }
+    }));
+  }
+  _onReset() {
+    requestAnimationFrame(() => this.clear());
+  }
+  /** Re-validate a single field once it already had an error, never before. */
+  _onFieldChange(event) {
+    const field = event.target;
+    if (!field || !this._errors.some((error) => error.field === field)) return;
+    if (!field.checkValidity()) return;
+    this._clearFieldError(field);
+    this._errors = this._errors.filter((error) => error.field !== field);
+    this._render();
+    if (this._errors.length === 0) {
+      this.dispatchEvent(new CustomEvent("velin-form-valid", { bubbles: true }));
+    }
+  }
+  // ── Field state ────────────────────────────────────────────────────────────
+  /** @param {HTMLElement} field */
+  _errorId(field) {
+    if (!field.id) field.id = `velin-field-${++fieldIdCounter}`;
+    return `${field.id}-error`;
+  }
+  /**
+   * @param {HTMLElement} field
+   * @param {string} message
+   */
+  _markFieldError(field, message) {
+    const errorId = this._errorId(field);
+    field.setAttribute("aria-invalid", "true");
+    let holder = this.ownerDocument.getElementById(errorId);
+    if (!holder) {
+      holder = this._form.querySelector(`[data-velin-error-for="${escapeSelector(field.name || field.id)}"]`);
+    }
+    if (!holder) {
+      holder = this.ownerDocument.createElement("p");
+      holder.dataset.velinErrorGenerated = "true";
+      field.insertAdjacentElement("afterend", holder);
+    }
+    holder.id = errorId;
+    holder.classList.add("velin-field-error");
+    holder.textContent = message;
+    addDescribedBy(field, errorId);
+  }
+  /** @param {HTMLElement} field */
+  _clearFieldError(field) {
+    if (!field.id) return;
+    const errorId = `${field.id}-error`;
+    field.removeAttribute("aria-invalid");
+    removeDescribedBy(field, errorId);
+    const holder = this.ownerDocument.getElementById(errorId);
+    if (!holder) return;
+    if (holder.dataset.velinErrorGenerated) holder.remove();
+    else holder.textContent = "";
+  }
+  /** @param {HTMLElement} field */
+  _focusField(field) {
+    const target = field.type === "radio" && field.name ? this._form.querySelector(`input[type="radio"][name="${escapeSelector(field.name)}"]`) || field : field;
+    target.focus();
+    this.dispatchEvent(new CustomEvent("velin-form-error-focus", {
+      bubbles: true,
+      detail: { name: target.name || target.id }
+    }));
+  }
+  // ── Summary panel ──────────────────────────────────────────────────────────
+  _render() {
+    if (!this._errors.length) {
+      this._panel?.remove();
+      this._panel = null;
+      this.hidden = true;
+      return;
+    }
+    this.hidden = false;
+    if (!this._panel?.isConnected) {
+      const panel = this.ownerDocument.createElement("div");
+      panel.className = "velin-form-summary__panel velin-alert velin-alert--danger";
+      panel.setAttribute("role", "alert");
+      panel.tabIndex = -1;
+      const heading = this.ownerDocument.createElement("p");
+      heading.className = "velin-form-summary__heading";
+      heading.textContent = this.headingText;
+      const list2 = this.ownerDocument.createElement("ul");
+      list2.className = "velin-form-summary__list";
+      panel.append(heading, list2);
+      this.appendChild(panel);
+      this._panel = panel;
+    }
+    const list = this._panel.querySelector(".velin-form-summary__list");
+    list.textContent = "";
+    for (const error of this._errors) {
+      const item = this.ownerDocument.createElement("li");
+      const link = this.ownerDocument.createElement("a");
+      link.href = `#${this._errorId(error.field).replace(/-error$/, "")}`;
+      link.textContent = `${error.label}: ${error.message}`;
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+        this._focusField(error.field);
+      });
+      item.appendChild(link);
+      list.appendChild(item);
+    }
+  }
+  _focusPanel() {
+    this._panel?.focus();
+  }
+  _announceErrors() {
+    const count = this._errors.length;
+    announce(count === 1 ? "1 field needs attention" : `${count} fields need attention`, "assertive");
+  }
+};
+customElements.define("velin-form-summary", VelinFormSummary);
+var velin_form_summary_default = VelinFormSummary;
+export {
+  velin_form_summary_default as default
+};

package/dist/chunks/{velin-icon-7M76DOPB.js → velin-icon-A6NCXGUK.js}

@@ -1,7 +1,7 @@
 import {
   sanitizeSVG,
   sanitizeURL
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-icon.js
 var PROVIDER_CDNS = {
@@ -29,7 +29,21 @@ function resolveProviderUrl(provider, variant) {
   return PROVIDER_CDNS[provider];
 }
 var _svgCache = /* @__PURE__ */ new Map();
+var DEFAULT_SPRITE = "velin-icons.svg";
+function resolveDefaultSpriteUrl() {
+  if (typeof document !== "undefined") {
+    const meta = document.querySelector('meta[name="velin-icon-sprite"]');
+    const fromMeta = meta?.getAttribute("content")?.trim();
+    if (fromMeta) return fromMeta;
+    const fromHtml = document.documentElement?.getAttribute("data-velin-icon-sprite")?.trim();
+    if (fromHtml) return fromHtml;
+  }
+  const configured = typeof VelinIcon.defaultSprite === "string" ? VelinIcon.defaultSprite.trim() : "";
+  return configured || DEFAULT_SPRITE;
+}
 var VelinIcon = class extends HTMLElement {
+  /** @type {string} Relative or absolute sprite URL used when `sprite` attribute is omitted. */
+  static defaultSprite = DEFAULT_SPRITE;
   static get observedAttributes() {
     return ["name", "size", "label", "provider", "variant", "sprite"];
   }
@@ -46,7 +60,7 @@ var VelinIcon = class extends HTMLElement {
   _render() {
     const name = this.getAttribute("name");
     const size = this.getAttribute("size") || "24";
-    const label = this.getAttribute("label");
+    const a11y = this._resolveA11y();
     const provider = this.getAttribute("provider");
     const variant = this.getAttribute("variant");
     if (!name) {
@@ -54,12 +68,18 @@ var VelinIcon = class extends HTMLElement {
       return;
     }
     if (provider && (PROVIDER_CDNS[provider] || PROVIDER_VARIANTS[provider])) {
-      this._renderFromCDN(name, size, label, provider, variant);
+      this._renderFromCDN(name, size, a11y, provider, variant);
       return;
     }
-    this._renderFromSprite(name, size, label);
+    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, label) {
+  _renderFromSprite(name, size, a11y) {
     const svgNS = "http://www.w3.org/2000/svg";
     const svg = document.createElementNS(svgNS, "svg");
     svg.setAttribute("width", size);
@@ -71,7 +91,6 @@ var VelinIcon = class extends HTMLElement {
     svg.setAttribute("stroke-linecap", "round");
     svg.setAttribute("stroke-linejoin", "round");
     this._applyStyle(svg);
-    this._applyA11y(svg, label);
     const use = document.createElementNS(svgNS, "use");
     const spriteAttr = this.getAttribute("sprite");
     const localSymbol = document.getElementById(name);
@@ -80,29 +99,31 @@ var VelinIcon = class extends HTMLElement {
     if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
       href = `#${name}`;
     } else {
-      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      const fallback = resolveDefaultSpriteUrl();
+      const spriteUrl = sanitizeURL(spriteAttr || fallback) || fallback || DEFAULT_SPRITE;
       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, label, provider, variant) {
+  async _renderFromCDN(name, size, a11y, provider, variant) {
     const cacheKey = `${provider}:${variant || "default"}:${name}`;
     if (_svgCache.has(cacheKey)) {
-      this._injectSVG(_svgCache.get(cacheKey), size, label);
+      this._injectSVG(_svgCache.get(cacheKey), size, a11y);
       return;
     }
     const template = resolveProviderUrl(provider, variant);
     if (!template) {
-      this._renderFromSprite(name, size, label);
+      this._renderFromSprite(name, size, a11y);
       return;
     }
     const url = sanitizeURL(template.replace("{name}", name));
     if (!url) {
-      this._renderFromSprite(name, size, label);
+      this._renderFromSprite(name, size, a11y);
       return;
     }
     try {
@@ -112,12 +133,20 @@ var VelinIcon = class extends HTMLElement {
       if (!text.includes("<svg")) throw new Error("Not SVG");
       const clean = await sanitizeSVG(text);
       _svgCache.set(cacheKey, clean);
-      this._injectSVG(clean, size, label);
+      this._injectSVG(clean, size, a11y);
     } catch {
-      this._renderFromSprite(name, size, label);
+      this._renderFromSprite(name, size, a11y);
     }
   }
-  _injectSVG(svgText, size, label) {
+  _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");
@@ -125,11 +154,12 @@ var VelinIcon = class extends HTMLElement {
       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, label);
+    this._applyA11y(svg, a11y);
     this.innerHTML = "";
     this.appendChild(document.importNode(svg, true));
     this._rendered = true;
@@ -139,12 +169,24 @@ var VelinIcon = class extends HTMLElement {
     svg.style.verticalAlign = "middle";
     svg.style.flexShrink = "0";
   }
-  _applyA11y(svg, label) {
+  _applyA11y(svg, a11y) {
+    const { label, hidden } = a11y;
+    const use = svg.querySelector("use");
     if (label) {
       svg.setAttribute("role", "img");
       svg.setAttribute("aria-label", label);
-    } else {
+      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() {

package/dist/chunks/{velin-icon-ZTSKUOVN.js → velin-icon-EC4B5XCM.js}

@@ -29,9 +29,23 @@ function resolveProviderUrl(provider, variant) {
   return PROVIDER_CDNS[provider];
 }
 var _svgCache = /* @__PURE__ */ new Map();
+var DEFAULT_SPRITE = "velin-icons.svg";
+function resolveDefaultSpriteUrl() {
+  if (typeof document !== "undefined") {
+    const meta = document.querySelector('meta[name="velin-icon-sprite"]');
+    const fromMeta = meta?.getAttribute("content")?.trim();
+    if (fromMeta) return fromMeta;
+    const fromHtml = document.documentElement?.getAttribute("data-velin-icon-sprite")?.trim();
+    if (fromHtml) return fromHtml;
+  }
+  const configured = typeof VelinIcon.defaultSprite === "string" ? VelinIcon.defaultSprite.trim() : "";
+  return configured || DEFAULT_SPRITE;
+}
 var VelinIcon = class extends HTMLElement {
+  /** @type {string} Relative or absolute sprite URL used when `sprite` attribute is omitted. */
+  static defaultSprite = DEFAULT_SPRITE;
   static get observedAttributes() {
-    return ["name", "size", "label", "provider", "variant", "sprite", "aria-hidden", "aria-label"];
+    return ["name", "size", "label", "provider", "variant", "sprite"];
   }
   constructor() {
     super();
@@ -77,7 +91,6 @@ var VelinIcon = class extends HTMLElement {
     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);
@@ -86,11 +99,13 @@ var VelinIcon = class extends HTMLElement {
     if (spriteAttr === "" || spriteAttr == null && isLocalSymbol) {
       href = `#${name}`;
     } else {
-      const spriteUrl = sanitizeURL(spriteAttr || "/dist/velin-icons.svg") || "/dist/velin-icons.svg";
+      const fallback = resolveDefaultSpriteUrl();
+      const spriteUrl = sanitizeURL(spriteAttr || fallback) || fallback || DEFAULT_SPRITE;
       href = `${spriteUrl}#${name}`;
     }
     use.setAttribute("href", href);
     svg.appendChild(use);
+    this._applyA11y(svg, a11y);
     this.innerHTML = "";
     this.appendChild(svg);
     this._rendered = true;
@@ -162,14 +177,12 @@ var VelinIcon = class extends HTMLElement {
       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");

package/dist/chunks/{velin-lightbox-6E7CAATP.js → velin-lightbox-FFK4TUUP.js}

@@ -1,11 +1,11 @@
-import {
-  announce
-} from "./chunk-Z4JYQ2XX.js";
 import {
   clearBackgroundInert,
   setBackgroundInert,
   trapFocus
 } from "./chunk-42VVPW6N.js";
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
 import {
   escapeHTML,
   sanitizeURL
@@ -101,7 +101,6 @@ var VelinLightbox = class extends HTMLElement {
     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);
@@ -109,14 +108,16 @@ var VelinLightbox = class extends HTMLElement {
   }
   close() {
     this.removeAttribute("open");
-    clearBackgroundInert();
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
     if (this._previousFocus) {
       this._previousFocus.focus();
       this._previousFocus = null;
     }
     this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
   }
+  disconnectedCallback() {
+    clearBackgroundInert(this);
+  }
   _prev() {
     this._index = (this._index - 1 + this._items.length) % this._items.length;
     this._render();

package/dist/chunks/{velin-lightbox-I75U6JF4.js → velin-lightbox-P725FLTY.js}

@@ -1,10 +1,15 @@
 import {
+  clearBackgroundInert,
+  setBackgroundInert,
   trapFocus
 } from "./chunk-42VVPW6N.js";
+import {
+  announce
+} from "./chunk-Z4JYQ2XX.js";
 import {
   escapeHTML,
   sanitizeURL
-} from "./chunk-LA7264K4.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-lightbox.js
 var styles = `
@@ -67,7 +72,7 @@ var VelinLightbox = class extends HTMLElement {
         <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 class="counter" part="counter" aria-live="polite" aria-atomic="true"></div>
       </div>
     `;
     const slot = this.shadowRoot.querySelector("slot");
@@ -94,8 +99,8 @@ var VelinLightbox = class extends HTMLElement {
     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);
@@ -103,13 +108,16 @@ var VelinLightbox = class extends HTMLElement {
   }
   close() {
     this.removeAttribute("open");
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
     if (this._previousFocus) {
       this._previousFocus.focus();
       this._previousFocus = null;
     }
     this.dispatchEvent(new CustomEvent("velin-close", { bubbles: true }));
   }
+  disconnectedCallback() {
+    clearBackgroundInert(this);
+  }
   _prev() {
     this._index = (this._index - 1 + this._items.length) % this._items.length;
     this._render();
@@ -130,7 +138,9 @@ var VelinLightbox = class extends HTMLElement {
       container.innerHTML = `<img src="${escapeHTML(src)}" alt="${alt}">`;
     }
     const counter = this.shadowRoot.querySelector(".counter");
-    counter.textContent = `${this._index + 1} / ${this._items.length}`;
+    const label = `${this._index + 1} / ${this._items.length}`;
+    counter.textContent = label;
+    announce(`Slide ${label}`, "polite");
   }
 };
 customElements.define("velin-lightbox", VelinLightbox);

package/dist/chunks/{velin-menubar-J66JXRWW.js → velin-menubar-6I2LM5HL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-LA7264K4.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-menubar.js
 var styles = `

package/dist/chunks/{velin-modal-5HYNNNUI.js → velin-modal-ICTMGRSU.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-42VVPW6N.js";
 import {
   escapeHTML
-} from "./chunk-MKZP2TBH.js";
+} from "./chunk-L7ZGUU4D.js";
 
 // components/velin-modal.js
 var styles = `
@@ -105,14 +105,15 @@ var VelinModal = class extends HTMLElement {
     this._onKeydown = this._onKeydown.bind(this);
   }
   connectedCallback() {
-    const title = this.getAttribute("title") || "";
+    const title = (this.getAttribute("title") || "").trim();
     const safeTitle = escapeHTML(title);
+    const dialogLabel = title ? 'aria-labelledby="velin-modal-title"' : `aria-label="${escapeHTML(this.getAttribute("aria-label") || "Dialog")}"`;
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay">
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="velin-modal-title" part="dialog">
+        <div class="dialog" role="dialog" aria-modal="true" ${dialogLabel} part="dialog">
           <div class="header" part="header">
-            <h2 class="title" id="velin-modal-title">${safeTitle}</h2>
+            <h2 class="title" id="velin-modal-title"${title ? "" : ' class="velin-sr-only"'}>${safeTitle || "Dialog"}</h2>
             <button class="close-btn" aria-label="Close" part="close">&#215;</button>
           </div>
           <div class="body" part="body"><slot></slot></div>
@@ -145,7 +146,6 @@ var VelinModal = class extends HTMLElement {
     this._previouslyFocused = saveFocus();
     setBackgroundInert(this);
     document.addEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "hidden";
     requestAnimationFrame(() => {
       const focusable = getFocusableElements(this.shadowRoot);
       if (focusable.length > 0) focusable[0].focus();
@@ -153,8 +153,7 @@ var VelinModal = class extends HTMLElement {
   }
   _close() {
     document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._previouslyFocused);
   }
   _onKeydown(event) {
@@ -166,7 +165,7 @@ var VelinModal = class extends HTMLElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKeydown);
-    document.body.style.overflow = "";
+    clearBackgroundInert(this);
   }
 };
 customElements.define("velin-modal", VelinModal);