@adia-ai/web-components 0.0.25 → 0.0.27

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"] {

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

@@ -350,14 +350,22 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     top: calc((1.4em - 1em) / 2);
     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 +376,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);
   }
 }
 

package/components/toast/toast.css

@@ -106,39 +106,60 @@ toast-ui[data-closing][position="top-left"] {
   /* Enter / exit animation rules ([data-open] / [data-closing]) moved
      outside @scope — see Safari 17.x bug note at top of file. */
 
-  /* ── Variant: info (default) ── */
+  /* ── Variants ──
+     `--variant-muted` flips light↔dark with scheme, so the fg token
+     paired with it must do the same. Use `--a-{variant}-text` (the
+     light-dark scheme-aware token), NOT `--a-{variant}-text-strong`
+     (the latter is locked dark for warning + light for the others —
+     designed for solid `--variant-strong` fills, where the bg never
+     flips). Mirrors alert.css's variant wiring. */
 
   :where(:scope),
   :where(:scope[variant="info"]) {
-    --toast-bg: var(--a-info-muted);
-    --toast-fg: var(--a-info-text-strong);
+    --toast-bg:     var(--a-info-muted);
+    --toast-fg:     var(--a-info-text);
     --toast-border: var(--a-info-border-subtle);
   }
-
-  /* ── Variant: success ── */
-
   :where(:scope[variant="success"]) {
-    --toast-bg: var(--a-success-muted);
-    --toast-fg: var(--a-success-text-strong);
+    --toast-bg:     var(--a-success-muted);
+    --toast-fg:     var(--a-success-text);
     --toast-border: var(--a-success-border-subtle);
   }
-
-  /* ── Variant: warning ── */
-
   :where(:scope[variant="warning"]) {
-    --toast-bg: var(--a-warning-muted);
-    --toast-fg: var(--a-warning-text-strong);
+    --toast-bg:     var(--a-warning-muted);
+    --toast-fg:     var(--a-warning-text);
     --toast-border: var(--a-warning-border-subtle);
   }
-
-  /* ── Variant: danger ── */
-
   :where(:scope[variant="danger"]) {
-    --toast-bg: var(--a-danger-muted);
-    --toast-fg: var(--a-danger-text-strong);
+    --toast-bg:     var(--a-danger-muted);
+    --toast-fg:     var(--a-danger-text);
     --toast-border: var(--a-danger-border-subtle);
   }
 
+  /* `primary` is the accent-filled variant — solid bg + on-accent text
+     for "branded" toasts (welcome banners, feature-launch nudges)
+     where the message should read as a brand stamp rather than tinted
+     status chrome. Tracks the same accent-strong source as button-ui's
+     primary; border picks up `--a-accent-border-subtle` since there's
+     no `--a-primary-border-subtle` token. */
+  :where(:scope[variant="primary"]) {
+    --toast-bg:     var(--a-primary-bg);
+    --toast-fg:     var(--a-primary-fg);
+    --toast-border: var(--a-accent-border-subtle);
+  }
+
+  /* `muted` and `neutral` are semantic aliases of the base canvas
+     surface — same tokens as the unstyled `:scope`, declared explicitly
+     so the yaml enum and the CSS contract agree. Use cases: quiet
+     status nudges that shouldn't carry tonal weight (e.g. "Draft
+     saved" without success-green). Mirrors alert-ui's pattern. */
+  :where(:scope[variant="muted"]),
+  :where(:scope[variant="neutral"]) {
+    --toast-bg:     var(--a-bg-subtle);
+    --toast-fg:     var(--a-fg);
+    --toast-border: var(--a-border-subtle);
+  }
+
   /* ── Message slot ── */
 
   [slot="message"] {
@@ -146,25 +167,17 @@ toast-ui[data-closing][position="top-left"] {
     min-width: 0;
   }
 
-  /* ── Close button ── */
-
+  /* ── Close button ──
+     A real <button-ui icon="x" variant="ghost" size="sm"> stamped by
+     toast.js — brings the system focus ring + hover transition + a
+     properly-sized icon-ui glyph. The `align-self: start` keeps the
+     button on the first line of multi-line toast bodies, matching the
+     alert-ui pattern. */
   [slot="close"] {
-    background: none;
-    border: none;
-    font-size: 0.875rem;
-    color: currentColor;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-    opacity: 0.6;
     flex-shrink: 0;
-    align-self: flex-start;
-    margin-top: 0.125rem;
-    transition: opacity var(--toast-close-duration) var(--toast-close-easing);
+    align-self: start;
+    color: currentColor;
   }
-  [slot="close"]::after { content: '\00d7'; }
-  [slot="close"]:hover { opacity: 1; }
-  [slot="close"]:focus-visible { box-shadow: var(--toast-focus-ring); border-radius: var(--toast-focus-radius); }
 
   /* Inside a container: drop fixed positioning */
   [data-toast-container] > :scope {
@@ -176,37 +189,69 @@ toast-ui[data-closing][position="top-left"] {
   }
 }
 
-/* ── Top-layer: cannot inherit component tokens ── */
-/* ── Toast container — stacks toasts vertically ── */
+/* ── Toast lane container ──
+   Per-position singleton, attached to `document.body`. Promoted to the
+   browser's top-layer via the Popover API — `[popover="manual"]` on the
+   element + `showPopover()` on first post. The native popover stack
+   means multiple lanes (e.g. top-right + bottom-center) coexist
+   without z-index collisions, and the lane sits above ALL page chrome
+   (modals included, since both ride the top-layer in document order).
+
+   Reset the UA `[popover]` defaults (centred, white panel, border).
+   The lane is a transparent flex column anchored to a viewport corner;
+   the toast cards inside paint themselves. `pointer-events: none` on
+   the lane + `auto` on each toast lets clicks pass through empty
+   space between cards. */
 [data-toast-container] {
   position: fixed;
-  z-index: 9999;
+  inset: unset;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  width: max-content;
+  max-width: 100vw;
+  z-index: 9999;             /* fallback for envs without Popover API */
   display: flex;
-  flex-direction: column;
   gap: var(--a-space-2);
   pointer-events: none;
 }
-
-[data-toast-container="bottom-right"] {
-  bottom: var(--a-space-4);
-  right: var(--a-space-4);
-  align-items: flex-end;
+[data-toast-container]:popover-open {
+  /* Native top-layer; component-level z-index above is moot here but kept
+     for fallback. */
+  display: flex;
 }
 
+/* Top lanes — newest at top, columns flow downward. */
+[data-toast-container="top-right"],
+[data-toast-container="top-center"],
+[data-toast-container="top-left"] {
+  top: var(--a-space-4);
+  flex-direction: column;
+}
+/* Bottom lanes — newest at bottom, columns reverse so post() lands at
+   the visually-newest position. */
+[data-toast-container="bottom-right"],
+[data-toast-container="bottom-center"],
 [data-toast-container="bottom-left"] {
   bottom: var(--a-space-4);
-  left: var(--a-space-4);
-  align-items: flex-start;
+  flex-direction: column-reverse;
 }
 
+[data-toast-container="bottom-right"],
 [data-toast-container="top-right"] {
-  top: var(--a-space-4);
   right: var(--a-space-4);
   align-items: flex-end;
 }
-
+[data-toast-container="bottom-left"],
 [data-toast-container="top-left"] {
-  top: var(--a-space-4);
   left: var(--a-space-4);
   align-items: flex-start;
 }
+[data-toast-container="top-center"],
+[data-toast-container="bottom-center"] {
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}