/** * 공용 커스텀 스크롤바 클래스. * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며, * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다. * * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4). * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다. */ /** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */ export declare const SCROLLBAR_CLASS: string; /** * hidden: 스크롤은 그대로 되지만 스크롤바만 보이지 않게 한다. * SCROLLBAR_CLASS 대신 쓴다(같이 쓰면 어느 한쪽이 무의미하다). * * 표준 속성과 webkit 유사요소를 둘 다 무조건 건다 — 숨기기만 하므로 * SCROLLBAR_CLASS 와 달리 둘이 충돌하지 않는다. Chrome 121+ 는 scrollbar-width:none 으로, * scrollbar-width 를 모르는 구형 WebKit(Safari)은 ::-webkit-scrollbar 의 display:none 으로 숨는다. * theme.css 의 전역 base 스크롤바 규칙은 이 유틸(utilities 레이어)이 덮는다. */ export declare const SCROLLBAR_HIDDEN_CLASS = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"; /** * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다. * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다. * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다. * * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다. */ export declare const SCROLLBAR_TRACK_BG_CLASS: string; /** * background(white): 트랙을 흰색으로 채운다. * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다. */ export declare const SCROLLBAR_TRACK_BG_WHITE_CLASS: string; /** * bordered: 스크롤바와 콘텐츠 사이 1px 구분선. * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다. * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을 * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px). * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다. */ export declare const SCROLLBAR_TRACK_BORDER_CLASS: string;