@adia-ai/web-components 0.2.0 → 0.2.2

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

package/traits/validation.js

@@ -74,6 +74,8 @@ function validateValue(value, rules) {
 
 export const validation = defineTrait({
   name: 'validation',
+  category: 'forms-data',
+  description: 'Validation rules: required, minlength, pattern, email',
   attributes: ['data-validation-invalid', 'data-validation-valid', 'data-validation-message'],
   events: ['validated'],
   config: ['data-validate'],

package/traits/validation.test.js

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { validation } from './validation.js';
+import { mountHost, connectTrait, spyEvent, resetDOM } from './_test-helpers.js';
+
+function setValue(host, value) {
+  host.value = value;
+  host.dispatchEvent(new Event('input'));
+}
+
+describe('validation', () => {
+  beforeEach(resetDOM);
+
+  it('required: empty value is invalid', () => {
+    const host = mountHost('input', { 'data-validate': 'required' });
+    connectTrait(validation, host);
+    setValue(host, '');
+    expect(host.hasAttribute('data-validation-invalid')).toBe(true);
+    expect(host.getAttribute('data-validation-message')).toBe('This field is required');
+  });
+
+  it('required: non-empty value is valid', () => {
+    const host = mountHost('input', { 'data-validate': 'required' });
+    connectTrait(validation, host);
+    setValue(host, 'hello');
+    expect(host.hasAttribute('data-validation-valid')).toBe(true);
+    expect(host.hasAttribute('data-validation-invalid')).toBe(false);
+  });
+
+  it('email: rejects malformed input', () => {
+    const host = mountHost('input', { 'data-validate': 'email' });
+    connectTrait(validation, host);
+    setValue(host, 'not-an-email');
+    expect(host.getAttribute('data-validation-message')).toBe('Invalid email address');
+  });
+
+  it('email: accepts well-formed addresses', () => {
+    const host = mountHost('input', { 'data-validate': 'email' });
+    connectTrait(validation, host);
+    setValue(host, 'user@example.com');
+    expect(host.hasAttribute('data-validation-valid')).toBe(true);
+  });
+
+  it('minlength: enforces minimum character count', () => {
+    const host = mountHost('input', { 'data-validate': 'minlength:5' });
+    connectTrait(validation, host);
+    setValue(host, 'hi');
+    expect(host.getAttribute('data-validation-message')).toBe('Minimum length is 5');
+    setValue(host, 'hello!');
+    expect(host.hasAttribute('data-validation-valid')).toBe(true);
+  });
+
+  it('pattern: enforces regex match', () => {
+    const host = mountHost('input', { 'data-validate': 'pattern:^[A-Z]+$' });
+    connectTrait(validation, host);
+    setValue(host, 'lower');
+    expect(host.hasAttribute('data-validation-invalid')).toBe(true);
+    setValue(host, 'UPPER');
+    expect(host.hasAttribute('data-validation-valid')).toBe(true);
+  });
+
+  it('combined rules: required + email both checked', () => {
+    const host = mountHost('input', { 'data-validate': 'required, email' });
+    connectTrait(validation, host);
+    const spy = spyEvent(host, 'validated');
+    setValue(host, '');
+    expect(spy.last.errors).toContain('This field is required');
+    setValue(host, 'bad');
+    expect(spy.last.errors).toContain('Invalid email address');
+    setValue(host, 'ok@example.com');
+    expect(spy.last.valid).toBe(true);
+  });
+
+  it('dispatches "validated" event with detail.valid and detail.errors', () => {
+    const host = mountHost('input', { 'data-validate': 'required' });
+    connectTrait(validation, host);
+    const spy = spyEvent(host, 'validated');
+    setValue(host, '');
+    expect(spy.count).toBe(1);
+    expect(spy.last.valid).toBe(false);
+    expect(spy.last.errors.length).toBe(1);
+  });
+
+  it('disconnect clears all validation attributes', () => {
+    const host = mountHost('input', { 'data-validate': 'required' });
+    const inst = connectTrait(validation, host);
+    setValue(host, '');
+    expect(host.hasAttribute('data-validation-invalid')).toBe(true);
+    inst.disconnect(host);
+    expect(host.hasAttribute('data-validation-invalid')).toBe(false);
+    expect(host.hasAttribute('data-validation-valid')).toBe(false);
+    expect(host.hasAttribute('data-validation-message')).toBe(false);
+  });
+});

package/a2ui/index.js

@@ -1,25 +0,0 @@
-/**
- * DEPRECATED — the `@adia-ai/web-components/a2ui` subpath.
- *
- * The A2UI runtime was extracted into its own package `@adia-ai/a2ui-utils`
- * in 0.0.4. This file is a temporary re-export shim for one release so
- * existing consumers don't break on upgrade. It will be removed in 0.1.0.
- *
- * Migrate:
- *   - import { A2UIRenderer } from '@adia-ai/web-components/a2ui';
- *   + import { A2UIRenderer } from '@adia-ai/a2ui-utils';
- *
- * The declarative `<a2ui-root>` custom element also moved — it now lives
- * in the patterns directory. Import it via:
- *   import '@adia-ai/web-modules/runtime/a2ui-root/a2ui-root.js';
- */
-
-if (typeof console !== 'undefined' && !globalThis.__a2ui_subpath_warned) {
-  globalThis.__a2ui_subpath_warned = true;
-  console.warn(
-    '[@adia-ai/web-components] The `/a2ui` subpath export is deprecated and will be removed in 0.1.0. ' +
-    'Import from `@adia-ai/a2ui-utils` instead.'
-  );
-}
-
-export * from '@adia-ai/a2ui-utils';