@adia-ai/web-components 0.2.3 → 0.2.5

package/traits/focus-restore.test.js

@@ -0,0 +1,202 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { focusRestore } from './focus-restore.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+
+function focusableTrigger(label = 'Trigger') {
+  const btn = document.createElement('button');
+  btn.textContent = label;
+  document.body.appendChild(btn);
+  return btn;
+}
+
+function focusableChild(host, label = 'child', tag = 'button') {
+  const el = document.createElement(tag);
+  el.textContent = label;
+  if (tag !== 'button') el.setAttribute('tabindex', '0');
+  host.appendChild(el);
+  return el;
+}
+
+describe('focus-restore', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-focus-restore-active', () => {
+    const host = mountHost();
+    connectTrait(focusRestore, host);
+    expect(host.hasAttribute('data-focus-restore-active')).toBe(true);
+  });
+
+  it('disconnect clears data-focus-restore-active', () => {
+    const host = mountHost();
+    const inst = connectTrait(focusRestore, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-focus-restore-active')).toBe(false);
+  });
+
+  it('captures activeElement on connect and restores it on disconnect', () => {
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+    expect(document.activeElement).toBe(trigger);
+
+    const host = mountHost();
+    const inst = connectTrait(focusRestore, host);
+
+    // Some other element steals focus while the surface is open.
+    const distract = focusableTrigger('Distract');
+    distract.focus();
+    expect(document.activeElement).toBe(distract);
+
+    inst.disconnect(host);
+
+    // Focus snaps back to the originally-captured trigger.
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('falls back to body when the captured target is removed from DOM', () => {
+    const trigger = focusableTrigger('Will be removed');
+    trigger.focus();
+
+    const host = mountHost();
+    const inst = connectTrait(focusRestore, host);
+
+    // Trigger gets nuked while the surface is open — common pattern when
+    // the container that opened the modal re-renders.
+    trigger.remove();
+    expect(trigger.isConnected).toBe(false);
+
+    inst.disconnect(host);
+
+    // Restore must not throw. Focus lands on body (or null) — never the
+    // removed trigger. The contract is "don't dangle" not "always lands".
+    expect(document.activeElement).not.toBe(trigger);
+    expect(document.activeElement === document.body || document.activeElement === null).toBe(true);
+  });
+
+  it('falls back when captured target is disabled', () => {
+    const trigger = focusableTrigger('Will be disabled');
+    trigger.focus();
+
+    const host = mountHost();
+    const inst = connectTrait(focusRestore, host);
+
+    // Trigger gets disabled while surface is open.
+    trigger.setAttribute('disabled', '');
+
+    inst.disconnect(host);
+
+    // Disabled element shouldn't receive focus — fallback path engages.
+    expect(document.activeElement).not.toBe(trigger);
+  });
+
+  it('dispatches focus-restored on disconnect with detail.restoredTo + detail.capturedTarget', () => {
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+
+    const host = mountHost();
+    const inst = connectTrait(focusRestore, host);
+    const spy = spyEvent(host, 'focus-restored');
+
+    inst.disconnect(host);
+
+    expect(spy.count).toBe(1);
+    expect(spy.last.capturedTarget).toBe(trigger);
+    expect(spy.last.restoredTo).toBe(trigger);
+  });
+
+  it('data-focus-restore-on-mount="none" (default): does NOT move focus on connect', () => {
+    const trigger = focusableTrigger('Stay focused');
+    trigger.focus();
+
+    const host = mountHost();
+    focusableChild(host, 'inside');
+    connectTrait(focusRestore, host);
+
+    // Default behavior — captures, doesn't move focus.
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('data-focus-restore-on-mount="host": moves focus to the host on connect', () => {
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+
+    const host = mountHost('div', {
+      tabindex: '-1',
+      'data-focus-restore-on-mount': 'host',
+    });
+    connectTrait(focusRestore, host);
+
+    expect(document.activeElement).toBe(host);
+  });
+
+  it('data-focus-restore-on-mount="first-focusable": focuses first tabbable descendant', () => {
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+
+    const host = mountHost('div', {
+      'data-focus-restore-on-mount': 'first-focusable',
+    });
+    const first = focusableChild(host, 'First');
+    focusableChild(host, 'Second');
+    connectTrait(focusRestore, host);
+
+    expect(document.activeElement).toBe(first);
+  });
+
+  it('first-focusable: skips disabled descendants', () => {
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+
+    const host = mountHost('div', {
+      'data-focus-restore-on-mount': 'first-focusable',
+    });
+    const disabled = focusableChild(host, 'Disabled');
+    disabled.setAttribute('disabled', '');
+    const enabled = focusableChild(host, 'Enabled');
+    connectTrait(focusRestore, host);
+
+    expect(document.activeElement).toBe(enabled);
+  });
+
+  it('on-mount captures BEFORE moving focus, so disconnect restores correctly', () => {
+    // Regression guard: the trait must capture activeElement before
+    // its own focus shift, otherwise disconnect would restore to the
+    // host (or first child), not the original trigger.
+    const trigger = focusableTrigger('Open');
+    trigger.focus();
+
+    const host = mountHost('div', {
+      tabindex: '-1',
+      'data-focus-restore-on-mount': 'host',
+    });
+    const inst = connectTrait(focusRestore, host);
+    expect(document.activeElement).toBe(host);
+
+    inst.disconnect(host);
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('connect → disconnect → connect cycle works', () => {
+    const trigger = focusableTrigger('Reusable');
+    trigger.focus();
+
+    const host = mountHost();
+    const inst1 = connectTrait(focusRestore, host);
+    inst1.disconnect(host);
+    expect(document.activeElement).toBe(trigger);
+
+    // Refocus and run again — fresh capture, fresh restore.
+    const trigger2 = focusableTrigger('Different trigger');
+    trigger2.focus();
+    const inst2 = connectTrait(focusRestore, host);
+    inst2.disconnect(host);
+    expect(document.activeElement).toBe(trigger2);
+  });
+
+  it('schema declares the documented contract', () => {
+    expect(focusRestore.schema.name).toBe('focus-restore');
+    expect(focusRestore.schema.category).toBe('keyboard-navigation');
+    expect(focusRestore.schema.attributes).toContain('data-focus-restore-active');
+    expect(focusRestore.schema.events).toContain('focus-restored');
+    expect(focusRestore.schema.config).toContain('data-focus-restore-on-mount');
+  });
+});

package/traits/focus-trap.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { focusTrap } from './focus-trap.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
 
 function focusableChild(host, label) {
   const btn = document.createElement('button');

package/traits/focusable.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { focusable } from './focusable.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 describe('focusable', () => {
   beforeEach(resetDOM);

package/traits/glow-focus.js

@@ -1,5 +1,5 @@
 import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './_motion.js';
+import { prefersReducedMotion } from './motion.js';
 
 export const glowFocus = defineTrait({
   name: 'glow-focus',

package/traits/glow-focus.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { glowFocus } from './glow-focus.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 describe('glow-focus', () => {
   beforeEach(resetDOM);

package/traits/gradient-shift.js

@@ -1,5 +1,5 @@
 import { defineTrait } from './define.js';
-import { prefersReducedMotion } from './_motion.js';
+import { prefersReducedMotion } from './motion.js';
 
 export const gradientShift = defineTrait({
   name: 'gradient-shift',

package/traits/gradient-shift.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { gradientShift } from './gradient-shift.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 describe('gradient-shift', () => {
   beforeEach(resetDOM);

package/traits/haptic-feedback.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import { hapticFeedback } from './haptic-feedback.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 describe('haptic-feedback', () => {
   let originalVibrate;

package/traits/hotkey.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { hotkey } from './hotkey.js';
-import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
 
 describe('hotkey', () => {
   beforeEach(resetDOM);

package/traits/hoverable.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { hoverable } from './hoverable.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 describe('hoverable', () => {
   beforeEach(resetDOM);

package/traits/index.js

@@ -13,6 +13,9 @@ export { pressable } from './pressable.js';
 export { focusable } from './focusable.js';
 export { hoverable } from './hoverable.js';
 export { activeState } from './active-state.js';
+export { longPress } from './long-press.js';
+export { droppable } from './droppable.js';
+export { droppableCollection } from './droppable-collection.js';
 
 // keyboard-navigation
 export { keyboardNav } from './keyboard-nav.js';
@@ -20,11 +23,15 @@ export { rovingTabindex } from './roving-tabindex.js';
 export { typeahead } from './typeahead.js';
 export { hotkey } from './hotkey.js';
 export { focusTrap } from './focus-trap.js';
+export { focusRestore } from './focus-restore.js';
+export { arrowGridNav } from './arrow-grid-nav.js';
+export { keyboardReorderable } from './keyboard-reorderable.js';
 
 // forms-data
 export { validation } from './validation.js';
 export { dirtyState } from './dirty-state.js';
 export { resettable } from './resettable.js';
+export { inputMask } from './input-mask.js';
 
 // layout-measurement
 export { resizeObserver } from './resize-observer.js';
@@ -32,6 +39,7 @@ export { intersectionObserver } from './intersection-observer.js';
 export { anchorPositioning } from './anchor-positioning.js';
 export { portal } from './portal.js';
 export { scrollLock } from './scroll-lock.js';
+export { scrollProgress } from './scroll-progress.js';
 
 // motion-positioning
 export { draggable } from './draggable.js';
@@ -40,6 +48,10 @@ export { resizable } from './resizable.js';
 export { inertiaDrag } from './inertia-drag.js';
 export { snapToGrid } from './snap-to-grid.js';
 export { dragGhost } from './drag-ghost.js';
+export { dropTarget } from './drop-target.js';
+export { layoutAnimation } from './layout-animation.js';
+export { viewTransition } from './view-transition.js';
+export { draggableListItem } from './draggable-list-item.js';
 
 // animation-feedback
 export { ripple } from './ripple.js';
@@ -47,6 +59,8 @@ export { springAnimate } from './spring-animate.js';
 export { fadePresence } from './fade-presence.js';
 export { scalePress } from './scale-press.js';
 export { tiltHover } from './tilt-hover.js';
+export { errorShake } from './error-shake.js';
+export { successCheckmark } from './success-checkmark.js';
 
 // visual-dynamics
 export { glowFocus } from './glow-focus.js';
@@ -66,3 +80,4 @@ export { hapticFeedback } from './haptic-feedback.js';
 export { typewriter } from './typewriter.js';
 export { countUp } from './count-up.js';
 export { attentionPulse } from './attention-pulse.js';
+export { announcer } from './announcer.js';

package/traits/inertia-drag.js

@@ -27,7 +27,16 @@ export const inertiaDrag = defineTrait({
     let lastClientY = 0;
 
     function parseTranslate() {
+      // The trait writes to `style.translate` (independent of `transform` in
+      // the modern CSS model). Read translate first so subsequent drags pick
+      // up the current position, then fall back to the transform matrix for
+      // callers that nudged via `transform`.
       const style = getComputedStyle(host);
+      const t = style.translate;
+      if (t && t !== 'none') {
+        const parts = t.split(/\s+/).map(parseFloat);
+        return { x: parts[0] || 0, y: parts[1] || 0 };
+      }
       const matrix = new DOMMatrixReadOnly(style.transform);
       return { x: matrix.m41, y: matrix.m42 };
     }

package/traits/inertia-drag.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { inertiaDrag } from './inertia-drag.js';
-import { mountHost, connectTrait, resetDOM } from './_test-helpers.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 }));