@adia-ai/web-components 0.6.22 → 0.6.24

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # 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/`)
+
+- **`wrap-at="bp"`** enables `flex-wrap: wrap` from the named breakpoint upward (`xs/sm/md/lg/xl`). Complements the boolean `[wrap]` (always-wrap, unchanged) for the common "single row on desktop, wraps on mobile" toolbar pattern: `<row-ui gap="2 3@md" wrap-at="sm">`. Uses inline `flex-wrap` to avoid reactive re-entrancy from toggling the boolean attribute inside `render()`. File: `components/row/row.js` + `components/row/row.yaml`.
+
+### Added — `--a-ui-2xs: 11px;` UI typography scale slot (`styles/typography.css`)
+
+- **`--a-ui-2xs`** (11px) slots cleanly into the existing UI scale between `--a-ui-tiny` (10px) and `--a-ui-xs` (12px). Currently unused — pre-staged for upcoming responsive UI-text variants that need a denser-than-`xs` step. File: `styles/typography.css`.
+
+### Documentation — `components/` examples third sweep (§428/§432)
+
+- **22 `components/*/*.examples.html` files** updated with @bp annotations + missing prop / token tables across the docs sweep arc (badge, block, button, card, check, code, col, fields, grid, image, link, list, modal, nav family, pane, select, stat, stream, table, tabs, tag, text-ui, toggle-group, tooltip, tree). Picks up the v0.6.22 `@bp` substrate in living demos so consumers see responsive composition shapes inline. Source journal sections: §428 (third sweep + token tables) + §432 (collision fix).
+
 ## [0.6.22] — 2026-05-22
 
 ### Added — `@bp` responsive attribute system (`core/responsive.js`)

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/row/class.js

@@ -20,7 +20,7 @@
 
 import { UIElement } from '../../core/element.js';
 import { draggable } from '../../traits/draggable/draggable.js';
-import { parseResponsive, breakpoint } from '../../core/responsive.js';
+import { parseResponsive, breakpoint, BP_NAMES } from '../../core/responsive.js';
 
 export class UIRow extends UIElement {
   static properties = {
@@ -29,6 +29,9 @@ export class UIRow extends UIElement {
     gap:       { type: String,  default: 'md',     reflect: true },
     grow:      { type: Boolean, default: false,    reflect: true },
     wrap:      { type: Boolean, default: false,    reflect: true },
+    // wrap-at="sm" = enable flex-wrap from sm upward; complements the
+    // boolean [wrap] (always-wrap) without modifying it.
+    wrapAt:    { type: String,  default: '',       reflect: true, attribute: 'wrap-at' },
     draggable: { type: Boolean, default: false,    reflect: true },
   };
   static template = () => null;
@@ -53,7 +56,8 @@ export class UIRow extends UIElement {
     const gap     = this.gap;
     const align   = this.align;
     const justify = this.justify;
-    const anyR    = gap?.includes('@') || align?.includes('@') || justify?.includes('@');
+    const wrapAt  = this.wrapAt;
+    const anyR    = gap?.includes('@') || align?.includes('@') || justify?.includes('@') || !!wrapAt;
     const bp      = anyR ? breakpoint.value : '';
 
     if (gap?.includes('@')) {
@@ -73,6 +77,18 @@ export class UIRow extends UIElement {
     } else {
       this.style.removeProperty('--row-justify');
     }
+
+    // wrap-at="sm" enables flex-wrap from the named breakpoint upward.
+    // Uses inline style rather than toggling the [wrap] attribute to avoid
+    // reactive re-entrancy. Falls back to '' (CSS [wrap] handles the
+    // always-wrap case; this only fires when wrap-at is set).
+    if (wrapAt) {
+      const activeIdx = BP_NAMES.indexOf(bp);
+      const targetIdx = BP_NAMES.indexOf(wrapAt);
+      this.style.flexWrap = (targetIdx !== -1 && activeIdx >= targetIdx) ? 'wrap' : '';
+    } else {
+      this.style.flexWrap = '';
+    }
   }
 }
 

package/components/row/row.a2ui.json

@@ -42,9 +42,14 @@
       "default": "start"
     },
     "wrap": {
-      "description": "Enable flex wrap",
+      "description": "Enable flex-wrap unconditionally. For viewport-responsive wrapping use [wrap-at] instead.",
       "type": "boolean",
       "default": false
+    },
+    "wrapAt": {
+      "description": "Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl). `wrap-at=\"sm\"` = no-wrap on xs, wrap from sm up. Complements the boolean [wrap] (always-wrap) without conflicting with it.",
+      "type": "string",
+      "default": ""
     }
   },
   "required": [

package/components/row/row.d.ts

@@ -30,6 +30,8 @@ export class UIRow extends UIElement {
   grow: boolean;
   /** Main-axis justify (start/center/end/between/space-between/space-around). Accepts `@bp` notation: justify="start between@md". */
   justify: string;
-  /** Enable flex wrap */
+  /** Enable flex-wrap unconditionally. For viewport-responsive wrapping use [wrap-at] instead. */
   wrap: boolean;
+  /** Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl). `wrap-at="sm"` = no-wrap on xs, wrap from sm up. Complements the boolean [wrap] (always-wrap) without conflicting with it. */
+  wrapAt: string;
 }

package/components/row/row.yaml

@@ -44,9 +44,19 @@ props:
     type: string
     default: start
   wrap:
-    description: Enable flex wrap
+    description: >-
+      Enable flex-wrap unconditionally. For viewport-responsive wrapping use
+      [wrap-at] instead.
     type: boolean
     default: false
+  wrapAt:
+    description: >-
+      Enable flex-wrap from the named breakpoint upward (xs/sm/md/lg/xl).
+      `wrap-at="sm"` = no-wrap on xs, wrap from sm up. Complements the
+      boolean [wrap] (always-wrap) without conflicting with it.
+    type: string
+    default: ""
+    attribute: wrap-at
 events: {}
 slots:
   default:

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.22",
+  "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",

package/styles/typography.css

@@ -313,6 +313,7 @@
   --a-ui-family: var(--a-font-family-ui);
   --a-ui-weight: var(--a-weight-medium);
   --a-ui-tiny: 10px;
+  --a-ui-2xs: 11px;
   --a-ui-xs: 12px;
   --a-ui-sm: 13px;
   --a-ui-md: 14px;