@adia-ai/web-components 0.2.3 → 0.2.4

package/components/input/input.js

@@ -120,10 +120,14 @@ class UIInput extends UIFormElement {
   render() {
     if (!this.#textEl) return;
 
+    const text = this.value || '';
+
     if (this.#isNativeInput) {
       this.#textEl.placeholder = this.placeholder;
       this.#textEl.disabled = this.disabled;
       this.#textEl.readOnly = this.readonly;
+      // Sync programmatic value writes (form.reset(), trait assignments).
+      if (this.#textEl.value !== text) this.#textEl.value = text;
     } else {
       this.#textEl.setAttribute('data-placeholder', this.placeholder);
       if (this.disabled || this.readonly) {
@@ -131,6 +135,13 @@ class UIInput extends UIFormElement {
       } else {
         this.#textEl.contentEditable = 'plaintext-only';
       }
+      // Sync programmatic value writes into the contenteditable surface.
+      // Skip when already in sync to avoid clobbering an in-flight edit's
+      // caret position.
+      if (this.#textEl.textContent !== text) {
+        this.#textEl.textContent = text;
+        this.#textEl.toggleAttribute('data-empty', !text);
+      }
     }
 
     if (this.#labelEl) this.#labelEl.textContent = this.label || '';

package/components/list/list.css

@@ -121,6 +121,9 @@
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
     line-height: 1.4;
+    /* Defensive floor: empty list-item-ui (no text/icon/children) collapses
+       to 0 height and disappears. Keep a visible row instead. */
+    min-height: var(--a-space-6);
   }
 
   :scope > [slot="icon"] {
@@ -150,4 +153,22 @@
   :scope > [slot="content"] {
     grid-column: 1 / -1;
   }
+
+  /* ── Active state ──
+     `[data-active]` is the consumer-driven "current item" hook used by
+     keyboard-nav-style demos and any host that owns its own active-index
+     model (separate from list-ui[selectable] / aria-selected). Reuses
+     the accent-muted/accent-strong pair so the two mechanisms paint
+     consistently. No border-radius on the row itself — dividers (when
+     present) span full-width and rounded corners would clash. */
+  :scope[data-active] {
+    background: var(--a-accent-muted);
+    color: var(--a-accent-strong);
+    box-shadow: inset 2px 0 0 var(--a-accent-strong);
+  }
+
+  :scope[data-active] > [slot="icon"],
+  :scope[data-active] > [slot="description"] {
+    color: var(--a-accent-strong);
+  }
 }

package/components/textarea/textarea.js

@@ -55,6 +55,16 @@ class UITextarea extends UIFormElement {
       this.#textEl.contentEditable = 'plaintext-only';
     }
 
+    // Sync programmatic `value` assignments (form.reset(), trait writes,
+    // controlled-input patterns) into the contenteditable surface. Skip
+    // when the surface already matches to avoid clobbering an in-flight
+    // edit's caret.
+    const text = this.value || '';
+    if (this.#textEl.textContent !== text) {
+      this.#textEl.textContent = text;
+      this.#textEl.toggleAttribute('data-empty', !text);
+    }
+
     const label = this.querySelector('[slot="label"]');
     if (label && this.label) label.setAttribute('label', this.label);
 

package/core/icons.js

@@ -212,7 +212,18 @@ const ICON_ALIASES = {
   'phone': 'phone', 'location': 'map-pin', 'calendar': 'calendar-blank',
   'time': 'clock', 'user': 'user', 'users': 'users-three',
   'menu': 'list', 'more': 'dots-three', 'dots-vertical': 'dots-three-vertical', 'filter': 'funnel',
-  'inbox': 'tray', 'text-bold': 'text-b',
+  'inbox': 'tray',
+  'text-bold': 'text-b', 'bold': 'text-b', 'italic': 'text-italic', 'underline': 'text-underline',
+  'reset': 'arrow-counter-clockwise', 'undo': 'arrow-counter-clockwise', 'redo': 'arrow-clockwise',
+  'success-checkmark': 'seal-check', 'circuit': 'circuitry',
+  'contrast': 'circle-half', 'theme': 'circle-half', 'dark-mode': 'moon', 'light-mode': 'sun',
+  'alert-triangle': 'warning', 'alert-octagon': 'warning-octagon', 'alert-diamond': 'warning-diamond',
+  'number': 'hash', 'numbered-list': 'list-numbers', 'numeric': 'hash',
+  // Phosphor uses suffix-circle for these, but consumers reach for the
+  // prefix form ("circle-warning") just as often. Resolve both shapes.
+  'circle-warning': 'warning-circle', 'circle-x': 'x-circle',
+  'circle-check': 'check-circle', 'circle-info': 'info',
+  'circle-question': 'question', 'circle-plus': 'plus-circle', 'circle-minus': 'minus-circle',
   'sort': 'sort-ascending', 'refresh': 'arrow-clockwise', 'download': 'download-simple',
   'upload': 'upload-simple', 'share': 'share-network', 'copy': 'copy-simple',
   'link': 'link-simple', 'external-link': 'arrow-square-out',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/styles/components.css

@@ -83,6 +83,7 @@
 @import "../components/block/block.css";
 @import "../components/text/text.css";
 @import "../components/toggle-group/toggle-group.css";
+@import "../components/demo-toggle/demo-toggle.css";
 @import "../components/richtext/richtext.css";
 @import "../components/stream/stream.css";
 @import "../components/canvas/canvas.css";

package/styles/typography.css

@@ -256,7 +256,7 @@
 
   /* section — h2/h3, major division within content */
   --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-semibold);
+  --a-section-weight: var(--a-weight-normal);
   --a-section-sm: 16px;
   --a-section-md: 17px;
   --a-section-lg: 19px;

package/traits/_catalog.json

@@ -1,7 +1,7 @@
 {
   "generated": "scripts/build/traits-catalog.mjs",
   "note": "Generated from packages/web-components/traits/*.js. Do not hand-edit. Run `node scripts/build/traits-catalog.mjs`.",
-  "count": 41,
+  "count": 56,
   "categories": [
     "animation-feedback",
     "audio-haptics-sensory",
@@ -14,6 +14,22 @@
     "visual-dynamics"
   ],
   "traits": [
+    {
+      "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"
+      ]
+    },
     {
       "name": "fade-presence",
       "category": "animation-feedback",
@@ -61,6 +77,21 @@
         "data-spring-damping"
       ]
     },
+    {
+      "name": "success-checkmark",
+      "category": "animation-feedback",
+      "description": "Stroke-draw checkmark on validation success",
+      "attributes": [
+        "data-success-checkmark-active"
+      ],
+      "events": [
+        "success-checkmark-done"
+      ],
+      "config": [
+        "data-success-checkmark-position",
+        "data-success-checkmark-trigger"
+      ]
+    },
     {
       "name": "tilt-hover",
       "category": "animation-feedback",
@@ -71,6 +102,23 @@
       "events": [],
       "config": []
     },
+    {
+      "name": "announcer",
+      "category": "audio-haptics-sensory",
+      "description": "aria-live mirror for AT — announces host state changes via singleton polite/assertive regions",
+      "attributes": [
+        "data-announcer-active"
+      ],
+      "events": [
+        "announcement-made"
+      ],
+      "config": [
+        "data-announce-on",
+        "data-announce-message",
+        "data-announce-priority",
+        "data-announce-throttle"
+      ]
+    },
     {
       "name": "attention-pulse",
       "category": "audio-haptics-sensory",
@@ -95,7 +143,11 @@
       ],
       "config": [
         "data-count-up-target",
-        "data-count-duration"
+        "data-count-duration",
+        "data-count-prefix",
+        "data-count-suffix",
+        "data-count-decimals",
+        "data-count-locale"
       ]
     },
     {
@@ -147,6 +199,22 @@
       "events": [],
       "config": []
     },
+    {
+      "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"
+      ]
+    },
     {
       "name": "resettable",
       "category": "forms-data",
@@ -185,6 +253,35 @@
       "events": [],
       "config": []
     },
+    {
+      "name": "droppable",
+      "category": "input-interaction",
+      "description": "Marks an element as a drop target for draggable-list-item; emits dnd-drop-enter / leave / receive",
+      "attributes": [
+        "data-droppable-id",
+        "data-droppable-over",
+        "data-droppable-valid"
+      ],
+      "events": [
+        "dnd-drop-enter",
+        "dnd-drop-leave",
+        "dnd-drop-receive"
+      ],
+      "config": []
+    },
+    {
+      "name": "droppable-collection",
+      "category": "input-interaction",
+      "description": "Coordinates droppable children; re-emits drops as dnd-collection-drop",
+      "attributes": [
+        "data-droppable-collection-active",
+        "data-droppable-collection-dragging"
+      ],
+      "events": [
+        "dnd-collection-drop"
+      ],
+      "config": []
+    },
     {
       "name": "focusable",
       "category": "input-interaction",
@@ -205,6 +302,26 @@
       "events": [],
       "config": []
     },
+    {
+      "name": "long-press",
+      "category": "input-interaction",
+      "description": "Press-and-hold trigger: fires after configurable duration with progress events",
+      "attributes": [
+        "data-long-press-active",
+        "data-long-press-progress",
+        "data-long-press-fired"
+      ],
+      "events": [
+        "long-press",
+        "long-press-cancelled",
+        "long-press-progress"
+      ],
+      "config": [
+        "data-long-press-duration",
+        "data-long-press-tolerance",
+        "data-long-press-progress-interval"
+      ]
+    },
     {
       "name": "pressable",
       "category": "input-interaction",
@@ -249,6 +366,39 @@
       "events": [],
       "config": []
     },
+    {
+      "name": "arrow-grid-nav",
+      "category": "keyboard-navigation",
+      "description": "2D arrow-key navigation for grids, calendars, menubars (APG grid pattern)",
+      "attributes": [
+        "data-arrow-grid-nav-active",
+        "data-grid-active-row",
+        "data-grid-active-col"
+      ],
+      "events": [
+        "grid-activate",
+        "grid-edge",
+        "grid-cell-change"
+      ],
+      "config": [
+        "data-grid-columns",
+        "data-grid-mode"
+      ]
+    },
+    {
+      "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"
+      ]
+    },
     {
       "name": "focus-trap",
       "category": "keyboard-navigation",
@@ -291,6 +441,22 @@
       ],
       "config": []
     },
+    {
+      "name": "keyboard-reorderable",
+      "category": "keyboard-navigation",
+      "description": "Keyboard alternative to draggable-list-item: arrow keys + Space to lift / drop / Esc to cancel",
+      "attributes": [
+        "data-keyboard-reorderable-lifting",
+        "data-keyboard-reorderable-id"
+      ],
+      "events": [
+        "dnd-lift",
+        "dnd-drop-target-change",
+        "dnd-drop",
+        "dnd-drop-cancel"
+      ],
+      "config": []
+    },
     {
       "name": "roving-tabindex",
       "category": "keyboard-navigation",
@@ -317,7 +483,8 @@
       "description": "Positions relative to an anchor element",
       "attributes": [
         "data-anchor-positioning-placed",
-        "data-anchor-placement-actual"
+        "data-anchor-placement-actual",
+        "data-anchor-mode"
       ],
       "events": [
         "anchor-placed"
@@ -380,6 +547,22 @@
       "events": [],
       "config": []
     },
+    {
+      "name": "scroll-progress",
+      "category": "layout-measurement",
+      "description": "Page or element scroll progress as 0..1 attribute + CSS variable + event",
+      "attributes": [
+        "data-scroll-progress-active",
+        "data-scroll-progress"
+      ],
+      "events": [
+        "scroll-progress"
+      ],
+      "config": [
+        "data-scroll-progress-mode",
+        "data-scroll-container"
+      ]
+    },
     {
       "name": "drag-ghost",
       "category": "motion-positioning",
@@ -402,6 +585,41 @@
       ],
       "config": []
     },
+    {
+      "name": "draggable-list-item",
+      "category": "motion-positioning",
+      "description": "Pointer drag for list reordering; emits dnd-lift/drop-target-change/drop/drop-cancel",
+      "attributes": [
+        "data-draggable-list-item-lifting",
+        "data-draggable-list-item-id"
+      ],
+      "events": [
+        "dnd-lift",
+        "dnd-drop-target-change",
+        "dnd-drop",
+        "dnd-drop-cancel"
+      ],
+      "config": []
+    },
+    {
+      "name": "drop-target",
+      "category": "motion-positioning",
+      "description": "Declarative drop zone: hit-testing, accept-reject, drag-over feedback",
+      "attributes": [
+        "data-drop-target-active",
+        "data-drop-target-over",
+        "data-drop-target-rejected"
+      ],
+      "events": [
+        "drop-enter",
+        "drop-leave",
+        "drop-receive",
+        "drop-rejected"
+      ],
+      "config": [
+        "data-drop-target-accepts"
+      ]
+    },
     {
       "name": "inertia-drag",
       "category": "motion-positioning",
@@ -414,6 +632,22 @@
       ],
       "config": []
     },
+    {
+      "name": "layout-animation",
+      "category": "motion-positioning",
+      "description": "FLIP-style layout transition: animate from old to new bounds without explicit coordinates",
+      "attributes": [
+        "data-layout-animation-active"
+      ],
+      "events": [
+        "layout-animation-done"
+      ],
+      "config": [
+        "data-layout-animate-duration",
+        "data-layout-animate-easing",
+        "data-layout-animate-trigger"
+      ]
+    },
     {
       "name": "resizable",
       "category": "motion-positioning",
@@ -453,6 +687,23 @@
         "data-tossable-bounds"
       ]
     },
+    {
+      "name": "view-transition",
+      "category": "motion-positioning",
+      "description": "Wraps document.startViewTransition() for morph animations between DOM states",
+      "attributes": [
+        "data-view-transition-active"
+      ],
+      "events": [
+        "view-transition-start",
+        "view-transition-end"
+      ],
+      "config": [
+        "data-view-transition-name",
+        "data-view-transition-duration",
+        "data-view-transition-easing"
+      ]
+    },
     {
       "name": "glow-focus",
       "category": "visual-dynamics",
@@ -481,7 +732,9 @@
         "data-noise-texture-active"
       ],
       "events": [],
-      "config": []
+      "config": [
+        "data-noise-strength"
+      ]
     },
     {
       "name": "parallax",

package/traits/active-state.test.js

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