@adia-ai/web-components 0.6.7 → 0.6.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.8] — 2026-05-20
+
+### Fixed
+- **`core/template.js` — `.camelCaseProp=${expr}` property bindings now route to the canonical setter (FB-55, P1).** Pre-fix: the HTML parser lowercases attribute names inside `<template>.innerHTML` per HTML5 §13.2.5.32, so `.className=${expr}` arrived at the binding scanner as `.classname`. The binding then wrote `element['classname'] = v` — an enumerable expando — never invoking the `HTMLElement.prototype.className` setter. Classes never applied; no warning, no error. Trap affected every camelCase DOM property surface (`.className`, `.innerText`, `.tabIndex`, `.ariaLabel`, `.contentEditable`, `.readOnly`, `.maxLength`, `.minLength`, `.colSpan`, `.rowSpan`) AND every camelCase property declared via `UIElement.static properties` (80+ across primitives — `<color-picker>` `.maxChroma`, `<grid>` `.columnGap`, `<breadcrumb>` `.collapseKeepLeading`, etc.). Even the canonical `<my-panel .minL=${minL}>` example from `README.md:212` silently failed. **Fix: two-layer name resolution** — (1) `PROP_CASE_FIX` static map at `scan()` time covers built-in DOM camelCase (zero-cost lookup, no prototype walk for the common case); (2) lazy prototype-walk fallback at `applyValue()` time finds canonical camelCase property names on the element's instance + prototype chain via case-insensitive match, caching resolution on the part after first hit. Catches UIElement custom-element props installed per-instance in `installProps()` (those don't exist at `scan()` time because the element hasn't been upgraded yet). Backward-compatible: when neither layer finds a case-insensitive match, the original lowercase name is preserved (consumers writing to lowercase expandos unaffected). 10 NEW vitest cases in `core/template.test.js`'s `FB-55` describe block pin the contract. Closes RESPONSE-55 (reviewer-#A expansion to UIElement primitives explicitly covered).
+- **`core/template.js` — nested `${html\`<svg-child/>\`}` interpolations now render in SVG namespace (FB-57, P1).** Pre-fix: each nested `html\`\`` is a separate cached template whose `tpl.innerHTML = m` is parsed at document level without SVG insertion-mode context, so `<circle>`/`<line>`/etc. arrived as `HTMLUnknownElement` (NS `http://www.w3.org/1999/xhtml`). The `<span style="display:contents">` wrapper from `wrap()` didn't fix it because `display: contents` is layout-level, not namespace-level; SVG layout is namespace-strict → present-but-invisible output, zero bounding rect, no error. **Fix: namespace-aware `mount()`** — discriminate via `container.closest('svg, math, foreignObject, annotation-xml')` at mount time; when stamping into an SVG/MathML subtree, recursively re-namespace the cloned fragment via `createElementNS`, transferring attributes via `setAttributeNS` to preserve attr-namespaces (e.g., legacy `xlink:href`). `<foreignObject>` (SVG) and `<annotation-xml encoding="text/html"|"application/xhtml+xml">` (MathML) descendants correctly REVERT to HTML namespace per HTML5 §12.2.5 foreign-content insertion mode. Implementation site: `mount()` rather than `getTemplate()` — keeps the template cache coherent (same `html\`\`` source can stamp into either context without doubling cache entries). 6 NEW vitest cases in `core/template.test.js`'s `FB-57` describe block (inline-SVG regression, nested-SVG fix, direct-stamp into SVG container, foreignObject boundary, MathML, HTML-container no-op). Closes RESPONSE-57 (Option A accepted with implementation-site refinement; Option B rejected as half-measure).
+- **`core/template.js` — partial-interp warning text recommends `class="${expr}"` first (FB-55 #2).** The v0.5.5 §184 warn text put `.className=${expression}` first as the recommended fix for partial class interpolation; that path now works post-FB-55 fix above, but `class="${expr}"` (full-attribute interpolation) is the more discoverable form that doesn't require knowing the camelCase property name. Promoting it first. The `.classList=${{foo: true, bar: false}}` aspirational line is removed — classList is a read-only DOMTokenList accessor, no `PROP_CASE_FIX` entry can make it assignable.
+
+### Docs
+- **`USAGE.md` — three new template-related sections** documenting the FB-55/56/57 cluster:
+  - **§-TBD (v0.6.8) — Host element display defaults (FB-56)** — surfaces the HTML-spec inline default for custom elements + the `:host(:where(*))` zero-specificity recipe used across the in-tree primitive set (30+ flex-container primitives). Documents why `UIElement` doesn't bake a `display` rule into the host (container vs leaf vs passthrough is a consumer-layout decision). Worked symptom + diagnostic recipe ("inspect the host directly — `getComputedStyle(host).display === 'inline'`").
+  - **§-TBD (v0.6.8) — SVG composition + namespacing (FB-57)** — documents three modes (inline, nested-interpolations, imperative-`.innerHTML`) with the `<foreignObject>` boundary semantics and the MathML parallel. Migration is zero — pre-fix code that worked keeps working; pre-fix code that was silently broken (nested SVG interpolations) starts producing visible output.
+  - **§-TBD (v0.6.8) — `.camelCaseProp=${expr}` property binding (FB-55)** — explains the two-layer name resolution, lists affected camelCase property surfaces, documents backward-compatibility for genuine expando consumers, and notes the discoverability trade-off (the simpler `class="${expr}"` doesn't require knowing the camelCase property name).
+- **USAGE.md `§-TBD (v0.6.8) — UIElement lifecycle hooks (FB-59 + FB-43/44/47/58 cluster)`** — new section documenting the canonical hook order: `adoptStyles` → `prepareParts` → **`connected()`** (line 122, inside `untracked()`) → effect first-run with **stamp at line 127** → `render()` → `updated()`. Source-cited from `core/element.js:107-142`. Resolves a cluster-wide misunderstanding about when `connected()` fires relative to the template stamp: it runs BEFORE the stamp wipes consumer-supplied light-DOM children, NOT after. Includes the "Container UIElement pattern" example showing `connected()` → capture children → arm MutationObserver, plus the defensive `if (present.length > 0) keep` cache-fallback pattern (consumer-discovered) that makes capture robust to ordering. Distinguishes `connected()` (recommended subclass hook) vs `connectedCallback()` (rarely overridden W3C hook). Closes FB-59 P3 docs ask + corrects the §B mechanism walkthrough in RESPONSE-58 (sibling followup-RESPONSE retracts the §B order claim).
+
 ## [0.6.7] — 2026-05-19
 
 ### Added

package/USAGE.md

@@ -1181,6 +1181,115 @@ Why AdiaUI doesn't implement `?attr=`: custom elements declare their reflective
 - HTML comments containing quoted attributes (`<!-- attr="value" -->`) — same fix (v0.5.3 §155).
 - Backticks inside HTML comments — see §221i above (JS-spec footgun; not a parser bug).
 
+### §-TBD (v0.6.8) — Host element display defaults (FB-56)
+
+Per the HTML spec, **all custom elements default to `display: inline`** — and `UIElement` subclasses are no exception. When you use a `UIElement` subclass as a layout container (filling a flex parent, holding an SVG canvas, wrapping a fluid grid), the inline default collapses the host to zero height and any `height: 100%` descendant collapses with it.
+
+**Symptom you're hitting this trap:** content renders in DevTools with the expected DOM, but its computed height is 0 because the custom-element host between it and a layout parent has `display: inline`. Inspect the host element directly — `getComputedStyle(host).display === 'inline'` confirms.
+
+If you author a `UIElement` to be a layout container, set an explicit `display` on the host tag — the in-tree convention is `:host(:where(*))` so consumer-app CSS can still override without `!important`:
+
+```js
+import { css } from '@adia-ai/web-components/core/element';
+
+class MyContainer extends UIElement {
+  static styles = css`
+    :host(:where(*)) {       /* zero-specificity wrap; consumers override at (0,0,1) */
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  `;
+  static template = (host) => html`<slot></slot>`;
+}
+```
+
+Or, if the host should be transparent to layout (its children inherit the parent's grid/flex context directly):
+
+```css
+my-passthrough-element { display: contents; }
+```
+
+See also: the slot-routing pass-through pattern that's the natural consumer of `display: contents` (cross-referenced from §345's `.map()` vs `repeat()` discussion where `wrap()` spans use the same mechanism).
+
+**`UIElement` does not bake a `display` rule into the host** because container vs leaf vs passthrough is a consumer-layout decision, not a framework one. Per primitive, a global default would risk breaking layouts where the consumer explicitly wants `inline` semantics (e.g. inline badge inside flowing text, `<icon>` rendered alongside surrounding `<text-ui>`, `<kbd-ui>` keystroke marker). The in-tree primitive set spans `inline` / `inline-block` / `block` / `flex` / `grid` / `contents` — no single default fits.
+
+**In-tree convention reference:** scan `packages/web-components/components/*/<name>.css` for the `:host(:where(*))` pattern. The 30+ flex-container primitives (`<editor-shell>`, `<nav>`, `<pane>`, `<page>`, `<card>`, etc.) all use this shape; copy from the closest-fit primitive.
+
+### §-TBD (v0.6.8) — SVG composition + namespacing (FB-57)
+
+`html\`\`` handles SVG content in three modes, with one historical trap closed in v0.6.8.
+
+**Mode 1 — inline SVG in a single template (always worked):**
+
+```js
+html`
+  <svg viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="10"/>
+    <path d="M 0 0 L 100 100"/>
+  </svg>
+`
+```
+
+When the parser sees `<svg>` in `tpl.innerHTML`, it enters SVG insertion mode for its descendants. Children arrive as proper `SVGElement` instances.
+
+**Mode 2 — nested template interpolations (now works, post-v0.6.8 FB-57 fix):**
+
+```js
+html`
+  <svg viewBox="0 0 100 100">
+    ${dots.map(d => html`<circle cx="${d.x}" cy="${d.y}" r="3"/>`)}
+  </svg>
+`
+```
+
+Each nested `html\`<circle/>\`` is a separate template parsed at document level (no SVG context), so pre-v0.6.8 the circles arrived as `HTMLUnknownElement` — present in the DOM but invisible to SVG layout (zero bounding rect, no stroke, no fill, no error). v0.6.8 `mount()` detects when the container is inside an SVG (or MathML) subtree and re-namespaces the cloned fragment via `createElementNS`. The natural composition pattern works.
+
+**Mode 3 — imperative `.innerHTML` commit (escape hatch for very large SVG):**
+
+For SVG content too large to template cleanly (thousands of nodes, dynamic shape strings):
+
+```js
+class MyChart extends UIElement {
+  static template = (host) => html`<svg viewBox="0 0 ${host.w} ${host.h}"></svg>`;
+  updated() {
+    const svg = this.querySelector('svg');
+    svg.innerHTML = host._buildSvgString();  // SVG-namespaced via SVGSVGElement.innerHTML
+  }
+}
+```
+
+`.innerHTML=${str}` as a template binding also works for this (the property name is already lowercase, so the FB-55 PROP_CASE_FIX entry just maps `innerhtml` → `innerHTML`, and the assignment routes through the SVGSVGElement's `innerHTML` setter which DOES enter SVG insertion mode).
+
+**`<foreignObject>` boundary:** content inside `<foreignObject>` returns to HTML namespace per HTML5 §12.2.5 foreign-content insertion mode. The template engine respects this — interpolations inside `<foreignObject>` are HTML-namespaced even when the outer container is SVG. Use it as the documented escape hatch for HTML widgets embedded in SVG graphs (tooltips, popovers, foreign Cells in dataviz).
+
+**MathML** uses the same mechanism: nested `${html\`<mi/>\`}` inside `<math>` gets re-namespaced to MathML NS. `<annotation-xml encoding="text/html">` is the MathML equivalent of `<foreignObject>` for HTML re-entry.
+
+**Migration:** zero. Pre-v0.6.8 code that already worked (inline SVG + `.innerHTML` commits) keeps working. Code that was silently broken (nested SVG interpolations) starts producing visible output.
+
+### §-TBD (v0.6.8) — `.camelCaseProp=${expr}` property binding (FB-55)
+
+Pre-v0.6.8 trap: the HTML parser lowercases attribute names inside `<template>.innerHTML` per HTML5 §13.2.5.32, so `.className=${expr}` arrived at the binding scanner as `.classname`. The binding then wrote `element['classname'] = v` — a lowercase enumerable **expando** — never invoking the `HTMLElement.prototype.className` setter. CSS classes never applied; no warning, no error.
+
+Same trap affected every camelCase DOM property surface: `.className`, `.innerText`, `.tabIndex`, `.ariaLabel`, `.contentEditable`, `.readOnly`, `.maxLength`, `.minLength`, `.colSpan`, `.rowSpan` — AND every camelCase property declared via `UIElement.static properties` (e.g. `<color-picker>`'s `.maxChroma`, `<grid>`'s `.columnGap`, `<breadcrumb>`'s `.collapseKeepLeading`, plus 80+ others across primitives). Even the canonical reactive-binding example from `README.md` (`<my-panel .minL=${minL}>`) silently failed.
+
+v0.6.8 fix: a two-layer name resolution in `core/template.js`:
+
+1. **`PROP_CASE_FIX` static map** at scan time covers built-in DOM camelCase properties (zero-cost lookup, no prototype walk for the common case).
+2. **Prototype-walk fallback** at `applyValue()` time finds canonical camelCase property names on the element's instance + prototype chain via case-insensitive match — caches the resolution on the part after first hit. Catches UIElement custom-element props installed per-instance in `installProps()`.
+
+```js
+// ✅ Works post-v0.6.8 — both forms route to the canonical setter
+html`<span .className=${'foo bar'}>text</span>`;
+html`<color-picker .maxChroma=${0.3}></color-picker>`;
+html`<my-panel .minL=${minL}></my-panel>`;
+```
+
+**Backward compatibility:** when neither the map nor the prototype walk finds a case-insensitive match, the original lowercase name is preserved. Consumers deliberately writing to lowercase expando properties (`.myexpando=${v}`) are unaffected.
+
+**Discoverability note:** the simpler form `class="${expr}"` (full-attribute interpolation) works without needing to know the camelCase property name and is the v0.6.8 partial-interp warn-text's first recommendation. Reach for `.className=` when you specifically want the property-binding semantics (e.g., when the value carries non-string types, or for performance in tight inner loops).
+
 ### §345 (v0.5.19) — `.map()` vs `repeat()` for reactive lists (FB-47)
 
 Use **`repeat(items, keyFn, tplFn)`** for any list whose items are signal-driven and should preserve identity across re-renders. Plain `.map()` returns an `Array` of template results, which the template engine materializes via `container.replaceChildren()` on every parent update — correct, but per-item DOM is re-created from scratch.
@@ -1277,6 +1386,83 @@ Use the descendant combinator (a single space) instead, which traverses any dept
 
 Same caveat applies to `:nth-child()` / `:nth-of-type()` / `:first-child` / `:last-child` against the parent — those count actual children (the wrapper-spans), not the items inside. If you need nth-item styling, key it via a data attribute on the item itself rather than relying on positional pseudo-classes against the wrapper layer.
 
+### §-TBD (v0.6.8) — UIElement lifecycle hooks (FB-59 + FB-43/44/47/58 cluster)
+
+UIElement orchestrates the custom-element lifecycle and exposes two extension points: the W3C standard `connectedCallback()` (rarely overridden) and the convenience **`connected()` hook (the recommended subclass extension point)**. Same pattern for `disconnected()`.
+
+#### Canonical hook order
+
+For a UIElement subclass with `static template = () => html\`<x/>\`` mounted into the DOM with consumer-supplied light-DOM children:
+
+1. **`adoptStyles(ctor)`** — adopted stylesheets attached to the document
+2. **`prepareParts(ctor)`** — `static template` markup parsed into the part registry
+3. **`this.connected()`** — subclass hook fires here, inside `untracked(...)`. **Light-DOM children supplied by the parent template are intact at this point.**
+4. **Effect first-run** — `stamp(result, this)` runs here if `ctor.template(this)` returns non-null. This is the call that **wipes consumer-supplied light-DOM children** (via `mount()` → `container.replaceChildren(f)`).
+5. **`this.render()`** — explicit render hook for imperative DOM updates
+6. **`this.updated(changedProps)`** — change-set hook for property-specific reactions
+
+**The key insight for container components: `connected()` runs BEFORE the stamp.** If your container UIElement has both a non-null `static template` AND wants to capture consumer-supplied light-DOM children, do the capture in `connected()`. The wipe runs in step 4, which is after step 3.
+
+Source: `packages/web-components/core/element.js:107-142` — `UIElement.connectedCallback()`. `connected()` fires at line 122 inside `untracked(...)`; the stamp runs at line 127 inside the effect registered at lines 123-137.
+
+#### Container UIElement pattern (FB-43/44/47/58 cluster — the right shape)
+
+When your UIElement is a container for consumer-supplied light-DOM children AND has its own internal `static template`, capture the children in `connected()`:
+
+```js
+class DtsGraph extends UIElement {
+  static template = () => html`<div class="dts-graph-root"></div>`;
+
+  // ✅ connected() runs BEFORE the stamp wipes children — capture here
+  connected() {
+    this._series = [...this.querySelectorAll('dts-graph-band, dts-graph-curve, …')];
+
+    // Optional: MutationObserver for late-arriving children (e.g. parent template
+    // toggles `${cond ? html\`<band/>\` : ''}` and the new band lands later)
+    this._mo = new MutationObserver(() => this._captureSeries());
+    this._mo.observe(this, { childList: true, subtree: true });
+  }
+
+  _captureSeries() {
+    const present = [...this.querySelectorAll('dts-graph-band, …')];
+    // Defensive cache-fallback: post-stamp wipe makes `present` empty, but the
+    // initial capture from connected() above already saved the refs. Keep them.
+    if (present.length > 0) this._series = present;
+  }
+
+  disconnected() {
+    this._mo?.disconnect();
+  }
+}
+```
+
+The `if (present.length > 0) keep` cache-fallback is the architectural pattern that makes the capture robust to either ordering. It works in any lifecycle environment with no specification dependency.
+
+#### `connected()` vs `connectedCallback()` reference
+
+| Hook | Who calls it | When (relative to step list above) | Use case |
+|---|---|---|---|
+| `connectedCallback()` | The browser, per W3C custom-elements spec | Orchestrates the whole sequence | Almost never override — UIElement runs the lifecycle for you |
+| **`connected()`** | UIElement, from within `connectedCallback()` at line 122 | Step 3 — after `prepareParts()`, BEFORE the template stamp | **Subclass setup, light-DOM capture, observer arming, signal effects** |
+| `render()` | The effect, after every signal change | Step 5 — after `stamp()` if the template returned non-null | Imperative DOM updates that don't fit the template engine |
+| `updated(changedProps)` | The effect | Step 6 — after `render()`, when properties changed | React to specific prop changes |
+| `disconnected()` | UIElement, from `disconnectedCallback()` | Element leaves the DOM | Teardown observers, timers, listeners |
+
+#### When NOT to override `connectedCallback()` directly
+
+`UIElement.connectedCallback()` orchestrates the entire lifecycle. Overriding it directly requires re-invoking `super.connectedCallback()` correctly, and you'd have to choose whether your work goes before or after super:
+
+- **BEFORE super**: you miss the `prepareParts(ctor)` call that initializes the part registry. `static template` won't stamp. Other downstream initialization breaks.
+- **AFTER super**: your work runs after step 6 (`updated()`), which means after the stamp wiped your light-DOM children. You'd need to capture in `constructor()` instead — but `constructor()` runs before the element is in the DOM, so light-DOM children aren't appended yet.
+
+`connected()` is the right hook for 99% of consumer code. It runs at exactly the right time: children present, stamp not yet run.
+
+#### Why `connected()` is wrapped in `untracked()`
+
+Per the comment in `element.js:112-121`: `connected()` commonly reads reactive properties via template-literal interpolation (`${this.label}` etc.) when stamping inner DOM. If the outer call path is inside another effect (e.g. a parent's render loop `appendChild`'ing this node), those reads would subscribe the outer effect to this element's signals — invisible cross-element coupling that looks like spooky re-runs on unrelated state changes. The `untracked()` wrapper prevents that subscription leak. The element's own effect (registered at lines 123-137) re-reads the same signals in its own tracking context, so reactivity within the element is unaffected.
+
+This means: inside `connected()`, you CAN read signals/props for setup logic, but those reads won't establish reactive subscriptions. Use the element's own `render()` or signal effects for reactive work; use `connected()` for one-shot setup.
+
 ### §221j — Typography token cheatsheet
 
 Quick-reference for component-CSS authoring. Cross-reference [`styles/typography.css`](./styles/typography.css):

package/core/template.js

@@ -91,6 +91,106 @@ function getTemplate(strings) {
   return tpl;
 }
 
+// §-TBD (FB-55, P1): the HTML parser lowercases attribute names inside
+// <template>.innerHTML per HTML5 §13.2.5.32, so `.className=${expr}`
+// arrives at scan() as `.classname`. The `name.slice(1)` strips the dot
+// and the binding writes to a lowercase enumerable expando instead of
+// invoking the camelCase property setter. Net: classes never apply, no
+// warning, no error.
+//
+// The trap affects every camelCase DOM property surface — `.className`,
+// `.innerText`, `.tabIndex`, `.ariaLabel`, `.contentEditable`,
+// `.readOnly`, `.maxLength`, `.minLength`, `.colSpan`, `.rowSpan` — AND
+// every camelCase property declared via `UIElement.static properties`
+// (e.g. `.minL`, `.maxChroma`, `.hueDriftMax`, `.colorScheme`,
+// `.strokeWidth`, `.collapseKeepLeading`). Even the canonical example
+// `<my-panel .minL=${minL}>` from packages/web-components/README.md:212
+// silently failed pre-fix.
+//
+// Two-layer fix:
+//
+//   1. Static PROP_CASE_FIX map covers built-in DOM camelCase property
+//      names (zero-cost lookup, no prototype walk per binding for the
+//      common case).
+//
+//   2. Prototype-walk fallback finds the canonical camelCase property
+//      name on the element's prototype chain via case-insensitive
+//      match. Cost is O(prototype-chain-depth × prototype-key-count)
+//      per UNIQUE template binding (cached in parts[i].name, not
+//      re-walked per update() tick). Custom-element prototype chains
+//      are short (subclass → UIElement → HTMLElement → Element → Node
+//      → EventTarget); cost is negligible.
+//
+// Backward-compatible: when the prototype walk finds no case-insensitive
+// match (genuine lowercase-expando case — rare but possible), the
+// original lowercase name is preserved. No consumer that was
+// deliberately writing to a lowercase expando regresses.
+//
+// Verification: 8-test matrix in core/template.test.js's FB-55 describe
+// block. RESPONSE-55 documents the trap end-to-end.
+const PROP_CASE_FIX = {
+  classname: 'className',
+  innertext: 'innerText',
+  innerhtml: 'innerHTML',
+  outerhtml: 'outerHTML',
+  textcontent: 'textContent',
+  tabindex: 'tabIndex',
+  arialabel: 'ariaLabel',
+  ariadescribedby: 'ariaDescribedBy',
+  arialabelledby: 'ariaLabelledBy',
+  ariarole: 'role',
+  contenteditable: 'contentEditable',
+  readonly: 'readOnly',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  colspan: 'colSpan',
+  rowspan: 'rowSpan',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  usemap: 'useMap',
+  ismap: 'isMap',
+  accesskey: 'accessKey',
+  defaultchecked: 'defaultChecked',
+  defaultvalue: 'defaultValue',
+  defaultselected: 'defaultSelected',
+};
+
+// Resolve a lowercase property name to its canonical camelCase form on
+// the given element. Returns the original `lower` name when no
+// case-insensitive match exists (preserves expando semantics). Walks
+// instance own-properties first (UIElement installs camelCase props via
+// `Object.defineProperty(this, ...)` in the constructor, so they live
+// on the instance, not the prototype), then prototype chain. Skips
+// Object.prototype to avoid noisy matches on `toString` etc.
+//
+// IMPORTANT: at scan() time the custom element has typically NOT yet
+// been constructed (template fragment is cloned + scanned before
+// insertion → upgrade), so instance-defined props aren't visible yet.
+// PROP_CASE_FIX covers built-in DOM camelCase props at scan() time;
+// the per-element walk runs ALSO at applyValue() time (lazy resolve,
+// cached on the part after first hit) to catch UIElement instance props
+// once the element has been upgraded.
+function resolvePropName(el, lower) {
+  if (PROP_CASE_FIX[lower]) return PROP_CASE_FIX[lower];
+  // Instance own-properties (UIElement installProps lives here).
+  const ownNames = Object.getOwnPropertyNames(el);
+  for (let i = 0; i < ownNames.length; i++) {
+    const n = ownNames[i];
+    if (n !== lower && n.toLowerCase() === lower) return n;
+  }
+  // Prototype chain (built-in DOM camelCase + class-defined accessors).
+  let proto = Object.getPrototypeOf(el);
+  while (proto && proto !== Object.prototype) {
+    const names = Object.getOwnPropertyNames(proto);
+    for (let i = 0; i < names.length; i++) {
+      const n = names[i];
+      if (n !== lower && n.toLowerCase() === lower) return n;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  return lower;
+}
+
 export function stamp(result, container) {
   let inst = container._i;
   if (!inst || inst.s !== result.strings) {
@@ -104,12 +204,118 @@ export function stamp(result, container) {
 function mount(result, container) {
   const { strings } = result;
   const tpl = getTemplate(strings);
-  const f = tpl.content.cloneNode(true);
+  let f = tpl.content.cloneNode(true);
+
+  // §-TBD (FB-57, P1): when stamping into an SVG or MathML context, the
+  // fragment's Elements arrive HTML-namespaced because `tpl.innerHTML =
+  // m` is parsed at document level without foreign-content context. SVG
+  // and MathML layout are namespace-strict — HTMLUnknownElement nodes
+  // inside an SVG render to zero-bound-rect invisible. Re-namespace the
+  // fragment before insertion, respecting `<foreignObject>` and
+  // `<annotation-xml>` HTML boundaries per the HTML5 foreign-content
+  // insertion-mode spec.
+  //
+  // Discriminator runs once per mount() call (no per-update cost).
+  // Re-namespacing walks the fragment recursively (O(node-count)),
+  // cheap for typical interpolation arrays (16 lines + 11 stops in
+  // the canonical curve-preview case = 27 createElementNS calls).
+  //
+  // Implementation site choice: mount() rather than getTemplate(),
+  // because:
+  //   - container reference is in hand only at mount()
+  //   - the same cached template may be stamped into either context;
+  //     namespacing per-cache-entry would double the WeakMap size
+  //     and require a cache-key extension
+  //   - cloning is already happening here; re-namespacing piggybacks
+  //     on the existing fragment walk
+  //
+  // RESPONSE-57 documents the trap end-to-end. Regression tests pin
+  // the inline-SVG path (must keep working), nested-SVG path (would
+  // fail pre-fix), foreignObject boundary (HTML inside SVG stays
+  // HTML), and MathML parallel.
+  const ns = foreignContentNS(container);
+  if (ns) f = renamespaceFragment(f, ns);
+
   const parts = scan(f, result.values.length);
   container.replaceChildren(f);
   return { s: strings, p: parts };
 }
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
+const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+
+// Determine whether `container` is inside an SVG or MathML subtree, and
+// return the namespace to re-namespace stamped fragments into. Returns
+// null when the container is in HTML context (the no-op case — vast
+// majority of templates). Respects `<foreignObject>` (SVG) and
+// `<annotation-xml encoding=text/html|application/xhtml+xml>` (MathML)
+// HTML boundaries per HTML5 §12.2.5 foreign-content insertion mode.
+function foreignContentNS(container) {
+  if (!container || container.nodeType !== 1) return null;
+  // Direct check — container's own namespace is a fast-path.
+  if (container.namespaceURI === SVG_NS) return SVG_NS;
+  if (container.namespaceURI === MATHML_NS) return MATHML_NS;
+  // Walk ancestors to find a foreign-content root. `closest()` matches
+  // the element itself + ancestors, so this catches the wrap()-span
+  // case (HTML span inside an SVG subtree). The first match wins —
+  // foreignObject/annotation-xml inside SVG short-circuits before we
+  // see the outer <svg>, correctly returning null (HTML context).
+  if (typeof container.closest !== 'function') return null;
+  const anchor = container.closest('svg, math, foreignObject, annotation-xml');
+  if (!anchor) return null;
+  const tag = anchor.localName;
+  if (tag === 'foreignobject' || tag === 'foreignObject') return null;
+  if (tag === 'annotation-xml') {
+    const enc = (anchor.getAttribute('encoding') || '').toLowerCase();
+    if (enc === 'text/html' || enc === 'application/xhtml+xml') return null;
+    return MATHML_NS;
+  }
+  if (tag === 'svg') return SVG_NS;
+  if (tag === 'math') return MATHML_NS;
+  return null;
+}
+
+// Recursively transfer fragment children into a new fragment with each
+// Element recreated in the target namespace. Text/comment nodes clone
+// unchanged. `<foreignObject>` and `<annotation-xml encoding=text/html>`
+// stay in the target namespace themselves, but their descendants revert
+// to HTML (matches the browser parser's foreign-content insertion mode).
+function renamespaceFragment(fragment, ns) {
+  const out = document.createDocumentFragment();
+  transferChildren(fragment, out, ns);
+  return out;
+}
+
+function transferChildren(src, dstParent, ns) {
+  for (const child of [...src.childNodes]) {
+    const t = child.nodeType;
+    if (t === 1 /* Element */) {
+      const dst = document.createElementNS(ns, child.localName);
+      for (const a of child.attributes) {
+        if (a.namespaceURI) dst.setAttributeNS(a.namespaceURI, a.name, a.value);
+        else dst.setAttribute(a.name, a.value);
+      }
+      dstParent.appendChild(dst);
+      // Boundary handling: <foreignObject> (SVG) and
+      // <annotation-xml encoding=text/html> (MathML) revert to HTML.
+      const local = child.localName;
+      let childNs = ns;
+      if (ns === SVG_NS && (local === 'foreignObject' || local === 'foreignobject')) {
+        childNs = XHTML_NS;
+      } else if (ns === MATHML_NS && local === 'annotation-xml') {
+        const enc = (child.getAttribute('encoding') || '').toLowerCase();
+        if (enc === 'text/html' || enc === 'application/xhtml+xml') childNs = XHTML_NS;
+      }
+      transferChildren(child, dst, childNs);
+    } else {
+      // Text, comment, etc. — clone unchanged. Comments are load-bearing
+      // (the `<!--p:N-->` placeholders scan() looks for).
+      dstParent.appendChild(child.cloneNode(true));
+    }
+  }
+}
+
 function scan(fragment, count) {
   const parts = new Array(count);
   const w = document.createTreeWalker(fragment, 129);
@@ -146,14 +352,21 @@ function scan(fragment, count) {
             // canonical style-object path; for everything else keep
             // the generic property-assignment recipe.
             const a = attr.name;
+            // §-TBD (FB-55 #2, P1): updated post-fix. The v0.5.5 §184
+            // recommendation had `.className=${expression}` first;
+            // that path now works (§-TBD PROP_CASE_FIX above) but
+            // `class="${expression}"` is the more discoverable form
+            // that doesn't require knowing the camelCase property
+            // name. Promoting it first. The `.classList=` line is
+            // removed entirely — classList is a read-only getter, no
+            // PROP_CASE_FIX entry can make it assignable.
             const specific =
               a === 'class'
-                ? `    .className=\${expression}  ← write to the className property (NOT .class, which is an expando)\n` +
-                  `    class="\${expression}"      ← full replacement (whole class string is the expression)\n` +
-                  `    .classList=\${{foo: true, bar: false}}  ← if/when implemented; verify in USAGE.md\n`
+                ? `    class="\${expression}"      ← full replacement (whole class string is the expression)\n` +
+                  `    .className=\${expression}  ← writes to the className property (resolved camelCase since FB-55 fix)\n`
                 : a === 'style'
-                  ? `    .style.cssText=\${expression}  ← write CSS text to .style.cssText\n` +
-                    `    style="\${expression}"      ← full replacement of the style string\n`
+                  ? `    style="\${expression}"      ← full replacement of the style string\n` +
+                    `    .style.cssText=\${expression}  ← write CSS text via the style.cssText accessor\n`
                   : `    ${a}="\${expression}"      ← full replacement (whole attr is the placeholder)\n` +
                     `    .${a}=\${expression}        ← property assignment (preferred for objects/functions)\n`;
             // eslint-disable-next-line no-console
@@ -173,8 +386,12 @@ function scan(fragment, count) {
           n.removeAttribute(name);
           parts[i] = { t: 'e', n, name: name.slice(1), c: undefined, _fx: null };
         } else if (name[0] === '.') {
+          // §-TBD (FB-55, P1): resolve the parser-lowercased property
+          // name back to its canonical camelCase via PROP_CASE_FIX +
+          // prototype walk. See PROP_CASE_FIX comment above for context.
+          // Lazy-resolve in applyValue() too — see _resolved guard there.
           n.removeAttribute(name);
-          parts[i] = { t: 'p', n, name: name.slice(1), c: undefined, _fx: null };
+          parts[i] = { t: 'p', n, name: resolvePropName(n, name.slice(1)), c: undefined, _fx: null, _resolved: false };
         } else if (name[0] === '?') {
           // §250 (v0.5.11, FEEDBACK-27): Lit-style boolean attribute syntax
           // (`?attr=${bool}`) is NOT supported. Without this branch, the
@@ -256,6 +473,18 @@ function applyValue(p, v) {
     if (v == null || v === false) p.n.removeAttribute(p.name);
     else p.n.setAttribute(p.name, v === true ? '' : v);
   } else if (p.t === 'p') {
+    // §-TBD (FB-55, P1): two-phase property-name resolution. PROP_CASE_FIX
+    // resolved at scan() time for zero-cost built-in DOM camelCase (the
+    // common case). For UIElement custom-element props installed on the
+    // INSTANCE via the constructor's installProps(), the property doesn't
+    // exist at scan() time (element not yet upgraded), so a lazy lookup
+    // here catches them. Resolution is cached back into p.name on first
+    // hit — subsequent updates skip the walk.
+    if (!p._resolved) {
+      const resolved = resolvePropName(p.n, p.name);
+      if (resolved !== p.name) p.name = resolved;
+      p._resolved = true;
+    }
     p.n[p.name] = v;
   } else if (p.t === 'e') {
     if (isHandler(p.c)) p.n.removeEventListener(p.name, p.c);

package/core/template.test.js

@@ -279,3 +279,297 @@ describe('html template — FB-47 (v0.5.19) stamp() cache + repeat() keyed reuse
     expect(secondDiv.textContent).toBe('second');
   });
 });
+
+describe('html template — FB-55 (v0.6.8) `.camelCase=${expr}` property-binding lowercase trap close', () => {
+  // FEEDBACK-55: the HTML parser lowercases attribute names inside
+  // <template>.innerHTML per HTML5 §13.2.5.32. Pre-fix, `.className=` arrived
+  // at scan() as `.classname`, then `name.slice(1)` yielded `"classname"`,
+  // and `applyValue()` wrote `p.n["classname"] = v` — an enumerable expando,
+  // never invoking the camelCase property setter. Classes never applied; no
+  // warn, no error.
+  //
+  // Fix: PROP_CASE_FIX static map (for built-in DOM camelCase props) +
+  // prototype-walk fallback (for UIElement-defined custom-element props).
+  // Backward-compatible: when no case-insensitive match exists, the
+  // original lowercase name is preserved (genuine expando consumers
+  // unaffected).
+  //
+  // RESPONSE-55 documents the trap end-to-end + reviewer-#A scope
+  // expansion to UIElement primitives.
+
+  let container;
+  let warnSpy;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    container.remove();
+    warnSpy.mockRestore();
+  });
+
+  it('.className=${expr} writes to the real className property (not lowercase expando)', () => {
+    const tpl = html`<span .className=${'foo bar'}>x</span>`;
+    stamp(tpl, container);
+    const span = container.querySelector('span');
+    expect(span.className).toBe('foo bar');              // ✅ real className set
+    expect(span.getAttribute('class')).toBe('foo bar');  // ✅ reflected to DOM attr
+    expect(span.classname).toBeUndefined();              // ✅ NO lowercase expando
+  });
+
+  it('.tabIndex=${n} writes to the real tabIndex property', () => {
+    const tpl = html`<div .tabIndex=${3}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.tabIndex).toBe(3);
+    expect(div.getAttribute('tabindex')).toBe('3');
+  });
+
+  it('.innerHTML=${str} survives unchanged (already-lowercase name)', () => {
+    // .innerHTML is one of the few camelCase-looking names whose
+    // canonical form is already lowercase (well, it's `innerHTML` but
+    // the parser lowercases it to `innerhtml` AND PROP_CASE_FIX maps
+    // back to `innerHTML`). Verify it lands on the property regardless.
+    const tpl = html`<div .innerHTML=${'<span class="inner">payload</span>'}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.querySelector('.inner')?.textContent).toBe('payload');
+  });
+
+  it('.lowercaseProp=${v} on a stock element preserves expando semantics (backward compat)', () => {
+    // The fallback prototype walk skips Object.prototype to avoid noisy
+    // matches. A genuinely-lowercase property name with no matching
+    // camelCase pair on the chain (e.g. `.myexpando`) lands on the
+    // element as a lowercase expando — the documented escape hatch
+    // for arbitrary data attachment. Verify no regression.
+    const tpl = html`<div .myexpando=${'attached'}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.myexpando).toBe('attached');
+  });
+
+  it('.camelCaseProp=${v} on a UIElement-style custom element invokes the canonical setter', async () => {
+    // Reviewer-addition #A from RESPONSE-55: UIElement defines
+    // properties under camelCase keys via Object.defineProperty. The
+    // pre-fix trap wrote `el['camelprop'] = v` (expando) instead of
+    // invoking the setter. Verify the fix routes correctly through
+    // the prototype-walk fallback.
+    class FB55El extends HTMLElement {
+      constructor() {
+        super();
+        let _camelProp = '';
+        Object.defineProperty(this, 'camelProp', {
+          get() { return _camelProp; },
+          set(v) { _camelProp = v; this.dataset.lastSet = v; },
+          configurable: true,
+          enumerable: true,
+        });
+      }
+    }
+    if (!customElements.get('fb55-el')) customElements.define('fb55-el', FB55El);
+
+    const tpl = html`<fb55-el .camelProp=${'via-setter'}></fb55-el>`;
+    stamp(tpl, container);
+    const el = container.querySelector('fb55-el');
+    expect(el.camelProp).toBe('via-setter');             // ✅ getter returns set value
+    expect(el.dataset.lastSet).toBe('via-setter');       // ✅ setter side-effect ran
+    expect(el.camelprop).toBeUndefined();                // ✅ NO lowercase expando
+  });
+
+  it('.maxChroma=${n} on a UIElement-style ce reaches the camelCase property', () => {
+    // Real-world surface: <color-picker max-chroma> and <color-input
+    // max-chroma> declare `maxChroma` as a static property. Consumers
+    // reaching for `.maxChroma=${value}` template binding must invoke
+    // the setter, not write an expando.
+    class FB55Numeric extends HTMLElement {
+      constructor() {
+        super();
+        let _maxChroma = 0;
+        Object.defineProperty(this, 'maxChroma', {
+          get() { return _maxChroma; },
+          set(v) { _maxChroma = v; },
+          configurable: true, enumerable: true,
+        });
+      }
+    }
+    if (!customElements.get('fb55-num')) customElements.define('fb55-num', FB55Numeric);
+
+    const tpl = html`<fb55-num .maxChroma=${0.42}></fb55-num>`;
+    stamp(tpl, container);
+    const el = container.querySelector('fb55-num');
+    expect(el.maxChroma).toBe(0.42);
+  });
+
+  it('updates to .className=${expr} re-route through the setter on every value change', () => {
+    // The PROP_CASE_FIX resolution is cached in parts[i].name at scan()
+    // time. Subsequent update() ticks must continue to use the resolved
+    // camelCase name. Verify by re-stamping with a new value.
+    const make = (cls) => html`<span .className=${cls}>x</span>`;
+    stamp(make('a'), container);
+    let span = container.querySelector('span');
+    expect(span.className).toBe('a');
+
+    stamp(make('b'), container);
+    span = container.querySelector('span');
+    expect(span.className).toBe('b');                    // ✅ second update routes correctly
+    expect(span.getAttribute('class')).toBe('b');
+  });
+
+  it('warning text no longer recommends .className= as the FIRST option for class= partial interp', () => {
+    // FB-55 #2: pre-fix, the v0.5.5 §184 warn text put `.className=`
+    // first; post-fix, `class="${expr}"` (the discoverable form) leads.
+    // Both work now (FB-55 #1), but the recommended ordering matters
+    // for new consumers reading the warning cold.
+    const cls = 'foo';
+    const tpl = html`<span class="prefix ${cls}">x</span>`;
+    stamp(tpl, container);
+    expect(warnSpy).toHaveBeenCalled();
+    const msg = warnSpy.mock.calls[0][0];
+    const classFullPos = msg.indexOf('class="${expression}"');
+    const classNamePos = msg.indexOf('.className=${expression}');
+    expect(classFullPos).toBeGreaterThan(-1);
+    expect(classNamePos).toBeGreaterThan(-1);
+    expect(classFullPos).toBeLessThan(classNamePos);     // ✅ class="" first, .className= second
+  });
+
+  it('warning text dropped the .classList= aspirational line (FB-55 #2)', () => {
+    // Pre-fix the warn text mentioned `.classList=${{foo: true, bar: false}}`
+    // as "if/when implemented". classList is a read-only DOMTokenList
+    // accessor — no PROP_CASE_FIX could make it assignable, so the line
+    // was misleading. Post-fix it's removed.
+    const cls = 'foo';
+    const tpl = html`<span class="prefix ${cls}">x</span>`;
+    stamp(tpl, container);
+    const msg = warnSpy.mock.calls[0][0];
+    expect(msg).not.toMatch(/\.classList=/);
+  });
+
+  it('does not regress: canonical .style=${cssText}, .title=${str}, .value=${v} still work', () => {
+    // These property names are already lowercase, so they survived
+    // the parser pre-fix. Verify PROP_CASE_FIX didn't break them.
+    const tpl = html`<input .title=${'tip'} .value=${'val'}>`;
+    stamp(tpl, container);
+    const input = container.querySelector('input');
+    expect(input.title).toBe('tip');
+    expect(input.value).toBe('val');
+  });
+});
+
+describe('html template — FB-57 (v0.6.8) nested SVG/MathML template namespace re-routing', () => {
+  // FEEDBACK-57: nested `${html`<svg-child/>`}` interpolations produce
+  // HTML-namespaced elements (HTMLUnknownElement) instead of SVGElement.
+  // Root cause: each nested html`` is a SEPARATE cached template, and
+  // `tpl.innerHTML = m` is parsed at document level without SVG context.
+  // The <span style="display:contents"> wrapper from wrap() doesn't fix
+  // it because display:contents is layout-level not namespace-level;
+  // SVG layout is namespace-strict → invisible-but-present output.
+  //
+  // Fix: namespace-aware mount() — when the container is inside an SVG
+  // (or MathML) subtree, recursively re-namespace the cloned fragment
+  // via createElementNS. <foreignObject> and <annotation-xml
+  // encoding=text/html> revert to HTML per HTML5 §12.2.5 foreign-content
+  // insertion mode.
+  //
+  // RESPONSE-57 documents the trap end-to-end + the implementation-site
+  // choice (mount() not getTemplate(), to keep cache coherent).
+
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+  const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
+
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('inline <svg><circle/></svg> in a single template keeps working (regression)', () => {
+    // Pre-fix this case already worked because the HTML parser sees
+    // <svg> in tpl.innerHTML and enters SVG insertion mode for its
+    // descendants. Post-fix it must still work — the container is
+    // HTML-namespaced (<div>), so foreignContentNS() returns null,
+    // re-namespacing is skipped, and the inline parser's NS survives.
+    const tpl = html`<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/></svg>`;
+    stamp(tpl, container);
+    const svg = container.querySelector('svg');
+    const circle = container.querySelector('circle');
+    expect(svg.namespaceURI).toBe(SVG_NS);
+    expect(circle.namespaceURI).toBe(SVG_NS);
+  });
+
+  it('nested ${html`<circle/>`} inside an SVG container now lands in SVG namespace', () => {
+    // The canonical fix surface. Pre-fix, the inner template's <circle>
+    // arrived as HTMLUnknownElement (NS xhtml). Post-fix, the wrap()
+    // span is HTML-namespaced (correct — it has display:contents) but
+    // its children get re-namespaced via the wrap-span's closest('svg')
+    // matching the outer SVG.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const dots = [{ x: 1 }, { x: 2 }, { x: 3 }];
+    const tpl = html`${dots.map(d => html`<circle cx=${d.x} cy="5" r="2"/>`)}`;
+    stamp(tpl, svgRoot);
+    const circles = svgRoot.querySelectorAll('circle');
+    expect(circles.length).toBe(3);
+    for (const c of circles) {
+      expect(c.namespaceURI).toBe(SVG_NS);                       // ✅ SVG-NS
+    }
+  });
+
+  it('a directly-stamped html`<circle/>` template into an SVG container is SVG-namespaced', () => {
+    // Even without array interpolation, stamping a single SVG-content
+    // template into an SVG container must re-namespace.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const tpl = html`<circle cx="5" cy="5" r="3"/>`;
+    stamp(tpl, svgRoot);
+    const circle = svgRoot.querySelector('circle');
+    expect(circle.namespaceURI).toBe(SVG_NS);
+  });
+
+  it('<foreignObject> children REVERT to HTML namespace (per HTML5 spec)', () => {
+    // <foreignObject> is the spec-defined HTML escape hatch inside SVG.
+    // Re-namespacing must stop at the foreignObject boundary; its
+    // children stay HTML-namespaced.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const tpl = html`<foreignObject><div class="html-inside-svg">html content</div></foreignObject>`;
+    stamp(tpl, svgRoot);
+    const fo = svgRoot.querySelector('foreignObject');
+    const innerDiv = svgRoot.querySelector('.html-inside-svg');
+    expect(fo.namespaceURI).toBe(SVG_NS);                        // ✅ foreignObject itself is SVG
+    expect(innerDiv.namespaceURI).toBe('http://www.w3.org/1999/xhtml');  // ✅ children HTML
+  });
+
+  it('MathML <math><mi/></math> inline template stays in MathML namespace via the HTML parser', () => {
+    // Like inline-SVG: the HTML parser enters MathML insertion mode for
+    // <math>, so inline children arrive correctly namespaced even
+    // pre-fix. Post-fix this remains true (no re-namespacing because
+    // the container is HTML).
+    const tpl = html`<math><mi>x</mi></math>`;
+    stamp(tpl, container);
+    const math = container.querySelector('math');
+    const mi = container.querySelector('mi');
+    // happy-dom may or may not surface MathML namespace; smoke that the
+    // elements at least exist and the math element is acknowledged.
+    expect(math).not.toBeNull();
+    expect(mi).not.toBeNull();
+    expect(math.localName).toBe('math');
+  });
+
+  it('does not re-namespace when stamping into an HTML container (no overhead in the common case)', () => {
+    // Probe the discriminator: a plain <div> container should skip the
+    // re-namespacing path entirely. Verify by stamping a template
+    // whose children are HTML elements and confirming they stay HTML.
+    const tpl = html`<p class="probe">html paragraph</p>`;
+    stamp(tpl, container);
+    const p = container.querySelector('p.probe');
+    expect(p.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+  });
+});

package/package.json

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