@birdapi/velinstyle 0.7.0 → 0.9.0

package/components/velin-theme-toggle.js

@@ -1,91 +1,315 @@
+const THEMES = [
+  { slug: '', label: 'Default (Light)' },
+  { slug: 'dark', label: 'Dark' },
+  { slug: 'brutalist', label: 'Brutalist' },
+  { slug: 'corporate', label: 'Corporate' },
+  { slug: 'earth', label: 'Earth' },
+  { slug: 'forest', label: 'Forest' },
+  { slug: 'midnight', label: 'Midnight' },
+  { slug: 'neon', label: 'Neon' },
+  { slug: 'nordic', label: 'Nordic' },
+  { slug: 'ocean', label: 'Ocean' },
+  { slug: 'pastel', label: 'Pastel' },
+  { slug: 'retro', label: 'Retro' },
+  { slug: 'sharp', label: 'Sharp' },
+  { slug: 'soft', label: 'Soft' },
+  { slug: 'sunset', label: 'Sunset' },
+];
+
+const BUILTIN_THEMES = new Set(['', 'dark']);
+
+const loadedThemeStylesheets = new Set();
+
+function ensureThemeStylesheet(slug, base) {
+  if (!slug || BUILTIN_THEMES.has(slug)) return;
+  if (loadedThemeStylesheets.has(slug)) return;
+  const existing = document.querySelector(`link[data-velin-theme-css="${slug}"]`);
+  if (existing) {
+    loadedThemeStylesheets.add(slug);
+    return;
+  }
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = `${base.replace(/\/$/, '')}/${slug}.min.css`;
+  link.setAttribute('data-velin-theme-css', slug);
+  document.head.appendChild(link);
+  loadedThemeStylesheets.add(slug);
+}
+
 const styles = `
-  :host { display: inline-flex; }
+  :host { display: inline-flex; position: relative; }
+  .group {
+    display: inline-flex; align-items: stretch;
+    border: 2px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    background: none;
+    overflow: hidden;
+  }
   button {
     display: inline-flex; align-items: center; justify-content: center;
-    min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem;
-    background: none; border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
-    color: var(--velin-color-text, #111); transition: background 150ms ease, border-color 150ms ease;
+    min-height: 2.75rem; padding: 0.5rem;
+    background: none; border: 0; cursor: pointer;
+    color: var(--velin-color-text, #111);
+    transition: background 150ms ease;
+  }
+  button:hover { background: var(--velin-color-surface-dim, #eee); }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  .toggle { min-width: 2.75rem; }
+  .picker {
+    min-width: 1.75rem;
+    border-inline-start: 1px solid var(--velin-color-border, #ddd);
+    color: var(--velin-color-text-muted, #555);
   }
-  button:hover { background: var(--velin-color-surface-dim, #eee); border-color: var(--velin-color-border-strong, #999); }
-  button:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
   svg { width: 1.25rem; height: 1.25rem; transition: transform 300ms ease; }
+  .chev { width: 0.75rem; height: 0.75rem; }
   :host([theme="dark"]) .sun { display: none; }
   :host(:not([theme="dark"])) .moon { display: none; }
+  :host([compact]) .picker { display: none; }
+  :host([compact]) .toggle { border-inline-end: 0; }
   @media (prefers-reduced-motion: reduce) { svg { transition: none; } }
+
+  .menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    inset-inline-end: 0;
+    z-index: 1000;
+    min-width: 12rem;
+    padding: 0.375rem;
+    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 12px 32px rgba(0,0,0,0.12));
+    list-style: none;
+    margin: 0;
+    display: none;
+    max-height: min(70vh, 24rem);
+    overflow-y: auto;
+  }
+  :host([menu-open]) .menu { display: block; }
+  .menu li { margin: 0; }
+  .menu button {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--velin-color-text, #111);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    min-height: 2rem;
+    text-align: start;
+  }
+  .menu button:hover,
+  .menu button[aria-current="true"] {
+    background: var(--velin-color-primary-subtle, #eef);
+    color: var(--velin-color-primary, #2a4cf0);
+  }
+  .menu button[aria-current="true"] {
+    font-weight: 600;
+  }
+  .menu .swatch {
+    width: 0.75rem; height: 0.75rem;
+    border-radius: 50%;
+    margin-inline-end: 0.5rem;
+    background: currentColor;
+    border: 1px solid var(--velin-color-border, #ddd);
+  }
 `;
 
 class VelinThemeToggle extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
   }
 
   connectedCallback() {
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
-      <button part="button" aria-label="Toggle dark mode">
-        <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-          <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-        </svg>
-        <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-        </svg>
-      </button>
+      <div class="group" part="group">
+        <button class="toggle" part="button" aria-label="Toggle dark mode" aria-pressed="false">
+          <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
+            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+          </svg>
+        </button>
+        <button class="picker" part="picker" aria-label="Choose theme" aria-haspopup="menu" aria-expanded="false">
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+      </div>
+      <ul class="menu" role="menu" aria-label="Theme selection" hidden></ul>
     `;
 
-    const target = this.getAttribute('target') || 'html';
-    const el = document.querySelector(target);
-    const stored = localStorage.getItem('velin-theme');
-    const prefersDarkMq = window.matchMedia('(prefers-color-scheme: dark)');
+    this._target = document.querySelector(this.getAttribute('target') || 'html');
+    this._themesBase = this.getAttribute('themes-base') || 'dist/themes';
+    this._menu = this.shadowRoot.querySelector('.menu');
+    this._toggleBtn = this.shadowRoot.querySelector('.toggle');
+    this._pickerBtn = this.shadowRoot.querySelector('.picker');
 
-    const applyFromPreference = () => {
-      if (localStorage.getItem('velin-theme')) return;
-      if (prefersDarkMq.matches) {
-        el?.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-      } else {
-        el?.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-      }
-    };
-
-    const prefersDark = prefersDarkMq.matches;
-
-    if (stored === 'dark' || (!stored && prefersDark)) {
-      el?.setAttribute('data-velin-theme', 'dark');
-      this.setAttribute('theme', 'dark');
-    }
+    this._renderMenu();
+    this._initPreference();
+    this._syncTogglePressed();
+
+    this._toggleBtn.addEventListener('click', () => this._toggleDarkMode());
+    this._pickerBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this._toggleMenu();
+    });
+
+    document.addEventListener('click', this._onDocClick);
+    this.shadowRoot.addEventListener('keydown', this._onKeyDown);
 
-    prefersDarkMq.addEventListener('change', applyFromPreference);
+    const prefersDarkMq = window.matchMedia('(prefers-color-scheme: dark)');
+    prefersDarkMq.addEventListener('change', () => this._applyFromPreference());
     window.addEventListener('storage', (e) => {
-      if (e.key !== 'velin-theme' || !el) return;
-      if (e.newValue === 'dark') {
-        el.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-      } else {
-        el.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-      }
+      if (e.key === 'velin-theme') this._readStorage();
     });
+  }
 
-    this.shadowRoot.querySelector('button').addEventListener('click', () => {
-      const isDark = el?.getAttribute('data-velin-theme') === 'dark';
-      if (isDark) {
-        el?.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-        localStorage.setItem('velin-theme', 'light');
-      } else {
-        el?.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-        localStorage.setItem('velin-theme', 'dark');
-      }
-      this.dispatchEvent(new CustomEvent('velin-theme-change', { bubbles: true, detail: { theme: isDark ? 'light' : 'dark', dark: !isDark } }));
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocClick);
+  }
+
+  _renderMenu() {
+    this._menu.innerHTML = THEMES.map((t) => `
+      <li role="none">
+        <button type="button" role="menuitem" data-theme="${t.slug}">
+          <span class="swatch" aria-hidden="true" data-theme-swatch="${t.slug}"></span>
+          ${t.label}
+        </button>
+      </li>
+    `).join('');
+    this._menu.removeAttribute('hidden');
+    this._menu.querySelectorAll('button[data-theme]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const slug = btn.getAttribute('data-theme');
+        this._applyTheme(slug, { persist: true });
+        this._closeMenu();
+      });
     });
   }
+
+  _toggleMenu() {
+    if (this.hasAttribute('menu-open')) this._closeMenu();
+    else this._openMenu();
+  }
+
+  _openMenu() {
+    this.setAttribute('menu-open', '');
+    this._pickerBtn.setAttribute('aria-expanded', 'true');
+    this._highlightActive();
+    const first = this._menu.querySelector('button[data-theme]');
+    if (first) first.focus();
+  }
+
+  _closeMenu() {
+    this.removeAttribute('menu-open');
+    this._pickerBtn.setAttribute('aria-expanded', 'false');
+  }
+
+  _onDocClick(e) {
+    if (!this.hasAttribute('menu-open')) return;
+    if (e.composedPath().includes(this)) return;
+    this._closeMenu();
+  }
+
+  _onKeyDown(e) {
+    if (!this.hasAttribute('menu-open')) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this._closeMenu();
+      this._pickerBtn.focus();
+      return;
+    }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const items = Array.from(this._menu.querySelectorAll('button[data-theme]'));
+      const idx = items.indexOf(this.shadowRoot.activeElement);
+      const next = e.key === 'ArrowDown'
+        ? items[(idx + 1) % items.length]
+        : items[(idx - 1 + items.length) % items.length];
+      next?.focus();
+    }
+  }
+
+  _highlightActive() {
+    const current = this._currentSlug();
+    this._menu.querySelectorAll('button[data-theme]').forEach((btn) => {
+      const slug = btn.getAttribute('data-theme');
+      if (slug === current) btn.setAttribute('aria-current', 'true');
+      else btn.removeAttribute('aria-current');
+    });
+  }
+
+  _currentSlug() {
+    if (!this._target) return '';
+    const value = this._target.getAttribute('data-velin-theme');
+    if (!value || value === 'light') return '';
+    return value;
+  }
+
+  _initPreference() {
+    const stored = localStorage.getItem('velin-theme');
+    if (stored) {
+      this._applyTheme(stored, { persist: false });
+      return;
+    }
+    this._applyFromPreference();
+  }
+
+  _readStorage() {
+    const stored = localStorage.getItem('velin-theme');
+    this._applyTheme(stored || '', { persist: false });
+  }
+
+  _applyFromPreference() {
+    if (localStorage.getItem('velin-theme')) return;
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    this._applyTheme(prefersDark ? 'dark' : '', { persist: false });
+  }
+
+  _applyTheme(slug, { persist }) {
+    const normalized = !slug || slug === 'light' ? '' : slug;
+    if (!this._target) return;
+    if (!normalized) {
+      this._target.removeAttribute('data-velin-theme');
+      this.removeAttribute('theme');
+    } else {
+      this._target.setAttribute('data-velin-theme', normalized);
+      this.setAttribute('theme', normalized === 'dark' ? 'dark' : normalized);
+      ensureThemeStylesheet(normalized, this._themesBase);
+    }
+    if (persist) {
+      if (!normalized) localStorage.removeItem('velin-theme');
+      else localStorage.setItem('velin-theme', normalized);
+    }
+    this._highlightActive();
+    this.dispatchEvent(new CustomEvent('velin-theme-change', {
+      bubbles: true,
+      detail: { theme: normalized || 'light', dark: normalized === 'dark', slug: normalized },
+    }));
+  }
+
+  _syncTogglePressed() {
+    const dark = this._currentSlug() === 'dark';
+    this._toggleBtn?.setAttribute('aria-pressed', dark ? 'true' : 'false');
+  }
+
+  _toggleDarkMode() {
+    const current = this._currentSlug();
+    const next = current === 'dark' ? '' : 'dark';
+    this._applyTheme(next, { persist: true });
+    this._syncTogglePressed();
+  }
 }
 
 customElements.define('velin-theme-toggle', VelinThemeToggle);

package/components/velin-toast.js

@@ -80,8 +80,12 @@ class VelinToast extends HTMLElement {
   }
 
   show({ message, type = 'info', duration = 5000 } = {}) {
+    const assertive = type === 'error' || type === 'danger';
+    this.setAttribute('role', assertive ? 'alert' : 'status');
+    this.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
     const toast = document.createElement('div');
     toast.className = `toast toast--${type}`;
+    toast.setAttribute('role', assertive ? 'alert' : 'status');
     toast.innerHTML = `
       <div class="toast-content">${escapeHTML(message)}</div>
       <button class="toast-close" aria-label="Close">&#215;</button>

package/components/{velin-tooltip-wc.js → velin-tooltip.js}

@@ -23,7 +23,7 @@ const styles = `
 
 let tooltipId = 0;
 
-class VelinTooltipWC extends HTMLElement {
+class VelinTooltip extends HTMLElement {
   static get observedAttributes() { return ['content', 'placement']; }
 
   constructor() {
@@ -93,5 +93,24 @@ class VelinTooltipWC extends HTMLElement {
   }
 }
 
-customElements.define('velin-tooltip-wc', VelinTooltipWC);
-export default VelinTooltipWC;
+/** @deprecated Use `<velin-tooltip>` */
+class VelinTooltipWC extends VelinTooltip {
+  static _warned = false;
+
+  connectedCallback() {
+    if (!VelinTooltipWC._warned && typeof console !== 'undefined' && console.warn) {
+      VelinTooltipWC._warned = true;
+      console.warn('[velinstyle] <velin-tooltip-wc> is deprecated; use <velin-tooltip> instead.');
+    }
+    super.connectedCallback();
+  }
+}
+
+if (!customElements.get('velin-tooltip')) {
+  customElements.define('velin-tooltip', VelinTooltip);
+}
+if (!customElements.get('velin-tooltip-wc')) {
+  customElements.define('velin-tooltip-wc', VelinTooltipWC);
+}
+export default VelinTooltip;
+export { VelinTooltip, VelinTooltipWC };

package/core/a11y/component-contracts.json

@@ -0,0 +1,221 @@
+{
+  "wcagLevel": "AAA",
+  "version": "0.9.0",
+  "components": {
+    "velin-accordion": {
+      "status": "pass",
+      "roles": ["group"],
+      "keyboard": "Arrow/Home/End between summaries",
+      "reducedMotion": true,
+      "requiredAttributes": [],
+      "notes": "Wires aria-controls on summary elements."
+    },
+    "velin-announcer": {
+      "status": "pass",
+      "roles": ["status"],
+      "liveRegion": "polite|assertive",
+      "keyboard": "N/A",
+      "reducedMotion": true
+    },
+    "velin-bottom-nav": {
+      "status": "pass",
+      "roles": ["navigation"],
+      "requiredAttributes": ["aria-label"],
+      "keyboard": "Native links or buttons in slot",
+      "notes": "Host aria-label; slotchange syncs aria-current and infers item labels from data-nav/title."
+    },
+    "velin-carousel": {
+      "status": "pass",
+      "roles": ["group", "button"],
+      "keyboard": "Arrows, Home, End, dots",
+      "reducedMotion": true
+    },
+    "velin-code-block": {
+      "status": "pass",
+      "roles": ["button"],
+      "requiredAttributes": [],
+      "keyboard": "Expand toggle keyboard",
+      "notes": "Expand uses aria-expanded and aria-controls."
+    },
+    "velin-collapse": {
+      "status": "pass",
+      "roles": ["button"],
+      "keyboard": "Enter/Space on trigger",
+      "requiredAttributes": []
+    },
+    "velin-combobox": {
+      "status": "pass",
+      "roles": ["combobox", "listbox"],
+      "keyboard": "Roving, Escape, Enter",
+      "requiredAttributes": ["aria-label"]
+    },
+    "velin-command": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Escape, arrows in results, Tab trap",
+      "requiredAttributes": []
+    },
+    "velin-copy": {
+      "status": "pass",
+      "roles": ["button"],
+      "requiredAttributes": ["aria-label"],
+      "keyboard": "Native button"
+    },
+    "velin-countdown": {
+      "status": "pass",
+      "roles": ["timer"],
+      "liveRegion": "polite",
+      "keyboard": "N/A"
+    },
+    "velin-counter": {
+      "status": "pass",
+      "roles": ["status"],
+      "liveRegion": "polite",
+      "keyboard": "N/A",
+      "reducedMotion": true
+    },
+    "velin-dialog": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Native dialog, Escape",
+      "requiredAttributes": [],
+      "notes": "aria-labelledby on dialog, aria-modal true."
+    },
+    "velin-drawer": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Escape, Tab trap",
+      "requiredAttributes": []
+    },
+    "velin-dropdown": {
+      "status": "pass",
+      "roles": ["menu", "button"],
+      "keyboard": "Roving, typeahead, Escape"
+    },
+    "velin-email": {
+      "status": "pass",
+      "roles": ["button"],
+      "requiredAttributes": ["aria-label"]
+    },
+    "velin-icon": {
+      "status": "pass",
+      "roles": ["img", "presentation"],
+      "requiredAttributes": ["label"],
+      "notes": "Decorative when no label; SVG aria-hidden. Do not set aria-hidden on host in JS."
+    },
+    "velin-lightbox": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Escape, arrows, Tab trap",
+      "liveRegion": "polite"
+    },
+    "velin-live-dot": {
+      "status": "pass",
+      "roles": ["status"],
+      "requiredAttributes": [],
+      "notes": "Status exposed via aria-label on host, not color alone."
+    },
+    "velin-menubar": {
+      "status": "pass",
+      "roles": ["menubar", "menu"],
+      "requiredAttributes": ["aria-label"],
+      "keyboard": "Roving arrows"
+    },
+    "velin-modal": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Escape, Tab trap",
+      "requiredAttributes": []
+    },
+    "velin-persist": {
+      "status": "pass",
+      "keyboard": "N/A",
+      "notes": "display:contents; auto-saves form field values (WCAG 3.3.7 Redundant Entry helper). Clears on form submit."
+    },
+    "velin-popover": {
+      "status": "pass",
+      "roles": ["dialog", "tooltip"],
+      "keyboard": "Escape, Enter/Space on trigger; focus opens hover mode",
+      "notes": "aria-labelledby or default aria-label; non-button triggers get role=button."
+    },
+    "velin-progress-ring": {
+      "status": "pass",
+      "roles": ["progressbar"],
+      "requiredAttributes": []
+    },
+    "velin-rating": {
+      "status": "pass",
+      "roles": ["radiogroup"],
+      "keyboard": "Roving, arrows"
+    },
+    "velin-scroll-top": {
+      "status": "pass",
+      "roles": ["button"],
+      "requiredAttributes": ["aria-label"],
+      "reducedMotion": true
+    },
+    "velin-scrollspy": {
+      "status": "pass",
+      "keyboard": "Native nav links",
+      "notes": "Sets aria-current on active link."
+    },
+    "velin-search": {
+      "status": "pass",
+      "roles": ["combobox", "listbox"],
+      "requiredAttributes": ["aria-label"],
+      "keyboard": "Arrows, Enter, Escape",
+      "notes": "Default aria-label Search when unset."
+    },
+    "velin-secure-field": {
+      "status": "pass",
+      "roles": ["textbox"],
+      "requiredAttributes": [],
+      "notes": "Native label association."
+    },
+    "velin-segmented-control": {
+      "status": "pass",
+      "roles": ["group"],
+      "requiredAttributes": ["aria-label"],
+      "keyboard": "Roving"
+    },
+    "velin-sheet": {
+      "status": "pass",
+      "roles": ["dialog"],
+      "keyboard": "Escape, Tab trap"
+    },
+    "velin-sparkline": {
+      "status": "pass",
+      "roles": ["img", "presentation"],
+      "requiredAttributes": ["label"],
+      "notes": "Uses label, aria-label, or figcaption aria-labelledby."
+    },
+    "velin-stepper": {
+      "status": "pass",
+      "roles": ["list"],
+      "keyboard": "N/A (display); pair with buttons calling next()/prev()",
+      "notes": "aria-label per step (completed/current/upcoming); sr-only Completed text; aria-current on active step."
+    },
+    "velin-tabs": {
+      "status": "pass",
+      "roles": ["tablist", "tab", "tabpanel"],
+      "keyboard": "Roving, auto-select arrows"
+    },
+    "velin-theme-toggle": {
+      "status": "pass",
+      "roles": ["button", "menu"],
+      "keyboard": "Menu arrows, Escape",
+      "notes": "aria-pressed on theme toggle."
+    },
+    "velin-toast": {
+      "status": "pass",
+      "roles": ["status", "alert"],
+      "liveRegion": "polite|assertive",
+      "keyboard": "Close button"
+    },
+    "velin-tooltip": {
+      "status": "pass",
+      "roles": ["tooltip"],
+      "keyboard": "Escape, focusin"
+    }
+  }
+}

package/core/attributes/index.js

@@ -0,0 +1,6 @@
+export {
+  registerAttribute,
+  getAttributeHandler,
+  bootAttributes,
+  listRegisteredAttributes,
+} from './registry.js';