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

package/AGENTS.md

@@ -2555,6 +2555,13 @@ import { SLocaleProvider, SModalOutlet } from 'sellmate-design-system-react';
 
 **접으면 레일·메뉴가 통째로 빠져나가면서 그 슬롯들도 함께 사라진다.** 접힌 상태에서도 남겨야 할 것은 `foldedTop`·`foldedFooter` 로 따로 준다 — `header="fix"` 로 접혔을 때만 나타나며, 폭이 좁은 폴드 레일이므로 아이콘 버튼 하나 정도로 줄인다.
 
+**접힌 GNB 를 호버로 잠깐 펼치는 동작은 컴포넌트가 한다 — 앱이 따로 만들지 않는다.** 접힌 채 화면 왼쪽 가장자리(`header` 와 무관하게 `fix`·`full` 모두)에 마우스를 가져가면 페이지를 밀지 않고 그 위에 겹쳐 펼쳐지고, GNB 를 벗어나면 다시 접힌다. 키보드 포커스가 펼쳐진 GNB 안에 있으면 접히지 않는다. 이 동작을 켜고 끄는 prop 은 없다.
+
+- **`folded` 는 그대로이고 `onFoldedChange` 도 오지 않는다.** 호버로 펼친 것은 보이는 모양뿐이라 앱의 접힘 상태·페이지 폭에 영향이 없다. 펼친 채로 두려면 폴드 버튼으로 편다 — 그때 `folded` 가 바뀐다.
+- **접힌 화면의 왼쪽 가장자리에는 호버 영역(투명 띠)이 깔린다.** 그 자리에 클릭해야 하는 것(페이지 왼쪽 끝에 붙인 버튼 등)을 두지 않는다. 띠의 폭은 컴포넌트가 정하므로 숫자를 직접 주지 않는다.
+- **펼쳐지는 동안 `foldedTop`·`foldedFooter` 와 접힌 레일의 `system` 은 펼친 모양(`menuTop`·`menuFooter`·메뉴 컬럼 바닥)으로 바뀐다.** 접힌 레일에서 열어 둔 계정·알림 패널은 그때 닫힌다(§4-1 `system`).
+- **터치에는 hover 가 없어 동작하지 않는다.** 터치 화면에서도 접힌 GNB 를 펴야 하면 폴드 버튼으로 연다.
+
 ```tsx
 {/* 접히면 menuTop·menuFooter 가 함께 빠지므로, 폴드 레일에 남길 것만 foldedTop 으로 따로 준다 */}
 <SGnb

package/dist/components/SGnb/SGnb.d.ts

@@ -201,6 +201,9 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  * 접힘/펼침은 GNB_FOLD_MS 동안의 슬라이드다 — 레일·메뉴가 함께 왼쪽으로 빠져나가고 펼치면 오른쪽에서 들어온다.
  * 페이지 쪽 폭은 fix 면 이 컴포넌트의 폭 전환이, full 이면 SLayout 의 메뉴 열 전환이 같은 길이로 맞춘다.
  *
+ * 접힌 채 화면 왼쪽 가장자리(투명 띠)에 마우스를 가져가면 페이지를 밀지 않고 위에 겹쳐 펼쳐지고,
+ * GNB 를 벗어나면(키보드 포커스가 안에 있으면 유지) 다시 접힌다. `folded` 는 바뀌지 않는다.
+ *
  * SLayout 안에서 쓰면 type·header·folded 를 context 에서 읽어 앱이 중복으로 넘길 필요가 없고,
  * 자기 치수(컬럼 폭·상단바 높이·전환 길이)를 registerNav 로 되올려 프레임이 그 값으로 그리드를 깐다.
  *

package/dist/components/SGnb/gnb.config.d.ts

@@ -118,6 +118,30 @@ export declare const GNB_FOLD_MS = 200;
  * 폴드와 같은 값을 써서 두 모션이 한 언어로 읽히게 한다.
  */
 export declare const GNB_EXPAND_MS = 200;
+/**
+ * 접힌 GNB 의 호버 오버레이(peek) — 접힌 채 화면 왼쪽 가장자리에 마우스를 가져가면 GNB 가
+ * 페이지를 밀지 않고 위에 겹쳐 펼쳐진다. 전용 토큰이 없어 상수로 둔다.
+ * - 진입 지연: 가장자리를 스치기만 한 경우에 펼쳐지지 않게 한다.
+ * - 이탈 지연: 경계를 살짝 벗어났다 돌아오는 동안 깜빡이며 접히지 않게 한다.
+ * - 가장자리 폭: 여는 호버 영역인 화면 왼쪽 투명 띠의 폭. header="full" 은 접으면 메뉴가 화면 밖으로 나가
+ *   잡을 자리가 없고, header="fix" 는 접힌 레일 전체를 영역으로 삼으면 레일의 버튼으로 가는 길에 스치기만 해도
+ *   펼쳐져 누르려던 버튼이 바뀌므로 둘 다 띠로 연다.
+ */
+export declare const GNB_PEEK_ENTER_DELAY_MS = 120;
+export declare const GNB_PEEK_LEAVE_DELAY_MS = 250;
+export declare const GNB_PEEK_EDGE_WIDTH = 12;
+/**
+ * 호버 오버레이가 뜨는 z-index. 두 쪽 사이에 끼어야 한다.
+ * - 위로 못 넘는 것: 페이지 안의 로컬 값(SPageHeader·sticky 헤더 등 한 자리~30 대) — 오버레이가 그 아래로 가라앉으면 안 된다.
+ * - 아래로 못 내려가는 것: 전역 포털 레이어(`Z_INDEX.baseFloating`=50) — GNB 안에서 뜬 계정 목록·런처·라벨 칩이
+ *   오버레이에 가려지면 안 된다.
+ */
+export declare const GNB_PEEK_Z_INDEX = 40;
+/**
+ * 호버 오버레이의 그림자. 시안 값이 공용 그림자 토큰(--shadow-*)에 없어 상수로 둔다.
+ * 오버레이는 왼쪽 가장자리에 붙어 사방으로 고르게 퍼지는 그림자를 쓴다(오프셋 없음).
+ */
+export declare const GNB_PEEK_SHADOW = "0px 0px 64px 0px rgba(34,34,34,0.12), 0px 0px 24px 0px rgba(34,34,34,0.08)";
 /**
  * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
  * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.

package/dist/components/SSelect/README.md

@@ -87,6 +87,11 @@ export type SSelectChangeValue = any;
 export interface SSelectOption {
   value: string | number;
   label: string;
+  /**
+   * 주면 `label` 을 STag 로 그린다 — 목록 행과 단일 선택 트리거에 적용. 칩·multi 의 쉼표 트리거는 글자로 둔다.
+   * 태그는 글자만 받으므로 HTML 라벨과 함께 주면 태그를 걷어낸 글자로 그려진다.
+   */
+  tag?: SSelectOptionTag;
   disabled?: boolean;
   children?: SSelectOption[];
 }
@@ -106,6 +111,16 @@ export type SSelectType =
 export type SSelectValueDisplay = 'text' | 'chip';
 ```
 
+### SSelectOptionTag
+
+```ts
+/**
+ * 옵션 라벨을 STag 로 그릴 때 넘기는 값. 글자는 옵션의 `label` 이고, 크기는 SSelect 의 `size` 가
+ * 정한다(`md` 면 `sm`, 그 외 `xs`) — 그래서 `size`·`label` 은 받지 않는다. 나머지(`color`·`deep`·`shape`·`icon`…)는 STag 와 같다.
+ */
+export type SSelectOptionTag = Omit<STagProps, 'size' | 'label'>;
+```
+
 ## Dependencies
 
 ### Used by
@@ -122,6 +137,7 @@ export type SSelectValueDisplay = 'text' | 'chip';
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
 - [SSearchInput](../SSearchInput)
+- [STag](../STag)
 
 ### Graph
 
@@ -134,6 +150,7 @@ graph TD;
   SSelect --> SIcon
   SSelect --> SPortal
   SSelect --> SSearchInput
+  SSelect --> STag
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SSelect/SSelect.d.ts

@@ -6,7 +6,7 @@ import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
 import { type SSelectOption, type SSelectType, type SSelectValueDisplay } from './select.config';
 import { type SFieldWidth } from '../../lib/field-width';
-export type { SSelectOption, SSelectType, SSelectValueDisplay } from './select.config';
+export type { SSelectOption, SSelectOptionTag, SSelectType, SSelectValueDisplay, } from './select.config';
 export interface SSelectHandle {
     /** 트리거(combobox)에 포커스 (sdFocus) */
     focus: () => void;

package/dist/components/SSelect/select.config.d.ts

@@ -1,6 +1,17 @@
+import { type STagProps } from '../STag';
+/**
+ * 옵션 라벨을 STag 로 그릴 때 넘기는 값. 글자는 옵션의 `label` 이고, 크기는 SSelect 의 `size` 가
+ * 정한다(`md` 면 `sm`, 그 외 `xs`) — 그래서 `size`·`label` 은 받지 않는다. 나머지(`color`·`deep`·`shape`·`icon`…)는 STag 와 같다.
+ */
+export type SSelectOptionTag = Omit<STagProps, 'size' | 'label'>;
 export interface SSelectOption {
     value: string | number;
     label: string;
+    /**
+     * 주면 `label` 을 STag 로 그린다 — 목록 행과 단일 선택 트리거에 적용. 칩·multi 의 쉼표 트리거는 글자로 둔다.
+     * 태그는 글자만 받으므로 HTML 라벨과 함께 주면 태그를 걷어낸 글자로 그려진다.
+     */
+    tag?: SSelectOptionTag;
     disabled?: boolean;
     children?: SSelectOption[];
 }
@@ -10,6 +21,7 @@ export type SSelectValueDisplay = 'text' | 'chip';
 export interface FlatOption {
     value: string;
     label: string;
+    tag?: SSelectOptionTag;
     disabled: boolean;
     depth: number;
     /** children 을 가진 그룹 노드 — 그 자체가 값이 되는 것은 `tree` 타입뿐이다 */

package/dist/components/STag/README.md

@@ -79,6 +79,7 @@ export const TAG_COLORS = [
  - [SLauncherListBox](../SLauncherListBox)
  - [SNumberInput](../SNumberInput)
  - [SRadioCard](../SRadioCard)
+ - [SSelect](../SSelect)
  - [SSystemActionButton](../SSystemActionButton)
  - [STabs](../STabs)
  - [STextLink](../STextLink)
@@ -102,6 +103,7 @@ graph TD;
   SLauncherListBox --> STag
   SNumberInput --> STag
   SRadioCard --> STag
+  SSelect --> STag
   SSystemActionButton --> STag
   STabs --> STag
   STextLink --> STag

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) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
@@ -17530,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,
@@ -17540,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,
@@ -17744,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(() => {
@@ -17759,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;
@@ -18100,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;
@@ -18444,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(
@@ -18537,6 +18705,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
                     ItemList,
                     {
+                      tagSize,
                       listboxId,
                       activeOptionId,
                       items: visibleItems,
@@ -18594,6 +18763,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
 });
 var SSelect2 = /* @__PURE__ */ withDisplayName(SSelectImpl, "SSelect");
 function ItemList({
+  tagSize,
   listboxId,
   activeOptionId,
   items,
@@ -18776,6 +18946,9 @@ function ItemList({
                       OptionLabel,
                       {
                         label: o.label,
+                        tag: o.tag,
+                        tagSize,
+                        tagDisabled: rowDisabled,
                         className: treeLabelClass("sm", {
                           // 고른 줄은 굵게 — multi_tree 는 일부만 고른 그룹도 굵다 (STree 와 같다)
                           emphasized: checkState !== false,
@@ -18910,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
@@ -18942,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(