@adia-ai/web-components 0.0.27 → 0.0.28

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

@@ -14,14 +14,17 @@
  *                override when both are provided.)
  *   items      — JSON array of {key, label, slot?, pct?} legend items.
  *                Takes precedence over [for] if both are provided.
- *   shape      — dot | square | line | dashed. Default: dot. Maps to
- *                badge-ui's icon slot (dot = phosphor 'dot', square =
- *                'square-fill', line/dashed = custom CSS swatches).
+ *   shape      — dot | square | line | dashed. Default: dot. The swatch is
+ *                a `[data-swatch]` span inside each badge-ui row, styled by
+ *                the legend's [shape] attr. Custom span (rather than badge-
+ *                ui's [icon] slot) is required because line/dashed shapes
+ *                aren't representable as icon glyphs.
  *   position   — top | bottom | left | right. Layout hint; actual placement
  *                is where the element is placed in the DOM. Drives
  *                flex-direction.
- *   static     — when set, rows render as non-interactive <span>s. Default
- *                is interactive <button>s that toggle.
+ *   static     — when set, rows render as non-interactive badges (no
+ *                role/tabindex/handlers). Default is interactive
+ *                `role="button"` badges that toggle on click + Enter/Space.
  *   on-toggle  — hide | opacity. Default hide. Escape hatch per OD-CHART-09.
  *                Reported via the `toggle` event detail; chart-ui reads it
  *                when wired via [for].
@@ -127,45 +130,59 @@ class AdiaChartLegend extends AdiaElement {
       const slot = item.slot != null ? item.slot : 0;
       const active = !this.#hiddenKeys.has(key);
 
-      const row = this.static
-        ? document.createElement('span')
-        : document.createElement('button');
-
+      /* Each row is a <badge-ui> chip — the canonical AdiaUI primitive for
+         legend pills (per badge.yaml's documented "chart-legend" example).
+         badge-ui carries the pill chrome (radius, padding, font-size, hover
+         affordance), the legend layers shape-specific swatch CSS + the
+         click-to-toggle behavior on top. Interactive rows get
+         role="button" + tabindex="0" + Enter/Space handlers so they're
+         keyboard-operable without a wrapping <button>. */
+      const row = document.createElement('badge-ui');
       row.setAttribute('data-row', '');
-      row.setAttribute('role', 'listitem');
+      row.setAttribute('role', this.static ? 'listitem' : 'button');
+      row.setAttribute('text', label);
       if (key) row.setAttribute('data-key', key);
       if (active) row.setAttribute('data-active', '');
-      if (!this.static) row.setAttribute('type', 'button');
-
-      /* Swatch + label. A dedicated `[data-swatch]` span lets shape-specific
-         CSS handle dot/square/line/dashed variants without fighting badge-
-         ui's icon slot (which is shadow-DOM-less and doesn't expose an
-         `icon` part — previous badge-ui compose produced visual artifacts
-         for line/dashed shapes). Color resolves via --color-{key} with a
-         chart-{slot} fallback, mirroring chart-ui's per-series CSS var
-         injection so ancestor overrides cascade through atomically. */
-      const swatch = document.createElement('span');
-      swatch.setAttribute('data-swatch', '');
+      if (!this.static) {
+        row.setAttribute('tabindex', '0');
+        row.setAttribute('aria-pressed', active ? 'true' : 'false');
+      }
+
+      /* Swatch — composed via `<swatch-ui>` with the legend's [shape] attr
+         passed through. Pre-2026-05-01 this was a hand-rolled `<span
+         data-swatch>` plus per-shape CSS in this file; that drift caused
+         a cascade-leak collision with the docs-shell's `[data-swatch]`
+         demo rule (token-colors page). Compose the primitive instead and
+         the swatch's dot / square / line / dashed variants live in one
+         place. Color resolves via --color-{key} with a --a-data-{slot}
+         fallback; the legend can render standalone (without a chart-ui
+         ancestor) so the fallback must reference the global data palette
+         directly, not chart-ui's scoped --chart-{N} alias. */
+      const swatchShape = this.shape || 'dot';
+      const swatch = document.createElement('swatch-ui');
+      swatch.setAttribute('shape', swatchShape);
+      swatch.setAttribute('size', 'sm');
       const swatchColor = key
-        ? `var(--color-${key}, var(--chart-${slot}))`
-        : `var(--chart-${slot})`;
+        ? `var(--color-${key}, var(--a-data-${slot}))`
+        : `var(--a-data-${slot})`;
       swatch.style.setProperty('--swatch-color', swatchColor);
       row.appendChild(swatch);
 
-      const labelEl = document.createElement('span');
-      labelEl.setAttribute('data-label', '');
-      labelEl.textContent = label;
-      row.appendChild(labelEl);
-
       if (!this.static) {
-        row.addEventListener('click', (e) => this.#onRowClick(e, key));
+        row.addEventListener('click', (e) => this.#onRowToggle(e, key));
+        row.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.#onRowToggle(e, key);
+          }
+        });
       }
 
       this.appendChild(row);
     }
   }
 
-  #onRowClick(e, key) {
+  #onRowToggle(e, key) {
     if (!key) return;
     const currentlyActive = !this.#hiddenKeys.has(key);
     const newActive = !currentlyActive;
@@ -175,6 +192,7 @@ class AdiaChartLegend extends AdiaElement {
     const row = e.currentTarget;
     if (newActive) row.setAttribute('data-active', '');
     else row.removeAttribute('data-active');
+    row.setAttribute('aria-pressed', newActive ? 'true' : 'false');
 
     this.dispatchEvent(new CustomEvent('toggle', {
       bubbles: true,

package/components/command/command.js

@@ -29,6 +29,7 @@ class AdiaCommand extends AdiaElement {
   static template = () => null;
 
   #items = [];
+  #recents = [];
   #activeIdx = -1;
   #inputEl = null;
   #listEl = null;
@@ -37,6 +38,8 @@ class AdiaCommand extends AdiaElement {
   #bound = false;
   #itemByEl = new WeakMap();
 
+  static #RECENTS_MAX = 3;
+
   #onListClick = (e) => {
     const el = e.target instanceof Element ? e.target.closest('[role="option"]:not([aria-disabled])') : null;
     if (!el) return;
@@ -99,7 +102,15 @@ class AdiaCommand extends AdiaElement {
   // ── Public API ──
 
   get value() { return this.#inputEl?.value || ''; }
-  set value(v) { if (this.#inputEl) this.#inputEl.value = v; }
+  set value(v) {
+    if (!this.#inputEl) return;
+    const next = v ?? '';
+    this.#inputEl.value = next;
+    // Keep the rendered list in sync with the visible input — the host
+    // commonly clears value on (re)open, and consumers expect to see the
+    // full list (plus recents) rather than the previous filter's residue.
+    this.#renderItems(next);
+  }
 
   focus() { this.#inputEl?.focus(); }
 
@@ -148,6 +159,26 @@ class AdiaCommand extends AdiaElement {
     const flat = this.#items;
     let visibleCount = 0;
 
+    // Recents — only when no filter is applied. Resolved against the
+    // current item set so a stale recent (item removed via setItems)
+    // is silently dropped.
+    if (!q && this.#recents.length) {
+      const resolved = this.#recents
+        .map(v => this.#findItem(v))
+        .filter(it => it && !it.disabled);
+      if (resolved.length) {
+        const groupEl = document.createElement('div');
+        groupEl.setAttribute('data-group', '');
+        groupEl.setAttribute('data-recent', '');
+        groupEl.innerHTML = `<div data-group-label>Recent</div>`;
+        for (const item of resolved) {
+          groupEl.appendChild(this.#createItemEl(item, visibleCount));
+          visibleCount++;
+        }
+        this.#listEl.appendChild(groupEl);
+      }
+    }
+
     for (const entry of flat) {
       if (entry.items) {
         // Group
@@ -182,6 +213,24 @@ class AdiaCommand extends AdiaElement {
     if (visibleCount > 0) this.#activate(0);
   }
 
+  #findItem(value) {
+    for (const entry of this.#items) {
+      if (entry.items) {
+        const hit = entry.items.find(i => i.value === value);
+        if (hit) return hit;
+      } else if (entry.value === value) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  #pushRecent(value) {
+    if (!value) return;
+    this.#recents = [value, ...this.#recents.filter(v => v !== value)]
+      .slice(0, AdiaCommand.#RECENTS_MAX);
+  }
+
   #createItemEl(item, idx) {
     const el = document.createElement('div');
     el.setAttribute('role', 'option');
@@ -235,6 +284,7 @@ class AdiaCommand extends AdiaElement {
   }
 
   #select(item) {
+    this.#pushRecent(item.value);
     this.dispatchEvent(new CustomEvent('select', {
       bubbles: true,
       detail: { value: item.value, label: item.label },
@@ -246,6 +296,7 @@ class AdiaCommand extends AdiaElement {
     if (!active) return;
     const value = active.dataset.value;
     const label = active.querySelector('[data-text]')?.textContent || '';
+    this.#pushRecent(value);
     this.dispatchEvent(new CustomEvent('select', {
       bubbles: true,
       detail: { value, label },

package/components/feed/feed-item.yaml

@@ -0,0 +1,50 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaFeedItem
+tag: feed-item-ui
+component: FeedItem
+category: feedback
+version: 1
+description: >-
+  Atomic feed entry inside a `<feed-ui>` lane. Three dismiss policies
+  are inferred from the prop shape — auto-fade (duration > 0 + no
+  action), sticky-dismissible (duration null/0), action-required
+  (duration null/0 + action; future phase). Posted via
+  `AdiaFeed.post()` rather than authored directly.
+props:
+  text:
+    description: Body copy
+    type: string
+    default: ""
+  heading:
+    description: Optional emphasis line above text
+    type: string
+    default: ""
+  icon:
+    description: Optional leading icon name
+    type: string
+    default: ""
+  variant:
+    description: Semantic variant
+    type: string
+    default: default
+    enum:
+      - default
+      - info
+      - success
+      - warning
+      - danger
+  duration:
+    description: Auto-fade timer in ms; null/0 = sticky (requires user input)
+    type: number
+    default: 4000
+  dismissible:
+    description: Render an x close button (default true for sticky, false for auto-fade)
+    type: boolean
+    default: false
+events:
+  close:
+    description: Fired after the item finishes its exit animation
+slots:
+  body:
+    description: Default content slot (also accepts the `text` / `heading` props)
+states: {}

package/components/feed/feed.a2ui.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Feed.json",
+  "title": "Feed",
+  "description": "Shared top-layer feed channel. Per docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001). Per-position singletons mounted lazily into document.body via Popover API; consumers post via the static API (`AdiaFeed.post()`) or the global 'feed' CustomEvent.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Feed"
+    },
+    "max": {
+      "description": "Cap on simultaneously visible items per lane",
+      "type": "number",
+      "default": 5
+    },
+    "position": {
+      "description": "Lane the feed renders into",
+      "type": "string",
+      "enum": [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+        "inline"
+      ],
+      "default": "bottom-right"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [],
+    "keywords": [],
+    "name": "AdiaFeedContainer",
+    "related": [],
+    "slots": {},
+    "states": {},
+    "synonyms": {},
+    "tag": "feed-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/feed/feed.css

@@ -0,0 +1,141 @@
+/* ═══════════════════════════════════════════════════════════════
+   FEED-UI — Shared top-layer feed channel.
+   Per docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001).
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Safari 17.x bug — same as toast: `:scope[data-open]` flavor B
+   doesn't reliably restyle on attribute toggling inside @scope.
+   Selectors moved out as plain feed-item-ui[data-…] rules. */
+feed-item-ui[data-open] {
+  transition: transform var(--feed-item-duration) var(--feed-item-easing),
+              opacity   var(--feed-item-duration) var(--feed-item-easing);
+  transform: translateY(0);
+  opacity: 1;
+}
+feed-item-ui[data-closing] {
+  transition: transform var(--feed-item-duration) var(--feed-item-easing),
+              opacity   var(--feed-item-duration) var(--feed-item-easing);
+  opacity: 0;
+}
+
+/* Container — per-position lane, mounted into document.body via
+   Popover API for top-layer placement. */
+@scope (feed-ui) {
+  :where(:scope) {
+    --feed-gap:        var(--a-space-2);
+    --feed-padding:    var(--a-space-3);
+    --feed-max-width:  22rem;
+    --feed-offset:     var(--a-space-4);
+  }
+
+  :scope {
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: var(--feed-gap);
+    padding: 0;
+    background: transparent;
+    border: 0;
+    pointer-events: none; /* Items re-enable pointer-events. */
+    width: max-content;
+    max-width: var(--feed-max-width);
+  }
+  /* Reset native popover defaults so the lane is invisible until
+     items render. */
+  :scope[popover] { background: none; color: inherit; }
+
+  /* Position variants. Default = bottom-right. */
+  :scope,
+  :scope[position="bottom-right"] {
+    bottom: var(--feed-offset); right: var(--feed-offset);
+  }
+  :scope[position="bottom-left"] {
+    bottom: var(--feed-offset); left: var(--feed-offset); right: auto;
+  }
+  :scope[position="bottom-center"] {
+    bottom: var(--feed-offset);
+    left: 50%; right: auto;
+    transform: translateX(-50%);
+  }
+  :scope[position="top-right"] {
+    top: var(--feed-offset); right: var(--feed-offset); bottom: auto;
+    flex-direction: column-reverse;
+  }
+  :scope[position="top-left"] {
+    top: var(--feed-offset); left: var(--feed-offset); right: auto; bottom: auto;
+    flex-direction: column-reverse;
+  }
+  :scope[position="top-center"] {
+    top: var(--feed-offset); bottom: auto;
+    left: 50%; right: auto;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+  }
+  :scope[position="inline"] {
+    position: relative;
+    inset: auto;
+    z-index: 1;
+  }
+}
+
+/* Item — atomic feed entry. */
+@scope (feed-item-ui) {
+  :where(:scope) {
+    --feed-item-bg:       var(--a-bg);
+    --feed-item-fg:       var(--a-fg);
+    --feed-item-border:   var(--a-border-subtle);
+    --feed-item-radius:   var(--a-radius-md);
+    --feed-item-px:       var(--a-space-3);
+    --feed-item-py:       var(--a-space-2-5);
+    --feed-item-shadow:   var(--a-shadow-md);
+    --feed-item-icon-size: var(--a-icon-size);
+    --feed-item-duration: var(--a-duration);
+    --feed-item-easing:   var(--a-easing-out);
+    --feed-item-gap:      var(--a-space-3);
+    --feed-item-max-width: var(--a-feed-max-width, 22rem);
+  }
+  :scope[variant="info"]    { --feed-item-fg: var(--a-info-fg);    --feed-item-bg: var(--a-info-muted); }
+  :scope[variant="success"] { --feed-item-fg: var(--a-success-fg); --feed-item-bg: var(--a-success-muted); }
+  :scope[variant="warning"] { --feed-item-fg: var(--a-warning-fg); --feed-item-bg: var(--a-warning-muted); }
+  :scope[variant="danger"]  { --feed-item-fg: var(--a-danger-fg);  --feed-item-bg: var(--a-danger-muted); }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--feed-item-gap);
+    max-width: var(--feed-item-max-width);
+    padding: var(--feed-item-py) var(--feed-item-px);
+    background: var(--feed-item-bg);
+    color: var(--feed-item-fg);
+    border: 1px solid var(--feed-item-border);
+    border-radius: var(--feed-item-radius);
+    box-shadow: var(--feed-item-shadow);
+    opacity: 0;
+    transform: translateY(0.5rem);
+    pointer-events: auto;
+  }
+  :scope > [slot="body"] {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+  :scope > [slot="body"] strong {
+    font-weight: var(--a-font-weight-strong, 600);
+  }
+  :scope > [data-feed-close] {
+    flex-shrink: 0;
+  }
+}
+
+/* Reduced-motion: skip slide-in/out, keep opacity. */
+@media (prefers-reduced-motion: reduce) {
+  feed-item-ui[data-open],
+  feed-item-ui[data-closing] {
+    transition: opacity var(--feed-item-duration) var(--feed-item-easing);
+    transform: none !important;
+  }
+}