sellmate-design-system-react 9.0.0-beta.6 → 9.0.0-beta.7

package/dist/index.js

@@ -5,7 +5,7 @@ import { forwardRef, useState, useRef, useEffect, createContext, useContext, use
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
-import * as RPopover9 from '@radix-ui/react-popover';
+import * as RPopover10 from '@radix-ui/react-popover';
 import { createRoot } from 'react-dom/client';
 import * as RTooltip from '@radix-ui/react-tooltip';
 import * as RDropdown from '@radix-ui/react-dropdown-menu';
@@ -3417,7 +3417,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
           !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
           hasSupportingText && supportingTextPosition === "bottom" ? dense ? "min-h-[52px]" : "min-h-[60px]" : dense ? "h-[32px]" : "h-[40px]",
           paddingYClass,
-          // 항목 사이 구분선은 리스트가 그린다 — SDraggableList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
@@ -3625,7 +3625,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children, useGap = false, usePadding = false, separator = false, ...rest }, ref) {
+var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3633,7 +3633,7 @@ var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children,
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
-        separator && "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
+        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -4005,7 +4005,7 @@ var SExpansionItem = /* @__PURE__ */ forwardRef(
         ref,
         className: cn(
           "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
-          // 항목 사이 구분선은 리스트가 그린다 — SList/SExpansionList 의 separator (SList.tsx)
+          // 항목 사이 구분선은 리스트가 그린다.
           // 보더 색은 시맨틱 토큰(border-default → hover strong → 펼침 accentLight)을 쓴다.
           // TODO: expansionItem/bordered/radius 토큰 생성 후 rounded 고정값도 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-border-default hover:border-border-strong [&:has(>button:hover)]:border-border-strong",
@@ -4557,8 +4557,8 @@ function SGhostButton({
     }
   );
   if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4570,8 +4570,8 @@ function SGhostButton({
         children: btn
       }
     ) }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-      RPopover9.Content,
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover10.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4585,6 +4585,18 @@ function SGhostButton({
     ) })
   ] });
 }
+var TREE_LABEL_TYPOGRAPHY = {
+  sm: {
+    default: "typo-body-sm-medium",
+    selected: "typo-body-sm-bold",
+    rowHeight: "h-[28px]"
+  },
+  md: {
+    default: "typo-body-md-medium",
+    selected: "typo-body-md-bold",
+    rowHeight: "h-[32px]"
+  }
+};
 function collectIds(nodes) {
   return nodes.flatMap((node) => [node.id, ...collectIds(node.children ?? [])]);
 }
@@ -4617,6 +4629,7 @@ function getSelectionState(node, selectedSet, cascadeSelection) {
 }
 function TreeConnector({
   guideline,
+  size,
   depth,
   hasChildren,
   isLast,
@@ -4624,6 +4637,8 @@ function TreeConnector({
 }) {
   if (depth <= 1) return null;
   const ancestorConnectors = ancestorLast.slice(0, -1);
+  const branchTop = size === "sm" ? "top-[13px]" : "top-[15px]";
+  const nodeHeight = size === "sm" ? "h-[15px]" : "h-[17px]";
   return /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "flex self-stretch", children: [
     ancestorConnectors.map((last, index) => /* @__PURE__ */ jsx(
       "span",
@@ -4637,13 +4652,22 @@ function TreeConnector({
     /* @__PURE__ */ jsxs("span", { className: "relative block w-[20px] shrink-0", children: [
       guideline && !isLast && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)" }),
       guideline && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-[6px] top-[-1px] h-[17px] w-px bg-(--cmp-tree-connector-line-color)" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute left-[6px] top-[-1px] w-px bg-(--cmp-tree-connector-line-color)",
+              nodeHeight
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(
           "span",
           {
             "data-tree-connector-branch": hasChildren ? "parent" : "leaf",
             className: cn(
-              "absolute left-[6px] top-[15px] h-px bg-(--cmp-tree-connector-line-color)",
+              "absolute left-[6px] h-px bg-(--cmp-tree-connector-line-color)",
+              branchTop,
               hasChildren ? "w-[14px]" : "w-[calc(14px+var(--cmp-tree-item-arrow-icon))]"
             )
           }
@@ -4656,9 +4680,12 @@ function STreeAllItem({
   selected,
   indeterminate,
   border,
+  size,
   onSelect
 }) {
   const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4667,17 +4694,18 @@ function STreeAllItem({
       "aria-selected": selected,
       onClick: onSelect,
       className: cn(
-        "group/tree-item box-border flex h-[32px] w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
+        "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
+        typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)"
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "box-border flex h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
         /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
         /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "block min-w-0 flex-1 truncate text-[14px] leading-[24px]",
-              selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)"
+              "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+              labelTypo
             ),
             children: "\uC804\uCCB4"
           }
@@ -4697,6 +4725,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   border = true,
   indeterminate = false,
   selectable = true,
+  size = "sm",
   leading,
   trailing,
   onToggle,
@@ -4708,6 +4737,7 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   const renderState = {
     node,
     depth,
+    size,
     expanded,
     selected,
     indeterminate,
@@ -4717,6 +4747,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
   const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
   const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
   const checkboxValue = indeterminate ? null : selected;
+  const typography = TREE_LABEL_TYPOGRAPHY[size];
+  const labelTypo = selected || indeterminate ? typography.selected : typography.default;
   const handleSelect = (event) => {
     if (node.disabled) return;
     onTreeSelect?.(node, event);
@@ -4736,7 +4768,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
       "aria-disabled": node.disabled || void 0,
       onClick: handleRowClick,
       className: cn(
-        "group/tree-item box-border flex h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)",
         !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
         node.disabled && "cursor-not-allowed opacity-60",
@@ -4749,13 +4782,14 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
           TreeConnector,
           {
             guideline,
+            size,
             depth,
             hasChildren,
             isLast,
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "box-border flex h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
           hasChildren ? /* @__PURE__ */ jsx(
             SGhostButton,
             {
@@ -4797,8 +4831,8 @@ var STreeItemImpl = /* @__PURE__ */ forwardRef(function STreeItem({
                 if (!node.disabled && selectable) onTreeSelect?.(node, event);
               },
               className: cn(
-                "block min-w-0 flex-1 truncate text-[14px] leading-[24px]",
-                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)",
+                "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
+                labelTypo,
                 node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
               ),
               children: node.label
@@ -4818,6 +4852,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  size = "sm",
   useAll = false,
   cascadeSelection = true,
   guideline = true,
@@ -4891,6 +4926,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
           selected,
           indeterminate,
           selectable,
+          size,
           guideline,
           border,
           leading,
@@ -4926,6 +4962,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
             selected: allSelected,
             indeterminate: allIndeterminate,
             border,
+            size,
             onSelect: updateAllSelected
           }
         ),
@@ -5110,14 +5147,14 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 useClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsx(RPopover9.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
         "span",
         {
           className: "inline-flex",
@@ -5128,9 +5165,9 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+    ) : /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: placement,
         sideOffset,
@@ -5164,7 +5201,7 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(RPopover9.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover10.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6451,10 +6488,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -6520,7 +6557,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(RPopover9.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover10.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -6551,7 +6588,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxs(
-    RPopover9.Root,
+    RPopover10.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -6559,9 +6596,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsx(RPopover9.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: placement,
             align,
@@ -6759,10 +6796,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover9.Content,
+  return /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover10.Content,
       {
         side: "bottom",
         align: "start",
@@ -8843,10 +8880,10 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
           }
         ),
         header === "fix" && menuResizeHandle,
-        /* @__PURE__ */ jsxs(RPopover9.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsx(RPopover9.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover9.Content,
+        /* @__PURE__ */ jsxs(RPopover10.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover10.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -8917,13 +8954,155 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
 );
 var MIN_CONTENT_WIDTH = `calc(var(${SLAYOUT_MIN_WIDTH_VAR}, 0px) - 100cqw + 100%)`;
 var BACKGROUND_CLASS = {
-  frame: `bg-[var(--sys-color-bg-frame)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
-  neutral: `bg-[var(--sys-color-bg-neutralLight)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
-  screen: `bg-[var(--sys-color-bg-screen)] ${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
+  frame: "bg-[var(--sys-color-bg-frame)]",
+  neutral: "bg-[var(--sys-color-bg-neutralLight)]",
+  screen: "bg-[var(--sys-color-bg-screen)]"
+};
+var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
+  frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
+  neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
+  screen: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`
 };
+var SCROLLBAR_SIZE = 12;
+var SCROLLBAR_MIN_THUMB_SIZE = 32;
+var getMetrics = (viewportSize, contentSize, scrollOffset) => {
+  if (contentSize <= viewportSize) {
+    return { visible: false, thumbSize: 0, thumbOffset: 0 };
+  }
+  const trackSize = viewportSize;
+  const maxScrollOffset = contentSize - viewportSize;
+  const thumbSize = Math.min(
+    trackSize,
+    Math.max(SCROLLBAR_MIN_THUMB_SIZE, viewportSize / contentSize * trackSize)
+  );
+  const maxThumbOffset = trackSize - thumbSize;
+  const thumbOffset = maxScrollOffset > 0 ? scrollOffset / maxScrollOffset * maxThumbOffset : 0;
+  return { visible: true, thumbSize, thumbOffset };
+};
+var setForwardedRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) ref.current = node;
+};
+function SPageOverlayScrollbars({ scrollRef }) {
+  const [vertical, setVertical] = useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const [horizontal, setHorizontal] = useState({
+    visible: false,
+    thumbSize: 0,
+    thumbOffset: 0
+  });
+  const update = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setVertical(getMetrics(el.clientHeight, el.scrollHeight, el.scrollTop));
+    setHorizontal(getMetrics(el.clientWidth, el.scrollWidth, el.scrollLeft));
+  }, [scrollRef]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(el);
+    if (el.firstElementChild) observer?.observe(el.firstElementChild);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [scrollRef, update]);
+  const dragVertical = (startEvent) => {
+    const el = scrollRef.current;
+    if (!el || !vertical.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    const startPointer = startEvent.clientY;
+    const startScrollTop = el.scrollTop;
+    const maxThumbOffset = el.clientHeight - vertical.thumbSize;
+    const maxScrollTop = el.scrollHeight - el.clientHeight;
+    if (maxThumbOffset <= 0 || maxScrollTop <= 0) return;
+    const onPointerMove = (moveEvent) => {
+      const delta = moveEvent.clientY - startPointer;
+      el.scrollTop = startScrollTop + delta / maxThumbOffset * maxScrollTop;
+    };
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  const dragHorizontal = (startEvent) => {
+    const el = scrollRef.current;
+    if (!el || !horizontal.visible) return;
+    startEvent.preventDefault();
+    startEvent.currentTarget.setPointerCapture(startEvent.pointerId);
+    const startPointer = startEvent.clientX;
+    const startScrollLeft = el.scrollLeft;
+    const maxThumbOffset = el.clientWidth - horizontal.thumbSize;
+    const maxScrollLeft = el.scrollWidth - el.clientWidth;
+    if (maxThumbOffset <= 0 || maxScrollLeft <= 0) return;
+    const onPointerMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startPointer;
+      el.scrollLeft = startScrollLeft + delta / maxThumbOffset * maxScrollLeft;
+    };
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    vertical.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-0 right-0 top-0 z-[1] w-[12px]",
+        style: { bottom: horizontal.visible ? SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute right-[2px] w-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              height: vertical.thumbSize,
+              transform: `translateY(${vertical.thumbOffset}px)`
+            },
+            onPointerDown: dragVertical
+          }
+        )
+      }
+    ),
+    horizontal.visible && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-[12px]",
+        style: { right: vertical.visible ? SCROLLBAR_SIZE : 0 },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pointer-events-auto absolute bottom-[2px] h-[8px] cursor-default touch-none rounded-full bg-[var(--color-grey-45)]",
+            style: {
+              width: horizontal.thumbSize,
+              transform: `translateX(${horizontal.thumbOffset}px)`
+            },
+            onPointerDown: dragHorizontal
+          }
+        )
+      }
+    )
+  ] });
+}
 var SPage = /* @__PURE__ */ forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = true,
+  overlayScrollbar = false,
   contentHeight = "auto",
   header,
   className,
@@ -8934,6 +9113,14 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
 }, ref) {
   const layout = useContext(SLayoutContext);
   const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
+  const scrollRef = useRef(null);
+  const setMainRef = useCallback(
+    (node) => {
+      scrollRef.current = node;
+      setForwardedRef(ref, node);
+    },
+    [ref]
+  );
   const [scrolled, setScrolled] = useState(false);
   const handleScroll = (e) => {
     onScroll?.(e);
@@ -8943,21 +9130,54 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
   const main = /* @__PURE__ */ jsx(
     "main",
     {
-      ref,
+      ref: setMainRef,
       className: cn(
         "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        overlayScrollbar && "h-full",
         !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
-        SCROLLBAR_CLASS,
+        overlayScrollbar ? SCROLLBAR_HIDDEN_CLASS : `${SCROLLBAR_CLASS} ${NATIVE_SCROLLBAR_BACKGROUND_CLASS[background]}`,
         BACKGROUND_CLASS[background],
         className
       ),
-      style: header == null ? { ...gridStyle, ...style } : style,
+      style: header == null && !overlayScrollbar ? { ...gridStyle, ...style } : style,
       onScroll: handleScroll,
       ...rest,
       children: /* @__PURE__ */ jsx("div", { className: cn(fill && "h-full"), style: { minWidth: MIN_CONTENT_WIDTH }, children })
     }
   );
-  if (header == null) return main;
+  if (!overlayScrollbar) {
+    if (header == null) return main;
+    return (
+      // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("flex min-h-0 min-w-0 flex-1 flex-col", BACKGROUND_CLASS[background]),
+          style: gridStyle,
+          children: [
+            /* @__PURE__ */ jsx(SPageHeader, { ...header, scrolled }),
+            main
+          ]
+        }
+      )
+    );
+  }
+  if (header == null) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden",
+          BACKGROUND_CLASS[background]
+        ),
+        style: gridStyle,
+        children: [
+          main,
+          /* @__PURE__ */ jsx(SPageOverlayScrollbars, { scrollRef })
+        ]
+      }
+    );
+  }
   return (
     // fix 가 아닌 헤더는 자기 배경이 투명이라(SPageHeader.tsx) 이 배경이 그대로 비친다 —
     // 그래서 SPage 의 background 를 main 뿐 아니라 여기에도 칠한다(스크롤바 관련 클래스는
@@ -8969,7 +9189,10 @@ var SPage = /* @__PURE__ */ forwardRef(function SPage2({
         style: gridStyle,
         children: [
           /* @__PURE__ */ jsx(SPageHeader, { ...header, scrolled }),
-          main
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [
+            main,
+            /* @__PURE__ */ jsx(SPageOverlayScrollbars, { scrollRef })
+          ] })
         ]
       }
     )
@@ -11276,6 +11499,67 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ total, selected
 
 // src/lib/autofill.ts
 var AUTOFILL_RESET_CLASS = "autofill:[-webkit-text-fill-color:currentColor] autofill:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] autofill:[transition:background-color_5000s_ease-in-out_0s] [&:-webkit-autofill]:[-webkit-text-fill-color:currentColor] [&:-webkit-autofill]:[box-shadow:0_0_0_1000px_var(--sys-color-field-bg-default)_inset] [&:-webkit-autofill]:[transition:background-color_5000s_ease-in-out_0s]";
+var HIDE_DELAY_MS2 = 100;
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+function useTruncatedValueTooltip({
+  enabled,
+  text
+}) {
+  const portalContainer = usePortalContainer();
+  const elRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const hideTimer = useRef(void 0);
+  const cancelHide = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  }, []);
+  const startHide = useCallback(() => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS2);
+  }, [cancelHide]);
+  const onMouseEnter = useCallback(() => {
+    cancelHide();
+    const el = elRef.current;
+    if (!el) return;
+    if (el.scrollWidth - el.clientWidth > 1) setOpen(true);
+  }, [cancelHide]);
+  useEffect(() => {
+    if (!enabled || text === "") setOpen(false);
+  }, [enabled, text]);
+  useEffect(() => cancelHide, [cancelHide]);
+  const active = enabled && text !== "";
+  return {
+    valueRef: elRef,
+    onMouseEnter: active ? onMouseEnter : cancelHide,
+    onMouseLeave: active ? startHide : cancelHide,
+    tooltip: active ? /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RPopover10.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        RPopover10.Content,
+        {
+          side: "top",
+          sideOffset: 4,
+          "aria-hidden": true,
+          className: cn("z-50", FLOATING_SLIDE_ANIM),
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onMouseEnter: cancelHide,
+          onMouseLeave: startHide,
+          children: /* @__PURE__ */ jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+        }
+      ) })
+    ] }) : null
+  };
+}
 var FONT = {
   sm: { fontSize: 12, lineHeight: 20, paddingX: "var(--cmp-textinput-sm-paddingX)" },
   md: { fontSize: 14, lineHeight: 24, paddingX: "var(--cmp-textinput-md-paddingX)" }
@@ -11333,6 +11617,10 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+  const valueTooltip = useTruncatedValueTooltip({
+    enabled: readOnly && !disabled,
+    text: String(value ?? "")
+  });
   return /* @__PURE__ */ jsx(
     SField,
     {
@@ -11373,7 +11661,7 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
             /* @__PURE__ */ jsx(
               "input",
               {
-                ref,
+                ref: mergeRefs(ref, valueTooltip.valueRef),
                 type: inputType,
                 value: value ?? "",
                 disabled,
@@ -11398,9 +11686,18 @@ var SInput = /* @__PURE__ */ forwardRef(function SInput2({
                   color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
                   ...inputStyle
                 },
-                ...rest
+                ...rest,
+                onMouseEnter: (e) => {
+                  rest.onMouseEnter?.(e);
+                  valueTooltip.onMouseEnter();
+                },
+                onMouseLeave: (e) => {
+                  rest.onMouseLeave?.(e);
+                  valueTooltip.onMouseLeave();
+                }
               }
             ),
+            valueTooltip.tooltip,
             suffix != null && /* @__PURE__ */ jsx("span", { className: "flex flex-shrink-0 items-center", children: suffix }),
             clearable && hasValue && !disabled && !readOnly && /* @__PURE__ */ jsx(
               SGhostButton,
@@ -11634,8 +11931,10 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
   const [display, setDisplay] = useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = useState("");
   const innerRef = useRef(null);
+  const valueTooltip = useTruncatedValueTooltip({ enabled: readOnly && !disabled, text: display });
   const setRefs2 = (el) => {
     innerRef.current = el;
+    valueTooltip.valueRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
@@ -11849,9 +12148,12 @@ var SNumberInput = /* @__PURE__ */ forwardRef(function SNumberInput2({
                   textAlign: useButton ? "center" : "right",
                   color: disabled ? "var(--cmp-numberInput-text-disabled)" : "var(--cmp-numberInput-text-default)",
                   ...inputStyle
-                }
+                },
+                onMouseEnter: valueTooltip.onMouseEnter,
+                onMouseLeave: valueTooltip.onMouseLeave
               }
             ),
+            valueTooltip.tooltip,
             inputSuffix !== "" && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", style: { color: affixColor }, children: inputSuffix }),
             useButton && stepper("inc")
           ]
@@ -12592,8 +12894,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -12629,8 +12931,8 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: mode === "date" ? "start" : "center",
@@ -13096,7 +13398,7 @@ function SDateRangePicker({
       className,
       style,
       children: /* @__PURE__ */ jsxs(
-        RPopover9.Root,
+        RPopover10.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -13105,7 +13407,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -13146,8 +13448,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-              RPopover9.Content,
+            /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+              RPopover10.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -14673,8 +14975,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Divider, { inset: true }),
-            hasAddButton && /* @__PURE__ */ jsxs(RPopover9.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            hasAddButton && /* @__PURE__ */ jsxs(RPopover10.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
@@ -14699,8 +15001,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-                RPopover9.Content,
+              /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+                RPopover10.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -14740,17 +15042,17 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(RPopover9.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxs(RPopover10.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsx(
-            RPopover9.Anchor,
+            RPopover10.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover9.Content,
+          /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover10.Content,
             {
               side: "bottom",
               align: "start",
@@ -15290,8 +15592,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxs(RPopover9.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(RPopover10.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -15300,8 +15602,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",
@@ -16112,6 +16414,10 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
     });
     const resolvedError = error || ruleError !== "";
     const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
+    const valueTooltip = useTruncatedValueTooltip({
+      enabled: readOnly && !disabled,
+      text: String(value ?? "")
+    });
     return /* @__PURE__ */ jsx(
       SField,
       {
@@ -16148,7 +16454,7 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  ref,
+                  ref: mergeRefs(ref, valueTooltip.valueRef),
                   name,
                   type: "text",
                   value: value ?? "",
@@ -16174,9 +16480,12 @@ var SBarcodeInput = /* @__PURE__ */ forwardRef(
                     fontSize: f.fontSize,
                     color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--cmp-textinput-text-default)",
                     ...inputStyle
-                  }
+                  },
+                  onMouseEnter: valueTooltip.onMouseEnter,
+                  onMouseLeave: valueTooltip.onMouseLeave
                 }
               ),
+              valueTooltip.tooltip,
               suffix,
               clearable && hasValue && !disabled && /* @__PURE__ */ jsx(
                 SGhostButton,
@@ -16556,8 +16865,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -16617,8 +16926,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",
@@ -17023,8 +17332,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover9.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover10.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover10.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -17084,8 +17393,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover9.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover9.Content,
+        /* @__PURE__ */ jsx(RPopover10.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover10.Content,
           {
             side: "bottom",
             align: "start",