fix(16): svelte :style switches to string-form when auto-fallthrough active

ITEM-2-RESIDUAL closure. Fully closes the Svelte arm of PHASE_14_1_FOLLOWUP
— matrix VR cell now lands on baseline (was 7 085 px diff post-Item-2);
all 12 themed-button × svelte cells pass; 'svelte' removed from
PHASE_14_1_FOLLOWUP_TARGETS entirely. Full VR matrix: 253 passed, 1 skipped
(down from 13 skipped — the lone remaining skip is the Solid 20px width
residual, which has a different root cause).

Root cause. Svelte 5's compiled output places per-property `style:<prop>=`
directive state under a Symbol-keyed slot processed AFTER any spread inside
the generated props object. The original Phase-5 design ("wrapper directives
win over spread style") was correct for the wrapper-defaults-survive-no-
matter-what use case. But for cross-target auto-fallthrough — where the
consumer's spread `style="..."` MUST win over the wrapper's `:style="{...}"`
defaults to match Vue/React/Solid/Lit/Angular — the directive precedence
was exactly wrong.

Fix. Detect bare-`$attrs` spreadBinding on the same element in
`emitElement`; thread the flag through `EmitAttrCtx.hasFallthroughSpread`.
When set, `tryEmitStyleObjectLiteral` routes the literal-object `:style`
emit through a NEW string-form path: `style="prop: value; prop2: value2"`
instead of per-property `style:<prop>={value}` directives. String literals
splice verbatim; dynamic expressions splice as Svelte template-literal
interpolation (`style="--btn-bg: {bgExpr}"`).

Consumer's spread `style="..."` then overwrites the wrapper's string-form
attribute via `setAttribute`, restoring cross-target consumer-wins
precedence. Wrapper's un-overridden defaults survive via the
`var(--prop, fallback)` CSS fallback the wrappers idiomatically declare
(`color: var(--btn-fg, #ffffff)`).

When the element is NOT a fallthrough root, the original `style:<prop>=`
directive lowering is preserved — Svelte's per-key reactivity is the
better choice for non-fallthrough cases.

Files:
  - packages/targets/svelte/src/emit/emitTemplateAttribute.ts —
    `EmitAttrCtx.hasFallthroughSpread` new field; new branch in
    `tryEmitStyleObjectLiteral` that emits string-form when active;
    handles string-literal, numeric-literal, and dynamic-expression
    property values
  - packages/targets/svelte/src/emit/emitTemplateNode.ts —
    computes `hasFallthroughSpread` from `node.attributes` (bare-`$attrs`
    Identifier in any spreadBinding) and threads to `emitAttributes`
  - packages/targets/svelte/src/__tests__/emitTemplateAttribute.test.ts —
    the 3 existing `:style` literal-object tests now use
    `inherit-attrs="false"` to opt OUT of auto-fallthrough (isolating
    the pre-residual `style:` directive lowering); 2 NEW tests cover
    the Item-2-residual string-form path (string-literal values +
    dynamic-expression interpolation)
  - tests/dist-parity/fixtures/ThemedButton*.svelte — rebless the 4
    wrapper fixtures whose `:style="{...}"` defaults now emit as
    `style="--btn-bg: #3b82f6; --btn-fg: #ffffff"` instead of
    `style:--btn-bg={'#3b82f6'} style:--btn-fg={'#ffffff'}`
  - matrix.spec.ts PHASE_14_1_FOLLOWUP set — `'ThemedButtonConsumer::svelte'`
    REMOVED; closure comment captures the two-stage fix path
  - themed-button.spec.ts PHASE_14_1_FOLLOWUP_TARGETS — set now empty;
    closure comment notes Item 2 + Item-2-residual closed the Svelte arm

Verification:
  - turbo run typecheck --force --continue: 47/47 green
  - turbo run test --continue: 46/46 green (target-svelte 216/216,
    dist-parity 512/512)
  - svelte-vite test:e2e: 14/14 green
  - tools/ci-repro/vr.sh -g ThemedButtonConsumer.*svelte|themed-button.*svelte:
    12/12 cells pass (was 0/12 pre-fix; 10/12 post-Item-2)
  - tools/ci-repro/vr.sh (full matrix): 253 passed, 1 skipped, 0 failed
    — only the Solid 20 px width residual remains gated

The Item-2-residual closure leaves Rozie's cross-target attribute-
fallthrough story FULLY symmetric across all 5 non-Lit targets: a
consumer-passed `style="…"` always wins over the wrapper's `:style="{…}"`
defaults regardless of target.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: serpentblade

packages/targets/svelte/src/__tests__/emitTemplateAttribute.test.ts

@@ -28,8 +28,16 @@ function lowerInline(src: string, filename = 'Test.rozie'): IRComponent {
 }
 
 describe('emitTemplateAttribute — `:style` literal-object lowering (Svelte / Spike 004 subset)', () => {
+  // `inherit-attrs="false"` on each of these literal-object `:style` tests
+  // opts the single-root element OUT of `synthesizeAttrsFallthrough`. Without
+  // the opt-out, pre-Phase-16 cleanup Item-2-residual routes `:style="{...}"`
+  // through the new string-form path so the consumer's spread `style="..."`
+  // value can overwrite the wrapper's defaults (cross-target consumer-wins
+  // precedence). These three tests isolate the pre-residual `style:` directive
+  // lowering; the dedicated `…interacts with auto-fallthrough` test below
+  // covers the new string-form path.
   it('single-key literal object: `:style="{ background: \'#f00\' }"` → `style:background={\'#f00\'}`', () => {
-    const ir = lowerInline(`<rozie name="Test">
+    const ir = lowerInline(`<rozie name="Test" inherit-attrs="false">
 <template>
   <span :style="{ background: '#f00' }"></span>
 </template>
@@ -44,7 +52,7 @@ describe('emitTemplateAttribute — `:style` literal-object lowering (Svelte / S
   });
 
   it('multi-key literal object: `:style="{ background: x, color: y }"` → two style: directives', () => {
-    const ir = lowerInline(`<rozie name="Test">
+    const ir = lowerInline(`<rozie name="Test" inherit-attrs="false">
 <data>{ x: '#f00', y: '#0f0' }</data>
 <template>
   <span :style="{ background: $data.x, color: $data.y }"></span>
@@ -58,7 +66,7 @@ describe('emitTemplateAttribute — `:style` literal-object lowering (Svelte / S
   });
 
   it('camelCase key kebabizes: `:style="{ backgroundColor: x }"` → `style:background-color={x}`', () => {
-    const ir = lowerInline(`<rozie name="Test">
+    const ir = lowerInline(`<rozie name="Test" inherit-attrs="false">
 <data>{ x: '#f00' }</data>
 <template>
   <span :style="{ backgroundColor: $data.x }"></span>
@@ -69,6 +77,51 @@ describe('emitTemplateAttribute — `:style` literal-object lowering (Svelte / S
     expect(template).toContain('style:background-color={x}');
   });
 
+  it('Item-2-residual: literal-object `:style` switches to string-form `style="..."` when auto-fallthrough is active on the same element', () => {
+    // Pre-Phase-16 cleanup Item-2-residual — when a single-root html element
+    // is `synthesizeAttrsFallthrough`-eligible (the default — `inherit-attrs`
+    // is true), the lowering swaps `style:<prop>={value}` directives for a
+    // string-form `style="prop: value"` attribute. Background: Svelte's
+    // compiled output places per-property `style:` directive state under a
+    // Symbol-keyed slot processed AFTER any spread inside the generated props
+    // object, so directives win over spread `style` — the OPPOSITE precedence
+    // the other 5 targets implement. String-form lets the consumer's spread
+    // `style` value overwrite the wrapper's defaults via `setAttribute`,
+    // restoring cross-target parity. The wrapper's un-overridden defaults
+    // survive via the wrapper's `var(--prop, fallback)` CSS fallback.
+    const ir = lowerInline(`<rozie name="Test">
+<template>
+  <button :style="{ '--btn-bg': '#3b82f6', '--btn-fg': '#ffffff' }"></button>
+</template>
+</rozie>`);
+    const { template, diagnostics } = emitTemplate(ir, REGISTRY);
+    expect(diagnostics).toEqual([]);
+    // String-form style attribute with both custom properties spliced.
+    expect(template).toContain('style="--btn-bg: #3b82f6; --btn-fg: #ffffff"');
+    // No `style:` directives (the Item-2-residual switch suppresses them).
+    expect(template).not.toMatch(/\bstyle:--btn-bg=/);
+    expect(template).not.toMatch(/\bstyle:--btn-fg=/);
+    // Auto-fallthrough fired (sanity check).
+    expect(template).toContain('{...__rozieAttrs}');
+  });
+
+  it('Item-2-residual: dynamic-value literal-object `:style` interpolates expressions into the string', () => {
+    // Same fallthrough condition as above, but the object values are
+    // identifiers/expressions rather than string literals. The rewriter
+    // splices each value via Svelte template-literal interpolation in the
+    // attribute string: `style="prop: {expr}; prop2: {expr2}"`.
+    const ir = lowerInline(`<rozie name="Test">
+<data>{ bg: '#3b82f6', fg: '#ffffff' }</data>
+<template>
+  <button :style="{ '--btn-bg': $data.bg, '--btn-fg': $data.fg }"></button>
+</template>
+</rozie>`);
+    const { template, diagnostics } = emitTemplate(ir, REGISTRY);
+    expect(diagnostics).toEqual([]);
+    expect(template).toContain('style="--btn-bg: {bg}; --btn-fg: {fg}"');
+    expect(template).not.toMatch(/\bstyle:--btn-bg=/);
+  });
+
   it('non-object binding falls through to existing passthrough: `:style="$data.s"` → `style={s}`', () => {
     const ir = lowerInline(`<rozie name="Test">
 <data>{ s: 'background: red' }</data>

packages/targets/svelte/src/emit/emitTemplateAttribute.ts

@@ -52,6 +52,23 @@ export interface EmitAttrCtx {
    * `<input>` to text — `bind:value` is correct there).
    */
   inputType?: string;
+  /**
+   * Pre-Phase-16 cleanup Item-2-residual — true when the host element ALSO
+   * carries a bare-`$attrs` `spreadBinding` (attribute auto-fallthrough is
+   * active). When this is set, `:style="{...}"` object-literal lowering
+   * switches from `style:<prop>={value}` directives to a string-form
+   * `style="prop: value; ..."` attribute. Background: Svelte's compiled
+   * output places per-property `style:` directive state under a Symbol-keyed
+   * slot processed AFTER any spread inside the generated props object, so
+   * `style:` directives intentionally win over spread `style` — the OPPOSITE
+   * precedence the other 5 targets implement for the auto-fallthrough case.
+   * Re-emitting the wrapper's `:style` defaults as a string attribute lets
+   * the consumer's spread `style="..."` value overwrite them via
+   * `setAttribute('style', ...)`, restoring cross-target parity. Wrapper's
+   * un-overridden defaults survive via the `var(--prop, fallback)` CSS
+   * fallback the wrappers idiomatically already declare.
+   */
+  hasFallthroughSpread?: boolean;
 }
 
 /**
@@ -260,11 +277,52 @@ function objectPropertyKeyAsString(
 function tryEmitStyleObjectLiteral(
   attr: AttributeBinding,
   ir: IRComponent,
+  ctx?: EmitAttrCtx,
 ): string | null {
   if (attr.kind !== 'binding') return null;
   if (attr.name !== 'style') return null;
   if (!t.isObjectExpression(attr.expression)) return null;
 
+  // Pre-Phase-16 Item-2-residual — when auto-fallthrough is active on this
+  // element, the consumer's spread `style="..."` value would otherwise lose
+  // to the wrapper's `style:<prop>=` directives (Svelte's STYLES_KEY runs
+  // after spread by design). Emit the wrapper's defaults as a string-form
+  // `style="prop: value; ..."` attribute instead — the spread's
+  // setAttribute then overwrites it cleanly, restoring cross-target
+  // consumer-wins precedence. Bail to null (caller falls through to the
+  // generic `style={<expr>}` passthrough) if any property value is too
+  // complex to safely serialise to a CSS declaration string.
+  if (ctx?.hasFallthroughSpread) {
+    const parts: string[] = [];
+    for (const prop of attr.expression.properties) {
+      if (!t.isObjectProperty(prop)) return null;
+      const keyName = objectPropertyKeyAsString(prop);
+      if (keyName === null) return null;
+      if (!t.isExpression(prop.value)) return null;
+      const cssProp = kebabizeStyleKey(keyName);
+      // String-literal value → splice the value text verbatim (no quoting in
+      // CSS — declarations are not JS).
+      if (t.isStringLiteral(prop.value)) {
+        parts.push(`${cssProp}: ${prop.value.value}`);
+        continue;
+      }
+      // Numeric-literal value → splice as bare number (matches Svelte's
+      // implicit `${n}px`-less serialization; for CSS custom properties the
+      // value is a number-literal which is valid).
+      if (t.isNumericLiteral(prop.value)) {
+        parts.push(`${cssProp}: ${prop.value.value}`);
+        continue;
+      }
+      // Dynamic value → Svelte template-literal interpolation in the
+      // attribute string: `style="--btn-bg: {bgExpr}"`. Reuse the standard
+      // template-expression rewriter (handles $props.X, $data.X, etc.).
+      const exprCode = rewriteTemplateExpression(prop.value, ir);
+      parts.push(`${cssProp}: {${exprCode}}`);
+    }
+    if (parts.length === 0) return 'style=""';
+    return `style="${parts.join('; ')}"`;
+  }
+
   const directives: string[] = [];
   for (const prop of attr.expression.properties) {
     // Bail on spreads / methods / computed keys — caller falls through to
@@ -585,7 +643,7 @@ export function emitSingleAttr(
     // serialize the object via toString() to `[object Object]`. Falls
     // through to the default attribute emit for non-literal-object exprs
     // (string form is handled natively by Svelte).
-    const styleObjectLowered = tryEmitStyleObjectLiteral(attr, ir);
+    const styleObjectLowered = tryEmitStyleObjectLiteral(attr, ir, ctx);
     if (styleObjectLowered !== null) return styleObjectLowered;
     const expr = rewriteTemplateExpression(attr.expression, ir);
     const outName = resolveAttrName(attr.name, ctx);

packages/targets/svelte/src/emit/emitTemplateNode.ts

@@ -325,12 +325,29 @@ function emitElement(node: TemplateElementIR, ctx: EmitNodeCtx): string {
       }
     }
   }
+  // Pre-Phase-16 Item-2-residual — detect a bare-`$attrs` spreadBinding on
+  // the same element. When present, `:style="{...}"` object-literal lowering
+  // routes through the string-form `style="..."` path so the consumer's
+  // spread `style` value can overwrite the wrapper's defaults (the
+  // cross-target consumer-wins precedence). See EmitAttrCtx.hasFallthroughSpread.
+  let hasFallthroughSpread = false;
+  for (const a of node.attributes) {
+    if (
+      a.kind === 'spreadBinding' &&
+      a.expression.type === 'Identifier' &&
+      a.expression.name === '$attrs'
+    ) {
+      hasFallthroughSpread = true;
+      break;
+    }
+  }
   const attrText = emitAttributes(node.attributes, {
     ir: ctx.ir,
     elementTagKind: node.tagKind,
     // Spread only when defined — `exactOptionalPropertyTypes` rejects an
     // explicit `inputType: undefined` against the optional `inputType?` field.
     ...(inputType !== undefined ? { inputType } : {}),
+    ...(hasFallthroughSpread ? { hasFallthroughSpread: true } : {}),
   });
 
   // Phase 15 R6 — assemble the per-element listener emit. Literal-key

tests/dist-parity/fixtures/ThemedButton.svelte

@@ -15,7 +15,7 @@ let {
 </script>
 
 
-<button style:--btn-bg={'#3b82f6'} style:--btn-fg={'#ffffff'} {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-7914ecaa>
+<button style="--btn-bg: #3b82f6; --btn-fg: #ffffff" {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-7914ecaa>
   {label}
 </button>
 

tests/dist-parity/fixtures/ThemedButtonAllManual.svelte

@@ -15,7 +15,7 @@ let {
 </script>
 
 
-<button style:--btn-bg={'#3b82f6'} style:--btn-fg={'#ffffff'} {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-de172510>
+<button style="--btn-bg: #3b82f6; --btn-fg: #ffffff" {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-de172510>
   {label}
 </button>
 

tests/dist-parity/fixtures/ThemedButtonListenersManual.svelte

@@ -15,7 +15,7 @@ let {
 </script>
 
 
-<button style:--btn-bg={'#3b82f6'} style:--btn-fg={'#ffffff'} {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-97e125bc>
+<button style="--btn-bg: #3b82f6; --btn-fg: #ffffff" {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-97e125bc>
   {label}
 </button>
 

tests/dist-parity/fixtures/ThemedButtonManual.svelte

@@ -15,7 +15,7 @@ let {
 </script>
 
 
-<button style:--btn-bg={'#3b82f6'} style:--btn-fg={'#ffffff'} {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-671f0616>
+<button style="--btn-bg: #3b82f6; --btn-fg: #ffffff" {...__rozieAttrs} class={["btn", variant, (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-671f0616>
   {label}
 </button>
 

tests/visual-regression/specs/matrix.spec.ts

@@ -401,47 +401,13 @@ const PHASE_14_1_FOLLOWUP = new Set<string>([
   //     kerns identically, but a single specific case may not).
   // None are blocking; carried into a deeper post-Phase-16 investigation.
   'ThemedButtonConsumer::solid',
-  // Pre-Phase-16 cleanup Item 2 PARTIAL closure (2026-05-23). The original
-  // gate hypothesis was correct: Svelte uses native class-hash CSS scoping
-  // (`.foo.svelte-XXX`) which only stamps on elements lexically inside the
-  // same SFC compile unit, so the consumer's `.extra-variant.svelte-CONSUMER`
-  // rule never matched the wrapper's inner button (which carried
-  // `.svelte-WRAPPER`). Item 2 implemented fix-path (b) — switched Rozie's
-  // Svelte CSS pipeline off Svelte's native scoper onto `data-rozie-s-*`,
-  // mirroring react/solid/lit:
-  //   - `packages/targets/svelte/src/emit/scopeCss.ts` (new) — selector
-  //     rewriter, copy of the react sibling
-  //   - `emitStyle.ts` — wraps scoped rules in `:global { ... }` block to
-  //     opt out of Svelte's native scoper; `PORTAL_SCOPE_REPEAT` drops 1→0
-  //   - `emitTemplate.ts` + `emitTemplateNode.ts` — threads `scopeAttr` and
-  //     stamps `data-rozie-s-<hash>` on every element AND every component-
-  //     tag invocation (cross-SFC propagation path)
-  //   - `emitSvelte.ts` — derives `scopeAttr` from the existing
-  //     `portalScopeHash` (no new hash computation)
-  //
-  // Post-Item-2 the cell improves 9 457 → 7 085 px diff (25% reduction);
-  // `.extra-variant` font-weight (bold) renders correctly, `.btn` background
-  // applies, all four buttons present in the right layout. 10 of 11
-  // themed-button × svelte cells now pass (DOM-class assertions, listener
-  // attachments, etc.).
-  //
-  // RESIDUAL — the per-button color overrides (consumer-passed
-  // `style="--btn-bg: #ef4444"` etc.) do not win over the wrapper's
-  // `style:--btn-bg={'#3b82f6'}` directive. Root cause is an established
-  // Svelte 5 semantic (see `emitTemplateAttribute.ts:401-406`): Svelte's
-  // compiled output places per-property `style:` directive state under a
-  // Symbol-keyed slot processed AFTER any spread inside the generated props
-  // object, so wrapper directives intentionally win over spread style. The
-  // other 5 targets (Vue/React/Solid/Lit/Angular) all run the OPPOSITE
-  // precedence (consumer wins), which is the cross-target intent for
-  // attribute fallthrough. Closing this requires switching Svelte's `:style`
-  // object-literal lowering OFF the `style:<prop>=` directive form (when
-  // auto-fallthrough is active on the same element) ONTO either a
-  // string-attribute emit or a runtime style-merge helper. Tracked as
-  // Item-2-residual into a post-Phase-16 sweep — see also
-  // `themed-button.spec.ts` PHASE_14_1_FOLLOWUP_TARGETS for the
-  // `consumer style="--btn-bg" overrides...` test that still fails.
-  'ThemedButtonConsumer::svelte',
+  // Svelte arm FULLY CLOSED (2026-05-24) — Item 2 (cross-SFC CSS-scoping
+  // switch to `data-rozie-s-*`) + Item-2-residual (auto-fallthrough-aware
+  // `:style` string-form lowering, when active, instead of `style:<prop>=`
+  // directives that would otherwise win over spread `style`). All 12
+  // themed-button × svelte cells pass and the matrix VR cell lands on
+  // baseline. See commit history for the full path through the two-stage
+  // fix. No remaining svelte entries in this set.
 ]);
 
 for (const example of EXAMPLES) {

tests/visual-regression/specs/themed-button.spec.ts

@@ -72,23 +72,11 @@ const FOUR_CORNERS = [
 
 // Phase-N.M follow-up gate — companion to matrix.spec.ts's PHASE_14_1_FOLLOWUP
 // set. Phase 14.1 closed 3 of 5 ThemedButtonConsumer entries (react / angular
-// / lit). Pre-Phase-16 cleanup closed the Solid arm here (DOM-assertion cells
-// pass after the emit-redundancy fix — see commit history). Svelte remains.
-const PHASE_14_1_FOLLOWUP_TARGETS = new Set<string>([
-  // Svelte: pre-Phase-16 Item 2 closed the cross-SFC CSS-scoping gap (the
-  // 10 class/listener/attribute assertion cells below now pass), but the
-  // `consumer style="--btn-bg" overrides the wrapper's default` test still
-  // fails on a residual issue: Svelte's `style:<prop>=` directive (used to
-  // emit the wrapper's `:style="{...}"` defaults) wins over consumer-
-  // passed `style="..."` strings inside the auto-fallthrough spread. This
-  // is the OPPOSITE precedence the other 5 targets implement. Closing it
-  // requires switching Svelte's :style lowering off the `style:` directive
-  // form when auto-fallthrough is active. Tracked as Item-2-residual; see
-  // matrix.spec.ts PHASE_14_1_FOLLOWUP gate for the full rationale. Whole
-  // svelte arm stays gated because the test-list here is a binary
-  // per-target set; switching to per-test gating is a separate refactor.
-  'svelte',
-]);
+// / lit). Pre-Phase-16 cleanup closed the remaining two arms — Solid via the
+// dual-spread emit fix (Item 1) and Svelte via the cross-SFC CSS-scoping
+// switch (Item 2) + auto-fallthrough-aware `:style` lowering (Item-2-residual).
+// Set is empty; preserved for future per-target gate additions.
+const PHASE_14_1_FOLLOWUP_TARGETS = new Set<string>([]);
 
 for (const target of TARGETS) {
   const built = existsSync(