@adia-ai/web-components 0.2.0 → 0.2.2

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/chat-thread/chat-input.css

@@ -1,3 +1,22 @@
+/* Safari 17.x bug: `:scope:hover` and `:scope:not(...) [descendant]:hover`
+   inside `@scope` don't match the scope root. Plain selectors outside
+   work. See docs/BROWSER-COMPAT.md §3a. Same pattern used by input.css
+   and textarea.css.
+
+   Two rules — one on the host (paint the hover affordance), one on the
+   inner textarea-ui's [slot="text"] (suppress the textarea-ui hover
+   bg/border/color so it doesn't compound with the host's). */
+chat-input-ui:not([disabled]):hover {
+  background: var(--chat-input-bg-hover);
+  border-color: var(--chat-input-border-hover);
+  color: var(--chat-input-fg-hover);
+}
+chat-input-ui textarea-ui:not([disabled]) [slot="text"]:hover {
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+}
+
 @scope (chat-input-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -8,11 +27,35 @@
     --chat-input-toolbar-py:      var(--a-space-1);
     --chat-input-toolbar-gap:     var(--a-space-1);
 
-    /* ── Colors ── */
+    /* ── Colors ──
+       chat-input-ui owns every color the composite paints — no inner
+       state styling from textarea-ui leaks through. The block below
+       (`Nested-control color isolation`) suppresses textarea-ui's
+       hover / focus / disabled / placeholder treatments inside this
+       @scope and re-paints them with these tokens. */
     --chat-input-bg:              var(--a-canvas-0);
+    --chat-input-fg:              var(--a-fg);
     --chat-input-border:          var(--a-border-subtle);
     --chat-input-caret-color:     var(--a-fg-subtle);
+    --chat-input-placeholder-fg:  var(--a-fg-muted);
+
+    /* Hover — matches input-ui's affordance (subtle alpha lift on the
+       canvas surface + slightly stronger border + brightened fg). The
+       host paints this on `chat-input-ui:hover` (Safari 17.x bug
+       requires the rule outside @scope — see top of file); the inner
+       textarea-ui's own hover is suppressed there too so the alpha
+       doesn't compound. */
+    --chat-input-bg-hover:        var(--a-ui-bg-hover);
+    --chat-input-border-hover:    var(--a-ui-border-hover);
+    --chat-input-fg-hover:        var(--a-fg);
+
+    /* Disabled — host-level chrome (background, border, pointer-events)
+       lives on `:scope[disabled]` below. Inner-text disabled color is
+       owned here so the inner textarea-ui's `--a-ui-text-disabled` doesn't
+       leak through. */
+    --chat-input-bg-disabled:     transparent;
     --chat-input-border-disabled: var(--a-border-subtle);
+    --chat-input-fg-disabled:     var(--a-fg-disabled);
 
     /* Canonical focus ring — chat-input is a *nested-control host*.
        See semantics.css FOCUS block + the nested-control pattern
@@ -38,7 +81,7 @@
     --chat-input-remove-font:     var(--a-ui-tiny);
 
     /* ── Transition ── */
-    --chat-input-duration:        var(--a-duration);
+    --chat-input-duration:        var(--a-duration-fast);
     --chat-input-easing:          var(--a-easing);
   }
 
@@ -50,6 +93,15 @@
     border: 1px solid var(--chat-input-border);
     border-radius: var(--chat-input-radius);
     background: var(--chat-input-bg);
+    color: var(--chat-input-fg);
+    /* Mirrors input-ui's transition surface so hover/focus/invalid
+       interpolate together — bg + border + color + ring all snap if
+       any one is left out. */
+    transition:
+      background  var(--chat-input-duration) var(--chat-input-easing),
+      border-color var(--chat-input-duration) var(--chat-input-easing),
+      color       var(--chat-input-duration) var(--chat-input-easing),
+      box-shadow  var(--chat-input-duration) var(--chat-input-easing);
   }
 
   /* ── Nested-control focus pattern ────────────────────────────────────
@@ -76,35 +128,67 @@
     box-shadow: var(--chat-input-focus-ring-invalid);
   }
 
-  /* Textarea: no border/bg of its own — container handles it. The
-     second selector keeps the transparent bg even when the host
+  /* ── Nested-control color isolation ─────────────────────────────────
+     The inner `textarea-ui` ships its own hover / focus / invalid /
+     disabled / placeholder color rules wired to the generic `--a-ui-*`
+     family. Inside chat-input-ui those would leak through and fight
+     the host's chrome — bg flashes on hover, fg brightens on focus,
+     a second focus ring paints alongside the composite ring, etc.
+     Every textarea state below is explicitly suppressed and re-painted
+     with the `--chat-input-*` tokens above so the composite is the
+     sole owner of color across all states.
+
+     Specificity bump: textarea.css uses
+     `textarea-ui:not([disabled]) [slot="text"]:STATE` (0,3,0). Prefixing
+     with `:scope` adds (0,1,0) → (0,4,1), which wins. The :hover rule
+     in textarea.css lives outside its @scope (Safari 17.x workaround)
+     but uses the same shape; same specificity boost applies. */
+
+  /* Rest — chrome neutralization (no border, no bg) + chat layout +
+     `color: inherit` so the inner inherits the host's color (which IS
+     transitioned on the `:scope` rule above). All state colors are then
+     owned at the host level — disabled / hover / focus all flow into
+     the inner via inheritance and animate together with the chrome.
+     The second selector keeps the transparent bg even when the inner
      textarea-ui carries [disabled] (streaming / submit lock) —
-     otherwise textarea.css's `:scope[disabled] [slot="text"]` rule
-     (specificity 0,3,0) paints --a-ui-bg-disabled over the container
-     bg. The `:scope` prefix boosts specificity to 0,3,1 so our rule
-     wins. */
+     textarea.css's `:scope[disabled] [slot="text"]` (0,3,0) would
+     otherwise paint --a-ui-bg-disabled. */
   textarea-ui [slot="text"],
   :scope textarea-ui[disabled] [slot="text"] {
     border: none;
-    background: transparent;
+    background: var(--chat-input-bg-disabled);  /* transparent at default */
     border-radius: 0;
     box-shadow: none;
+    color: inherit;
     max-height: 8rem;
     padding: var(--chat-input-textarea-pt) var(--chat-input-textarea-px) 0;
   }
 
-  /* Suppress the nested textarea-ui's own focus ring — the host (this
-     scope) owns the affordance. Required because textarea.css's default
-     rule paints a ring via box-shadow; without this override, the
-     composite would show both the host's outer ring AND the inner
-     control's ring simultaneously.
+  /* Hover lives outside this @scope (top of file) — Safari 17.x bug
+     prevents `:scope … [descendant]:hover` from matching here. */
 
-     textarea.css's rule is `:scope:not([disabled]) [slot="text"]:focus`
-     with specificity (0,4,0); we need to beat that — using the same
-     `:not([disabled])` guard on the host lifts ours to (0,4,1). */
+  /* Focus — suppress the inner ring (host paints via :focus-within)
+     and the inner color shift to fg-hover so the host's color cascades. */
   :scope textarea-ui:not([disabled]) [slot="text"]:focus {
     border: none;
     box-shadow: none;
+    color: inherit;
+  }
+
+  /* Invalid focus — textarea.css would paint --a-focus-ring-invalid on
+     the inner [slot="text"] when the inner control carries
+     [aria-invalid="true"] or [error]. Host owns the invalid ring via
+     :scope[aria-invalid]:focus-within above; suppress the inner one. */
+  :scope textarea-ui:not([disabled])[aria-invalid="true"] [slot="text"]:focus,
+  :scope textarea-ui:not([disabled])[error] [slot="text"]:focus {
+    box-shadow: none;
+  }
+
+  /* Placeholder — textarea.css paints --a-ui-text-placeholder on the
+     `::before` pseudo. Override with the chat-input token so the
+     composite controls the placeholder treatment. */
+  :scope textarea-ui [slot="text"][data-empty]::before {
+    color: var(--chat-input-placeholder-fg);
   }
 
   /* Toolbar */
@@ -174,10 +258,14 @@
     padding: 0;
   }
 
-  /* Disabled / streaming */
+  /* Disabled / streaming — host-level chrome. `color` cascades to the
+     inner [slot="text"] via inheritance (the inner uses `color: inherit`
+     in the rules above), so the disabled-fg shift transitions on the
+     host's `color` transition rather than snapping. */
   :scope[disabled] {
-    background: transparent;
+    background: var(--chat-input-bg-disabled);
     border-color: var(--chat-input-border-disabled);
+    color: var(--chat-input-fg-disabled);
     pointer-events: none;
   }
 }

package/components/index.js

@@ -75,7 +75,8 @@ export { UINavItem } from './nav-item/nav-item.js';
 export { UIOtpInput } from './otp-input/otp-input.js';
 export { UIImage } from './image/image.js';
 export { UISearch } from './search/search.js';
-export { UIStat } from './stat/stat.js';
+// Suffixed `-ui` to dodge ad-blocker rules that match `/stat.js$script`.
+export { UIStat } from './stat/stat-ui.js';
 export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';
 export { UIEmptyState } from './empty-state/empty-state.js';

package/components/table/cell-types.js

@@ -186,7 +186,7 @@ registerCellType('avatar', {
     }
     const av = wrapper.querySelector('avatar-ui');
     const span = wrapper.querySelector('span');
-    av.setAttribute('name', String(value ?? ''));
+    av.setAttribute('text', String(value ?? ''));
     span.textContent = String(value ?? '');
   },
   format(value) {

package/core/element.js

@@ -19,6 +19,7 @@ export { html, css, repeat } from './template.js';
 // Internal imports for UIElement
 import { signal, computed, effect, untracked } from './signals.js';
 import { stamp, disposeParts, KEY_MAP } from './template.js';
+import { getTrait } from '../traits/define.js';
 
 // ═══════════════════════════════════════════════════════════════
 // ADIA ELEMENT — Light DOM web component base class
@@ -83,7 +84,10 @@ export class UIElement extends HTMLElement {
   static get properties() { return {}; }
   static get traits() { return []; }
   static get observedAttributes() {
-    return Object.entries(this.properties).map(([k, c]) => c.attribute ?? k.toLowerCase());
+    const propAttrs = Object.entries(this.properties).map(([k, c]) => c.attribute ?? k.toLowerCase());
+    // Always observe `traits` so HTML authors can declare composable behaviors:
+    //   <comp-ui traits="pressable scale-press ripple">
+    return propAttrs.includes('traits') ? propAttrs : [...propAttrs, 'traits'];
   }
 
   #fx = [];
@@ -133,6 +137,7 @@ export class UIElement extends HTMLElement {
     }));
     if (!this.#tf) this.#tf = new Set();
     for (const t of ctor.traits) this.#applyTrait(t);
+    this.#applyDeclaredTraits();
     if (this.#ctrl) this.#connectCtrl();
   }
 
@@ -166,10 +171,11 @@ export class UIElement extends HTMLElement {
     if (c && this.isConnected) this.#connectCtrl();
   }
 
-  #applyTrait(trait) {
+  #applyTrait(trait, { declarative = false } = {}) {
     this.#tf.add(trait);
     const instance = trait();
     instance.connect(this, { host: this, signal, computed, effect });
+    if (declarative) instance._declarative = true;
     this.#tc.push(instance);
   }
 
@@ -180,7 +186,62 @@ export class UIElement extends HTMLElement {
     return this;
   }
 
+  /**
+   * Parse the `traits` attribute and apply each named trait. Idempotent —
+   * traits already attached via `static traits = [...]` or `addTrait()` are
+   * skipped so an HTML author layering on top of the class declaration can't
+   * double-apply.
+   *
+   * Unknown trait names log a one-line warning rather than throwing — this
+   * happens in dev when an app forgot to import the trait barrel.
+   */
+  #applyDeclaredTraits() {
+    const list = this.getAttribute('traits');
+    if (!list) return;
+    for (const name of list.split(/\s+/).filter(Boolean)) {
+      const factory = getTrait(name);
+      if (!factory) {
+        console.warn(`<${this.localName}> traits="${name}" — trait not found. Did you forget to import it?`);
+        continue;
+      }
+      if (this.#tf.has(factory)) continue;
+      this.#applyTrait(factory, { declarative: true });
+    }
+  }
+
+  /**
+   * On `traits` attribute change, disconnect declarative trait instances
+   * and re-apply from the new attribute value. Static + addTrait() instances
+   * are preserved.
+   */
+  #refreshDeclaredTraits() {
+    if (!this.#tf) return;
+    // Remove instances flagged as declarative.
+    const keep = [];
+    for (const inst of this.#tc) {
+      if (inst._declarative) {
+        inst.disconnect(this);
+        // Allow this factory to be re-applied via the new attribute value.
+        for (const factory of this.#tf) {
+          if (factory.schema?.name && inst.schema?.name === factory.schema.name) {
+            this.#tf.delete(factory);
+            break;
+          }
+        }
+      } else {
+        keep.push(inst);
+      }
+    }
+    this.#tc.length = 0;
+    this.#tc.push(...keep);
+    this.#applyDeclaredTraits();
+  }
+
   attributeChangedCallback(name, _, val) {
+    if (name === 'traits') {
+      if (this.isConnected) this.#refreshDeclaredTraits();
+      return;
+    }
     for (const [key, cfg] of Object.entries(this.constructor.properties)) {
       if ((cfg.attribute ?? key.toLowerCase()) === name) {
         this[key] = parseAttr(val, cfg.type ?? String);

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
     ".":              "./index.js",
     "./css":          "./index.css",
-    "./a2ui":         "./a2ui/index.js",
     "./core":         "./core/index.js",
     "./core/*":       "./core/*.js",
     "./components":   "./components/index.js",
@@ -21,7 +20,6 @@
     "components/",
     "styles/",
     "traits/",
-    "a2ui/",
     "index.js",
     "index.css"
   ],

package/styles/colors/semantics.css

@@ -95,9 +95,9 @@
   --a-canvas-pressed: var(--a-canvas-2);   /* pressed/active button states */
 
   /* Borders on neutral surfaces — adaptive scrims flip polarity per mode. */
-  --a-canvas-border-subtle: var(--a-neutral-1-scrim);
-  --a-canvas-border:        var(--a-neutral-3-scrim);
-  --a-canvas-border-strong: var(--a-neutral-6-scrim);
+  --a-canvas-border-subtle: var(--a-neutral-0-scrim);
+  --a-canvas-border:        var(--a-neutral-2-scrim);
+  --a-canvas-border-strong: var(--a-neutral-4-scrim);
 
   /* L3 — short-alias matrix (the consumable API for neutral surfaces) */
   --a-bg:              var(--a-canvas-0);
@@ -541,7 +541,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   --a-ui-bg:               var(--a-canvas-0-scrim);
-  --a-ui-bg-hover:         var(--a-canvas-2-scrim);
+  --a-ui-bg-hover:         var(--a-canvas-0-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
   --a-ui-bg-selected:      var(--a-canvas-0-scrim);
   --a-ui-bg-disabled:      var(--a-canvas-1);

package/styles/components.css

@@ -74,7 +74,7 @@
 @import "../components/otp-input/otp-input.css";
 @import "../components/image/image.css";
 @import "../components/search/search.css";
-@import "../components/stat/stat.css";
+@import "../components/stat/stat-ui.css";
 @import "../components/progress-row/progress-row.css";
 @import "../components/action-list/action-list.css";
 @import "../components/empty-state/empty-state.css";