@birdapi/velinstyle 0.6.1 → 0.8.0

package/components/velin-menubar.js

@@ -0,0 +1,83 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .menubar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-2, 0.5rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted([role="menuitem"]) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+  }
+  ::slotted([role="menuitem"]:hover) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinMenubar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Menu bar');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="menubar" role="menubar" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener('keydown', this._onKey);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._init());
+    this._init();
+  }
+
+  _getItems() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute('disabled')) : [];
+  }
+
+  _init() {
+    const items = this._getItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute('role')) el.setAttribute('role', 'menuitem');
+      el.setAttribute('tabindex', i === 0 ? '0' : '-1');
+    });
+  }
+
+  _onKey(e) {
+    const items = this._getItems();
+    if (items.includes(e.target)) rovingTabindex(this, items, e);
+  }
+
+  static get observedAttributes() { return ['aria-label']; }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const bar = this.shadowRoot?.querySelector('.menubar');
+      if (bar) bar.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Menu bar'));
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-menubar', VelinMenubar);
+export default VelinMenubar;

package/components/velin-modal.js

@@ -1,4 +1,4 @@
-import { trapFocus, saveFocus, restoreFocus, getFocusableElements } from './focus-manager.js';
+import { trapFocus, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
 import { escapeHTML } from './sanitize.js';
 
 const styles = `
@@ -141,6 +141,7 @@ class VelinModal extends HTMLElement {
 
   _open() {
     this._previouslyFocused = saveFocus();
+    setBackgroundInert(this);
     document.addEventListener('keydown', this._onKeydown);
     document.body.style.overflow = 'hidden';
 
@@ -153,6 +154,7 @@ class VelinModal extends HTMLElement {
   _close() {
     document.removeEventListener('keydown', this._onKeydown);
     document.body.style.overflow = '';
+    clearBackgroundInert();
     restoreFocus(this._previouslyFocused);
   }
 

package/components/velin-popover.js

@@ -1,4 +1,5 @@
 import { escapeHTML } from './sanitize.js';
+import { trapFocus, saveFocus, restoreFocus, getFocusableElements } from './focus-manager.js';
 
 const styles = `
   :host { position: relative; display: inline-block; }
@@ -14,7 +15,6 @@ const styles = `
     transition: opacity 150ms ease, visibility 150ms ease;
   }
   :host([open]) .popover { opacity: 1; visibility: visible; }
-  /* Placement */
   .popover--top { inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
   .popover--bottom { inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); }
   .popover--start { inset-inline-end: calc(100% + 0.5rem); inset-block-start: 50%; transform: translateY(-50%); }
@@ -28,14 +28,19 @@ const styles = `
   @media (prefers-reduced-motion: reduce) { .popover { transition: none; } }
 `;
 
+let popoverId = 0;
+
 class VelinPopover extends HTMLElement {
   static get observedAttributes() { return ['open']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._popoverId = `velin-popover-${++popoverId}`;
     this._onOutside = this._onOutside.bind(this);
     this._onKey = this._onKey.bind(this);
+    this._prevFocus = null;
+    this._isDialog = false;
   }
 
   connectedCallback() {
@@ -43,35 +48,44 @@ class VelinPopover extends HTMLElement {
     const triggerType = this.getAttribute('trigger') || 'click';
     const title = this.getAttribute('title') || '';
     const role = triggerType === 'hover' ? 'tooltip' : 'dialog';
+    this._isDialog = role === 'dialog';
 
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <slot name="trigger"></slot>
-      <div class="popover popover--${placement}" role="${role}" part="popover">
+      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
         ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ''}
         <slot></slot>
       </div>
     `;
 
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener('slotchange', () => {
-      const trigger = triggerSlot.assignedElements()[0];
-      if (!trigger) return;
-      trigger.setAttribute('aria-haspopup', role === 'tooltip' ? 'true' : 'dialog');
-      trigger.setAttribute('aria-expanded', 'false');
-
-      if (triggerType === 'click') {
-        trigger.addEventListener('click', () => this.toggle());
-      } else if (triggerType === 'hover') {
-        this.addEventListener('mouseenter', () => this.open());
-        this.addEventListener('mouseleave', () => this.close());
-        this.addEventListener('focusin', () => this.open());
-        this.addEventListener('focusout', (e) => { if (!this.contains(e.relatedTarget)) this.close(); });
-      } else if (triggerType === 'focus') {
-        trigger.addEventListener('focusin', () => this.open());
-        trigger.addEventListener('focusout', () => this.close());
-      }
-    });
+    triggerSlot.addEventListener('slotchange', () => this._wireTrigger(triggerType));
+    this._wireTrigger(triggerType);
+  }
+
+  _wireTrigger(triggerType) {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+
+    const isHover = triggerType === 'hover';
+    trigger.setAttribute('aria-haspopup', isHover ? 'true' : 'dialog');
+    trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+    if (this._isDialog) {
+      trigger.setAttribute('aria-controls', this._popoverId);
+    }
+
+    if (triggerType === 'click') {
+      trigger.onclick = () => this.toggle();
+    } else if (triggerType === 'hover') {
+      this.onmouseenter = () => this.open();
+      this.onmouseleave = () => this.close();
+      this.onfocusin = () => this.open();
+      this.onfocusout = (e) => { if (!this.contains(e.relatedTarget)) this.close(); };
+    } else if (triggerType === 'focus') {
+      trigger.onfocusin = () => this.open();
+      trigger.onfocusout = () => this.close();
+    }
   }
 
   open() {
@@ -80,18 +94,44 @@ class VelinPopover extends HTMLElement {
     if (trigger) trigger.setAttribute('aria-expanded', 'true');
     document.addEventListener('click', this._onOutside, true);
     document.addEventListener('keydown', this._onKey);
+
+    if (this._isDialog) {
+      this._prevFocus = saveFocus();
+      requestAnimationFrame(() => {
+        const focusable = getFocusableElements(this.shadowRoot.querySelector('.popover'));
+        if (focusable.length) focusable[0].focus();
+        else this.shadowRoot.querySelector('.popover')?.focus();
+      });
+    }
   }
+
   close() {
     this.removeAttribute('open');
     const trigger = this.querySelector('[slot="trigger"]');
     if (trigger) trigger.setAttribute('aria-expanded', 'false');
     document.removeEventListener('click', this._onOutside, true);
     document.removeEventListener('keydown', this._onKey);
+    if (this._isDialog && this._prevFocus) {
+      restoreFocus(this._prevFocus);
+      this._prevFocus = null;
+    }
   }
+
   toggle() { this.hasAttribute('open') ? this.close() : this.open(); }
 
   _onOutside(e) { if (!this.contains(e.target)) this.close(); }
-  _onKey(e) { if (e.key === 'Escape') this.close(); }
+
+  _onKey(e) {
+    if (e.key === 'Escape') {
+      this.close();
+      const trigger = this.querySelector('[slot="trigger"]');
+      if (trigger) trigger.focus();
+      return;
+    }
+    if (this._isDialog && this.hasAttribute('open')) {
+      trapFocus(this.shadowRoot.querySelector('.popover'), e);
+    }
+  }
 
   disconnectedCallback() {
     document.removeEventListener('click', this._onOutside, true);

package/components/velin-rating.js

@@ -0,0 +1,91 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: inline-block; }
+  .stars { display: inline-flex; gap: var(--velin-space-1, 0.25rem); }
+  button {
+    background: none; border: none; padding: var(--velin-space-1, 0.25rem);
+    font-size: 1.5rem; line-height: 1; cursor: pointer;
+    color: var(--velin-color-border, #ccc);
+  }
+  button[aria-checked="true"] { color: var(--velin-color-warning, #f59e0b); }
+`;
+
+const MAX = 5;
+
+class VelinRating extends HTMLElement {
+  static get observedAttributes() { return ['value']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="stars" role="radiogroup"></div>`;
+    this._render();
+    this.shadowRoot.querySelector('.stars').addEventListener('click', this._onClick);
+    this.shadowRoot.querySelector('.stars').addEventListener('keydown', this._onKey);
+  }
+
+  _value() {
+    const v = parseInt(this.getAttribute('value') || '0', 10);
+    return Math.min(MAX, Math.max(0, Number.isNaN(v) ? 0 : v));
+  }
+
+  _render() {
+    const group = this.shadowRoot.querySelector('.stars');
+    const val = this._value();
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Rating');
+    group.setAttribute('aria-label', label);
+    group.innerHTML = '';
+    for (let i = 1; i <= MAX; i++) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.setAttribute('role', 'radio');
+      btn.setAttribute('aria-checked', i <= val ? 'true' : 'false');
+      btn.setAttribute('aria-label', escapeHTML(`${i} star${i > 1 ? 's' : ''}`));
+      btn.setAttribute('tabindex', i === (val || 1) ? '0' : '-1');
+      btn.dataset.value = String(i);
+      btn.textContent = i <= val ? '\u2605' : '\u2606';
+      group.appendChild(btn);
+    }
+  }
+
+  _getButtons() {
+    return [...this.shadowRoot.querySelectorAll('button[role="radio"]')];
+  }
+
+  _onClick(e) {
+    const btn = e.target.closest('button');
+    if (!btn) return;
+    this._setValue(parseInt(btn.dataset.value, 10));
+  }
+
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute('tabindex') === '0');
+      if (focused) this._setValue(parseInt(focused.dataset.value, 10));
+    }
+  }
+
+  _setValue(n) {
+    this.setAttribute('value', String(n));
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: n } }));
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'value' && this.shadowRoot?.querySelector('.stars')) this._render();
+  }
+}
+
+customElements.define('velin-rating', VelinRating);
+export default VelinRating;

package/components/velin-reveal.js

@@ -0,0 +1,80 @@
+/*
+ * velin-reveal.js — reusable scroll-into-view reveal helper.
+ *
+ * Replaces inline IntersectionObserver snippets that every project ends up
+ * copy-pasting. Just call `initReveal()` once, or opt into auto-init by
+ * adding `data-velin-reveal-auto` to <html>. Elements with the class
+ * `.velin-animate-on-scroll` get `is-visible` toggled when they enter the
+ * viewport.
+ *
+ * Honours `prefers-reduced-motion: reduce` by revealing immediately without
+ * animation, and falls back to immediate reveal if IntersectionObserver is
+ * unavailable.
+ *
+ * API:
+ *   initReveal(options?) -> () => void teardown function.
+ *   options.selector     CSS selector (default '.velin-animate-on-scroll').
+ *   options.threshold    IO threshold (default 0.1).
+ *   options.rootMargin   IO rootMargin (default '0px 0px -40px 0px').
+ *   options.once         if true (default) stops observing once visible.
+ *   options.visibleClass class added on intersect (default 'is-visible').
+ */
+
+const DEFAULTS = {
+  selector: '.velin-animate-on-scroll',
+  threshold: 0.1,
+  rootMargin: '0px 0px -40px 0px',
+  once: true,
+  visibleClass: 'is-visible',
+};
+
+const _activeObservers = new WeakMap();
+
+export function initReveal(options = {}) {
+  if (typeof document === 'undefined') return () => {};
+  const opts = { ...DEFAULTS, ...options };
+  const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const targets = Array.from(document.querySelectorAll(opts.selector));
+
+  if (reduced || typeof IntersectionObserver === 'undefined') {
+    targets.forEach((el) => el.classList.add(opts.visibleClass));
+    return () => {};
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        entry.target.classList.add(opts.visibleClass);
+        if (opts.once) observer.unobserve(entry.target);
+      }
+    },
+    { threshold: opts.threshold, rootMargin: opts.rootMargin },
+  );
+
+  targets.forEach((el) => {
+    if (_activeObservers.has(el)) return;
+    _activeObservers.set(el, observer);
+    observer.observe(el);
+  });
+
+  return () => {
+    observer.disconnect();
+    targets.forEach((el) => _activeObservers.delete(el));
+  };
+}
+
+if (typeof document !== 'undefined') {
+  const autoInit = () => {
+    if (document.documentElement && document.documentElement.hasAttribute('data-velin-reveal-auto')) {
+      initReveal();
+    }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', autoInit, { once: true });
+  } else {
+    autoInit();
+  }
+}
+
+export default { initReveal };

package/components/velin-segmented-control.js

@@ -0,0 +1,108 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .group {
+    display: inline-flex;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-md, 0.5rem);
+  }
+  ::slotted(button) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--velin-color-text-muted, #666);
+    cursor: pointer;
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  ::slotted(button[aria-pressed="true"]) {
+    background: var(--velin-color-surface-bright, #fff);
+    color: var(--velin-color-text, #111);
+    font-weight: var(--velin-weight-semibold, 600);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  }
+`;
+
+class VelinSegmentedControl extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Segmented control');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKey);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._init());
+    this._init();
+  }
+
+  _getButtons() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot ? slot.assignedElements().filter((el) => el.tagName === 'BUTTON') : [];
+  }
+
+  _init() {
+    const buttons = this._getButtons();
+    const selected = buttons.find((b) => b.hasAttribute('selected')) || buttons[0];
+    buttons.forEach((btn, i) => {
+      btn.setAttribute('aria-pressed', btn === selected ? 'true' : 'false');
+      btn.setAttribute('tabindex', btn === selected ? '0' : '-1');
+    });
+  }
+
+  _onClick(e) {
+    const btn = e.target.closest('button');
+    if (!btn || !this.contains(btn)) return;
+    this._select(btn);
+  }
+
+  _select(btn) {
+    this._getButtons().forEach((b) => {
+      b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
+      b.setAttribute('tabindex', b === btn ? '0' : '-1');
+    });
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: btn.value || btn.textContent?.trim() } }));
+  }
+
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute('tabindex') === '0');
+      if (focused) this._select(focused);
+    }
+  }
+
+  static get observedAttributes() { return ['aria-label']; }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const group = this.shadowRoot?.querySelector('.group');
+      if (group) group.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Segmented control'));
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-segmented-control', VelinSegmentedControl);
+export default VelinSegmentedControl;

package/components/velin-sheet.js

@@ -0,0 +1,107 @@
+import { trapFocus, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-overlay, 400);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { transform: translateY(0); }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: 600; margin: 0; }
+  .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
+  @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
+`;
+
+class VelinSheet extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const title = escapeHTML(this.getAttribute('title') || this.getAttribute('label') || '');
+    const titleId = 'velin-sheet-title';
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}">${title}</h2>
+          <button class="close-btn" aria-label="Close" part="close">&#215;</button>
+        </div>
+        <div class="body" part="body"><slot></slot></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('.overlay').addEventListener('click', () => this.close());
+    if (this.hasAttribute('open')) this._open();
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'open') this.hasAttribute('open') ? this._open() : this._close();
+  }
+
+  open() { this.setAttribute('open', ''); }
+  close() {
+    this.removeAttribute('open');
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
+  }
+
+  _open() {
+    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();
+    });
+  }
+
+  _close() {
+    document.removeEventListener('keydown', this._onKey);
+    document.body.style.overflow = '';
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+  }
+
+  _onKey(e) {
+    if (e.key === 'Escape') { this.close(); return; }
+    trapFocus(this.shadowRoot, e);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKey);
+    document.body.style.overflow = '';
+  }
+}
+
+customElements.define('velin-sheet', VelinSheet);
+export default VelinSheet;