@adia-ai/web-components 0.0.11 → 0.0.12

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/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/package.json

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

package/styles/colors/semantics.css

@@ -419,19 +419,46 @@
   --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);
-
-  /* L3 */
-  --a-ring:         var(--a-focus-color);
-  --a-ring-invalid: var(--a-danger);
-  --a-focus-ring:   var(--a-focus-ring-shadow);
+  --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 — 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

package/styles/styles.css

@@ -41,6 +41,7 @@
 @import "../components/kbd/kbd.css";
 @import "../components/tag/tag.css";
 @import "../components/col/col.css";
+@import "../components/field/field.css";
 @import "../components/row/row.css";
 @import "../components/grid/grid.css";
 @import "../components/stack/stack.css";