@adia-ai/web-components 0.0.14 → 0.0.16

package/README.md

@@ -42,7 +42,9 @@ web-components/
 │   ├── provider.js      global provider registration + router-ui
 │   ├── anchor.js        popover + anchor-positioning
 │   ├── markdown.js      lightweight markdown renderer
-│   └── transport.js     SSE / streaming helpers for LLM adapters
+│   ├── transport.js     SSE / streaming helpers for LLM adapters
+│   └── data-stream.js   `data-stream-*` attribute trait (HTTP/SSE/WS,
+│                        signal-backed, refcounted shared transports)
 │
 ├── components/     — 80 *-ui custom elements
 │   └── <tag>/
@@ -159,6 +161,46 @@ Accepts the four A2UI message kinds: `updateComponents`,
 normalizes LLM-emitted aliases (e.g. `Carousel` → `swiper-ui`) so generated
 output is robust to name drift.
 
+## Data streaming via `data-stream-*` attributes
+
+Any element with a settable `.data` property — chart-ui, table-ui,
+heatmap-ui, stat-ui, list-ui, etc. — can be fed from a backing
+source via attributes alone. No per-component opt-in:
+
+```html
+<!-- HTTP one-shot fetch, JSON -->
+<chart-ui type="area" x="month" y="revenue"
+          data-stream-src="/api/revenue?range=3m"
+          data-stream-path="data"></chart-ui>
+
+<!-- HTTP polling every 5s -->
+<table-ui sortable striped
+          data-stream-src="/api/orders"
+          data-stream-interval="5000"></table-ui>
+
+<!-- Server-Sent Events, append on each message -->
+<heatmap-ui type="matrix" rows="7" cols="52"
+            data-stream-src="/sse/activity"
+            data-stream-mode="sse"
+            data-stream-merge="append"></heatmap-ui>
+
+<!-- Spread a multi-property response onto the element -->
+<stat-ui data-stream-src="/api/kpi"
+         data-stream-target="*"></stat-ui>
+```
+
+Modes: HTTP (one-shot or polling), `sse` (`EventSource`), `ws`
+(`WebSocket`). Formats: `json` (default), `csv`, `tsv`, `jsonl`,
+`text` — auto-detected from URL extension or content-type. Two
+elements with attribute-identical streams share one transport
+(refcounted, signal-backed); explicit `data-stream-id` lets
+unrelated configs share intentionally. Programmatic access via
+the `streams` registry export from `core/data-stream.js`.
+
+Implementation: `core/data-stream.js` (~360 lines). Full
+attribute table + live demos:
+[`/site/components/chart#data-stream`](./site/pages/components/chart/index.html).
+
 ## Build
 
 ```bash

package/components/alert/alert.css

@@ -65,6 +65,11 @@
   :scope [slot="leading"] {
     flex-shrink: 0;
     color: var(--alert-icon-fg);
+    /* `ensure()` appends the leading-slot icon to the host, which
+       puts it after any consumer-provided content in DOM order.
+       Force it to the visual lead via flex `order` so the icon
+       always reads first. */
+    order: -1;
   }
 
   :scope [slot="content"] {

package/components/alert/alert.js

@@ -66,9 +66,11 @@ class AdiaAlert extends AdiaElement {
       this.drop('leading');
     }
 
-    // Text
+    // Text — only write from the `text` attribute when it's set, so
+    // consumers passing rich content via `<span slot="content">…</span>`
+    // (links, <strong>, etc.) aren't clobbered with empty textContent.
     const content = this.ensure('content');
-    if (content) content.textContent = this.text;
+    if (content && this.text) content.textContent = this.text;
 
     // Close button
     if (this.closable) {

package/components/button/button.js

@@ -22,7 +22,10 @@ class AdiaButton extends AdiaElement {
   }
 
   render() {
-    this.setAttribute('aria-label', this.text || '');
+    // Don't clobber a user-provided aria-label with an empty string when
+    // text is unset (e.g. icon-only button with author-set aria-label).
+    // Only auto-set when we have meaningful text to put there.
+    if (this.text) this.setAttribute('aria-label', this.text);
     if (this.icon) {
       const existing = this.querySelector('icon-ui');
       if (!existing || existing.name !== this.icon) {

package/components/chart/chart.js

@@ -885,15 +885,18 @@ class AdiaChart extends AdiaElement {
 
     try { this.#tipEl.showPopover(); } catch (_) { /* popover not supported */ }
 
-    /* Follow the cursor — offset up-right, clamp to viewport */
+    /* Follow the cursor — centered horizontally above, clamp to viewport
+       with an 8px edge-pad, flip below when there's no room above. */
     const gap = 12;
+    const edgePad = 8;
     const { clientX, clientY } = event;
     const tw = this.#tipEl.offsetWidth  || 0;
     const th = this.#tipEl.offsetHeight || 0;
-    let x = clientX + gap;
+    let x = clientX - tw / 2;
     let y = clientY - th - gap;
-    if (x + tw > window.innerWidth)  x = clientX - tw - gap;
-    if (y < 0)                       y = clientY + gap;
+    if (x < edgePad)                         x = edgePad;
+    if (x + tw > window.innerWidth - edgePad) x = window.innerWidth - tw - edgePad;
+    if (y < edgePad)                         y = clientY + gap;
     this.#tipEl.style.left = `${x}px`;
     this.#tipEl.style.top  = `${y}px`;
   }

package/components/chat/chat-input.js

@@ -85,8 +85,8 @@ class AdiaChatInput extends AdiaElement {
       this.innerHTML = `
         <textarea-ui placeholder="${this.placeholder}" rows="1"></textarea-ui>
         <div slot="toolbar">
-          <select-ui slot="model" placeholder="Model" divider></select-ui>
-          <button-ui icon="paper-plane-right" variant="ghost" slot="send"></button-ui>
+          <select-ui slot="model" placeholder="Model" aria-label="Select model" divider></select-ui>
+          <button-ui icon="paper-plane-right" variant="ghost" slot="send" aria-label="Send message"></button-ui>
         </div>
       `;
     }
@@ -95,6 +95,16 @@ class AdiaChatInput extends AdiaElement {
     this.#sendEl = this.querySelector('[slot="send"]');
     this.#modelEl = this.querySelector('[slot="model"]');
 
+    // Default aria-labels on author-provided send/model when not set —
+    // these elements are screen-reader-relevant and shouldn't fall back
+    // to the icon-name announcement.
+    if (this.#sendEl && !this.#sendEl.hasAttribute('aria-label')) {
+      this.#sendEl.setAttribute('aria-label', 'Send message');
+    }
+    if (this.#modelEl && !this.#modelEl.hasAttribute('aria-label')) {
+      this.#modelEl.setAttribute('aria-label', 'Select model');
+    }
+
     // Apply models if set before connected (options first, then value)
     if (this.#models.length && this.#modelEl) {
       this.#modelEl.options = this.#models;
@@ -116,6 +126,7 @@ class AdiaChatInput extends AdiaElement {
       this.#attachBtn.setAttribute('variant', 'ghost');
       this.#attachBtn.setAttribute('slot', 'attach');
       this.#attachBtn.setAttribute('size', 'sm');
+      this.#attachBtn.setAttribute('aria-label', 'Attach image');
       const sendBtn = toolbar.querySelector('[slot="send"]');
       toolbar.insertBefore(this.#attachBtn, sendBtn);
       this.#attachBtn.addEventListener('press', this.#onAttachPress);

package/components/description-list/description-list.js

@@ -30,9 +30,10 @@ class AdiaDescriptionList extends AdiaElement {
   static template = () => null;
 
   connected() {
-    // Use the native <dl> role by wrapping or using the tag directly —
-    // since we're a custom element, we set role explicitly.
-    this.setAttribute('role', 'list');
+    // ARIA 1.2: list role requires listitem children, but <dt>/<dd>
+    // aren't listitems. group role is the accurate fit for a
+    // labeled-pairs grouping.
+    this.setAttribute('role', 'group');
   }
 
   render() {

package/components/field/field.css

@@ -7,105 +7,155 @@
     --field-label-weight:    var(--a-weight-medium);
     --field-required-color:  var(--a-danger);
     --field-trailing-color:  var(--a-fg-subtle);
-    --field-trailing-size:   var(--a-ui-tiny);
+    --field-trailing-size:   var(--a-ui-sm);
     --field-hint-color:      var(--a-fg-muted);
-    --field-hint-size:       var(--a-ui-tiny);
+    --field-hint-size:       var(--a-ui-sm);
     --field-error-color:     var(--a-danger);
-    --field-error-size:      var(--a-ui-tiny);
+    --field-error-size:      var(--a-ui-sm);
+
+    /* In inline mode, the label column auto-sizes by default (each
+       field's label column is independent of its siblings). Consumers
+       that want shared label-column alignment across stacked inline
+       fields can raise this floor — e.g. 12rem in a multi-field form. */
+    --field-label-inline-min: 0;
   }
 
-  /* ── Base — stacked: three flex rows stacked vertically.
-       Each row is its own flex container so `trailing` and `action`
-       size independently (the previous single-grid shared column 2
-       across rows and made them co-sized). ── */
+  /* ── Base — single grid; children placed by [slot] attribute via
+       named grid-areas. No row wrappers; no DOM reparenting. The
+       template adapts via `:has()` to which slots are present so
+       empty tracks don't leak column-gap. ── */
   :scope {
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--field-gap);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "label"
+      "control"
+      "message";
+    column-gap: var(--field-gap);
+    row-gap: var(--field-gap);
+    align-items: center;
   }
 
-  :scope > [data-row] {
-    display: flex;
-    align-items: center;
-    gap: var(--field-gap);
-    min-width: 0;
+  /* Stacked + (trailing or action) → 2-col */
+  :scope:has(> :is([slot="trailing"], [slot="action"])) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   trailing"
+      "control action"
+      "message message";
+  }
+
+  /* Stacked + no label, no trailing → drop the empty top row. */
+  :scope:not([label]):not(:has(> [slot="trailing"])) {
+    grid-template-areas:
+      "control"
+      "message";
+  }
+  :scope:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "control action"
+      "message message";
   }
 
-  /* label-row — label grows, trailing auto-sizes and right-aligns. */
-  :scope > [data-row="label"] > [data-field-label] {
-    flex: 1 1 auto;
+  /* Hide the label cell when the label attr is absent. */
+  :scope:not([label]) > [slot="label"] { display: none; }
+
+  /* ── Slot styling ── */
+  :scope > [slot="label"] {
+    grid-area: label;
     color: var(--field-label-color);
     font-size: var(--field-label-size);
     font-weight: var(--field-label-weight);
     cursor: pointer;
     min-width: 0;
   }
-  :scope > [data-row="label"] > [data-field-label] > [data-field-required] {
+  :scope > [slot="label"] > [data-field-required] {
     color: var(--field-required-color);
     margin-inline-start: 0.15em;
     font-weight: var(--a-weight-bold);
   }
-  :scope > [data-row="label"] > [slot="trailing"] {
-    flex: 0 0 auto;
+  :scope > [slot="trailing"] {
+    grid-area: trailing;
+    justify-self: end;
     color: var(--field-trailing-color);
     font-size: var(--field-trailing-size);
   }
-
-  /* control-row — control grows, action auto-sizes. */
-  :scope > [data-row="control"] > :not([slot="action"]) {
-    flex: 1 1 auto;
+  :scope > :not([slot]) {
+    grid-area: control;
     min-width: 0;
   }
-  :scope > [data-row="control"] > [slot="action"] {
-    flex: 0 0 auto;
+  :scope > [slot="action"] {
+    grid-area: action;
+    justify-self: end;
   }
-
-  /* message-row — hint or error; collapsed via [hidden] when both empty. */
-  :scope > [data-row="message"] > [data-field-hint] {
+  :scope > [slot="hint"],
+  :scope > [slot="error"] {
+    grid-area: message;
+    line-height: 1.3;
+  }
+  :scope > [slot="hint"] {
     color: var(--field-hint-color);
     font-size: var(--field-hint-size);
-    line-height: 1.3;
   }
-  :scope > [data-row="message"] > [data-field-error] {
+  :scope > [slot="error"] {
     color: var(--field-error-color);
     font-size: var(--field-error-size);
-    line-height: 1.3;
     font-weight: var(--a-weight-medium);
   }
 
-  /* Hide the whole label-row when there's no label AND no trailing —
-     prevents an empty row stealing vertical gap. */
-  :scope:not([label]) > [data-row="label"] > [data-field-label] {
-    display: none;
+  /* ── Mode: inline — content slots on row 1, message row below
+       (aligned with the control column so hint/error sit under the
+       input, not under the label). Templates branch by which
+       optional slots are present so we don't carry zero-width
+       tracks + their gaps. ── */
+  :scope[inline] {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr);
+    grid-template-areas:
+      "label   control"
+      ".       message";
   }
-  :scope:not([label]) > [data-row="label"]:not(:has(> [slot="trailing"])) {
-    display: none;
+  :scope[inline]:has(> [slot="trailing"]):not(:has(> [slot="action"])) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr);
+    grid-template-areas:
+      "label   trailing control"
+      ".       .        message";
   }
-
-  /* ── Mode: inline — flatten label-row + control-row into a single
-       grid row. `display: contents` promotes the row wrappers' children
-       directly to :scope's grid, keeping per-cell independence. The
-       message-row stays a block row below. ── */
-  :scope[inline] {
-    display: grid;
-    grid-template-columns: auto auto 1fr auto;
-    grid-template-rows: auto auto;
-    gap: var(--field-gap);
-    align-items: center;
+  :scope[inline]:not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   control action"
+      ".       message message";
+  }
+  :scope[inline]:has(> [slot="trailing"]):has(> [slot="action"]) {
+    grid-template-columns: minmax(var(--field-label-inline-min), auto) auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label   trailing control action"
+      ".       .        message message";
   }
-  :scope[inline] > [data-row="label"],
-  :scope[inline] > [data-row="control"] {
-    display: contents;
-  }
-  :scope[inline] > [data-row="label"] > [data-field-label]        { grid-column: 1; grid-row: 1; justify-self: start; }
-  :scope[inline] > [data-row="label"] > [slot="trailing"]         { grid-column: 2; grid-row: 1; justify-self: start; }
-  :scope[inline] > [data-row="control"] > :not([slot="action"])   { grid-column: 3; grid-row: 1; }
-  :scope[inline] > [data-row="control"] > [slot="action"]         { grid-column: 4; grid-row: 1; justify-self: end; }
-  :scope[inline] > [data-row="message"] {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    display: flex;
-    gap: var(--field-gap);
+  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):not(:has(> [slot="action"])) {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "control"
+      "message";
+  }
+  :scope[inline]:not([label]):not(:has(> [slot="trailing"])):has(> [slot="action"]) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "control action"
+      "message message";
+  }
+
+  /* In inline mode, push compact toggle controls (switch / check /
+     radio) to the row's end edge — settings rows then render label-
+     left, control-right regardless of label length. Wide controls
+     (input / textarea / select) keep their default stretch behavior
+     so they fill the trailing column. Already in HEAD as `356a39f`
+     against the row-wrapper model; the second selector here keeps
+     the rule alive once the v2 flat-DOM refactor (§18) lands. */
+  :scope[inline]:has(:is(switch-ui, check-ui, radio-ui)) > [data-row="control"] > :not([slot="action"]),
+  :scope[inline]:has(> :is(switch-ui, check-ui, radio-ui)) > :not([slot]) {
+    justify-self: end;
   }
 }