@adia-ai/web-components 0.0.27 → 0.0.28

package/components/swatch/swatch.js

@@ -0,0 +1,121 @@
+/**
+ * <swatch-ui> — color / style sample primitive.
+ *
+ * A small inline tile representing one visual sample — a chart series's
+ * legend marker, a design-token step in a color or spacing scale, a
+ * theme-preview pill. Replaces docs-only `<span data-swatch>` usage and
+ * the per-shape CSS that used to live inside chart-legend-ui.
+ *
+ * Usage:
+ *   <swatch-ui shape="dot" color="var(--a-data-0)" label="Revenue"></swatch-ui>
+ *   <swatch-ui shape="block" size="lg" color="var(--a-neutral-50)" label="50"></swatch-ui>
+ *   <swatch-ui shape="line" color="#0ea5e9">Forecast</swatch-ui>
+ *
+ * Attributes:
+ *   shape  — block | dot | square | line | dashed (default square)
+ *   size   — sm | md | lg (default md). lg is the 40px-tall token-scale block.
+ *   color  — any CSS color (or var() ref). Sets --swatch-color internally.
+ *   label  — optional text label rendered beside / below the swatch
+ *
+ * Slots:
+ *   default — rich label content; takes precedence over [label] attr
+ *
+ * Stamping is light-DOM with two children:
+ *   <span data-tile></span>     — the colored shape
+ *   <span data-label></span>    — the label text (omitted when no label/slot)
+ */
+
+import { AdiaElement } from '../../core/element.js';
+
+const SHAPES = new Set(['block', 'dot', 'square', 'line', 'dashed']);
+const SIZES = new Set(['sm', 'md', 'lg']);
+
+class AdiaSwatch extends AdiaElement {
+  static properties = {
+    shape: { type: String, default: 'square', reflect: true },
+    size:  { type: String, default: 'md',     reflect: true },
+    color: { type: String, default: '',       reflect: true },
+    label: { type: String, default: '',       reflect: true },
+  };
+
+  static template = () => null;
+
+  #tileEl = null;
+  #labelEl = null;
+  #stamped = false;
+
+  connected() {
+    this.#stamp();
+  }
+
+  render() {
+    this.#stamp();
+    this.#sync();
+  }
+
+  #stamp() {
+    if (this.#stamped) return;
+    // Capture pre-existing default-slot content so consumer-authored
+    // children (e.g. <swatch-ui>Forecast</swatch-ui>) survive stamping.
+    const slotted = Array.from(this.childNodes).filter(n =>
+      !(n.nodeType === 1 && (n.dataset?.tile !== undefined || n.dataset?.label !== undefined))
+    );
+    this.innerHTML = '';
+
+    this.#tileEl = document.createElement('span');
+    this.#tileEl.setAttribute('data-tile', '');
+    this.#tileEl.setAttribute('aria-hidden', 'true');
+    this.appendChild(this.#tileEl);
+
+    this.#labelEl = document.createElement('span');
+    this.#labelEl.setAttribute('data-label', '');
+    if (slotted.length) {
+      for (const n of slotted) this.#labelEl.appendChild(n);
+    }
+    this.appendChild(this.#labelEl);
+
+    this.#stamped = true;
+  }
+
+  #sync() {
+    if (!this.#tileEl || !this.#labelEl) return;
+
+    // Normalize enum values; fall back silently when a consumer sets a typo.
+    const shape = SHAPES.has(this.shape) ? this.shape : 'square';
+    const size  = SIZES.has(this.size)   ? this.size  : 'md';
+    if (shape !== this.shape) this.setAttribute('shape', shape);
+    if (size  !== this.size)  this.setAttribute('size', size);
+
+    // Color: only write the inline custom property when [color] is set
+    // explicitly; otherwise leave whatever the consumer wrote via
+    // style="--swatch-color: …" alone.
+    if (this.color) {
+      this.style.setProperty('--swatch-color', this.color);
+    }
+
+    // Label: prefer slotted content (already in #labelEl from #stamp);
+    // when label-attr is set and the slot is empty, write the attribute.
+    if (!this.#labelEl.firstChild && this.label) {
+      this.#labelEl.textContent = this.label;
+    } else if (this.#labelEl.firstChild?.nodeType === 3 && this.label) {
+      // Pure-text node from a previous label-attr render — keep it
+      // synced to the current attr value.
+      this.#labelEl.textContent = this.label;
+    }
+
+    // Hide the label box when there's no content. Empty-but-stamped span
+    // would otherwise eat the layout gap.
+    const hasLabel = this.#labelEl.textContent.trim().length > 0
+      || (this.#labelEl.firstElementChild != null);
+    this.#labelEl.toggleAttribute('hidden', !hasLabel);
+  }
+
+  disconnected() {
+    this.#tileEl = null;
+    this.#labelEl = null;
+    this.#stamped = false;
+  }
+}
+
+customElements.define('swatch-ui', AdiaSwatch);
+export { AdiaSwatch };

package/components/swatch/swatch.yaml

@@ -0,0 +1,101 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaSwatch
+tag: swatch-ui
+component: Swatch
+category: display
+version: 1
+description: |
+  Color/style swatch primitive — a small inline tile representing a single
+  visual sample. Renders as block, dot, square, line, or dashed depending on
+  shape; pairs with an optional label slot or attribute. Composed by chart-
+  legend-ui's per-row swatch and consumed directly by the token-colors /
+  spacing demo pages.
+props:
+  shape:
+    description: Visual shape — block (filled tile), dot (small circle), square (small filled square), line (solid hairline), dashed (dashed hairline).
+    type: string
+    default: square
+    reflect: true
+    enum:
+      - block
+      - dot
+      - square
+      - line
+      - dashed
+  size:
+    description: Size preset — sm / md / lg. Drives the swatch's intrinsic dimensions; lg is reserved for the token-scale demo (40 px tall).
+    type: string
+    default: md
+    reflect: true
+    enum:
+      - sm
+      - md
+      - lg
+  color:
+    description: Swatch color. Accepts any CSS color value or var() reference. Sets the internal --swatch-color custom property; consumers can also set --swatch-color via inline style.
+    type: string
+    default: ""
+    reflect: true
+  label:
+    description: Optional label rendered next to (or below, for shape="block") the swatch. Use the default slot for richer content.
+    type: string
+    default: ""
+    reflect: true
+events: {}
+slots:
+  default:
+    description: Optional rich label content. When present, replaces the [label] attribute's text.
+states:
+  - name: idle
+    description: Default, ready for display.
+traits: []
+tokens:
+  --swatch-color:
+    description: Resolved color of the swatch fill / line. Wins over the [color] attr if set inline.
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-swatch
+    description: A single dot swatch with text label, e.g. as a chart-legend row.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Swatch",
+          "shape": "dot",
+          "color": "var(--a-data-0)",
+          "label": "Revenue"
+        }
+      ]
+  - name: token-block
+    description: Block swatch for a token-scale step.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Swatch",
+          "shape": "block",
+          "size": "lg",
+          "color": "var(--a-neutral-50)",
+          "label": "50"
+        }
+      ]
+keywords:
+  - swatch
+  - color
+  - chip
+  - sample
+  - palette
+  - legend
+  - step
+  - token
+synonyms:
+  color-chip:
+    - swatch
+    - chip
+  color-sample:
+    - swatch
+related:
+  - chart-legend-ui
+  - tag-ui

package/components/timeline/timeline.css

@@ -347,7 +347,11 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
   :scope > [data-timeline-toggle] {
     position: absolute;
     inset-inline-end: 0;
-    top: calc((1.4em - 1em) / 2);
+    /* Place the chevron's icon-center on row 1's optical center.
+       The button has --a-space-0-5 vertical padding, so the icon
+       sits that much lower inside the box; we subtract that so the
+       icon (not the box) lines up with the time-slot text center. */
+    top: calc((1.4em - 1em) / 2 - var(--a-space-0-5));
     background: none;
     border: none;
     padding: var(--a-space-0-5) var(--timeline-item-toggle-px);

package/components/tooltip/tooltip.css

@@ -140,7 +140,7 @@
   width: var(--tooltip-indicator-size);
   height: var(--tooltip-indicator-size);
   border-radius: 50%;
-  background: var(--tooltip-indicator-color, var(--chart-0));
+  background: var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 
@@ -148,14 +148,14 @@
   display: inline-block;
   width: calc(var(--tooltip-indicator-size) * 1.6);
   height: 2px;
-  background: var(--tooltip-indicator-color, var(--chart-0));
+  background: var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 
 .tooltip-popup[data-follows="pointer"][data-indicator="dashed"] [data-indicator] {
   display: inline-block;
   width: calc(var(--tooltip-indicator-size) * 1.6);
-  border-top: 2px dashed var(--tooltip-indicator-color, var(--chart-0));
+  border-top: 2px dashed var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 

package/core/provider.js

@@ -236,6 +236,7 @@ export class AdiaRouter extends AdiaProvider {
     }
 
     this.innerHTML = html;
+    this.scrollTo(0, 0);
     (this.closest('section') || this.parentElement)?.scrollTo(0, 0);
 
     if (route.title) document.title = route.title;

package/package.json

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

package/styles/components.css

@@ -50,6 +50,7 @@
 @import "../components/alert/alert.css";
 @import "../components/kbd/kbd.css";
 @import "../components/tag/tag.css";
+@import "../components/swatch/swatch.css";
 @import "../components/col/col.css";
 @import "../components/field/field.css";
 @import "../components/row/row.css";