@adia-ai/web-components 0.6.42 → 0.6.43

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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

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/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