@adia-ai/web-components 0.6.41 → 0.6.43

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog — @adia-ai/web-components
 
+## [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
+
+- **`description-list.yaml` + `table.yaml` + `upload.yaml`** — yaml + a2ui.json sidecars updated absorbing the gen-review cycle 14-17 corpus-fix arc (slot patterns + table data + header anatomy + accordion-item-ui text= contract).
+- **`core/provider.js`** — minor adjustment.
+
 ## [0.6.41] — 2026-05-26
 
 ### Maintenance

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/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/description-list/description-list.a2ui.json

@@ -67,11 +67,7 @@
       "Field",
       "Section"
     ],
-    "slots": {
-      "[object Object]": {
-        "description": "Child content region for the `[object Object]` slot."
-      }
-    },
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/description-list/description-list.yaml

@@ -38,9 +38,10 @@ props:
       - stacked
       - inline
 events: {}
-slots:
-  "[object Object]":
-    description: "Child content region for the `[object Object]` slot."
+slots: {}
+# Consumer passes <dt>/<dd> children inline (default slot). No named
+# slots. Previous "[object Object]" entry was a yaml-codegen artifact
+# (unstringified JS object key) — cleaned up 2026-05-26.
 states:
   - name: idle
     description: Default, ready for interaction.

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

package/components/table/table.a2ui.json

@@ -87,7 +87,13 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "fix": "<table-ui paginate=\"25\"></table-ui>",
+        "why": "[virtual] is not a recognized prop. The attribute is silently accepted (custom elements ignore unknown attributes) but has no effect — all rows are still rendered to the DOM. Common cross-framework instinct (AG Grid / TanStack / lit-virtualizer) that does not transfer to table-ui.",
+        "wrong": "<table-ui virtual></table-ui>"
+      }
+    ],
     "category": "agent",
     "composes": [
       "check-ui",

package/components/table/table.yaml

@@ -269,7 +269,22 @@ a2ui:
       value, dataIndex}. Per ADR-0027, table-ui composes check-ui,
       icon-ui, progress-ui, pagination-ui, skeleton-ui, badge-ui —
       consumer pages must explicitly import the ones they use.
-anti_patterns: []
+    - >-
+      For large datasets (100+ rows), use [paginate="N"] to limit
+      rendered rows and add a pagination bar. [virtual] is NOT a
+      recognized prop and is silently ignored — there is no DOM-level
+      virtual scrolling in table-ui. [paginate] is the supported
+      performance mechanism. Wire [paginate] with optional [search]
+      and the `page` event for server-driven pagination.
+anti_patterns:
+  - wrong: '<table-ui virtual></table-ui>'
+    why: >-
+      [virtual] is not a recognized prop. The attribute is silently
+      accepted (custom elements ignore unknown attributes) but has no
+      effect — all rows are still rendered to the DOM. Common
+      cross-framework instinct (AG Grid / TanStack / lit-virtualizer)
+      that does not transfer to table-ui.
+    fix: '<table-ui paginate="25"></table-ui>'
 examples:
   - name: api-key-table
     description: API key management table with actions and status badges.

package/components/upload/upload.a2ui.json

@@ -100,23 +100,7 @@
       "image",
       "input"
     ],
-    "slots": {
-      "dropzone": {
-        "description": "Click/drop target area"
-      },
-      "filelist": {
-        "description": "List of selected file names"
-      },
-      "hint": {
-        "description": "Help text below the dropzone"
-      },
-      "input": {
-        "description": "Hidden native file input"
-      },
-      "label": {
-        "description": "Label element above the dropzone"
-      }
-    },
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/upload/upload.yaml

@@ -47,17 +47,14 @@ props:
 events:
   change:
     description: Fired when files are selected via click or drag-and-drop
-slots:
-  dropzone:
-    description: Click/drop target area
-  filelist:
-    description: List of selected file names
-  hint:
-    description: Help text below the dropzone
-  input:
-    description: Hidden native file input
-  label:
-    description: Label element above the dropzone
+slots: {}
+# Authoring note (2026-05-26): the previous slots block declared
+# dropzone/filelist/hint/input/label, but class.js stamps these as
+# `<div data-dropzone>` / `<div data-filelist>` / `<span hint="…">` etc.
+# — NOT as `[slot="X"]` anchors. `<upload-ui><div slot="dropzone">…`
+# wouldn't render (innerHTML stamp wipes child). Hint + label are
+# already declared as props above (text-only); for an avatar / icon
+# / form-element wrapper, compose <field-ui label> around the upload.
 states:
   - name: idle
     description: Default, ready for interaction.

package/core/provider.js

@@ -172,6 +172,7 @@ export class UIRouter extends UIProvider {
     if (!this.#ownCtrl) {
       this.#ownCtrl = new RouteController({ routes: list });
       this.controller = this.#ownCtrl;
+      this.#ownCtrl.notify();
     } else {
       this.#ownCtrl.commands.setRoutes(list);
     }