@birdapi/velinstyle 0.6.1 → 0.8.0

package/components/velin-announcer.js

@@ -0,0 +1,35 @@
+const styles = `
+  :host { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+`;
+
+class VelinAnnouncer extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+    const live = this.getAttribute('polite') === 'false' ? 'assertive' : 'polite';
+    this.shadowRoot.innerHTML =
+      '<style>' + styles + '</style>' +
+      '<div role="status" aria-live="' + live + '" aria-atomic="true" part="region"></div>';
+    this._region = this.shadowRoot.querySelector('[role="status"]');
+  }
+
+  announce(message, { assertive = false } = {}) {
+    if (!this._region) this.connectedCallback();
+    this._region.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
+    this._region.textContent = '';
+    requestAnimationFrame(() => {
+      this._region.textContent = typeof message === 'string' ? message : '';
+    });
+  }
+
+  static announceGlobal(message, options) {
+    let el = document.querySelector('velin-announcer');
+    if (!el) {
+      el = document.createElement('velin-announcer');
+      document.body.appendChild(el);
+    }
+    el.announce(message, options);
+  }
+}
+
+customElements.define('velin-announcer', VelinAnnouncer);
+export default VelinAnnouncer;

package/components/velin-bottom-nav.js

@@ -0,0 +1,89 @@
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: block; }
+  nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    padding-block-end: max(var(--velin-space-2, 0.5rem), env(safe-area-inset-bottom, 0px));
+    background: var(--velin-color-surface-bright, #fff);
+    border-block-start: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted(a), ::slotted(button) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--velin-space-1, 0.25rem);
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #666);
+    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  ::slotted([current]) {
+    color: var(--velin-color-primary, #2563eb);
+    font-weight: var(--velin-weight-semibold, 600);
+  }
+`;
+
+class VelinBottomNav extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onSlot = this._onSlot.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Bottom navigation');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <nav role="navigation" aria-label="${label}"><slot></slot></nav>
+    `;
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', this._onSlot);
+    this._onSlot();
+  }
+
+  _onSlot() {
+    this._syncCurrent();
+  }
+
+  _syncCurrent() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+    const hostKey = this.getAttribute('current');
+    slot.assignedElements().forEach((el) => {
+      const active =
+        el.hasAttribute('current') ||
+        (hostKey && (el.dataset.nav === hostKey || el.getAttribute('data-nav') === hostKey));
+      if (active) {
+        el.setAttribute('current', '');
+        el.setAttribute('aria-current', 'page');
+      } else {
+        el.removeAttribute('current');
+        el.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  static get observedAttributes() {
+    return ['aria-label', 'current'];
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const nav = this.shadowRoot?.querySelector('nav');
+      if (nav) nav.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Bottom navigation'));
+    }
+    if (name === 'current') this._syncCurrent();
+  }
+}
+
+customElements.define('velin-bottom-nav', VelinBottomNav);
+export default VelinBottomNav;

package/components/velin-carousel.js

@@ -25,9 +25,15 @@ const styles = `
   button:disabled { opacity: 0.3; cursor: not-allowed; }
   svg { width: 1.25rem; height: 1.25rem; }
   .indicators {
-    display: flex; justify-content: center; gap: var(--velin-space-2, 0.5rem);
+    display: flex; justify-content: center; align-items: center; gap: var(--velin-space-2, 0.5rem);
     padding-block: var(--velin-space-3, 0.75rem);
   }
+  .pause-btn {
+    font-size: var(--velin-text-xs, 0.75rem);
+    padding-inline: var(--velin-space-3, 0.75rem);
+    min-inline-size: auto;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
   .dot {
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 2.75rem; min-height: 2.75rem;
@@ -54,6 +60,7 @@ class VelinCarousel extends HTMLElement {
     this._index = 0;
     this._timer = null;
     this._startX = 0;
+    this._autoplayPaused = false;
   }
 
   connectedCallback() {
@@ -68,7 +75,7 @@ class VelinCarousel extends HTMLElement {
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
         </button>
       </div>
-      <div class="indicators" role="tablist" aria-label="Slide indicators" part="indicators"></div>
+      <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>
     `;
 
     this.shadowRoot.querySelector('.prev').addEventListener('click', () => this.prev());
@@ -128,18 +135,46 @@ class VelinCarousel extends HTMLElement {
     c.innerHTML = '';
     this._slides.forEach((_, i) => {
       const d = document.createElement('button');
+      d.type = 'button';
       d.className = 'dot';
-      d.setAttribute('role', 'tab');
-      d.setAttribute('aria-label', `Slide ${i + 1}`);
+      d.setAttribute('aria-label', `Go to slide ${i + 1}`);
       d.addEventListener('click', () => this.goTo(i));
       c.appendChild(d);
     });
+    if (this.hasAttribute('autoplay')) {
+      const pause = document.createElement('button');
+      pause.type = 'button';
+      pause.className = 'pause-btn';
+      pause.setAttribute('aria-pressed', 'false');
+      pause.setAttribute('aria-label', 'Pause automatic slide show');
+      pause.textContent = 'Pause';
+      pause.addEventListener('click', () => this._toggleAutoplayPause(pause));
+      c.appendChild(pause);
+    }
+    this._update();
+  }
+
+  _toggleAutoplayPause(btn) {
+    this._autoplayPaused = !this._autoplayPaused;
+    if (this._autoplayPaused) {
+      this._pause();
+      btn.setAttribute('aria-pressed', 'true');
+      btn.setAttribute('aria-label', 'Resume automatic slide show');
+      btn.textContent = 'Play';
+    } else {
+      this._resume();
+      btn.setAttribute('aria-pressed', 'false');
+      btn.setAttribute('aria-label', 'Pause automatic slide show');
+      btn.textContent = 'Pause';
+    }
   }
 
   _emit() { this.dispatchEvent(new CustomEvent('velin-slide-change', { bubbles: true, detail: { index: this._index } })); }
   _startAutoplay() { const ms = parseInt(this.getAttribute('interval') || '5000', 10); this._timer = setInterval(() => this.next(), ms); }
   _pause() { if (this._timer) { clearInterval(this._timer); this._timer = null; } }
-  _resume() { if (this.hasAttribute('autoplay') && !this._timer) this._startAutoplay(); }
+  _resume() {
+    if (this.hasAttribute('autoplay') && !this._timer && !this._autoplayPaused) this._startAutoplay();
+  }
 
   disconnectedCallback() { this._pause(); }
 }

package/components/velin-collapse.js

@@ -1,65 +1,95 @@
-const styles = `
-  :host { display: block; }
-  .content {
-    overflow: hidden;
-    transition: grid-template-rows 300ms ease;
-    display: grid;
-    grid-template-rows: 0fr;
-  }
-  :host([open]) .content { grid-template-rows: 1fr; }
-  .inner { min-height: 0; }
-  @media (prefers-reduced-motion: reduce) { .content { transition: none; } }
-`;
-
-class VelinCollapse extends HTMLElement {
-  static get observedAttributes() { return ['open']; }
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <slot name="trigger"></slot>
-      <div class="content" role="region" part="content">
-        <div class="inner"><slot></slot></div>
-      </div>
-    `;
-
-    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
-    triggerSlot.addEventListener('slotchange', () => {
-      const trigger = triggerSlot.assignedElements()[0];
-      if (trigger) {
-        trigger.addEventListener('click', () => this.toggle());
-        trigger.setAttribute('aria-expanded', this.hasAttribute('open'));
-      }
-    });
-  }
-
-  attributeChangedCallback(name) {
-    if (name === 'open') {
-      const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
-      if (trigger) trigger.setAttribute('aria-expanded', this.hasAttribute('open'));
-    }
-  }
-
-  toggle() {
-    if (this.hasAttribute('open')) this.close();
-    else this.open();
-  }
-
-  open() {
-    this.setAttribute('open', '');
-    this.dispatchEvent(new CustomEvent('velin-open', { bubbles: true }));
-  }
-
-  close() {
-    this.removeAttribute('open');
-    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
-  }
-}
-
-customElements.define('velin-collapse', VelinCollapse);
-export default VelinCollapse;
+const styles = `
+  :host { display: block; }
+  .content {
+    overflow: hidden;
+    transition: grid-template-rows 300ms ease;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :host([open]) .content { grid-template-rows: 1fr; }
+  .inner { min-height: 0; }
+  @media (prefers-reduced-motion: reduce) { .content { transition: none; } }
+`;
+
+let collapseId = 0;
+
+function isButtonLike(el) {
+  const tag = el.tagName;
+  return tag === 'BUTTON' || (tag === 'A' && el.hasAttribute('href')) || el.getAttribute('role') === 'button';
+}
+
+class VelinCollapse extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._contentId = `velin-collapse-panel-${++collapseId}`;
+    this._onTriggerKey = this._onTriggerKey.bind(this);
+  }
+
+  connectedCallback() {
+    const panelId = this._contentId;
+    this.shadowRoot.innerHTML =
+      '<style>' + styles + '</style>' +
+      '<slot name="trigger"></slot>' +
+      '<div class="content" id="' + panelId + '" part="content">' +
+      '<div class="inner"><slot></slot></div>' +
+      '</div>';
+
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener('slotchange', () => this._wireTrigger());
+    this._wireTrigger();
+  }
+
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+
+    if (!isButtonLike(trigger)) {
+      trigger.setAttribute('role', 'button');
+      if (!trigger.hasAttribute('tabindex')) trigger.setAttribute('tabindex', '0');
+    }
+
+    trigger.setAttribute('aria-controls', this._contentId);
+    trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+
+    trigger.removeEventListener('click', this._onClick);
+    trigger.removeEventListener('keydown', this._onTriggerKey);
+    this._onClick = () => this.toggle();
+    trigger.addEventListener('click', this._onClick);
+    trigger.addEventListener('keydown', this._onTriggerKey);
+  }
+
+  _onTriggerKey(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'open') {
+      const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+      if (trigger) trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+    }
+  }
+
+  toggle() {
+    if (this.hasAttribute('open')) this.close();
+    else this.open();
+  }
+
+  open() {
+    this.setAttribute('open', '');
+    this.dispatchEvent(new CustomEvent('velin-open', { bubbles: true }));
+  }
+
+  close() {
+    this.removeAttribute('open');
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
+  }
+}
+
+customElements.define('velin-collapse', VelinCollapse);
+export default VelinCollapse;

package/components/velin-combobox.js

@@ -0,0 +1,149 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: inline-block; position: relative; }
+  .listbox {
+    position: absolute; z-index: var(--velin-z-dropdown, 100);
+    inset-block-start: 100%; inset-inline-start: 0;
+    min-inline-size: 100%; margin-block-start: var(--velin-space-1, 0.25rem);
+    padding-block: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .listbox { opacity: 1; visibility: visible; }
+  ::slotted([role="option"]) {
+    display: block; inline-size: 100%;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    text-align: start; background: none; border: none;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+  }
+  ::slotted([role="option"][aria-selected="true"]) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinCombobox extends HTMLElement {
+  static get observedAttributes() { return ['open', 'aria-label']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const listId = `velin-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+    this._listId = listId;
+    const listLabel = escapeHTML(this.getAttribute('aria-label') || 'Options');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="listbox" id="${listId}" role="listbox" aria-label="${listLabel}" part="listbox"><slot></slot></div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener('slotchange', () => this._wireTrigger());
+    this.shadowRoot.querySelector('slot:not([name])')?.addEventListener('slotchange', () => this._wireOptions());
+    this._wireTrigger();
+    this._wireOptions();
+    this.addEventListener('keydown', this._onKey);
+  }
+
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+    trigger.setAttribute('aria-controls', this._listId);
+    trigger.setAttribute('aria-autocomplete', 'list');
+    if (!trigger.id) trigger.id = `velin-combobox-trigger-${Math.random().toString(36).slice(2, 9)}`;
+    const list = this.shadowRoot.querySelector('.listbox');
+    if (list) list.setAttribute('aria-labelledby', trigger.id);
+    if (!trigger.dataset.velinComboWired) {
+      trigger.dataset.velinComboWired = '1';
+      trigger.addEventListener('click', () => this.toggle());
+      trigger.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'Enter') { e.preventDefault(); this.open(); }
+      });
+    }
+  }
+
+  _wireOptions() {
+    const options = this._getOptions();
+    options.forEach((el, i) => {
+      el.setAttribute('role', 'option');
+      el.setAttribute('aria-selected', el.hasAttribute('selected') ? 'true' : 'false');
+      el.setAttribute('tabindex', i === 0 ? '0' : '-1');
+    });
+  }
+
+  _getOptions() {
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    return slot ? slot.assignedElements().filter((el) => !el.hidden) : [];
+  }
+
+  toggle() { this.hasAttribute('open') ? this.close() : this.open(); }
+
+  open() {
+    this.setAttribute('open', '');
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute('aria-expanded', 'true');
+    document.addEventListener('click', this._onDocClick, true);
+    requestAnimationFrame(() => {
+      const opts = this._getOptions();
+      if (opts.length) opts[0].focus();
+    });
+  }
+
+  close() {
+    this.removeAttribute('open');
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) { trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
+    document.removeEventListener('click', this._onDocClick, true);
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
+  }
+
+  _onDocClick(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+
+  _onKey(e) {
+    if (!this.hasAttribute('open')) return;
+    if (e.key === 'Escape') { this.close(); return; }
+    const options = this._getOptions();
+    if (!options.length) return;
+    rovingTabindex(this, options, e);
+    if (e.key === 'Enter' && options.includes(e.target)) {
+      this._selectOption(e.target);
+      this.close();
+    }
+  }
+
+  _selectOption(el) {
+    this._getOptions().forEach((o) => o.setAttribute('aria-selected', o === el ? 'true' : 'false'));
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger && 'value' in trigger) trigger.value = el.textContent?.trim() || '';
+    this.dispatchEvent(new CustomEvent('velin-select', { bubbles: true, detail: { option: el } }));
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'open') this._wireTrigger();
+    if (name === 'aria-label') {
+      const list = this.shadowRoot?.querySelector('.listbox');
+      if (list) list.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Options'));
+    }
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocClick, true);
+  }
+}
+
+customElements.define('velin-combobox', VelinCombobox);
+export default VelinCombobox;

package/components/velin-command.js

@@ -0,0 +1,127 @@
+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-modal, 500);
+    display: flex; align-items: flex-start; justify-content: center;
+    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;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .panel {
+    inline-size: min(32rem, 100%);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    overflow: hidden;
+  }
+  .search {
+    inline-size: 100%; padding: var(--velin-space-4, 1rem);
+    border: none; border-bottom: 1px solid var(--velin-color-border, #ddd);
+    font-size: var(--velin-text-base, 1rem);
+    background: transparent;
+    color: var(--velin-color-text, #111);
+  }
+  .results { max-block-size: 20rem; overflow-y: auto; padding: var(--velin-space-2, 0.5rem); }
+  ::slotted(button) {
+    display: flex; inline-size: 100%;
+    padding: var(--velin-space-3, 0.75rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    border: none; background: none; text-align: start;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+  }
+  ::slotted(button[hidden]) { display: none; }
+  ::slotted(button:focus-visible) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinCommand extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+    this._onInput = this._onInput.bind(this);
+  }
+
+  connectedCallback() {
+    const placeholder = escapeHTML(this.getAttribute('placeholder') || 'Search commands…');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay">
+        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette" part="panel">
+          <input class="search" type="search" autocomplete="off" placeholder="${placeholder}" aria-label="Search" part="search" />
+          <div class="results" part="results"><slot></slot></div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.search').addEventListener('input', this._onInput);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._filter(''));
+    this._filter('');
+  }
+
+  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);
+    requestAnimationFrame(() => {
+      this.shadowRoot.querySelector('.search')?.focus();
+      this._filter('');
+    });
+  }
+
+  _close() {
+    document.removeEventListener('keydown', this._onKey);
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+    const input = this.shadowRoot.querySelector('.search');
+    if (input) input.value = '';
+    this._filter('');
+  }
+
+  _onInput(e) {
+    this._filter(e.target.value);
+  }
+
+  _filter(query) {
+    const q = query.trim().toLowerCase();
+    const slot = this.shadowRoot.querySelector('slot');
+    slot?.assignedElements().forEach((btn) => {
+      const text = btn.textContent?.trim().toLowerCase() || '';
+      const match = !q || text.includes(q);
+      btn.hidden = !match;
+    });
+  }
+
+  _onKey(e) {
+    if (e.key === 'Escape') { this.close(); return; }
+    trapFocus(this.shadowRoot, e);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-command', VelinCommand);
+export default VelinCommand;