@adia-ai/web-components 0.6.20 → 0.6.21

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.21] — 2026-05-21
+
+### Changed — `table-ui` body cells truncate by default (opt-in wrap via `[wrap]` / `[data-wrap]`)
+
+- **`<table-ui>` body cells now default to single-line with ellipsis truncation** instead of `overflow-wrap: anywhere`. Long unbreakable strings (URLs, IDs) clip gracefully rather than re-wrapping the row, matching the row convention shared by `<select-ui>` + `<nav-item-ui>`. Three opt-in paths to wrapping: (1) `<table-ui wrap>` — new reflected boolean prop, whole-table opt-in; (2) `col.wrap: true` in `columns[]` — renderer sets `[data-wrap]` on each body cell in that column (per-column opt-in); (3) `<td data-wrap>` — surgical per-cell opt-in for hand-authored cells. Behavior change for consumers who relied on the legacy wrap default — set `[wrap]` on the host to restore. New tests cover the three paths. Files: `components/table/{table.css,table.yaml,class.js,table.test.js}`.
+
+### Fixed — toast / feed-item variant text colour now safe in light + dark mode
+
+- **`<feed-item-ui>` — the element `<toast-ui>` / `UIToast.show()` render through — paired a scheme-locked foreground with a scheme-flipping background.** The `info` / `success` / `warning` / `danger` variants set the text to `--a-{variant}-fg` (= `--a-{variant}-text-strong`, locked for solid `--variant-strong` fills) over a `--a-{variant}-muted` tint that flips light↔dark — going low-contrast in one scheme (e.g. a warning toast in dark mode). They now use the scheme-aware `--a-{variant}-text`, which flips with the background — matching `alert.css` and `toast.css` variant wiring. Files: `feed.css`.
+
+### Fixed — `input-ui` inline `[slot="label"]` no longer crowds the value text
+
+- **An inline `<span slot="label">` sat flush against the value** with only the field gap between them, so a short label and the value text read as one run-on string. `[slot="label"]` now carries a `min-width` floor (new `--input-label-min-width` token, default `8ch`) — it reserves a label column and the value start aligns down a stack of inputs. `flex-shrink: 0` keeps it from collapsing; a label wider than the floor still grows past it. Files: `input.css`.
+
 ## [0.6.20] — 2026-05-21
 
 ### Added — `table-ui` `row-click` event (FEEDBACK-35)

package/components/feed/feed.css

@@ -104,10 +104,15 @@ feed-item-ui[data-closing] {
     --feed-item-gap:      var(--a-space-3);
     --feed-item-max-width: 22rem;  /* §230-bundle (v0.5.9): component-local. Was orphaned --a-feed-max-width — hoisted per RESPONSE-21 guidance. */
   }
-  :scope[variant="info"]    { --feed-item-fg: var(--a-info-fg);    --feed-item-bg: var(--a-info-muted); }
-  :scope[variant="success"] { --feed-item-fg: var(--a-success-fg); --feed-item-bg: var(--a-success-muted); }
-  :scope[variant="warning"] { --feed-item-fg: var(--a-warning-fg); --feed-item-bg: var(--a-warning-muted); }
-  :scope[variant="danger"]  { --feed-item-fg: var(--a-danger-fg);  --feed-item-bg: var(--a-danger-muted); }
+  /* fg = the scheme-aware --a-{variant}-text, which flips light↔dark via
+     light-dark() to track the --a-{variant}-muted bg (also scheme-aware).
+     NOT --a-{variant}-fg (= --a-{variant}-text-strong, locked for solid
+     --variant-strong fills) — pairing a locked fg with a flipping bg goes
+     low-contrast in one scheme. Mirrors alert.css + toast.css wiring. */
+  :scope[variant="info"]    { --feed-item-fg: var(--a-info-text);    --feed-item-bg: var(--a-info-muted); }
+  :scope[variant="success"] { --feed-item-fg: var(--a-success-text); --feed-item-bg: var(--a-success-muted); }
+  :scope[variant="warning"] { --feed-item-fg: var(--a-warning-text); --feed-item-bg: var(--a-warning-muted); }
+  :scope[variant="danger"]  { --feed-item-fg: var(--a-danger-text);  --feed-item-bg: var(--a-danger-muted); }
 
   :scope {
     box-sizing: border-box;

package/components/input/input.css

@@ -30,6 +30,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     --input-placeholder-fg:  var(--a-ui-text-placeholder);
     --input-affix-fg:        var(--a-ui-text-placeholder);
     --input-field-gap:       var(--a-space-1);
+    --input-label-min-width: 8ch;
 
     /* ── Transitions ── */
     --input-duration:        var(--a-duration-fast);
@@ -55,9 +56,15 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   /* Inline label — sits inside [slot="field"] as a leading caption,
      between [slot="prefix"] and [slot="text"]. Dim by default; shares
      the input chrome border. For stacked label / hint / error, wrap
-     with field-ui. */
+     with field-ui.
+
+     min-width reserves a label column so a short label (e.g. "PIN")
+     doesn't sit flush against the value text, and the value start aligns
+     down a stack of inputs. flex-shrink: 0 keeps it from collapsing; a
+     label wider than the floor grows past it. */
   [slot="label"] {
     flex-shrink: 0;
+    min-width: var(--input-label-min-width);
     color: var(--input-affix-fg);
     font-size: var(--input-font-size);
     user-select: none;

package/components/table/class.js

@@ -111,6 +111,7 @@ export class UITable extends UIElement {
     selectable: { type: Boolean, default: false, reflect: true },
     expandable: { type: Boolean, default: false, reflect: true },
     striped:    { type: Boolean, default: false, reflect: true },
+    wrap:       { type: Boolean, default: false, reflect: true },
     raw:        { type: Boolean, default: false, reflect: true },
     density:    { type: String,  default: 'standard', reflect: true },
     paginate:   { type: Number,  default: 0,     reflect: true },
@@ -827,6 +828,11 @@ export class UITable extends UIElement {
         cell.setAttribute('data-pinned', col.pinned);
       }
 
+      // Wrap (per-column opt-in to multi-line cell content)
+      if (col.wrap) {
+        cell.setAttribute('data-wrap', '');
+      }
+
       cells.push(cell);
     }
 

package/components/table/table.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "columns": {
-      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
+      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
       "type": "array",
       "default": []
     },
@@ -75,6 +75,11 @@
       "description": "Alternate row background colors for visual scanning.",
       "type": "boolean",
       "default": false
+    },
+    "wrap": {
+      "description": "Allow body-cell content to wrap onto multiple lines. Default is single-line with ellipsis truncation (matches the row convention shared by <select-ui> + <nav-item-ui>); long unbreakable strings clip gracefully rather than rewrapping the row. With [wrap], row height auto-grows to fit wrapped content. For surgical opt-in on a single column, set [data-wrap] on the cell / col-def instead.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": [

package/components/table/table.css

@@ -216,6 +216,25 @@
     padding: var(--table-py) var(--table-px);
     border-bottom: 1px solid var(--table-border);
     min-width: 0;
+    /* Default: single line with ellipsis. Authors opt in to wrapping
+       via [wrap] on the host (whole table) or [data-wrap] on a column /
+       individual cell. Matches `<select-ui>` / `<nav-item-ui>` single-line
+       row convention; long unbreakable strings (URLs, IDs) clip gracefully
+       rather than rewrapping the row. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Wrap opt-in: per-table (all body cells) or per-cell (one column).
+     Restores the legacy `overflow-wrap: anywhere` behavior so wrapped
+     content can break inside long unbroken tokens (URLs, IDs). Row
+     height auto-grows to fit. */
+  :scope[wrap] [data-body] [role="gridcell"],
+  [data-body] [role="gridcell"][data-wrap] {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
     overflow-wrap: anywhere;
   }
 

package/components/table/table.d.ts

@@ -86,7 +86,7 @@ export interface TableSortEventDetail {
 export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
-  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
+  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
   columns: unknown[];
   /** Row records. Array of plain objects keyed to columns[].key. */
   data: unknown[];
@@ -108,6 +108,8 @@ export class UITable extends UIElement {
   sortable: boolean;
   /** Alternate row background colors for visual scanning. */
   striped: boolean;
+  /** Allow body-cell content to wrap onto multiple lines. Default is single-line with ellipsis truncation (matches the row convention shared by <select-ui> + <nav-item-ui>); long unbreakable strings clip gracefully rather than rewrapping the row. With [wrap], row height auto-grows to fit wrapped content. For surgical opt-in on a single column, set [data-wrap] on the cell / col-def instead. */
+  wrap: boolean;
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,

package/components/table/table.test.js

@@ -172,3 +172,67 @@ describe('table-ui — v0.6.18 loading=skeleton-rows (FB-12 P2)', () => {
     expect(afterHeader.children.length).toBe(3);
   });
 });
+
+/**
+ * Body-cell wrap default + opt-in paths (PATCH-class behavior change).
+ *
+ * Default: cells truncate single-line with ellipsis (the CSS rule sets
+ * white-space: nowrap; overflow: hidden; text-overflow: ellipsis). Three
+ * opt-in surfaces lift the truncation:
+ *   - host [wrap] attribute (reflected from the `wrap` prop)
+ *   - col.wrap=true in columns[] → renderer sets [data-wrap] on each
+ *     body cell in that column
+ *   - [data-wrap] directly on a hand-authored <td>
+ *
+ * Tests lock the attribute contract; CSS-rule application is covered by
+ * the source-grep stylistic invariants of table.css.
+ */
+describe('table-ui — wrap default + opt-in', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('host [wrap] attribute reflects from the wrap property', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    expect(el.hasAttribute('wrap')).toBe(false);
+    el.wrap = true;
+    await raf();
+    expect(el.hasAttribute('wrap')).toBe(true);
+    el.wrap = false;
+    await raf();
+    expect(el.hasAttribute('wrap')).toBe(false);
+  });
+
+  it('col.wrap=true marks body cells in that column with [data-wrap]', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = [
+      { key: 'id',    label: 'ID' },
+      { key: 'name',  label: 'Name', wrap: true },
+      { key: 'email', label: 'Email' },
+    ];
+    el.data = ROWS;
+    await raf();
+    const bodyRows = el.querySelectorAll(':scope > [data-body] > [role="row"]');
+    expect(bodyRows.length).toBe(2);
+    for (const row of bodyRows) {
+      const cells = row.querySelectorAll('[role="gridcell"]');
+      expect(cells.length).toBe(3);
+      expect(cells[0].hasAttribute('data-wrap')).toBe(false);
+      expect(cells[1].hasAttribute('data-wrap')).toBe(true);
+      expect(cells[2].hasAttribute('data-wrap')).toBe(false);
+    }
+  });
+
+  it('omitting col.wrap leaves all body cells without [data-wrap]', async () => {
+    const el = mount('<table-ui></table-ui>');
+    el.columns = COLS;
+    el.data = ROWS;
+    await raf();
+    const cells = el.querySelectorAll(':scope > [data-body] [role="gridcell"]');
+    expect(cells.length).toBeGreaterThan(0);
+    for (const cell of cells) {
+      expect(cell.hasAttribute('data-wrap')).toBe(false);
+    }
+  });
+});

package/components/table/table.yaml

@@ -19,7 +19,7 @@ composes:
   - badge-ui
 props:
   columns:
-    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.
+    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.
     type: array
     default: []
   data:
@@ -76,6 +76,17 @@ props:
     description: Alternate row background colors for visual scanning.
     type: boolean
     default: false
+  wrap:
+    description: >-
+      Allow body-cell content to wrap onto multiple lines. Default is
+      single-line with ellipsis truncation (matches the row convention
+      shared by <select-ui> + <nav-item-ui>); long unbreakable strings
+      clip gracefully rather than rewrapping the row. With [wrap], row
+      height auto-grows to fit wrapped content. For surgical opt-in on
+      a single column, set [data-wrap] on the cell / col-def instead.
+    type: boolean
+    default: false
+    reflect: true
 events:
   cell-click:
     description: Fired when a data cell is clicked. detail carries the cell location + value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.20",
+  "version": "0.6.21",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",