sellmate-design-system-react 9.0.0-beta.104 → 9.0.0-beta.107

package/dist/index.cjs

@@ -3107,43 +3107,52 @@ var Icon_helpFill = (p) => {
     }
   );
 };
+var HELP_OUTLINE_VARIANTS = {
+  16: {
+    stroke: 1.25,
+    ring: "M14.6666 8.00004C14.6666 4.31814 11.6819 1.33337 7.99998 1.33337C4.31808 1.33337 1.33331 4.31814 1.33331 8.00004C1.33331 11.6819 4.31808 14.6667 7.99998 14.6667C11.6819 14.6667 14.6666 11.6819 14.6666 8.00004Z",
+    mark: "M5.99988 6.06806C5.99988 5.462 6.39988 4.24988 7.99988 4.24988C9.59988 4.24988 9.99988 5.462 9.99988 6.06806C9.99988 6.58025 9.71419 7.52529 8.65996 7.80576C8.30414 7.90042 7.99988 8.18472 7.99988 8.55291V9.24988",
+    dot: "M7.99986 10.4999C8.36805 10.4999 8.66652 10.7984 8.66652 11.1665C8.66652 11.5347 8.36805 11.8332 7.99986 11.8332C7.63167 11.8332 7.33319 11.5347 7.33319 11.1665C7.33319 10.7984 7.63167 10.4999 7.99986 10.4999Z"
+  },
+  20: {
+    stroke: 1.25,
+    ring: "M18.3334 9.99996C18.3334 5.39759 14.6024 1.66663 10 1.66663C5.39765 1.66663 1.66669 5.39759 1.66669 9.99996C1.66669 14.6023 5.39765 18.3333 10 18.3333C14.6024 18.3333 18.3334 14.6023 18.3334 9.99996Z",
+    mark: "M7.49988 7.58498C7.49988 6.82741 7.99988 5.31226 9.99988 5.31226C11.9999 5.31226 12.4999 6.82741 12.4999 7.58498C12.4999 8.22522 12.1428 9.40652 10.825 9.75711C10.3802 9.87543 9.99988 10.2308 9.99988 10.691V11.5623",
+    dot: "M9.99984 13.1248C10.4601 13.1248 10.8332 13.4979 10.8332 13.9581C10.8332 14.4183 10.4601 14.7914 9.99984 14.7914C9.5396 14.7914 9.1665 14.4183 9.1665 13.9581C9.1665 13.4979 9.5396 13.1248 9.99984 13.1248Z"
+  },
+  24: {
+    stroke: 1.5,
+    ring: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",
+    mark: "M8.99982 9.10203C8.99982 8.19294 9.59982 6.37476 11.9998 6.37476C14.3998 6.37476 14.9998 8.19294 14.9998 9.10203C14.9998 9.87031 14.5713 11.2879 12.9899 11.7086C12.4562 11.8506 11.9998 12.277 11.9998 12.8293V13.8748",
+    dot: "M11.9998 15.7498C12.5521 15.7498 12.9998 16.1975 12.9998 16.7498C12.9998 17.302 12.5521 17.7498 11.9998 17.7498C11.4475 17.7498 10.9998 17.302 10.9998 16.7498C10.9998 16.1975 11.4475 15.7498 11.9998 15.7498Z"
+  }
+};
+var helpOutlineGrid = (size) => {
+  const px = typeof size === "number" ? size : /^\d+(\.\d+)?(px)?$/.test(size) ? parseFloat(size) : void 0;
+  if (px === void 0) return 24;
+  if (px <= 16) return 16;
+  if (px <= 20) return 20;
+  return 24;
+};
 var Icon_helpOutline = (p) => {
   const { size = 24, strokeWidth, ...rest } = p;
-  const stroke = strokeProps(strokeWidth);
+  const grid = helpOutlineGrid(size);
+  const v = HELP_OUTLINE_VARIANTS[grid];
+  const native = Number(size) === grid || size === `${grid}px`;
+  const stroke = native ? { stroke: "currentColor", strokeWidth: v.stroke } : { ...strokeProps(strokeWidth), strokeWidth: strokeWidth ?? v.stroke };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       width: size,
       height: size,
-      viewBox: "0 0 24 24",
+      viewBox: `0 0 ${grid} ${grid}`,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M22.1998 11.9998C22.1998 6.3665 17.6331 1.7998 11.9998 1.7998C6.3665 1.7998 1.7998 6.3665 1.7998 11.9998C1.7998 17.6331 6.3665 22.1998 11.9998 22.1998C17.6331 22.1998 22.1998 17.6331 22.1998 11.9998Z",
-            strokeLinecap: "round",
-            ...stroke
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M8.99982 9.10203C8.99982 8.19294 9.59982 6.37476 11.9998 6.37476C14.3998 6.37476 14.9998 8.19294 14.9998 9.10203C14.9998 9.87031 14.5713 11.2879 12.9899 11.7086C12.4562 11.8506 11.9998 12.277 11.9998 12.8293V13.8748",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            ...stroke
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M11.9998 15.7498C12.5521 15.7498 12.9998 16.1975 12.9998 16.7498C12.9998 17.302 12.5521 17.7498 11.9998 17.7498C11.4475 17.7498 10.9998 17.302 10.9998 16.7498C10.9998 16.1975 11.4475 15.7498 11.9998 15.7498Z",
-            fill: "currentColor"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: v.ring, strokeLinecap: "round", ...stroke }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: v.mark, strokeLinecap: "round", strokeLinejoin: "round", ...stroke }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: v.dot, fill: "currentColor" })
       ]
     }
   );
@@ -5652,7 +5661,11 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
         // 레이블에 line-height 가 필요 없다. 오히려 line-height 를 주면 브라우저가
         // 폰트 ascent/descent 를 정수 px 로 반올림한 뒤 남는 half-leading 을 내림 처리해
         // 베이스라인이 최대 1px 위로 밀린다(xs 에서 특히 눈에 띈다).
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center leading-none", children: label }),
+        // truncate: 폭이 모자라면(`width` 지정, 부모의 max-w 등) 글자에 말줄임이 걸린다. text-overflow 는
+        // inline-flex 에서 듣지 않아 block 으로 둔다 — flex 아이템이라 폭·정렬은 그대로다.
+        // overflow:hidden 이 line-height:1 의 줄 상자 밖으로 나온 글자(디센더)를 자르지 않도록
+        // py 로 잘리는 영역만 넓히고 -my 로 레이아웃 높이는 되돌린다.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-my-[2px] block min-w-0 truncate py-[2px] leading-none", children: label }),
         icon && !iconLeft && iconNode
       ]
     }
@@ -13825,6 +13838,11 @@ var GNB_RAIL = {
 var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
+var GNB_PEEK_ENTER_DELAY_MS = 120;
+var GNB_PEEK_LEAVE_DELAY_MS = 250;
+var GNB_PEEK_EDGE_WIDTH = 12;
+var GNB_PEEK_Z_INDEX = 40;
+var GNB_PEEK_SHADOW = "0px 0px 64px 0px rgba(34,34,34,0.12), 0px 0px 24px 0px rgba(34,34,34,0.08)";
 var GNB_MENU_WIDTH = 214;
 var GNB_MENU_MIN_WIDTH = 200;
 var GNB_MENU_MAX_WIDTH = 240;
@@ -13921,6 +13939,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   ariaLabel = "global navigation",
   className,
   style,
+  onPointerEnter: onPointerEnterProp,
+  onPointerLeave: onPointerLeaveProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
   ...rest
 }, ref) {
   const layout = react.useContext(SLayoutContext);
@@ -14277,7 +14299,80 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     event.preventDefault();
     commitMenuWidth(next);
   };
-  const railFolded = folded && header === "fix";
+  const [peeking, setPeeking] = react.useState(false);
+  const peekingRef = react.useRef(false);
+  const peekHoverRef = react.useRef(false);
+  const peekFocusRef = react.useRef(false);
+  const peekTimerRef = react.useRef(null);
+  const clearPeekTimer = () => {
+    if (peekTimerRef.current === null) return;
+    clearTimeout(peekTimerRef.current);
+    peekTimerRef.current = null;
+  };
+  const commitPeek = (next) => {
+    peekingRef.current = next;
+    if (next) peekFocusRef.current = false;
+    setPeeking(next);
+  };
+  const schedulePeek = () => {
+    clearPeekTimer();
+    const want = peekHoverRef.current || peekingRef.current && peekFocusRef.current;
+    if (want === peekingRef.current) return;
+    peekTimerRef.current = setTimeout(
+      () => {
+        peekTimerRef.current = null;
+        commitPeek(want);
+      },
+      want ? GNB_PEEK_ENTER_DELAY_MS : GNB_PEEK_LEAVE_DELAY_MS
+    );
+  };
+  react.useEffect(() => {
+    if (folded) return;
+    clearPeekTimer();
+    peekHoverRef.current = false;
+    peekFocusRef.current = false;
+    commitPeek(false);
+  }, [folded]);
+  react.useEffect(() => clearPeekTimer, []);
+  const handlePeekEdgeEnter = (event) => {
+    if (!folded || event.pointerType === "touch") return;
+    peekHoverRef.current = true;
+    schedulePeek();
+  };
+  const handlePeekEnter = (event) => {
+    if (!peekingRef.current) return;
+    handlePeekEdgeEnter(event);
+  };
+  const handlePeekLeave = () => {
+    peekHoverRef.current = false;
+    schedulePeek();
+  };
+  const handlePeekFocus = (event) => {
+    peekFocusRef.current = event.target.matches(":focus-visible");
+    schedulePeek();
+  };
+  const handlePeekBlur = (event) => {
+    if (event.currentTarget.contains(event.relatedTarget)) return;
+    peekFocusRef.current = false;
+    schedulePeek();
+  };
+  const [peekClosing, setPeekClosing] = react.useState(false);
+  const wasPeekingRef = react.useRef(false);
+  react.useEffect(() => {
+    if (peeking) {
+      wasPeekingRef.current = true;
+      setPeekClosing(false);
+      return void 0;
+    }
+    if (!wasPeekingRef.current) return void 0;
+    wasPeekingRef.current = false;
+    setPeekClosing(true);
+    const timer = setTimeout(() => setPeekClosing(false), GNB_FOLD_MS);
+    return () => clearTimeout(timer);
+  }, [peeking]);
+  const peekOverlay = folded && peeking;
+  const visuallyFolded = folded && !peeking;
+  const railFolded = visuallyFolded && header === "fix";
   react.useEffect(() => {
     if (!railFolded || !launcherOpen) return;
     setLauncherOpen(false);
@@ -14324,14 +14419,50 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     { width: "100%", ...style }
   ) : {
     // fix 를 닫으면 48px 레일로 좁혀진다.
-    width: folded ? GNB_COMMON.foldWidth : bodyWidth,
+    width: visuallyFolded ? GNB_COMMON.foldWidth : bodyWidth,
+    // 호버 오버레이: 폭은 펼치되 음수 margin 으로 레이아웃 자리는 레일 폭 그대로 둔다 — 페이지가 밀리지 않는다.
+    // 폭과 margin 이 같은 길이·곡선으로 움직여 둘의 합(=페이지가 보는 자리)은 전환 내내 변하지 않는다.
+    marginRight: peekOverlay ? `calc(${GNB_COMMON.foldWidth} - ${bodyWidth}px)` : "0px",
+    // 페이지 위에 뜬다(접히는 전환이 끝날 때까지). 그 밖에는 주지 않는다 — 주면 펼친 GNB 에도 stacking context 가 새로 생긴다.
+    // (폴드 버튼으로 펴서 folded 가 풀리면 접히는 중이 아니다 — 펼친 GNB 에는 주지 않는다)
+    zIndex: peekOverlay || peekClosing && folded ? GNB_PEEK_Z_INDEX : void 0,
+    boxShadow: peekOverlay ? GNB_PEEK_SHADOW : "none",
     // 폭을 끄는 중에는 전환을 끈다 — 접힘용 전환이 걸려 있으면 컬럼이 손보다 늦게 따라온다.
-    transition: resizing ? "none" : `width ${GNB_FOLD_MS}ms ease-out`,
+    transition: resizing ? "none" : `width ${GNB_FOLD_MS}ms ease-out, margin-right ${GNB_FOLD_MS}ms ease-out, box-shadow ${GNB_FOLD_MS}ms ease-out`,
     backgroundColor: C.panelBg,
     borderRight: rightBorder,
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
+  const peekEdge = visuallyFolded ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-gnb-peek-edge": "",
+      className: "absolute inset-y-0 left-0 z-[2]",
+      style: { width: GNB_PEEK_EDGE_WIDTH },
+      onPointerEnter: handlePeekEdgeEnter,
+      onPointerLeave: handlePeekLeave
+    }
+  ) : null;
+  const rootPeekProps = {
+    onPointerEnter: (event) => {
+      onPointerEnterProp?.(event);
+      if (!isFull) handlePeekEnter(event);
+    },
+    onPointerLeave: (event) => {
+      onPointerLeaveProp?.(event);
+      if (!isFull) handlePeekLeave();
+    },
+    onFocus: (event) => {
+      onFocusProp?.(event);
+      if (!isFull) handlePeekFocus(event);
+    },
+    onBlur: (event) => {
+      onBlurProp?.(event);
+      if (!isFull) handlePeekBlur(event);
+    }
+  };
   const sideFoldStyle = railFolded ? {
     opacity: 0,
     position: "absolute",
@@ -14481,7 +14612,9 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       "data-header": header,
       "data-color": color,
       ...rest,
+      ...rootPeekProps,
       children: [
+        !isFull && peekEdge,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -14516,19 +14649,33 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("relative overflow-hidden", !isFullFrame && "min-h-0 flex-1"),
-            style: isFullFrame ? { gridArea: "nav" } : void 0,
+            className: cn(
+              "relative",
+              (!isFull || !folded) && "overflow-hidden",
+              !isFullFrame && "min-h-0 flex-1"
+            ),
+            style: {
+              ...isFullFrame ? { gridArea: "nav" } : null,
+              // 접힌 동안 띠와 펼쳐진 본문이 페이지 위에 서도록 이 칸을 올린다
+              ...isFull && folded ? { zIndex: GNB_PEEK_Z_INDEX } : null
+            },
             children: [
+              isFull && peekEdge,
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: "flex h-full flex-row",
                   style: {
                     width: bodyWidth,
-                    transform: folded ? "translateX(-100%)" : "none",
-                    visibility: folded ? "hidden" : "visible",
-                    transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
+                    transform: visuallyFolded ? "translateX(-100%)" : "none",
+                    visibility: visuallyFolded ? "hidden" : "visible",
+                    boxShadow: peekOverlay ? GNB_PEEK_SHADOW : "none",
+                    transition: `transform ${GNB_FOLD_MS}ms ease-out, box-shadow ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(visuallyFolded)}`
                   },
+                  onPointerEnter: isFull ? handlePeekEnter : void 0,
+                  onPointerLeave: isFull ? handlePeekLeave : void 0,
+                  onFocus: isFull ? handlePeekFocus : void 0,
+                  onBlur: isFull ? handlePeekBlur : void 0,
                   children: [
                     showRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)을 가운데 두고 위아래에 고정 슬롯(top/footer)을 붙인다.
                     // 두 슬롯은 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
@@ -17321,6 +17468,48 @@ function indexAtOffset(metrics, y) {
   return lo;
 }
 
+// src/lib/grid-key-nav.ts
+var GRID_NAV_ATTR = "data-grid-nav";
+var TEXT_INPUT = [
+  "input:not([type])",
+  ...["text", "number", "search", "tel", "url", "email", "password"].map((t) => `input[type="${t}"]`)
+];
+var FOCUSABLE_INPUT = TEXT_INPUT.map(
+  (s) => `${s}:not(:disabled):not([readonly]):not([aria-disabled="true"])`
+).join(",");
+function isTextInput(el) {
+  return el.matches(TEXT_INPUT.join(","));
+}
+function focusInput(cell) {
+  const input = cell.querySelector(FOCUSABLE_INPUT);
+  if (!input) return false;
+  if (input.closest('[inert],[aria-disabled="true"]')) return false;
+  input.focus();
+  if (input.ownerDocument.activeElement !== input) return false;
+  input.select();
+  return true;
+}
+function handleGridKeyNav(e) {
+  if (e.key !== "Enter" || e.defaultPrevented) return;
+  if (e.nativeEvent.isComposing || e.keyCode === 229 || e.ctrlKey || e.altKey || e.metaKey) return;
+  const target = e.target;
+  if (!isTextInput(target)) return;
+  if (target.getAttribute("aria-expanded") === "true") return;
+  const root = e.currentTarget;
+  const cell = target.closest(`[${GRID_NAV_ATTR}]`);
+  if (!cell || !root.contains(cell)) return;
+  const column = cell.getAttribute(GRID_NAV_ATTR) ?? "";
+  e.preventDefault();
+  const table = cell.closest("table");
+  const cells = [...root.querySelectorAll(`[${GRID_NAV_ATTR}]`)].filter(
+    (c) => c.getAttribute(GRID_NAV_ATTR) === column && c.closest("table") === table
+  );
+  const step = e.shiftKey ? -1 : 1;
+  for (let i = cells.indexOf(cell) + step; i >= 0 && i < cells.length; i += step) {
+    if (focusInput(cells[i])) return;
+  }
+}
+
 // src/lib/depth-filter.ts
 function filterDepthRows(rows, matches) {
   const selfMatch = rows.map(matches);
@@ -17488,6 +17677,7 @@ function flattenOptions(options, depth = 1, inheritDisabled = true) {
       out.push({
         value: String(o.value),
         label: o.label,
+        tag: o.tag,
         disabled: !!o.disabled || allChildrenDisabled,
         depth,
         isGroup: true,
@@ -17498,6 +17688,7 @@ function flattenOptions(options, depth = 1, inheritDisabled = true) {
       out.push({
         value: String(o.value),
         label: o.label,
+        tag: o.tag,
         disabled: !!o.disabled,
         depth,
         isGroup: false,
@@ -17702,9 +17893,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const effectiveDisabled = disabled || allOptionsDisabled;
   const searchVisible = showSearch && (partialOptions || selectable.length >= SEARCH_THRESHOLD);
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
+  const tagByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.tag])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
   const optionByValue = react.useMemo(
-    () => new Map(flat.map((o) => [o.value, { value: o.raw, label: o.label }])),
+    () => new Map(
+      flat.map((o) => [
+        o.value,
+        { value: o.raw, label: o.label, ...o.tag && { tag: o.tag } }
+      ])
+    ),
     [flat]
   );
   const selected = react.useMemo(() => {
@@ -17717,7 +17914,11 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     if (value == null) return map;
     for (const v of Array.isArray(value) ? value : [value]) {
       if (v != null && typeof v === "object") {
-        map.set(String(v.value), { value: v.value, label: v.label });
+        map.set(String(v.value), {
+          value: v.value,
+          label: v.label,
+          ...v.tag && { tag: v.tag }
+        });
       }
     }
     return map;
@@ -18058,6 +18259,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       });
     }
   }
+  const tagSize = size === "md" ? "sm" : "xs";
   const isPlaceholder = selected.length === 0;
   const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
@@ -18402,7 +18604,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     ))
                   }
                 )
-              ) : /* @__PURE__ */ jsxRuntime.jsx(TriggerLabel, { label: triggerText }),
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                TriggerLabel,
+                {
+                  label: triggerText,
+                  tag: multi ? void 0 : tagByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.tag,
+                  tagSize,
+                  tagDisabled: effectiveDisabled
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
                 showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: t.clear, onRemove: handleClear }),
                 showTriggerSpinner ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -18495,6 +18705,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
                     ItemList,
                     {
+                      tagSize,
                       listboxId,
                       activeOptionId,
                       items: visibleItems,
@@ -18552,6 +18763,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
 });
 var SSelect2 = /* @__PURE__ */ withDisplayName(SSelectImpl, "SSelect");
 function ItemList({
+  tagSize,
   listboxId,
   activeOptionId,
   items,
@@ -18734,6 +18946,9 @@ function ItemList({
                       OptionLabel,
                       {
                         label: o.label,
+                        tag: o.tag,
+                        tagSize,
+                        tagDisabled: rowDisabled,
                         className: treeLabelClass("sm", {
                           // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
                           emphasized: checkState !== false,
@@ -18868,7 +19083,16 @@ function ItemList({
               focused: focusedValue === o.value
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label: o.label, className: "flex-1 truncate" })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            OptionLabel,
+            {
+              label: o.label,
+              tag: o.tag,
+              tagSize,
+              tagDisabled: o.disabled,
+              className: "flex-1 truncate"
+            }
+          )
         ]
       },
       rowKey
@@ -18900,11 +19124,52 @@ function TreeRowsMotion({ opening, children }) {
   react.useEffect(() => () => animationRef.current?.cancel(), []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "overflow-hidden", "aria-hidden": opening ? void 0 : true, children });
 }
-function OptionLabel({ label, className }) {
+function OptionLabel({
+  label,
+  tag,
+  tagSize,
+  tagDisabled,
+  className
+}) {
+  if (tag) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          className,
+          "min-w-0 overflow-hidden",
+          tagDisabled && "opacity-(--opacity-050)"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          STag,
+          {
+            ...tag,
+            size: tagSize,
+            label: isHtmlLabel(label) ? extractText(label) : label,
+            className: cn("max-w-full min-w-0", tag.className)
+          }
+        )
+      }
+    );
+  }
   return isHtmlLabel(label) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: label });
 }
-function TriggerLabel({ label }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(OptionLabel, { label, className: "truncate" });
+function TriggerLabel({
+  label,
+  tag,
+  tagSize,
+  tagDisabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    OptionLabel,
+    {
+      label,
+      tag,
+      tagSize,
+      tagDisabled,
+      className: "truncate"
+    }
+  );
 }
 function TriggerRemoveButton({ ariaLabel, onRemove }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19911,365 +20176,381 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
       ]
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn("flex flex-col", className),
-      style: { width, ...style },
-      "data-table-id": resolvedTableId,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              // isolate: no-data/loading 오버레이(z-30·31)를 테이블 안에서 끝낸다. relative + z-auto
-              // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
-              // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
-              // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
-              "bg-white relative isolate flex flex-col overflow-hidden",
-              bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
-              // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
-              // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
-              // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
-              // 기본 사용(내용만큼 커지는 케이스)에서는 동작이 바뀌지 않는다.
-              !height && "min-h-0 grow",
-              radiusClass,
-              // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 인터랙션 차단
-              (loading2 || rowCount === 0) && "pointer-events-none"
-            ),
-            style: {
-              height,
-              minHeight: isNoData ? "calc(var(--cmp-table-header-height) + 60px)" : void 0
-            },
-            children: [
-              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none overflow-hidden", children: headerTable }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: emptySlot }) })
-              ] }) : (
-                /**
-                 * 헤더와 body 가 한 스크롤 컨테이너에 있다 — 헤더는 위에 붙어(sticky) 세로로는 서 있고
-                 * 가로로는 body 와 같은 스크롤로 움직인다. 헤더를 따로 두고 scroll 이벤트에서
-                 * scrollLeft 를 맞추면, 브라우저가 body 스크롤을 먼저 그리고 이벤트를 나중에 돌려
-                 * 헤더가 한 프레임 이상 늦게 따라온다.
-                 *
-                 * 행 좌표는 body 표 기준 그대로다 — `scrollTop` 이 y 이면 y 에 있는 행이 헤더 바로
-                 * 아래에 선다. 보이는 높이만 헤더 높이만큼 줄어든다(`headerHeight`).
-                 */
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    ref: scrollRef,
-                    onScroll: handleScrollEvent,
-                    className: cn(
-                      bodyScrollClass,
-                      // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
-                      (loading2 || rowCount === 0) && "overflow-hidden"
-                    ),
-                    style: { scrollPaddingTop: headerHeight },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, className: "sticky top-0 z-[8]", children: headerTable }),
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        "table",
-                        {
-                          className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                          style: { fontSize: 12 },
-                          children: [
-                            colgroup,
-                            /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                              virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
-                              rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                                const rowIndex = rowOffset + ri;
-                                const isSel = isViewSelected(row);
-                                const dragSel = dragSelectOn && isSel;
-                                const dragTop = dragSel && !isViewSelected(rows[rowIndex - 1]);
-                                const dragBottom = dragSel && !isViewSelected(rows[rowIndex + 1]);
-                                const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
-                                const rowBg = "bg-white";
-                                const rowHover = hoverable && !rowLocked;
-                                const expansionShown = expansionOn && shownExpansionSet.has(row[rowKey]);
-                                return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                                  /* @__PURE__ */ jsxRuntime.jsxs(
-                                    "tr",
-                                    {
-                                      "data-row-index": rowIndex,
-                                      onClick: onRowClick ? (event) => {
-                                        const target = event.target;
-                                        if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
-                                        onRowClick(row);
-                                      } : void 0,
-                                      onDoubleClick: onRowDoubleClick ? (event) => {
-                                        const target = event.target;
-                                        if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
-                                        onRowDoubleClick(row);
-                                      } : void 0,
-                                      onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
-                                      onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
-                                      onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
-                                      className: cn(
-                                        "group/table-row",
-                                        rowHover && "hover:bg-[var(--color-grey-05)]",
-                                        (onRowClick || onRowDoubleClick) && "cursor-pointer",
-                                        dragSelectOn && "select-none",
-                                        rowClassName?.(row)
-                                      ),
-                                      style: { height: virtualScroll ? effectiveRowHeight : rowH },
-                                      children: [
-                                        selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          "td",
-                                          {
-                                            className: cn(
-                                              // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                              "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+  const gridNavOn = columns.some((col) => col.gridNav);
+  return (
+    // 키 이벤트를 모아 받을 뿐 이 요소 자체는 상호작용 요소가 아니다 — role 을 바꾸지 않는다
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("flex flex-col", className),
+        style: { width, ...style },
+        "data-table-id": resolvedTableId,
+        onKeyDown: gridNavOn ? handleGridKeyNav : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                // isolate: no-data/loading 오버레이(z-30·31)를 테이블 안에서 끝낸다. relative + z-auto
+                // 만으로는 스태킹 컨텍스트가 생기지 않아, 모달 안에 들어가면 30·31이 모달 Content
+                // 레벨까지 올라가 같은 컨텍스트의 floating portal 밴드(z-2)를 덮는다.
+                // 자손은 이미 overflow-hidden으로 클리핑되므로 테이블 내부 순서는 달라지지 않는다.
+                "bg-white relative isolate flex flex-col overflow-hidden",
+                bordered && "border border-solid border-[color:var(--cmp-table-border-color)]",
+                // height가 없으면 루트가 받은 높이를 끝까지 채운다. 호스트가 className으로
+                // `flex-1 min-h-0` 등을 줘 루트 높이가 확정된 경우, 행이 적어도 테두리 박스가
+                // 남은 영역을 그대로 차지한다. basis는 auto로 둬 높이가 확정되지 않은
+                // 기본 사용(내용만큼 커지는 케이스)에서는 동작이 바뀌지 않는다.
+                !height && "min-h-0 grow",
+                radiusClass,
+                // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 인터랙션 차단
+                (loading2 || rowCount === 0) && "pointer-events-none"
+              ),
+              style: {
+                height,
+                minHeight: isNoData ? "calc(var(--cmp-table-header-height) + 60px)" : void 0
+              },
+              children: [
+                showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none overflow-hidden", children: headerTable }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: emptySlot }) })
+                ] }) : (
+                  /**
+                   * 헤더와 body 가 한 스크롤 컨테이너에 있다 — 헤더는 위에 붙어(sticky) 세로로는 서 있고
+                   * 가로로는 body 와 같은 스크롤로 움직인다. 헤더를 따로 두고 scroll 이벤트에서
+                   * scrollLeft 를 맞추면, 브라우저가 body 스크롤을 먼저 그리고 이벤트를 나중에 돌려
+                   * 헤더가 한 프레임 이상 늦게 따라온다.
+                   *
+                   * 행 좌표는 body 표 기준 그대로다 — `scrollTop` 이 y 이면 y 에 있는 행이 헤더 바로
+                   * 아래에 선다. 보이는 높이만 헤더 높이만큼 줄어든다(`headerHeight`).
+                   */
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      ref: scrollRef,
+                      onScroll: handleScrollEvent,
+                      className: cn(
+                        bodyScrollClass,
+                        // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
+                        (loading2 || rowCount === 0) && "overflow-hidden"
+                      ),
+                      style: { scrollPaddingTop: headerHeight },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, className: "sticky top-0 z-[8]", children: headerTable }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "table",
+                          {
+                            className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                            style: { fontSize: 12 },
+                            children: [
+                              colgroup,
+                              /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+                                virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                                rowCount === 0 ? null : bodyRows.map((row, ri) => {
+                                  const rowIndex = rowOffset + ri;
+                                  const isSel = isViewSelected(row);
+                                  const dragSel = dragSelectOn && isSel;
+                                  const dragTop = dragSel && !isViewSelected(rows[rowIndex - 1]);
+                                  const dragBottom = dragSel && !isViewSelected(rows[rowIndex + 1]);
+                                  const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
+                                  const rowBg = "bg-white";
+                                  const rowHover = hoverable && !rowLocked;
+                                  const expansionShown = expansionOn && shownExpansionSet.has(row[rowKey]);
+                                  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                                    /* @__PURE__ */ jsxRuntime.jsxs(
+                                      "tr",
+                                      {
+                                        "data-row-index": rowIndex,
+                                        onClick: onRowClick ? (event) => {
+                                          const target = event.target;
+                                          if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                          onRowClick(row);
+                                        } : void 0,
+                                        onDoubleClick: onRowDoubleClick ? (event) => {
+                                          const target = event.target;
+                                          if (target.closest(ROW_INTERACTIVE_SELECTOR)) return;
+                                          onRowDoubleClick(row);
+                                        } : void 0,
+                                        onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
+                                        onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
+                                        onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
+                                        className: cn(
+                                          "group/table-row",
+                                          rowHover && "hover:bg-[var(--color-grey-05)]",
+                                          (onRowClick || onRowDoubleClick) && "cursor-pointer",
+                                          dragSelectOn && "select-none",
+                                          rowClassName?.(row)
+                                        ),
+                                        style: { height: virtualScroll ? effectiveRowHeight : rowH },
+                                        children: [
+                                          selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            "td",
+                                            {
+                                              className: cn(
+                                                // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                                "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                                rowBg,
+                                                rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                                stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                              ),
+                                              style: {
+                                                width: SELECTABLE_COLUMN_WIDTH,
+                                                minWidth: SELECTABLE_COLUMN_WIDTH,
+                                                maxWidth: SELECTABLE_COLUMN_WIDTH,
+                                                // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
+                                                background: rowLocked ? LOCKED_BG : void 0
+                                              },
+                                              onClick: (e) => e.stopPropagation(),
+                                              onDoubleClick: (e) => e.stopPropagation(),
+                                              onClickCapture: (e) => {
+                                                shiftPressedRef.current = e.shiftKey;
+                                                if (e.shiftKey) window.getSelection()?.removeAllRanges();
+                                              },
+                                              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                                SCheckbox,
+                                                {
+                                                  value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
+                                                  disabled: !canSelectRow(row),
+                                                  onValueChange: () => toggleRow(row, rowOffset + ri),
+                                                  ariaLabel: rowSelectLabel?.(row) ?? t.selectRow
+                                                }
+                                              ) })
+                                            }
+                                          ),
+                                          visibleCols.map((col, i) => {
+                                            const tdClassName = cn(
+                                              // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
+                                              // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
+                                              "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                               rowBg,
                                               rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                              stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                            ),
-                                            style: {
-                                              width: SELECTABLE_COLUMN_WIDTH,
-                                              minWidth: SELECTABLE_COLUMN_WIDTH,
-                                              maxWidth: SELECTABLE_COLUMN_WIDTH,
-                                              // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
-                                              background: rowLocked ? LOCKED_BG : void 0
-                                            },
-                                            onClick: (e) => e.stopPropagation(),
-                                            onDoubleClick: (e) => e.stopPropagation(),
-                                            onClickCapture: (e) => {
-                                              shiftPressedRef.current = e.shiftKey;
-                                              if (e.shiftKey) window.getSelection()?.removeAllRanges();
-                                            },
-                                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                              SCheckbox,
-                                              {
-                                                value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
-                                                disabled: !canSelectRow(row),
-                                                onValueChange: () => toggleRow(row, rowOffset + ri),
-                                                ariaLabel: rowSelectLabel?.(row) ?? t.selectRow
-                                              }
-                                            ) })
-                                          }
-                                        ),
-                                        visibleCols.map((col, i) => {
-                                          const tdClassName = cn(
-                                            // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
-                                            // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
-                                            "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                            rowBg,
-                                            rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                            typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                          );
-                                          const tdPadX = cellPadXOf(col);
-                                          const dragEdges = dragSel ? [
-                                            dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
-                                            dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
-                                            i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
-                                            i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
-                                          ].filter(Boolean) : [];
-                                          const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
-                                          const tdStyle = {
-                                            paddingLeft: tdPadX,
-                                            paddingRight: tdPadX,
-                                            paddingTop: cellPadY,
-                                            paddingBottom: cellPadY,
-                                            textAlign: col.align ?? "left",
-                                            // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
-                                            background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
-                                            // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
-                                            // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
-                                            color: rowLocked ? LOCKED_CONTENT : void 0,
-                                            boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
-                                            ...cellStyle(i)
-                                          };
-                                          if (col.renderCell) {
-                                            const cell = col.renderCell({
-                                              row,
-                                              value: cellValue(col, row),
-                                              column: col,
-                                              colIndex: i,
-                                              rowIndex: ri,
-                                              isSelected: isSel,
-                                              className: tdClassName,
-                                              style: tdStyle
-                                            });
-                                            if (cell == null || cell === false) return null;
-                                            return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
-                                          }
-                                          const content = col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row);
-                                          if (i === expansionColIndex) {
+                                              typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
+                                            );
+                                            const tdPadX = cellPadXOf(col);
+                                            const dragEdges = dragSel ? [
+                                              dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
+                                              dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
+                                              i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
+                                              i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
+                                            ].filter(Boolean) : [];
+                                            const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
+                                            const tdStyle = {
+                                              paddingLeft: tdPadX,
+                                              paddingRight: tdPadX,
+                                              paddingTop: cellPadY,
+                                              paddingBottom: cellPadY,
+                                              textAlign: col.align ?? "left",
+                                              // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
+                                              background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
+                                              // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
+                                              // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
+                                              color: rowLocked ? LOCKED_CONTENT : void 0,
+                                              boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
+                                              ...cellStyle(i)
+                                            };
+                                            if (col.renderCell) {
+                                              const cell = col.renderCell({
+                                                row,
+                                                value: cellValue(col, row),
+                                                column: col,
+                                                colIndex: i,
+                                                rowIndex: ri,
+                                                isSelected: isSel,
+                                                className: tdClassName,
+                                                style: tdStyle
+                                              });
+                                              if (cell == null || cell === false) return null;
+                                              return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                            }
+                                            const content = col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row);
+                                            if (i === expansionColIndex) {
+                                              return /* @__PURE__ */ jsxRuntime.jsx(
+                                                "td",
+                                                {
+                                                  className: cn(tdClassName, "cursor-pointer"),
+                                                  style: tdStyle,
+                                                  "data-grid-nav": col.gridNav ? col.name : void 0,
+                                                  onClick: (event) => {
+                                                    if (isOwnControl(event.target, event.currentTarget)) return;
+                                                    event.stopPropagation();
+                                                    toggleExpanded(row);
+                                                  },
+                                                  onDoubleClick: (event) => event.stopPropagation(),
+                                                  children: /* @__PURE__ */ jsxRuntime.jsx(ExpansionToggleCell, { expanded: isRowExpanded(row), children: content })
+                                                },
+                                                col.name
+                                              );
+                                            }
                                             return /* @__PURE__ */ jsxRuntime.jsx(
                                               "td",
                                               {
-                                                className: cn(tdClassName, "cursor-pointer"),
+                                                className: tdClassName,
                                                 style: tdStyle,
-                                                onClick: (event) => {
-                                                  if (isOwnControl(event.target, event.currentTarget)) return;
-                                                  event.stopPropagation();
-                                                  toggleExpanded(row);
-                                                },
-                                                onDoubleClick: (event) => event.stopPropagation(),
-                                                children: /* @__PURE__ */ jsxRuntime.jsx(ExpansionToggleCell, { expanded: isRowExpanded(row), children: content })
+                                                "data-grid-nav": col.gridNav ? col.name : void 0,
+                                                children: content
                                               },
                                               col.name
                                             );
+                                          })
+                                        ]
+                                      }
+                                    ),
+                                    expansionShown && // 상세 영역 — 행이 아니므로 data-row-index 를 달지 않는다 (행 수·선택·실측 대상 밖)
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "tr",
+                                      {
+                                        "data-expansion-row": "",
+                                        "data-expansion-key": String(row[rowKey]),
+                                        className: expandedSet.has(row[rowKey]) ? void 0 : "pointer-events-none",
+                                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                                          "td",
+                                          {
+                                            colSpan: totalColSpan,
+                                            className: "whitespace-normal border-b border-solid border-[color:var(--cmp-table-border-color)] bg-white p-0 text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                                              "div",
+                                              {
+                                                className: "sticky left-0 box-border min-w-0",
+                                                style: {
+                                                  // 가로 스크롤이 있어도 보이는 폭에 머문다. 재기 전(0)에는 표 폭을 따른다
+                                                  width: viewportWidth > 0 ? viewportWidth : void 0,
+                                                  paddingLeft: "var(--cmp-table-body-paddingX-wide)",
+                                                  paddingRight: "var(--cmp-table-body-paddingX-wide)",
+                                                  paddingTop: cellPadY,
+                                                  paddingBottom: cellPadY
+                                                },
+                                                children: renderExpansion?.(row)
+                                              }
+                                            )
                                           }
-                                          return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: content }, col.name);
-                                        })
-                                      ]
-                                    }
-                                  ),
-                                  expansionShown && // 상세 영역 — 행이 아니므로 data-row-index 를 달지 않는다 (행 수·선택·실측 대상 밖)
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "tr",
-                                    {
-                                      "data-expansion-row": "",
-                                      "data-expansion-key": String(row[rowKey]),
-                                      className: expandedSet.has(row[rowKey]) ? void 0 : "pointer-events-none",
-                                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                                        "td",
-                                        {
-                                          colSpan: totalColSpan,
-                                          className: "whitespace-normal border-b border-solid border-[color:var(--cmp-table-border-color)] bg-white p-0 text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                                            "div",
-                                            {
-                                              className: "sticky left-0 box-border min-w-0",
-                                              style: {
-                                                // 가로 스크롤이 있어도 보이는 폭에 머문다. 재기 전(0)에는 표 폭을 따른다
-                                                width: viewportWidth > 0 ? viewportWidth : void 0,
-                                                paddingLeft: "var(--cmp-table-body-paddingX-wide)",
-                                                paddingRight: "var(--cmp-table-body-paddingX-wide)",
-                                                paddingTop: cellPadY,
-                                                paddingBottom: cellPadY
-                                              },
-                                              children: renderExpansion?.(row)
-                                            }
-                                          )
-                                        }
-                                      )
-                                    }
-                                  )
-                                ] }, row[rowKey] ?? ri);
-                              }),
-                              virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
-                            ] })
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
-              ),
-              isNoData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    "aria-hidden": true,
-                    className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
-                  }
-                ),
-                !showNoDataSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: emptyLabel }) })
-              ] }),
-              loading2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
-            ]
-          }
-        ),
-        (showPagination || showRowsPerPageSelect) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
-        // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
-        // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
-        // 눌리지 않도록 shrink-0으로 48px를 보장한다.
-        // 페이지네이션이 없어도 rows-per-page 셀렉트가 있으면 이 바를 그린다 — 셀렉트와
-        // 밀도 토글이 사는 곳이 여기다. dense 만으로는 그리지 않는다(빈 바가 남는다).
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "relative flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] bg-[var(--color-grey-05)]",
-              // 테두리를 끄면 겹칠 대상이 없어진다 — -mt-px 를 남기면 1px 어긋남만 생긴다.
-              bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
-            ),
-            children: [
-              showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              showRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
-                dense && /* @__PURE__ */ jsxRuntime.jsx(
-                  STextLink,
-                  {
-                    size: "sm",
-                    icon: innerDense ? "row" : "rowDense",
-                    iconRotate: 90,
-                    iconColor: "var(--sys-color-fg-quaternary)",
-                    label: innerDense ? t.denseOff : t.denseOn,
-                    onClick: () => changeDense(!innerDense)
-                  }
+                                        )
+                                      }
+                                    )
+                                  ] }, row[rowKey] ?? ri);
+                                }),
+                                virtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                              ] })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
                 ),
-                dense && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SSelect2,
-                  {
-                    options: rowsPerPageOption,
-                    value: internalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
-                    valueAsPrimitive: true,
-                    onValueChange: (v) => changeRowsPerPage(Number(v)),
-                    width: 128
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        contextMenuOn && typeof document !== "undefined" && reactDom.createPortal(
+                isNoData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
+                    }
+                  ),
+                  !showNoDataSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: emptyLabel }) })
+                ] }),
+                loading2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
+              ]
+            }
+          ),
+          (showPagination || showRowsPerPageSelect) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+          // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
+          // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
+          // 눌리지 않도록 shrink-0으로 48px를 보장한다.
+          // 페이지네이션이 없어도 rows-per-page 셀렉트가 있으면 이 바를 그린다 — 셀렉트와
+          // 밀도 토글이 사는 곳이 여기다. dense 만으로는 그리지 않는다(빈 바가 남는다).
           /* @__PURE__ */ jsxRuntime.jsxs(
-            RDropdown5__namespace.Root,
+            "div",
             {
-              modal: false,
-              open: contextMenuOpen,
-              onOpenChange: (open) => {
-                if (!open) setContextMenu((m) => m == null ? null : { ...m, open: false });
-              },
+              className: cn(
+                "relative flex h-[48px] shrink-0 items-center justify-center rounded-[var(--cmp-table-radius)] bg-[var(--color-grey-05)]",
+                // 테두리를 끄면 겹칠 대상이 없어진다 — -mt-px 를 남기면 1px 어긋남만 생긴다.
+                bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
+              ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "aria-hidden": true,
-                    className: "pointer-events-none fixed block h-0 w-0",
-                    style: { left: contextMenu?.x ?? 0, top: contextMenu?.y ?? 0 }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown5__namespace.Content,
-                  {
-                    align: "start",
-                    side: "bottom",
-                    sideOffset: CONTEXT_MENU_CURSOR_GAP,
-                    alignOffset: CONTEXT_MENU_CURSOR_GAP,
-                    collisionPadding: CONTEXT_MENU_VIEWPORT_PADDING,
-                    style: contextMenuArmed ? void 0 : { pointerEvents: "none" },
-                    className: cn(
-                      "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
-                      "max-w-[var(--radix-dropdown-menu-content-available-width)]",
-                      FLOATING_SLIDE_ANIM
-                    ),
-                    children: contextMenuItems?.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      RDropdown5__namespace.Item,
-                      {
-                        disabled: item4.disabled,
-                        onSelect: () => onContextMenuItemClick?.(item4.value, contextMenu?.rows ?? []),
-                        className: CONTEXT_MENU_ITEM_CLASS,
-                        children: [
-                          item4.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item4.icon, size: 12 }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children: item4.label })
-                        ]
-                      },
-                      item4.value
-                    ))
-                  }
-                )
+                showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+                showRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+                  dense && /* @__PURE__ */ jsxRuntime.jsx(
+                    STextLink,
+                    {
+                      size: "sm",
+                      icon: innerDense ? "row" : "rowDense",
+                      iconRotate: 90,
+                      iconColor: "var(--sys-color-fg-quaternary)",
+                      label: innerDense ? t.denseOff : t.denseOn,
+                      onClick: () => changeDense(!innerDense)
+                    }
+                  ),
+                  dense && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SSelect2,
+                    {
+                      options: rowsPerPageOption,
+                      value: internalPagination ? innerRowsPerPage : pagination?.rowsPerPage,
+                      valueAsPrimitive: true,
+                      onValueChange: (v) => changeRowsPerPage(Number(v)),
+                      width: 128
+                    }
+                  )
+                ] })
               ]
-            },
-            contextMenu == null ? "closed" : `${contextMenu.x},${contextMenu.y}`
+            }
           ),
-          portalContainer ?? document.body
-        )
-      ]
-    }
+          contextMenuOn && typeof document !== "undefined" && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              RDropdown5__namespace.Root,
+              {
+                modal: false,
+                open: contextMenuOpen,
+                onOpenChange: (open) => {
+                  if (!open) setContextMenu((m) => m == null ? null : { ...m, open: false });
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none fixed block h-0 w-0",
+                      style: { left: contextMenu?.x ?? 0, top: contextMenu?.y ?? 0 }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    RDropdown5__namespace.Content,
+                    {
+                      align: "start",
+                      side: "bottom",
+                      sideOffset: CONTEXT_MENU_CURSOR_GAP,
+                      alignOffset: CONTEXT_MENU_CURSOR_GAP,
+                      collisionPadding: CONTEXT_MENU_VIEWPORT_PADDING,
+                      style: contextMenuArmed ? void 0 : { pointerEvents: "none" },
+                      className: cn(
+                        "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
+                        "max-w-[var(--radix-dropdown-menu-content-available-width)]",
+                        FLOATING_SLIDE_ANIM
+                      ),
+                      children: contextMenuItems?.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        RDropdown5__namespace.Item,
+                        {
+                          disabled: item4.disabled,
+                          onSelect: () => onContextMenuItemClick?.(item4.value, contextMenu?.rows ?? []),
+                          className: CONTEXT_MENU_ITEM_CLASS,
+                          children: [
+                            item4.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item4.icon, size: 12 }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children: item4.label })
+                          ]
+                        },
+                        item4.value
+                      ))
+                    }
+                  )
+                ]
+              },
+              contextMenu == null ? "closed" : `${contextMenu.x},${contextMenu.y}`
+            ),
+            portalContainer ?? document.body
+          )
+        ]
+      }
+    )
   );
 });
 var STable2 = STableImpl;