@adia-ai/web-components 0.0.11 → 0.0.13

package/components/select/select.css

@@ -18,7 +18,8 @@
     --select-bg-hover:          var(--a-ui-bg-hover);
     --select-border:            var(--a-ui-border);
     --select-border-hover:      var(--a-ui-border-hover);
-    --select-border-focus:      var(--a-ui-border-active);
+    --select-focus-ring:        var(--a-focus-ring);
+    --select-focus-ring-invalid: var(--a-focus-ring-invalid);
     --select-label-fg:          var(--a-ui-text-muted);
     --select-placeholder-fg:    var(--a-ui-text-placeholder);
     --select-caret-fg:          var(--a-ui-text-muted);
@@ -97,9 +98,14 @@
   }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
-    border-color: var(--select-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    box-shadow: var(--select-focus-ring);
     color: var(--select-fg);
   }
+  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
+  :scope[error]:focus-visible [slot="trigger"] {
+    box-shadow: var(--select-focus-ring-invalid);
+  }
   :scope:focus-visible::before {
     color: var(--select-fg-subtle);
   }
@@ -156,7 +162,6 @@
     --select-bg: transparent;
     --select-border: transparent;
     --select-border-hover: transparent;
-    --select-border-focus: transparent;
   }
   :scope[variant="ghost"] [slot="trigger"]:hover {
     background: var(--select-ghost-bg-hover);
@@ -174,7 +179,7 @@ select-ui [slot="listbox"] {
   padding: var(--a-space-1);
   border: 1px solid var(--a-ui-border);
   border-radius: var(--a-radius);
-  background: var(--a-bg-subtle);
+  background: var(--a-canvas-bright);
   box-shadow: var(--a-shadow-lg);
   max-height: 15rem;
   overflow-y: auto;

package/components/slider/slider.js

@@ -1,9 +1,14 @@
 /**
- * <slider-ui label="Width" value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
+ * <field-ui label="Width">
+ *   <slider-ui value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
+ * </field-ui>
  *
- * Layout:
- *   [label]                    [value] [suffix]
+ * Layout inside the field:
+ *   [field label]              [value] [suffix]
  *   [====fill====●─────────────────track──────]
+ *
+ * Bare `<slider-ui label="…">` still works but logs a deprecation warning
+ * asking you to wrap in <field-ui> for proper label association.
  */
 
 import { AdiaFormElement } from '../../core/form.js';

package/components/textarea/textarea.css

@@ -5,7 +5,8 @@
     --textarea-fg:              var(--a-ui-text);
     --textarea-border:          var(--a-ui-border);
     --textarea-border-hover:    var(--a-ui-border-hover);
-    --textarea-border-focus:    var(--a-ui-border-active);
+    --textarea-focus-ring:      var(--a-focus-ring);
+    --textarea-focus-ring-invalid: var(--a-focus-ring-invalid);
     --textarea-radius:          var(--a-radius);
     --textarea-min-height:      calc(var(--a-size) * 2);
     --textarea-px:              var(--a-ui-px);
@@ -69,9 +70,18 @@
     color: var(--textarea-fg-hover);
   }
   :scope:not([disabled]) [slot="text"]:focus {
-    border-color: var(--textarea-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block).
+       `:focus` (not :focus-visible) is deliberate — the caret lives
+       in the contenteditable [slot="text"] span; :focus-visible on
+       the host wouldn't match the actual input surface. */
+    outline: none;
+    box-shadow: var(--textarea-focus-ring);
     color: var(--textarea-fg-hover);
   }
+  :scope[aria-invalid="true"]:not([disabled]) [slot="text"]:focus,
+  :scope[error]:not([disabled]) [slot="text"]:focus {
+    box-shadow: var(--textarea-focus-ring-invalid);
+  }
   :scope:not([disabled]) [slot="text"]:focus + [slot="label"],
   :scope:not([disabled]):focus-within [slot="label"] {
     color: var(--textarea-label-fg-focus);

package/components/upload/upload.css

@@ -18,6 +18,8 @@
     --upload-bg-disabled:      var(--a-ui-bg-disabled);
     --upload-fg-disabled:      var(--a-ui-text-disabled);
     --upload-border-disabled:  var(--a-ui-border-disabled);
+    --upload-focus-ring:       var(--a-focus-ring);
+    --upload-focus-ring-invalid: var(--a-focus-ring-invalid);
 
     /* ── Spacing ── */
     --upload-dropzone-pad:     var(--a-space-6);
@@ -69,8 +71,9 @@
     color: var(--upload-fg-hover);
   }
   [data-dropzone]:focus-visible {
-    outline: 2px solid var(--upload-border-hover);
-    outline-offset: 2px;
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    outline: none;
+    box-shadow: var(--upload-focus-ring);
   }
   [data-dropzone][data-dragover] {
     border-color: var(--upload-border-dragover);

package/core/element.test.js

@@ -0,0 +1,234 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { AdiaElement, signal, effect } from './element.js';
+
+// ── Shared helpers ──
+
+let registrationCounter = 0;
+function registerTestElement(BaseImpl) {
+  const tag = `test-el-${++registrationCounter}`;
+  customElements.define(tag, BaseImpl);
+  return tag;
+}
+
+function mount(tag, attrs = {}) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  document.body.appendChild(el);
+  return el;
+}
+
+// Signals flush via queueMicrotask — await one tick to let reactive
+// effects settle after a mutation.
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+describe('AdiaElement — construction + lifecycle', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('instantiates and calls connected() on mount, disconnected() on remove', () => {
+    const events = [];
+    class El extends AdiaElement {
+      connected()    { events.push('connected'); }
+      disconnected() { events.push('disconnected'); }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    expect(events).toEqual(['connected']);
+    el.remove();
+    expect(events).toEqual(['connected', 'disconnected']);
+  });
+
+  it('remount after disconnect re-runs connected()', () => {
+    const events = [];
+    class El extends AdiaElement {
+      connected()    { events.push('connected'); }
+      disconnected() { events.push('disconnected'); }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    el.remove();
+    document.body.appendChild(el);
+    expect(events).toEqual(['connected', 'disconnected', 'connected']);
+  });
+});
+
+describe('AdiaElement — properties', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('reads default value from static properties', () => {
+    class El extends AdiaElement {
+      static properties = { label: { type: String, default: 'hi' } };
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    expect(el.label).toBe('hi');
+  });
+
+  it('reflects Boolean properties to HTML attributes when reflect: true', () => {
+    class El extends AdiaElement {
+      static properties = { disabled: { type: Boolean, default: false, reflect: true } };
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    expect(el.hasAttribute('disabled')).toBe(false);
+    el.disabled = true;
+    expect(el.hasAttribute('disabled')).toBe(true);
+    el.disabled = false;
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('reflects String properties as attribute values', () => {
+    class El extends AdiaElement {
+      static properties = { variant: { type: String, default: 'neutral', reflect: true } };
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    el.variant = 'accent';
+    expect(el.getAttribute('variant')).toBe('accent');
+  });
+
+  it('parses incoming attributes back into typed properties', () => {
+    class El extends AdiaElement {
+      static properties = {
+        count:    { type: Number,  default: 0 },
+        active:   { type: Boolean, default: false },
+      };
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag, { count: '42', active: '' });
+    expect(el.count).toBe(42);
+    expect(el.active).toBe(true);
+  });
+
+  it('does NOT reflect when reflect: false / omitted', () => {
+    class El extends AdiaElement {
+      static properties = { internal: { type: String, default: 'x' } };
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    el.internal = 'y';
+    expect(el.hasAttribute('internal')).toBe(false);
+  });
+});
+
+describe('AdiaElement — reactive effect', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('calls render() on mount and when a reactive property changes', async () => {
+    let renders = 0;
+    class El extends AdiaElement {
+      static properties = { label: { type: String, default: 'a' } };
+      render() { renders++; void this.label; }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    expect(renders).toBeGreaterThan(0);
+    const before = renders;
+    el.label = 'b';
+    await tick();
+    expect(renders).toBeGreaterThan(before);
+  });
+
+  it('stops re-rendering after disconnect', async () => {
+    let renders = 0;
+    class El extends AdiaElement {
+      static properties = { label: { type: String, default: 'a' } };
+      render() { renders++; void this.label; }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    el.remove();
+    const frozen = renders;
+    el.label = 'c';
+    await tick();
+    expect(renders).toBe(frozen);
+  });
+});
+
+describe('AdiaElement — subscription-leak guard (0.0.10 regression)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('child connected() reads do NOT subscribe an outer effect', async () => {
+    // The bug: when a parent effect called appendChild(child) while running,
+    // child.connectedCallback would synchronously call connected(), and any
+    // template-literal reads of child's reactive properties would subscribe
+    // the OUTER effect to the CHILD's signals. A later change to a child
+    // prop would spuriously re-run the parent effect.
+    //
+    // Fix: connected() is now wrapped in untracked(…).
+    class Child extends AdiaElement {
+      static properties = { value: { type: String, default: 'initial', reflect: true } };
+      connected() {
+        // Read our own reactive prop exactly the way template-literal
+        // interpolation would — this read must not subscribe an ancestor
+        // effect.
+        void this.value;
+      }
+    }
+    const tag = registerTestElement(Child);
+
+    const trigger = signal(0);
+    let outerRuns = 0;
+    let childRef = null;
+
+    const dispose = effect(() => {
+      outerRuns++;
+      void trigger.value;
+      if (!childRef) {
+        childRef = document.createElement(tag);
+        document.body.appendChild(childRef);
+      }
+    });
+
+    const outerRunsAfterMount = outerRuns;
+    expect(childRef).not.toBeNull();
+
+    // Now mutate the CHILD's signal — the outer effect MUST NOT re-run.
+    childRef.value = 'changed';
+    await tick();
+    expect(outerRuns).toBe(outerRunsAfterMount);
+
+    // Sanity check: mutating the trigger signal the outer effect DID
+    // subscribe to re-runs the effect, proving the effect is alive.
+    trigger.value = 1;
+    await tick();
+    expect(outerRuns).toBe(outerRunsAfterMount + 1);
+
+    dispose();
+  });
+});
+
+describe('AdiaElement — addTrait', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('applies a trait once, idempotent on repeat', () => {
+    let connects = 0;
+    const myTrait = () => ({
+      connect() { connects++; },
+      disconnect() {},
+    });
+
+    class El extends AdiaElement {}
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    el.addTrait(myTrait);
+    el.addTrait(myTrait);
+    expect(connects).toBe(1);
+  });
+
+  it('disconnects all applied traits on remove', () => {
+    let connects = 0, disconnects = 0;
+    const myTrait = () => ({
+      connect()    { connects++; },
+      disconnect() { disconnects++; },
+    });
+    class El extends AdiaElement {
+      static traits = [myTrait];
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag);
+    expect(connects).toBe(1);
+    expect(disconnects).toBe(0);
+    el.remove();
+    expect(disconnects).toBe(1);
+  });
+});

package/core/form.js

@@ -178,8 +178,34 @@ export class AdiaFormElement extends AdiaElement {
     this.addEventListener('invalid', this.#onInvalid);
     this.addEventListener('input', this.#onInput);
     this.addEventListener('blur', this.#onBlur, true);
+    this.#warnDeprecatedLabel();
   }
 
+  /**
+   * Soft-deprecation warning for the per-control `label` attribute.
+   * Wrapping the control in `<field-ui label="…">` (Phase 1 shipped
+   * 2026-04-23) gives proper `<label for>` association and composition
+   * slots; the per-control `label` attr renders via an inert shadow
+   * slot without `[for]`, so click-to-focus doesn't work.
+   *
+   * One-shot per class so the console isn't spammed on docs pages.
+   */
+  #warnDeprecatedLabel() {
+    const ctor = this.constructor;
+    if (!ctor.properties?.label) return;
+    if (!this.hasAttribute('label')) return;
+    if (AdiaFormElement.#labelWarned.has(ctor)) return;
+    AdiaFormElement.#labelWarned.add(ctor);
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[AdiaUI] <${this.localName} label="…"> is deprecated — wrap in ` +
+      `<field-ui label="…"> for proper label association. ` +
+      `Docs: https://ui-kit.exe.xyz/site/components/field`
+    );
+  }
+
+  static #labelWarned = new Set();
+
   disconnected() {
     super.disconnected();
     this.removeEventListener('invalid', this.#onInvalid);

package/core/index.js

@@ -0,0 +1,25 @@
+/**
+ * core barrel — re-exports every public core module.
+ *
+ * Consumers who want to build on AdiaElement or use the reactive
+ * signal system directly do:
+ *
+ *   import { AdiaElement } from '@adia-ai/web-components/core';
+ *   import { signal, effect } from '@adia-ai/web-components/core';
+ *
+ * Exports are flat — every symbol from the re-exported files is
+ * available at this level. Symbol collisions between files are not
+ * allowed (there are none currently; keep it that way).
+ */
+
+export * from './element.js';
+export * from './form.js';
+export * from './signals.js';
+export * from './template.js';
+export * from './controller.js';
+export * from './provider.js';
+export * from './anchor.js';
+export * from './icons.js';
+export * from './markdown.js';
+export * from './transport.js';
+export * from './polyfills.js';

package/core/markdown.js

@@ -19,7 +19,10 @@ export function renderMarkdown(src) {
   while (i < lines.length) {
     const line = lines[i];
 
-    // Fenced code block
+    // Fenced code block — when a language is named, emit <code-ui> so
+    // the site picks up the syntax-highlight upgrade shipped in
+    // SPEC-CODE-EDITOR-001. Unlabeled fences keep the bare <pre><code>
+    // form (no highlight needed; zero CM6 cost).
     const fence = line.match(/^```(\w*)/);
     if (fence) {
       const lang = fence[1];
@@ -30,7 +33,10 @@ export function renderMarkdown(src) {
         i++;
       }
       i++; // skip closing ```
-      out.push(`<pre><code${lang ? ` data-lang="${lang}"` : ''}>${code.join('\n')}</code></pre>`);
+      const body = code.join('\n');
+      out.push(lang
+        ? `<code-ui language="${lang}">${body}</code-ui>`
+        : `<pre><code>${body}</code></pre>`);
       continue;
     }
 

package/index.css

@@ -0,0 +1,26 @@
+/**
+ * @adia-ai/web-components — the opinionated all-in-one stylesheet.
+ *
+ *   <link rel="stylesheet" href="@adia-ai/web-components/css" />
+ *
+ * Imports, in cascade order: design tokens (primitives + semantics
+ * + typography — via the colors tree) → component styles → global
+ * resets.
+ *
+ * Pattern CSS (adia-chat, adia-editor, app-shell, etc.) is NOT
+ * bundled here — each page links its own patterns explicitly.
+ * Opinionated theme overrides live in `./styles/themes.css`; link
+ * them separately when you want the 8 named themes.
+ *
+ * If you need a subset, skip this file and link the layers directly:
+ *   @adia-ai/web-components/styles/tokens.css
+ *   @adia-ai/web-components/styles/components.css
+ *   @adia-ai/web-components/styles/resets.css
+ *   @adia-ai/web-components/styles/themes.css      (optional)
+ *   @adia-ai/web-components/styles/prose.css       (optional)
+ *   @adia-ai/web-components/styles/typography.css  (standalone)
+ */
+
+@import "./styles/tokens.css";
+@import "./styles/components.css";
+@import "./styles/resets.css";

package/index.js

@@ -0,0 +1,18 @@
+/**
+ * @adia-ai/web-components — main entry.
+ *
+ *   import '@adia-ai/web-components';
+ *   import { AdiaButton, AdiaAppShell } from '@adia-ai/web-components';
+ *
+ * Loading this file registers every component + pattern custom
+ * element (side effect of each module's `customElements.define(...)`
+ * call). Pair with `@adia-ai/web-components/css` (the all-in-one
+ * stylesheet) or link tokens/components/resets individually.
+ *
+ * If you only want a subset, use the subpath imports:
+ *   import '@adia-ai/web-components/components/button';
+ *   import { AdiaAppShell } from '@adia-ai/web-components/patterns';
+ */
+
+export * from './components/index.js';
+export * from './patterns/index.js';

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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",
-    "./patterns": "./patterns/index.js"
+    ".":              "./index.js",
+    "./css":          "./index.css",
+    "./a2ui":         "./a2ui/index.js",
+    "./core":         "./core/index.js",
+    "./core/*":       "./core/*.js",
+    "./components":   "./components/index.js",
+    "./components/*": "./components/*/*.js",
+    "./patterns":     "./patterns/index.js",
+    "./patterns/*":   "./patterns/*/*.js",
+    "./styles/*":     "./styles/*",
+    "./traits":       "./traits/index.js",
+    "./traits/*":     "./traits/*.js",
+    "./package.json": "./package.json"
   },
   "files": [
     "core/",

package/patterns/adia-chat/adia-chat.js

@@ -1,6 +1,6 @@
 import { AdiaElement } from '../../core/element.js';
 import { renderMarkdown } from '../../core/markdown.js';
-import { streamChat } from '../../../gen-ui/llm/adapters/index.js';
+import { streamChat } from '../../../a2ui/compose/llm/adapters/index.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

package/styles/colors/semantics.css

@@ -419,28 +419,55 @@
   --a-danger-border-invalid:  var(--a-danger-border);
 
   /* ══════════════════════════════════════════════════════════════
-     FOCUS
-     ══════════════════════════════════════════════════════════════ */
-
-  --a-focus-color:       var(--a-accent-strong);
-  --a-focus-width:       2px;
-  --a-focus-offset:      2px;
-  --a-focus-ring-shadow: 0 0 0 var(--a-focus-offset) var(--a-canvas-0),
+     FOCUS — canonical ring recipe shared by all form controls
+     ══════════════════════════════════════════════════════════════
+
+     The ring is a dual-layer box-shadow: an inner "gap" the canvas
+     color wide, then an outer ring the accent color wide. Tuning any
+     of the scalar tokens below cascades to every component that
+     consumes `--a-focus-ring`:
+
+       --a-focus-width   — outer ring thickness
+       --a-focus-offset  — inner gap thickness (distance from element
+                           edge to ring)
+       --a-focus-color   — ring color (default: accent-strong)
+       --a-focus-bg      — gap color (default: the surface under the
+                           control; normally matches --a-canvas-0)
+
+     Invalid / error state uses the same geometry but a danger color
+     via `--a-focus-ring-invalid`.
+
+     Components must NOT hardcode 2px / 4px / accent hex in their CSS;
+     consume either `--a-focus-ring` directly or an L3 alias like
+     `--{component}-focus-ring: var(--a-focus-ring)` (the more common
+     pattern — gives per-component override headroom without breaking
+     the canonical default). */
+
+  --a-focus-color:         var(--a-accent-strong);
+  --a-focus-color-invalid: var(--a-danger);
+  --a-focus-width:         2px;
+  --a-focus-offset:        2px;
+  --a-focus-bg:            var(--a-canvas-0);
+
+  --a-focus-ring-shadow: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
     0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color);
+  --a-focus-ring-shadow-invalid: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
+    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color-invalid);
 
-  /* L3 */
-  --a-ring:         var(--a-focus-color);
-  --a-ring-invalid: var(--a-danger);
-  --a-focus-ring:   var(--a-focus-ring-shadow);
+  /* L3 — what components consume. */
+  --a-ring:              var(--a-focus-color);
+  --a-ring-invalid:      var(--a-focus-color-invalid);
+  --a-focus-ring:        var(--a-focus-ring-shadow);
+  --a-focus-ring-invalid: var(--a-focus-ring-shadow-invalid);
 
   /* ══════════════════════════════════════════════════════════════
      UI (FIELD) — Form input surfaces
      ══════════════════════════════════════════════════════════════ */
 
-  --a-ui-bg:               var(--a-neutral-0-scrim);
-  --a-ui-bg-hover:         var(--a-neutral-2-scrim);
+  --a-ui-bg:               var(--a-canvas-0-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-selected:      var(--a-canvas-bright);
   --a-ui-bg-disabled:      var(--a-canvas-1);
   --a-ui-bg-invalid:       var(--a-danger-muted);