@birdapi/velinstyle 0.6.1 → 0.7.0

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-drawer.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 = `
@@ -61,12 +61,13 @@ class VelinDrawer extends HTMLElement {
   connectedCallback() {
     const title = this.getAttribute('title') || '';
     const safeTitle = escapeHTML(title);
+    const titleId = 'velin-drawer-title';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay"></div>
-      <div class="drawer" role="dialog" aria-modal="true" aria-label="${safeTitle}" part="drawer">
+      <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
         <div class="header" part="header">
-          <h2 class="title">${safeTitle}</h2>
+          <h2 class="title" id="${titleId}">${safeTitle}</h2>
           <button class="close-btn" aria-label="Close" part="close">&#215;</button>
         </div>
         <div class="body" part="body"><slot></slot></div>
@@ -85,6 +86,7 @@ class VelinDrawer extends HTMLElement {
 
   _open() {
     this._prev = saveFocus();
+    setBackgroundInert(this);
     document.addEventListener('keydown', this._onKey);
     document.body.style.overflow = 'hidden';
     requestAnimationFrame(() => {
@@ -96,6 +98,7 @@ class VelinDrawer extends HTMLElement {
   _close() {
     document.removeEventListener('keydown', this._onKey);
     document.body.style.overflow = '';
+    clearBackgroundInert();
     restoreFocus(this._prev);
   }
 

package/components/velin-dropdown.js

@@ -62,6 +62,8 @@ class VelinDropdown extends HTMLElement {
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     this._onDocClick = this._onDocClick.bind(this);
     this._onKeydown = this._onKeydown.bind(this);
+    this._typeahead = '';
+    this._typeaheadTimer = null;
   }
 
   connectedCallback() {
@@ -75,17 +77,31 @@ class VelinDropdown extends HTMLElement {
     `;
 
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    const menuSlot = this.shadowRoot.querySelector('slot:not([name])');
     triggerSlot.addEventListener('click', () => this.toggle());
     triggerSlot.addEventListener('slotchange', () => {
       const trigger = triggerSlot.assignedElements()[0];
       if (trigger) {
         trigger.setAttribute('aria-haspopup', 'menu');
         trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+        const menuId = this._menuId || (this._menuId = `velin-dropdown-menu-${Math.random().toString(36).slice(2, 9)}`);
+        trigger.setAttribute('aria-controls', menuId);
+        this.shadowRoot.querySelector('.menu')?.setAttribute('id', menuId);
       }
     });
+    menuSlot?.addEventListener('slotchange', () => this._normalizeMenuItems());
+    this._normalizeMenuItems();
     this.addEventListener('keydown', this._onKeydown);
   }
 
+  _normalizeMenuItems() {
+    const items = this._getMenuItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute('role')) el.setAttribute('role', 'menuitem');
+      el.setAttribute('tabindex', i === 0 ? '0' : '-1');
+    });
+  }
+
   toggle() {
     if (this.hasAttribute('open')) {
       this.close();
@@ -138,9 +154,24 @@ class VelinDropdown extends HTMLElement {
     }
 
     const items = this._getMenuItems();
-    if (items.length > 0) {
-      rovingTabindex(this, items, event);
+    if (items.length === 0) return;
+
+    if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
+      clearTimeout(this._typeaheadTimer);
+      this._typeahead += event.key.toLowerCase();
+      this._typeaheadTimer = setTimeout(() => { this._typeahead = ''; }, 500);
+      const match = items.find((el) =>
+        (el.textContent?.trim().toLowerCase() || '').startsWith(this._typeahead)
+      );
+      if (match) {
+        event.preventDefault();
+        items.forEach((item) => item.setAttribute('tabindex', item === match ? '0' : '-1'));
+        match.focus();
+      }
+      return;
     }
+
+    rovingTabindex(this, items, event);
   }
 
   disconnectedCallback() {

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-tooltip-wc.js

@@ -21,20 +21,24 @@ const styles = `
   @media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
 `;
 
+let tooltipId = 0;
+
 class VelinTooltipWC extends HTMLElement {
   static get observedAttributes() { return ['content', 'placement']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._tipId = `velin-tooltip-${++tooltipId}`;
   }
 
   connectedCallback() {
     const placement = this.getAttribute('placement') || 'top';
+    const D = 'div';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <slot></slot>
-      <div class="tip" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute('content') || '')}</div>
+      <${D} class="tip" id="${this._tipId}" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute('content') || '')}</${D}>
     `;
 
     this.addEventListener('mouseenter', () => this._show());
@@ -42,14 +46,34 @@ class VelinTooltipWC extends HTMLElement {
     this.addEventListener('focusin', () => this._show());
     this.addEventListener('focusout', () => this._hide());
     this.addEventListener('keydown', (e) => { if (e.key === 'Escape') this._hide(); });
+
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', () => this._linkTrigger());
+    this._linkTrigger();
+  }
+
+  _linkTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (!trigger) return;
+    if (this.hasAttribute('visible')) {
+      trigger.setAttribute('aria-describedby', this._tipId);
+    } else {
+      trigger.removeAttribute('aria-describedby');
+    }
   }
 
   _show() {
     this.setAttribute('visible', '');
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute('aria-describedby', this._tipId);
     this._flip();
   }
 
-  _hide() { this.removeAttribute('visible'); }
+  _hide() {
+    this.removeAttribute('visible');
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (trigger) trigger.removeAttribute('aria-describedby');
+  }
 
   _flip() {
     const tip = this.shadowRoot.querySelector('.tip');