@adia-ai/web-components 0.2.2 → 0.2.4

package/traits/error-shake.js

@@ -0,0 +1,157 @@
+import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './motion.js';
+
+/**
+ * `error-shake` — horizontal lateral oscillation on validation failure.
+ *
+ * The de-facto "wrong password" affordance. Listens for the `validated`
+ * event with `detail.valid === false` (fired by the `validation` trait),
+ * watches the `data-validation-invalid` attribute for false→true
+ * transitions, and supports a programmatic `data-error-shake-trigger`
+ * attribute toggle so non-form contexts can fire shakes too.
+ *
+ * Composes naturally with `validation`:
+ *   <input-ui traits="validation error-shake" data-validate="required, email">
+ *
+ * On trigger, the host shakes for ~400ms via a translateX-only keyframe
+ * animation — never `margin`/`width`, so siblings don't reflow. The
+ * keyframes run on the compositor and the keyframe `<style>` is owned
+ * by the trait instance (not shared) so disconnect is clean.
+ *
+ * Reduced-motion: skip the animation entirely, but still mark
+ * `data-error-shake-active` for 200ms before removing — gives consumer
+ * stylesheets a CSS hook to swap in a static error-tint or border
+ * without re-querying the media query themselves.
+ */
+
+const DEFAULT_AMPLITUDE = 8;     // px lateral travel
+const DEFAULT_DURATION = 400;    // ms total
+const REDUCED_MOTION_HOLD = 200; // ms — how long the marker sits in reduced-motion mode
+
+export const errorShake = defineTrait({
+  name: 'error-shake',
+  category: 'animation-feedback',
+  description: 'Horizontal lateral oscillation on validation failure',
+  attributes: ['data-error-shake-active'],
+  events: ['error-shake-done'],
+  config: ['data-error-shake-amplitude', 'data-error-shake-duration', 'data-error-shake-trigger'],
+  setup({ host }) {
+    const activeTimers = new Set();
+    let styleEl = null;
+    let keyframeName = null;
+    let lastInvalid = host.hasAttribute('data-validation-invalid');
+
+    function readAmplitude() {
+      const v = parseFloat(host.getAttribute('data-error-shake-amplitude'));
+      return Number.isFinite(v) && v > 0 ? v : DEFAULT_AMPLITUDE;
+    }
+
+    function readDuration() {
+      const v = parseInt(host.getAttribute('data-error-shake-duration'), 10);
+      return Number.isFinite(v) && v > 0 ? v : DEFAULT_DURATION;
+    }
+
+    function ensureKeyframes(amp) {
+      if (styleEl) styleEl.remove();
+      keyframeName = `adia-error-shake-${Math.random().toString(36).slice(2, 8)}`;
+      styleEl = document.createElement('style');
+      // 4-cycle oscillation. translateX only — never margin/width — so
+      // the host's siblings don't reflow during the shake.
+      styleEl.textContent = `
+        @keyframes ${keyframeName} {
+          0%, 100% { transform: translateX(0); }
+          15% { transform: translateX(-${amp}px); }
+          30% { transform: translateX(${amp}px); }
+          45% { transform: translateX(-${amp * 0.7}px); }
+          60% { transform: translateX(${amp * 0.7}px); }
+          75% { transform: translateX(-${amp * 0.4}px); }
+          90% { transform: translateX(${amp * 0.4}px); }
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
+
+    function fireDone() {
+      host.removeAttribute('data-error-shake-active');
+      host.dispatchEvent(new CustomEvent('error-shake-done', { bubbles: true }));
+    }
+
+    function reducedMotionShake() {
+      host.setAttribute('data-error-shake-active', '');
+      const t = setTimeout(() => {
+        activeTimers.delete(t);
+        fireDone();
+      }, REDUCED_MOTION_HOLD);
+      activeTimers.add(t);
+    }
+
+    function shake() {
+      if (prefersReducedMotion()) {
+        reducedMotionShake();
+        return;
+      }
+
+      const amp = readAmplitude();
+      const dur = readDuration();
+      ensureKeyframes(amp);
+
+      // Force-reset any in-flight animation so back-to-back triggers
+      // restart cleanly (e.g. user mashes submit on an invalid form).
+      host.style.animation = '';
+      // Reading offsetWidth flushes the style change — the next assignment
+      // is then guaranteed to be seen as a transition by the engine.
+      void host.offsetWidth;
+      host.style.animation = `${keyframeName} ${dur}ms ease-in-out`;
+      host.setAttribute('data-error-shake-active', '');
+
+      const t = setTimeout(() => {
+        activeTimers.delete(t);
+        host.style.animation = '';
+        fireDone();
+      }, dur);
+      activeTimers.add(t);
+    }
+
+    function onValidated(e) {
+      if (e?.detail && e.detail.valid === false) shake();
+    }
+
+    // Watch data-validation-invalid + data-error-shake-trigger for
+    // attribute changes. validation trait sets data-validation-invalid
+    // synchronously *before* dispatching `validated`, so the observer
+    // and event listener can both fire — we de-dupe by tracking the
+    // last-known invalid state and only triggering on false → true.
+    const observer = new MutationObserver((muts) => {
+      for (const m of muts) {
+        if (m.attributeName === 'data-validation-invalid') {
+          const nowInvalid = host.hasAttribute('data-validation-invalid');
+          if (nowInvalid && !lastInvalid) shake();
+          lastInvalid = nowInvalid;
+        } else if (m.attributeName === 'data-error-shake-trigger') {
+          // Toggle (any change) fires a shake. Empty-string and "" are
+          // both treated as "present" — the convention for boolean attrs.
+          if (host.hasAttribute('data-error-shake-trigger')) shake();
+        }
+      }
+    });
+    observer.observe(host, {
+      attributes: true,
+      attributeFilter: ['data-validation-invalid', 'data-error-shake-trigger'],
+    });
+
+    host.addEventListener('validated', onValidated);
+
+    return () => {
+      observer.disconnect();
+      host.removeEventListener('validated', onValidated);
+      for (const t of activeTimers) clearTimeout(t);
+      activeTimers.clear();
+      if (styleEl) {
+        styleEl.remove();
+        styleEl = null;
+      }
+      host.style.animation = '';
+      host.removeAttribute('data-error-shake-active');
+    };
+  },
+});

package/traits/error-shake.test.js

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { errorShake } from './error-shake.js';
+import { mountHost, connectTrait, spyEvent, resetDOM, wait } from './test-helpers.js';
+
+describe('error-shake', () => {
+  beforeEach(resetDOM);
+
+  it('schema declares animation-feedback category', () => {
+    expect(errorShake.schema.category).toBe('animation-feedback');
+    expect(errorShake.schema.events).toContain('error-shake-done');
+    expect(errorShake.schema.attributes).toContain('data-error-shake-active');
+  });
+
+  it('connect → disconnect leaves no managed attribute', () => {
+    const host = mountHost();
+    const inst = connectTrait(errorShake, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-error-shake-active')).toBe(false);
+  });
+
+  it('fires on validated event with detail.valid === false', async () => {
+    const host = mountHost();
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    host.dispatchEvent(new CustomEvent('validated', {
+      detail: { valid: false, errors: ['nope'] },
+    }));
+
+    expect(host.hasAttribute('data-error-shake-active')).toBe(true);
+    // Wait through the default 400ms duration + a small grace window.
+    await wait(450);
+    expect(spy.count).toBe(1);
+    expect(host.hasAttribute('data-error-shake-active')).toBe(false);
+  });
+
+  it('does not fire on validated event with detail.valid === true', async () => {
+    const host = mountHost();
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    host.dispatchEvent(new CustomEvent('validated', {
+      detail: { valid: true, errors: [] },
+    }));
+
+    await wait(50);
+    expect(spy.count).toBe(0);
+    expect(host.hasAttribute('data-error-shake-active')).toBe(false);
+  });
+
+  it('fires when data-validation-invalid is set (false → true)', async () => {
+    const host = mountHost();
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    host.setAttribute('data-validation-invalid', '');
+    // MutationObserver microtask flush.
+    await wait(0);
+    expect(host.hasAttribute('data-error-shake-active')).toBe(true);
+    await wait(450);
+    expect(spy.count).toBe(1);
+  });
+
+  it('does not re-fire when data-validation-invalid stays true across mutations', async () => {
+    const host = mountHost('div', { 'data-validation-invalid': '' });
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    // Re-set the attribute (no false→true edge — it was already true).
+    host.setAttribute('data-validation-invalid', '');
+    await wait(20);
+    expect(spy.count).toBe(0);
+  });
+
+  it('respects data-error-shake-trigger attribute toggle', async () => {
+    const host = mountHost();
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    host.setAttribute('data-error-shake-trigger', '');
+    await wait(0);
+    expect(host.hasAttribute('data-error-shake-active')).toBe(true);
+    await wait(450);
+    expect(spy.count).toBe(1);
+  });
+
+  it('respects data-error-shake-duration config', async () => {
+    const host = mountHost('div', { 'data-error-shake-duration': '100' });
+    connectTrait(errorShake, host);
+    const spy = spyEvent(host, 'error-shake-done');
+
+    host.dispatchEvent(new CustomEvent('validated', {
+      detail: { valid: false, errors: [''] },
+    }));
+
+    // Should resolve in ~100ms, not the default 400ms.
+    await wait(150);
+    expect(spy.count).toBe(1);
+  });
+
+  it('disconnect clears the keyframe <style> from the document', () => {
+    const host = mountHost();
+    const inst = connectTrait(errorShake, host);
+    host.dispatchEvent(new CustomEvent('validated', {
+      detail: { valid: false, errors: [''] },
+    }));
+    const styleCount = document.querySelectorAll('style').length;
+    inst.disconnect(host);
+    // After disconnect the keyframe style should be gone — exact count
+    // depends on what other styles exist, so we just assert non-greater.
+    expect(document.querySelectorAll('style').length).toBeLessThan(styleCount + 1);
+    expect(host.style.animation).toBe('');
+  });
+});

package/traits/fade-presence.test.js

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

package/traits/focus-restore.js

@@ -0,0 +1,135 @@
+import { defineTrait } from './define.js';
+
+/**
+ * `focus-restore` — capture the previously-focused element on connect,
+ * restore focus to it on disconnect.
+ *
+ * The canonical "modal-close returns focus to the trigger" pattern. Pairs
+ * with `focus-trap` (which holds Tab inside a container) + `portal` (which
+ * moves the container into a top-layer root). focus-restore closes the
+ * loop: when the container goes away, focus returns to where the user was
+ * before it appeared.
+ *
+ * Without this trait, modals / dialogs / drawers leave focus dangling on
+ * `<body>` after dismiss — keyboard users have to tab from the start of
+ * the document to get back to the trigger they pressed.
+ *
+ * On connect:
+ *   1. Captures `document.activeElement` as the restore target.
+ *   2. Sets `data-focus-restore-active` on the host.
+ *   3. (Optional) Moves focus per `data-focus-restore-on-mount`:
+ *      - absent / `"none"`: capture only, don't move focus.
+ *      - `"host"`: focus the host itself.
+ *      - `"first-focusable"`: focus the first tabbable descendant.
+ *
+ * On disconnect:
+ *   1. If the captured target is still in the document AND focusable,
+ *      `el.focus({ preventScroll: true })` it.
+ *   2. Otherwise fall back to `<body>` (or the host's parent if body is
+ *      gone for some reason).
+ *   3. Removes `data-focus-restore-active`.
+ *   4. Dispatches `focus-restored` so consumers can observe.
+ */
+
+const FOCUSABLE_SELECTOR =
+  'a[href], [role="button"][tabindex], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]';
+
+function isFocusable(el) {
+  if (!el || !(el instanceof Element)) return false;
+  if (typeof el.focus !== 'function') return false;
+  if (el.hasAttribute('disabled')) return false;
+  // Element must still be connected to the document for focus to land.
+  if (!el.isConnected) return false;
+  return true;
+}
+
+function findFirstFocusable(host) {
+  // Try descendants in document order.
+  const candidates = host.querySelectorAll(FOCUSABLE_SELECTOR);
+  for (const el of candidates) {
+    if (!el.hasAttribute('disabled')) return el;
+  }
+  return null;
+}
+
+export const focusRestore = defineTrait({
+  name: 'focus-restore',
+  category: 'keyboard-navigation',
+  description:
+    'Capture previously-focused element on connect, restore focus on disconnect',
+  attributes: ['data-focus-restore-active'],
+  events: ['focus-restored'],
+  config: ['data-focus-restore-on-mount'],
+  setup({ host }) {
+    // Capture BEFORE we move focus — otherwise step 3 below would set the
+    // restore target to the host (or first-focusable) and the trait would
+    // restore to itself on disconnect, defeating the contract.
+    const restoreTarget = document.activeElement;
+
+    host.setAttribute('data-focus-restore-active', '');
+
+    const onMount = host.getAttribute('data-focus-restore-on-mount') || 'none';
+    if (onMount === 'host') {
+      // Host needs to be focusable for this to land — common pattern is
+      // tabindex="-1" on the dialog container.
+      try {
+        host.focus({ preventScroll: true });
+      } catch {
+        /* host not focusable — silent no-op, matches focus-trap's tolerance */
+      }
+    } else if (onMount === 'first-focusable') {
+      const first = findFirstFocusable(host);
+      if (first) {
+        try {
+          first.focus({ preventScroll: true });
+        } catch {
+          /* swallow — graceful degrade */
+        }
+      }
+    }
+    // onMount === 'none' (or absent / unrecognized): capture only, don't
+    // move focus. Pointer-opened surfaces shouldn't shift focus on mount.
+
+    return () => {
+      host.removeAttribute('data-focus-restore-active');
+
+      let restoredTo = null;
+
+      if (isFocusable(restoreTarget)) {
+        try {
+          restoreTarget.focus({ preventScroll: true });
+          restoredTo = restoreTarget;
+        } catch {
+          /* fall through to fallback */
+        }
+      }
+
+      if (!restoredTo) {
+        // Fallback: focus body (or host's parent if body is somehow gone).
+        const fallback =
+          (document.body && document.body.isConnected ? document.body : null) ||
+          host.parentElement ||
+          null;
+        if (fallback && typeof fallback.focus === 'function') {
+          try {
+            // <body> needs a tabindex to receive .focus() in some engines;
+            // we don't mutate it (no trait should leave document-level
+            // attribute residue). If focus doesn't land, the browser
+            // gracefully drops to no-active — same as the no-trait baseline.
+            fallback.focus({ preventScroll: true });
+            restoredTo = fallback;
+          } catch {
+            /* nothing more we can do — accept the dangle */
+          }
+        }
+      }
+
+      host.dispatchEvent(
+        new CustomEvent('focus-restored', {
+          bubbles: true,
+          detail: { restoredTo, capturedTarget: restoreTarget },
+        }),
+      );
+    };
+  },
+});

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;