sellmate-design-system-react 1.1.1 → 1.2.0

package/dist/lib/scrollbar.cjs

@@ -3,9 +3,9 @@
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
 var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
-var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
-var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]";
-var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] [&::-webkit-scrollbar-corner]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
 
 exports.SCROLLBAR_CLASS = SCROLLBAR_CLASS;
 exports.SCROLLBAR_TRACK_BG_CLASS = SCROLLBAR_TRACK_BG_CLASS;

package/dist/lib/scrollbar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";;;AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAOK,IAAM,8BAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.cjs","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";;;AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAQK,IAAM,8BAAA,GACX;AAWK,IAAM,4BAAA,GACX","file":"scrollbar.cjs","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] ' +\n  '[&::-webkit-scrollbar-corner]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  // 세로·가로 스크롤바가 동시에 있으면 우측 하단에 스크롤바 코너가 생긴다. 코너에도 위/왼쪽\n  // 구분선을 줘 세로 트랙의 border-left, 가로 트랙의 border-top이 코너에서 끊기지 않고 이어지게 한다.\n  '[&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/lib/scrollbar.js

@@ -1,9 +1,9 @@
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
 var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
-var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
-var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]";
-var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] [&::-webkit-scrollbar-corner]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
 
 export { SCROLLBAR_CLASS, SCROLLBAR_TRACK_BG_CLASS, SCROLLBAR_TRACK_BG_WHITE_CLASS, SCROLLBAR_TRACK_BORDER_CLASS };
 //# sourceMappingURL=scrollbar.js.map

package/dist/lib/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAOK,IAAM,8BAAA,GACX;AAUK,IAAM,4BAAA,GACX","file":"scrollbar.js","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}
+{"version":3,"sources":["../../src/lib/scrollbar.ts"],"names":[],"mappings":";AAYA,IAAM,uBAAA,GACJ,qKAAA;AAIK,IAAM,eAAA,GACX,GAAG,uBAAuB,CAAA,gaAAA;AAarB,IAAM,wBAAA,GACX;AAQK,IAAM,8BAAA,GACX;AAWK,IAAM,4BAAA,GACX","file":"scrollbar.js","sourcesContent":["/**\n * 공용 커스텀 스크롤바 클래스.\n * Stencil의 styles/scrollbar.scss mixin과 짝을 이루는 단일 기준이며,\n * 스크롤 영역을 가진 컴포넌트는 DOM을 감싸지 않고 이 클래스를 직접 붙여 쓴다.\n *\n * SVG 스펙: 트랙 12px / 썸 8px(grey-45, 2px 인셋, radius 4).\n * 인셋은 투명 테두리 + padding-box 클립으로 만들어, 트랙을 칠하든 안 칠하든 썸이 8px로 보인다.\n */\n\n// Chrome 121+/WebKit는 scrollbar-width·scrollbar-color의 계산값이 초기값(auto)이 아니면\n// ::-webkit-scrollbar-* 를 통째로 무시한다(CSSWG 결정). 표준 속성을 무조건 켜면 아래 트랙/썸이\n// 전부 죽으므로, webkit 유사요소가 없는 브라우저(Firefox)에서만 적용한다.\nconst FIREFOX_SCROLLBAR_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] ' +\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]';\n\n/** 스크롤 영역 기본 스크롤바. overflow 클래스는 각 컴포넌트가 따로 지정한다. */\nexport const SCROLLBAR_CLASS =\n  `${FIREFOX_SCROLLBAR_CLASS} ` +\n  '[&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent ' +\n  '[&::-webkit-scrollbar-track]:bg-transparent ' +\n  '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding';\n\n/**\n * background: 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다.\n * Stencil 의 scrollbar-track-bg($color) mixin 과 짝이며, 이쪽은 기본값 grey-10 에 해당한다.\n * Tailwind 는 소스에 문자열로 박힌 클래스만 수집하므로 색을 인자로 받는 함수로 만들 수 없다.\n * 색이 필요하면 아래 WHITE 처럼 리터럴 상수를 하나 더 만든다.\n *\n * SCROLLBAR_CLASS 뒤에 와야 Firefox 폴백(scrollbar-color)을 덮어쓸 수 있다.\n */\nexport const SCROLLBAR_TRACK_BG_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] ' +\n  '[&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]';\n\n/**\n * background(white): 트랙을 흰색으로 채운다.\n * 페이지 표면이 grey-10(#F6F6F6)과 같은 색이라 기본 트랙 배경이 묻히는 자리에 쓴다 — SPage 의 neutral 이 그 경우다.\n */\nexport const SCROLLBAR_TRACK_BG_WHITE_CLASS =\n  'supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] ' +\n  '[&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] ' +\n  '[&::-webkit-scrollbar-corner]:bg-[var(--color-white)]';\n\n/**\n * bordered: 스크롤바와 콘텐츠 사이 1px 구분선.\n * 단축 속성으로 한 변만 지정한다 — border-solid는 네 변에 걸려 트랙에 기본 3px 테두리를 만든다.\n * 썸과 트랙은 형제 박스라 트랙의 구분선이 썸을 밀어주지 않는다. 구분선이 인셋 2px 중 1px을\n * 차지해 좌우 여백이 1px/2px로 어긋나므로, 썸 인셋을 같은 만큼 키워 2px/2px로 되돌린다(썸 8px → 7px).\n * Firefox는 thin 스크롤바를 이 수준으로 커스터마이즈할 수 없어 적용되지 않는다.\n */\nexport const SCROLLBAR_TRACK_BORDER_CLASS =\n  '[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  // 세로·가로 스크롤바가 동시에 있으면 우측 하단에 스크롤바 코너가 생긴다. 코너에도 위/왼쪽\n  // 구분선을 줘 세로 트랙의 border-left, 가로 트랙의 border-top이 코너에서 끊기지 않고 이어지게 한다.\n  '[&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] ' +\n  '[&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] ' +\n  '[&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]';\n"]}

package/dist/styles.css

@@ -14,6 +14,7 @@
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
@@ -698,9 +699,6 @@
   .z-10 {
     z-index: 10;
   }
-  .z-20 {
-    z-index: 20;
-  }
   .z-30 {
     z-index: 30;
   }
@@ -896,6 +894,9 @@
   .h-\[240px\] {
     height: 240px;
   }
+  .h-\[320px\] {
+    height: 320px;
+  }
   .h-\[364px\] {
     height: 364px;
   }
@@ -1118,12 +1119,18 @@
   .flex-auto {
     flex: auto;
   }
+  .flex-none {
+    flex: none;
+  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .grow {
+    flex-grow: 1;
+  }
   .table-fixed {
     table-layout: fixed;
   }
@@ -1712,6 +1719,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
   .border-grey-20 {
     border-color: var(--color-grey-20);
   }
@@ -3259,6 +3269,26 @@
       background-color: transparent;
     }
   }
+  .\[\&\:\:-webkit-scrollbar-corner\]\:bg-\[var\(--color-grey-10\)\] {
+    &::-webkit-scrollbar-corner {
+      background-color: var(--color-grey-10);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-corner\]\:bg-\[var\(--color-white\)\] {
+    &::-webkit-scrollbar-corner {
+      background-color: var(--color-white);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-corner\]\:\[border-left\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-corner {
+      border-left: 1px solid var(--sys-color-border-default);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-corner\]\:\[border-top\:1px_solid_var\(--sys-color-border-default\)\] {
+    &::-webkit-scrollbar-corner {
+      border-top: 1px solid var(--sys-color-border-default);
+    }
+  }
   .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full {
     &::-webkit-scrollbar-thumb {
       border-radius: var(--radius-full);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [