@birdapi/velinstyle 0.8.0 → 0.9.0

package/components/velin-accordion.js

@@ -26,6 +26,18 @@ const styles = `
   ::slotted(details > summary::-webkit-details-marker) {
     display: none;
   }
+  ::slotted(details[open] > summary) {
+    background: var(--velin-color-primary-subtle, #eff6ff);
+    color: var(--velin-color-primary, #2563eb);
+  }
+  ::slotted(details > :not(summary)) {
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    background: var(--velin-color-bg-subtle, #f8fafc);
+    color: var(--velin-color-text-muted, #64748b);
+    font-size: var(--velin-text-sm, 0.875rem);
+    line-height: 1.6;
+    border-block-start: 1px solid var(--velin-color-border, #e2e8f0);
+  }
 `;
 
 class VelinAccordion extends HTMLElement {

package/components/velin-bottom-nav.js

@@ -52,6 +52,25 @@ class VelinBottomNav extends HTMLElement {
 
   _onSlot() {
     this._syncCurrent();
+    this._syncSlotLabels();
+  }
+
+  _syncSlotLabels() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+    slot.assignedElements().forEach((el) => {
+      const text = el.textContent?.replace(/\s+/g, ' ').trim();
+      if (!text && !el.getAttribute('aria-label')) {
+        const hint =
+          el.getAttribute('data-nav') ||
+          el.getAttribute('title') ||
+          el.getAttribute('aria-labelledby');
+        if (hint) el.setAttribute('aria-label', hint);
+      }
+      if (el.tagName === 'A' && !el.getAttribute('href')) {
+        el.setAttribute('role', 'button');
+      }
+    });
   }
 
   _syncCurrent() {

package/components/velin-carousel.js

@@ -69,10 +69,10 @@ class VelinCarousel extends HTMLElement {
       <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>
+          <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"><polyline points="9 6 15 12 9 18"/></svg>
+          <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>

package/components/velin-code-block.js

@@ -0,0 +1,142 @@
+import { highlightElement, initHighlight } from '../core/highlight/index.js';
+
+/**
+ * @param {string} spec
+ * @returns {Set<number>}
+ */
+function parseLineHighlight(spec) {
+  const lines = 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;
+}
+
+class VelinCodeBlock 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);
+
+    const panelId = `velin-code-panel-${Math.random().toString(36).slice(2, 9)}`;
+    const wrap = document.createElement('div');
+    wrap.id = panelId;
+    wrap.className = showLines ? 'velin-code-block__gutter' : '';
+
+    if (collapsed) {
+      const toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'velin-btn velin-btn--sm velin-btn--ghost';
+      toggle.textContent = 'Expand';
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.setAttribute('aria-controls', panelId);
+      toggle.setAttribute('aria-label', 'Expand code block');
+      toggle.addEventListener('click', () => {
+        const on = this.hasAttribute('data-collapsed');
+        if (on) {
+          this.removeAttribute('data-collapsed');
+          toggle.textContent = 'Collapse';
+          toggle.setAttribute('aria-expanded', 'true');
+          toggle.setAttribute('aria-label', 'Collapse code block');
+        } else {
+          this.setAttribute('data-collapsed', '');
+          toggle.textContent = 'Expand';
+          toggle.setAttribute('aria-expanded', 'false');
+          toggle.setAttribute('aria-label', 'Expand code block');
+        }
+      });
+      this.setAttribute('data-collapsed', '');
+      toolbar.appendChild(toggle);
+    }
+
+    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);
+export default VelinCodeBlock;

package/components/velin-command.js

@@ -113,8 +113,23 @@ class VelinCommand extends HTMLElement {
     });
   }
 
+  _visibleItems() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot?.assignedElements().filter((el) => el.tagName === 'BUTTON' && !el.hidden) || [];
+  }
+
   _onKey(e) {
     if (e.key === 'Escape') { this.close(); return; }
+    const items = this._visibleItems();
+    if (items.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
+      const idx = items.indexOf(document.activeElement);
+      const next = e.key === 'ArrowDown'
+        ? items[(idx + 1) % items.length]
+        : items[(idx <= 0 ? items.length : idx) - 1];
+      next?.focus();
+      return;
+    }
     trapFocus(this.shadowRoot, e);
   }
 

package/components/velin-copy.js

@@ -1,3 +1,5 @@
+import { escapeHTML } from './sanitize.js';
+
 const styles = `
   :host { display: inline-flex; }
   button {
@@ -27,14 +29,14 @@ class VelinCopy extends HTMLElement {
   }
 
   connectedCallback() {
-    const label = this.getAttribute('label') || '';
+    const label = escapeHTML(this.getAttribute('label') || '');
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <button part="button" aria-label="Copy">
-        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
         </svg>
-        <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <polyline points="20 6 9 17 4 12"/>
         </svg>
         ${label ? `<span>${label}</span>` : ''}
@@ -44,8 +46,17 @@ class VelinCopy extends HTMLElement {
     this.shadowRoot.querySelector('button').addEventListener('click', () => this._copy());
   }
 
+  _getCopyText() {
+    return (
+      this.getAttribute('value') ||
+      this.getAttribute('text') ||
+      this.dataset.source ||
+      ''
+    );
+  }
+
   async _copy() {
-    const value = this.getAttribute('value') || '';
+    const value = this._getCopyText();
     if (!value) return;
 
     try {
@@ -72,5 +83,7 @@ class VelinCopy extends HTMLElement {
   }
 }
 
-customElements.define('velin-copy', VelinCopy);
+if (!customElements.get('velin-copy')) {
+  customElements.define('velin-copy', VelinCopy);
+}
 export default VelinCopy;

package/components/velin-counter.js

@@ -61,6 +61,9 @@ class VelinCounter extends HTMLElement {
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-atomic', 'true');
     this._render(this._fromValue());
     if (this.getAttribute('autostart') === 'false') return;
     this._scheduleStart();

package/components/velin-dialog.js

@@ -69,6 +69,10 @@ class VelinDialog extends HTMLElement {
 
   connectedCallback() {
     this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
+    const dialog = this.shadowRoot.querySelector('dialog');
+    if (dialog) {
+      dialog.setAttribute('aria-label', this.getAttribute('aria-label') || 'Dialog');
+    }
   }
 
   alert(message, { title = 'Alert', confirmText = 'OK' } = {}) {
@@ -102,11 +106,15 @@ class VelinDialog extends HTMLElement {
       ? `<input class="input" placeholder="${safePlaceholder}" value="${safeDefault}" part="input">`
       : '';
 
+    const titleId = `velin-dialog-title-${Math.random().toString(36).slice(2, 9)}`;
     dialog.innerHTML = `
-      <div class="header"><h3 class="title">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
+      <div class="header"><h3 class="title" id="${titleId}">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
       <div class="body"><p>${safeMsg}</p>${input}</div>
       <div class="footer">${footerBtns}</div>
     `;
+    dialog.setAttribute('aria-modal', 'true');
+    dialog.removeAttribute('aria-label');
+    dialog.setAttribute('aria-labelledby', titleId);
 
     dialog.showModal();
     if (type !== 'prompt') {

package/components/velin-email.js

@@ -0,0 +1,94 @@
+import { escapeHTML, escapeHTMLAttribute } from './sanitize.js';
+
+const styles = `
+  :host { display: inline; }
+  button {
+    font: inherit;
+    color: var(--velin-color-primary, #4338ca);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  .revealed { text-decoration: none; user-select: text; }
+`;
+
+function decodeObfuscated(raw, method) {
+  if (!raw) return '';
+  if (method === 'rot13') {
+    return raw.replace(/[a-zA-Z]/g, (c) => {
+      const base = c <= 'Z' ? 65 : 97;
+      return String.fromCharCode(((c.charCodeAt(0) - base + 13) % 26) + base);
+    });
+  }
+  try {
+    return atob(raw);
+  } catch {
+    return raw;
+  }
+}
+
+class VelinEmail extends HTMLElement {
+  static get observedAttributes() {
+    return ['value', 'obfuscate', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._revealed = false;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+
+  get email() {
+    const method = this.getAttribute('obfuscate') || '';
+    const raw = this.getAttribute('value') || '';
+    return method ? decodeObfuscated(raw, method) : raw;
+  }
+
+  render() {
+    const label = this.getAttribute('label') || 'Show email address';
+    const email = this.email;
+    const safeEmail = escapeHTML(email);
+
+    if (this._revealed) {
+      this.shadowRoot.innerHTML = `
+        <style>${styles}</style>
+        <span class="revealed" part="email"><a href="mailto:${escapeHTMLAttribute(email)}">${safeEmail}</a></span>
+      `;
+      return;
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <button type="button" part="reveal" aria-label="${escapeHTMLAttribute(label)}">${escapeHTML(label)}</button>
+    `;
+    this.shadowRoot.querySelector('button').addEventListener('click', () => {
+      this._revealed = true;
+      this.render();
+      this.dispatchEvent(new CustomEvent('velin-email-reveal', { bubbles: true, detail: { email } }));
+    });
+  }
+}
+
+if (!customElements.get('velin-email')) {
+  customElements.define('velin-email', VelinEmail);
+}
+
+export default VelinEmail;

package/components/velin-icon.js

@@ -1,16 +1,22 @@
+import { sanitizeURL, sanitizeSVG } from './sanitize.js';
+
 const 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://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/{name}.svg',
+  fontawesome:
+    'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/svgs/solid/{name}.svg',
 };
 
 const PROVIDER_VARIANTS = {
   fontawesome: {
-    regular: 'https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/regular/{name}.svg',
-    solid: 'https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/{name}.svg',
-    brands: 'https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/{name}.svg',
+    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',
@@ -48,7 +54,7 @@ class VelinIcon 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');
 
@@ -58,14 +64,21 @@ class VelinIcon extends HTMLElement {
     }
 
     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);
@@ -77,7 +90,6 @@ class VelinIcon 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');
@@ -87,54 +99,70 @@ class VelinIcon extends HTMLElement {
     if (spriteAttr === '' || (spriteAttr == null && isLocalSymbol)) {
       href = `#${name}`;
     } else {
-      const spriteUrl = spriteAttr || 'velin-icons.svg';
+      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, 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, a11y);
       return;
     }
-    const url = template.replace('{name}', name);
     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');
-      _svgCache.set(cacheKey, text);
-      this._injectSVG(text, size, label);
+      const clean = await sanitizeSVG(text);
+      _svgCache.set(cacheKey, clean);
+      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');
     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, label);
+    this._applyA11y(svg, a11y);
 
     this.innerHTML = '';
     this.appendChild(document.importNode(svg, true));
@@ -147,19 +175,34 @@ class VelinIcon extends HTMLElement {
     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() { return Object.keys(PROVIDER_CDNS); }
 
-  static registerProvider(name, urlTemplate) {
+  static registerProvider(name, urlTemplate, variantTemplates) {
     PROVIDER_CDNS[name] = urlTemplate;
+    if (variantTemplates && PROVIDER_VARIANTS[name]) {
+      Object.assign(PROVIDER_VARIANTS[name], variantTemplates);
+    }
   }
 }
 

package/components/velin-lightbox.js

@@ -1,4 +1,5 @@
-import { trapFocus } from './focus-manager.js';
+import { trapFocus, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
+import { announce } from './a11y-utils.js';
 import { escapeHTML, sanitizeURL } from './sanitize.js';
 
 const styles = `
@@ -61,7 +62,7 @@ class VelinLightbox 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>
     `;
 
@@ -89,6 +90,7 @@ class VelinLightbox 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');
@@ -99,6 +101,7 @@ class VelinLightbox extends HTMLElement {
 
   close() {
     this.removeAttribute('open');
+    clearBackgroundInert();
     document.body.style.overflow = '';
     if (this._previousFocus) {
       this._previousFocus.focus();
@@ -122,7 +125,9 @@ class VelinLightbox 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');
   }
 }
 

package/components/velin-live-dot.js

@@ -11,6 +11,8 @@
  *   pulse    "true" (default) | "false"   Disables the looped pulse.
  */
 
+import { liveDotLabel } from './a11y-utils.js';
+
 const STATUS_COLORS = {
   live: 'var(--velin-color-success, oklch(60% 0.16 145))',
   paused: 'var(--velin-color-text-muted, oklch(60% 0.02 240))',
@@ -70,6 +72,9 @@ class VelinLiveDot extends HTMLElement {
   _render() {
     const status = this.getAttribute('status') || 'live';
     const color = STATUS_COLORS[status] || STATUS_COLORS.live;
+    const label = this.getAttribute('aria-label') || liveDotLabel(status);
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-label', label);
     this.style.setProperty('--velin-live-color', color);
     this.shadowRoot.innerHTML = `
       <style>${styles}${KEYFRAMES_FALLBACK}</style>