@birdapi/velinstyle 1.0.0 → 1.2.0

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-form-summary.js

@@ -0,0 +1,348 @@
+import { announce } from './a11y-utils.js';
+
+/**
+ * Accessible error summary for a light-DOM `<form>`.
+ *
+ * Native constraint validation shows a transient browser bubble on one field at
+ * a time, which is unusable with a screen reader or on a long form. This element
+ * takes over submit handling to build a persistent, focusable summary, wire
+ * `aria-invalid` and `aria-describedby` per field, and announce the error count.
+ *
+ * Covers WCAG 3.3.1 Error Identification, 3.3.3 Error Suggestion and the
+ * `aria-describedby` half of 4.1.2 Name, Role, Value.
+ */
+
+const FIELD_SELECTOR = 'input, select, textarea';
+const IGNORED_TYPES = new Set(['submit', 'reset', 'button', 'image', 'hidden']);
+
+let fieldIdCounter = 0;
+
+/** `CSS.escape` is missing in some non-browser DOM implementations. */
+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}`);
+}
+
+/** @param {HTMLElement} field */
+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';
+}
+
+/** @param {HTMLElement} field */
+function fieldMessage(field) {
+  return field.getAttribute('data-error-message')?.trim() || field.validationMessage || 'Invalid value';
+}
+
+/**
+ * @param {HTMLElement} field
+ * @param {string} id
+ */
+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(' '));
+  }
+}
+
+/**
+ * @param {HTMLElement} field
+ * @param {string} id
+ */
+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');
+}
+
+class VelinFormSummary 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;
+
+    // Native bubbles show one error at a time and vanish; the summary replaces them.
+    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 = 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;
+      // One entry per radio group so the summary lists the group once.
+      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 list = this.ownerDocument.createElement('ul');
+      list.className = 'velin-form-summary__list';
+
+      panel.append(heading, list);
+      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);
+export default VelinFormSummary;

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,

package/components/velin-sheet.js

@@ -78,7 +78,6 @@ class VelinSheet 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();
@@ -87,8 +86,7 @@ class VelinSheet extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
 
@@ -99,7 +97,7 @@ class VelinSheet extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }