WORK-065
ID:WORK-065Status:done

Interactive State Dimension

Priority:mediumComplexity:moderateMilestone:v0.9.0Source:SPEC-025
changeset-release/main View source

Criteria completion

No incremental history — criteria tracking started on Apr 19.

Relationships

Implements 1
Branches 3
changeset-release/main current done
main doneclaude/file-naming-convention-LJdwR doneclaude/align-sidenav-styling-4MuxV done
History 7
  1. f2b3512
    Content editedby Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand
  2. 59ded4a
    Content editedby Claude
    Implement SPEC-037 plan package hardening: all 7 work items
  3. f262d7b
    Content editedby Claude
    Backfill source attributes on all 123 work items
  4. 2637549
    Content editedby Björn Andersson
    chore(plan): create v1.0.0 milestone, complete v0.9.0, fix acceptance cr
  5. 6e6ab3a
    Content editedby Claude
    feat(behaviors): add data-state dimension to interactive runes (WORK-065
  6. a129a9e
    Content editedby Claude
    Assign all new work items (WORK-051–068) to v0.9.0 milestone
  7. a333007
    Created (done)by Claude
    Add work items for SPEC-024 (Metadata) and SPEC-025 (Universal Theming)

Summary

Migrate interactive rune behaviours from class-based state toggling to data-state attribute toggling. Currently, the @refrakt-md/behaviors scripts toggle BEM modifier classes (e.g., rune-accordion__panel--open). After this change, they toggle data-state values (e.g., data-state="open"), enabling themes to style all interactive states generically.

Acceptance Criteria

  • Identity transform sets initial data-state attributes on interactive elements (e.g., first accordion panel data-state="open", rest data-state="closed")
  • Accordion behaviour script toggles data-state="open" / data-state="closed" on panels and data-state="active" / data-state="inactive" on triggers
  • Tabs behaviour script toggles data-state="active" / data-state="inactive" on tabs and panels
  • Details, Reveal, CodeGroup, Gallery, Juxtapose behaviours updated similarly
  • DataTable row selection uses data-state="selected"
  • Form disabled fields use data-state="disabled"
  • Existing BEM modifier classes for state are preserved during migration (dual-emit) for backward compatibility
  • Lumina CSS updated to target [data-state] selectors in addition to (or replacing) BEM state modifiers
  • Unit tests for all updated behaviours pass

Approach

  1. In the identity transform, set initial data-state attributes based on the rune's default state (first panel open, rest closed, etc.)
  2. Update each behaviour script in packages/behaviors/src/behaviors/ to toggle data-state instead of (or in addition to) BEM modifier classes
  3. Update Lumina CSS to target [data-state] selectors
  4. Dual-emit BEM modifiers during transition for themes that target them directly

References

  • SPEC-025 (Universal Theming Dimensions — Interactive State, Table 3: Interactive State Map)