@adia-ai/web-components 0.2.1 → 0.2.3

package/README.md

@@ -57,8 +57,11 @@ web-components/
 │  gen-ui, a2ui-root) ship in the sibling `@adia-ai/web-modules`
 │  package as of 0.0.29 — see ADR-0012 for the three-tier rationale.
 │
-├── traits/         — 42 composable behaviors via defineTrait()
-│                     (pressable, focusTrap, confetti, resizable, …)
+├── traits/         — 41 composable behaviors via defineTrait() + the
+│                     <traits-host> wrapper for raw-HTML declarative
+│                     composition. Generated catalog at _catalog.json
+│                     drives the MCP get_traits tool + per-trait demo
+│                     pages. Full contract in docs/specs/traits.md.
 │
 ├── a2ui/           — deprecation shim for one release
 │   └── index.js            Re-exports @adia-ai/a2ui-utils with a

package/components/agent-trace/agent-trace.css

@@ -18,7 +18,11 @@
     --agent-trace-padding-y:     var(--a-space-2);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
     --agent-trace-dot-size:      6px;
-    --agent-trace-row-label-col: 80px;
+    /* STAGE column width — `max-content` lets the longest label set the
+       track so multi-word labels ("Rows returned", "Query duration",
+       "Drift vs. SFDC") stay on one line; the `7rem` floor stops the
+       column from collapsing when only short labels are present. */
+    --agent-trace-row-label-col: minmax(7rem, max-content);
     /* Shared across every detail DL so values tabulate at the same x. */
     --agent-trace-detail-label-col: 9rem;
 
@@ -113,6 +117,17 @@
      right of "7%"'s detail column. Subgrid pulls the track widths up
      to the parent so every row sees the same column stops. */
   [data-trace-rows] {
+    /* Track plan:
+         [STAGE max-content]  ← label column; widened from 80px so multi-word
+                                labels ("Rows returned", "Query duration",
+                                "Drift vs. SFDC") stay on one line
+         [SCORE max-content]  ← value column, right-aligned
+         [DETAIL 1fr]         ← detail column, right-aligned content
+       The DETAIL column still takes the leftover width, but its text is
+       right-anchored ([data-trace-aux] { text-align: end }) so the
+       previously-empty right edge becomes the alignment edge for detail
+       text. The whitespace between SCORE and DETAIL reads as breathing
+       room between key-value and qualifier rather than dead air. */
     --trace-row-cols: var(--agent-trace-row-label-col) max-content 1fr;
     display: grid;
     grid-template-columns: var(--trace-row-cols);
@@ -157,8 +172,9 @@
     color: var(--agent-trace-fg-subtle);
   }
 
-  [data-trace-header]:nth-of-type(2) {
-    text-align: right;
+  [data-trace-header]:nth-of-type(2),
+  [data-trace-header]:nth-of-type(3) {
+    text-align: end;
   }
 
   /* Rows */
@@ -198,10 +214,15 @@
   }
 
   [data-trace-aux] {
+    /* Right-anchor the detail text so it sits flush with the right edge
+       of the row. Without this, the 1fr detail column left-aligns its
+       content (typically a 1-3 word qualifier like "warehouse" or
+       "reconciled") and the rest of the column reads as dead width. */
     color: var(--agent-trace-fg-muted);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: end;
   }
 
   /* Chevron in the trailing column */

package/components/list/list.css

@@ -92,20 +92,62 @@
 @scope (list-item-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --list-item-inset: var(--a-inset);
+    --list-item-inset:      var(--a-inset);
+    --list-item-gap-column: var(--a-space-3);
+    --list-item-gap-row:    var(--a-space-1);
 
     /* ── Colors ── */
     --list-item-text-color: var(--a-fg);
+    --list-item-desc-color: var(--a-fg-muted);
+    --list-item-icon-color: var(--a-fg-muted);
 
     /* ── Typography ── */
-    --list-item-font-size: var(--a-ui-size);
+    --list-item-font-size:      var(--a-ui-size);
+    --list-item-desc-font-size: var(--a-ui-sm);
   }
 
+  /* Anatomy:
+     col 1 = icon (auto width; collapses to 0 when no icon)
+     col 2 = content stack (text on row 1, description on row 2)
+     The icon spans both rows + centers vertically with the stack.
+     `[slot="content"]` (used when consumer provides custom rendering)
+     spans all columns. */
   :scope {
     box-sizing: border-box;
-    display: block;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--list-item-gap-column);
+    row-gap: var(--list-item-gap-row);
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
     line-height: 1.4;
   }
+
+  :scope > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: center;
+    color: var(--list-item-icon-color);
+  }
+
+  :scope > [slot="text"] {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  :scope > [slot="description"] {
+    grid-column: 2;
+    grid-row: 2;
+    color: var(--list-item-desc-color);
+    font-size: var(--list-item-desc-font-size);
+    line-height: 1.3;
+  }
+
+  /* Custom-content escape hatch — consumer authored a [slot="content"]
+     child, the auto-stamp early-returned, and the consumer owns the
+     full body. Span all columns so the consumer's layout isn't boxed
+     into the content column. */
+  :scope > [slot="content"] {
+    grid-column: 1 / -1;
+  }
 }

package/components/nav-group/nav-group.a2ui.json

@@ -42,7 +42,7 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children — matches the prior <section-nav-group-ui>. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group.",
+      "description": "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group.",
       "type": "string",
       "enum": [
         "",

package/components/nav-group/nav-group.css

@@ -264,11 +264,11 @@ nav-group-ui [slot="popover"] [role="option"][aria-selected="true"]::before {
 }
 
 /* ── Section variant — groups render as kicker labels ──
-   The prior <section-nav-group-ui> defaulted to collapsible:false
-   (header was a label, children always visible). The consolidated
-   nav-group-ui defaults collapsible:true (the primary-variant default).
-   Section variant restores the old kicker rendering so subnav rails
-   show all children without an explicit [open] toggle.
+   Primary variant defaults to collapsible:true (caret-toggleable).
+   Section variant flips to collapsible:false-shape — header is a
+   static kicker label, children always visible — so subnav rails
+   show their full structure without requiring an explicit [open]
+   toggle.
 
    Two ways to enable: either
      (a) `<nav-group-ui variant="section">` directly, or

package/components/nav-group/nav-group.yaml

@@ -39,7 +39,7 @@ props:
     type: string
     default: ''
     enum: ['', section]
-    description: "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children — matches the prior <section-nav-group-ui>. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group."
+    description: "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group."
 
 events:
   group-toggle:

package/components/nav-item/nav-item.a2ui.json

@@ -47,7 +47,7 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected — matching the prior <section-nav-item-ui>. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set.",
+      "description": "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set.",
       "type": "string",
       "enum": [
         "",

package/components/nav-item/nav-item.css

@@ -162,10 +162,9 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 }
 
 /* ── Section variant — items render flat (no icon space, no indent) ──
-   The prior <section-nav-item-ui> didn't reserve space for an absent icon
-   and used a left-edge accent bar for the selected state. Restore that
-   shape so subnav rails read as plain links rather than a primary-style
-   row with a hidden icon slot.
+   Section-variant rails read as plain links rather than primary-style
+   rows: no reserved icon space when absent, left-edge accent bar for
+   the selected state instead of an in-icon accent.
 
    Two ways to enable: either
      (a) `<nav-item-ui variant="section">` directly, or

package/components/nav-item/nav-item.yaml

@@ -43,7 +43,7 @@ props:
     type: string
     default: ''
     enum: ['', section]
-    description: "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected — matching the prior <section-nav-item-ui>. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set."
+    description: "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set."
 
 events:
   nav-select:

package/core/icons.js

@@ -224,6 +224,7 @@ const ICON_ALIASES = {
   'attachment': 'paperclip', 'attach': 'paperclip',
   'expand': 'arrows-out', 'collapse': 'arrows-in',
   'fullscreen': 'arrows-out', 'exit-fullscreen': 'arrows-in',
+  'fade': 'gradient', 'fade-presence': 'gradient',
   'notification': 'bell', 'notifications': 'bell',
   'bookmark': 'bookmark-simple', 'favorite': 'heart', 'like': 'heart',
   'comment': 'chat-circle', 'chat': 'chat-circle',

package/package.json

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

package/traits/_catalog.json

@@ -230,7 +230,7 @@
     {
       "name": "confetti-burst",
       "category": "interaction-delight",
-      "description": "Upward fountain particle burst",
+      "description": "Upward fountain particle burst — fires on each `press` event",
       "attributes": [
         "data-confetti-burst-active"
       ],

package/traits/confetti-burst.js

@@ -4,88 +4,114 @@ import { prefersReducedMotion } from './_motion.js';
 export const confettiBurst = defineTrait({
   name: 'confetti-burst',
   category: 'interaction-delight',
-  description: 'Upward fountain particle burst',
+  description: 'Upward fountain particle burst — fires on each `press` event',
   attributes: ['data-confetti-burst-active'],
   events: ['confetti-burst-done'],
   config: [],
   setup({ host }) {
-    // Reduced-motion: skip the burst, fire done event immediately.
-    if (prefersReducedMotion()) {
-      host.setAttribute('data-confetti-burst-active', '');
-      queueMicrotask(() => {
-        host.removeAttribute('data-confetti-burst-active');
-        host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
-      });
-      return () => host.removeAttribute('data-confetti-burst-active');
-    }
+    // Per-burst state — separate from the trait's lifecycle so multiple
+    // presses queue up cleanly. Each `fireBurst()` spawns its own canvas +
+    // raf loop and tears them down 2s later. Listening for `press` lets
+    // declarative usage (`<button-ui traits="confetti-burst">`) fire on
+    // every click; programmatic usage (animation page's
+    // `confettiBurst().connect(el)` per-click) gets the immediate burst
+    // it expects via the on-connect call below.
+    const inflight = new Set();
 
-    const canvas = document.createElement('canvas');
-    canvas.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9999;';
-    host.style.position = host.style.position || 'relative';
-    host.appendChild(canvas);
-
-    const ctx = canvas.getContext('2d');
-    let rafId = null;
-
-    // Bail gracefully when canvas 2D isn't available (SSR, JSDOM, happy-dom).
-    if (!ctx) {
+    function reducedMotionBurst() {
       host.setAttribute('data-confetti-burst-active', '');
-      // Fire the done event on next tick so listeners still hear it.
       queueMicrotask(() => {
         host.removeAttribute('data-confetti-burst-active');
         host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
       });
-      return () => {
-        canvas.remove();
-        host.removeAttribute('data-confetti-burst-active');
-      };
     }
 
-    const colors = ['#f44', '#4a4', '#44f', '#ff4', '#f4f', '#4ff'];
-    const particles = Array.from({ length: 80 }, () => ({
-      x: 0.5,
-      y: 0.5,
-      vx: (Math.random() - 0.5) * 8,
-      vy: (Math.random() - 0.5) * 8 - 2,
-      size: Math.random() * 4 + 2,
-      color: colors[Math.floor(Math.random() * colors.length)],
-      life: 1,
-    }));
+    function fireBurst() {
+      if (prefersReducedMotion()) {
+        reducedMotionBurst();
+        return;
+      }
+
+      const canvas = document.createElement('canvas');
+      canvas.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:9999;';
+      host.style.position = host.style.position || 'relative';
+      host.appendChild(canvas);
 
-    host.setAttribute('data-confetti-burst-active', '');
-    const startTime = performance.now();
+      const ctx = canvas.getContext('2d');
+      let rafId = null;
 
-    function tick(now) {
-      const elapsed = now - startTime;
-      if (elapsed > 2000) {
+      // Bail gracefully when canvas 2D isn't available (SSR, JSDOM, happy-dom).
+      if (!ctx) {
+        host.setAttribute('data-confetti-burst-active', '');
+        queueMicrotask(() => {
+          host.removeAttribute('data-confetti-burst-active');
+          host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
+        });
         canvas.remove();
-        host.removeAttribute('data-confetti-burst-active');
-        host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
         return;
       }
 
-      canvas.width = host.offsetWidth;
-      canvas.height = host.offsetHeight;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const colors = ['#f44', '#4a4', '#44f', '#ff4', '#f4f', '#4ff'];
+      const particles = Array.from({ length: 80 }, () => ({
+        x: 0.5,
+        y: 0.5,
+        vx: (Math.random() - 0.5) * 8,
+        vy: (Math.random() - 0.5) * 8 - 2,
+        size: Math.random() * 4 + 2,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        life: 1,
+      }));
+
+      host.setAttribute('data-confetti-burst-active', '');
+      const startTime = performance.now();
+      const burstHandle = { canvas, cancel: () => { if (rafId) cancelAnimationFrame(rafId); canvas.remove(); } };
+      inflight.add(burstHandle);
+
+      function tick(now) {
+        const elapsed = now - startTime;
+        if (elapsed > 2000) {
+          inflight.delete(burstHandle);
+          canvas.remove();
+          if (inflight.size === 0) host.removeAttribute('data-confetti-burst-active');
+          host.dispatchEvent(new CustomEvent('confetti-burst-done', { bubbles: true }));
+          return;
+        }
+
+        canvas.width = host.offsetWidth;
+        canvas.height = host.offsetHeight;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-      for (const p of particles) {
-        p.x += p.vx * 0.004;
-        p.y += p.vy * 0.004;
-        p.vy += 0.15;
-        p.life = Math.max(0, 1 - elapsed / 2000);
-        ctx.globalAlpha = p.life;
-        ctx.fillStyle = p.color;
-        ctx.fillRect(p.x * canvas.width, p.y * canvas.height, p.size, p.size);
+        for (const p of particles) {
+          p.x += p.vx * 0.004;
+          p.y += p.vy * 0.004;
+          p.vy += 0.15;
+          p.life = Math.max(0, 1 - elapsed / 2000);
+          ctx.globalAlpha = p.life;
+          ctx.fillStyle = p.color;
+          ctx.fillRect(p.x * canvas.width, p.y * canvas.height, p.size, p.size);
+        }
+        ctx.globalAlpha = 1;
+        rafId = requestAnimationFrame(tick);
       }
-      ctx.globalAlpha = 1;
+
       rafId = requestAnimationFrame(tick);
     }
 
-    rafId = requestAnimationFrame(tick);
+    // Fire one burst at connect-time. Preserves the existing animation
+    // page semantic (`confettiBurst().connect(burstEl)` on every click of
+    // a separate trigger button).
+    fireBurst();
+
+    // Listen for `press` so the declarative case
+    // (`<button-ui traits="confetti-burst">`) fires a fresh burst on
+    // each click. button-ui dispatches `press` from its #onClick.
+    const onPress = () => fireBurst();
+    host.addEventListener('press', onPress);
 
     return () => {
-      if (rafId) cancelAnimationFrame(rafId);
-      canvas.remove();
+      host.removeEventListener('press', onPress);
+      for (const handle of inflight) handle.cancel();
+      inflight.clear();
       host.removeAttribute('data-confetti-burst-active');
     };
   },

package/traits/drag-ghost.js

@@ -9,15 +9,25 @@ export const dragGhost = defineTrait({
   config: [],
   setup({ host }) {
     let ghost = null;
+    let clickOffsetX = 0;
+    let clickOffsetY = 0;
+
+    function onPointerDown(e) {
+      const rect = host.getBoundingClientRect();
+      clickOffsetX = e.clientX - rect.left;
+      clickOffsetY = e.clientY - rect.top;
+    }
 
     function onDragStart(e) {
       ghost = host.cloneNode(true);
+      const rect = host.getBoundingClientRect();
       ghost.style.cssText = `
         position: fixed; top: -9999px; left: -9999px;
+        width: ${rect.width}px; height: ${rect.height}px;
         pointer-events: none; opacity: 0.8; z-index: 99999;
       `;
       document.body.appendChild(ghost);
-      e.dataTransfer?.setDragImage(ghost, 0, 0);
+      e.dataTransfer?.setDragImage(ghost, clickOffsetX, clickOffsetY);
       host.setAttribute('data-drag-ghost-active', '');
     }
 
@@ -27,10 +37,12 @@ export const dragGhost = defineTrait({
     }
 
     host.setAttribute('draggable', 'true');
+    host.addEventListener('pointerdown', onPointerDown);
     host.addEventListener('dragstart', onDragStart);
     host.addEventListener('dragend', onDragEnd);
 
     return () => {
+      host.removeEventListener('pointerdown', onPointerDown);
       host.removeEventListener('dragstart', onDragStart);
       host.removeEventListener('dragend', onDragEnd);
       if (ghost) { ghost.remove(); ghost = null; }

package/traits/index.js

@@ -2,6 +2,11 @@
 // _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';

package/traits/scroll-lock.test.js

@@ -10,9 +10,11 @@ describe('scroll-lock', () => {
 
   it('connect sets body overflow:hidden + active attribute', () => {
     const host = mountHost();
-    connectTrait(scrollLock, host);
+    const inst = connectTrait(scrollLock, host);
     expect(document.body.style.overflow).toBe('hidden');
     expect(host.hasAttribute('data-scroll-lock-active')).toBe(true);
+    // Balanced disconnect to keep the module-level lockCount honest for sibling tests.
+    inst.disconnect(host);
   });
 
   it('disconnect restores body overflow + clears attribute', () => {

package/traits/spring-animate.js

@@ -14,10 +14,15 @@ export const springAnimate = defineTrait({
     let rafId = null;
     const target = 0;
 
-    // Read current translate as starting position
+    // Read current translate as starting position. The trait writes to
+    // `style.translate` (not `transform`), so read that first; fall back to
+    // the transform matrix for callers that nudged via `transform`.
     const cs = getComputedStyle(host);
-    const matrix = new DOMMatrixReadOnly(cs.transform);
-    let position = matrix.m41 || 0;
+    let position = parseFloat(cs.translate) || 0;
+    if (!position) {
+      const matrix = new DOMMatrixReadOnly(cs.transform);
+      position = matrix.m41 || 0;
+    }
     let velocity = 0;
 
     host.setAttribute('data-spring-animate-active', '');

package/traits/traits-host.js

@@ -0,0 +1,53 @@
+/**
+ * <traits-host traits="pressable scale-press ripple">
+ *   <div>raw markup with trait behaviors attached</div>
+ * </traits-host>
+ *
+ * Tiny pass-through wrapper that extends declarative trait composition
+ * to raw HTML. Without this element, only UIElement subclasses can read
+ * the `traits=` attribute. Wrap any markup in <traits-host> and the
+ * named traits attach to the wrapper itself — events bubble up from
+ * children, attribute toggles land on the wrapper, and the children
+ * render unaffected.
+ *
+ * The host uses `display: contents` so it does not introduce a layout
+ * box; the wrapped children participate in the parent's flex/grid
+ * exactly as if the wrapper were not there.
+ *
+ * Use this for:
+ *   - sprinkling `pressable` onto a custom button you don't want to
+ *     turn into a UIElement
+ *   - giving a `<dialog>` or `<details>` a `focus-trap` without a
+ *     wrapper component
+ *   - composing `magnetic-hover` + `tilt-hover` onto an existing
+ *     marketing CTA without rewriting it as a component
+ *
+ * For UIElement subclasses, prefer the bare attribute on the element
+ * itself: `<button-ui traits="ripple">…</button-ui>`. The wrapper is
+ * for cases where the host element is NOT a UIElement.
+ */
+
+import { UIElement } from '../core/element.js';
+
+class TraitsHost extends UIElement {
+  static template = () => null;
+
+  connected() {
+    // No-op — UIElement reads `traits` attribute and applies behavior.
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('traits-host')) {
+  customElements.define('traits-host', TraitsHost);
+}
+
+// One-shot stylesheet keeps the host out of the layout flow so children
+// render in the parent's box.
+if (typeof document !== 'undefined' && document.head && !document.querySelector('#adia-traits-host-style')) {
+  const style = document.createElement('style');
+  style.id = 'adia-traits-host-style';
+  style.textContent = 'traits-host { display: contents; }';
+  document.head.appendChild(style);
+}
+
+export { TraitsHost };

package/traits/traits-host.test.js

@@ -0,0 +1,73 @@
+/**
+ * <traits-host> behavior tests — focus on the wrapper-specific contract:
+ *  - children pass through visually (display: contents)
+ *  - declarative traits attach to the wrapper
+ *  - traits attribute swaps work the same as on UIElement subclasses
+ *  - events from children bubble up to the wrapper for trait capture
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import './traits-host.js';
+import './pressable.js';
+import './hoverable.js';
+import { resetDOM } from './_test-helpers.js';
+
+describe('<traits-host>', () => {
+  beforeEach(resetDOM);
+
+  it('is registered as a UIElement subclass', () => {
+    const ctor = customElements.get('traits-host');
+    expect(ctor).toBeTruthy();
+  });
+
+  it('declarative traits=" " attaches to the wrapper itself', () => {
+    document.body.innerHTML = '<traits-host traits="pressable"><div>Raw</div></traits-host>';
+    const host = document.body.firstElementChild;
+    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('events from children bubble up so the trait captures them', () => {
+    document.body.innerHTML = '<traits-host traits="hoverable"><span class="inner">Hover</span></traits-host>';
+    const host = document.body.firstElementChild;
+    const inner = host.querySelector('.inner');
+    // Synthesize a pointerenter on the wrapper (DOM bubbling up from inner
+    // would also work but happy-dom doesn't always reflect that for hover).
+    host.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
+    expect(host.hasAttribute('data-hoverable-hover')).toBe(true);
+    host.dispatchEvent(new PointerEvent('pointerleave', { bubbles: true }));
+    expect(host.hasAttribute('data-hoverable-hover')).toBe(false);
+  });
+
+  it('changing traits attribute swaps the trait stack', () => {
+    document.body.innerHTML = '<traits-host traits="pressable"><div>x</div></traits-host>';
+    const host = document.body.firstElementChild;
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(true);
+    host.dispatchEvent(new PointerEvent('pointerup'));
+
+    host.setAttribute('traits', 'hoverable');
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+    host.dispatchEvent(new PointerEvent('pointerenter'));
+    expect(host.hasAttribute('data-hoverable-hover')).toBe(true);
+  });
+
+  it('removing the host cleans up trait attributes', () => {
+    document.body.innerHTML = '<traits-host traits="pressable"><div>x</div></traits-host>';
+    const host = document.body.firstElementChild;
+    host.dispatchEvent(new PointerEvent('pointerdown'));
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(true);
+    host.remove();
+    expect(host.hasAttribute('data-pressable-pressed')).toBe(false);
+  });
+
+  it('with no traits attribute: pure pass-through, children render', () => {
+    document.body.innerHTML = '<traits-host><span class="x">child</span></traits-host>';
+    const host = document.body.firstElementChild;
+    expect(host.querySelector('.x')).toBeTruthy();
+    expect(host.querySelector('.x').textContent).toBe('child');
+  });
+});