WORK-065
ID:WORK-065Status:done

Interactive State Dimension

Priority:mediumComplexity:moderateMilestone:v0.9.0
claude/align-sidenav-styling-4MuxV View source

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

Implements 1
Branches 3
claude/align-sidenav-styling-4MuxV current done
main doneclaude/file-naming-convention-LJdwR donechangeset-release/main done
History 4
  1. 2637549
    Content editedby Björn Andersson
    chore(plan): create v1.0.0 milestone, complete v0.9.0, fix acceptance cr
  2. 6e6ab3a
    Content editedby Claude
    feat(behaviors): add data-state dimension to interactive runes (WORK-065
  3. a129a9e
    Content editedby Claude
    Assign all new work items (WORK-051–068) to v0.9.0 milestone
  4. 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)