@adia-ai/web-components 0.0.15 → 0.0.16

package/components/segment/segment.js

@@ -1,6 +1,9 @@
 /**
- * <segment-ui value="tab1" text="Tab 1"></segment-ui>
+ * <segment-ui value="tab1" text="Tab 1" icon="list"></segment-ui>
  * Child of segmented-ui. Represents one option.
+ *
+ * `icon=` stamps a leading <icon-ui name="…"> child on render.
+ * Mirrors the button-ui pattern.
  */
 
 import { AdiaElement } from '../../core/element.js';
@@ -9,6 +12,7 @@ class AdiaSegment extends AdiaElement {
   static properties = {
     value:    { type: String, default: '', reflect: true },
     text:     { type: String, default: '', reflect: true },
+    icon:     { type: String, default: '', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
     selected: { type: Boolean, default: false, reflect: true },
   };
@@ -25,6 +29,22 @@ class AdiaSegment extends AdiaElement {
     this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
     if (this.disabled) this.setAttribute('aria-disabled', 'true');
     else this.removeAttribute('aria-disabled');
+
+    // Stamp/refresh leading icon-ui child when [icon] is set.
+    // Mirrors button-ui's pattern (button.js:29) — author code never
+    // hand-rolls an icon-ui inside a segment.
+    if (this.icon) {
+      const existing = this.querySelector(':scope > icon-ui');
+      if (!existing || existing.getAttribute('name') !== this.icon) {
+        existing?.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        iconEl.setAttribute('aria-hidden', 'true');
+        this.prepend(iconEl);
+      }
+    } else {
+      this.querySelector(':scope > icon-ui')?.remove();
+    }
   }
 }
 customElements.define('segment-ui', AdiaSegment);

package/components/segment/segment.yaml

@@ -13,6 +13,11 @@ props:
     type: boolean
     default: false
     reflect: true
+  icon:
+    description: Phosphor icon name. Rendered as a leading <icon-ui> child stamped on render.
+    type: string
+    default: ""
+    reflect: true
   selected:
     description: Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected.
     type: boolean

package/components/textarea/textarea.css

@@ -91,7 +91,7 @@
 
   /* Placeholder */
   [slot="text"][data-empty]::before {
-    content: attr(aria-placeholder);
+    content: attr(data-placeholder);
     color: var(--textarea-placeholder-fg);
     pointer-events: none;
   }

package/components/textarea/textarea.js

@@ -29,7 +29,7 @@ class AdiaTextarea extends AdiaFormElement {
         ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
         <div slot="text" contenteditable="plaintext-only" tabindex="0"
              ${this.value ? '' : 'data-empty=""'}
-             aria-placeholder="${this.placeholder}"></div>
+             data-placeholder="${this.placeholder}"></div>
       `;
     }
 
@@ -47,7 +47,7 @@ class AdiaTextarea extends AdiaFormElement {
   render() {
     if (!this.#textEl) return;
 
-    this.#textEl.setAttribute('aria-placeholder', this.placeholder);
+    this.#textEl.setAttribute('data-placeholder', this.placeholder);
 
     if (this.disabled || this.readonly) {
       this.#textEl.contentEditable = 'false';

package/core/data-stream.js

@@ -58,6 +58,7 @@ const ATTRS = {
 
 const STREAMS = new Map();           /* streamId → { signal, refs, transport, opts } */
 const ELEMENT_STREAMS = new WeakMap(); /* el → { streamId, dispose, loaded } */
+const PENDING = new Map();           /* streamId → array of whenStream resolvers */
 const WARNED = new WeakSet();
 
 /* Read-only public view of the streams registry. App code can do:
@@ -70,6 +71,21 @@ export const streams = {
   size()  { return STREAMS.size; },
 };
 
+/* Resolves with the stream entry once it's registered. If the stream
+   already exists, resolves synchronously on the next microtask; if not,
+   resolves the moment the first DOM consumer (or any caller of
+   acquireStream) creates it. Useful for cross-package adapters
+   (streams-bridge, A2UI surfaces) that may run before the DOM source
+   has connected. The promise never rejects — pair with AbortSignal at
+   the caller if you need cancellation. */
+export function whenStream(id) {
+  if (STREAMS.has(id)) return Promise.resolve(STREAMS.get(id));
+  return new Promise((resolve) => {
+    if (!PENDING.has(id)) PENDING.set(id, []);
+    PENDING.get(id).push(resolve);
+  });
+}
+
 function attr(el, key) { return el.getAttribute(ATTRS[key]) ?? ''; }
 function dispatch(el, name, detail) {
   el.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
@@ -309,6 +325,11 @@ function acquireStream(id, opts) {
   };
   STREAMS.set(id, stream);
   stream.transport = startTransport(stream);
+  if (PENDING.has(id)) {
+    const resolvers = PENDING.get(id);
+    PENDING.delete(id);
+    for (const r of resolvers) r(stream);
+  }
   return stream;
 }
 

package/core/form.js

@@ -188,10 +188,15 @@ export class AdiaFormElement extends AdiaElement {
    * slots; the per-control `label` attr renders via an inert shadow
    * slot without `[for]`, so click-to-focus doesn't work.
    *
+   * Subclasses that have promoted `label` to a first-class API with
+   * proper a11y wiring (e.g. input-ui's inline-leading caption with
+   * aria-labelledby) opt out by setting `static labelDeprecated = false`.
+   *
    * One-shot per class so the console isn't spammed on docs pages.
    */
   #warnDeprecatedLabel() {
     const ctor = this.constructor;
+    if (ctor.labelDeprecated === false) return;
     if (!ctor.properties?.label) return;
     if (!this.hasAttribute('label')) return;
     if (AdiaFormElement.#labelWarned.has(ctor)) return;

package/core/index.js

@@ -23,3 +23,5 @@ export * from './icons.js';
 export * from './markdown.js';
 export * from './transport.js';
 export * from './polyfills.js';
+export { streams, whenStream } from './data-stream.js';
+export * from './streams-bridge.js';

package/core/streams-bridge.js

@@ -0,0 +1,96 @@
+/**
+ * streams-bridge — proxy data-stream signals into A2UI surface data
+ * models (OD-CHART-16, option b).
+ *
+ *                                effect()
+ *   data-stream signal  ──────────────────────▶  renderer.process({
+ *      (any consumer:                              type: 'updateDataModel',
+ *       chart-ui, table-ui,                        surfaceId, path, value
+ *       headless app code)                       })
+ *
+ * Lives in `web-components/core/` rather than `a2ui-utils/` because
+ * the dependency direction is web-components → a2ui-utils, not the
+ * reverse. The bridge duck-types the renderer (it needs `.process()`,
+ * nothing else), so it works with any A2UI-protocol consumer — the
+ * actual `A2UIRenderer` from `@adia-ai/a2ui-utils`, a custom renderer,
+ * or a test stub.
+ *
+ * Contract:
+ *   - One-way only: stream → data model. A2UI writes back to its model
+ *     (e.g. via `update-data-model` wiring actions) do NOT propagate
+ *     into the stream signal. If you need bidirectional state, the
+ *     stream is the wrong substrate — use a wiring action.
+ *   - Tear down with the returned dispose function. Dispose detaches
+ *     the effect; it does NOT release the stream's refcount, because
+ *     the bridge isn't the source of truth for the stream's lifecycle
+ *     (the DOM consumer or a separate `acquireStream` caller is).
+ *   - `select` uses dot-separated path syntax (matches
+ *     `data-stream-path` on the trait). `path` uses slash-separated
+ *     syntax (matches A2UI bindings).
+ *
+ * Usage:
+ *   const dispose = bridgeStream(renderer, {
+ *     surfaceId: 'main',
+ *     streamId:  'id:rev',           // explicit data-stream-id
+ *     path:      'metrics/revenue',  // A2UI data-model path
+ *     select:    'data',             // optional: sub-path within stream
+ *   });
+ *   // ... later
+ *   dispose();
+ *
+ *   // For DOM-first sources where the stream may register after the
+ *   // bridge call returns:
+ *   const dispose = await bridgeStreamAsync(renderer, opts);
+ */
+
+import { effect } from './signals.js';
+import { streams, whenStream } from './data-stream.js';
+
+function resolveSelect(obj, dottedPath) {
+  if (!dottedPath) return obj;
+  let cursor = obj;
+  for (const seg of dottedPath.split('.')) {
+    if (cursor == null) return null;
+    cursor = cursor[seg];
+  }
+  return cursor;
+}
+
+function attach(renderer, stream, { surfaceId, path, select }) {
+  return effect(() => {
+    const value = stream.signal.value;
+    if (value == null) return;
+    const out = select ? resolveSelect(value, select) : value;
+    renderer.process({ type: 'updateDataModel', surfaceId, path, value: out });
+  });
+}
+
+/**
+ * Bridge a registered stream into a renderer's surface data model.
+ * If the stream is not yet registered, logs a warning and returns a
+ * no-op dispose. Use {@link bridgeStreamAsync} when the stream might
+ * register after this call (e.g. DOM source connecting on the same
+ * tick as the bridge wiring).
+ */
+export function bridgeStream(renderer, opts) {
+  const { streamId } = opts;
+  const stream = streams.get(streamId);
+  if (!stream) {
+    console.warn(
+      `[streams-bridge] stream "${streamId}" not registered — ` +
+      `call bridgeStreamAsync() to wait, or ensure the DOM source is ` +
+      `connected before bridging.`,
+    );
+    return () => {};
+  }
+  return attach(renderer, stream, opts);
+}
+
+/**
+ * Async variant — awaits {@link whenStream} before attaching the
+ * effect. Resolves once the bridge is wired (returns the dispose fn).
+ */
+export async function bridgeStreamAsync(renderer, opts) {
+  const stream = await whenStream(opts.streamId);
+  return attach(renderer, stream, opts);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "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

@@ -149,9 +149,14 @@
      schemes. Anchor color in `typography.css` reads --a-link rather
      than --a-accent-strong; emphasis on hover comes from a tighter
      chroma + darker step rather than full saturation jump. */
-  --a-link:         light-dark(var(--a-accent-65-shade), var(--a-accent-65-tint));
-  --a-link-hover:   light-dark(var(--a-accent-70-shade), var(--a-accent-70-tint));
-  --a-link-visited: light-dark(var(--a-accent-75-shade), var(--a-accent-75-tint));
+  /* Polarity matches `--a-accent-N` family wrappers: at fine steps >50,
+     `tint` is the lower-L (deeper) primitive and `shade` is the higher-L
+     primitive — the naming inverts past the convergence point. Light
+     mode wants dark-on-light, so we pick `tint` (deep accent); dark
+     mode wants light-on-dark, so we pick `shade` (lifted accent). */
+  --a-link:         light-dark(var(--a-accent-65-tint), var(--a-accent-65-shade));
+  --a-link-hover:   light-dark(var(--a-accent-70-tint), var(--a-accent-70-shade));
+  --a-link-visited: light-dark(var(--a-accent-75-tint), var(--a-accent-75-shade));
 
   /* Accent text on accent solid bg — needs light text on dark-ish accent */
   --a-accent-text-strong:   light-dark(var(--a-accent-05-shade), var(--a-accent-05-tint));

package/styles/components.css

@@ -17,6 +17,7 @@
 @import "../components/textarea/textarea.css";
 @import "../components/check/check.css";
 @import "../components/radio/radio.css";
+@import "../components/option-card/option-card.css";
 @import "../components/switch/switch.css";
 @import "../components/slider/slider.css";
 @import "../components/select/select.css";

package/styles/prose.css

@@ -12,10 +12,9 @@
 
 [prose] {
   /* ── Radius — larger bases than UI ── */
-  --a-radius-max:  1.125rem;
-  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.50), var(--a-radius-max));
-  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.625), var(--a-radius-max));
-  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.75), var(--a-radius-max));
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
   --a-radius:      var(--a-radius-md);
 
   /* ── Inset — shifted up the space scale ── */
@@ -165,7 +164,6 @@
 }
 
 [prose] table {
-  margin-block: var(--a-space-4);
   border: 1px solid var(--a-border-subtle);
   border-radius: var(--a-radius-md);
   overflow: hidden;
@@ -177,10 +175,8 @@
 
 [prose] pre {
   padding: var(--a-space-5);
-  margin-block: var(--a-space-4);
 }
 
 [prose] img {
   border-radius: var(--a-radius-lg);
-  margin-block: var(--a-space-3);
 }

package/styles/tokens.css

@@ -82,10 +82,13 @@
      At k=1, values match the original fixed scale.
      k=0 → sharp (clamped to min). k=2 → extra round (clamped to max). */
   --a-radius-min: 0.25rem;
-  --a-radius-max: 1.5rem;
-  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.25), var(--a-radius-max));
-  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.50), var(--a-radius-max));
-  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * 0.75), var(--a-radius-max));
+  --a-radius-max: 1.25rem;
+  --a-radius-sm-k: 0.333;
+  --a-radius-md-k: 0.666;
+  --a-radius-lg-k: 1.000;
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
   --a-radius-full: 100rem;
   --a-radius: var(--a-radius-md);