@adia-ai/web-components 0.2.2 → 0.2.4

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 }));

package/traits/input-mask.js

@@ -0,0 +1,328 @@
+import { defineTrait } from './define.js';
+
+/**
+ * Built-in named patterns. User-supplied patterns override these.
+ *
+ * `#` matches a digit, `A` matches a letter, `*` matches any character.
+ * Anything else is a literal mask character that gets injected into the
+ * formatted output as the user types past it.
+ */
+const NAMED_PATTERNS = {
+  'phone-us':    '(###) ###-####',
+  'phone-intl':  '+## ### ### ####',
+  'credit-card': '#### #### #### ####',
+  'date-iso':    '####-##-##',
+  'time-24h':    '##:##',
+  'cvv':         '####',
+};
+
+/**
+ * Test whether `c` satisfies the placeholder `slot` (`#`, `A`, `*`).
+ * Anything else in the pattern is treated as a literal — never a slot.
+ */
+function matchesSlot(slot, c) {
+  if (slot === '#') return /\d/.test(c);
+  if (slot === 'A') return /[A-Za-z]/.test(c);
+  if (slot === '*') return c.length === 1;
+  return false;
+}
+
+function isPlaceholder(ch) {
+  return ch === '#' || ch === 'A' || ch === '*';
+}
+
+/**
+ * Resolve the user's `data-mask-pattern` attribute into a literal pattern
+ * string. Named shortcuts (`credit-card`, `phone-us`, …) expand to their
+ * literal form; everything else is taken verbatim.
+ */
+function resolvePattern(value) {
+  if (!value) return '';
+  if (Object.prototype.hasOwnProperty.call(NAMED_PATTERNS, value)) {
+    return NAMED_PATTERNS[value];
+  }
+  return value;
+}
+
+/**
+ * Walk `raw` (the user-entered chars, mask literals already stripped) and
+ * apply `pattern` slot-by-slot. Stops emitting once we run out of raw
+ * input — the trailing literals don't get echoed until the next real
+ * char arrives, otherwise the cursor would land *after* a separator on
+ * every keystroke ("(415"  → "(415) ", caret at end is awkward).
+ *
+ * Returns `{ formatted, complete, consumed }` where `complete` is true
+ * when every placeholder slot was filled and `consumed` is the count of
+ * raw chars actually placed (`raw` may contain more chars than the
+ * pattern can hold — for cvv:`####`, raw="12345" → consumed=4).
+ */
+function applyPattern(raw, pattern) {
+  let out = '';
+  let i = 0;
+  let p = 0;
+  let placeholderSlots = 0;
+  let placeholderFilled = 0;
+
+  for (let k = 0; k < pattern.length; k++) {
+    if (isPlaceholder(pattern[k])) placeholderSlots++;
+  }
+
+  while (p < pattern.length && i < raw.length) {
+    const slot = pattern[p];
+    if (isPlaceholder(slot)) {
+      const c = raw[i];
+      if (matchesSlot(slot, c)) {
+        out += c;
+        placeholderFilled++;
+        i++;
+        p++;
+      } else {
+        // Skip a non-matching raw char (digit-only mask + user typed a
+        // letter). Do not advance `p` — keep looking for a valid char.
+        i++;
+      }
+    } else {
+      out += slot;
+      p++;
+    }
+  }
+
+  return {
+    formatted: out,
+    complete: placeholderSlots > 0 && placeholderFilled === placeholderSlots,
+    consumed: i,
+  };
+}
+
+/**
+ * Strip every literal mask char from `formatted` to recover the raw
+ * sequence the user typed (just placeholder chars). The pattern is the
+ * authority on which positions are literals — we walk both strings in
+ * lockstep and copy only chars that landed in placeholder slots.
+ *
+ * Once the pattern is exhausted, any remaining chars in `formatted` are
+ * treated as raw input the user typed past the mask boundary — they get
+ * captured so a subsequent re-format can decide whether to drop them
+ * (over-budget for a fixed-width mask like cvv) or keep them.
+ */
+function stripPattern(formatted, pattern) {
+  let raw = '';
+  let p = 0;
+  let i = 0;
+  for (; i < formatted.length && p < pattern.length; i++) {
+    const slot = pattern[p];
+    const c = formatted[i];
+    if (isPlaceholder(slot)) {
+      raw += c;
+      p++;
+    } else if (slot === c) {
+      // mask literal lined up — skip in raw, advance pattern
+      p++;
+    } else {
+      // Diverged from pattern (user typed a literal that wasn't there).
+      // Best-effort: keep raw char anyway so subsequent reformatting
+      // doesn't drop user input on the floor.
+      raw += c;
+    }
+  }
+  // Trailing chars past the pattern's reach — user's raw input that
+  // hasn't been mapped onto a slot yet. Keep them; applyPattern will
+  // decide whether the mask has room for them.
+  if (i < formatted.length) {
+    raw += formatted.slice(i);
+  }
+  return raw;
+}
+
+/**
+ * Count "real" (user-entered, non-mask) characters before the given
+ * cursor position in `formatted`. Used to translate the cursor from
+ * the pre-write value into the post-write value, keeping it anchored
+ * to the same character the user just touched.
+ *
+ * Handles three cases at each position:
+ * - Pattern slot is a placeholder → count this char as real.
+ * - Pattern literal aligns with the char → it's a mask separator, skip.
+ * - Pattern literal does NOT align → user is typing the unformatted
+ *   raw value (first input), so count it as real.
+ */
+function realCharsBefore(formatted, pattern, caret) {
+  let count = 0;
+  let p = 0;
+  const limit = Math.min(caret, formatted.length);
+  for (let i = 0; i < limit; i++) {
+    const c = formatted[i];
+    if (p < pattern.length) {
+      const slot = pattern[p];
+      if (isPlaceholder(slot)) {
+        count++;
+        p++;
+        continue;
+      }
+      if (slot === c) {
+        // Mask literal — skip without counting.
+        p++;
+        continue;
+      }
+    }
+    // Either pattern is exhausted or the literal doesn't align: this
+    // char is raw input the user typed.
+    count++;
+  }
+  return count;
+}
+
+/**
+ * Find the position in `formatted` after `n` placeholder slots have been
+ * filled. The mirror of `realCharsBefore` — used to set the caret on the
+ * post-write string.
+ */
+function positionAfterRealChars(formatted, pattern, n) {
+  if (n <= 0) return 0;
+  let count = 0;
+  let p = 0;
+  for (let i = 0; i < formatted.length && p < pattern.length; i++) {
+    const slot = pattern[p];
+    if (isPlaceholder(slot)) {
+      count++;
+      p++;
+      if (count === n) return i + 1;
+    } else {
+      p++;
+    }
+  }
+  return formatted.length;
+}
+
+export const inputMask = defineTrait({
+  name: 'input-mask',
+  category: 'forms-data',
+  description: 'Locale-aware as-you-type formatter (phone, credit-card, date, currency)',
+  attributes: ['data-input-mask-active', 'data-input-mask-complete'],
+  events: ['mask-commit'],
+  config: ['data-mask-pattern', 'data-mask-strip-on-commit'],
+  setup({ host }) {
+    function readPattern() {
+      return resolvePattern(host.getAttribute('data-mask-pattern') || '');
+    }
+
+    function readValue() {
+      return host.value ?? host.getAttribute('value') ?? '';
+    }
+
+    function writeValue(value) {
+      // Assigning `host.value` works for native <input> and any UIElement
+      // that reflects a `value` property; fall back to setAttribute
+      // otherwise. We don't dispatch a synthetic input event — the
+      // trait must not feed itself.
+      if ('value' in host) {
+        host.value = value;
+      } else {
+        host.setAttribute('value', value);
+      }
+    }
+
+    function findInternalInput() {
+      // For <input-ui> and similar AdiaUI form primitives, the real
+      // contenteditable surface is a nested <input>. Use it for caret
+      // selection when present.
+      if (host.tagName === 'INPUT' || host.tagName === 'TEXTAREA') return host;
+      const inner = host.querySelector?.('input, textarea');
+      return inner || null;
+    }
+
+    function getCaret() {
+      const target = findInternalInput();
+      if (!target) return null;
+      try {
+        if (target.selectionStart != null) return target.selectionStart;
+      } catch {
+        // Some input types (number, email) throw on selectionStart access.
+        return null;
+      }
+      return null;
+    }
+
+    function setCaret(pos) {
+      const target = findInternalInput();
+      if (!target) return;
+      try {
+        target.setSelectionRange(pos, pos);
+      } catch {
+        // Same input-type throw class as getCaret — silently bail.
+      }
+    }
+
+    function reformat() {
+      const pattern = readPattern();
+      if (!pattern) {
+        host.removeAttribute('data-input-mask-active');
+        host.removeAttribute('data-input-mask-complete');
+        return;
+      }
+
+      const before = readValue();
+      const beforeCaret = getCaret();
+
+      // Recover the raw input by stripping the current pattern, then
+      // reapply it. This handles mid-string edits: the user inserted a
+      // digit at position 3 of "(415) 555-1234" → strip → reapply.
+      const raw = stripPattern(before, pattern);
+      const realBeforeCaret = beforeCaret == null
+        ? raw.length
+        : realCharsBefore(before, pattern, beforeCaret);
+
+      const { formatted, complete } = applyPattern(raw, pattern);
+
+      host.setAttribute('data-input-mask-active', '');
+      if (complete) host.setAttribute('data-input-mask-complete', '');
+      else host.removeAttribute('data-input-mask-complete');
+
+      // Only write back if the formatted value actually differs — this
+      // lets the trait coexist with other input listeners without
+      // double-firing.
+      if (formatted !== before) {
+        writeValue(formatted);
+        if (beforeCaret != null) {
+          const newPos = positionAfterRealChars(formatted, pattern, realBeforeCaret);
+          // Defer caret-set: writing to host.value can move the caret to
+          // the end on some browsers; we need to clobber that move.
+          queueMicrotask(() => setCaret(newPos));
+        }
+      }
+    }
+
+    function commit() {
+      const pattern = readPattern();
+      if (!pattern) return;
+      const formatted = readValue();
+      const raw = stripPattern(formatted, pattern);
+      const stripOnCommit = host.hasAttribute('data-mask-strip-on-commit');
+
+      if (stripOnCommit && raw !== formatted) {
+        writeValue(raw);
+      }
+
+      host.dispatchEvent(new CustomEvent('mask-commit', {
+        bubbles: true,
+        detail: { raw, formatted },
+      }));
+    }
+
+    function onInput() { reformat(); }
+    function onBlur()  { commit(); }
+
+    host.addEventListener('input', onInput);
+    host.addEventListener('blur', onBlur);
+
+    // Format any initial value on connect — covers SSR + pre-filled forms.
+    reformat();
+
+    return () => {
+      host.removeEventListener('input', onInput);
+      host.removeEventListener('blur', onBlur);
+      host.removeAttribute('data-input-mask-active');
+      host.removeAttribute('data-input-mask-complete');
+    };
+  },
+});

package/traits/input-mask.test.js

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { inputMask } from './input-mask.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
+
+/**
+ * Drive an `input` event with a new value and a caret-position guess.
+ * Mirrors what a real browser dispatches when the user types.
+ */
+function type(host, value, caret) {
+  host.value = value;
+  if (caret != null) {
+    try { host.setSelectionRange(caret, caret); } catch { /* number-typed inputs throw */ }
+  }
+  host.dispatchEvent(new Event('input'));
+}
+
+/**
+ * Microtask-flush helper — caret writes are queued via queueMicrotask
+ * so the DOM write doesn't fight the browser's own caret reposition.
+ */
+const flush = () => new Promise(r => queueMicrotask(r));
+
+describe('input-mask', () => {
+  beforeEach(resetDOM);
+
+  it('schema declares forms-data category + the documented surface', () => {
+    expect(inputMask.schema.category).toBe('forms-data');
+    expect(inputMask.schema.attributes).toContain('data-input-mask-active');
+    expect(inputMask.schema.attributes).toContain('data-input-mask-complete');
+    expect(inputMask.schema.events).toContain('mask-commit');
+    expect(inputMask.schema.config).toContain('data-mask-pattern');
+    expect(inputMask.schema.config).toContain('data-mask-strip-on-commit');
+  });
+
+  it('phone-us named pattern: 4155551234 → (415) 555-1234', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'phone-us' });
+    connectTrait(inputMask, host);
+    type(host, '4155551234');
+    expect(host.value).toBe('(415) 555-1234');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+
+  it('credit-card pattern: 16 digits → 4-4-4-4 grouping', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'credit-card' });
+    connectTrait(inputMask, host);
+    type(host, '4111111111111111');
+    expect(host.value).toBe('4111 1111 1111 1111');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+
+  it('partial input does not set complete; full input does', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'date-iso' });
+    connectTrait(inputMask, host);
+    type(host, '2026');
+    expect(host.value).toBe('2026');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(false);
+    type(host, '20260504');
+    expect(host.value).toBe('2026-05-04');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+
+  it('user-supplied pattern overrides any naming collision', () => {
+    // Pure literal pattern — should be taken verbatim, not matched as a name.
+    const host = mountHost('input', { 'data-mask-pattern': 'AAA-####' });
+    connectTrait(inputMask, host);
+    type(host, 'ABC1234');
+    expect(host.value).toBe('ABC-1234');
+  });
+
+  it('rejects placeholder-mismatching chars (digit-only mask drops letters)', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'cvv' });
+    connectTrait(inputMask, host);
+    type(host, '12a3b4');
+    // letters skipped, only the 4 digits land in the 4 # slots
+    expect(host.value).toBe('1234');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+
+  it('caret preservation: typing in the middle keeps the cursor anchored', async () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'phone-us' });
+    connectTrait(inputMask, host);
+    // Seed with 4 digits → "(415) " has 4 fillable slots reached with
+    // 3 area-code digits + 1 exchange digit: "(415) 5".
+    type(host, '4155');
+    expect(host.value).toBe('(415) 5');
+    // Append a 5th digit. The trait should reformat to "(415) 55" and
+    // place the caret at the position after 5 real chars (index 8).
+    type(host, '41555', 8);
+    await flush();
+    expect(host.value).toBe('(415) 55');
+    expect(host.selectionStart).toBe(8);
+  });
+
+  it('mask-commit on blur fires with raw + formatted detail', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'phone-us' });
+    connectTrait(inputMask, host);
+    const spy = spyEvent(host, 'mask-commit');
+    type(host, '4155551234');
+    host.dispatchEvent(new Event('blur'));
+    expect(spy.count).toBe(1);
+    expect(spy.last.formatted).toBe('(415) 555-1234');
+    expect(spy.last.raw).toBe('4155551234');
+  });
+
+  it('strip-on-commit replaces the value with the raw form on blur', () => {
+    const host = mountHost('input', {
+      'data-mask-pattern': 'phone-us',
+      'data-mask-strip-on-commit': '',
+    });
+    connectTrait(inputMask, host);
+    type(host, '4155551234');
+    expect(host.value).toBe('(415) 555-1234');
+    host.dispatchEvent(new Event('blur'));
+    expect(host.value).toBe('4155551234');
+  });
+
+  it('disconnect clears managed attributes', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'phone-us' });
+    const inst = connectTrait(inputMask, host);
+    type(host, '4155551234');
+    expect(host.hasAttribute('data-input-mask-active')).toBe(true);
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-input-mask-active')).toBe(false);
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(false);
+  });
+
+  it('missing pattern is a no-op (value untouched, no active flag)', () => {
+    const host = mountHost('input');
+    connectTrait(inputMask, host);
+    type(host, 'whatever-the-user-types');
+    expect(host.value).toBe('whatever-the-user-types');
+    expect(host.hasAttribute('data-input-mask-active')).toBe(false);
+  });
+
+  it('AAA letter slot only accepts letters (digits skipped)', () => {
+    const host = mountHost('input', { 'data-mask-pattern': 'AAA' });
+    connectTrait(inputMask, host);
+    type(host, 'A1B2C3');
+    expect(host.value).toBe('ABC');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+
+  it('star slot accepts any char', () => {
+    const host = mountHost('input', { 'data-mask-pattern': '***-***' });
+    connectTrait(inputMask, host);
+    type(host, 'aB1xY9');
+    expect(host.value).toBe('aB1-xY9');
+    expect(host.hasAttribute('data-input-mask-complete')).toBe(true);
+  });
+});

package/traits/intersection-observer.test.js

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

package/traits/keyboard-nav.test.js

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