@adia-ai/web-components 0.0.26 → 0.0.28

package/components/feed/feed.js

@@ -0,0 +1,276 @@
+/**
+ * <feed-ui> + <feed-item-ui> — Shared top-layer feed channel.
+ *
+ * Per docs/specs/feed-channel.md (SPEC-FEED-CHANNEL-001).
+ *
+ * Phase 1 (skeleton) ships here:
+ *   - Per-position singletons (`<feed-ui position="bottom-right">`)
+ *     resolving OD-FEED-1; mounted lazily into document.body via
+ *     Popover API for top-layer placement.
+ *   - Auto-fade `<feed-item-ui>` policy. Sticky-dismissible and
+ *     action-required policies are stubs that respect the contract
+ *     (no auto-dismiss when `duration` is null/0; close button
+ *     surfaces when `dismissible` is set) but the action-required
+ *     focus-trap is deferred.
+ *   - Static API:  AdiaFeed.post() / .get() / .clear() / .purge()
+ *     — `purge()` directly addresses the audit's L-B4 container-leak
+ *     finding by giving consumers a tear-down hook.
+ *   - Global event channel:  window.dispatchEvent(new CustomEvent(
+ *       'feed', { detail: { text, position, ... } })) — same shape as
+ *     AdiaFeed.post() so any code can post without importing the
+ *     module directly. Idempotent listener install (HMR-safe).
+ *
+ * Toast migration (spec § 2.5) is deferred — toast-ui keeps its own
+ * container + API for now; the migration happens once the feed-ui
+ * surface has soaked.
+ */
+
+import { AdiaElement, html } from '../../core/element.js';
+
+/* ── Container — one per position, mounted into document.body ── */
+
+class AdiaFeedContainer extends AdiaElement {
+  static properties = {
+    position: { type: String, default: 'bottom-right', reflect: true },
+    max:      { type: Number, default: 5,              reflect: true },
+  };
+  static template = () => html``;
+
+  connected() {
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'region');
+    if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Feed');
+  }
+}
+
+customElements.define('feed-ui', AdiaFeedContainer);
+
+/* ── Item — one per posted message ── */
+
+class AdiaFeedItem extends AdiaElement {
+  #timer = null;
+  #removing = false;
+  #closeTimer = null;
+  #openRaf = null;
+
+  static properties = {
+    text:        { type: String,  default: '',           reflect: true },
+    heading:     { type: String,  default: '',           reflect: true },
+    icon:        { type: String,  default: '',           reflect: true },
+    variant:     { type: String,  default: 'default',    reflect: true },
+    duration:    { type: Number,  default: 4000,         reflect: true },
+    dismissible: { type: Boolean, default: false,        reflect: true },
+  };
+
+  static parts = {
+    body: '<div slot="body"></div>',
+  };
+  static template = () => html``;
+
+  #onPress = (e) => {
+    if (e.target.closest('[data-feed-close]')) this.dismiss();
+  };
+
+  connected() {
+    this.addEventListener('press', this.#onPress);
+  }
+
+  #getDuration() {
+    const raw = getComputedStyle(this).getPropertyValue('--feed-item-duration').trim();
+    return parseFloat(raw) || 200;
+  }
+
+  render() {
+    const body = this.ensure('body');
+    body.textContent = '';
+    if (this.heading) {
+      const h = document.createElement('strong');
+      h.textContent = this.heading;
+      h.style.display = 'block';
+      body.appendChild(h);
+    }
+    if (this.text) {
+      const t = document.createElement('span');
+      t.textContent = this.text;
+      body.appendChild(t);
+    }
+
+    /* Inferred policy roles per spec §2.4. Auto-fade gets `status`;
+       sticky danger/warning gets `alert`; action-required gets
+       `alertdialog` (a future phase wires the focus trap). */
+    const isSticky = !this.duration || this.duration <= 0;
+    const isLoud   = this.variant === 'danger' || this.variant === 'warning';
+    let role = 'status';
+    if (isSticky && isLoud) role = 'alert';
+    this.setAttribute('role', role);
+    this.setAttribute('aria-live', role === 'alert' ? 'assertive' : 'polite');
+
+    /* Render dismiss button for sticky items (spec §2.2 — default true
+       for sticky, false for auto-fade). */
+    const wantsClose = this.dismissible || isSticky;
+    let close = this.querySelector(':scope > [data-feed-close]');
+    if (wantsClose && !close) {
+      close = document.createElement('button-ui');
+      close.setAttribute('data-feed-close', '');
+      close.setAttribute('icon', 'x');
+      close.setAttribute('variant', 'ghost');
+      close.setAttribute('size', 'sm');
+      close.setAttribute('aria-label', 'Dismiss');
+      this.appendChild(close);
+    } else if (!wantsClose && close) {
+      close.remove();
+    }
+
+    if (!this.hasAttribute('data-open') && !this.#removing) {
+      this.#openRaf = requestAnimationFrame(() => {
+        this.#openRaf = null;
+        this.setAttribute('data-open', '');
+      });
+    }
+    this.#scheduleAutoDismiss();
+  }
+
+  #scheduleAutoDismiss() {
+    if (this.#timer) clearTimeout(this.#timer);
+    if (this.duration && this.duration > 0) {
+      this.#timer = setTimeout(() => this.dismiss(), this.duration);
+    }
+  }
+
+  dismiss() {
+    if (this.#removing) return;
+    this.#removing = true;
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+    this.removeAttribute('data-open');
+    this.setAttribute('data-closing', '');
+    this.#closeTimer = setTimeout(() => {
+      this.#closeTimer = null;
+      const container = this.parentElement;
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+      this.remove();
+      if (container?.matches?.('feed-ui')) AdiaFeed.releaseContainerIfEmpty(container);
+    }, this.#getDuration());
+  }
+
+  update(patch) {
+    if (!patch || typeof patch !== 'object') return;
+    for (const k of Object.keys(patch)) {
+      if (k in AdiaFeedItem.properties) this[k] = patch[k];
+    }
+    this.#scheduleAutoDismiss();
+  }
+
+  disconnected() {
+    this.removeEventListener('press', this.#onPress);
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+    if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
+    if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
+  }
+}
+
+customElements.define('feed-item-ui', AdiaFeedItem);
+
+/* ── Static API — AdiaFeed ── */
+
+class AdiaFeed {
+  static #containers = new Map();
+
+  /**
+   * Get (or lazily create) the per-position lane. Each lane is a
+   * manual Popover-API container — `[popover="manual"]` puts it in
+   * the browser's top-layer with no z-index wars and the native
+   * popover stack lets multiple lanes coexist (e.g. one feed in
+   * top-right + another in bottom-center) without collision.
+   */
+  static get(position = 'bottom-right') {
+    let el = AdiaFeed.#containers.get(position);
+    if (el && el.isConnected) return el;
+    el = document.createElement('feed-ui');
+    el.setAttribute('position', position);
+    if ('popover' in HTMLElement.prototype) el.setAttribute('popover', 'manual');
+    document.body.appendChild(el);
+    try { el.showPopover?.(); } catch { /* graceful fallback */ }
+    AdiaFeed.#containers.set(position, el);
+    return el;
+  }
+
+  /**
+   * Post a feed item. Returns a `FeedHandle` (`{id, dismiss, update}`).
+   *
+   * @param {Object} opts
+   * @param {string} [opts.text]
+   * @param {string} [opts.heading]
+   * @param {string} [opts.icon]
+   * @param {string} [opts.variant='default']  default | info | success | warning | danger
+   * @param {number|null} [opts.duration=4000]  ms; null/0 = sticky (requires close click)
+   * @param {string} [opts.position='bottom-right']
+   * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
+   * @param {string} [opts.id]
+   */
+  static post(opts = {}) {
+    const {
+      text = '',
+      heading = '',
+      icon = '',
+      variant = 'default',
+      duration = 4000,
+      position = 'bottom-right',
+      dismissible,
+      id,
+    } = opts;
+    const v = variant === 'error' ? 'danger' : variant;  // documented alias
+    const container = AdiaFeed.get(position);
+    const item = document.createElement('feed-item-ui');
+    if (id) item.setAttribute('data-id', id);
+    item.text = text;
+    item.heading = heading;
+    item.icon = icon;
+    item.variant = v;
+    item.duration = duration;
+    if (dismissible != null) item.dismissible = !!dismissible;
+    container.appendChild(item);
+    return {
+      id: id ?? null,
+      dismiss: () => item.dismiss(),
+      update:  (patch) => item.update(patch),
+    };
+  }
+
+  /** Clear all items in a single lane. */
+  static clear(position = 'bottom-right') {
+    const el = AdiaFeed.#containers.get(position);
+    if (!el) return;
+    for (const item of [...el.children]) {
+      if (item.tagName === 'FEED-ITEM-UI') item.dismiss?.();
+    }
+  }
+
+  /** Tear down ALL containers. Test cleanup; addresses audit L-B4. */
+  static purge() {
+    for (const el of AdiaFeed.#containers.values()) {
+      try { el.hidePopover?.(); } catch { /* noop */ }
+      el.remove();
+    }
+    AdiaFeed.#containers.clear();
+  }
+
+  /** Internal: drop a lane when its last item exits. */
+  static releaseContainerIfEmpty(container) {
+    if (!container || container.children.length > 0) return;
+    try { container.hidePopover?.(); } catch { /* noop */ }
+    container.remove();
+    for (const [pos, el] of AdiaFeed.#containers) {
+      if (el === container) AdiaFeed.#containers.delete(pos);
+    }
+  }
+}
+
+/* Global 'feed' CustomEvent listener — same shape as AdiaFeed.post().
+   Idempotent (HMR-safe via window flag). */
+if (typeof window !== 'undefined' && !window.__adiaFeedListenerInstalled) {
+  window.__adiaFeedListenerInstalled = true;
+  window.addEventListener('feed', (e) => {
+    if (e?.detail && typeof e.detail === 'object') AdiaFeed.post(e.detail);
+  });
+}
+
+export { AdiaFeedContainer, AdiaFeedItem, AdiaFeed };

package/components/feed/feed.yaml

@@ -0,0 +1,33 @@
+# Generated alongside feed.js — kept in sync by hand for now (feed
+# is a Phase-1 skeleton; once it stabilizes, run the regen pipeline).
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaFeedContainer
+tag: feed-ui
+component: Feed
+category: container
+version: 1
+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.
+props:
+  position:
+    description: Lane the feed renders into
+    type: string
+    default: bottom-right
+    enum:
+      - top-left
+      - top-center
+      - top-right
+      - bottom-left
+      - bottom-center
+      - bottom-right
+      - inline
+  max:
+    description: Cap on simultaneously visible items per lane
+    type: number
+    default: 5
+events: {}
+slots: {}
+states: {}

package/components/index.js

@@ -30,6 +30,7 @@ export { AdiaChat } from './chat/chat.js';
 export { AdiaDrawer } from './drawer/drawer.js';
 export { AdiaModal } from './modal/modal.js';
 export { AdiaToast } from './toast/toast.js';
+export { AdiaFeedContainer, AdiaFeedItem, AdiaFeed } from './feed/feed.js';
 export { AdiaTabs } from './tabs/tabs.js';
 export { AdiaTab } from './tabs/tab.js';
 export { AdiaTooltip } from './tooltip/tooltip.js';
@@ -51,6 +52,7 @@ export { AdiaSkeleton } from './skeleton/skeleton.js';
 export { AdiaAlert } from './alert/alert.js';
 export { AdiaKbd } from './kbd/kbd.js';
 export { AdiaTag } from './tag/tag.js';
+export { AdiaSwatch } from './swatch/swatch.js';
 export { AdiaCol }   from './col/col.js';
 export { AdiaField } from './field/field.js';
 export { AdiaRow }   from './row/row.js';

package/components/list/list.js

@@ -161,15 +161,19 @@ class AdiaListItem extends AdiaElement {
     return null;
   }
 
+  // Mark slot elements we create so render() never deletes consumer-provided ones.
+  #stampMark(el) { el.dataset.listStamped = '1'; return el; }
+  #wasStamped(el) { return el?.dataset?.listStamped === '1'; }
+
   #stamp() {
     if (this.#ownChild('[slot="content"]')) return;
 
     if (this.icon) {
       let iconEl = this.#ownChild('[slot="icon"]') || this.#ownChild('icon-ui');
       if (!iconEl) {
-        iconEl = document.createElement('icon-ui');
+        iconEl = this.#stampMark(document.createElement('icon-ui'));
         iconEl.setAttribute('slot', 'icon');
-        this.appendChild(iconEl);
+        this.prepend(iconEl);
       }
       iconEl.setAttribute('name', this.icon);
     }
@@ -177,56 +181,56 @@ class AdiaListItem extends AdiaElement {
     if (this.text) {
       let span = this.#ownChild('[slot="text"]');
       if (!span) {
-        span = document.createElement('span');
+        span = this.#stampMark(document.createElement('span'));
         span.setAttribute('slot', 'text');
         this.appendChild(span);
       }
-      span.textContent = this.text;
+      if (this.#wasStamped(span)) span.textContent = this.text;
     }
 
     if (this.description) {
       let desc = this.#ownChild('[slot="description"]');
       if (!desc) {
-        desc = document.createElement('span');
+        desc = this.#stampMark(document.createElement('span'));
         desc.setAttribute('slot', 'description');
         this.appendChild(desc);
       }
-      desc.textContent = this.description;
+      if (this.#wasStamped(desc)) desc.textContent = this.description;
     }
   }
 
   render() {
-    // Sync icon
+    // Sync icon — only touch elements we stamped.
     const iconEl = this.#ownChild('[slot="icon"]');
     if (this.icon) {
       if (iconEl) {
-        iconEl.setAttribute('name', this.icon);
+        if (this.#wasStamped(iconEl)) iconEl.setAttribute('name', this.icon);
       } else {
-        const el = document.createElement('icon-ui');
+        const el = this.#stampMark(document.createElement('icon-ui'));
         el.setAttribute('slot', 'icon');
         el.setAttribute('name', this.icon);
         this.prepend(el);
       }
-    } else if (iconEl) {
+    } else if (this.#wasStamped(iconEl)) {
       iconEl.remove();
     }
 
-    // Sync text
+    // Sync text — only touch elements we stamped.
     const textEl = this.#ownChild('[slot="text"]');
-    if (textEl) textEl.textContent = this.text;
+    if (this.#wasStamped(textEl)) textEl.textContent = this.text;
 
-    // Sync description
+    // Sync description — only touch elements we stamped.
     const descEl = this.#ownChild('[slot="description"]');
     if (this.description) {
       if (descEl) {
-        descEl.textContent = this.description;
+        if (this.#wasStamped(descEl)) descEl.textContent = this.description;
       } else {
-        const el = document.createElement('span');
+        const el = this.#stampMark(document.createElement('span'));
         el.setAttribute('slot', 'description');
         el.textContent = this.description;
         this.appendChild(el);
       }
-    } else if (descEl) {
+    } else if (this.#wasStamped(descEl)) {
       descEl.remove();
     }
   }

package/components/menu/menu.css

@@ -38,6 +38,24 @@ menu-ui [data-menu-popover] {
   font-family: inherit;
   font-size: var(--a-ui-size);
   color: var(--a-fg);
+  /* Fade + lift in on first paint via @starting-style. Plain `transition`
+     applies during exit too (display: none can't transition, but opacity
+     can — and the close path is JS-controlled so no exit anim is needed). */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+}
+
+menu-ui [data-menu-popover]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  menu-ui [data-menu-popover] { transition: none; }
 }
 
 /* Safari 17.x bug: `:scope:hover` inside `@scope` doesn't match the scope

package/components/menu/menu.js

@@ -251,18 +251,30 @@ class AdiaMenuItem extends AdiaElement {
     this.#syncAria();
   }
 
+  // Mark slot elements we create so render() never deletes consumer-provided ones.
+  // See ADR-0010 (slot content is source of truth).
+  #stampMark(el) { el.dataset.menuItemStamped = '1'; return el; }
+  #wasStamped(el) { return el?.dataset?.menuItemStamped === '1'; }
+
+  #ownChild(selector) {
+    for (const ch of this.children) {
+      if (ch.matches(selector)) return ch;
+    }
+    return null;
+  }
+
   #stamp() {
-    if (this.querySelector('[slot="text"]')) return;
+    if (this.#ownChild('[slot="text"]')) return;
 
-    if (this.icon) {
-      const iconEl = document.createElement('icon-ui');
+    if (this.icon && !this.#ownChild('[slot="icon"]')) {
+      const iconEl = this.#stampMark(document.createElement('icon-ui'));
       iconEl.setAttribute('slot', 'icon');
       iconEl.setAttribute('name', this.icon);
       this.appendChild(iconEl);
     }
 
     if (this.text) {
-      const span = document.createElement('span');
+      const span = this.#stampMark(document.createElement('span'));
       span.setAttribute('slot', 'text');
       span.textContent = this.text;
       this.appendChild(span);
@@ -275,22 +287,24 @@ class AdiaMenuItem extends AdiaElement {
   }
 
   render() {
-    const iconEl = this.querySelector('[slot="icon"]');
+    // Sync icon — only touch elements we stamped.
+    const iconEl = this.#ownChild('[slot="icon"]');
     if (this.icon) {
       if (iconEl) {
-        iconEl.setAttribute('name', this.icon);
+        if (this.#wasStamped(iconEl)) iconEl.setAttribute('name', this.icon);
       } else {
-        const el = document.createElement('icon-ui');
+        const el = this.#stampMark(document.createElement('icon-ui'));
         el.setAttribute('slot', 'icon');
         el.setAttribute('name', this.icon);
         this.prepend(el);
       }
-    } else if (iconEl) {
+    } else if (this.#wasStamped(iconEl)) {
       iconEl.remove();
     }
 
-    const textEl = this.querySelector('[slot="text"]');
-    if (textEl) textEl.textContent = this.text;
+    // Sync text — only touch elements we stamped.
+    const textEl = this.#ownChild('[slot="text"]');
+    if (this.#wasStamped(textEl)) textEl.textContent = this.text;
 
     this.#syncAria();
   }

package/components/pane/pane.css

@@ -91,6 +91,11 @@
     background: var(--pane-header-bg-hover);
   }
 
+  > header:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring) inset;
+  }
+
   /* Collapse indicator — stamped by JS as icon-ui */
   > header > [slot="chevron"] {
     --a-icon-size: var(--a-caret-size);

package/components/pipeline-status/pipeline-status.css

@@ -130,7 +130,21 @@
     font-size:           var(--pipeline-status-history-size);
     color:               var(--pipeline-status-history-fg);
     user-select:         none;
-    padding:             var(--pipeline-status-history-pad-y) 0;
+    padding:             var(--pipeline-status-history-pad-y) var(--a-space-1);
+    margin-inline:       calc(var(--a-space-1) * -1);
+    border-radius:       var(--a-radius-sm);
+    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing),
+                         color      var(--pipeline-status-duration) var(--pipeline-status-easing);
+  }
+
+  [data-pipeline-history] summary:hover {
+    background:          var(--a-bg-subtle);
+    color:               var(--pipeline-status-label-fg);
+  }
+
+  [data-pipeline-history] summary:focus-visible {
+    outline:             none;
+    box-shadow:          var(--a-focus-ring);
   }
 
   [data-pipeline-history] summary::marker {

package/components/popover/popover.css

@@ -47,6 +47,23 @@
     color: var(--popover-fg);
     max-height: calc(100vh - 3rem);
     overflow-y: auto;
+    /* Fade + lift in on first paint. @starting-style is the initial frame
+       browsers paint before the popover transitions to its open state. */
+    opacity: 1;
+    translate: 0 0;
+    transition: opacity var(--a-duration-fast) var(--a-easing-out),
+                translate var(--a-duration-fast) var(--a-easing-out);
+  }
+
+  [slot="content"]:popover-open {
+    @starting-style {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [slot="content"] { transition: none; }
   }
 
   /* Collapse default margins on the first/last block child so the

package/components/select/select.css

@@ -199,6 +199,24 @@ select-ui [slot="listbox"] {
 
   /* Positioned by JS (#positionListbox) — fixed to viewport */
   width: max-content;
+
+  /* Fade + lift in on first paint (popover top-layer cannot inherit
+     component tokens, so reference --a-* directly). */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+}
+
+select-ui [slot="listbox"]:popover-open {
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  select-ui [slot="listbox"] { transition: none; }
 }
 
 select-ui [role="option"] {