@adia-ai/web-components 0.0.14 → 0.0.16

package/core/data-stream.js

@@ -0,0 +1,486 @@
+/**
+ * data-stream — attribute-driven data ingestion, signal-backed.
+ *
+ * Architecture (signal-based, refcounted):
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │ STREAMS: Map<streamId, { signal, refs, transport, opts }>│
+ *   └──────────────────────────────────────────────────────────┘
+ *                  │ first ref creates transport
+ *                  │ each tick / message: signal.value = parsed
+ *                  │ last ref ends transport
+ *                  ▼
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │ Per-element effect:                                      │
+ *   │   effect(() => applyData(el, stream.signal.value, opts)) │
+ *   │ Subscribes to the shared signal — fires on every update. │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Stream identity:
+ *   - Explicit `data-stream-id="..."` shares across elements.
+ *   - When unset, the id is a stable hash of (src, mode, interval,
+ *     method, body, headers, format, event). Two elements with
+ *     attribute-identical configs share one transport automatically.
+ *
+ * Universal applicability — any element with a settable property:
+ *   <chart-ui    data-stream-src="/api/series" data-stream-path="data">
+ *   <table-ui    data-stream-src="/api/orders" data-stream-interval="5000">
+ *   <stat-ui     data-stream-src="/api/kpi"    data-stream-target="*">
+ *   <text-ui     data-stream-src="/api/range"  data-stream-target="textContent">
+ *   <heatmap-ui  data-stream-src="/sse/cells"  data-stream-mode="sse">
+ *
+ * Programmatic access: `streams` is exported as a read-only Map of
+ * stream-id → signal so app code can subscribe with `effect()` or read
+ * `.value` directly.
+ *
+ * Events (all bubble from the element):
+ *   stream-load   — first signal value received for this element
+ *   stream-update — each subsequent value, detail.data = the new value
+ *   stream-error  — transport-level error, detail.error = message
+ */
+
+import { signal, effect, untracked } from './signals.js';
+
+const ATTRS = {
+  src:       'data-stream-src',
+  mode:      'data-stream-mode',
+  interval:  'data-stream-interval',
+  path:      'data-stream-path',
+  event:     'data-stream-event',
+  method:    'data-stream-method',
+  headers:   'data-stream-headers',
+  body:      'data-stream-body',
+  target:    'data-stream-target',
+  merge:     'data-stream-merge',
+  format:    'data-stream-format',
+  id:        'data-stream-id',
+};
+
+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:
+   `import { streams } from '@adia-ai/web-components/core/data-stream';
+    streams.get('rev').signal.value` to read; subscribe via effect(). */
+export const streams = {
+  get(id) { return STREAMS.get(id); },
+  has(id) { return STREAMS.has(id); },
+  keys()  { return STREAMS.keys(); },
+  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 }));
+}
+function warnOnce(el, msg) {
+  if (WARNED.has(el)) return;
+  WARNED.add(el);
+  console.warn(`[data-stream] ${msg}`);
+}
+
+/* Stable string hash of a config for auto-id. djb2-style; collisions
+   would be benign (two streams share a transport that fetches the same
+   thing) but practically impossible for distinct configs. */
+function configHash(parts) {
+  const s = parts.join('|');
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return `auto:${(h >>> 0).toString(36)}`;
+}
+
+function streamIdFor(el) {
+  const explicit = attr(el, 'id');
+  if (explicit) return `id:${explicit}`;
+  return configHash([
+    attr(el, 'src'), attr(el, 'mode'), attr(el, 'interval'),
+    attr(el, 'method'), attr(el, 'body'), attr(el, 'headers'),
+    attr(el, 'format'), attr(el, 'event'),
+  ]);
+}
+
+function streamConfigFor(el) {
+  return {
+    src:      attr(el, 'src'),
+    mode:     (attr(el, 'mode') || 'http').toLowerCase(),
+    interval: parseInt(attr(el, 'interval'), 10) || 0,
+    method:   attr(el, 'method') || 'GET',
+    body:     attr(el, 'body') || undefined,
+    headers:  parseHeaders(attr(el, 'headers')),
+    format:   attr(el, 'format'),
+    event:    attr(el, 'event') || 'message',
+  };
+}
+
+function parseHeaders(raw) {
+  if (!raw) return undefined;
+  try { return JSON.parse(raw); } catch { return undefined; }
+}
+
+/* ── Format parsing (CSV / TSV / JSONL / text / json) ──────────────── */
+
+function detectFormat(src, contentType) {
+  const url = src.toLowerCase().split('?')[0];
+  if (url.endsWith('.csv'))   return 'csv';
+  if (url.endsWith('.tsv'))   return 'tsv';
+  if (url.endsWith('.jsonl') || url.endsWith('.ndjson')) return 'jsonl';
+  if (url.endsWith('.txt'))   return 'text';
+  const ct = (contentType || '').toLowerCase();
+  if (ct.includes('text/csv'))                  return 'csv';
+  if (ct.includes('text/tab-separated-values')) return 'tsv';
+  if (ct.includes('application/x-ndjson') ||
+      ct.includes('application/jsonl'))         return 'jsonl';
+  if (ct.includes('text/plain') && !ct.includes('json')) return 'text';
+  return 'json';
+}
+
+function parseDelimited(text, delimiter) {
+  const rows = []; let row = []; let cell = ''; let inQuote = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (inQuote) {
+      if (c === '"') { if (text[i + 1] === '"') { cell += '"'; i++; } else inQuote = false; }
+      else cell += c;
+    } else {
+      if (c === '"' && cell === '') inQuote = true;
+      else if (c === delimiter) { row.push(cell); cell = ''; }
+      else if (c === '\n') { row.push(cell); rows.push(row); row = []; cell = ''; }
+      else if (c === '\r') { /* skip */ }
+      else cell += c;
+    }
+  }
+  if (cell !== '' || row.length > 0) { row.push(cell); rows.push(row); }
+  if (rows.length === 0) return [];
+  const header = rows.shift();
+  return rows
+    .filter(r => !(r.length === 1 && r[0] === ''))
+    .filter(r => r.length === header.length)
+    .map(r => {
+      const obj = {};
+      for (let i = 0; i < header.length; i++) {
+        const v = r[i]; const n = +v;
+        obj[header[i]] = (v !== '' && Number.isFinite(n) && /^-?\d/.test(v)) ? n : v;
+      }
+      return obj;
+    });
+}
+
+function parseJSONL(text) {
+  const out = [];
+  for (const line of text.split('\n')) {
+    const t = line.trim();
+    if (!t || t.startsWith('//')) continue;
+    try { out.push(JSON.parse(t)); } catch { /* skip */ }
+  }
+  return out;
+}
+
+function parseBody(text, format) {
+  switch (format) {
+    case 'json':  return JSON.parse(text);
+    case 'csv':   return parseDelimited(text, ',');
+    case 'tsv':   return parseDelimited(text, '\t');
+    case 'jsonl': return parseJSONL(text);
+    case 'text':  return text;
+    default:      return JSON.parse(text);
+  }
+}
+
+/* ── Transports (HTTP / SSE / WS) — write to stream.signal ─────────── */
+
+function startTransport(stream) {
+  const { src, mode } = stream.opts;
+  if (!src) return { stop() {} };
+  if (mode === 'http') return startHTTP(stream);
+  if (mode === 'sse')  return startSSE(stream);
+  if (mode === 'ws' || mode === 'websocket') return startWS(stream);
+  console.warn(`[data-stream] Unknown mode "${mode}". Use http, sse, or ws.`);
+  return { stop() {} };
+}
+
+function startHTTP(stream) {
+  const { src, interval, method, body, headers, format: explicit } = stream.opts;
+  const abort = new AbortController();
+  let timer = null;
+  let stopped = false;
+
+  const tick = async () => {
+    if (stopped) return;
+    try {
+      const r = await fetch(src, { method, headers, body, signal: abort.signal });
+      if (!r.ok) throw new Error(`HTTP ${r.status} ${r.statusText}`);
+      const text = await r.text();
+      if (stopped) return;
+      const ct = r.headers.get('content-type') || '';
+      const format = explicit || detectFormat(src, ct);
+      let data;
+      try { data = parseBody(text, format); }
+      catch (e) { stream.lastError = `Parse error (${format}): ${e.message}`; return; }
+      stream.signal.value = data;
+    } catch (e) {
+      if (e.name === 'AbortError') return;
+      stream.lastError = e.message;
+      stream.errorTick = (stream.errorTick || 0) + 1;
+      /* Bump error counter signal so subscribers see it too. */
+      if (stream.errorSignal) stream.errorSignal.value = stream.errorTick;
+    }
+  };
+
+  tick();
+  if (interval > 0) timer = setInterval(tick, interval);
+
+  return {
+    stop() {
+      stopped = true;
+      abort.abort();
+      if (timer) clearInterval(timer);
+    },
+  };
+}
+
+function startSSE(stream) {
+  const { src, event: eventName, format: explicit } = stream.opts;
+  if (typeof EventSource === 'undefined') {
+    console.warn('[data-stream] EventSource not available; SSE mode is a no-op here.');
+    return { stop() {} };
+  }
+  const es = new EventSource(src);
+  es.addEventListener(eventName, (e) => {
+    try {
+      const format = explicit || 'json';
+      stream.signal.value = parseBody(e.data, format);
+    } catch (err) {
+      stream.lastError = `SSE parse error: ${err.message}`;
+      stream.errorTick = (stream.errorTick || 0) + 1;
+      if (stream.errorSignal) stream.errorSignal.value = stream.errorTick;
+    }
+  });
+  es.addEventListener('error', () => {
+    stream.lastError = 'SSE connection error';
+    stream.errorTick = (stream.errorTick || 0) + 1;
+    if (stream.errorSignal) stream.errorSignal.value = stream.errorTick;
+  });
+  return { stop() { es.close(); } };
+}
+
+function startWS(stream) {
+  const { src, format: explicit } = stream.opts;
+  if (typeof WebSocket === 'undefined') {
+    console.warn('[data-stream] WebSocket not available; ws mode is a no-op here.');
+    return { stop() {} };
+  }
+  const ws = new WebSocket(src);
+  ws.addEventListener('message', (e) => {
+    try {
+      const format = explicit || 'json';
+      stream.signal.value = parseBody(typeof e.data === 'string' ? e.data : String(e.data), format);
+    } catch (err) {
+      stream.lastError = `WebSocket parse error: ${err.message}`;
+      stream.errorTick = (stream.errorTick || 0) + 1;
+      if (stream.errorSignal) stream.errorSignal.value = stream.errorTick;
+    }
+  });
+  ws.addEventListener('error', () => {
+    stream.lastError = 'WebSocket error';
+    stream.errorTick = (stream.errorTick || 0) + 1;
+    if (stream.errorSignal) stream.errorSignal.value = stream.errorTick;
+  });
+  return { stop() { ws.close(); } };
+}
+
+/* ── Stream registry ───────────────────────────────────────────────── */
+
+function acquireStream(id, opts) {
+  let stream = STREAMS.get(id);
+  if (stream) {
+    stream.refs++;
+    return stream;
+  }
+  stream = {
+    id,
+    opts,
+    signal: signal(null),
+    errorSignal: signal(0),  /* monotonic — bumps on each transport-level error */
+    refs: 1,
+    transport: null,
+    lastError: null,
+    errorTick: 0,
+  };
+  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;
+}
+
+function releaseStream(stream) {
+  stream.refs--;
+  if (stream.refs <= 0) {
+    stream.transport?.stop();
+    STREAMS.delete(stream.id);
+  }
+}
+
+/* ── Apply incoming data to the element ────────────────────────────── */
+
+function resolvePath(obj, path) {
+  if (!path) return obj;
+  let cursor = obj;
+  for (const seg of path.split('.')) {
+    if (cursor == null) return null;
+    cursor = cursor[seg];
+  }
+  return cursor;
+}
+
+function applyData(el, raw, opts) {
+  let data = resolvePath(raw, opts.path);
+  if (data == null) return;
+
+  const target = opts.target || 'data';
+  const merge = opts.merge || 'replace';
+
+  if (target === '*') {
+    if (data && typeof data === 'object' && !Array.isArray(data)) {
+      Object.assign(el, data);
+      dispatch(el, 'stream-update', { data });
+      return;
+    }
+    el.data = data;
+    dispatch(el, 'stream-update', { data });
+    return;
+  }
+
+  if ((merge === 'append' || merge === 'prepend') && Array.isArray(data) && Array.isArray(el[target])) {
+    el[target] = merge === 'append'
+      ? [...el[target], ...data]
+      : [...data, ...el[target]];
+  } else {
+    el[target] = data;
+  }
+  dispatch(el, 'stream-update', { data });
+}
+
+/* ── Per-element lifecycle ─────────────────────────────────────────── */
+
+export function start(el) {
+  stop(el);
+  if (!el.isConnected) return;
+  const src = attr(el, 'src');
+  if (!src) return;
+
+  const id = streamIdFor(el);
+  const opts = streamConfigFor(el);
+  const stream = acquireStream(id, opts);
+
+  /* Per-element apply options — read fresh each effect run so live attr
+     edits to path/target/merge take effect without restart. */
+  const elState = { streamId: id, loaded: false, dispose: null };
+  ELEMENT_STREAMS.set(el, elState);
+
+  /* Subscribe to data + error signals via two effects so each can dispose
+     independently. The data effect short-circuits on initial null. */
+  const dataDispose = effect(() => {
+    const value = stream.signal.value;
+    if (value == null) return;
+    untracked(() => {
+      if (!elState.loaded) {
+        elState.loaded = true;
+        dispatch(el, 'stream-load', {});
+      }
+      const applyOpts = {
+        path:   attr(el, 'path'),
+        target: attr(el, 'target') || 'data',
+        merge:  attr(el, 'merge')  || 'replace',
+      };
+      applyData(el, value, applyOpts);
+    });
+  });
+
+  const errorDispose = effect(() => {
+    const tick = stream.errorSignal.value;
+    if (tick === 0) return;
+    untracked(() => {
+      if (stream.lastError) dispatch(el, 'stream-error', { error: stream.lastError });
+    });
+  });
+
+  elState.dispose = () => { dataDispose(); errorDispose(); };
+}
+
+export function stop(el) {
+  const entry = ELEMENT_STREAMS.get(el);
+  if (!entry) return;
+  entry.dispose?.();
+  const stream = STREAMS.get(entry.streamId);
+  if (stream) releaseStream(stream);
+  ELEMENT_STREAMS.delete(el);
+}
+
+/* ── Document-level observer ───────────────────────────────────────── */
+
+const ATTR_FILTER = Object.values(ATTRS);
+
+function isStreamingEl(node) {
+  return node && node.nodeType === 1 && node.hasAttribute && node.hasAttribute(ATTRS.src);
+}
+
+function visitSubtree(root, fn) {
+  if (root.nodeType !== 1) return;
+  if (isStreamingEl(root)) fn(root);
+  if (root.querySelectorAll) {
+    root.querySelectorAll(`[${ATTRS.src}]`).forEach(fn);
+  }
+}
+
+const observer = new MutationObserver((mutations) => {
+  for (const m of mutations) {
+    if (m.type === 'attributes' && ATTR_FILTER.includes(m.attributeName)) {
+      const el = m.target;
+      if (isStreamingEl(el)) start(el);
+      else stop(el);
+      continue;
+    }
+    if (m.type === 'childList') {
+      m.addedNodes.forEach(n => visitSubtree(n, start));
+      m.removedNodes.forEach(n => visitSubtree(n, stop));
+    }
+  }
+});
+
+function bootstrap() {
+  if (typeof document === 'undefined') return;
+  observer.observe(document.documentElement, {
+    childList: true, subtree: true,
+    attributes: true, attributeFilter: ATTR_FILTER,
+  });
+  document.querySelectorAll(`[${ATTRS.src}]`).forEach(start);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  } else {
+    bootstrap();
+  }
+}

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.14",
+  "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

@@ -78,10 +78,14 @@
   /* Text on neutral surfaces — low shade steps = dark text for light mode.
      Dark-mode tint spread widened: text→subtle gap 25→35 steps,
      subtle→disabled gap 10→15 steps, for clearer visual hierarchy. */
+  /* Subtle + muted lifted one fine-step shade-side to clear WCAG AA
+     4.5:1 on canvas-0/1/2 in both schemes. Subtle ↔ muted gap
+     compresses from 10 to 5 step-fractions — visual hierarchy
+     leans more on font-weight + size and less on shade contrast. */
   --a-canvas-text-strong:   light-dark(var(--a-neutral-05-shade), var(--a-neutral-05-tint));
   --a-canvas-text:          light-dark(var(--a-neutral-30-shade), var(--a-neutral-30-tint));
-  --a-canvas-text-subtle:   light-dark(var(--a-neutral-40-shade), var(--a-neutral-40-tint));
-  --a-canvas-text-muted:    light-dark(var(--a-neutral-50-shade), var(--a-neutral-50-tint));
+  --a-canvas-text-subtle:   light-dark(var(--a-neutral-35-shade), var(--a-neutral-35-tint));
+  --a-canvas-text-muted:    light-dark(var(--a-neutral-40-shade), var(--a-neutral-40-tint));
   --a-canvas-text-disabled: light-dark(var(--a-neutral-60-shade), var(--a-neutral-60-tint));
   --a-canvas-text-inverse:  var(--a-neutral-10);
 
@@ -140,6 +144,20 @@
   --a-accent-active:   var(--a-accent-60);
   --a-accent-selected: var(--a-accent-50);
 
+  /* Link family — derived from accent steps deeper than --a-accent-strong
+     (step-50) so links clear WCAG AA 4.5:1 on canvas-0/1/2 in both
+     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. */
+  /* 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));
   --a-accent-text:          light-dark(var(--a-accent-10-shade), var(--a-accent-10-tint));
@@ -466,7 +484,7 @@
      ══════════════════════════════════════════════════════════════ */
 
   --a-ui-bg:               var(--a-canvas-0-scrim);
-  --a-ui-bg-hover:         var(--a-canvas-0-scrim);
+  --a-ui-bg-hover:         var(--a-canvas-2-scrim);
   --a-ui-bg-active:        var(--a-canvas-0);
   --a-ui-bg-selected:      var(--a-canvas-bright);
   --a-ui-bg-disabled:      var(--a-canvas-1);

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";