@adia-ai/web-components 0.8.19 → 0.8.21

package/traits/arrow-grid-nav/arrow-grid-nav.test.js

@@ -1,375 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { arrowGridNav } from './arrow-grid-nav.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from '../test-helpers.js';
-
-/**
- * Build a row-flat grid with `total` cells laid out in `cols` columns.
- * Returns the host element pre-populated with <button> children.
- */
-function flatGrid(cols, total) {
-  const host = mountHost('div', { 'data-grid-columns': String(cols) });
-  for (let i = 0; i < total; i++) {
-    const btn = document.createElement('button');
-    btn.textContent = `cell-${i}`;
-    btn.setAttribute('data-cell-index', String(i));
-    host.appendChild(btn);
-  }
-  return host;
-}
-
-/**
- * Build a row-nested grid: each direct child is a row, each row's children
- * are cells. `rowSpec` is an array of column counts per row.
- */
-function nestedGrid(rowSpec) {
-  const host = mountHost('div', { 'data-grid-mode': 'row-nested' });
-  rowSpec.forEach((cols, rowIdx) => {
-    const row = document.createElement('div');
-    for (let c = 0; c < cols; c++) {
-      const btn = document.createElement('button');
-      btn.textContent = `r${rowIdx}c${c}`;
-      row.appendChild(btn);
-    }
-    host.appendChild(row);
-  });
-  return host;
-}
-
-function key(host, k, modifiers = {}) {
-  host.dispatchEvent(new KeyboardEvent('keydown', {
-    key: k,
-    bubbles: true,
-    ...modifiers,
-  }));
-}
-
-describe('arrow-grid-nav', () => {
-  beforeEach(resetDOM);
-
-  it('paints active row + col on connect at (0, 0)', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-    const first = host.children[0];
-    expect(first.hasAttribute('data-grid-active')).toBe(true);
-    expect(first.getAttribute('tabindex')).toBe('0');
-  });
-
-  it('sets host tabindex to 0 when not pre-set', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    expect(host.getAttribute('tabindex')).toBe('0');
-  });
-
-  it('preserves a pre-set host tabindex', () => {
-    const host = flatGrid(7, 42);
-    host.setAttribute('tabindex', '5');
-    connectTrait(arrowGridNav, host);
-    expect(host.getAttribute('tabindex')).toBe('5');
-  });
-
-  it('non-active cells receive tabindex="-1"', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    expect(host.children[1].getAttribute('tabindex')).toBe('-1');
-    expect(host.children[10].getAttribute('tabindex')).toBe('-1');
-  });
-
-  it('ArrowRight increments col within the row', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowRight');
-    expect(host.getAttribute('data-grid-active-col')).toBe('1');
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    expect(host.children[1].hasAttribute('data-grid-active')).toBe(true);
-    expect(host.children[0].hasAttribute('data-grid-active')).toBe(false);
-  });
-
-  it('ArrowLeft decrements col', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowRight');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowLeft');
-    expect(host.getAttribute('data-grid-active-col')).toBe('1');
-  });
-
-  it('ArrowDown increments row, keeps col', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowRight');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowDown');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    expect(host.getAttribute('data-grid-active-col')).toBe('3');
-    // index 3 + 7 = 10
-    expect(host.children[10].hasAttribute('data-grid-active')).toBe(true);
-  });
-
-  it('ArrowUp decrements row', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowDown');
-    key(host, 'ArrowDown');
-    key(host, 'ArrowUp');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-  });
-
-  it('Home moves to col 0 within current row', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowDown');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowRight');
-    expect(host.getAttribute('data-grid-active-col')).toBe('2');
-    key(host, 'Home');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-  });
-
-  it('Ctrl+Home moves to (0, 0)', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowDown');
-    key(host, 'ArrowDown');
-    key(host, 'ArrowRight');
-    key(host, 'Home', { ctrlKey: true });
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-  });
-
-  it('End moves to last col in current row', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'End');
-    expect(host.getAttribute('data-grid-active-col')).toBe('6');
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-  });
-
-  it('Ctrl+End moves to (lastRow, lastCol)', () => {
-    const host = flatGrid(7, 42); // 6 rows × 7 cols
-    connectTrait(arrowGridNav, host);
-    key(host, 'End', { ctrlKey: true });
-    expect(host.getAttribute('data-grid-active-row')).toBe('5');
-    expect(host.getAttribute('data-grid-active-col')).toBe('6');
-  });
-
-  it('Meta+End is treated as Ctrl+End on Mac', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'End', { metaKey: true });
-    expect(host.getAttribute('data-grid-active-row')).toBe('5');
-    expect(host.getAttribute('data-grid-active-col')).toBe('6');
-  });
-
-  it('Enter dispatches grid-activate with row, col, element', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-activate');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowDown');
-    key(host, 'Enter');
-    expect(spy.count).toBe(1);
-    expect(spy.last).toMatchObject({ row: 1, col: 1 });
-    expect(spy.last.element).toBe(host.children[8]); // row 1 col 1 = index 8
-  });
-
-  it('Space dispatches grid-activate', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-activate');
-    key(host, ' ');
-    expect(spy.count).toBe(1);
-    expect(spy.last).toMatchObject({ row: 0, col: 0 });
-  });
-
-  it('emits grid-edge "left" at column 0', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-edge');
-    key(host, 'ArrowLeft');
-    expect(spy.count).toBe(1);
-    expect(spy.last.edge).toBe('left');
-  });
-
-  it('emits grid-edge "right" at last column', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'End');
-    const spy = spyEvent(host, 'grid-edge');
-    key(host, 'ArrowRight');
-    expect(spy.count).toBe(1);
-    expect(spy.last.edge).toBe('right');
-  });
-
-  it('emits grid-edge "top" at row 0', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-edge');
-    key(host, 'ArrowUp');
-    expect(spy.count).toBe(1);
-    expect(spy.last.edge).toBe('top');
-  });
-
-  it('emits grid-edge "bottom" at last row', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    key(host, 'End', { ctrlKey: true });
-    const spy = spyEvent(host, 'grid-edge');
-    key(host, 'ArrowDown');
-    expect(spy.count).toBe(1);
-    expect(spy.last.edge).toBe('bottom');
-  });
-
-  it('grid-cell-change fires when active changes', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-cell-change');
-    key(host, 'ArrowRight');
-    key(host, 'ArrowRight');
-    expect(spy.count).toBe(2);
-    expect(spy.last).toMatchObject({ row: 0, col: 2 });
-  });
-
-  it('grid-cell-change does NOT fire when no movement happens at edge', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-cell-change');
-    key(host, 'ArrowLeft'); // already at col 0
-    expect(spy.count).toBe(0);
-  });
-
-  it('row-nested mode infers rows from container children', () => {
-    const host = nestedGrid([3, 3, 3]); // 3x3 grid
-    connectTrait(arrowGridNav, host);
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-    key(host, 'ArrowDown');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    const row1 = host.children[1];
-    expect(row1.children[0].hasAttribute('data-grid-active')).toBe(true);
-  });
-
-  it('row-nested mode handles ragged rows by clamping col on row change', () => {
-    const host = nestedGrid([5, 2, 4]); // row 0 has 5 cols, row 1 has 2, row 2 has 4
-    connectTrait(arrowGridNav, host);
-    key(host, 'End'); // col 4 in row 0
-    expect(host.getAttribute('data-grid-active-col')).toBe('4');
-    key(host, 'ArrowDown'); // row 1 only has 2 cols → clamp to 1
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    expect(host.getAttribute('data-grid-active-col')).toBe('1');
-  });
-
-  it('disabled cells are skipped in row-flat mode', () => {
-    const host = flatGrid(7, 42);
-    host.children[1].setAttribute('disabled', '');
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowRight');
-    // Disabled child #1 is filtered out → row-flat splits the remaining
-    // 41 cells; index 1 in the post-filter list is original cell #2.
-    expect(host.children[2].hasAttribute('data-grid-active')).toBe(true);
-  });
-
-  it('does not steal arrow keys from <input> within a cell', () => {
-    const host = mountHost('div', { 'data-grid-columns': '3' });
-    for (let i = 0; i < 3; i++) {
-      const cell = document.createElement('div');
-      const inp = document.createElement('input');
-      cell.appendChild(inp);
-      host.appendChild(cell);
-    }
-    connectTrait(arrowGridNav, host);
-    const inp = host.querySelector('input');
-    inp.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
-    // No movement — col remains 0.
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-  });
-
-  it('does not respond to non-handled keys', () => {
-    const host = flatGrid(7, 42);
-    connectTrait(arrowGridNav, host);
-    const spy = spyEvent(host, 'grid-cell-change');
-    key(host, 'a');
-    key(host, 'Tab');
-    key(host, 'Escape');
-    expect(spy.count).toBe(0);
-  });
-
-  it('MutationObserver re-paints when children are added', async () => {
-    const host = flatGrid(7, 7); // 1 row of 7
-    connectTrait(arrowGridNav, host);
-    key(host, 'End'); // col 6
-    expect(host.getAttribute('data-grid-active-col')).toBe('6');
-    // Add 7 more children → row 1 exists.
-    for (let i = 0; i < 7; i++) {
-      const btn = document.createElement('button');
-      btn.textContent = `new-${i}`;
-      host.appendChild(btn);
-    }
-    await new Promise((r) => setTimeout(r, 10));
-    // Active should still be at (0, 6).
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    // Now arrow-down should reach the new row.
-    key(host, 'ArrowDown');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-  });
-
-  it('disconnect removes all managed attrs from host and active cell', () => {
-    const host = flatGrid(7, 42);
-    const inst = connectTrait(arrowGridNav, host);
-    key(host, 'ArrowRight');
-    inst.disconnect(host);
-    expect(host.hasAttribute('data-arrow-grid-nav-active')).toBe(false);
-    expect(host.hasAttribute('data-grid-active-row')).toBe(false);
-    expect(host.hasAttribute('data-grid-active-col')).toBe(false);
-    for (const child of host.children) {
-      expect(child.hasAttribute('data-grid-active')).toBe(false);
-    }
-  });
-
-  it('disconnect removes the keydown listener', () => {
-    const host = flatGrid(7, 42);
-    const inst = connectTrait(arrowGridNav, host);
-    inst.disconnect(host);
-    const spy = spyEvent(host, 'grid-cell-change');
-    key(host, 'ArrowRight');
-    expect(spy.count).toBe(0);
-  });
-
-  it('reconnect after disconnect works', () => {
-    const host = flatGrid(7, 42);
-    const inst1 = connectTrait(arrowGridNav, host);
-    inst1.disconnect(host);
-    const inst2 = connectTrait(arrowGridNav, host);
-    expect(host.getAttribute('data-grid-active-row')).toBe('0');
-    expect(host.children[0].hasAttribute('data-grid-active')).toBe(true);
-    inst2.disconnect(host);
-  });
-
-  it('default mode is row-flat when data-grid-mode missing', () => {
-    const host = flatGrid(4, 12);
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowDown');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    expect(host.children[4].hasAttribute('data-grid-active')).toBe(true);
-  });
-
-  it('missing data-grid-columns falls back to 1 (single column)', () => {
-    const host = mountHost('div');
-    for (let i = 0; i < 4; i++) {
-      const btn = document.createElement('button');
-      host.appendChild(btn);
-    }
-    connectTrait(arrowGridNav, host);
-    key(host, 'ArrowDown');
-    expect(host.getAttribute('data-grid-active-row')).toBe('1');
-    expect(host.getAttribute('data-grid-active-col')).toBe('0');
-  });
-
-  it('empty grid does not throw', () => {
-    const host = mountHost('div', { 'data-grid-columns': '7' });
-    expect(() => connectTrait(arrowGridNav, host)).not.toThrow();
-  });
-});

package/traits/attention-pulse/attention-pulse.test.js

@@ -1,26 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { attentionPulse } from './attention-pulse.js';
-import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
-
-describe('attention-pulse', () => {
-  beforeEach(resetDOM);
-
-  it('connect sets data-attention-pulse-active', () => {
-    const host = mountHost();
-    connectTrait(attentionPulse, host);
-    expect(host.hasAttribute('data-attention-pulse-active')).toBe(true);
-  });
-
-  it('disconnect clears active + animation', () => {
-    const host = mountHost();
-    const inst = connectTrait(attentionPulse, host);
-    inst.disconnect(host);
-    expect(host.hasAttribute('data-attention-pulse-active')).toBe(false);
-    expect(host.style.animation).toBe('');
-  });
-
-  it('respects data-pulse-interval (default 2000ms)', () => {
-    const host = mountHost('div', { 'data-pulse-interval': '500' });
-    expect(() => connectTrait(attentionPulse, host)).not.toThrow();
-  });
-});

package/traits/confetti/confetti.test.js

@@ -1,46 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { confetti } from './confetti.js';
-import { _resetStage } from './confetti-stage.js';
-import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';
-
-describe('confetti', () => {
-  beforeEach(() => {
-    resetDOM();
-    _resetStage();
-  });
-
-  it('connect sets data-confetti-active without throwing', () => {
-    const host = mountHost();
-    connectTrait(confetti, host);
-    expect(host.hasAttribute('data-confetti-active')).toBe(true);
-  });
-
-  it('disconnect clears active', () => {
-    const host = mountHost();
-    const inst = connectTrait(confetti, host);
-    inst.disconnect(host);
-    expect(host.hasAttribute('data-confetti-active')).toBe(false);
-  });
-
-  it('no canvas: graceful degradation in happy-dom', () => {
-    // Old contract: this trait used a host-scoped <canvas>. New
-    // contract: it pushes <span> particles into the body-level
-    // popover stage (no canvas anywhere). The test name is kept for
-    // continuity — the assertion is the same: connect must not throw
-    // in environments without real layout (rect = 0,0,0,0 in
-    // happy-dom; viewportCenterOf returns null and the trait skips
-    // particle spawning gracefully).
-    const host = mountHost();
-    expect(() => connectTrait(confetti, host)).not.toThrow();
-  });
-
-  it('does not append particles inside the host (stage is body-level)', () => {
-    const host = mountHost();
-    const inst = connectTrait(confetti, host);
-    // The old implementation appended a <canvas> child to the host.
-    // The new implementation must leave the host's children alone —
-    // every particle belongs to the body-level popover stage.
-    expect(host.children.length).toBe(0);
-    inst.disconnect(host);
-  });
-});

package/traits/confetti-burst/confetti-burst.test.js

@@ -1,46 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { confettiBurst } from './confetti-burst.js';
-import { _resetStage } from '../confetti/confetti-stage.js';
-import { mountHost, connectTrait, spyEvent, resetDOM, wait } from '../test-helpers.js';
-
-describe('confetti-burst', () => {
-  beforeEach(() => {
-    resetDOM();
-    _resetStage();
-  });
-
-  it('sets data-confetti-burst-active on connect', () => {
-    const host = mountHost();
-    connectTrait(confettiBurst, host);
-    expect(host.hasAttribute('data-confetti-burst-active')).toBe(true);
-  });
-
-  it('fires confetti-burst-done even without real layout (happy-dom)', async () => {
-    const host = mountHost();
-    const spy = spyEvent(host, 'confetti-burst-done');
-    connectTrait(confettiBurst, host);
-    // happy-dom returns rect = 0,0,0,0 for unattached layout. The
-    // trait's graceful-degradation path queues `done` on next tick.
-    await wait(50);
-    expect(spy.count).toBeGreaterThanOrEqual(1);
-  });
-
-  it('disconnect removes the active attribute', () => {
-    const host = mountHost();
-    const inst = confettiBurst();
-    inst.connect(host);
-    inst.disconnect(host);
-    expect(host.hasAttribute('data-confetti-burst-active')).toBe(false);
-  });
-
-  it('host stays unmodified by particle injection', () => {
-    const host = mountHost();
-    const inst = connectTrait(confettiBurst, host);
-    // New contract: particles live in the body-level popover stage,
-    // not on the host. The host must not gain children or inline
-    // position/cssText hacks (the old canvas-injection path did).
-    expect(host.tagName).toBe('DIV');
-    expect(host.children.length).toBe(0);
-    inst.disconnect(host);
-  });
-});

package/traits/count-up/count-up.test.js

@@ -1,54 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { countUp } from './count-up.js';
-import { mountHost, connectTrait, spyEvent, resetDOM, wait, raf } from '../test-helpers.js';
-
-describe('count-up', () => {
-  beforeEach(resetDOM);
-
-  it('reads data-count-up-target + duration; sets active', () => {
-    const host = mountHost('span', {
-      'data-count-up-target': '100',
-      'data-count-duration': '200',
-    });
-    host.textContent = '0';
-    connectTrait(countUp, host);
-    expect(host.hasAttribute('data-count-up-active')).toBe(true);
-  });
-
-  it('eventually reaches the target value and fires count-up-done', async () => {
-    const host = mountHost('span', {
-      'data-count-up-target': '42',
-      'data-count-duration': '50',
-    });
-    host.textContent = '0';
-    const spy = spyEvent(host, 'count-up-done');
-    connectTrait(countUp, host);
-    // happy-dom does not implement requestAnimationFrame in a way that drives
-    // the easing loop; we assert the active flag and that the trait sets up
-    // without throwing. The end-state assertion is covered by the smoke
-    // contract (attribute cleanup) and by the e2e demo in real browsers.
-    expect(host.hasAttribute('data-count-up-active')).toBe(true);
-    expect(typeof spy.count).toBe('number');
-  });
-
-  it('disconnect clears active and cancels the rAF loop', () => {
-    const host = mountHost('span', { 'data-count-up-target': '500' });
-    host.textContent = '0';
-    const inst = countUp();
-    inst.connect(host);
-    inst.disconnect(host);
-    expect(host.hasAttribute('data-count-up-active')).toBe(false);
-  });
-
-  it('missing target attribute uses default 0', () => {
-    const host = mountHost('span');
-    host.textContent = '0';
-    expect(() => countUp().connect(host)).not.toThrow();
-  });
-
-  it('missing duration uses default 1000ms', () => {
-    const host = mountHost('span', { 'data-count-up-target': '10' });
-    host.textContent = '0';
-    expect(() => countUp().connect(host)).not.toThrow();
-  });
-});

package/traits/declarative.test.js

@@ -1,138 +0,0 @@
-/**
- * UIElement attribute-driven trait composition.
- *
- *   <comp-ui traits="pressable scale-press ripple">
- *
- * Declarative wiring is the third path next to:
- *   - static traits = [...]   (compile-time, on the class)
- *   - el.addTrait(traitFn)    (runtime, programmatic)
- *
- * Tests assert: connect-time application, idempotence with static, attribute
- * change re-applies, unknown name warns without throwing.
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { UIElement } from '../core/element.js';
-import { pressable } from './pressable/pressable.js';
-import { focusable } from './focusable/focusable.js';
-import { hoverable } from './hoverable/hoverable.js';
-import { resetDOM } from './test-helpers.js';
-
-let counter = 0;
-function defineUniqueTag(BaseImpl) {
-  const tag = `decl-trait-test-${++counter}`;
-  customElements.define(tag, BaseImpl);
-  return tag;
-}
-
-describe('UIElement — declarative traits attribute', () => {
-  beforeEach(resetDOM);
-
-  it('applies traits listed in the attribute on connect', () => {
-    class El extends UIElement {}
-    const tag = defineUniqueTag(El);
-    document.body.innerHTML = `<${tag} traits="pressable focusable"></${tag}>`;
-    const el = document.body.firstElementChild;
-    expect(el.hasAttribute('traits')).toBe(true);
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(true);
-    el.dispatchEvent(new FocusEvent('focus'));
-    expect(el.hasAttribute('data-focusable-keyboard')).toBe(true);
-  });
-
-  it('static traits + attribute traits coexist, no double-apply', () => {
-    class El extends UIElement {
-      static get traits() { return [pressable]; }
-    }
-    const tag = defineUniqueTag(El);
-    document.body.innerHTML = `<${tag} traits="pressable focusable"></${tag}>`;
-    const el = document.body.firstElementChild;
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    el.dispatchEvent(new PointerEvent('pointerup'));
-    let pressCount = 0;
-    el.addEventListener('press', () => pressCount++);
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    el.dispatchEvent(new PointerEvent('pointerup'));
-    // exactly ONE press fires per pointerdown/up (not two from double-apply)
-    expect(pressCount).toBe(1);
-    // focusable from attribute also wired
-    el.dispatchEvent(new FocusEvent('focus'));
-    expect(el.hasAttribute('data-focusable-keyboard')).toBe(true);
-  });
-
-  it('unknown trait name warns but does not throw', () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
-    class El extends UIElement {}
-    const tag = defineUniqueTag(El);
-    expect(() => {
-      document.body.innerHTML = `<${tag} traits="pressable nonexistent-trait"></${tag}>`;
-    }).not.toThrow();
-    const el = document.body.firstElementChild;
-    // Real trait still applied
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(true);
-    expect(warn).toHaveBeenCalled();
-    expect(warn.mock.calls[0][0]).toContain('nonexistent-trait');
-    warn.mockRestore();
-  });
-
-  it('changing the attribute swaps declarative traits', () => {
-    class El extends UIElement {}
-    const tag = defineUniqueTag(El);
-    document.body.innerHTML = `<${tag} traits="pressable"></${tag}>`;
-    const el = document.body.firstElementChild;
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(true);
-    el.dispatchEvent(new PointerEvent('pointerup'));
-
-    // Swap to focusable+hoverable
-    el.setAttribute('traits', 'focusable hoverable');
-
-    // pressable should no longer respond
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(false);
-
-    // focusable should respond
-    el.dispatchEvent(new FocusEvent('focus'));
-    expect(el.hasAttribute('data-focusable-keyboard')).toBe(true);
-
-    // hoverable should respond
-    el.dispatchEvent(new PointerEvent('pointerenter'));
-    expect(el.hasAttribute('data-hoverable-hover')).toBe(true);
-  });
-
-  it('clearing the attribute removes declarative traits', () => {
-    class El extends UIElement {}
-    const tag = defineUniqueTag(El);
-    document.body.innerHTML = `<${tag} traits="pressable"></${tag}>`;
-    const el = document.body.firstElementChild;
-    el.removeAttribute('traits');
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(false);
-  });
-
-  it('disconnect cleans up both static and declarative traits', () => {
-    class El extends UIElement {
-      static get traits() { return [pressable]; }
-    }
-    const tag = defineUniqueTag(El);
-    document.body.innerHTML = `<${tag} traits="focusable"></${tag}>`;
-    const el = document.body.firstElementChild;
-    el.dispatchEvent(new PointerEvent('pointerdown'));
-    el.dispatchEvent(new FocusEvent('focus'));
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(true);
-    expect(el.hasAttribute('data-focusable-keyboard')).toBe(true);
-    el.remove();
-    expect(el.hasAttribute('data-pressable-pressed')).toBe(false);
-    expect(el.hasAttribute('data-focusable-keyboard')).toBe(false);
-  });
-
-  it('observedAttributes always includes "traits"', () => {
-    class El extends UIElement {
-      static get properties() { return { value: { type: String, default: '' } }; }
-    }
-    const observed = El.observedAttributes;
-    expect(observed).toContain('value');
-    expect(observed).toContain('traits');
-  });
-});