Featuring Design System
ChangelogComponents

0.1.21

disabled 상태에서 hover/active/focus의 시각 변화가 leak되던 문제를 모든 sprinkles와 직접 셀렉터에서 가드합니다.

disabled 상태에서 hover/active/focus 시 색·배경이 잠깐씩 적용되던 문제를 해소합니다. 0.1.18에서 [disabled] { pointer-events: none }을 normalize에서 제거한 뒤로 disabled 컨트롤에 Tooltip을 붙일 수 있게 되었지만, 그 부수효과로 hover/active 이벤트가 발화하면서 컴포넌트별로 시각 누락이 보였습니다. 이번 릴리즈에서 sprinkles 시스템 전반과 개별 컴포넌트의 직접 셀렉터에 일관 가드를 박았습니다.

가드 패턴

hover: '&:not(:disabled, [data-disabled]):hover'
active: '&:not(:disabled, [data-disabled]):active'
focus: '&:not(:disabled, [data-disabled]):focus-visible'
disabled: '&:is(:disabled, [data-disabled])'

:disabled(native form 요소)와 [data-disabled](Base UI 컨벤션)를 모두 매칭해 어느 경로로 disabled 상태가 들어와도 동일하게 차단합니다.

영향 범위

  • $css 시스템 (rainbow-sprinkles) — Box / Flex / HStack / VStack / Typo / Center / Grid$css를 받는 모든 컴포넌트
  • 레거시 sprinkles (Core* 컴포넌트 전반)
  • 자체 sprinkles 시스템 (CoreButton, CoreTag) — aria-disabled도 함께 매칭
  • 직접 셀렉터 (CoreLink, CoreSideNavigation, CoreTable, CoreTextArea, CoreTabs)
  • CoreTabs의 hover/active 인디케이터(밑줄)도 동일하게 가드

<fieldset disabled> 전파까지 커버

<fieldset disabled> 안의 form 컨트롤은 HTML 스펙상 자동으로 disabled 상태가 되며 :disabled로 매칭됩니다. Base UI 래퍼를 거치지 않아 [data-disabled]가 없어도, 이번 변경으로 :disabled 가드가 함께 동작해 hover 색이 새지 않습니다.

마이그레이션

마이그레이션이 필요 없습니다. 디자인 시스템을 정상적으로 사용하던 모든 경로의 동작은 동일하고, 그 동안 leak되던 시각 변화만 사라집니다.