@adia-ai/web-components 0.0.20 → 0.0.21

package/components/avatar/avatar.js

@@ -1,12 +1,13 @@
 /**
- * <avatar-ui src="photo.jpg" name="Alice Smith" size="md" shape="circle"></avatar-ui>
+ * <avatar-ui src="photo.jpg" text="Alice Smith" size="md" shape="circle"></avatar-ui>
  *
  * Fallback chain: image → initials → empty.
- * If src fails to load, falls back to initials derived from name.
+ * If src fails to load, falls back to initials derived from text.
+ * `name` is a deprecated alias for `text` (warns on use).
  *
  * <avatar-group-ui max="4" size="md">
- *   <avatar-ui name="Alice"></avatar-ui>
- *   <avatar-ui name="Bob"></avatar-ui>
+ *   <avatar-ui text="Alice"></avatar-ui>
+ *   <avatar-ui text="Bob"></avatar-ui>
  *   ...
  * </avatar-group-ui>
  *

package/components/chart-legend/chart-legend.js

@@ -3,8 +3,8 @@
  *
  * Standalone legend primitive for the AdiaUI chart family. Renders a row
  * of badge-ui chips (swatch + label) that are keyboard-focusable and
- * click-toggleable — clicking emits a `legend-toggle` event that consumers
- * (or chart-ui via [for]) wire to series visibility.
+ * click-toggleable — clicking emits a canonical `toggle` event that
+ * consumers (or chart-ui via [for]) wire to series visibility.
  *
  * Attributes:
  *   for        — id-ref of a chart-ui / heatmap-ui to mirror. When set, the
@@ -23,12 +23,12 @@
  *   static     — when set, rows render as non-interactive <span>s. Default
  *                is interactive <button>s that toggle.
  *   on-toggle  — hide | opacity. Default hide. Escape hatch per OD-CHART-09.
- *                Reported via legend-toggle event detail; chart-ui reads it
+ *                Reported via the `toggle` event detail; chart-ui reads it
  *                when wired via [for].
  *
  * Events:
- *   legend-toggle — detail: {key, active, mode}. Fires on row click when
- *                   not [static]. `active` is the new state (true=visible).
+ *   toggle — detail: {key, active, mode}. Fires on row click when
+ *            not [static]. `active` is the new state (true=visible).
  */
 
 import { AdiaElement } from '../../core/element.js';

package/components/pipeline-status/pipeline-status.js

@@ -7,9 +7,11 @@ import { AdiaElement } from '../../core/element.js';
  * an expandable history log. Auto-collapses when the pipeline finishes.
  *
  * Properties:
- *   stage    : String  — current stage name (interpret, analyze, plan, generate, validate, render)
- *   message  : String  — current stage description
- *   complete : Boolean — when true, shows final state and collapses history
+ *   stage   : String — current stage name (interpret, analyze, plan, generate, validate, render)
+ *   message : String — current stage description
+ *   status  : String — 'idle' | 'active' | 'completed' | 'error'. Set to
+ *                       'completed' to render the final state and collapse
+ *                       the history log.
  */
 
 const STAGE_LABELS = {

package/components/timeline/timeline.js

@@ -1,21 +1,23 @@
 /**
  * <timeline-ui> — Vertical (or horizontal) event / progress log.
  *
- * Each <timeline-item-ui> is one entry, with its own state (completed / active
- * / error), optional icon, duration, and an expandable outcomes list.
+ * Each <timeline-item-ui> is one entry, with its own state via the `status`
+ * enum (idle | active | completed | error), optional icon, duration, and an
+ * expandable outcomes list. `[spinner]` is an orthogonal presentation hint
+ * that animates the dot as a ring when combined with `status="active"`.
  *
  *   <timeline-ui>
- *     <timeline-item-ui text="Shipped"   time="2h ago" completed></timeline-item-ui>
- *     <timeline-item-ui text="Delivery"  time="now"    active spinner></timeline-item-ui>
- *     <timeline-item-ui text="Received"                         ></timeline-item-ui>
+ *     <timeline-item-ui text="Shipped"   time="2h ago" status="completed"></timeline-item-ui>
+ *     <timeline-item-ui text="Delivery"  time="now"    status="active" spinner></timeline-item-ui>
+ *     <timeline-item-ui text="Received"></timeline-item-ui>
  *   </timeline-ui>
  *
  * For agent reasoning / pipeline views, set size="sm" and use
- *   duration, outcomes, spinner, error
+ *   duration, outcomes, spinner, status="error"
  *
  *   <timeline-ui size="sm">
- *     <timeline-item-ui text="search" duration="850ms" completed></timeline-item-ui>
- *     <timeline-item-ui text="generate" active spinner></timeline-item-ui>
+ *     <timeline-item-ui text="search" duration="850ms" status="completed"></timeline-item-ui>
+ *     <timeline-item-ui text="generate" status="active" spinner></timeline-item-ui>
  *   </timeline-ui>
  *
  * For wizard / numbered-circle patterns, use the dedicated <stepper-ui>.

package/package.json

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