@adia-ai/web-components 0.0.34 → 0.2.1

package/traits/resize-observer.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { resizeObserver } from './resize-observer.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('resize-observer', () => {
+  let originalRO;
+
+  beforeEach(() => {
+    resetDOM();
+    originalRO = globalThis.ResizeObserver;
+  });
+
+  afterEach(() => {
+    if (originalRO) globalThis.ResizeObserver = originalRO;
+    else delete globalThis.ResizeObserver;
+  });
+
+  it('without ResizeObserver: gracefully no-ops on connect', () => {
+    delete globalThis.ResizeObserver;
+    const host = mountHost();
+    expect(() => connectTrait(resizeObserver, host)).not.toThrow();
+  });
+
+  it('with mocked ResizeObserver: observe() called + disconnect cleans up', () => {
+    const observe = vi.fn();
+    const roDisconnect = vi.fn();
+    globalThis.ResizeObserver = function MockRO() {
+      this.observe = observe;
+      this.disconnect = roDisconnect;
+      this.unobserve = vi.fn();
+    };
+    const host = mountHost();
+    const inst = connectTrait(resizeObserver, host);
+    expect(observe).toHaveBeenCalledWith(host);
+    inst.disconnect(host);
+    expect(roDisconnect).toHaveBeenCalled();
+  });
+});

package/traits/ripple.js

@@ -1,11 +1,20 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const ripple = defineTrait({
   name: 'ripple',
+  category: 'animation-feedback',
+  description: 'Material-style press ripple effect',
   attributes: ['data-ripple-active'],
   events: [],
   config: [],
   setup({ host }) {
+    // Reduced-motion: drop the ripple animation; press feedback comes from pressable instead.
+    if (prefersReducedMotion()) {
+      host.setAttribute('data-ripple-active', '');
+      return () => host.removeAttribute('data-ripple-active');
+    }
+
     host.style.overflow = 'hidden';
     host.style.position = host.style.position || 'relative';
     host.setAttribute('data-ripple-active', '');

package/traits/ripple.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ripple } from './ripple.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('ripple', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-ripple-active', () => {
+    const host = mountHost();
+    connectTrait(ripple, host);
+    expect(host.hasAttribute('data-ripple-active')).toBe(true);
+  });
+
+  it('disconnect clears active + restores overflow', () => {
+    const host = mountHost();
+    const inst = connectTrait(ripple, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-ripple-active')).toBe(false);
+    expect(host.style.overflow).toBe('');
+  });
+
+  it('click appends a ripple span (in non-reduced-motion environment)', () => {
+    const host = mountHost();
+    connectTrait(ripple, host);
+    const beforeChildren = host.children.length;
+    host.dispatchEvent(new MouseEvent('click', { clientX: 10, clientY: 10, bubbles: true }));
+    // In happy-dom + reduced-motion preference unknown, the ripple may or may
+    // not append a span. The contract is "connect doesn't throw, no DOM leak
+    // on disconnect".
+    expect(host.children.length).toBeGreaterThanOrEqual(beforeChildren);
+  });
+});

package/traits/roving-tabindex.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const rovingTabindex = defineTrait({
   name: 'roving-tabindex',
+  category: 'keyboard-navigation',
+  description: 'Focus management within composite widgets',
   attributes: [],
   events: [],
   config: [],

package/traits/roving-tabindex.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { rovingTabindex } from './roving-tabindex.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+function tabbableChild(host) {
+  const btn = document.createElement('button');
+  host.appendChild(btn);
+  return btn;
+}
+
+describe('roving-tabindex', () => {
+  beforeEach(resetDOM);
+
+  it('connect attaches without throwing', () => {
+    const host = mountHost();
+    tabbableChild(host);
+    tabbableChild(host);
+    tabbableChild(host);
+    expect(() => connectTrait(rovingTabindex, host)).not.toThrow();
+  });
+
+  it('disconnect cleans up', () => {
+    const host = mountHost();
+    tabbableChild(host);
+    const inst = connectTrait(rovingTabindex, host);
+    expect(() => inst.disconnect(host)).not.toThrow();
+  });
+});

package/traits/scale-press.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const scalePress = defineTrait({
   name: 'scale-press',
+  category: 'animation-feedback',
+  description: 'Subtle scale transform on press',
   attributes: ['data-scale-press-active'],
   events: [],
   config: [],

package/traits/scale-press.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { scalePress } from './scale-press.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('scale-press', () => {
+  beforeEach(resetDOM);
+
+  it('pointerdown applies scale(0.95) + active attribute', () => {
+    const host = mountHost();
+    connectTrait(scalePress, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-scale-press-active')).toBe(true);
+    expect(host.style.transform).toContain('0.95');
+  });
+
+  it('pointerup releases scale and clears attribute', () => {
+    const host = mountHost();
+    connectTrait(scalePress, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(host.hasAttribute('data-scale-press-active')).toBe(false);
+  });
+
+  it('pointerleave during press releases (canceled press)', () => {
+    const host = mountHost();
+    connectTrait(scalePress, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    host.dispatchEvent(new PointerEvent('pointerleave'));
+    expect(host.hasAttribute('data-scale-press-active')).toBe(false);
+  });
+
+  it('respects [disabled] — no transform, no attribute', () => {
+    const host = mountHost('button', { disabled: '' });
+    connectTrait(scalePress, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-scale-press-active')).toBe(false);
+    expect(host.style.transform).toBe('');
+  });
+});

package/traits/scroll-lock.js

@@ -5,6 +5,8 @@ let savedOverflow = '';
 
 export const scrollLock = defineTrait({
   name: 'scroll-lock',
+  category: 'layout-measurement',
+  description: 'Disables background scrolling',
   attributes: ['data-scroll-lock-active'],
   events: [],
   config: [],

package/traits/scroll-lock.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { scrollLock } from './scroll-lock.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('scroll-lock', () => {
+  beforeEach(() => {
+    resetDOM();
+    document.body.style.overflow = '';
+  });
+
+  it('connect sets body overflow:hidden + active attribute', () => {
+    const host = mountHost();
+    connectTrait(scrollLock, host);
+    expect(document.body.style.overflow).toBe('hidden');
+    expect(host.hasAttribute('data-scroll-lock-active')).toBe(true);
+  });
+
+  it('disconnect restores body overflow + clears attribute', () => {
+    document.body.style.overflow = 'auto';
+    const host = mountHost();
+    const inst = connectTrait(scrollLock, host);
+    inst.disconnect(host);
+    expect(document.body.style.overflow).toBe('auto');
+    expect(host.hasAttribute('data-scroll-lock-active')).toBe(false);
+  });
+
+  it('refcounted — disconnect order does not unlock until last consumer leaves', () => {
+    // The trait is module-scoped (lockCount + savedOverflow live in module state).
+    // Snapshot the current state so this assertion is independent of test order.
+    const startOverflow = document.body.style.overflow;
+    const a = mountHost();
+    const b = mountHost();
+    const instA = connectTrait(scrollLock, a);
+    const instB = connectTrait(scrollLock, b);
+    expect(document.body.style.overflow).toBe('hidden');
+    instA.disconnect(a);
+    // Still locked because b is still active
+    expect(document.body.style.overflow).toBe('hidden');
+    instB.disconnect(b);
+    // Restored to whatever it was when the *first* lock acquired it
+    expect(document.body.style.overflow).toBe(startOverflow);
+  });
+});

package/traits/shimmer-loading.js

@@ -1,11 +1,31 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const shimmerLoading = defineTrait({
   name: 'shimmer-loading',
+  category: 'visual-dynamics',
+  description: 'Skeleton shimmer effect',
   attributes: ['data-shimmer-loading-active'],
   events: [],
   config: [],
   setup({ host }) {
+    // Reduced-motion: render a static skeleton (subtle muted background) instead of the sweeping shimmer.
+    if (prefersReducedMotion()) {
+      const overlay = document.createElement('div');
+      overlay.style.cssText = `
+        position: absolute; inset: 0; pointer-events: none; z-index: 1;
+        border-radius: inherit;
+        background: rgba(0,0,0,0.06);
+      `;
+      host.style.position = host.style.position || 'relative';
+      host.appendChild(overlay);
+      host.setAttribute('data-shimmer-loading-active', '');
+      return () => {
+        overlay.remove();
+        host.removeAttribute('data-shimmer-loading-active');
+      };
+    }
+
     const keyframeName = `adia-shimmer-${Math.random().toString(36).slice(2, 8)}`;
 
     const style = document.createElement('style');

package/traits/shimmer-loading.test.js

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { shimmerLoading } from './shimmer-loading.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('shimmer-loading', () => {
+  beforeEach(resetDOM);
+
+  it('sets data-shimmer-loading-active and appends an overlay', () => {
+    const host = mountHost();
+    connectTrait(shimmerLoading, host);
+    expect(host.hasAttribute('data-shimmer-loading-active')).toBe(true);
+    // Either a static muted overlay (reduced-motion) or the shimmer overlay
+    // is appended as a child div.
+    const overlay = host.querySelector('div');
+    expect(overlay).toBeTruthy();
+  });
+
+  it('disconnect removes overlay + cleans active attribute', () => {
+    const host = mountHost();
+    const inst = shimmerLoading();
+    inst.connect(host);
+    expect(host.querySelector('div')).toBeTruthy();
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-shimmer-loading-active')).toBe(false);
+    expect(host.querySelector('div')).toBeFalsy();
+  });
+
+  it('host gets position:relative if not already set (so the overlay anchors)', () => {
+    const host = mountHost();
+    connectTrait(shimmerLoading, host);
+    expect(host.style.position).toBe('relative');
+  });
+
+  it('parallel attach to two hosts: each gets its own overlay', () => {
+    const a = mountHost();
+    const b = mountHost();
+    shimmerLoading().connect(a);
+    shimmerLoading().connect(b);
+    expect(a.querySelector('div')).toBeTruthy();
+    expect(b.querySelector('div')).toBeTruthy();
+    expect(a.querySelector('div')).not.toBe(b.querySelector('div'));
+  });
+});

package/traits/snap-to-grid.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const snapToGrid = defineTrait({
   name: 'snap-to-grid',
+  category: 'motion-positioning',
+  description: 'Snaps position to configurable grid',
   attributes: ['data-snap-to-grid-snapped'],
   events: [],
   config: ['data-snap-grid'],

package/traits/snap-to-grid.test.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { snapToGrid } from './snap-to-grid.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('snap-to-grid', () => {
+  beforeEach(resetDOM);
+
+  it('drag-end with x,y rounds to nearest grid increment (default 16)', () => {
+    const host = mountHost();
+    connectTrait(snapToGrid, host);
+    host.dispatchEvent(new CustomEvent('drag-end', { detail: { x: 23, y: 41 } }));
+    expect(host.style.translate).toBe('16px 48px');
+    expect(host.hasAttribute('data-snap-to-grid-snapped')).toBe(true);
+  });
+
+  it('respects data-snap-grid override', () => {
+    const host = mountHost('div', { 'data-snap-grid': '50' });
+    connectTrait(snapToGrid, host);
+    host.dispatchEvent(new CustomEvent('drag-end', { detail: { x: 73, y: 124 } }));
+    expect(host.style.translate).toBe('50px 100px');
+  });
+
+  it('drag-end without detail is a no-op', () => {
+    const host = mountHost();
+    connectTrait(snapToGrid, host);
+    host.dispatchEvent(new CustomEvent('drag-end', { detail: {} }));
+    // happy-dom may return undefined or '' for unset style.translate; both
+    // mean "untouched" which is the contract here.
+    expect(host.style.translate || '').toBe('');
+    expect(host.hasAttribute('data-snap-to-grid-snapped')).toBe(false);
+  });
+
+  it('disconnect clears the snapped attribute', () => {
+    const host = mountHost();
+    const inst = connectTrait(snapToGrid, host);
+    host.dispatchEvent(new CustomEvent('drag-end', { detail: { x: 0, y: 0 } }));
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-snap-to-grid-snapped')).toBe(false);
+  });
+});

package/traits/sound-feedback.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const soundFeedback = defineTrait({
   name: 'sound-feedback',
+  category: 'audio-haptics-sensory',
+  description: 'Synthesized tones via Web Audio API',
   attributes: ['data-sound-feedback-active'],
   events: [],
   config: ['data-sound-type'],

package/traits/sound-feedback.test.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { soundFeedback } from './sound-feedback.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('sound-feedback', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-sound-feedback-active', () => {
+    const host = mountHost();
+    connectTrait(soundFeedback, host);
+    expect(host.hasAttribute('data-sound-feedback-active')).toBe(true);
+  });
+
+  it('disconnect clears active + stops listening', () => {
+    const host = mountHost();
+    const inst = connectTrait(soundFeedback, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-sound-feedback-active')).toBe(false);
+  });
+
+  it('without data-sound-type: press fires no audio (no throw)', () => {
+    const host = mountHost();
+    connectTrait(soundFeedback, host);
+    expect(() => host.dispatchEvent(new CustomEvent('press', { bubbles: true }))).not.toThrow();
+  });
+});

package/traits/spring-animate.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const springAnimate = defineTrait({
   name: 'spring-animate',
+  category: 'animation-feedback',
+  description: 'Spring-based motion transitions',
   attributes: ['data-spring-animate-active'],
   events: [],
   config: ['data-spring-stiffness', 'data-spring-damping'],

package/traits/spring-animate.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { springAnimate } from './spring-animate.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('spring-animate', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-spring-animate-active', () => {
+    const host = mountHost();
+    connectTrait(springAnimate, host);
+    expect(host.hasAttribute('data-spring-animate-active')).toBe(true);
+  });
+
+  it('disconnect clears active', () => {
+    const host = mountHost();
+    const inst = connectTrait(springAnimate, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-spring-animate-active')).toBe(false);
+  });
+
+  it('respects data-spring-stiffness + data-spring-damping config', () => {
+    const host = mountHost('div', {
+      'data-spring-stiffness': '200',
+      'data-spring-damping': '0.6',
+    });
+    expect(() => connectTrait(springAnimate, host)).not.toThrow();
+  });
+});

package/traits/tilt-hover.js

@@ -1,11 +1,19 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const tiltHover = defineTrait({
   name: 'tilt-hover',
+  category: 'animation-feedback',
+  description: 'Tilt based on pointer position',
   attributes: ['data-tilt-hover-active'],
   events: [],
   config: [],
   setup({ host }) {
+    // Reduced-motion: don't tilt the host; pointer events still fire elsewhere.
+    if (prefersReducedMotion()) {
+      return () => {};
+    }
+
     function onPointerMove(e) {
       const rect = host.getBoundingClientRect();
       const x = (e.clientX - rect.left) / rect.width - 0.5;

package/traits/tilt-hover.test.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { tiltHover } from './tilt-hover.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('tilt-hover', () => {
+  beforeEach(resetDOM);
+
+  it('pointermove sets data-tilt-hover-active and applies transform', () => {
+    const host = mountHost();
+    connectTrait(tiltHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 100, clientY: 100, bubbles: true }));
+    expect(host.hasAttribute('data-tilt-hover-active')).toBe(true);
+    expect(host.style.transform).toContain('perspective');
+  });
+
+  it('pointerleave clears active', () => {
+    const host = mountHost();
+    connectTrait(tiltHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 50, clientY: 50, bubbles: true }));
+    host.dispatchEvent(new PointerEvent('pointerleave', { bubbles: true }));
+    expect(host.hasAttribute('data-tilt-hover-active')).toBe(false);
+  });
+
+  it('disconnect mid-tilt clears active + transform', () => {
+    const host = mountHost();
+    const inst = connectTrait(tiltHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 50, clientY: 50, bubbles: true }));
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-tilt-hover-active')).toBe(false);
+    expect(host.style.transform).toBe('');
+  });
+});

package/traits/tossable.js

@@ -6,6 +6,8 @@ const MIN_VELOCITY = 0.3;
 
 export const tossable = defineTrait({
   name: 'tossable',
+  category: 'motion-positioning',
+  description: 'Flick with momentum + viewport bounce',
   attributes: ['data-tossable-flying'],
   events: ['toss-end'],
   config: ['data-tossable-bounds'],

package/traits/tossable.test.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { tossable } from './tossable.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+function pointer(host, type, x, y) {
+  host.dispatchEvent(new PointerEvent(type, { clientX: x, clientY: y, pointerId: 1, bubbles: true }));
+}
+
+describe('tossable', () => {
+  beforeEach(resetDOM);
+
+  it('connect attaches without throwing', () => {
+    const host = mountHost();
+    expect(() => connectTrait(tossable, host)).not.toThrow();
+  });
+
+  it('drag sequence completes without throwing + disconnect cleans up', () => {
+    const host = mountHost();
+    const inst = connectTrait(tossable, host);
+    pointer(host, 'pointerdown', 0, 0);
+    pointer(host, 'pointermove', 50, 0);
+    pointer(host, 'pointerup', 50, 0);
+    expect(() => inst.disconnect(host)).not.toThrow();
+    expect(host.hasAttribute('data-tossable-flying')).toBe(false);
+  });
+
+  it('respects data-tossable-bounds config', () => {
+    const host = mountHost('div', { 'data-tossable-bounds': 'parent' });
+    expect(() => connectTrait(tossable, host)).not.toThrow();
+  });
+});

package/traits/typeahead.js

@@ -4,6 +4,8 @@ const BUFFER_TIMEOUT = 500;
 
 export const typeahead = defineTrait({
   name: 'typeahead',
+  category: 'keyboard-navigation',
+  description: 'Incremental search within a collection',
   attributes: ['data-typeahead-match'],
   events: ['typeahead-match'],
   config: [],

package/traits/typeahead.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { typeahead } from './typeahead.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, wait } from './_test-helpers.js';
+
+function child(host, text) {
+  const li = document.createElement('div');
+  li.textContent = text;
+  li.setAttribute('role', 'option');
+  host.appendChild(li);
+  return li;
+}
+
+describe('typeahead', () => {
+  beforeEach(resetDOM);
+
+  it('typing first letter matches a child by textContent', async () => {
+    const host = mountHost();
+    child(host, 'Apple');
+    child(host, 'Banana');
+    child(host, 'Cherry');
+    connectTrait(typeahead, host);
+    const spy = spyEvent(host, 'typeahead-match');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'b' }));
+    await wait(20);
+    expect(spy.count).toBeGreaterThanOrEqual(1);
+    expect(spy.last.element?.textContent).toBe('Banana');
+  });
+
+  it('disconnect removes the keydown listener', () => {
+    const host = mountHost();
+    child(host, 'Apple');
+    const inst = connectTrait(typeahead, host);
+    const spy = spyEvent(host, 'typeahead-match');
+    inst.disconnect(host);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    expect(spy.count).toBe(0);
+  });
+});

package/traits/typewriter.js

@@ -1,13 +1,30 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const typewriter = defineTrait({
   name: 'typewriter',
+  category: 'audio-haptics-sensory',
+  description: 'Animated text reveal character by character',
   attributes: ['data-typewriter-active'],
   events: ['typewriter-done'],
   config: ['data-typewriter-speed'],
   setup({ host }) {
     const speed = parseInt(host.getAttribute('data-typewriter-speed'), 10) || 50;
     const originalText = host.textContent;
+
+    // Reduced-motion: show the full text immediately and fire the done event.
+    if (prefersReducedMotion()) {
+      host.setAttribute('data-typewriter-active', '');
+      queueMicrotask(() => {
+        host.removeAttribute('data-typewriter-active');
+        host.dispatchEvent(new CustomEvent('typewriter-done', { bubbles: true }));
+      });
+      return () => {
+        host.textContent = originalText;
+        host.removeAttribute('data-typewriter-active');
+      };
+    }
+
     let index = 0;
     let timerId = null;
 

package/traits/typewriter.test.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { typewriter } from './typewriter.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, wait } from './_test-helpers.js';
+
+describe('typewriter', () => {
+  beforeEach(resetDOM);
+
+  it('starts with empty content + active attribute on connect', () => {
+    const host = mountHost();
+    host.textContent = 'Hello';
+    connectTrait(typewriter, host, { speed: 5 });
+    host.setAttribute('data-typewriter-speed', '5');
+    // Re-connect after setting speed (setup reads on connect)
+    typewriter().connect(host);
+    expect(host.hasAttribute('data-typewriter-active')).toBe(true);
+  });
+
+  it('reveals full text and fires typewriter-done', async () => {
+    const host = mountHost();
+    host.textContent = 'Hi';
+    host.setAttribute('data-typewriter-speed', '5');
+    const spy = spyEvent(host, 'typewriter-done');
+    typewriter().connect(host);
+    await wait(80);
+    expect(host.textContent).toBe('Hi');
+    expect(spy.count).toBeGreaterThanOrEqual(1);
+  });
+
+  it('disconnect mid-reveal restores original text', async () => {
+    const host = mountHost();
+    host.textContent = 'A long sentence to reveal';
+    host.setAttribute('data-typewriter-speed', '20');
+    const inst = typewriter();
+    inst.connect(host);
+    await wait(40);
+    inst.disconnect(host);
+    expect(host.textContent).toBe('A long sentence to reveal');
+    expect(host.hasAttribute('data-typewriter-active')).toBe(false);
+  });
+
+  it('respects data-typewriter-speed default (50ms)', () => {
+    const host = mountHost();
+    host.textContent = 'X';
+    typewriter().connect(host);
+    expect(host.hasAttribute('data-typewriter-active')).toBe(true);
+  });
+});