@birdapi/velinstyle 1.1.0 → 1.2.0

package/components/velin-calendar.js

@@ -0,0 +1,212 @@
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: block; max-inline-size: 100%; }
+  .cal {
+    box-sizing: border-box;
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    background: var(--velin-color-surface, #fff);
+    color: var(--velin-color-text, #111);
+    padding: var(--velin-space-3, 0.75rem);
+    max-inline-size: min(20rem, 100%);
+    inline-size: 100%;
+  }
+  .head {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: var(--velin-space-2, 0.5rem); margin-block-end: var(--velin-space-3, 0.75rem);
+  }
+  .title { font-weight: var(--velin-weight-semibold, 600); margin: 0; font-size: var(--velin-text-base, 1rem); }
+  .nav {
+    display: inline-flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    min-inline-size: 2.5rem; min-block-size: 2.5rem;
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: var(--velin-color-surface-bright, #fff);
+    color: inherit; cursor: pointer;
+  }
+  .nav:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  .grid {
+    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem;
+  }
+  .dow {
+    text-align: center; font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #64748b); padding-block: 0.25rem;
+  }
+  .day {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 2.25rem;
+    aspect-ratio: 1;
+    border: none; border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent; color: inherit; cursor: pointer;
+    font: inherit;
+    padding: 0;
+  }
+  .day[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
+  .day[aria-selected="true"] {
+    background: var(--velin-color-primary, #2563eb);
+    color: var(--velin-color-on-primary, #fff);
+  }
+  .day:not([aria-disabled="true"]):hover {
+    background: var(--velin-color-primary-subtle, #eff6ff);
+  }
+  .day:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 1px; }
+  .out { color: var(--velin-color-text-muted, #94a3b8); }
+`;
+
+function iso(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+function parseISO(v) {
+  if (!v) return null;
+  const m = String(v).match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+class VelinCalendar extends HTMLElement {
+  static get observedAttributes() {
+    return ['value', 'min', 'max', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._view = new Date();
+    this._view.setDate(1);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const selected = parseISO(this.getAttribute('value')) || new Date();
+    this._view = new Date(selected.getFullYear(), selected.getMonth(), 1);
+    this._render();
+  }
+
+  attributeChangedCallback(name, prev, next) {
+    if (prev === next || !this.shadowRoot?.querySelector('.cal')) return;
+    if (name === 'value' && next) {
+      const d = parseISO(next);
+      if (d) this._view = new Date(d.getFullYear(), d.getMonth(), 1);
+    }
+    this._render();
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(v) {
+    if (v) this.setAttribute('value', v);
+    else this.removeAttribute('value');
+  }
+
+  _inRange(d) {
+    const min = parseISO(this.getAttribute('min'));
+    const max = parseISO(this.getAttribute('max'));
+    if (min && d < min) return false;
+    if (max && d > max) return false;
+    return true;
+  }
+
+  _select(d) {
+    if (!this._inRange(d)) return;
+    const v = iso(d);
+    this.setAttribute('value', v);
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: v, date: d } }));
+    this._render();
+  }
+
+  _shiftMonth(delta) {
+    this._view = new Date(this._view.getFullYear(), this._view.getMonth() + delta, 1);
+    this._render();
+  }
+
+  _onKey(e) {
+    const selected = parseISO(this.getAttribute('value')) || new Date();
+    let next = new Date(selected);
+    switch (e.key) {
+      case 'ArrowLeft': next.setDate(next.getDate() - 1); break;
+      case 'ArrowRight': next.setDate(next.getDate() + 1); break;
+      case 'ArrowUp': next.setDate(next.getDate() - 7); break;
+      case 'ArrowDown': next.setDate(next.getDate() + 7); break;
+      case 'Home': next = new Date(next.getFullYear(), next.getMonth(), 1); break;
+      case 'End': next = new Date(next.getFullYear(), next.getMonth() + 1, 0); break;
+      case 'PageUp': next = new Date(next.getFullYear(), next.getMonth() - 1, next.getDate()); break;
+      case 'PageDown': next = new Date(next.getFullYear(), next.getMonth() + 1, next.getDate()); break;
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        this._select(selected);
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    if (!this._inRange(next)) return;
+    this._view = new Date(next.getFullYear(), next.getMonth(), 1);
+    this.setAttribute('value', iso(next));
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: iso(next), date: next } }));
+    this._render();
+    this.shadowRoot.querySelector(`[data-iso="${iso(next)}"]`)?.focus();
+  }
+
+  _render() {
+    const label = escapeHTML(this.getAttribute('label') || 'Choose date');
+    const selected = parseISO(this.getAttribute('value'));
+    const y = this._view.getFullYear();
+    const m = this._view.getMonth();
+    const title = this._view.toLocaleString(undefined, { month: 'long', year: 'numeric' });
+    const start = new Date(y, m, 1);
+    const startDow = (start.getDay() + 6) % 7; // Monday-first
+    const daysInMonth = new Date(y, m + 1, 0).getDate();
+    const dows = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+    let cells = dows.map((d) => `<div class="dow" aria-hidden="true">${d}</div>`).join('');
+    for (let i = 0; i < startDow; i += 1) {
+      const d = new Date(y, m, -startDow + i + 1);
+      cells += `<button type="button" class="day out" tabindex="-1" data-iso="${iso(d)}" aria-label="${iso(d)}">${d.getDate()}</button>`;
+    }
+    for (let day = 1; day <= daysInMonth; day += 1) {
+      const d = new Date(y, m, day);
+      const id = iso(d);
+      const sel = selected && iso(selected) === id;
+      const disabled = !this._inRange(d);
+      cells += `<button type="button" class="day" data-iso="${id}" aria-label="${id}" aria-selected="${sel ? 'true' : 'false'}" aria-disabled="${disabled ? 'true' : 'false'}" tabindex="${sel ? '0' : '-1'}">${day}</button>`;
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="cal" role="group" aria-label="${label}">
+        <div class="head">
+          <button type="button" class="nav" data-nav="-1" aria-label="Previous month">‹</button>
+          <p class="title" id="cal-title">${escapeHTML(title)}</p>
+          <button type="button" class="nav" data-nav="1" aria-label="Next month">›</button>
+        </div>
+        <div class="grid" role="grid" aria-labelledby="cal-title">${cells}</div>
+      </div>
+    `;
+
+    this.shadowRoot.querySelectorAll('[data-nav]').forEach((btn) => {
+      btn.addEventListener('click', () => this._shiftMonth(Number(btn.getAttribute('data-nav'))));
+    });
+    this.shadowRoot.querySelectorAll('.day').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        if (btn.getAttribute('aria-disabled') === 'true') return;
+        const d = parseISO(btn.getAttribute('data-iso'));
+        if (d) this._select(d);
+      });
+      btn.addEventListener('keydown', this._onKey);
+    });
+  }
+}
+
+customElements.define('velin-calendar', VelinCalendar);
+export default VelinCalendar;

package/components/velin-command.js

@@ -11,9 +11,14 @@ const styles = `
     padding: 10vh var(--velin-space-4, 1rem) var(--velin-space-4, 1rem);
     background: var(--velin-color-overlay, rgba(0,0,0,0.4));
     opacity: 0; visibility: hidden;
+    pointer-events: none;
     transition: opacity 150ms ease, visibility 150ms ease;
   }
-  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  :host([open]) .overlay {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
   .panel {
     inline-size: min(32rem, 100%);
     background: var(--velin-color-surface-bright, #fff);
@@ -66,6 +71,7 @@ class VelinCommand extends HTMLElement {
       </div>
     `;
     this.shadowRoot.querySelector('.search').addEventListener('input', this._onInput);
+    this.shadowRoot.querySelector('.overlay')?.addEventListener('click', this._onOverlayClick);
     this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._filter(''));
     this._filter('');
   }
@@ -79,6 +85,14 @@ class VelinCommand extends HTMLElement {
     this.removeAttribute('open');
     this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
   }
+  toggle() {
+    if (this.hasAttribute('open')) this.close();
+    else this.open();
+  }
+
+  _onOverlayClick = (event) => {
+    if (event.target === event.currentTarget) this.close();
+  };
 
   _open() {
     this._prev = saveFocus();
@@ -92,7 +106,7 @@ class VelinCommand extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKey);
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
     const input = this.shadowRoot.querySelector('.search');
     if (input) input.value = '';
@@ -135,6 +149,8 @@ class VelinCommand extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKey);
+    this.shadowRoot?.querySelector('.overlay')?.removeEventListener('click', this._onOverlayClick);
+    if (this.hasAttribute('open')) clearBackgroundInert(this);
   }
 }
 

package/components/velin-data-table.js

@@ -29,7 +29,7 @@ function sortValue(cell, type) {
 
 class VelinDataTable extends HTMLElement {
   static get observedAttributes() {
-    return ['page-size', 'filter-input', 'empty-text', 'label'];
+    return ['page-size', 'filter-input', 'empty-text', 'label', 'editable'];
   }
 
   constructor() {
@@ -180,6 +180,7 @@ class VelinDataTable extends HTMLElement {
 
     this._ensureAccessibleName();
     this._setupSorting();
+    this._setupEditable();
     this._bindFilterInput();
     this._render();
   }
@@ -246,6 +247,82 @@ class VelinDataTable extends HTMLElement {
     });
   }
 
+  /**
+   * Inline edit: double-click or Enter on focused cell with data-editable / host editable.
+   * Enter saves, Escape cancels. Dispatches velin-data-table-edit.
+   */
+  _setupEditable() {
+    if (!this.hasAttribute('editable') && !this.querySelector('[data-editable]')) return;
+    const body = this._table.tBodies[0];
+    if (!body || body.dataset.velinEditBound) return;
+    body.dataset.velinEditBound = 'true';
+
+    body.addEventListener('dblclick', (e) => {
+      const cell = e.target.closest('td');
+      if (!cell || !body.contains(cell)) return;
+      if (!this.hasAttribute('editable') && !cell.hasAttribute('data-editable')) return;
+      this._beginEdit(cell);
+    });
+
+    body.addEventListener('keydown', (e) => {
+      const cell = e.target.closest('td');
+      if (!cell || e.target !== cell) return;
+      if (e.key === 'Enter' || e.key === 'F2') {
+        if (!this.hasAttribute('editable') && !cell.hasAttribute('data-editable')) return;
+        e.preventDefault();
+        this._beginEdit(cell);
+      }
+    });
+
+    for (const cell of body.querySelectorAll('td[data-editable], td')) {
+      if (!this.hasAttribute('editable') && !cell.hasAttribute('data-editable')) continue;
+      if (!cell.hasAttribute('tabindex')) cell.setAttribute('tabindex', '0');
+    }
+  }
+
+  /** @param {HTMLTableCellElement} cell */
+  _beginEdit(cell) {
+    if (cell.querySelector('input')) return;
+    const previous = cell.textContent.trim();
+    const input = document.createElement('input');
+    input.className = 'velin-input velin-data-table__edit';
+    input.value = previous;
+    input.setAttribute('aria-label', 'Edit cell');
+    cell.textContent = '';
+    cell.appendChild(input);
+    input.focus();
+    input.select();
+
+    const commit = (save) => {
+      const next = save ? input.value.trim() : previous;
+      cell.textContent = next;
+      if (save && next !== previous) {
+        this.dispatchEvent(new CustomEvent('velin-data-table-edit', {
+          bubbles: true,
+          detail: {
+            cell,
+            row: cell.parentElement,
+            previous,
+            value: next,
+            columnIndex: cell.cellIndex,
+          },
+        }));
+        announce('Cell updated');
+      }
+    };
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        commit(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        commit(false);
+      }
+    });
+    input.addEventListener('blur', () => commit(true));
+  }
+
   _syncSortState() {
     this._headers().forEach((header, index) => {
       if (this._sortType(header) === 'none') return;

package/components/velin-dialog.js

@@ -150,7 +150,10 @@ class VelinDialog extends HTMLElement {
     }
     this._resolve(value);
     this._resolve = null;
-    this.dispatchEvent(new CustomEvent('velin-dialog-close', { bubbles: true, detail: { value } }));
+    const detail = { value };
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true, detail }));
+    // Deprecated alias — remove after deprecation window (ADR 0012)
+    this.dispatchEvent(new CustomEvent('velin-dialog-close', { bubbles: true, detail }));
   }
 }
 

package/components/velin-drawer.js

@@ -88,7 +88,6 @@ class VelinDrawer extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener('keydown', this._onKey);
-    document.body.style.overflow = 'hidden';
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -97,8 +96,7 @@ class VelinDrawer extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
 
@@ -109,7 +107,7 @@ class VelinDrawer extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }
 

package/components/velin-file-dropzone.js

@@ -0,0 +1,162 @@
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: block; }
+  .zone {
+    border: 2px dashed var(--velin-color-border, #cbd5e1);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    padding: var(--velin-space-6, 1.5rem);
+    background: var(--velin-color-surface-dim, var(--velin-color-bg-subtle, #f8fafc));
+    color: var(--velin-color-text, #111);
+    text-align: center;
+    transition: border-color 150ms ease, background 150ms ease;
+  }
+  :host([dragging]) .zone {
+    border-color: var(--velin-color-primary, #2563eb);
+    background: var(--velin-color-primary-subtle, #eff6ff);
+  }
+  .hint { margin: 0 0 var(--velin-space-3, 0.75rem); color: var(--velin-color-text-muted, #64748b); }
+  .browse {
+    display: inline-flex; align-items: center; justify-content: center;
+    min-block-size: 2.75rem; padding-inline: var(--velin-space-4, 1rem);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    border: none; cursor: pointer;
+    background: var(--velin-color-primary, #2563eb);
+    color: var(--velin-color-on-primary, #fff);
+    font: inherit;
+  }
+  .browse:focus-visible { outline: 2px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
+  input[type="file"] {
+    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); border: 0;
+  }
+  .list { list-style: none; padding: 0; margin: var(--velin-space-4, 1rem) 0 0; text-align: start; }
+  .list li {
+    display: flex; justify-content: space-between; gap: var(--velin-space-3, 0.75rem);
+    padding: var(--velin-space-2, 0.5rem) 0;
+    border-block-end: 1px solid var(--velin-color-border, #e2e8f0);
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  .progress {
+    margin-block-start: var(--velin-space-3, 0.75rem);
+    block-size: 0.5rem; border-radius: 999px;
+    background: var(--velin-color-border, #e2e8f0); overflow: hidden;
+  }
+  .bar {
+    block-size: 100%; inline-size: 0%;
+    background: var(--velin-color-primary, #2563eb);
+    transition: inline-size 150ms ease;
+  }
+  .status { margin: var(--velin-space-2, 0.5rem) 0 0; font-size: var(--velin-text-sm, 0.875rem); }
+  .status[data-tone="error"] { color: var(--velin-color-danger, #b91c1c); }
+`;
+
+class VelinFileDropzone extends HTMLElement {
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'label', 'progress'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._files = [];
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot?.querySelector('.zone')) this._render();
+  }
+
+  get files() {
+    return this._files.slice();
+  }
+
+  _emitFiles(fileList) {
+    const accept = this.getAttribute('accept');
+    const files = [...fileList];
+    if (accept) {
+      const parts = accept.split(',').map((s) => s.trim().toLowerCase());
+      const bad = files.find((f) => {
+        const name = f.name.toLowerCase();
+        const type = (f.type || '').toLowerCase();
+        return !parts.some((p) => (p.startsWith('.') ? name.endsWith(p) : type === p || type.startsWith(p.replace('/*', '/'))));
+      });
+      if (bad) {
+        this._setStatus(`File type not allowed: ${bad.name}`, 'error');
+        this.dispatchEvent(new CustomEvent('velin-error', { bubbles: true, detail: { message: 'accept', file: bad } }));
+        return;
+      }
+    }
+    this._files = files;
+    this._setStatus(files.length ? `${files.length} file(s) ready` : '', 'ok');
+    this.dispatchEvent(new CustomEvent('velin-files', { bubbles: true, detail: { files } }));
+    this._renderList();
+  }
+
+  _setStatus(text, tone = 'ok') {
+    const el = this.shadowRoot?.querySelector('.status');
+    if (!el) return;
+    el.textContent = text;
+    el.dataset.tone = tone;
+  }
+
+  _renderList() {
+    const ul = this.shadowRoot?.querySelector('.list');
+    if (!ul) return;
+    ul.innerHTML = this._files.map((f) => `<li><span>${escapeHTML(f.name)}</span><span>${Math.round(f.size / 1024)} KB</span></li>`).join('');
+  }
+
+  _render() {
+    const label = escapeHTML(this.getAttribute('label') || 'Upload files');
+    const accept = this.getAttribute('accept') || '';
+    const multiple = this.hasAttribute('multiple');
+    const progress = Math.max(0, Math.min(100, Number(this.getAttribute('progress') || 0)));
+
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="zone" role="group" aria-label="${label}">
+        <p class="hint">Drag and drop files here, or browse. Client-side only — wire <code>velin-files</code> to your upload API.</p>
+        <button type="button" class="browse">Browse files</button>
+        <input type="file" ${accept ? `accept="${escapeHTML(accept)}"` : ''} ${multiple ? 'multiple' : ''} />
+        <div class="progress" hidden="${progress <= 0 ? 'true' : 'false'}" aria-hidden="${progress <= 0 ? 'true' : 'false'}">
+          <div class="bar" style="inline-size:${progress}%"></div>
+        </div>
+        <p class="status" role="status" aria-live="polite"></p>
+        <ul class="list"></ul>
+      </div>
+    `;
+
+    const input = this.shadowRoot.querySelector('input');
+    const browse = this.shadowRoot.querySelector('.browse');
+    const zone = this.shadowRoot.querySelector('.zone');
+    browse.addEventListener('click', () => input.click());
+    input.addEventListener('change', () => {
+      if (input.files?.length) this._emitFiles(input.files);
+    });
+
+    ['dragenter', 'dragover'].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.setAttribute('dragging', '');
+      });
+    });
+    ['dragleave', 'drop'].forEach((ev) => {
+      zone.addEventListener(ev, (e) => {
+        e.preventDefault();
+        this.removeAttribute('dragging');
+      });
+    });
+    zone.addEventListener('drop', (e) => {
+      const list = e.dataTransfer?.files;
+      if (list?.length) this._emitFiles(list);
+    });
+
+    this._renderList();
+  }
+}
+
+customElements.define('velin-file-dropzone', VelinFileDropzone);
+export default VelinFileDropzone;

package/components/velin-icon.js

@@ -32,8 +32,28 @@ function resolveProviderUrl(provider, variant) {
 }
 
 const _svgCache = new Map();
+const DEFAULT_SPRITE = 'velin-icons.svg';
+
+/**
+ * Resolve default sprite URL: attribute → meta/html data → VelinIcon.defaultSprite → relative fallback.
+ * Avoids hardcoded absolute `/dist/...` which breaks offline/vendor installs.
+ */
+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;
+}
 
 class VelinIcon 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'];
   }
@@ -99,7 +119,8 @@ class VelinIcon 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);

package/components/velin-lightbox.js

@@ -92,7 +92,6 @@ class VelinLightbox 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);
@@ -101,8 +100,7 @@ class VelinLightbox extends HTMLElement {
 
   close() {
     this.removeAttribute('open');
-    clearBackgroundInert();
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
     if (this._previousFocus) {
       this._previousFocus.focus();
       this._previousFocus = null;
@@ -110,6 +108,10 @@ class VelinLightbox extends HTMLElement {
     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(); }
   _next() { this._index = (this._index + 1) % this._items.length; this._render(); }
 

package/components/velin-modal.js

@@ -146,7 +146,6 @@ class VelinModal extends HTMLElement {
     this._previouslyFocused = saveFocus();
     setBackgroundInert(this);
     document.addEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = 'hidden';
 
     requestAnimationFrame(() => {
       const focusable = getFocusableElements(this.shadowRoot);
@@ -156,8 +155,7 @@ class VelinModal extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._previouslyFocused);
   }
 
@@ -171,7 +169,7 @@ class VelinModal extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKeydown);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }
 

package/components/velin-search.js

@@ -129,7 +129,7 @@ class VelinSearch extends HTMLElement {
       return;
     }
     if (!this._indexLoaded) await this._loadIndex();
-    const { groups } = this._search.query(q, {
+    const { groups } = await this._search.query(q, {
       minChars: this.minChars,
       fuzzy: this.fuzzy,
       categories: this.categories || undefined,