@adia-ai/web-components 0.8.5 → 0.8.7

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # Changelog — @adia-ai/web-components
 
-## [0.8.5] — 2026-07-17
+## [0.8.7] — 2026-07-19
+
+### Changed
+- **`dist/theme-provider.min.js`, `dist/web-components.min.js` rebuilt** (`npm run build:bundle-js`) — both had drifted stale relative to source; regenerated as part of 0.8.7 release pre-flight. No source change; `patterns/` also joins the package's published `files` (see `package.json`) so a consumer install resolves pattern source from `node_modules` (`adia-patterns` skill, `adia-ui-factory` `CHANGELOG.md`).
+
+## [0.8.6] — 2026-07-18
+
+### Fixed
+- **SSR/late-upgrade attribute replay** (`core/element.js`, `core/element.test.js`; gh#284, PR #309): the custom-elements spec's "upgrade an element" algorithm (§4.13.5 step 6) requires replaying `attributeChangedCallback` for attributes already present before `connectedCallback` fires — happy-dom (this repo's test DOM) skips that replay entirely, and linkedom (the real SSR consumers' shim) is a similarly from-scratch registry. Net effect: any `reflect: true` property seeded only from server-rendered/pre-parsed HTML stayed at its class default after upgrade (`<nav-item-ui text="Profile">` rendered an empty label). `connectedCallback` now re-syncs every declared property from its live attribute before `connected()` runs — a no-op in spec-compliant environments (the setter's `Object.is` check short-circuits, no extra render pass). Regression tests: `describe('UIElement — SSR attribute-upgrade replay (gh#284)')`.
+- **`table-ui` row-divider doubling** (`components/table/table.css`; TKT-0026, PR #247): body-cell dividers moved from `border-bottom` (every row, so the last row doubled against the container's own inset box-shadow perimeter) to `border-top` scoped `[role="row"]:not(:first-child)` (so the first row doesn't instead double against the header's border). The `[striped]` variant's stale `border-bottom: none` override updated to the new property in the same pass.
+- **`field-ui` min-width floor** (`components/field/field.css`; gh#305, PR #315): a field sitting next to a grow field in a row no longer collapses to zero width (the State/City layout).
+- **`--a-ui-bg-selected`** (`styles/colors/semantics/features.css`; gh#307, PR #315): resolves to the selected-container role instead of a scrim — nav-item selection reads as a surface again.
+- **`--a-bg-muted`** (`styles/colors/semantics/core.css`; PR #314): resolves to `--md-sys-color-neutral-container-low` instead of the plain `-container` tier (which is `--a-canvas-well-strong`'s distinct-object tier) — muted backgrounds are subtler than "own object" surfaces. `verify:contrast` still 42/42 WCAG AA pairs, both schemes.
+
+### Added
+- **`table-ui` declarative `data="[…]"` attribute** (`components/table/table.{class.js,yaml}`; gh#288, PR #311): row records can now be supplied as a JSON-array HTML attribute, hydrated once at connect — the same pattern `chart-ui`'s `data` attribute already used — so a static-HTML or SSR-authored table renders its rows without a post-hydration wiring script. A programmatic `.data =` set before connect always wins; malformed JSON is ignored silently. Works together with `<col-def>` children for a fully static table. (`select-ui` and `chart-ui` already had declarative forms — `table-ui`'s row data was the actual gap in gh#288's scope.)
+
+### Maintenance
+- `dist/` bundles (CSS + JS + sheet + theme-provider) regenerated for the source changes above (PRs #309, #311, #316).
 
 ### Added
 - **`<adia-mark-ui>`** (`components/adia-mark/adia-mark.{class.js,css,yaml}`; gh#283): the Adia brand mark as a token-driven primitive — background always reads `--a-canvas-surface-inverse`, the wordmark always reads `--a-fg-inverse`, so one component replaces the four hand-maintained static `agent-ui-{light,dark,light-transparent,dark-transparent}.svg` exports and adapts to scheme changes with zero asset swapping. Delivery shape (inlined custom element, not a bare SVG file or `icon-ui` registry entry) was constrained by the ticket's own finding: an `<img src="...svg">` or CSS `background-image: url(...)` reference cannot resolve the host page's CSS custom properties — only inlined markup can. `size` prop (xs/sm/md/lg/xl) matches `avatar-ui`'s scale. Verified live in both color schemes (Playwright) — background/foreground correctly invert together with no code change. Existing static-asset consumers (`public/icons/*.svg`, the a2ui corpus chunks, `apps/embedded-app`'s CSS-background brand mark) were deliberately left untouched — the static assets aren't deleted, so nothing breaks; migrating those ~35+ call sites is a separate, larger follow-up, out of scope for this ticket's `size:small` label.

package/components/field/field.css

@@ -43,6 +43,27 @@
     width: 100%;
   }
 
+  /* Exception: when a row-ui sibling is marked [grow], width:100% on the
+     OTHER fields becomes each one's flex main-size (the row's full width).
+     Two or more of those overflow the row, and under the negative-free-
+     space shrink algorithm the [grow] sibling's flex-basis:0% share gets
+     zeroed out entirely instead of receiving the leftover space (issue
+     305). Scoped to :has(> field-ui[grow]) so rows with NO grow winner —
+     where every field intentionally shares the row evenly via this same
+     width:100% overflow-shrink split (e.g. a 2-up expiry/CVC pair) — keep
+     that existing, relied-upon behavior.
+
+     min-width is also needed here, not just width:auto: an empty control's
+     own content-based min size is ~0 (input-ui's [slot="text"] is a bare
+     contenteditable span — the placeholder renders via an out-of-flow
+     `::before`, contributing no intrinsic width), so without a floor this
+     field can still collapse past legibility once the [grow] sibling
+     starts claiming space. */
+  :where(row-ui):has(> field-ui[grow]) > :scope:not([inline]):not([grow]) {
+    width: auto;
+    min-width: 4.5rem;
+  }
+
   /* Gate `row-gap` on actual message presence — otherwise the grid
      reserves --field-gap (~8px) between the control row and a
      zero-content message row, making field-ui[inline] visibly taller

package/components/table/table.a2ui.json

@@ -21,7 +21,7 @@
       "const": "Table"
     },
     "data": {
-      "description": "Row records. Array of plain objects keyed to columns[].key.",
+      "description": "JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data=\"[…]\"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute.",
       "$ref": "common_types.json#/$defs/DynamicObjectList"
     },
     "density": {

package/components/table/table.class.js

@@ -341,6 +341,23 @@ export class UITable extends UIElement {
     // Parse declarative <col-def> children
     this.#parseColDefs();
 
+    /* gh#288 — hydrate from an inline `data="[…]"` HTML attribute, same
+       pattern as chart-ui's `data` attribute (chart.class.js connected()).
+       The canonical entry point is the `.data` property (set
+       programmatically), but a static-HTML/SSR-authored table has no other
+       way to seed rows — `columns` has `<col-def>` children as its
+       declarative form; `data` had none. JSON-parse once at connect; a
+       malformed payload is ignored silently, and a later property
+       assignment still wins (guarded by the `#data.length === 0` check, so
+       a real programmatic `.data = [...]` set before connect is never
+       overwritten by a stale attribute). */
+    if (this.#data.length === 0 && this.hasAttribute('data')) {
+      try {
+        const parsed = JSON.parse(this.getAttribute('data'));
+        if (Array.isArray(parsed)) this.data = parsed;
+      } catch (_) { /* malformed JSON — leave empty, render() shows empty state */ }
+    }
+
     this.setAttribute('role', 'grid');
     this.setAttribute('tabindex', '0');
 

package/components/table/table.css

@@ -250,7 +250,6 @@
     align-items: center;
     align-self: stretch;
     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 /
@@ -262,6 +261,17 @@
     text-overflow: ellipsis;
   }
 
+  /* Row divider as border-top, not border-bottom (TKT-0026) — a
+     border-bottom on every cell put the LAST row's own border at the
+     same coordinate as :scope's inset box-shadow perimeter (:133),
+     doubling the table's bottom edge. border-top divides every OTHER
+     adjacent row pair identically; :not(:first-child) keeps the first
+     body row from doubling against [data-header]'s own border-bottom
+     (:170) instead — the same class of collision, just relocated. */
+  [data-body] [role="row"]:not(:first-child) [role="gridcell"] {
+    border-top: 1px solid var(--table-border);
+  }
+
   /* text-overflow on a flex container doesn't reach text nodes (anonymous
      flex items). Built-in cell types now wrap text in <span>; link type
      creates <a>; avatar/progress composite types use row-ui > span. */
@@ -342,8 +352,11 @@
 
   /* ═══════ Striped ═══════ */
 
+  /* border-top, not border-bottom (TKT-0026) — matches the base rule's
+     own divider property now; striping uses background alone to
+     distinguish rows, no divider lines. */
   :scope[striped] [data-body] [role="gridcell"] {
-    border-bottom: none;
+    border-top: none;
   }
 
   :scope[striped] [data-body] > [role="row"]:nth-child(even) {

package/components/table/table.d.ts

@@ -88,7 +88,7 @@ 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?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
   columns: string;
-  /** Row records. Array of plain objects keyed to columns[].key. */
+  /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;
   /** Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows. */
   density: 'compact' | 'standard' | 'comfortable';

package/components/table/table.test.js

@@ -426,3 +426,54 @@ describe('table-ui — "markdown" cell type (TKT-0008)', () => {
     expect(cell.textContent).toBe('Plain sentence, no special characters.');
   });
 });
+
+// gh#288 — declarative `data="[…]"` attribute, mirroring chart-ui's existing
+// pattern. Row data previously had no declarative form at all — `columns`
+// already had `<col-def>` children; `data` had nothing, so a static-HTML or
+// SSR-authored table always rendered its data empty.
+describe('table-ui — declarative data="[…]" attribute (gh#288)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('hydrates .data from a JSON-array data attribute at connect', async () => {
+    const el = mount(
+      `<table-ui data='${JSON.stringify(ROWS)}'></table-ui>`,
+    );
+    el.columns = COLS;
+    await raf();
+    expect(el.data).toEqual(ROWS);
+    expect(el.querySelectorAll('[role="gridcell"][data-key="name"]').length).toBe(2);
+  });
+
+  it('a malformed data attribute is ignored silently, not thrown', async () => {
+    expect(() => mount(`<table-ui data='not json'></table-ui>`)).not.toThrow();
+    const el = document.querySelector('table-ui');
+    expect(el.data).toEqual([]);
+  });
+
+  it('a non-array JSON value in the attribute is ignored, not coerced', async () => {
+    const el = mount(`<table-ui data='{"not":"an array"}'></table-ui>`);
+    await raf();
+    expect(el.data).toEqual([]);
+  });
+
+  it('a programmatic .data set before connect wins over the attribute', () => {
+    const el = document.createElement('table-ui');
+    el.setAttribute('data', JSON.stringify(ROWS));
+    el.data = [{ id: 99, name: 'Override', email: 'override@acme.com' }];
+    document.body.appendChild(el);
+    expect(el.data).toEqual([{ id: 99, name: 'Override', email: 'override@acme.com' }]);
+  });
+
+  it('works together with declarative <col-def> children — fully static-HTML table', async () => {
+    const el = mount(`
+      <table-ui data='${JSON.stringify(ROWS)}'>
+        <col-def key="id" label="ID"></col-def>
+        <col-def key="name" label="Name"></col-def>
+      </table-ui>
+    `);
+    await raf();
+    expect(el.data).toEqual(ROWS);
+    expect(el.columns.length).toBe(2);
+    expect(el.querySelectorAll('[role="gridcell"][data-key="name"]').length).toBe(2);
+  });
+});

package/components/table/table.yaml

@@ -25,7 +25,12 @@ props:
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   data:
-    description: Row records. Array of plain objects keyed to columns[].key.
+    description: >-
+      JS property (set programmatically — `el.data = [...]`) — row records,
+      an array of plain objects keyed to columns[].key. May also be supplied
+      declaratively as a JSON-array `data="[…]"` attribute, hydrated once at
+      connect (gh#288) — the same pattern chart-ui's `data` attribute uses.
+      Custom accessor on the element class, not a reflected attribute.
     type: array
     items:
       type: object

package/core/element.js

@@ -158,6 +158,30 @@ export class UIElement extends HTMLElement {
     if (!ctor._tag) ctor._tag = this.localName;
     adoptStyles(ctor);
     prepareParts(ctor);
+    // gh#284 — the custom-elements spec's "upgrade an element" algorithm
+    // (§4.13.5 step 6) requires replaying attributeChangedCallback for
+    // every attribute already present on the element BEFORE
+    // connectedCallback fires. Several DOM shims used for SSR (linkedom)
+    // and this repo's own happy-dom test environment skip that replay —
+    // confirmed directly (element.test.js, "SSR attribute-upgrade replay
+    // (gh#284)"): a bare custom element upgraded with a pre-existing
+    // observed attribute gets connectedCallback but never the matching
+    // attributeChangedCallback.
+    // Any reflected property whose only value came from server-rendered
+    // or otherwise pre-parsed HTML is silently stuck at its class
+    // default — e.g. <nav-item-ui text="Profile"> renders an empty
+    // label. connectedCallback fires reliably everywhere, so re-sync
+    // every declared property from its live attribute here rather than
+    // trusting the shim's upgrade-reaction queue. A no-op in spec-
+    // compliant environments: the value already matches (the property
+    // setter's Object.is check short-circuits), so this never causes an
+    // extra render pass on browsers/environments that already got it right.
+    for (const [key, cfg] of Object.entries(ctor.properties)) {
+      const attr = cfg.attribute ?? key.toLowerCase();
+      if (this.hasAttribute(attr)) {
+        this[key] = parseAttr(this.getAttribute(attr), cfg.type ?? String);
+      }
+    }
     // connected() commonly reads this element's reactive properties via
     // template-literal interpolation (`${this.label}` etc.) to stamp its
     // inner DOM. If the outer call path is inside another effect (e.g.

package/core/element.test.js

@@ -316,3 +316,74 @@ describe('UIElement — SSR browser-API absence (gh#285)', () => {
     }
   });
 });
+
+// gh#284 — the custom-elements spec's "upgrade an element" algorithm
+// (§4.13.5 step 6) requires replaying attributeChangedCallback for every
+// attribute already present on an element BEFORE connectedCallback fires
+// on upgrade. happy-dom (this repo's own test DOM) skips that replay —
+// confirmed directly: a bare custom element upgraded with a pre-existing
+// observed attribute gets connectedCallback but never the matching
+// attributeChangedCallback. linkedom (the real SSR consumer's DOM shim,
+// per adia-ssr) is a similarly from-scratch custom-elements registry, so
+// the same gap is expected there too. Simulating the absence directly
+// (a real late-upgrade sequence, not a mock) rather than trusting that
+// happy-dom already reproduces the SSR shape — it does, which is exactly
+// how this was found.
+describe('UIElement — SSR attribute-upgrade replay (gh#284)', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  // Parses markup into an UNDEFINED custom element (so its attributes land
+  // on the element the way a server-rendered / pre-parsed document would),
+  // THEN defines the tag — matching the "define after parse" shape SSR
+  // hydration and lazy client registration both produce.
+  function mountLateUpgrade(tag, BaseImpl, html) {
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    document.body.appendChild(container);
+    customElements.define(tag, BaseImpl);
+    return container.querySelector(tag);
+  }
+
+  it('confirms the environment gap this fix compensates for', () => {
+    const tag = `test-plain-${++registrationCounter}`;
+    const calls = [];
+    class Plain extends HTMLElement {
+      static get observedAttributes() { return ['foo']; }
+      attributeChangedCallback(name, oldV, newV) { calls.push([name, oldV, newV]); }
+      connectedCallback() { calls.push(['connected']); }
+    }
+    mountLateUpgrade(tag, Plain, `<${tag} foo="bar"></${tag}>`);
+    expect(calls).toEqual([['connected']]); // NOT ['foo', null, 'bar'] first, per spec
+  });
+
+  it('a reflected property set only via pre-parsed HTML is not stuck at its class default', () => {
+    const tag = `test-late-${++registrationCounter}`;
+    class El extends UIElement {
+      static properties = { label: { type: String, default: '', reflect: true } };
+    }
+    const el = mountLateUpgrade(tag, El, `<${tag} label="Profile"></${tag}>`);
+    expect(el.label).toBe('Profile');
+  });
+
+  it('a reflected boolean attribute present-with-no-value resolves true, not the class default', () => {
+    const tag = `test-late-bool-${++registrationCounter}`;
+    class El extends UIElement {
+      static properties = { active: { type: Boolean, default: false, reflect: true } };
+    }
+    const el = mountLateUpgrade(tag, El, `<${tag} active></${tag}>`);
+    expect(el.active).toBe(true);
+  });
+
+  it('no regression: normal define-before-parse still gets attributeChangedCallback (no extra render)', async () => {
+    let renders = 0;
+    class El extends UIElement {
+      static properties = { label: { type: String, default: '', reflect: true } };
+      render() { renders++; }
+    }
+    const tag = registerTestElement(El);
+    const el = mount(tag, { label: 'Profile' });
+    await tick();
+    expect(el.label).toBe('Profile');
+    expect(renders).toBe(1); // the connectedCallback re-sync is a no-op here, not a second render
+  });
+});