@adia-ai/web-components 0.0.26 → 0.0.28

package/components/swatch/swatch.a2ui.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Swatch.json",
+  "title": "Swatch",
+  "description": "Color/style swatch primitive — a small inline tile representing a single\nvisual sample. Renders as block, dot, square, line, or dashed depending on\nshape; pairs with an optional label slot or attribute. Composed by chart-\nlegend-ui's per-row swatch and consumed directly by the token-colors /\nspacing demo pages.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "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": ""
+    },
+    "component": {
+      "const": "Swatch"
+    },
+    "label": {
+      "description": "Optional label rendered next to (or below, for shape=\"block\") the swatch. Use the default slot for richer content.",
+      "type": "string",
+      "default": ""
+    },
+    "shape": {
+      "description": "Visual shape — block (filled tile), dot (small circle), square (small filled square), line (solid hairline), dashed (dashed hairline).",
+      "type": "string",
+      "enum": [
+        "block",
+        "dot",
+        "square",
+        "line",
+        "dashed"
+      ],
+      "default": "square"
+    },
+    "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",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "A single dot swatch with text label, e.g. as a chart-legend row.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Swatch\",\n    \"shape\": \"dot\",\n    \"color\": \"var(--a-data-0)\",\n    \"label\": \"Revenue\"\n  }\n]",
+        "name": "basic-swatch"
+      },
+      {
+        "description": "Block swatch for a token-scale step.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Swatch\",\n    \"shape\": \"block\",\n    \"size\": \"lg\",\n    \"color\": \"var(--a-neutral-50)\",\n    \"label\": \"50\"\n  }\n]",
+        "name": "token-block"
+      }
+    ],
+    "keywords": [
+      "swatch",
+      "color",
+      "chip",
+      "sample",
+      "palette",
+      "legend",
+      "step",
+      "token"
+    ],
+    "name": "AdiaSwatch",
+    "related": [
+      "chart-legend-ui",
+      "tag-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Optional rich label content. When present, replaces the [label] attribute's text."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for display.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "color-chip": [
+        "swatch",
+        "chip"
+      ],
+      "color-sample": [
+        "swatch"
+      ]
+    },
+    "tag": "swatch-ui",
+    "tokens": {
+      "--swatch-color": {
+        "description": "Resolved color of the swatch fill / line. Wins over the [color] attr if set inline."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/swatch/swatch.css

@@ -0,0 +1,141 @@
+@scope (swatch-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --swatch-gap:               var(--a-space-2);
+
+    /* ── Sizes ──
+       The "tile" is the coloured shape; the label is plain text rendered
+       beside (or below, for shape="block") the tile. Tile dimensions are
+       size-driven; line shapes use a fixed thickness regardless of size. */
+    --swatch-tile-sm:           var(--a-space-2);          /* 8px ~ */
+    --swatch-tile-md:           var(--a-space-2-5);        /* 10px ~ */
+    --swatch-tile-lg:           40px;                       /* token-scale block */
+    --swatch-line-thickness:    2px;
+    --swatch-line-length:       calc(var(--swatch-tile-md) * 1.75);
+
+    /* ── Colors ──
+       Default colour falls back through the data palette so a bare
+       <swatch-ui> still renders something visible; consumers usually set
+       --swatch-color via [color] attr or inline style. */
+    --swatch-color:             var(--a-data-0);
+    --swatch-label-fg:          var(--a-fg-subtle);
+
+    /* ── Shape ── */
+    --swatch-radius-block:      var(--a-radius-sm);
+    --swatch-radius-square:     var(--a-radius-sm);
+
+    /* ── Block-shape extras (token-scale) ── */
+    --swatch-block-shadow:      inset 0 0 0 1px color-mix(in oklab, currentColor 8%, transparent);
+
+    /* ── Typography ── */
+    --swatch-label-size:        var(--a-ui-size);
+    --swatch-label-step-size:   10px;
+    --swatch-label-step-mt:     4px;
+  }
+
+  :scope {
+    /* Default: inline-flex row — tile + label side-by-side, vertically
+       centered. shape="block" overrides to flex-column (label sits below
+       the tile, mimicking the token-scale step layout). */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--swatch-gap);
+    min-width: 0;
+    color: var(--swatch-label-fg);
+    font-size: var(--swatch-label-size);
+    line-height: 1.2;
+    vertical-align: baseline;
+  }
+
+  /* The colored tile — sized by [size] + [shape] combinations below. */
+  :scope > [data-tile] {
+    box-sizing: border-box;
+    display: block;
+    flex-shrink: 0;
+    background: var(--swatch-color);
+    line-height: 0;
+  }
+
+  :scope > [data-label] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :scope > [data-label][hidden] { display: none; }
+
+  /* ═══════ Shape: dot ═══════ */
+  :scope[shape="dot"] > [data-tile] {
+    width: var(--_size, var(--swatch-tile-md));
+    height: var(--_size, var(--swatch-tile-md));
+    border-radius: 50%;
+  }
+
+  /* ═══════ Shape: square ═══════ */
+  :scope[shape="square"] > [data-tile] {
+    width: var(--_size, var(--swatch-tile-md));
+    height: var(--_size, var(--swatch-tile-md));
+    border-radius: var(--swatch-radius-square);
+  }
+
+  /* ═══════ Shape: line (solid hairline) ═══════ */
+  :scope[shape="line"] > [data-tile] {
+    width: var(--swatch-line-length);
+    height: var(--swatch-line-thickness);
+    border-radius: var(--swatch-line-thickness);
+  }
+
+  /* ═══════ Shape: dashed (dashed hairline) ═══════ */
+  :scope[shape="dashed"] > [data-tile] {
+    width: var(--swatch-line-length);
+    height: var(--swatch-line-thickness);
+    background: transparent;
+    border-top: var(--swatch-line-thickness) dashed var(--swatch-color);
+  }
+
+  /* ═══════ Shape: block (token-scale tile) ═══════
+     Filled rectangle whose height grows with [size]; label sits BELOW
+     the tile (flex-column) so we can use it as a token-step swatch
+     without any extra wrapper. */
+  :scope[shape="block"] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  :scope[shape="block"] > [data-tile] {
+    width: 100%;
+    height: var(--_block-h, var(--swatch-tile-lg));
+    border-radius: var(--swatch-radius-block);
+    box-shadow: var(--swatch-block-shadow);
+  }
+
+  :scope[shape="block"] > [data-label] {
+    text-align: center;
+    font-family: var(--a-font-family-code);
+    font-size: var(--swatch-label-step-size);
+    font-variant-numeric: tabular-nums;
+    color: var(--a-fg-muted);
+    margin-block-start: var(--swatch-label-step-mt);
+    white-space: nowrap;
+  }
+
+  /* ═══════ Sizes ═══════
+     Override the dot/square diameter (`--_size`) and the block-shape
+     height (`--_block-h`) for each size preset. Line/dashed widths use
+     --swatch-line-length so they stay consistent at all sizes. */
+  :scope[size="sm"] {
+    --_size: var(--swatch-tile-sm);
+    --_block-h: calc(var(--swatch-tile-lg) * 0.6);
+  }
+  :scope[size="md"] {
+    --_size: var(--swatch-tile-md);
+    --_block-h: calc(var(--swatch-tile-lg) * 0.75);
+  }
+  :scope[size="lg"] {
+    --_size: calc(var(--swatch-tile-md) * 1.4);
+    --_block-h: var(--swatch-tile-lg);
+  }
+}

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/swiper/swiper.css

@@ -188,6 +188,15 @@
                 transform var(--swiper-duration) var(--swiper-easing);
   }
 
+  :scope > [data-swiper-dots] > button:hover {
+    background: var(--swiper-dot-bg-active);
+  }
+
+  :scope > [data-swiper-dots] > button:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring);
+  }
+
   :scope > [data-swiper-dots] > button[aria-current="true"] {
     background: var(--swiper-dot-bg-active);
   }

package/components/table/table.css

@@ -210,6 +210,9 @@
 
   [data-body] [role="gridcell"] {
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
     padding: var(--table-py) var(--table-px);
     border-bottom: 1px solid var(--table-border);
     min-width: 0;
@@ -218,10 +221,12 @@
 
   [data-align="right"] {
     text-align: right;
+    justify-content: flex-end;
   }
 
   [data-align="center"] {
     text-align: center;
+    justify-content: center;
   }
 
   /* ═══════ Row states ═══════ */

package/components/table/table.js

@@ -129,10 +129,54 @@ class AdiaTable extends AdiaElement {
 
   get data() { return this.#data; }
 
-  // ── Public API: read-only getters ──
+  // ── Public API: selection ──
 
+  /**
+   * Indices of currently-selected rows, ascending.
+   * @returns {number[]}
+   */
   get selected() { return [...this.#selected].sort((a, b) => a - b); }
 
+  /**
+   * Replace the selection set programmatically. Out-of-range indices are
+   * silently dropped. Pair with `selectable` mode; on a non-selectable
+   * table the indices are stored but not rendered as checked rows.
+   * @param {Iterable<number>} indices
+   */
+  set selected(indices) {
+    this.#selected.clear();
+    if (indices) {
+      for (const i of indices) {
+        if (Number.isInteger(i) && i >= 0 && i < this.#data.length) {
+          this.#selected.add(i);
+        }
+      }
+    }
+    this.#requestRender();
+    this.dispatchEvent(new CustomEvent('select', {
+      detail: { selected: this.selected },
+      bubbles: true,
+    }));
+  }
+
+  /**
+   * Empty the selection set. Equivalent to `el.selected = []` but doesn't
+   * require constructing an empty array; the most common selection-write
+   * call by far (after a "delete" or "archive" bulk action), so worth
+   * having a one-token verb form.
+   */
+  clearSelection() {
+    if (this.#selected.size === 0) return;
+    this.#selected.clear();
+    this.#requestRender();
+    this.dispatchEvent(new CustomEvent('select', {
+      detail: { selected: [] },
+      bubbles: true,
+    }));
+  }
+
+  // ── Public API: read-only getters ──
+
   get sortState() { return this.#sortState.map(s => ({ ...s })); }
 
   // ── Public API: filters ──

package/components/table-toolbar/table-toolbar.css

@@ -156,6 +156,19 @@
   display: flex;
   flex-direction: column;
   gap: var(--a-space-1);
+  /* Fade + lift in on first paint. */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-toolbar-popover]:popover-open { transition: none; }
 }
 
 /* The popover head + empty hint are <text-ui variant="kicker"|caption">,

package/components/tag/tag.css

@@ -79,6 +79,16 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg: var(--a-danger-bg);
   }
 
+  /* `default` is a semantic alias of the base — same tokens as the
+     unstyled `:scope`, declared explicitly so the yaml enum and the
+     CSS contract agree. Most consumers omit `variant` and inherit the
+     base; the explicit selector lets `<tag-ui variant="default">`
+     render identically without falling through to base. */
+  :scope[variant="default"] {
+    --tag-bg: var(--a-bg-muted);
+    --tag-fg: var(--a-fg);
+  }
+
   /* Size handled by universal [size] attribute system. */
 
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */

package/components/timeline/timeline.css

@@ -347,17 +347,29 @@ 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: 0 var(--timeline-item-toggle-px);
+    padding: var(--a-space-0-5) var(--timeline-item-toggle-px);
     margin: 0;
     cursor: pointer;
-    color: inherit;
+    color: var(--timeline-item-label-fg-muted, var(--a-fg-muted));
+    border-radius: var(--a-radius-sm);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
+    transition: background var(--timeline-item-duration) var(--timeline-item-easing),
+                color      var(--timeline-item-duration) var(--timeline-item-easing);
+  }
+
+  :scope > [data-timeline-toggle]:hover {
+    background: var(--a-bg-subtle);
+    color: var(--timeline-item-label-fg, var(--a-fg));
   }
 
   /* Reserve room so the time isn't overlapped by the chevron */
@@ -368,7 +380,6 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
   :scope > [data-timeline-toggle]:focus-visible {
     outline: none;
     box-shadow: var(--a-focus-ring);
-    border-radius: var(--a-radius-sm);
   }
 }