@adia-ai/web-components 0.6.42 → 0.6.44

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.44] — 2026-05-28
+
+### Fixed — `<canvas-ui>` no longer hard-requires `@adia-ai/web-modules` at build time (FEEDBACK-81)
+
+- **`components/canvas/canvas.js`** — the A2UI renderer `<a2ui-root>` (which lives in `@adia-ai/web-modules`) was a top-level *static* import. Because `@adia-ai/web-components` declares no dependency on `@adia-ai/web-modules`, the default barrel `import '@adia-ai/web-components'` (which registers `<canvas-ui>`) failed to build for primitives-only consumers who omitted `web-modules` — a hard Vite/rolldown `UNRESOLVED_IMPORT … web-modules/runtime/a2ui-root`. The import is now lazy + guarded: `#ensureRenderer()` runs a `/* @vite-ignore */` dynamic import on `connected()`, and a missing `web-modules` degrades to a one-time console warning instead of breaking the build. Consumers that have `web-modules` keep the prior synchronous render path (fast-path when `<a2ui-root>` is already defined); `process` / `processAll` / `reset` / version-restore buffer until the renderer is ready, preserving call order. The primitives barrel is now self-contained.
+
+### Maintenance
+
+- **`dist/web-components.min.js` + `dist/icons-manifest.js`** — bundle rebuild reflecting the `components/canvas/canvas.js` decouple above.
+
+## [0.6.43] — 2026-05-27
+
+### Added — `<list-ui>` `[contained]` prop declared in yaml
+
+- **`list/list.yaml` + `list.d.ts` + `list.a2ui.json`** — declares the `[contained]` attribute (already implemented in CSS) as a first-class prop so the gen-UI corpus + A2UI sidecar can emit `<list-ui contained>` deterministically. Closes gen-review cycle-18 task #63.
+
+### Fixed — Cycle-18 Ralph Loop substrate fixes (button + card + alert)
+
+- **`button/button.yaml` + `button.class.js` + `button.css` + `button.a2ui.json`** — Ralph-Loop sweep absorbing cycle-18 RL findings (6 visual bugs fixed at SoT).
+- **`card/card.css`** — preserves transpiled `text-ui` slot grammar; matches header-slot patterns from RL2.
+- **`alert/alert.css`** — header-slot polish from cycle-18 RL2 (10 visual bugs across header slot, leaf children, calendar widget).
+
+### Maintenance
+
+- **`dist/web-components.min.{js,css}` + `dist/icons-manifest.js`** — bundle rebuild reflecting the `components/` substrate fixes above.
+
 ## [0.6.42] — 2026-05-26
 
 ### Changed — yaml/sidecar polish absorbing gen-review cycle 8-17 findings

package/components/alert/alert.css

@@ -116,10 +116,16 @@
   /* Close button is a `<button-ui icon="x" variant="ghost" size="sm">`
      stamped by alert.js — it brings its own focus ring, hover state,
      and transitions. Box height matches the leading slot so X and icon
-     sit on the same first-line baseline. */
+     sit on the same first-line baseline.
+     The X color tracks the alert's variant text color (e.g. success-text
+     on success, danger-text on danger) instead of the default ghost
+     subtle/muted — so the dismiss icon reads as part of the alert chrome
+     rather than disconnected grey. */
   :scope [slot="close"] {
     flex-shrink: 0;
     min-height: calc(var(--alert-font, var(--alert-font-default)) * var(--alert-line-height, var(--alert-line-height-default)));
+    --button-fg-ghost: var(--alert-fg, var(--alert-fg-default));
+    --button-fg-ghost-hover: var(--alert-icon-fg, var(--alert-icon-fg-default));
   }
 
   /* ──────────────────────────────────────────────────────────────

package/components/button/button.a2ui.json

@@ -49,6 +49,11 @@
       "type": "string",
       "default": ""
     },
+    "icon-trailing": {
+      "description": "Trailing Phosphor icon name (rendered after text). Use for forward affordances like \"Next →\" / wizards / pagination / product tours where the caret points away from the label.",
+      "type": "string",
+      "default": ""
+    },
     "size": {
       "description": "Sizing scale (xs/sm/md/lg/xl).",
       "type": "string",

package/components/button/button.class.js

@@ -43,6 +43,7 @@ export class UIButton extends UIElement {
     disabled: { type: Boolean, default: false, reflect: true },
     stretch:  { type: Boolean, default: false, reflect: true },
     icon:     { type: String,  default: '', reflect: true },
+    iconTrailing: { type: String, default: '', reflect: true, attribute: 'icon-trailing' },
     type:     { type: String,  default: 'button', reflect: true },
   };
 
@@ -61,7 +62,7 @@ export class UIButton extends UIElement {
     // Only auto-set when we have meaningful text to put there.
     if (this.text) this.setAttribute('aria-label', this.text);
     if (this.icon) {
-      const existing = this.querySelector('icon-ui');
+      const existing = this.querySelector(':scope > icon-ui:not([slot])');
       if (!existing || existing.name !== this.icon) {
         if (existing) existing.remove();
         const iconEl = document.createElement('icon-ui');
@@ -70,6 +71,17 @@ export class UIButton extends UIElement {
       }
     }
 
+    if (this.iconTrailing) {
+      const existing = this.querySelector(':scope > icon-ui[slot="icon-trailing"]');
+      if (!existing || existing.name !== this.iconTrailing) {
+        if (existing) existing.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.iconTrailing);
+        iconEl.setAttribute('slot', 'icon-trailing');
+        this.appendChild(iconEl);
+      }
+    }
+
     // FEEDBACK-15: warn when text= begins with a symbol that icon= already
     // renders (e.g. text="+ New Claim" icon="plus" → a doubled "+"). One-shot
     // per element via WeakSet; warning-only — the button still renders. The

package/components/button/button.css

@@ -113,7 +113,19 @@ button-ui[color="danger"]:not([disabled]):hover {
     min-width: 0;
   }
 
-  /* Trailing slot */
+  /* Trailing icon slot — for forward-affordance carets ("Next →"), distinct
+     from `[slot="trailing"]` which is styled as a kbd-pill for shortcut
+     indicators. Auto-stamped when `[icon-trailing]` is set. */
+  [slot="icon-trailing"] {
+    order: 99;
+    margin-inline-start: var(--a-space-1);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* Trailing slot — kbd-pill style for `<kbd-ui slot="trailing">⌘K</kbd-ui>`.
+     Use `[icon-trailing="<name>"]` (above) for trailing icons instead. */
   [slot="trailing"] {
     order: 99;
     margin-inline-start: auto;

package/components/button/button.yaml

@@ -36,6 +36,10 @@ props:
     description: Leading Phosphor icon name (rendered before text).
     type: string
     default: ""
+  icon-trailing:
+    description: Trailing Phosphor icon name (rendered after text). Use for forward affordances like "Next →" / wizards / pagination / product tours where the caret points away from the label.
+    type: string
+    default: ""
   size:
     description: "Sizing scale (xs/sm/md/lg/xl)."
     type: string

package/components/canvas/canvas.js

@@ -1,5 +1,9 @@
 import { UIElement } from '../../core/element.js';
-import '../../../web-modules/runtime/a2ui-root/a2ui-root.js';
+// NOTE: the A2UI renderer (<a2ui-root>) lives in @adia-ai/web-modules and is
+// loaded lazily + guarded inside #ensureRenderer() (kicked off from connected()).
+// It is deliberately NOT a static import: @adia-ai/web-components declares no
+// dependency on @adia-ai/web-modules, so a static cross-package import hard-fails
+// the build for primitives-only consumers who never use <canvas-ui> (FEEDBACK-81).
 
 /**
  * <canvas-ui> — A2UI rendering surface.
@@ -25,6 +29,10 @@ export class UICanvas extends UIElement {
   #historyIndex = -1;
   static MAX_HISTORY = 10;
 
+  // FB-81: lazy/guarded <a2ui-root> loader state.
+  #rendererReady = null;                 // Promise<boolean> | null
+  static #warnedMissingRenderer = false;
+
   #onKeydown = (e) => {
     if (e.target.closest('input, textarea, [contenteditable]')) return;
     if (!this.contains(document.activeElement) && document.activeElement !== document.body) return;
@@ -66,6 +74,8 @@ export class UICanvas extends UIElement {
     this.addEventListener('input', this.#onInput);
     // Forward a2ui-retry from wired error cards so consumers can retry generation
     this.addEventListener('a2ui-retry', this.#onRetry);
+    // Kick off the lazy renderer load now that a canvas is in the DOM.
+    this.#ensureRenderer();
   }
 
   disconnected() {
@@ -79,6 +89,53 @@ export class UICanvas extends UIElement {
     this.#bound = false;
   }
 
+  /**
+   * Lazily load the A2UI renderer (<a2ui-root>) from @adia-ai/web-modules.
+   * Resolves true once the element is defined, false if web-modules is not
+   * installed (primitives-only consumers). Idempotent — the import runs once.
+   * Guarded so a missing sibling package degrades to a one-time warning
+   * instead of a hard build/runtime failure (FEEDBACK-81).
+   */
+  #ensureRenderer() {
+    if (this.#rendererReady) return this.#rendererReady;
+    if (customElements.get('a2ui-root')) {
+      this.#rendererReady = Promise.resolve(true);
+      return this.#rendererReady;
+    }
+    this.#rendererReady = import(/* @vite-ignore */ '../../../web-modules/runtime/a2ui-root/a2ui-root.js')
+      .then(() => customElements.whenDefined('a2ui-root'))
+      .then(() => true)
+      .catch((err) => {
+        if (!UICanvas.#warnedMissingRenderer) {
+          UICanvas.#warnedMissingRenderer = true;
+          console.warn(
+            '[canvas-ui] A2UI renderer <a2ui-root> could not be loaded — install ' +
+            '@adia-ai/web-modules to render generated UI in <canvas-ui>. Apps that ' +
+            'use only primitives (and never <canvas-ui>) can ignore this.',
+            err,
+          );
+        }
+        return false;
+      });
+    return this.#rendererReady;
+  }
+
+  /**
+   * Run `fn(rootEl)` against the <a2ui-root> once it is available. Synchronous
+   * fast-path when the renderer is already upgraded (preserves prior timing for
+   * consumers that have @adia-ai/web-modules); otherwise defers until the lazy
+   * import resolves, preserving call order. No-op when web-modules is absent.
+   */
+  #whenRoot(fn) {
+    if (this.#rootEl && typeof this.#rootEl.process === 'function') {
+      fn(this.#rootEl);
+      return;
+    }
+    this.#ensureRenderer().then((ok) => {
+      if (ok && this.#rootEl && typeof this.#rootEl.process === 'function') fn(this.#rootEl);
+    });
+  }
+
   render() {
     if (this.#bound) return;
     this.#bound = true;
@@ -104,18 +161,19 @@ export class UICanvas extends UIElement {
 
   /** Process a single A2UI message. */
   process(message) {
-    this.#rootEl?.process(message);
+    this.#whenRoot((root) => root.process(message));
   }
 
   /** Process an array of A2UI messages. */
   processAll(messages) {
-    if (!this.#rootEl) return;
-    for (const msg of messages) this.#rootEl.process(msg);
+    this.#whenRoot((root) => {
+      for (const msg of messages) root.process(msg);
+    });
   }
 
   /** Reset the canvas. */
   reset() {
-    this.#rootEl?.reset();
+    this.#whenRoot((root) => root.reset());
   }
 
   /** Return formatted innerHTML of the a2ui-root. */
@@ -155,10 +213,12 @@ export class UICanvas extends UIElement {
 
   #restoreVersion() {
     const messages = this.#history[this.#historyIndex];
-    this.#rootEl?.reset();
-    if (messages) {
-      for (const msg of messages) this.#rootEl?.process(msg);
-    }
+    this.#whenRoot((root) => {
+      root.reset();
+      if (messages) {
+        for (const msg of messages) root.process(msg);
+      }
+    });
   }
 
   // ── Private ──

package/components/card/card.css

@@ -151,6 +151,7 @@
 
   & > header {
     display: block;
+    width: stretch;
     margin: var(--card-inset, var(--card-inset-default));
   }
 
@@ -194,8 +195,20 @@
   /* Unslotted children (zettel fragment injection, etc.) — each on its own row,
      spanning the full width, stacked ABOVE the heading/description/action grid.
      This lets compositions inject logos, banners, etc. into a header without
-     having to know the slot vocabulary. */
-  & > header > *:not([slot]):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small) {
+     having to know the slot vocabulary.
+
+     Guarded by `:has(> [slot])` so it ONLY fires when the header is in grid
+     mode. Modern browsers honor `justify-self` on block-level in-flow elements,
+     so without this guard, an unslotted `<row-ui>` direct child of header
+     would be centered even when no slot grammar is in use — causing the
+     role-management center-align bug seen in cycle-18 follow-up.
+
+     A2UI transpilation note: the corpus harvester transpiles <h1>..<h6>/<p>/<small>
+     to <text-ui variant="display|title|heading|subsection|body|caption">. The
+     heading/description rules below match those variants so transpiled chunks
+     get the same grid placement as hand-authored native heading/paragraph
+     elements. text-ui is excluded here to avoid the centered-fallback. */
+  & > header:has(> [slot]) > *:not([slot]):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not(text-ui) {
     grid-column: 1 / -1;
     justify-self: center;
   }
@@ -213,13 +226,19 @@
     justify-content: center;
   }
 
-  & > header:has(> :is([slot="description"], p, small)) > [slot="icon"] {
+  & > header:has(> :is([slot="description"], p, small, text-ui[variant="body"], text-ui[variant="caption"])) > [slot="icon"] {
     grid-row: 1 / span 2;
     align-self: start;
   }
 
-  /* Heading — row 1 */
+  /* Heading — row 1.
+     Matches native h1-h6 AND the text-ui variants the A2UI transpiler emits
+     for them (display|title|heading|subsection — see HTML_TAG_MAP in
+     packages/a2ui/compose/transpiler/transpiler-maps.js).
+     The text-ui variants are matched only when UNSLOTTED so an explicit
+     `slot="heading"` / `slot="description"` / `slot="action"` always wins. */
   & > header > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
+  & > header > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
   & > header > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
     grid-row: 1;
     line-height: 1.3;
@@ -232,16 +251,24 @@
     gap: var(--card-header-gap, var(--card-header-gap-default));
   }
   & > header:has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 2; }
+  & > header:has(> [slot="icon"]) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]) { grid-column: 2; }
   & > header:not(:has(> [slot="icon"])) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 1; }
-
-  /* Description — row 2 */
-  & > header > :is([slot="description"], p, small) {
+  & > header:not(:has(> [slot="icon"])) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]) { grid-column: 1; }
+
+  /* Description — row 2.
+     Matches native p/small (with or without slot=description) AND the
+     text-ui variants the transpiler emits for them (body|caption) ONLY
+     when unslotted — so a `slot="heading"` text-ui doesn't get treated
+     as description. */
+  & > header > :is([slot="description"], p, small),
+  & > header > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
     grid-row: 2;
     grid-column: 1 / -1;
     line-height: 1.4;
     margin: 0;
   }
   & > header:has(> [slot="icon"]) > :is([slot="description"], p, small) { grid-column: 2 / -1; }
+  & > header:has(> [slot="icon"]) > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) { grid-column: 2 / -1; }
 
   /* Action — row 1, last column.
      Flex container so it can hold badge + button + anything inline. */
@@ -262,6 +289,7 @@
      [bleed] removes all spacing for edge-to-edge content. */
 
   & > section {
+    width: stretch;
     margin: var(--card-inset, var(--card-inset-default));
   }
 
@@ -299,6 +327,7 @@
 
   & > footer {
     display: block;
+    width: stretch;
     margin: var(--card-inset, var(--card-inset-default));
   }
 

package/components/list/list.a2ui.json

@@ -16,6 +16,11 @@
     "component": {
       "const": "List"
     },
+    "contained": {
+      "description": "Add inline padding to list items so content aligns with surrounding\ncard/section insets. Pairs with [divider] — combining `[divider]\n[contained]` gives full-width borders between items but inset\ncontent. Without contained, [divider] items have `padding-inline: 0`\nso content sits at the list-ui edges (canonical edge-to-edge style).\n",
+      "type": "boolean",
+      "default": false
+    },
     "divider": {
       "description": "Show dividers between items",
       "type": "boolean",

package/components/list/list.d.ts

@@ -30,6 +30,13 @@ export interface ListSelectionChangeEventDetail {
 export type ListSelectionChangeEvent = CustomEvent<ListSelectionChangeEventDetail>;
 
 export class UIList extends UIElement {
+  /** Add inline padding to list items so content aligns with surrounding
+card/section insets. Pairs with [divider] — combining `[divider]
+[contained]` gives full-width borders between items but inset
+content. Without contained, [divider] items have `padding-inline: 0`
+so content sits at the list-ui edges (canonical edge-to-edge style).
+ */
+  contained: boolean;
   /** Show dividers between items */
   divider: boolean;
   /** Enable selection on child listitems (roving tabindex + aria-selected). */

package/components/list/list.yaml

@@ -25,6 +25,15 @@ props:
     description: Show dividers between items
     type: boolean
     default: false
+  contained:
+    description: |
+      Add inline padding to list items so content aligns with surrounding
+      card/section insets. Pairs with [divider] — combining `[divider]
+      [contained]` gives full-width borders between items but inset
+      content. Without contained, [divider] items have `padding-inline: 0`
+      so content sits at the list-ui edges (canonical edge-to-edge style).
+    type: boolean
+    default: false
   selectable:
     description: Enable selection on child listitems (roving tabindex + aria-selected).
     type: boolean