sellmate-design-system-react 9.0.0-beta.32 → 9.0.0-beta.33

package/AGENTS.md

@@ -1618,7 +1618,7 @@ export default function AppShell({
 ```tsx
 {/* 폭을 기억해야 하면 menuWidth 를 앱이 쥐고 onMenuWidthChange 로 되받아 저장한다.
     초기값만 정하면 되면 defaultMenuWidth 하나로 끝난다. */}
-<SGnb items={MENU} value={current} onValueChange={navigate} resizable defaultMenuWidth={240} />
+<SGnb items={MENU} value={current} onValueChange={navigate} resizable defaultMenuWidth={220} />
 ```
 
 `onMenuWidthChange` 는 **드래그를 놓는 순간**(또는 방향키 조작) 한 번만 온다 — 저장 로직을 그대로 붙여도 프레임마다 쓰이지 않는다. 접혀 있거나 레일 리프가 활성이라 깔 메뉴가 없으면 조절선은 나오지 않는다.
@@ -1739,7 +1739,12 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 - **`header="fix"` 를 접으면 알림·계정 아이콘만 남는다** — `actions`·`domain`·`setting` 은 48px 폭에 놓을 자리가 없어 렌더되지 않고, 알림 개수는 점 배지가 된다. **알림도 계정도 안 쓰는 조합이면 접힌 패널은 아예 렌더되지 않는다** — 접힌 상태에서도 반드시 눌러야 하는 것이 그 둘 밖에 있으면 `foldedTop`/`foldedFooter` 로 따로 준다.
 - **`header="full"` 은 접어도 상단바가 남으므로 조각들도 그대로 남는다.** 대신 가로로 자리가 넉넉하지 않아 알림·설정이 라벨을 벗고 아이콘(알림은 개수까지)만 남는다 — 이건 컴포넌트가 알아서 하므로 앱이 라벨을 지우지 않는다.
 - **`account` 를 쓰면 `account.listBox` 가 필수다** (§3-5-8) — 계정 행을 누르면 이메일·이름·권한과 계정 설정·언어 변경·로그아웃이 예외 없이 뜬다. 뜨는 방향은 판이 놓인 자리가 정하므로 앱이 넘기지 않는다 — 판이면 계정 행 위로, 상단바면 아래로 펼치고, 접힌 레일도 판과 같다. `account.onClick` 은 패널을 여는 것 말고 따로 할 일(로깅 등)이 있을 때만 준다.
-- **알림 개수는 `alert.count` 하나로 표현한다.** 1 이상이면 벨이 울리는 아이콘과 강조색으로 바뀐다 — 색은 GNB 색이 정하므로 앱이 직접 칠하지 않는다.
+- **알림 개수는 `alert.count` 하나로 표현한다.** 1 이상이면 벨이 울리는 아이콘과 강조색으로 바뀐다 — 색은 GNB 색이 정하므로 앱이 직접 칠하지 않는다. **`resizable` 로 메뉴를 기본 폭보다 좁게 줄이면 개수를 적을 가로가 모자라 접힘과 같은 점 배지로 바뀐다** — 컴포넌트가 알아서 하므로 앱이 폭을 보고 `count` 를 지우지 않는다.
+- **알림을 눌러 뜨는 목록은 `alert.listBox` 에 내용만 넘긴다** — `SPortal` 을 따로 띄워 알림 버튼에 붙이지 않는다. 목록에 무엇을 쌓을지는 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향(판·접힌 레일은 버튼 오른쪽 · 상단바는 아래로 오른쪽 끝)과 바깥 클릭·ESC 닫힘, 배경·라운드·그림자는 컴포넌트가 쥔다. 여닫는 일도 알림 버튼이 하므로 **`onOpenChange` 는 그 사실을 알아야 할 때만** 받는다(연 김에 읽음 처리하는 화면 등) — 이 값으로 목록을 대신 열거나 막지 않는다. 계정 행(`account.listBox`)과 같은 규칙이다.
+- **알림에 안내 툴팁을 띄우려면 `alert.tooltip` 에 문구만 넘긴다** — `STooltip` 을 직접 세워 알림 버튼에 붙이지 않는다. 색(판이 light 면 기본 · 그 밖은 강조)과 방향(판·접힌 레일은 오른쪽 · 상단바는 아래)은 자리가 정하고, 스스로 사라지지 않다가 **알림을 누르거나 버튼에서 커서를 뺄 때** 닫힌다.
+  - **닫힘은 `onTooltipDismiss` 로 받아 `tooltip` 을 비워 둔다.** 같은 값을 계속 넘기는 동안에는 다시 뜨지 않고, **비웠다 다시 넘기면 문구가 같아도 새 안내로 뜬다** — 새 알림마다 같은 안내를 다시 띄우는 화면이 막히지 않는다.
+  - 재노출 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이다. 한 이벤트 핸들러 안에서 비웠다 곧바로 넣으면 렌더가 한 번으로 묶여 신호가 되지 않는다 — 닫을 때 비우고, 다시 필요할 때 넘긴다.
+  - 컴포넌트가 아는 범위는 그 자리가 서 있는 동안뿐이다(새로고침하거나 GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다). **그 사용자에게 두 번 다시 보이지 않아야 하면 앱이 닫힘을 저장해 두고 `tooltip` 을 넘기지 않는다.**
 - **`header="fix"` + `useRail` 에서 하위 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 패널도 함께 빠진다.** 항상 보여야 하는 계정·알림이라면 그런 레일 리프를 두지 않는다 — 또는 `header="full"` 로 두면 상단바에 남는다(그런 레일 리프가 있으면 GNB 가 `header` 를 `full` 로 강제한다).
 
 ### 4-2. 목록 페이지 (필터 + 테이블)

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

@@ -32,6 +32,12 @@ export interface SGnbSystemContextValue {
      * 것을 스스로 닫아야 하고, 그 신호가 이 값이다.
      */
     active: boolean;
+    /**
+     * 이 자리가 메뉴 기본 폭(GNB_MENU_WIDTH)보다 좁은가 — `resizable` 로 줄인 메뉴 컬럼이 그렇다.
+     * 좁아진 판에서는 알림 개수를 적을 가로가 모자라 개수 대신 점 배지가 붙는다.
+     * 없으면 좁지 않은 것으로 본다(접힘 레일·상단바는 자기 규칙을 따르므로 이 값과 무관하다).
+     */
+    narrow?: boolean;
 }
 export declare const SGnbSystemContext: import("react").Context<SGnbSystemContextValue | null>;
 export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {

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

@@ -116,13 +116,13 @@ export declare const GNB_EXPAND_MS = 200;
  * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
  * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
  */
-export declare const GNB_MENU_WIDTH = 240;
+export declare const GNB_MENU_WIDTH = 214;
 /**
  * resizable 일 때 메뉴 폭이 움직일 수 있는 범위(px). 레일 폭은 고정이고 메뉴 컬럼만 늘고 준다.
- * 디자인이 아직 확정한 값이 아니라 임시다 — 확정되면 토큰으로 내려온다.
+ * 기본 폭(GNB_MENU_WIDTH)이 이 범위 안에 있다. 대응 토큰이 없어 상수로 둔다.
  */
 export declare const GNB_MENU_MIN_WIDTH = 200;
-export declare const GNB_MENU_MAX_WIDTH = 300;
+export declare const GNB_MENU_MAX_WIDTH = 240;
 /** 메뉴 폭 조절에서 방향키 한 번에 움직이는 양(px). Shift 를 함께 누르면 large. */
 export declare const GNB_MENU_RESIZE_KEY_STEP: {
     normal: number;

package/dist/components/SGnbSystem/README.md

@@ -52,12 +52,50 @@ export interface SGnbSystemAlert {
   /** 라벨 텍스트. 기본 `'알림'` */
   label?: string;
   /**
-   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수(접히면 점)가 붙는다.
+   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+   * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
    * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
    */
   count?: number;
   /** 클릭 */
   onClick?: () => void;
+  /**
+   * 알림 버튼에 붙는 안내 툴팁의 문구(한 줄이 한 항목). 주면 뜬다 — **문구만 앱이 정하고**
+   * 색·방향·여닫힘은 컴포넌트가 쥔다: 색은 판이 light 면 기본, 그 밖(dark·상단바)이면 강조색이고
+   * 방향은 자리가 정한다(판·접힌 레일이면 오른쪽, 상단바면 아래).
+   *
+   * 스스로 사라지지 않는다 — **알림 버튼을 누르거나, 버튼에 얹었다 커서를 뺄 때** 닫히고,
+   * 같은 값을 계속 넘기는 동안에는 다시 뜨지 않는다.
+   *
+   * **다시 띄우려면 비웠다가 다시 넘긴다**(`undefined` → 문구). 문구가 같아도 상관없다 —
+   * 컴포넌트는 닫았다는 사실만 기억하고 문구 내용은 기억하지 않으므로, 새 알림마다 같은 안내를
+   * 다시 띄우는 화면도 막히지 않는다.
+   */
+  tooltip?: string[];
+  /**
+   * 알림을 누르면 뜨는 목록의 **내용**. 주면 컴포넌트가 알림 버튼에 붙여 띄운다 —
+   * 목록에 무엇을 쌓을지는 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향·앵커·
+   * 여닫힘(바깥 클릭·ESC 포함)과 배경·라운드·그림자는 컴포넌트가 쥐고 앱은 안에 담을 것만 준다.
+   * 방향은 자리가 정한다 — 판·접힌 레일이면 버튼 오른쪽, 상단바면 아래.
+   */
+  listBox?: ReactNode;
+  /**
+   * 알림 목록이 열리고 닫힐 때. 여닫는 것은 알림 버튼이 스스로 하므로 **그 사실을 알아야 할
+   * 때만** 준다(연 김에 읽음 처리하거나, 열려 있는 동안 다른 층을 접어 두는 화면).
+   *
+   * 앱이 누르지 않은 닫힘도 온다: GNB 를 접거나 펴면 알림 버튼이 다른 자리로 옮겨 서므로
+   * 목록이 닫히고 `false` 가 온다(계정 행과 같다).
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * 안내 툴팁이 닫힐 때. 받아서 `tooltip` 을 비워 두는 것이 기본 사용법이다 — 그러면 앱이
+   * 다음에 넘기는 문구가 곧 다음 안내가 된다.
+   *
+   * 컴포넌트가 아는 "다시 뜨지 않는다" 는 **이 자리가 서 있는 동안**뿐이라(새로고침하거나
+   * GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다), 그 사용자에게 두 번 다시 보이지
+   * 않아야 하면 앱이 이 신호를 저장해 두고 `tooltip` 을 그만 넘긴다.
+   */
+  onTooltipDismiss?: () => void;
 }
 ```
 
@@ -130,7 +168,9 @@ export const GNB_SYSTEM_COLORS = ['light', 'dark'] as const;
 - [SAccountListBox](../SAccountListBox)
 - [SGnb](../SGnb)
 - [SIcon](../SIcon)
+- [SPortal](../SPortal)
 - [SSystemActionButton](../SSystemActionButton)
+- [STooltip](../STooltip)
 
 ### Graph
 
@@ -139,6 +179,8 @@ graph TD;
   SGnbSystem --> SAccountListBox
   SGnbSystem --> SGnb
   SGnbSystem --> SIcon
+  SGnbSystem --> SPortal
   SGnbSystem --> SSystemActionButton
+  SGnbSystem --> STooltip
   style SGnbSystem fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SGnbSystem/SGnbSystem.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type SAccountListBoxContent } from '../SAccountListBox';
 import { type SSystemActionButtonProps } from '../SSystemActionButton';
 import { type SGnbSystemColor } from './gnbSystem.config';
@@ -23,12 +23,50 @@ export interface SGnbSystemAlert {
     /** 라벨 텍스트. 기본 `'알림'` */
     label?: string;
     /**
-     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수(접히면 점)가 붙는다.
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+     * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
      * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
      */
     count?: number;
     /** 클릭 */
     onClick?: () => void;
+    /**
+     * 알림 버튼에 붙는 안내 툴팁의 문구(한 줄이 한 항목). 주면 뜬다 — **문구만 앱이 정하고**
+     * 색·방향·여닫힘은 컴포넌트가 쥔다: 색은 판이 light 면 기본, 그 밖(dark·상단바)이면 강조색이고
+     * 방향은 자리가 정한다(판·접힌 레일이면 오른쪽, 상단바면 아래).
+     *
+     * 스스로 사라지지 않는다 — **알림 버튼을 누르거나, 버튼에 얹었다 커서를 뺄 때** 닫히고,
+     * 같은 값을 계속 넘기는 동안에는 다시 뜨지 않는다.
+     *
+     * **다시 띄우려면 비웠다가 다시 넘긴다**(`undefined` → 문구). 문구가 같아도 상관없다 —
+     * 컴포넌트는 닫았다는 사실만 기억하고 문구 내용은 기억하지 않으므로, 새 알림마다 같은 안내를
+     * 다시 띄우는 화면도 막히지 않는다.
+     */
+    tooltip?: string[];
+    /**
+     * 알림을 누르면 뜨는 목록의 **내용**. 주면 컴포넌트가 알림 버튼에 붙여 띄운다 —
+     * 목록에 무엇을 쌓을지는 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향·앵커·
+     * 여닫힘(바깥 클릭·ESC 포함)과 배경·라운드·그림자는 컴포넌트가 쥐고 앱은 안에 담을 것만 준다.
+     * 방향은 자리가 정한다 — 판·접힌 레일이면 버튼 오른쪽, 상단바면 아래.
+     */
+    listBox?: ReactNode;
+    /**
+     * 알림 목록이 열리고 닫힐 때. 여닫는 것은 알림 버튼이 스스로 하므로 **그 사실을 알아야 할
+     * 때만** 준다(연 김에 읽음 처리하거나, 열려 있는 동안 다른 층을 접어 두는 화면).
+     *
+     * 앱이 누르지 않은 닫힘도 온다: GNB 를 접거나 펴면 알림 버튼이 다른 자리로 옮겨 서므로
+     * 목록이 닫히고 `false` 가 온다(계정 행과 같다).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 안내 툴팁이 닫힐 때. 받아서 `tooltip` 을 비워 두는 것이 기본 사용법이다 — 그러면 앱이
+     * 다음에 넘기는 문구가 곧 다음 안내가 된다.
+     *
+     * 컴포넌트가 아는 "다시 뜨지 않는다" 는 **이 자리가 서 있는 동안**뿐이라(새로고침하거나
+     * GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다), 그 사용자에게 두 번 다시 보이지
+     * 않아야 하면 앱이 이 신호를 저장해 두고 `tooltip` 을 그만 넘긴다.
+     */
+    onTooltipDismiss?: () => void;
 }
 /** 설정 버튼 */
 export interface SGnbSystemSetting {
@@ -121,6 +159,14 @@ export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀐다 — light 는 파랑,
  * 어두운 면은 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
  *
+ * 안내 툴팁(`alert.tooltip`)은 문구를 받은 동안 떠 있다가 알림을 누르거나 커서를 빼면 닫힌다.
+ * 다시 띄우는 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이라, 같은 문구도 비웠다 다시 넘기면
+ * 새 안내로 뜬다.
+ *
+ * 판이 **메뉴 기본 폭보다 좁으면**(GNB 의 `resizable` 로 줄인 컬럼) 알림 개수를 적을 가로가
+ * 모자라 접힘과 같은 점 배지로 바뀐다 — 숫자가 설정 버튼을 밀어내거나 잘리는 대신, 알림이
+ * 있다는 사실만 남긴다. 좁은지는 담은 SGnb 가 내려주므로 앱이 고르는 prop 이 없다.
+ *
  * 색은 놓인 면을 따른다: 판 위는 `light`/`dark`(오션블루 판), 판 없이 상단바 면에 바로 얹는 `top` 의
  * dark 는 한 단계 어두운 `darker`(네이비) 색표다 — GNB_SYSTEM_TOP_COLOR_CONFIG 가 그 대응을 쥔다.
  *

package/dist/components/SPortal/README.md

@@ -54,6 +54,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 
  - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
 ### Graph
@@ -62,6 +63,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 graph TD;
   SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STooltip/README.md

@@ -66,6 +66,7 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
 
  - [SChipFilter](../SChipFilter)
  - [SField](../SField)
+ - [SGnbSystem](../SGnbSystem)
  - [SKeyValueTable](../SKeyValueTable)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SStepper](../SStepper)
@@ -84,6 +85,7 @@ graph TD;
   STooltip --> SIcon
   SChipFilter --> STooltip
   SField --> STooltip
+  SGnbSystem --> STooltip
   SKeyValueTable --> STooltip
   SSectionHeaderCard --> STooltip
   SStepper --> STooltip

package/dist/index.cjs

@@ -9270,9 +9270,9 @@ var GNB_RAIL = {
 var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
-var GNB_MENU_WIDTH = 240;
+var GNB_MENU_WIDTH = 214;
 var GNB_MENU_MIN_WIDTH = 200;
-var GNB_MENU_MAX_WIDTH = 300;
+var GNB_MENU_MAX_WIDTH = 240;
 var GNB_MENU_RESIZE_KEY_STEP = { normal: 10, large: 50 };
 var clampGnbMenuWidth = (width) => Math.min(GNB_MENU_MAX_WIDTH, Math.max(GNB_MENU_MIN_WIDTH, Math.round(width)));
 var GNB_FULL_LOGO_WIDTH = 140;
@@ -9830,8 +9830,15 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     "topContent"
   ) : null;
   const systemMenuContext = react.useMemo(
-    () => ({ color, folded: false, placement: "panel", active: !railFolded }),
-    [color, railFolded]
+    // 기본 폭보다 줄여 놓은 메뉴 컬럼이면 판에 알린다 — 알림 개수가 점 배지로 줄어든다.
+    () => ({
+      color,
+      folded: false,
+      placement: "panel",
+      active: !railFolded,
+      narrow: menuWidth < GNB_MENU_WIDTH
+    }),
+    [color, railFolded, menuWidth]
   );
   const systemFoldedContext = react.useMemo(
     () => ({ color, folded: true, placement: "panel", active: true }),
@@ -10098,7 +10105,7 @@ var GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";
 function TokenIcon3({ name, size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
-function SystemButton({
+var SystemButton = /* @__PURE__ */ react.forwardRef(function SystemButton2({
   color,
   icon,
   label,
@@ -10110,21 +10117,22 @@ function SystemButton({
   dot,
   accentColor,
   stretch,
-  buttonRef,
   hasPopup,
   expanded,
-  onClick
-}) {
+  onClick,
+  onMouseLeave
+}, ref) {
   const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      ref: buttonRef,
+      ref,
       type: "button",
       "aria-label": label ? void 0 : ariaLabel,
       "aria-haspopup": hasPopup ? "dialog" : void 0,
       "aria-expanded": hasPopup ? expanded : void 0,
       onClick,
+      onMouseLeave,
       className: cn(
         "group box-border flex cursor-pointer items-center border-none bg-(--gsb-bg) text-(--gsb-text) transition-colors hover:bg-(--gsb-bg-hover)",
         stretch ? "min-w-0 flex-1" : "shrink-0",
@@ -10175,7 +10183,7 @@ function SystemButton({
       ]
     }
   );
-}
+});
 var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
   color: colorProp,
   folded: foldedProp,
@@ -10194,6 +10202,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
   const isTop = placement === "top";
   const folded = !isTop && (foldedProp ?? gnb2?.folded ?? false);
   const active = gnb2?.active ?? true;
+  const narrow = !isTop && !folded && (gnb2?.narrow ?? false);
   const c = GNB_SYSTEM_COLOR_CONFIG[color];
   const t = GNB_SYSTEM_TOP_COLOR_CONFIG[color];
   const itemColor = isTop ? t.item : color;
@@ -10212,13 +10221,39 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
     setAccountOpen(next);
     account?.onOpenChange?.(next);
   };
+  const alertButtonRef = react.useRef(null);
+  const [alertListOpen, setAlertListOpen] = react.useState(false);
+  const hasAlertList = alert2?.listBox != null;
+  const commitAlertListOpen = (next) => {
+    setAlertListOpen(next);
+    alert2?.onOpenChange?.(next);
+  };
   react.useEffect(() => {
     if (active || !accountOpen) return;
     setAccountOpen(false);
     account?.onOpenChange?.(false);
   }, [active, accountOpen, account]);
+  react.useEffect(() => {
+    if (active || !alertListOpen) return;
+    setAlertListOpen(false);
+    alert2?.onOpenChange?.(false);
+  }, [active, alertListOpen, alert2]);
   const alertCount = alert2?.count ?? 0;
   const notified = alertCount > 0;
+  const alertTooltip = (alert2?.tooltip ?? []).filter((line) => line.trim() !== "");
+  const hasAlertTooltip = alertTooltip.length > 0;
+  const [alertTooltipDismissed, setAlertTooltipDismissed] = react.useState(false);
+  const hadAlertTooltip = react.useRef(hasAlertTooltip);
+  if (hadAlertTooltip.current !== hasAlertTooltip) {
+    hadAlertTooltip.current = hasAlertTooltip;
+    if (hasAlertTooltip && alertTooltipDismissed) setAlertTooltipDismissed(false);
+  }
+  const alertTooltipOpen = hasAlertTooltip && active && !alertTooltipDismissed;
+  const dismissAlertTooltip = () => {
+    if (!alertTooltipOpen) return;
+    setAlertTooltipDismissed(true);
+    alert2?.onTooltipDismiss?.();
+  };
   const alertLabel = alert2?.label ?? GNB_SYSTEM_ALERT_LABEL;
   const settingLabel = setting?.label ?? GNB_SYSTEM_SETTING_LABEL;
   const alertButton = alert2 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -10231,13 +10266,51 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
       paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
       iconColor: notified ? alertIconColor : void 0,
       hoverBg: notified ? alertHoverBg : void 0,
-      count: folded ? void 0 : alertCount,
-      dot: folded && notified,
+      count: folded || narrow ? void 0 : alertCount,
+      dot: (folded || narrow) && notified,
       accentColor: alertCountColor,
       stretch: !folded && !isTop,
-      onClick: alert2.onClick
+      ref: alertButtonRef,
+      hasPopup: hasAlertList,
+      expanded: alertListOpen,
+      onClick: () => {
+        dismissAlertTooltip();
+        alert2.onClick?.();
+        if (hasAlertList) commitAlertListOpen(!alertListOpen);
+      },
+      onMouseLeave: hasAlertTooltip ? dismissAlertTooltip : void 0
     }
   );
+  const alertListBox = alert2 && hasAlertList && /* @__PURE__ */ jsxRuntime.jsx(
+    SPortal,
+    {
+      open: alertListOpen && active,
+      onClose: () => commitAlertListOpen(false),
+      anchorRef: alertButtonRef,
+      placement: isTop ? "bottom" : "right",
+      align: "end",
+      offset: 8,
+      viewportPadding: 8,
+      ariaLabel: alert2.label ?? GNB_SYSTEM_ALERT_LABEL,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      className: "rounded-(--radius-8)",
+      children: alert2.listBox
+    }
+  );
+  const alertNode = alertButton && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasAlertTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
+      STooltip2,
+      {
+        trigger: "none",
+        open: alertTooltipOpen,
+        message: alertTooltip,
+        tooltipType: color === "light" ? "default" : "accent",
+        placement: isTop ? "bottom" : "right",
+        children: alertButton
+      }
+    ) : alertButton,
+    alertListBox
+  ] });
   const settingButton = setting && /* @__PURE__ */ jsxRuntime.jsx(
     SystemButton,
     {
@@ -10293,7 +10366,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         )
       })
     );
-    if (alertButton) segments.push({ key: "alert", node: alertButton });
+    if (alertNode) segments.push({ key: "alert", node: alertNode });
     if (settingButton) segments.push({ key: "setting", node: settingButton });
     if (domainTag || accountButton) {
       segments.push({
@@ -10351,7 +10424,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         "data-folded": "",
         ...rest,
         children: [
-          alertButton,
+          alertNode,
           account && /* @__PURE__ */ jsxRuntime.jsx(
             SystemButton,
             {
@@ -10359,7 +10432,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
               icon: "user",
               ariaLabel: account.label ?? "account",
               paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-              buttonRef: foldedAccountRef,
+              ref: foldedAccountRef,
               hasPopup: true,
               expanded: accountOpen,
               onClick: () => {
@@ -10405,7 +10478,7 @@ var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
         domainTag,
         hasUserBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           (alert2 || setting) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
-            alertButton,
+            alertNode,
             alert2 && setting && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {