Interactive State Dimension

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

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