WORK-474
ID:WORK-474Status:done

feature adopts layout="carousel" (first Phase B adopter)

Add carousel to feature's layout matches and map its feature-item collection onto the shared carousel contract — the first proof that adoption is config + contract + CSS with zero new behavior code. Per SPEC-100 Phase B.5.

Priority:mediumComplexity:simpleMilestone:v0.26.0Source:SPEC-100
claude/spec-100-carousel-layout-mode View source

Criteria completion

Criteria completion: 3 of 3 (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 6
Branches 3
claude/spec-100-carousel-layout-mode current done
main donechangeset-release/main doneclaude/v0.26.0-milestone-2vuxi9 ready
History 4
  1. df29856
    Created (done)by bjornolofandersson
  2. 5493fae
    Content editedby Claude
    plan: mark WORK-473/474 done
  3. 8b03e16
    Content editedby Claude
    SPEC-100: define collapse-to dial; fix carousel scope as all-viewport
  4. 17d2678
    Content editedby Claude
    v0.26.0: accept ADR-018 + SPEC-099/100/108, break down into 15 work item

Scope

  • Add carousel (from the canonical const) to feature's layout matches — trivial now that the axis + data-layout emission exist (WORK-467).
  • Map feature's item container/items onto the shared contract ([data-name="items"] / [data-name="item"]) so the generalised behavior binds with no per-rune behavior code.
  • Add CSS for the carousel track on feature; wire the collapse-to="carousel" option (WORK-473) so layout="grid" collapse-to="carousel" gives grid-desktop / swipe-row-mobile.
  • layout="carousel" is an all-viewport carousel (graceful degradation); an explicit desktop carousel shows the JS nav affordances (via the shared behavior).

Acceptance Criteria

  • feature accepts layout="carousel", emits the shared contract, and styles the track.
  • An explicit desktop carousel shows the JS nav affordances; no new behavior code was added for feature.
  • CSS-coverage passes for the new feature [data-layout="carousel"] selectors.

Dependencies

  • WORK-467 — feature's layout axis + emission.
  • WORK-472 — the block-agnostic behavior feature binds to.
  • WORK-473 — the collapse-to-carousel option being wired.

References

  • Spec: SPEC-100 Phase B.5. plugins/marketing/src/tags/feature.ts, plugins/marketing/src/config.ts (Feature).

Resolution

Completed: 2026-06-25

Branch: claude/spec-100-carousel-layout-mode

What was done

  • plugins/marketing/src/tags/feature.ts — layout matches now include LAYOUT.carousel.
  • plugins/marketing/src/config.ts — autoLabel marks the feature-items dl as data-name="items" (the shared carousel track token; renamed from definitions).
  • packages/skeleton/styles/runes/feature.css + packages/lumina/styles/runes/feature.css — .rf-feature__definitions → .rf-feature__items throughout.
  • Shared carousel CSS/behavior (WORK-472) drive feature's carousel with zero feature-specific behavior code; slides are the dl's children; default slide width via --rf-carousel-slide.
  • plugins/marketing/test/feature.test.ts — carousel acceptance + collapse-to + slides-as-dl-children. Contracts regenerated.

Notes

  • Track marker reuses data-name="items" per the maintainer's decision (feature renamed its container rather than introducing a dedicated attribute).
  • The dispatch (WORK-471) mounts the shared carouselBehavior on feature's [data-layout="carousel"] host, so the desktop JS nav appears with no per-rune code. Follow-on (noted in WORK-471): the adapter behavior-bundle heuristic should also count [data-layout] layout-mode behaviors so a carousel-only page ships the bundle.