@pyreon/elements 0.15.0 → 0.16.0

package/src/__tests__/Wrapper-innerhtml.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * Regression: Wrapper used to silently drop `dangerouslySetInnerHTML`.
+ *
+ * Bug shape: `OWN_KEYS` listed `'dangerouslySetInnerHTML'`, so `splitProps`
+ * moved it into `own`. The Styled JSX call only spread `...commonProps`
+ * (built from `rest`) and never re-attached `own.dangerouslySetInnerHTML`.
+ * Both runtimes (`runtime-server` and `runtime-dom`) support the prop —
+ * the data was lost between Wrapper and the renderer.
+ *
+ * Two test layers:
+ *
+ * 1. **Mock-vnode tests** (this file's first describe block) — fast
+ *    structural assertions against the vnode tree Wrapper returns. Catches
+ *    the prop drop at the API surface where it originally happened.
+ *
+ * 2. **Real-h() mount tests** (second describe block) — uses real `h()` +
+ *    `mount()` to exercise the full Element → Wrapper → Styled → DOM
+ *    pipeline. Catches the prop drop wherever it might occur along the
+ *    chain (Wrapper, Element, rocketstyle attrs HOC, runtime-dom prop
+ *    application). This is the "safety net" pattern from
+ *    .claude/rules/test-environment-parity.md — mock-vnode tests bypass
+ *    the HOC + mount pipeline and CAN miss bugs that surface only when
+ *    the real `h()` + mount path runs, exactly like PR #197's silent
+ *    metadata drop. Always have both.
+ */
+import { h, type VNode } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('~/utils', () => ({
+  IS_DEVELOPMENT: false,
+}))
+
+import Wrapper from '../helpers/Wrapper/component'
+import { Element } from '../Element'
+
+const asVNode = (v: unknown) => v as VNode
+
+describe('Wrapper — dangerouslySetInnerHTML forwarding (mock-vnode)', () => {
+  it('forwards dangerouslySetInnerHTML to the rendered Styled vnode (non-needsFix path)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // Bug-shape assertion: the prop must reach the rendered vnode.
+    // Pre-fix this is `undefined` → SVG is silently dropped.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+
+  it('drops children when dangerouslySetInnerHTML is present (mutually exclusive)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+        // children would conflict — innerHTML wins.
+        children: 'should be dropped',
+      }),
+    )
+
+    // children slot must not coexist with innerHTML — runtime-server's
+    // and runtime-dom's prop pipeline both treat them as inner-content
+    // sources, and emitting both would result in either a malformed
+    // tree or innerHTML being overwritten by the children mount.
+    expect(result.children).toEqual([])
+  })
+
+  it('forwards dangerouslySetInnerHTML on the needsFix path (button/fieldset/legend)', () => {
+    // button/fieldset/legend take the two-layer flex fix path. innerHTML
+    // belongs on the inner styled node (where the actual content goes),
+    // NOT on the outer wrapper.
+    const html = { __html: '<span>label</span>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'button',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // The `needsFix` branch should NOT trigger when innerHTML is set
+    // (innerHTML replaces all children, including the inner flex-fix
+    // layer). The simplest correct behavior: bypass needsFix when
+    // innerHTML is present and forward the prop on the single Styled.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+})
+
+// Real-h() mount tests — parallel coverage that runs the full pipeline.
+// Element uses Wrapper internally; mounting Element with
+// `dangerouslySetInnerHTML` exercises every layer the bug could surface
+// at: Element's split → Wrapper → Styled → runtime-dom's prop application.
+// happy-dom is the test environment; `dangerouslySetInnerHTML` translates
+// to `el.innerHTML = ...` which happy-dom handles natively.
+describe('Wrapper — dangerouslySetInnerHTML forwarding (real h() + mount)', () => {
+  it('Element with dangerouslySetInnerHTML actually injects HTML into the DOM (non-needsFix tag)', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'div',
+        'data-testid': 'innerhtml-host',
+        dangerouslySetInnerHTML: { __html: '<svg data-marker="real-h-svg">x</svg>' },
+      }),
+      root,
+    )
+
+    // The structural assertion: SVG element exists in the rendered DOM.
+    // Pre-fix Wrapper dropped the prop → no SVG → null query result.
+    const svg = root.querySelector('[data-marker="real-h-svg"]')
+    expect(svg).not.toBeNull()
+    expect(svg?.tagName.toLowerCase()).toBe('svg')
+
+    unmount()
+    root.remove()
+  })
+
+  it('Element with dangerouslySetInnerHTML on a needsFix tag (button) still injects HTML', () => {
+    // button is a needsFix tag (two-layer flex fix). The Wrapper branch
+    // must bypass the two-layer fix when innerHTML is present, OR forward
+    // innerHTML to the right layer. Either way the rendered DOM must
+    // contain the user-supplied HTML.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'button',
+        'data-testid': 'innerhtml-button',
+        dangerouslySetInnerHTML: { __html: '<span data-marker="real-h-button-label">click me</span>' },
+      }),
+      root,
+    )
+
+    const span = root.querySelector('[data-marker="real-h-button-label"]')
+    expect(span).not.toBeNull()
+    expect(span?.textContent).toBe('click me')
+
+    unmount()
+    root.remove()
+  })
+
+  it('children passed alongside dangerouslySetInnerHTML are dropped (innerHTML wins)', () => {
+    // Bug shape: if Wrapper's `own.children` leaks into the rendered vnode
+    // alongside `dangerouslySetInnerHTML`, runtime-dom would either mount
+    // children INTO the innerHTML-populated element (overwriting), or land
+    // both side-by-side. The contract is that innerHTML wins and children
+    // are dropped. Verifying at the DOM level catches both failure shapes.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(
+        Element,
+        {
+          tag: 'div',
+          'data-testid': 'innerhtml-with-children',
+          dangerouslySetInnerHTML: { __html: '<i data-marker="real-h-winner">html wins</i>' },
+        },
+        'this child text should NOT appear',
+      ),
+      root,
+    )
+
+    const host = root.querySelector('[data-testid="innerhtml-with-children"]')!
+    expect(host.querySelector('[data-marker="real-h-winner"]')).not.toBeNull()
+    // The child string must not appear anywhere in the rendered host.
+    expect(host.textContent).not.toContain('this child text should NOT appear')
+    expect(host.textContent).toContain('html wins')
+
+    unmount()
+    root.remove()
+  })
+})

package/src/__tests__/elements.browser.test.tsx

@@ -82,4 +82,51 @@ describe('@pyreon/elements browser smoke', () => {
       })
     }
   })
+
+  // Regression: Wrapper used to silently drop dangerouslySetInnerHTML.
+  // The unit test asserts Wrapper forwards the prop on the rendered
+  // vnode; this real-Chromium test asserts the SVG actually appears in
+  // the DOM after mount — the user-visible bug shape was "renders empty
+  // <div></div> instead of inlined SVG".
+  describe('dangerouslySetInnerHTML — real-Chromium DOM proof', () => {
+    it('inlines an SVG via Element + dangerouslySetInnerHTML', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="div"
+          data-id="logo"
+          dangerouslySetInnerHTML={{
+            __html: '<svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg>',
+          }}
+        />,
+      )
+      const root = container.querySelector('[data-id="logo"]')
+      expect(root).toBeTruthy()
+      // The SVG must actually be in the DOM, not lost between Wrapper and
+      // the renderer. Pre-fix this assertion failed: container had
+      // <div data-id="logo"></div> with no children.
+      const svg = root?.querySelector('svg')
+      expect(svg).toBeTruthy()
+      expect(svg?.tagName.toLowerCase()).toBe('svg')
+      expect(svg?.querySelector('rect')).toBeTruthy()
+      unmount()
+    })
+
+    it('inlines markup on a button (needsFix path)', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="button"
+          data-id="btn"
+          dangerouslySetInnerHTML={{ __html: '<strong>Save</strong>' }}
+        />,
+      )
+      const btn = container.querySelector('[data-id="btn"]')
+      expect(btn).toBeTruthy()
+      // The bold text must reach the DOM. The needsFix gate's existing
+      // `!own.dangerouslySetInnerHTML` clause skips the two-layer fix,
+      // so this falls into the !needsFix branch and the fix's
+      // `if (innerHTML)` path takes over.
+      expect(btn?.querySelector('strong')?.textContent).toBe('Save')
+      unmount()
+    })
+  })
 })

package/src/__tests__/wrapper-block-cascade.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest'
+import { styles } from '../helpers/Wrapper/styled'
+
+/**
+ * Regression test for the responsive `block` cascade bug (mirrors vitus-labs's
+ * "couple of fixes" PR #121).
+ *
+ * Scenario: a responsive theme like `block: [true, false, true]` runs the
+ * styles callback once per breakpoint with a single-value `t.block`. The bug
+ * was that `align-self`, `flex`/`width` etc. were emitted ONLY when
+ * `t.block` was truthy — so the breakpoint where `t.block` is false emitted
+ * nothing, leaving the previous breakpoint's `align-self: stretch` cascading
+ * through the mobile-first @media query.
+ *
+ * Fix: always emit a value for these properties (truthy → stretch/100%,
+ * falsy → auto/auto). The mobile-first @media cascade then resets cleanly
+ * when `block` flips false at a later breakpoint.
+ *
+ * The styles callback is called per-breakpoint with the per-breakpoint theme
+ * already resolved to a single value — so testing it directly with two
+ * scalar themes is enough to lock in the always-emit contract.
+ */
+
+const identityCss = (strings: TemplateStringsArray, ...vals: unknown[]) => {
+  let r = ''
+  for (let i = 0; i < strings.length; i++) {
+    r += strings[i]
+    if (i < vals.length) {
+      const v = vals[i]
+      // Mirror styled-components / styler interpolation: drop falsy
+      // interpolations, stringify the rest. CSSResult instances (from the
+      // alignContent / extendCss helpers) coerce via their toString.
+      if (v === false || v == null) continue
+      r += String(v)
+    }
+  }
+  return r
+}
+
+const renderAt = (theme: Record<string, unknown>): string =>
+  String(styles({ theme, css: identityCss }))
+
+describe('Wrapper styles — responsive block cascade reset', () => {
+  it('emits stretch/100%/flex when block is true', () => {
+    const out = renderAt({
+      block: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(out).toContain('align-self: stretch')
+    expect(out).toContain('width: 100%')
+    expect(out).toContain('display: flex')
+  })
+
+  it('emits auto/auto/inline-flex reset when block is false (key fix)', () => {
+    const out = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    // The fix: these properties MUST be emitted with reset values so the
+    // mobile-first @media cascade doesn't leak `align-self: stretch` from a
+    // smaller breakpoint where block was true.
+    expect(out).toContain('align-self: auto')
+    expect(out).toContain('width: auto')
+    expect(out).toContain('display: inline-flex')
+  })
+
+  it('emits height: 100% when alignY is "block", auto otherwise', () => {
+    const blockY = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'block',
+    })
+    expect(blockY).toContain('height: 100%')
+
+    const nonBlockY = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(nonBlockY).toContain('height: auto')
+  })
+
+  it('does not emit display when childFix is set (parent split)', () => {
+    const out = renderAt({
+      block: true,
+      childFix: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    // childFix branch handles its own display rules outside the responsive
+    // styles callback.
+    expect(out).not.toContain('display: flex;')
+    expect(out).not.toContain('display: inline-flex;')
+  })
+
+  it('emits parentFix flex-direction: column only when parentFix is set', () => {
+    const withParentFix = renderAt({
+      block: true,
+      parentFix: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(withParentFix).toContain('flex-direction: column')
+
+    const withoutParentFix = renderAt({
+      block: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(withoutParentFix).not.toContain('flex-direction: column')
+  })
+})

package/src/helpers/Iterator/component.tsx

@@ -10,7 +10,15 @@
 import type { VNode, VNodeChild } from '@pyreon/core'
 import { Fragment } from '@pyreon/core'
 import { isEmpty, render } from '@pyreon/ui-core'
-import type { ExtendedProps, ObjectValue, Props, SimpleValue } from './types'
+import type {
+  ChildrenProps,
+  ExtendedProps,
+  LooseProps,
+  ObjectProps,
+  ObjectValue,
+  SimpleProps,
+  SimpleValue,
+} from './types'
 
 type ClassifiedData =
   | { type: 'simple'; data: SimpleValue[] }
@@ -70,7 +78,7 @@ const attachItemProps: AttachItemProps = ({ i, length }: { i: number; length: nu
   }
 }
 
-const Component = (props: Props) => {
+const Component = (props: LooseProps) => {
   const {
     itemKey,
     valueName,
@@ -246,7 +254,50 @@ const Component = (props: Props) => {
   return renderItems()
 }
 
-export default Object.assign(Component, {
+// ---------------------------------------------------------------------------
+// Public callable type — overloads expose the generic `<T>` API at the JSX
+// boundary while the impl stays loose-typed. TS picks the matching overload
+// based on the props object passed:
+//
+//   <Iterator data={['a','b']} valueName="text" component={Item} />
+//   ^ T inferred as string → SimpleProps<string> overload selected
+//
+//   <Iterator data={users} component={UserCard} />
+//   ^ T inferred as User → ObjectProps<User> overload selected
+//
+//   <Iterator>{...}</Iterator>            → ChildrenProps overload selected
+// ---------------------------------------------------------------------------
+export interface IteratorComponent {
+  // T is inferred from the `data` prop at the JSX site — no explicit
+  // generic argument needed. Order matters: SimpleProps first (matches
+  // `data: SimpleValue[]`), then ObjectProps (object[]), then ChildrenProps,
+  // then a LooseProps fallback.
+  //
+  // The narrow overloads (Simple / Object / Children) drive per-mode T
+  // inference and stricter compile-time errors for direct callers (e.g.
+  // `valueName` required for primitive arrays, forbidden for object arrays).
+  // The LooseProps fallback exists for forwarding patterns where the props
+  // type is a wide union that doesn't bind to any single narrow overload —
+  // notably `Partial<(typeof Wrapper)['$$types']>` spread back into the JSX
+  // site after `@pyreon/rocketstyle`'s 4-overload-aware `ExtractProps`
+  // distributes the union across all of Iterator's call signatures. Without
+  // the loose binding home, the wide union has nowhere to land and TS
+  // reports "no overload matches this call" at every forwarding site.
+  //
+  // Direct callers still see the strict per-mode errors — the loose fallback
+  // only fires when none of the three narrow overloads match.
+  <T extends SimpleValue>(props: SimpleProps<T>): VNodeChild
+  <T extends ObjectValue>(props: ObjectProps<T>): VNodeChild
+  (props: ChildrenProps): VNodeChild
+  (props: LooseProps): VNodeChild
+  isIterator: true
+  RESERVED_PROPS: typeof RESERVED_PROPS
+  displayName?: string
+}
+
+const Iterator = Object.assign(Component, {
   isIterator: true as const,
   RESERVED_PROPS,
-})
+}) as unknown as IteratorComponent
+
+export default Iterator

package/src/helpers/Iterator/index.ts

@@ -1,14 +1,30 @@
 import component from './component'
 import type {
+  ChildrenProps,
   ElementType,
   ExtendedProps,
+  LooseProps,
   MaybeNull,
+  ObjectProps,
   ObjectValue,
   Props,
   PropsCallback,
+  SimpleProps,
   SimpleValue,
 } from './types'
 
-export type { ElementType, ExtendedProps, MaybeNull, ObjectValue, Props, PropsCallback, SimpleValue }
+export type {
+  ChildrenProps,
+  ElementType,
+  ExtendedProps,
+  LooseProps,
+  MaybeNull,
+  ObjectProps,
+  ObjectValue,
+  Props,
+  PropsCallback,
+  SimpleProps,
+  SimpleValue,
+}
 
 export default component

package/src/helpers/Iterator/types.ts

@@ -23,6 +23,80 @@ export type ExtendedProps = {
   position: number
 }
 
+// ---------------------------------------------------------------------------
+// Per-mode prop shapes — narrowed via the `T` data-element type
+// ---------------------------------------------------------------------------
+
+/**
+ * Iterator over an array of strings/numbers. Each item is wrapped in
+ * `{ [valueName]: item }` and that object is what callbacks see + what's
+ * spread onto the rendered component.
+ */
+export type SimpleProps<T extends SimpleValue> = {
+  data: Array<T | MaybeNull>
+  /** A component to be rendered per item. */
+  component: ElementType
+  /**
+   * Key under which each primitive value is exposed to `component` and
+   * callbacks. Defaults to `'children'` at runtime — i.e. the value is
+   * passed to the component as its children.
+   */
+  valueName?: string
+  /** Optional wrapper around each item. */
+  wrapComponent?: ElementType
+  /** Stable key per item (defaults to index). */
+  itemKey?: (item: T, index: number) => SimpleValue
+  /** Extra props merged onto the rendered component, optionally per-item. */
+  itemProps?: TObj | ((item: { [k: string]: T }, ext: ExtendedProps) => TObj)
+  /** Extra props merged onto the wrapper, optionally per-item. */
+  wrapProps?: TObj | ((item: { [k: string]: T }, ext: ExtendedProps) => TObj)
+  children?: never
+}
+
+/**
+ * Iterator over an array of objects. Each item is spread onto the rendered
+ * component as props. Per-item `component` overrides also work — when an
+ * item carries its own `component` field, the wrapper is bypassed.
+ */
+export type ObjectProps<T extends ObjectValue> = {
+  data: Array<T | MaybeNull>
+  /** Default component to be rendered per item (item-level `component` overrides). */
+  component: ElementType
+  /** `valueName` is meaningless when iterating objects — TS forbids it. */
+  valueName?: never
+  /** Optional wrapper around each item. */
+  wrapComponent?: ElementType
+  /** Stable key per item — pick a key from the item, or compute it. */
+  itemKey?: keyof T | ((item: T, index: number) => SimpleValue)
+  /** Extra props merged onto the rendered component, optionally per-item. */
+  itemProps?: TObj | ((item: T, ext: ExtendedProps) => TObj)
+  /** Extra props merged onto the wrapper, optionally per-item. */
+  wrapProps?: TObj | ((item: T, ext: ExtendedProps) => TObj)
+  children?: never
+}
+
+/**
+ * Iterator over `children` — no `data`/`component`. Each child gets
+ * positional metadata via `itemProps` and an optional `wrapComponent`.
+ */
+export type ChildrenProps = {
+  children: VNodeChild
+  data?: never
+  component?: never
+  valueName?: never
+  itemKey?: never
+  wrapComponent?: ElementType
+  itemProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj)
+  wrapProps?: TObj | ((_: Record<string, never>, ext: ExtendedProps) => TObj)
+}
+
+// ---------------------------------------------------------------------------
+// Loose backward-compatible fallback shape (today's behavior)
+//
+// Used when callers don't (or can't) parameterize `Props<T>` — keeps the
+// existing call surface intact so this refactor lands non-breaking.
+// ---------------------------------------------------------------------------
+
 export type PropsCallback =
   | TObj
   | ((
@@ -30,50 +104,35 @@ export type PropsCallback =
       extendedProps: ExtendedProps,
     ) => TObj)
 
-export type Props = Partial<{
-  /**
-   * Valid children
-   */
+export type LooseProps = Partial<{
   children: VNodeChild
-
-  /**
-   * Array of data passed to `component` prop
-   */
   data: Array<SimpleValue | ObjectValue | MaybeNull>
-
-  /**
-   * A component to be rendered within list
-   */
   component: ElementType
-
-  /**
-   * Defines name of the prop to be passed to the iteration component
-   * when **data** prop is type of `string[]`, `number[]` or combination
-   * of both. Otherwise ignored.
-   */
   valueName: string
-
-  /**
-   * A component to be rendered within list. `wrapComponent`
-   * wraps `component`. Therefore it can be used to enhance the behavior
-   * of the list component
-   */
   wrapComponent: ElementType
-
-  /**
-   * Extension of **item** `component` props to be passed
-   */
   itemProps: PropsCallback
-
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  wrapProps?: PropsCallback
-
-  /**
-   * Extension of **item** `wrapComponent` props to be passed
-   */
-  itemKey?:
+  wrapProps: PropsCallback
+  itemKey:
     | keyof ObjectValue
     | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue)
 }>
+
+// ---------------------------------------------------------------------------
+// Public, generic-aware Props<T>
+//
+//   Props<string>          → SimpleProps<string>     (valueName REQUIRED)
+//   Props<{ id; name }>    → ObjectProps<{...}>      (valueName FORBIDDEN)
+//   Props<unknown> / Props → LooseProps              (today's behavior)
+//
+// `unknown extends T` is the canonical "did the caller actually narrow T?"
+// check — true only when T is left as `unknown`, false for any concrete
+// narrowing. Fallback to LooseProps preserves existing call sites.
+// ---------------------------------------------------------------------------
+
+export type Props<T = unknown> = unknown extends T
+  ? LooseProps
+  : T extends SimpleValue
+    ? SimpleProps<T>
+    : T extends ObjectValue
+      ? ObjectProps<T>
+      : ChildrenProps

package/src/helpers/Wrapper/component.tsx

@@ -50,6 +50,15 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
   // slot is dropped here too instead of leaking into the JSX.
   const isVoidTag = !own.dangerouslySetInnerHTML && getShouldBeEmpty(own.tag)
 
+  // dangerouslySetInnerHTML and children are mutually exclusive — both
+  // become inner content (per `runtime-server/src/index.ts:228` and
+  // `runtime-dom/src/props.ts:289`). Pre-fix the prop was in OWN_KEYS,
+  // moved into `own` by splitProps, and never re-attached to the rendered
+  // vnode — so `<Logo dangerouslySetInnerHTML={...} />` rendered an empty
+  // <div></div>. Forward the prop to the styled vnode and drop the
+  // children slot when innerHTML is set.
+  const innerHTML = own.dangerouslySetInnerHTML
+
   if (!needsFix) {
     const bundle = internElementBundle({
       block: own.block,
@@ -62,6 +71,9 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
     if (isVoidTag) {
       return <Styled {...commonProps} $element={bundle} />
     }
+    if (innerHTML) {
+      return <Styled {...commonProps} $element={bundle} dangerouslySetInnerHTML={innerHTML} />
+    }
     return (
       <Styled {...commonProps} $element={bundle}>
         {own.children}
@@ -83,6 +95,26 @@ const Component = (props: Partial<Props> & { ref?: unknown }) => {
     equalCols: own.equalCols,
   })
 
+  // needsFix path: innerHTML belongs on the INNER styled node (where the
+  // actual content lives), NOT on the outer flex-fix wrapper. The
+  // `needsFix` computation already excludes the innerHTML case
+  // (`!own.dangerouslySetInnerHTML && isWebFixNeeded(own.tag)`), so this
+  // branch normally won't execute when innerHTML is set — but we keep
+  // the defensive forwarding so the contract is robust against future
+  // refactors of the needsFix gate.
+  if (innerHTML) {
+    return (
+      <Styled {...commonProps} $element={parentBundle}>
+        <Styled
+          as={asTag}
+          $childFix
+          $element={childBundle}
+          dangerouslySetInnerHTML={innerHTML}
+        />
+      </Styled>
+    )
+  }
+
   return (
     <Styled {...commonProps} $element={parentBundle}>
       <Styled as={asTag} $childFix $element={childBundle}>