@adia-ai/web-components 0.2.0 → 0.2.2

package/traits/index.js

@@ -1,55 +1,68 @@
-// Interaction
+// Trait barrel — categories below mirror the canonical taxonomy in
+// _catalog.json (generated from defineTrait() metadata). When adding a
+// trait, place it under its category header here, then run
+// `npm run build:traits` to refresh the catalog.
+//
+// Side-effect: the <traits-host> wrapper is auto-registered when this
+// barrel is imported, so consumers who use the trait library at all
+// also get raw-HTML declarative composition for free.
+import './traits-host.js';
+
+// input-interaction
 export { pressable } from './pressable.js';
-export { hoverable } from './hoverable.js';
 export { focusable } from './focusable.js';
-export { draggable } from './draggable.js';
-export { resizable } from './resizable.js';
-export { inertiaDrag } from './inertia-drag.js';
-export { tossable } from './tossable.js';
-export { scalePress } from './scale-press.js';
+export { hoverable } from './hoverable.js';
+export { activeState } from './active-state.js';
 
-// Focus & Keyboard
-export { focusTrap } from './focus-trap.js';
+// keyboard-navigation
 export { keyboardNav } from './keyboard-nav.js';
-export { hotkey } from './hotkey.js';
 export { rovingTabindex } from './roving-tabindex.js';
 export { typeahead } from './typeahead.js';
+export { hotkey } from './hotkey.js';
+export { focusTrap } from './focus-trap.js';
 
-// Form
-export { dirtyState } from './dirty-state.js';
+// forms-data
 export { validation } from './validation.js';
+export { dirtyState } from './dirty-state.js';
+export { resettable } from './resettable.js';
 
-// Animation
+// layout-measurement
+export { resizeObserver } from './resize-observer.js';
+export { intersectionObserver } from './intersection-observer.js';
+export { anchorPositioning } from './anchor-positioning.js';
+export { portal } from './portal.js';
+export { scrollLock } from './scroll-lock.js';
+
+// motion-positioning
+export { draggable } from './draggable.js';
+export { tossable } from './tossable.js';
+export { resizable } from './resizable.js';
+export { inertiaDrag } from './inertia-drag.js';
+export { snapToGrid } from './snap-to-grid.js';
+export { dragGhost } from './drag-ghost.js';
+
+// animation-feedback
+export { ripple } from './ripple.js';
+export { springAnimate } from './spring-animate.js';
 export { fadePresence } from './fade-presence.js';
-export { countUp } from './count-up.js';
-export { attentionPulse } from './attention-pulse.js';
+export { scalePress } from './scale-press.js';
+export { tiltHover } from './tilt-hover.js';
+
+// visual-dynamics
 export { glowFocus } from './glow-focus.js';
 export { gradientShift } from './gradient-shift.js';
-export { confetti } from './confetti.js';
-export { confettiBurst } from './confetti-burst.js';
-export { springAnimate } from './spring-animate.js';
+export { parallax } from './parallax.js';
 export { shimmerLoading } from './shimmer-loading.js';
-export { ripple } from './ripple.js';
+export { noiseTexture } from './noise-texture.js';
 
-// Layout & Positioning
-export { anchorPositioning } from './anchor-positioning.js';
-export { portal } from './portal.js';
-export { parallax } from './parallax.js';
+// interaction-delight
 export { magneticHover } from './magnetic-hover.js';
-export { snapToGrid } from './snap-to-grid.js';
-export { scrollLock } from './scroll-lock.js';
-
-// Observer
-export { intersectionObserver } from './intersection-observer.js';
-export { resizeObserver } from './resize-observer.js';
+export { confetti } from './confetti.js';
+export { confettiBurst } from './confetti-burst.js';
 
-// Visual Effect
-export { noiseTexture } from './noise-texture.js';
-export { dragGhost } from './drag-ghost.js';
-export { hapticFeedback } from './haptic-feedback.js';
-export { tiltHover } from './tilt-hover.js';
+// audio-haptics-sensory
 export { soundFeedback } from './sound-feedback.js';
+export { hapticFeedback } from './haptic-feedback.js';
 export { typewriter } from './typewriter.js';
-
-// State
-export { activeState } from './active-state.js';
+export { countUp } from './count-up.js';
+export { attentionPulse } from './attention-pulse.js';

package/traits/inertia-drag.js

@@ -5,6 +5,8 @@ const MIN_VELOCITY = 0.5;
 
 export const inertiaDrag = defineTrait({
   name: 'inertia-drag',
+  category: 'motion-positioning',
+  description: 'Momentum-based dragging, smooth deceleration',
   attributes: ['data-inertia-drag-coasting'],
   events: ['drag-end'],
   config: [],

package/traits/inertia-drag.test.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { inertiaDrag } from './inertia-drag.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('inertia-drag', () => {
+  beforeEach(resetDOM);
+
+  it('connect attaches without throwing', () => {
+    const host = mountHost();
+    expect(() => connectTrait(inertiaDrag, host)).not.toThrow();
+  });
+
+  it('drag sequence does not throw + disconnect cleans up', () => {
+    const host = mountHost();
+    const inst = connectTrait(inertiaDrag, host);
+    pointer(host, 'pointerdown', 0, 0);
+    pointer(host, 'pointermove', 30, 30);
+    pointer(host, 'pointerup', 30, 30);
+    expect(() => inst.disconnect(host)).not.toThrow();
+    expect(host.hasAttribute('data-inertia-drag-coasting')).toBe(false);
+  });
+
+  it('respects [disabled] — pointerdown is a no-op', () => {
+    const host = mountHost('div', { disabled: '' });
+    connectTrait(inertiaDrag, host);
+    pointer(host, 'pointerdown', 0, 0);
+    expect(host.hasAttribute('data-inertia-drag-coasting')).toBe(false);
+  });
+});

package/traits/intersection-observer.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const intersectionObserver = defineTrait({
   name: 'intersection-observer',
+  category: 'layout-measurement',
+  description: 'Visibility detection (viewport)',
   attributes: ['data-intersection-visible', 'data-intersection-ratio'],
   events: ['element-visible', 'element-hidden'],
   config: ['data-intersection-threshold'],

package/traits/intersection-observer.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { intersectionObserver } from './intersection-observer.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('intersection-observer', () => {
+  let originalIO;
+
+  beforeEach(() => {
+    resetDOM();
+    originalIO = globalThis.IntersectionObserver;
+  });
+
+  afterEach(() => {
+    if (originalIO) globalThis.IntersectionObserver = originalIO;
+    else delete globalThis.IntersectionObserver;
+  });
+
+  it('without IntersectionObserver: gracefully no-ops on connect', () => {
+    delete globalThis.IntersectionObserver;
+    const host = mountHost();
+    expect(() => connectTrait(intersectionObserver, host)).not.toThrow();
+  });
+
+  it('with mocked IntersectionObserver: observe() is called on connect', () => {
+    const observe = vi.fn();
+    const ioDisconnect = vi.fn();
+    globalThis.IntersectionObserver = function MockIO() {
+      this.observe = observe;
+      this.disconnect = ioDisconnect;
+      this.unobserve = vi.fn();
+    };
+    const host = mountHost('div', { 'data-intersection-threshold': '0.5' });
+    const inst = connectTrait(intersectionObserver, host);
+    expect(observe).toHaveBeenCalledWith(host);
+    inst.disconnect(host);
+    expect(ioDisconnect).toHaveBeenCalled();
+  });
+});

package/traits/keyboard-nav.js

@@ -13,6 +13,8 @@ const KEY_MAP = {
 
 export const keyboardNav = defineTrait({
   name: 'keyboard-nav',
+  category: 'keyboard-navigation',
+  description: 'Arrow keys, Enter, Escape — semantic navigation events',
   attributes: [],
   events: ['nav-up', 'nav-down', 'nav-left', 'nav-right', 'nav-enter', 'nav-escape', 'nav-home', 'nav-end'],
   config: [],

package/traits/keyboard-nav.test.js

@@ -0,0 +1,41 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { keyboardNav } from './keyboard-nav.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+
+describe('keyboard-nav', () => {
+  beforeEach(resetDOM);
+
+  it.each([
+    ['ArrowUp', 'nav-up'],
+    ['ArrowDown', 'nav-down'],
+    ['ArrowLeft', 'nav-left'],
+    ['ArrowRight', 'nav-right'],
+    ['Enter', 'nav-enter'],
+    ['Escape', 'nav-escape'],
+    ['Home', 'nav-home'],
+    ['End', 'nav-end'],
+  ])('%s keydown fires %s event', (key, eventName) => {
+    const host = mountHost();
+    connectTrait(keyboardNav, host);
+    const spy = spyEvent(host, eventName);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key }));
+    expect(spy.count).toBe(1);
+  });
+
+  it('unrelated key does not fire any nav event', () => {
+    const host = mountHost();
+    connectTrait(keyboardNav, host);
+    const spy = spyEvent(host, 'nav-up');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    expect(spy.count).toBe(0);
+  });
+
+  it('disconnect removes the keydown listener', () => {
+    const host = mountHost();
+    const inst = connectTrait(keyboardNav, host);
+    const spy = spyEvent(host, 'nav-up');
+    inst.disconnect(host);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+    expect(spy.count).toBe(0);
+  });
+});

package/traits/magnetic-hover.js

@@ -1,11 +1,19 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const magneticHover = defineTrait({
   name: 'magnetic-hover',
+  category: 'interaction-delight',
+  description: 'Element subtly follows cursor',
   attributes: ['data-magnetic-hover-active'],
   events: [],
   config: [],
   setup({ host }) {
+    // Reduced-motion: don't track the cursor; element stays put.
+    if (prefersReducedMotion()) {
+      return () => {};
+    }
+
     function onPointerMove(e) {
       const rect = host.getBoundingClientRect();
       const cx = rect.left + rect.width / 2;

package/traits/magnetic-hover.test.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { magneticHover } from './magnetic-hover.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('magnetic-hover', () => {
+  beforeEach(resetDOM);
+
+  it('pointermove sets data-magnetic-hover-active', () => {
+    const host = mountHost();
+    connectTrait(magneticHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 50, clientY: 50, bubbles: true }));
+    expect(host.hasAttribute('data-magnetic-hover-active')).toBe(true);
+  });
+
+  it('pointerleave clears active + resets translate', () => {
+    const host = mountHost();
+    connectTrait(magneticHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 50, clientY: 50, bubbles: true }));
+    host.dispatchEvent(new PointerEvent('pointerleave', { bubbles: true }));
+    expect(host.hasAttribute('data-magnetic-hover-active')).toBe(false);
+  });
+
+  it('disconnect clears all listeners + active state', () => {
+    const host = mountHost();
+    const inst = connectTrait(magneticHover, host);
+    host.dispatchEvent(new PointerEvent('pointermove', { clientX: 0, clientY: 0, bubbles: true }));
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-magnetic-hover-active')).toBe(false);
+  });
+});

package/traits/noise-texture.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const noiseTexture = defineTrait({
   name: 'noise-texture',
+  category: 'visual-dynamics',
+  description: 'Procedural grain overlay',
   attributes: ['data-noise-texture-active'],
   events: [],
   config: [],

package/traits/noise-texture.test.js

@@ -0,0 +1,20 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { noiseTexture } from './noise-texture.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('noise-texture', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-noise-texture-active and appends an overlay', () => {
+    const host = mountHost();
+    connectTrait(noiseTexture, host);
+    expect(host.hasAttribute('data-noise-texture-active')).toBe(true);
+  });
+
+  it('disconnect clears active + removes overlay', () => {
+    const host = mountHost();
+    const inst = connectTrait(noiseTexture, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-noise-texture-active')).toBe(false);
+  });
+});

package/traits/parallax.js

@@ -1,11 +1,20 @@
 import { defineTrait } from './define.js';
+import { prefersReducedMotion } from './_motion.js';
 
 export const parallax = defineTrait({
   name: 'parallax',
+  category: 'visual-dynamics',
+  description: 'Layered motion relative to pointer',
   attributes: ['data-parallax-active'],
   events: [],
   config: ['data-parallax-strength'],
   setup({ host }) {
+    // Reduced-motion: skip the scroll-driven offset; element stays put.
+    if (prefersReducedMotion()) {
+      host.setAttribute('data-parallax-active', '');
+      return () => host.removeAttribute('data-parallax-active');
+    }
+
     const strength = parseFloat(host.getAttribute('data-parallax-strength')) || 0.5;
 
     function getScrollParent(el) {

package/traits/parallax.test.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { parallax } from './parallax.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('parallax', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-parallax-active', () => {
+    const host = mountHost();
+    connectTrait(parallax, host);
+    expect(host.hasAttribute('data-parallax-active')).toBe(true);
+  });
+
+  it('disconnect clears active + translate', () => {
+    const host = mountHost();
+    const inst = connectTrait(parallax, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-parallax-active')).toBe(false);
+    expect(host.style.translate).toBe('');
+  });
+
+  it('respects data-parallax-strength (default 0.5)', () => {
+    const host = mountHost('div', { 'data-parallax-strength': '0.2' });
+    expect(() => connectTrait(parallax, host)).not.toThrow();
+  });
+});

package/traits/portal.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const portal = defineTrait({
   name: 'portal',
+  category: 'layout-measurement',
+  description: 'Renders content in a different DOM root',
   attributes: ['data-portal-active'],
   events: [],
   config: ['data-portal-target'],

package/traits/portal.test.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { portal } from './portal.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('portal', () => {
+  beforeEach(resetDOM);
+
+  it('connect sets data-portal-active', () => {
+    const host = mountHost();
+    connectTrait(portal, host);
+    expect(host.hasAttribute('data-portal-active')).toBe(true);
+  });
+
+  it('disconnect clears the active attribute', () => {
+    const host = mountHost();
+    const inst = connectTrait(portal, host);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-portal-active')).toBe(false);
+  });
+
+  it('with data-portal-target, host is moved to the target element', () => {
+    const target = document.createElement('div');
+    target.id = 'portal-out';
+    document.body.appendChild(target);
+    const host = mountHost('div', { 'data-portal-target': '#portal-out' });
+    connectTrait(portal, host);
+    // The trait moves the host into the target on connect.
+    expect(target.contains(host)).toBe(true);
+  });
+});

package/traits/pressable.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const pressable = defineTrait({
   name: 'pressable',
+  category: 'input-interaction',
+  description: 'Normalizes click/tap/keyboard into a single "press" event',
   attributes: ['data-pressable-pressed'],
   events: ['press'],
   config: [],

package/traits/pressable.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { pressable } from './pressable.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+
+describe('pressable', () => {
+  beforeEach(resetDOM);
+
+  it('sets data-pressable-pressed on pointerdown, removes on pointerup', () => {
+    const host = mountHost();
+    connectTrait(pressable, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(true);
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+  });
+
+  it('dispatches "press" event on pointerup', () => {
+    const host = mountHost();
+    connectTrait(pressable, host);
+    const spy = spyEvent(host, 'press');
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(spy.count).toBe(1);
+  });
+
+  it('dispatches "press" on Enter/Space keyup', () => {
+    const host = mountHost();
+    connectTrait(pressable, host);
+    const spy = spyEvent(host, 'press');
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    host.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+    expect(spy.count).toBe(1);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+    host.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+    expect(spy.count).toBe(2);
+  });
+
+  it('respects [disabled] — no event, no attribute toggle', () => {
+    const host = mountHost('button', { disabled: '' });
+    connectTrait(pressable, host);
+    const spy = spyEvent(host, 'press');
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(spy.count).toBe(0);
+  });
+
+  it('clears pressed state on pointerleave (canceled press)', () => {
+    const host = mountHost();
+    connectTrait(pressable, host);
+    const spy = spyEvent(host, 'press');
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(true);
+    host.dispatchEvent(new PointerEvent('pointerleave'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(spy.count).toBe(0);
+  });
+
+  it('disconnect removes all listeners and clears attribute', () => {
+    const host = mountHost();
+    const inst = connectTrait(pressable, host);
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(true);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+    // Re-firing events post-disconnect is a no-op
+    const spy = spyEvent(host, 'press');
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    host.dispatchEvent(new PointerEvent('pointerup'));
+    expect(spy.count).toBe(0);
+  });
+});

package/traits/resettable.js

@@ -0,0 +1,40 @@
+import { defineTrait } from './define.js';
+
+/**
+ * Listens for the host's enclosing form's `reset` event and snaps the host's
+ * value back to its initial value (captured on connect). Useful when the host
+ * is not a native form-associated control but still wants reset semantics —
+ * filter chips, search inputs, custom date pickers, segmented controls.
+ *
+ * If the host is not inside a form, the trait is a no-op (still registers
+ * the active attribute and returns a clean cleanup).
+ */
+export const resettable = defineTrait({
+  name: 'resettable',
+  category: 'forms-data',
+  description: 'Snaps the host value back to its initial value on form reset',
+  attributes: ['data-resettable-active'],
+  events: ['reset-applied'],
+  config: [],
+  setup({ host }) {
+    const initialValue = host.value ?? host.getAttribute('value') ?? '';
+    const form = host.closest?.('form');
+
+    function onReset() {
+      if ('value' in host) host.value = initialValue;
+      else host.setAttribute('value', initialValue);
+      host.dispatchEvent(new CustomEvent('reset-applied', {
+        bubbles: true,
+        detail: { initialValue },
+      }));
+    }
+
+    host.setAttribute('data-resettable-active', '');
+    form?.addEventListener('reset', onReset);
+
+    return () => {
+      form?.removeEventListener('reset', onReset);
+      host.removeAttribute('data-resettable-active');
+    };
+  },
+});

package/traits/resettable.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { resettable } from './resettable.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+
+function mountInForm(initialValue = 'initial') {
+  const form = document.createElement('form');
+  document.body.appendChild(form);
+  const host = document.createElement('input');
+  host.value = initialValue;
+  form.appendChild(host);
+  return { form, host };
+}
+
+describe('resettable', () => {
+  beforeEach(resetDOM);
+
+  it('captures initial value on connect; restores it on form reset', () => {
+    const { form, host } = mountInForm('original');
+    connectTrait(resettable, host);
+    host.value = 'modified';
+    form.dispatchEvent(new Event('reset', { bubbles: true }));
+    expect(host.value).toBe('original');
+  });
+
+  it('dispatches reset-applied with the initial value in detail', () => {
+    const { form, host } = mountInForm('hello');
+    connectTrait(resettable, host);
+    const spy = spyEvent(host, 'reset-applied');
+    host.value = 'changed';
+    form.dispatchEvent(new Event('reset', { bubbles: true }));
+    expect(spy.count).toBe(1);
+    expect(spy.last.initialValue).toBe('hello');
+  });
+
+  it('outside a form: no-op (no throw, no listener)', () => {
+    const host = mountHost('input', { value: 'x' });
+    expect(() => connectTrait(resettable, host)).not.toThrow();
+    expect(host.hasAttribute('data-resettable-active')).toBe(true);
+  });
+
+  it('disconnect removes the form listener', () => {
+    const { form, host } = mountInForm('a');
+    const inst = resettable();
+    inst.connect(host);
+    inst.disconnect(host);
+    host.value = 'b';
+    form.dispatchEvent(new Event('reset', { bubbles: true }));
+    // After disconnect, the trait should NOT have reset the value.
+    expect(host.value).toBe('b');
+    expect(host.hasAttribute('data-resettable-active')).toBe(false);
+  });
+
+  it('multiple controls in the same form each reset independently', () => {
+    const form = document.createElement('form');
+    document.body.appendChild(form);
+    const a = document.createElement('input'); a.value = 'A';
+    const b = document.createElement('input'); b.value = 'B';
+    form.appendChild(a); form.appendChild(b);
+    resettable().connect(a);
+    resettable().connect(b);
+    a.value = 'changed-a';
+    b.value = 'changed-b';
+    form.dispatchEvent(new Event('reset', { bubbles: true }));
+    expect(a.value).toBe('A');
+    expect(b.value).toBe('B');
+  });
+});

package/traits/resizable.js

@@ -5,6 +5,8 @@ const EDGES = ['top', 'right', 'bottom', 'left'];
 
 export const resizable = defineTrait({
   name: 'resizable',
+  category: 'motion-positioning',
+  description: 'Drag edges/corners to resize',
   attributes: ['data-resizable-resizing', 'data-resizable-edge'],
   events: ['resize-end'],
   config: [],

package/traits/resizable.test.js

@@ -0,0 +1,20 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { resizable } from './resizable.js';
+import { mountHost, connectTrait, resetDOM } from './_test-helpers.js';
+
+describe('resizable', () => {
+  beforeEach(resetDOM);
+
+  it('connect attaches without throwing', () => {
+    const host = mountHost();
+    expect(() => connectTrait(resizable, host)).not.toThrow();
+  });
+
+  it('disconnect clears resizing state attributes', () => {
+    const host = mountHost();
+    const inst = connectTrait(resizable, host);
+    expect(() => inst.disconnect(host)).not.toThrow();
+    expect(host.hasAttribute('data-resizable-resizing')).toBe(false);
+    expect(host.hasAttribute('data-resizable-edge')).toBe(false);
+  });
+});

package/traits/resize-observer.js

@@ -2,6 +2,8 @@ import { defineTrait } from './define.js';
 
 export const resizeObserver = defineTrait({
   name: 'resize-observer',
+  category: 'layout-measurement',
+  description: 'Reacts to element size changes',
   attributes: ['data-resize-observer-observed', 'data-resize-width', 'data-resize-height'],
   events: ['element-resize'],
   config: [],