WORK-469
ID:WORK-469Status:done

Feature grid collapse reflow + tests + docs

Reuse the existing collapse breakpoint to reflow a grid layout to a single column on narrow viewports (CSS-only), and finish the spec's test + docs surface. Per SPEC-099 §3.

Priority:mediumComplexity:moderateMilestone:v0.26.0Source:SPEC-099
claude/spec-099-feature-layout-axis View source

Criteria completion

Criteria completion: 4 of 4 (100%) checked; tracking started on Jun 25, no incremental history yet0%25%50%75%100%Jun 25Jul 11

Tracking started Jun 25 — check back for trends.

Relationships

Implements 1
Related 5
Branches 3
claude/spec-099-feature-layout-axis current done
main donechangeset-release/main doneclaude/v0.26.0-milestone-2vuxi9 ready
History 3
  1. 4216f8b
    Created (done)by bjornolofandersson
  2. 8528ebb
    Content editedby Claude
    plan: mark SPEC-099 work items (WORK-467/468/469) done
  3. 17d2678
    Content editedby Claude
    v0.26.0: accept ADR-018 + SPEC-099/100/108, break down into 15 work item

Scope

  • CSS-only reflow: below the existing collapse breakpoint a grid layout flattens to a single stacked column. No second layout-collapse attribute, no new meta, no behavior code.
  • Confirm the shared collapse hook: the grid media query must key off the same breakpoint as the media↔content split. Verify collapse is emitted as a CSS-targetable hook (a data-collapse/container-query handle); if it currently only feeds buildLayoutMetas for the media split, expose that hook here.
  • Tests: explicit layout overrides the media-derived default; the two axes are independent (media beside + layout="grid"); unchanged output when layout is unset.
  • Docs: document layout and the shared-collapse semantics on the feature rune page with an example; note the media-position-derived default.

Acceptance Criteria

  • Below the existing collapse breakpoint, a grid layout reflows to a single stacked column (CSS-only); no second collapse attribute is introduced.
  • The grid reflow keys off the same collapse hook as the media split (hook exposed if needed).
  • Tests cover: explicit layout overriding the media-derived default, independence of the two axes, and unchanged output when layout is unset.
  • feature rune docs document layout and the shared-collapse semantics with an example; the media-position-derived default is noted.

Dependencies

  • WORK-467 — needs the layout axis + emission.
  • WORK-468 — the grid CSS now lives on [data-layout]; the reflow extends it.

References

  • Spec: SPEC-099 §3 (collapse reuse).
  • packages/runes/src/tags/common.ts (collapse, buildLayoutMetas), packages/lumina/styles/runes/feature.css.

Resolution

Completed: 2026-06-25

Branch: claude/spec-099-feature-layout-axis

What was done

  • packages/skeleton/styles/runes/feature.css — a [data-layout="grid"] arrangement reflows to a single column below the collapse breakpoint, mirroring layouts/split.css (sm/md/lg + default sm; never opts out). CSS-only, no new attribute or behavior.
  • site/content/runes/marketing/feature.md — documented the layout axis (with a media-beside + grid example) and the shared-collapse semantics; noted the media-derived default.

Notes

  • collapse was already emitted as the CSS-targetable data-collapse hook (consumed by split.css), so no new emission was needed. The override / axis-independence / unchanged-when-unset tests landed with WORK-467.