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되던 시각 변화만 사라집니다.
0.1.22
CoreTag gray 기본 fill 색상을 더 밝은 회색 토큰으로 조정합니다.
0.1.20
$css 프롭의 staticProperties enum을 MDN 38개 페이지로 재검증해 확장합니다. display(list-item/flow-root/table*), overflow(clip), align/justify(start/end/anchor-center), textWrap, overscrollBehavior, touchAction, contain, contentVisibility 등 모던 CSS 속성을 strict union 타입으로 추가합니다.