@adia-ai/web-components 0.6.23 → 0.6.24

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.24] — 2026-05-22
+
+### Fixed — `slider-ui` label and suffix template snapshot trap (FB-45)
+
+- **`[slot="label"]` and `[slot="suffix"]` now re-sync in `render()`**, resolving the snapshot trap where `label=${expr}` via the template engine rendered the literal `{{p:N}}` placeholder instead of the resolved value. Both spans are updated on every reactive cycle; a missing label span is also created if absent at connection time. File: `components/slider/class.js`.
+
+### Fixed — `toast-ui` demo shell missing `feed.css` import
+
+- **`toast.html` now imports `feed/feed.css` + `feed/feed.js`.** `<toast-ui>` renders via `<feed-ui>` — the demo shell was not loading feed's stylesheet, so feed items rendered without background, typography, or spacing. Files: `components/toast/toast.html`.
+
 ## [0.6.23] — 2026-05-22
 
 ### Added — `row-ui` `wrap-at="bp"` responsive wrap (`components/row/`)

package/README.md

@@ -215,7 +215,7 @@ class MyPanel extends UIElement {
 The `el` parameter is the element instance — every signal-backed property is reactively read.
 
 Full authoring contract: [`docs/specs/component-token-contract.md`](../../docs/specs/component-token-contract.md).
-The `adia-ui-author` skill encodes the 20 non-negotiable rules.
+The `adia-ui-authoring` skill encodes the 20 non-negotiable rules.
 
 ## Card-n / drawer-ui composition parity
 

package/components/slider/class.js

@@ -149,6 +149,21 @@ export class UISlider extends UIFormElement {
     const valueEl = this.querySelector('[slot="value"]');
     if (valueEl) valueEl.textContent = this.#format(this.value);
 
+    // §FB-45: label and suffix are read in connected() but may be set later
+    // by the template engine (which first writes {{p:N}} then resolves).
+    // Re-sync both slots on every render so reactive bindings work.
+    const labelEl = this.querySelector('[slot="label"]');
+    if (labelEl) {
+      labelEl.textContent = this.label;
+    } else if (this.label) {
+      const header = this.querySelector('[slot="header"]');
+      if (header) { const s = document.createElement('span'); s.slot = 'label'; s.textContent = this.label; header.prepend(s); }
+    }
+    if (this.label) this.setAttribute('aria-label', this.label);
+
+    const suffixEl = this.querySelector('[slot="suffix"]');
+    if (suffixEl) suffixEl.textContent = this.suffix;
+
     this.setAttribute('aria-valuenow', this.value);
     this.setAttribute('aria-valuetext', `${this.#format(this.value)}${this.suffix ? ' ' + this.suffix : ''}`);
     this.syncValue(String(this.value));

package/components/slider/slider.test.js

@@ -105,4 +105,43 @@ describe('slider-ui', () => {
     await tick();
     expect(s.getAttribute('aria-valuenow')).toBe('80');
   });
+
+  // §FB-45 (color-app, 2026-05-22) — template engine snapshot trap.
+  // connected() stamped label/suffix once; render() didn't re-sync them.
+  // Template engine writes {{p:N}} first, then resolves to the real value —
+  // simulated here by setAttribute('label', placeholder) then setting the
+  // real value. Both spans must reflect the final value, not the placeholder.
+  it('re-syncs [slot="label"] when label attribute changes after connection', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100"></slider-ui>');
+    await tick();
+    // No label initially — span absent
+    expect(s.querySelector('[slot="label"]')).toBeNull();
+
+    // Simulate template engine writing placeholder then real value
+    s.setAttribute('label', '{{p:7}}');
+    await tick();
+    s.setAttribute('label', 'Volume');
+    await tick();
+
+    const labelEl = s.querySelector('[slot="label"]');
+    expect(labelEl).not.toBeNull();
+    expect(labelEl.textContent).toBe('Volume');
+    expect(s.getAttribute('aria-label')).toBe('Volume');
+  });
+
+  it('re-syncs [slot="suffix"] when suffix attribute changes after connection', async () => {
+    const s = mount('<slider-ui value="50" min="0" max="100" label="Volume" suffix="%"></slider-ui>');
+    await tick();
+    const suffixEl = s.querySelector('[slot="suffix"]');
+    expect(suffixEl).not.toBeNull();
+    expect(suffixEl.textContent).toBe('%');
+
+    // Simulate placeholder → resolved suffix
+    s.setAttribute('suffix', '{{p:8}}');
+    await tick();
+    s.setAttribute('suffix', 'rem');
+    await tick();
+
+    expect(s.querySelector('[slot="suffix"]').textContent).toBe('rem');
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.23",
+  "version": "0.6.24",
   "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",