WORK-665
ID:WORK-665Status:done

hero is a composition over section

hero becomes a section with a split, cover, the header and {% actions %}, with no rune CSS of its own (SPEC-160 D7). WORK-654 leaves a composed hero fixture; this item completes it and compares it with the plugin.

Priority:highComplexity:complexMilestone:v0.44.0Source:SPEC-160

Criteria completion

Criteria completion: 8 of 8 (100%) checked; tracking started on Oct 29, no incremental history yet0%25%50%75%100%Oct 29Oct 29

Tracking started Oct 29 — check back for trends.

Acceptance Criteria

  • A composed hero definition declares align, the split attributes, content-place, height and aspect, and forwards them to its section
  • It declares defaults: { width: full, elevation: flush, prominence: display } and writes guest-fit="bleed" on its section
  • It reads no heading as an eyebrow (ADR-046), and a second leading heading is body rather than dropped (BUG-047)
  • Rendered beside the plugin hero for every gallery fixture, light and dark, including cover; every difference is listed and explained
  • actions.css in skeleton and Lumina sets the button-size custom properties from the enclosing section's data-prominence: display and prominent give today's hero size (0.7rem 1.75rem at --rf-text), and anything else gives today's cta size (SPEC-160 D7)
  • The size rules reach only an actions whose nearest enclosing rune carries the prominence, asserted with a card holding actions inside a display hero, which keeps default buttons
  • The composed hero's buttons match the plugin hero's in size, with no hero.css
  • The plugin hero is unchanged; replacing it is a later step, taken once the comparison is reviewed

Blocked by

  • WORK-663
  • WORK-664
  • WORK-654: actions and the hero fixture (v0.43.0)
  • WORK-656: the eyebrow pill in the sections dimension (v0.43.0)

References

  • SPEC-160: D7.
  • SPEC-145: D31–D34.

Resolution

Completed: 2026-10-29

Branch: claude/milestone-v0-44-0-ism7ni

What was done

  • packages/runes/test/fixtures/composed/hero.md: the complete composed hero. One section (split, cover, header, {% actions %}), forwarding align, media-position, media-ratio, valign, collapse, content-place, height and aspect, writing media="hero" and guest-fit="bleed", with defaults: { width: full, elevation: flush, prominence: display }. A body field (heading|paragraph) keeps a second leading heading (BUG-047).
  • packages/content/test/composed-marketing.ts + composed-hero.test.ts: the composition beside the plugin for every gallery cell (default, align left/right, media bottom/top/end, cover, cover placed and sized). The test asserts the same content in the same roles, the split and cover on the section, and every structural difference.
  • actions.css: Lumina sets the size custom properties on [data-prominence="display"|"prominent"] (today's hero size); the skeleton clears them at every other rune root except actions. packages/lumina/test/actions-prominence.test.ts holds the shape. In a browser: a raised card with actions inside a display section keeps default buttons (10px 24px / 14px), and the section's own row is large (11.2px 28px / 16px).
  • Shared CSS that hero.css did and the composition needs: section's align justifies its own actions row; a cover section is a band (content-driven height with min-height: clamp(22rem, 55vh, 40rem), mid-band overlay and even scrim when unplaced, no media radius when flush).
  • Fixes found on the way:
    • Lumina's .rf-section__preamble { margin: 0 } cancelled the skeleton's centring (now margin-block).
    • media-position="end" put a media-first rune's content on row 2 (grid-auto-flow: dense in layouts/split.css).
    • composedRuneConfig made a forwarded enum attribute a root modifier: data-media-position="cover" on the wrapper laid it out as a 3:4 cover well. A forwarded attribute is no longer a modifier. The realm, faction and character comparisons were updated: the split is on their section, not their root.
  • Docs: site/content/runes/section.md (cover band, align and actions), site/content/runes/actions.md (size from prominence).

Differences from the plugin hero (Lumina, light and dark; the same in both modes)

  • Structure: a block-less div[data-rune="hero"] around a section, so no rf-hero* classes; a theme targeting them needs the migration note.
  • Headline: section's display-prominence size, slightly smaller than the hero's 3.25rem rest, with no gradient text fill. The blurb is section's (base size, muted), not the hero's text-xl.
  • Band padding: the hero's 7rem / 2rem padding is gone; spacing is section's rhythm under flush elevation. At page level, width="full" gets the layout's gutters; a gallery cell has none.
  • Cover: same band height and centred overlay. height uses section's scale (12/18/26/34rem) rather than the hero's (20/28/36/44rem).
  • align: start | center | end (section's vocabulary) rather than left | center | right.
  • width="wide": not anchored to the text measure (contentMeasure is the plugin's config; section declares none).
  • Buttons: the same size, from the prominence rule rather than hero.css.

Notes

  • The plugin hero is unchanged. Replacing it waits on this comparison being reviewed.