@adia-ai/web-components 0.0.26 → 0.0.28

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/empty-state/empty-state.js

@@ -24,10 +24,15 @@ class AdiaEmptyState extends AdiaElement {
   #headingEl = null;
   #descEl = null;
 
+  // Mark slot elements we create so render() never overrides consumer-provided ones.
+  // See ADR-0010 (slot content is source of truth).
+  #stampMark(el) { el.dataset.emptyStateStamped = '1'; return el; }
+  #wasStamped(el) { return el?.dataset?.emptyStateStamped === '1'; }
+
   connected() {
     this.#iconEl = this.querySelector(':scope > [slot="icon"]');
     if (!this.#iconEl) {
-      this.#iconEl = document.createElement('icon-ui');
+      this.#iconEl = this.#stampMark(document.createElement('icon-ui'));
       this.#iconEl.setAttribute('slot', 'icon');
       this.#iconEl.setAttribute('size', 'lg');
       this.insertBefore(this.#iconEl, this.firstChild);
@@ -35,14 +40,14 @@ class AdiaEmptyState extends AdiaElement {
 
     this.#headingEl = this.querySelector(':scope > [slot="heading"]');
     if (!this.#headingEl) {
-      this.#headingEl = document.createElement('span');
+      this.#headingEl = this.#stampMark(document.createElement('span'));
       this.#headingEl.setAttribute('slot', 'heading');
       this.insertBefore(this.#headingEl, this.querySelector('[slot="action"]'));
     }
 
     this.#descEl = this.querySelector(':scope > [slot="description"]');
     if (!this.#descEl) {
-      this.#descEl = document.createElement('span');
+      this.#descEl = this.#stampMark(document.createElement('span'));
       this.#descEl.setAttribute('slot', 'description');
       this.insertBefore(this.#descEl, this.querySelector('[slot="action"]'));
     }
@@ -51,28 +56,34 @@ class AdiaEmptyState extends AdiaElement {
   render() {
     if (!this.#iconEl) return;
 
-    // Icon
-    if (this.icon) {
-      this.#iconEl.setAttribute('name', this.icon);
-      this.#iconEl.hidden = false;
-    } else {
-      this.#iconEl.hidden = true;
+    // Icon — only mutate stamped elements; visibility follows the source of truth.
+    if (this.#wasStamped(this.#iconEl)) {
+      if (this.icon) {
+        this.#iconEl.setAttribute('name', this.icon);
+        this.#iconEl.hidden = false;
+      } else {
+        this.#iconEl.hidden = true;
+      }
     }
 
-    // Heading
-    if (this.heading) {
-      this.#headingEl.textContent = this.heading;
-      this.#headingEl.hidden = false;
-    } else {
-      this.#headingEl.hidden = true;
+    // Heading — same policy.
+    if (this.#wasStamped(this.#headingEl)) {
+      if (this.heading) {
+        this.#headingEl.textContent = this.heading;
+        this.#headingEl.hidden = false;
+      } else {
+        this.#headingEl.hidden = true;
+      }
     }
 
-    // Description
-    if (this.description) {
-      this.#descEl.textContent = this.description;
-      this.#descEl.hidden = false;
-    } else {
-      this.#descEl.hidden = true;
+    // Description — same policy.
+    if (this.#wasStamped(this.#descEl)) {
+      if (this.description) {
+        this.#descEl.textContent = this.description;
+        this.#descEl.hidden = false;
+      } else {
+        this.#descEl.hidden = true;
+      }
     }
   }
 

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;
+  }
+}