WORK-374
ID:WORK-374Status:done

content-place 2-axis logical overlay anchor + orientation-adaptive auto

Add content-place, a 2-axis logical overlay anchor active only in cover mode, with an orientation-adaptive auto default.

Priority:mediumComplexity:moderateMilestone:v0.20.0Source:SPEC-089

Criteria completion

Criteria completion: 3 of 3 (100%) checked; history from Jun 9 to Jun 90%25%50%75%100%Jun 9Jun 9
Branches 2
History 4
  1. b2f2985
    • ☑ `content-place` is 2-axis logical (`start|center|end` × `start|center|end`), default `end`, mapping to `justify`/`align`; physical aliases may exist.
    • ☑ Active only in `cover` mode; a build warning otherwise.
    • ☑ `content-place="auto"` (the cover default) adapts to the rune's container-query orientation (portrait→block-end, landscape→inline-start); an explicit value pins it.
    by bjornolofandersson
  2. 32a3b52
    Content editedby Claude
    feat(cover): media-position=cover layout, content-place, default scrim +
  3. 9c0545a
    Created (ready)by bjornolofandersson
  4. 1da59d6
    Content editedby Claude
    plan: add v0.20.0 milestone and break down SPEC-086..091 into work items

Acceptance Criteria

  • content-place is 2-axis logical (start|center|end × start|center|end), default end, mapping to justify/align; physical aliases may exist.
  • Active only in cover mode; a build warning otherwise.
  • content-place="auto" (the cover default) adapts to the rune's container-query orientation (portrait→block-end, landscape→inline-start); an explicit value pins it.

Approach

Media zone is a container-query context (WORK-339). SPEC-089 §2.

References

  • SPEC-089

Resolution

Completed: 2026-06-09

Branch: claude/spec-089-cover-layout

What was done

  • packages/transform/src/engine.tscontent-place resolution: a 2-axis logical value (<block> <inline>) emits --cover-place-block / --cover-place-inline custom properties (mapping to align-self/justify-self). Active only in cover mode; warnContentPlaceOutsideCover warns once otherwise and emits no vars.
  • content-place="auto" emits no place vars, deferring to the container query in CSS.
  • packages/lumina/styles/dimensions/cover.css — orientation adaptation: an unset content-place behaves the same as explicit auto (the cover default) — portrait → block-end, landscape (@container (min-aspect-ratio: 1/1)) → inline-start. An explicit value sets the vars and pins regardless of orientation.
  • packages/runes/src/tags/card.ts + plugins/learning/src/tags/recipe.ts — declare the content-place attribute and emit it as a meta (the field channel) so the engine reads it; both already declared the modifier but weren't emitting the meta.

Notes

  • The media well is the container-query context; the overlay box adapts to the cover region's own aspect, not the viewport.