@adia-ai/web-components 0.3.2 → 0.3.4

package/README.md

@@ -110,7 +110,7 @@ file using **two-block `@scope`**:
 }
 ```
 
-Authoring rules (enforced by `coherence-audit`):
+Authoring rules (enforced by `ui-audit-coherence`):
 
 1. **No raw colors** in component CSS — every color goes through a token.
 2. **Variants change tokens, modes change layout.** A selector that sets

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/TableToolbar.json",
   "title": "TableToolbar",
-  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi- select (searchable above 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
+  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi- select (searchable when ≥ 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
   "type": "object",
   "allOf": [
     {
@@ -52,7 +52,7 @@
       "default": "Search..."
     },
     "text": {
-      "description": "Title text shown on the left. Alternative to slotted heading content.",
+      "description": "Title text shown on the left.",
       "type": "string",
       "default": ""
     },
@@ -117,9 +117,6 @@
       "popover"
     ],
     "slots": {
-      "default": {
-        "description": "Optional title content. Used when [text] is empty."
-      },
       "actions": {
         "description": "Trailing action area — primary buttons (e.g. \"New row\") rendered after the search input."
       }
@@ -163,30 +160,6 @@
       "--table-toolbar-gap": {
         "description": "Gap between toolbar clusters"
       },
-      "--table-toolbar-popover-bg": {
-        "description": "Popover background"
-      },
-      "--table-toolbar-popover-border": {
-        "description": "Popover border"
-      },
-      "--table-toolbar-popover-fg": {
-        "description": "Popover text color"
-      },
-      "--table-toolbar-popover-gap": {
-        "description": "Popover content gap"
-      },
-      "--table-toolbar-popover-min": {
-        "description": "Popover minimum width"
-      },
-      "--table-toolbar-popover-pad": {
-        "description": "Popover padding"
-      },
-      "--table-toolbar-popover-radius": {
-        "description": "Popover radius"
-      },
-      "--table-toolbar-popover-shadow": {
-        "description": "Popover shadow"
-      },
       "--table-toolbar-px": {
         "description": "Horizontal padding"
       },

package/components/table-toolbar/table-toolbar.css

@@ -22,29 +22,10 @@
     --table-toolbar-search-min:    14rem;
     --table-toolbar-search-max:    22rem;
 
-    /* ── Popover ── */
-    --table-toolbar-popover-bg:           var(--a-canvas);
-    --table-toolbar-popover-fg:           var(--a-canvas-text);
-    --table-toolbar-popover-border:       var(--a-border);
-    --table-toolbar-popover-radius:       var(--a-radius-lg);
-    --table-toolbar-popover-shadow:       var(--a-shadow-lg);
-    --table-toolbar-popover-pad:          var(--a-space-2);
-    --table-toolbar-popover-gap:          var(--a-space-1);
-    --table-toolbar-popover-min:          16rem;
-    --table-toolbar-popover-head-fg:      var(--a-fg-muted);
-    --table-toolbar-popover-head-size:    var(--a-ui-tiny);
-    --table-toolbar-popover-head-pad:     var(--a-space-2);
-    --table-toolbar-popover-row-pad:      var(--a-space-2);
-    --table-toolbar-popover-row-radius:   var(--a-radius-sm);
-    --table-toolbar-popover-row-bg-hover: var(--a-bg-hover);
-    --table-toolbar-popover-input-bg:     var(--a-bg-subtle);
-    --table-toolbar-popover-input-border: var(--a-border-subtle);
-    --table-toolbar-popover-input-radius: var(--a-radius-sm);
-    --table-toolbar-popover-input-py:     var(--a-space-1);
-    --table-toolbar-popover-input-px:     var(--a-space-2);
-    --table-toolbar-popover-input-size:   var(--a-ui-sm);
-    --table-toolbar-popover-action-fg:    var(--a-accent);
-    --table-toolbar-popover-action-size:  var(--a-ui-sm);
+    /* Popover tokens removed — popover escapes to top layer and
+       cannot inherit @scope tokens. Raw --a-* tokens are used
+       directly in the unscoped popover rules below (see comment
+       at the rules block). */
   }
 
   /* ═══════ Base ═══════ */

package/components/table-toolbar/table-toolbar.yaml

@@ -11,7 +11,7 @@ description: >-
   pattern. Drop next to (or above) any table-ui to add the standard data-grid
   toolbar without re-implementing search, filter, sort, or column visibility.
   Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi-
-  select (searchable above 12 options), id-like keys → free-text contains. The
+  select (searchable when ≥ 12 options), id-like keys → free-text contains. The
   column descriptor's `filter` field overrides the auto-detect: `'select'`
   forces multi-select even on high-cardinality columns; `'text'` forces a
   contains input even on small enums.
@@ -22,7 +22,7 @@ props:
     default: ""
     reflect: true
   text:
-    description: Title text shown on the left. Alternative to slotted heading content.
+    description: Title text shown on the left.
     type: string
     default: ""
   count:
@@ -75,8 +75,6 @@ events:
   columns-change:
     description: "Column visibility changed. Detail: { hiddenColumns }."
 slots:
-  default:
-    description: Optional title content. Used when [text] is empty.
   actions:
     description: Trailing action area — primary buttons (e.g. "New row") rendered after the search input.
 states:
@@ -102,22 +100,6 @@ tokens:
     description: Title font size
   --table-toolbar-title-weight:
     description: Title font weight
-  --table-toolbar-popover-bg:
-    description: Popover background
-  --table-toolbar-popover-fg:
-    description: Popover text color
-  --table-toolbar-popover-border:
-    description: Popover border
-  --table-toolbar-popover-radius:
-    description: Popover radius
-  --table-toolbar-popover-shadow:
-    description: Popover shadow
-  --table-toolbar-popover-pad:
-    description: Popover padding
-  --table-toolbar-popover-gap:
-    description: Popover content gap
-  --table-toolbar-popover-min:
-    description: Popover minimum width
 a2ui:
   rules: []
 anti_patterns: []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "exports": {
@@ -48,4 +48,4 @@
     "url": "git+https://github.com/adiahealth/gen-ui-kit.git",
     "directory": "packages/web-components"
   }
-}
+}

package/traits/CATEGORIES.md

@@ -0,0 +1,139 @@
+# AdiaUI Traits — Categories Index
+
+**Auto-generated** from `packages/web-components/traits/_catalog.json`. Run `npm run build:traits` to refresh.
+
+**56 traits across 9 categories.**
+
+Traits are cross-cutting capabilities — orthogonal to the 93 primitives. Any primitive can opt into any trait by adding `data-*` attributes; traits hydrate via `defineTrait()` calls in the trait's `<name>.js`.
+
+## At a glance
+
+| Category | Count | Domain |
+| --- | --- | --- |
+| `animation-feedback` | 7 | Reactive visual feedback to user input or state changes — shake on error, pulse on attention. |
+| `audio-haptics-sensory` | 6 | Non-visual feedback channels — sound, vibration, haptics — used for accessibility and delight. |
+| `forms-data` | 4 | Form-centric behaviors — submission flow, field-level validation, dirty tracking. |
+| `input-interaction` | 7 | Pointer + touch input behaviors — clickability, drag, multi-select, hover affordances. |
+| `interaction-delight` | 3 | Optional flourishes that enhance perceived quality — confetti, sparkles, reveal animations. |
+| `keyboard-navigation` | 8 | Keyboard-first patterns — focus rings, type-ahead, arrow-key roving, shortcut handling. |
+| `layout-measurement` | 6 | Geometry observers — element-resize, intersection, container-query awareness. |
+| `motion-positioning` | 10 | Element positioning + motion — sticky, parallax, snap-scroll, magnetic alignment. |
+| `visual-dynamics` | 5 | Theme-aware visual responses — color shifts, gradient drift, light/dark adaptation. |
+
+## Per-category trait list
+
+### `animation-feedback` (7)
+
+_Reactive visual feedback to user input or state changes — shake on error, pulse on attention._
+
+- **`error-shake`** — Horizontal lateral oscillation on validation failure
+- **`fade-presence`** — Enter/exit fade with lifecycle
+- **`ripple`** — Material-style press ripple effect
+- **`scale-press`** — Subtle scale transform on press
+- **`spring-animate`** — Spring-based motion transitions
+- **`success-checkmark`** — Stroke-draw checkmark on validation success
+- **`tilt-hover`** — Tilt based on pointer position
+
+### `audio-haptics-sensory` (6)
+
+_Non-visual feedback channels — sound, vibration, haptics — used for accessibility and delight._
+
+- **`announcer`** — aria-live mirror for AT — announces host state changes via singleton polite/assertive regions
+- **`attention-pulse`** — Periodic pulse to draw attention
+- **`count-up`** — Animated numeric transitions
+- **`haptic-feedback`** — Vibration API feedback
+- **`sound-feedback`** — Synthesized tones via Web Audio API
+- **`typewriter`** — Animated text reveal character by character
+
+### `forms-data` (4)
+
+_Form-centric behaviors — submission flow, field-level validation, dirty tracking._
+
+- **`dirty-state`** — Tracks modified vs initial value
+- **`input-mask`** — Locale-aware as-you-type formatter (phone, credit-card, date, currency)
+- **`resettable`** — Snaps the host value back to its initial value on form reset
+- **`validation`** — Validation rules: required, minlength, pattern, email
+
+### `input-interaction` (7)
+
+_Pointer + touch input behaviors — clickability, drag, multi-select, hover affordances._
+
+- **`active-state`** — Tracks pointer-down / active interaction state
+- **`droppable`** — Marks an element as a drop target for draggable-list-item; emits dnd-drop-enter / leave / receive
+- **`droppable-collection`** — Coordinates droppable children; re-emits drops as dnd-collection-drop
+- **`focusable`** — Keyboard-only focus ring, ignores pointer focus
+- **`hoverable`** — Pointer hover enter/leave state tracking
+- **`long-press`** — Press-and-hold trigger: fires after configurable duration with progress events
+- **`pressable`** — Normalizes click/tap/keyboard into a single "press" event
+
+### `interaction-delight` (3)
+
+_Optional flourishes that enhance perceived quality — confetti, sparkles, reveal animations._
+
+- **`confetti`** — Radial particle burst on press
+- **`confetti-burst`** — Upward fountain particle burst — fires on each `press` event
+- **`magnetic-hover`** — Element subtly follows cursor
+
+### `keyboard-navigation` (8)
+
+_Keyboard-first patterns — focus rings, type-ahead, arrow-key roving, shortcut handling._
+
+- **`arrow-grid-nav`** — 2D arrow-key navigation for grids, calendars, menubars (APG grid pattern)
+- **`focus-restore`** — Capture previously-focused element on connect, restore focus on disconnect
+- **`focus-trap`** — Traps Tab/Shift+Tab within a container
+- **`hotkey`** — Global or scoped keyboard shortcuts
+- **`keyboard-nav`** — Arrow keys, Enter, Escape — semantic navigation events
+- **`keyboard-reorderable`** — Keyboard alternative to draggable-list-item: arrow keys + Space to lift / drop / Esc to cancel
+- **`roving-tabindex`** — Focus management within composite widgets
+- **`typeahead`** — Incremental search within a collection
+
+### `layout-measurement` (6)
+
+_Geometry observers — element-resize, intersection, container-query awareness._
+
+- **`anchor-positioning`** — Positions relative to an anchor element
+- **`intersection-observer`** — Visibility detection (viewport)
+- **`portal`** — Renders content in a different DOM root
+- **`resize-observer`** — Reacts to element size changes
+- **`scroll-lock`** — Disables background scrolling
+- **`scroll-progress`** — Page or element scroll progress as 0..1 attribute + CSS variable + event
+
+### `motion-positioning` (10)
+
+_Element positioning + motion — sticky, parallax, snap-scroll, magnetic alignment._
+
+- **`drag-ghost`** — Ghost clone at origin during drag
+- **`draggable`** — Pointer drag to reposition
+- **`draggable-list-item`** — Pointer drag for list reordering; emits dnd-lift/drop-target-change/drop/drop-cancel
+- **`drop-target`** — Declarative drop zone: hit-testing, accept-reject, drag-over feedback
+- **`inertia-drag`** — Momentum-based dragging, smooth deceleration
+- **`layout-animation`** — FLIP-style layout transition: animate from old to new bounds without explicit coordinates
+- **`resizable`** — Drag edges/corners to resize
+- **`snap-to-grid`** — Snaps position to configurable grid
+- **`tossable`** — Flick with momentum + viewport bounce
+- **`view-transition`** — Wraps document.startViewTransition() for morph animations between DOM states
+
+### `visual-dynamics` (5)
+
+_Theme-aware visual responses — color shifts, gradient drift, light/dark adaptation._
+
+- **`glow-focus`** — Animated pulsing glow on focus
+- **`gradient-shift`** — Animated rainbow gradient backgrounds
+- **`noise-texture`** — Procedural grain overlay
+- **`parallax`** — Layered motion relative to pointer
+- **`shimmer-loading`** — Skeleton shimmer effect
+
+## See also
+
+- [`docs/specs/traits.md`](../../../docs/specs/traits.md) — trait system architecture
+- [`packages/web-components/traits/<name>/<name>.js`](.) — per-trait source (5 files: `.js .html .examples.html .examples.js .test.js`)
+- [`_catalog.json`](./_catalog.json) — generated catalog (do not hand-edit)
+- [`_api-table.js`](./_api-table.js) — generated API surface (do not hand-edit)
+
+## Authoring a new trait
+
+1. `mkdir packages/web-components/traits/<name>/` (use lowercase + hyphens)
+2. Author 5 files: `<name>.js`, `<name>.html`, `<name>.examples.html`, `<name>.examples.js`, `<name>.test.js`
+3. Pick the most-fitting of the 9 categories above (avoid creating new ones; if you must, document why in the journal)
+4. Run `npm run build:traits` to regenerate `_catalog.json` and `_api-table.js`
+5. Run `npm run verify:traits` — must report 100% coverage