@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.130

package/dist/components/Dialog/dialog.d.ts

@@ -15,14 +15,14 @@ import { type SurfaceHeaderProps } from "../../patterns/overlay-surface/overlay-
  *
  * ── 高度行為 ──
  * 預設：height 填滿 viewport（扣除 inset），body 捲動。防止動態內容跳動。
- * height="auto"：高度隨內容，超過 viewport 時 max-height 安全帽。
+ * autoHeight（boolean）：高度隨內容，超過 viewport 時 max-height 安全帽。
  */
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+interface DialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'> {
     /** 最大寬度。預設 512px。傳 number 視為 px。 */
     maxWidth?: string | number;
     /**
@@ -33,8 +33,25 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
     autoHeight?: boolean;
 }
 declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogHeader: React.ForwardRefExoticComponent<SurfaceHeaderProps & React.RefAttributes<HTMLDivElement>>;
-declare const DialogBody: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface DialogHeaderProps extends SurfaceHeaderProps {
+    /**
+     * Header 級操作 cluster(2026-07-08 WM 戰役 codify — 關閉鈕分隔線 SSOT 化)。
+     *
+     * 提供時 render 在 Close X 左側,DS 自動在 actions 與 Close 之間放 `<ButtonDivider>`
+     * (action-bar.spec.md:281「最右側為關閉/解除按鈕 → 分隔線必須(誤觸保護)」;
+     * 幾何 = ButtonDivider mx-1 於 gap-2 cluster → 12px 對稱,同 spec「分隔線幾何」段)。
+     *
+     * 用例:任務詳情 prev/next 導覽、header 級溢出選單(⋮)。
+     * Consumer 傳 `<Button variant="text" iconOnly …>`(text variant 自動 data-unbounded,
+     * 不撐高 chrome header)。**禁**在 children 內自刻 cluster + divider(分隔線落點歸 DS)。
+     */
+    actions?: React.ReactNode;
+}
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogBody: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-scroll-area").ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+    fillX?: boolean;
+    viewportTabIndex?: 0 | -1 | null;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
@@ -43,7 +60,7 @@ export declare const dialogMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface-raised"];
         readonly fg: readonly ["text-fg-secondary"];

package/dist/components/Dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,0DAA0D,CAAA;AAGhI;;;;;;;;;;;;;;;GAeG;AAEH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AACnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAKzC,QAAA,MAAM,aAAa,8JAcjB,CAAA;AAGF,UAAU,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACjG,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,aAAa,2FAiEjB,CAAA;AASF,QAAA,MAAM,YAAY,2FAsBhB,CAAA;AA0BF,QAAA,MAAM,UAAU,oOAcd,CAAA;AAIF,QAAA,MAAM,YAAY,6GAGiE,CAAA;AAGnF,QAAA,MAAM,WAAW,oKASf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KAWrB,CAAA;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAMzD,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,0DAA0D,CAAA;AAKhI;;;;;;;;;;;;;;;GAeG;AAEH,QAAA,MAAM,MAAM,uCAAuB,CAAA;AACnC,QAAA,MAAM,aAAa,8GAA0B,CAAA;AAC7C,QAAA,MAAM,YAAY,6CAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,4GAAwB,CAAA;AAKzC,QAAA,MAAM,aAAa,8JAcjB,CAAA;AAMF,UAAU,kBAAmB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAClH,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,aAAa,2FAiEjB,CAAA;AASF,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,YAAY,0FAwChB,CAAA;AA0BF,QAAA,MAAM,UAAU;;;sFAcd,CAAA;AAIF,QAAA,MAAM,YAAY,6GAGiE,CAAA;AAGnF,QAAA,MAAM,WAAW,oKAcf,CAAA;AAGF,QAAA,MAAM,iBAAiB,8KAWrB,CAAA;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;CAgBb,CAAA;AAEV,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA"}

package/dist/components/Dialog/dialog.js

@@ -4,8 +4,11 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../Button/button.js";
+import { ButtonDivider } from "../Button/button-group.js";
 import { SurfaceFooter, SurfaceHeader } from "../../patterns/overlay-surface/overlay-surface.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { TruncatedText } from "../../patterns/element-anatomy/truncated-text.js";
+import { surfaceMotion } from "../../tokens/motion/overlay-motion.js";
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
@@ -51,7 +54,8 @@ const DialogContent = React.forwardRef(({ className, maxWidth = "512px", autoHei
         className: cn(
           "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2",
           "flex flex-col bg-surface-raised rounded-lg border border-border",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
+          surfaceMotion,
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
           "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
@@ -71,26 +75,41 @@ const DialogContent = React.forwardRef(({ className, maxWidth = "512px", autoHei
   ] });
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = React.forwardRef(({ className, children, ...props }, ref) => (
-  // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,
-  // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。
-  // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。
-  // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。
-  /* @__PURE__ */ jsxs(
-    SurfaceHeader,
-    {
-      ref,
-      className,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
-        /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
-      ]
-    }
-  )
-));
+const DialogHeader = React.forwardRef(({ className, children, actions, ...props }, ref) => {
+  const closeButton = /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) });
+  return (
+    // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,
+    // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。
+    // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。
+    // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。
+    /* @__PURE__ */ jsxs(
+      SurfaceHeader,
+      {
+        ref,
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
+          actions != null ? (
+            // actions 提供 → 右側一體 cluster:{actions} + ButtonDivider + Close。
+            // 分隔線 = 關閉保護 canonical(action-bar.spec.md:281),由 DS 放,consumer 零自刻。
+            // gap-2 + ButtonDivider mx-1 = 兩側 12px 對稱(action-bar.spec.md「分隔線幾何」)。
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              actions,
+              /* @__PURE__ */ jsx(ButtonDivider, {}),
+              closeButton
+            ] })
+          ) : (
+            // 無 actions → 原結構(Close 直接是 SurfaceHeader child),行為零回歸
+            closeButton
+          )
+        ]
+      }
+    )
+  );
+});
 DialogHeader.displayName = "DialogHeader";
-const DialogBody = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea, { ref, "data-dialog-body": true, className: "flex-1 min-h-0", ...props, children: /* @__PURE__ */ jsx(
+const DialogBody = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(ScrollArea, { fillX: true, ref, "data-dialog-body": true, className: "flex-1 min-h-0", ...props, children: /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -103,12 +122,13 @@ const DialogBody = React.forwardRef(({ className, children, ...props }, ref) =>
 DialogBody.displayName = "DialogBody";
 const DialogFooter = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(SurfaceFooter, { ref, "data-dialog-footer": true, ...props }));
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DialogTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
     className: cn("text-body-lg font-medium truncate", className),
-    ...props
+    ...props,
+    children: /* @__PURE__ */ jsx(TruncatedText, { display: "block", children })
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
@@ -127,7 +147,8 @@ const dialogMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊:容器無 hover/active/disabled 態(spec「狀態處理的職責邊界」明文;對齊 popover meta 已修 pattern)
+  states: ["default"],
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["text-fg-secondary"],

package/dist/components/Dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../src/components/Dialog/dialog.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { SurfaceHeader, SurfaceFooter, type SurfaceHeaderProps } from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\n\n/**\n * Dialog (Modal) — Radix Dialog + 設計系統 token\n *\n * ── Layout ──\n * px = layout-space-loose, header/footer py = layout-space-tight。\n * Body pt = layout-space-tight, pb = layout-space-bottom。\n * Density:繼承 page `data-density`(v5 校準,跟 Sheet 對齊;header 自動對齊\n * `--chrome-header-height` 48/56)。詳 dialog.spec.md「Density」節。\n *\n * ── Viewport Inset ──\n * Modal 與 viewport 四邊保持 layout-space-bottom (48px) 最小間距。\n *\n * ── 高度行為 ──\n * 預設：height 填滿 viewport（扣除 inset），body 捲動。防止動態內容跳動。\n * height=\"auto\"：高度隨內容，超過 viewport 時 max-height 安全帽。\n */\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\nconst DialogPortal = DialogPrimitive.Portal\nconst DialogClose = DialogPrimitive.Close\n\n// Modal 與 viewport 四邊的最小間距 = layout-space-bottom (48px)\nconst DIALOG_INSET_VAR = 'var(--layout-space-bottom)'\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay\",\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\ninterface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** 最大寬度。預設 512px。傳 number 視為 px。 */\n  maxWidth?: string | number\n  /**\n   * 高度模式。\n   * - 不傳（預設）：填滿 viewport（height = 100vh - inset*2），body 捲動。防止內容跳動。\n   * - true：高度隨內容，超過 viewport 時捲動（max-height 安全帽）。\n   */\n  autoHeight?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, maxWidth = '512px', autoHeight, children, style, ...props }, ref) => {\n  const insetCalc = `${DIALOG_INSET_VAR} * 2`\n  const viewportH = `calc(100vh - ${insetCalc})`\n  const maxWidthCss = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth\n\n  const heightStyle: React.CSSProperties = autoHeight\n    ? { maxHeight: viewportH }\n    : { height: viewportH }\n\n  // AutoFocus canonical(對齊 Material / Polaris / Atlassian)—\n  // 開啟時 focus 落在 body 第一個有意義互動元素(input / button),不是 chrome close X。\n  // 預設 Radix 會 focus first tabbable = close X → Button iconOnly 的 focus-triggered\n  // tooltip 會立即顯示「關閉」,user-hostile。此 callback 攔截:先找 body 第一個\n  // input/textarea/select/button(排除 data-dismiss)focus;找不到就 focus container(不 focus X)。\n  const handleOpenAutoFocus = (e: Event) => {\n    e.preventDefault()\n    const content = e.currentTarget as HTMLElement\n    const firstBodyTarget = content.querySelector<HTMLElement>(\n      '[data-dialog-body] input:not([disabled]),[data-dialog-body] textarea:not([disabled]),[data-dialog-body] select:not([disabled]),[data-dialog-body] button:not([disabled]):not([data-dismiss])'\n    )\n    const firstFooterButton = content.querySelector<HTMLElement>(\n      '[data-dialog-footer] button:not([disabled]):not([data-dismiss])'\n    )\n    ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n  }\n\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        // Density canonical(2026-04-22 v5 校準):Dialog 繼承 page density(跟 Sheet 對齊\n        // sheet.tsx line 111 canonical),不自設 data-layout-space=\"lg\" 或 data-density。\n        //\n        // 先前曾設 `data-layout-space=\"lg\"` 給 header/body 寬鬆呼吸,但跟 chrome-header-height\n        // canonical 衝突(md page dialog header 期望 48,強設 lg 會變 56)。\n        // 世界級對照:Polaris Modal horizontal padding 16 / Material M3 24 / Atlassian 24 — 16 是\n        // 合理 lower bound;md page 用 16 loose body padding 可接受,lg page 自動 24。\n        // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n        onOpenAutoFocus={handleOpenAutoFocus}\n        className={cn(\n          \"fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          \"flex flex-col bg-surface-raised rounded-lg border border-border\",\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n          \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--elevation-200)',\n          maxWidth: `min(${maxWidthCss}, calc(100vw - ${insetCalc}))`,\n          ...heightStyle,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n// DialogHeader: SurfaceHeader + Close 按鈕(Dialog 特有)\n// justify-between 讓 children 與 Close 分左右;Close 用 Radix DialogPrimitive.Close 包裝。\n// 2026-05-18 audit gap fix:type 用 SurfaceHeaderProps 對齊 — DialogHeader 是 SurfaceHeader\n// 薄包裝,withTabs / lockDensity 等 props 透過 spread 已 forward,但 TS type 沒 expose\n// 導致 consumer 不能用 `<DialogHeader withTabs>` 而只能寫 `as any` 繞。Type lift 修\n// per header-canonical.spec.md W1 跨 6 consumer 同契約。\nconst DialogHeader = React.forwardRef<\n  HTMLDivElement,\n  SurfaceHeaderProps\n>(({ className, children, ...props }, ref) => (\n  // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,\n  // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。\n  // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。\n  // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。\n  <SurfaceHeader\n    ref={ref}\n    className={className}\n    {...props}\n  >\n    <div className=\"flex-1 min-w-0\">{children}</div>\n    {/* Dismiss X(chrome-slot canonical,v5):Button 本身 native sm(28 md / 32 lg,touch target 亦同),\n        但 data-dismiss attribute 讓 SurfaceHeader CSS rule 套負 my 讓 layout 佔位 = 24,\n        header = 24 + 2×tight = 48 / 56 chrome-header-height ✓。\n        詳 overlay-surface.spec.md「Chrome dismiss size canonical」*/}\n    <DialogPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </DialogPrimitive.Close>\n  </SurfaceHeader>\n))\nDialogHeader.displayName = \"DialogHeader\"\n\n// DialogBody: flex-1 ScrollArea + chrome padding(對齊 overlay-surface SSOT + ScrollArea canonical)\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom(Dialog 「大容器」底部多一拍呼吸)。\n// data-dialog-body:讓 DialogContent onOpenAutoFocus 找得到 body 第一個有意義互動元素(避免 focus 到 close X)\n//\n// ── List-as-region 場景(menu group / Cmd+K)──\n// 不再提供 `flush` variant(2026-05-01 移除,先前曾叫 `variant=\"list\"`)。\n// **canonical pattern** = consumer 自管 list outer wrapper + 用 `className` override 撤掉 chrome padding:\n// ```tsx\n// <DialogBody className=\"!px-0 !pt-0 !pb-0\">\n//   <div className=\"py-2\">  {/* list outer wrapper 自帶 py-2(menu group canonical)*/}\n//     {items.map(item => <MenuItem className=\"px-[var(--layout-space-loose)] rounded-md\" />)}\n//   </div>\n// </DialogBody>\n// ```\n// **rationale**:flush 只為 list-only body 省一行 className,但 (a) 多一個 row(search / banner)\n// 就破功 → 保留 chrome padding 反而更穩,(b) 加新 variant 不解決底層脆弱(consumer 仍要管 list py\n// 且 item px-loose),反而把 1 個 surface decision 拆兩 API。世界級主流(Material/Atlassian/Mantine/\n// shadcn)無 universal LayoutBody flush variant,Polaris flush API 只用於極窄 scope。\n// 詳 `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」節\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<DialogBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 modal form field 完全貼邊。\nconst DialogBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea ref={ref} data-dialog-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nDialogBody.displayName = \"DialogBody\"\n\n// DialogFooter: SurfaceFooter wrap 加 data-dialog-footer(autoFocus fallback target)\nconst DialogFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-dialog-footer {...props} />)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:DialogTitle 是 body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定 token 選擇;item-anatomy Family 2 reading-family token 對照表)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const dialogMeta = {\n  component: 'Dialog',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":["XIcon"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../../src/components/Dialog/dialog.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { ButtonDivider } from \"@/design-system/components/Button/button-group\"\nimport { SurfaceHeader, SurfaceFooter, type SurfaceHeaderProps } from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { TruncatedText } from \"@/design-system/patterns/element-anatomy/truncated-text\"\nimport { surfaceMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/**\n * Dialog (Modal) — Radix Dialog + 設計系統 token\n *\n * ── Layout ──\n * px = layout-space-loose, header/footer py = layout-space-tight。\n * Body pt = layout-space-tight, pb = layout-space-bottom。\n * Density:繼承 page `data-density`(v5 校準,跟 Sheet 對齊;header 自動對齊\n * `--chrome-header-height` 48/56)。詳 dialog.spec.md「Density」節。\n *\n * ── Viewport Inset ──\n * Modal 與 viewport 四邊保持 layout-space-bottom (48px) 最小間距。\n *\n * ── 高度行為 ──\n * 預設：height 填滿 viewport（扣除 inset），body 捲動。防止動態內容跳動。\n * autoHeight（boolean）：高度隨內容，超過 viewport 時 max-height 安全帽。\n */\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\nconst DialogPortal = DialogPrimitive.Portal\nconst DialogClose = DialogPrimitive.Close\n\n// Modal 與 viewport 四邊的最小間距 = layout-space-bottom (48px)\nconst DIALOG_INSET_VAR = 'var(--layout-space-bottom)'\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-overlay\",\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\n// asChild Omit(2026-07-18 決策2):DialogContent 是固定 surface chrome(overlay + 定位 +\n// bg/rounded/shadow + onOpenAutoFocus),恆渲染 {children}(consumer body,通常 Header+Body+Footer\n// 多節點)→ <Content asChild> Radix Slot React.Children.only crash。children 保留(consumer body)。\ninterface DialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'> {\n  /** 最大寬度。預設 512px。傳 number 視為 px。 */\n  maxWidth?: string | number\n  /**\n   * 高度模式。\n   * - 不傳（預設）：填滿 viewport（height = 100vh - inset*2），body 捲動。防止內容跳動。\n   * - true：高度隨內容，超過 viewport 時捲動（max-height 安全帽）。\n   */\n  autoHeight?: boolean\n}\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ className, maxWidth = '512px', autoHeight, children, style, ...props }, ref) => {\n  const insetCalc = `${DIALOG_INSET_VAR} * 2`\n  const viewportH = `calc(100vh - ${insetCalc})`\n  const maxWidthCss = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth\n\n  const heightStyle: React.CSSProperties = autoHeight\n    ? { maxHeight: viewportH }\n    : { height: viewportH }\n\n  // AutoFocus canonical(對齊 Material / Polaris / Atlassian)—\n  // 開啟時 focus 落在 body 第一個有意義互動元素(input / button),不是 chrome close X。\n  // 預設 Radix 會 focus first tabbable = close X → Button iconOnly 的 focus-triggered\n  // tooltip 會立即顯示「關閉」,user-hostile。此 callback 攔截:先找 body 第一個\n  // input/textarea/select/button(排除 data-dismiss)focus;找不到就 focus container(不 focus X)。\n  const handleOpenAutoFocus = (e: Event) => {\n    e.preventDefault()\n    const content = e.currentTarget as HTMLElement\n    const firstBodyTarget = content.querySelector<HTMLElement>(\n      '[data-dialog-body] input:not([disabled]),[data-dialog-body] textarea:not([disabled]),[data-dialog-body] select:not([disabled]),[data-dialog-body] button:not([disabled]):not([data-dismiss])'\n    )\n    const firstFooterButton = content.querySelector<HTMLElement>(\n      '[data-dialog-footer] button:not([disabled]):not([data-dismiss])'\n    )\n    ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n  }\n\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        // Density:**全繼承 page**(layout-space + ui-size 都不自鎖)。2026-06-16 定論(撤回本 session 一度加的\n        // data-layout-space=\"lg\"):density.spec 第 10 行親自定義 layout-space 管「dialog body padding」——\n        // Dialog 鎖死它 = override 自家 dial 對它點名要管的對象失效 = 自相矛盾。有同類 padding-density dial 的\n        // 世界級(SAP Fiori syncStyleClass / AWS Cloudscape「all view types」)都讓 modal 跟 page dial 走、不鎖固定 tier。\n        // 效果:md page → body px-loose 16 / header py-tight 12(header 48);lg page → 24 / 16(header 56),隨 page。\n        // 「modal 要寬鬆」需求在 lg 階自然滿足(Polaris modal 16 = 世界級下限,證明 md 16 合格);「button 不撐高\n        // header」由 ui-size 繼承 page 解決(button=page sm),與 layout-space 鎖不鎖無關 → 故不需鎖。\n        onOpenAutoFocus={handleOpenAutoFocus}\n        className={cn(\n          \"fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          \"flex flex-col bg-surface-raised rounded-lg border border-border\",\n          surfaceMotion,\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n          \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--elevation-200)',\n          maxWidth: `min(${maxWidthCss}, calc(100vw - ${insetCalc}))`,\n          ...heightStyle,\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\n// DialogHeader: SurfaceHeader + Close 按鈕(Dialog 特有)\n// Close 靠右由「第一 child flex-1 grow」達成(justify-between 已移除,見 return 註解);Close 用 Radix DialogPrimitive.Close 包裝。\n// 2026-05-18 audit gap fix:type 用 SurfaceHeaderProps 對齊 — DialogHeader 是 SurfaceHeader\n// 薄包裝,withTabs / tabsSlot props 透過 spread 已 forward,但 TS type 沒 expose\n// 導致 consumer 不能用 `<DialogHeader withTabs>` 而只能寫 `as any` 繞。Type lift 修\n// per header-canonical.spec.md W1 跨 6 consumer 同契約。\nexport interface DialogHeaderProps extends SurfaceHeaderProps {\n  /**\n   * Header 級操作 cluster(2026-07-08 WM 戰役 codify — 關閉鈕分隔線 SSOT 化)。\n   *\n   * 提供時 render 在 Close X 左側,DS 自動在 actions 與 Close 之間放 `<ButtonDivider>`\n   * (action-bar.spec.md:281「最右側為關閉/解除按鈕 → 分隔線必須(誤觸保護)」;\n   * 幾何 = ButtonDivider mx-1 於 gap-2 cluster → 12px 對稱,同 spec「分隔線幾何」段)。\n   *\n   * 用例:任務詳情 prev/next 導覽、header 級溢出選單(⋮)。\n   * Consumer 傳 `<Button variant=\"text\" iconOnly …>`(text variant 自動 data-unbounded,\n   * 不撐高 chrome header)。**禁**在 children 內自刻 cluster + divider(分隔線落點歸 DS)。\n   */\n  actions?: React.ReactNode\n}\n\nconst DialogHeader = React.forwardRef<\n  HTMLDivElement,\n  DialogHeaderProps\n>(({ className, children, actions, ...props }, ref) => {\n  // Dismiss X(chrome-slot canonical,v5):Button 本身 native sm(28 md / 32 lg,touch target 亦同),\n  // 但 `dismiss` prop 自動標 `data-unbounded`,SurfaceHeader CSS rule 對其套負 my 讓\n  // layout 佔位 = 24(`data-dismiss` 僅作 openAutoFocus 排除 marker,與縮位無關),\n  // header = 24 + 2×tight = 48 / 56 chrome-header-height ✓。\n  // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n  const closeButton = (\n    <DialogPrimitive.Close asChild>\n      <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n    </DialogPrimitive.Close>\n  )\n  return (\n    // 2026-05-18:className 不再硬加 justify-between(冗餘:row 1 是 flex items-center gap-2,\n    // 第一 child flex-1 grow 自然 push close X 靠右,跟 justify-between 同視覺)。\n    // 並且 column mode(tabsSlot 提供)justify-between 會把 row 1 / row 2 上下推開 = 破裂。\n    // tabsSlot via `...props` spread 自動 forward(type 來自 SurfaceHeaderProps)。\n    <SurfaceHeader\n      ref={ref}\n      className={className}\n      {...props}\n    >\n      <div className=\"flex-1 min-w-0\">{children}</div>\n      {actions != null ? (\n        // actions 提供 → 右側一體 cluster:{actions} + ButtonDivider + Close。\n        // 分隔線 = 關閉保護 canonical(action-bar.spec.md:281),由 DS 放,consumer 零自刻。\n        // gap-2 + ButtonDivider mx-1 = 兩側 12px 對稱(action-bar.spec.md「分隔線幾何」)。\n        <div className=\"flex items-center gap-2 shrink-0\">\n          {actions}\n          <ButtonDivider />\n          {closeButton}\n        </div>\n      ) : (\n        // 無 actions → 原結構(Close 直接是 SurfaceHeader child),行為零回歸\n        closeButton\n      )}\n    </SurfaceHeader>\n  )\n})\nDialogHeader.displayName = \"DialogHeader\"\n\n// DialogBody: flex-1 ScrollArea + chrome padding(對齊 overlay-surface SSOT + ScrollArea canonical)\n// 捲軸必用 ScrollArea(跨 OS 一致、不吃寬度)— 不自寫 overflow-y-auto。\n// padding 搬進 viewport inner div:px-loose / pt-tight / pb-bottom(Dialog 「大容器」底部多一拍呼吸)。\n// data-dialog-body:讓 DialogContent onOpenAutoFocus 找得到 body 第一個有意義互動元素(避免 focus 到 close X)\n//\n// ── List-as-region 場景(menu group / Cmd+K)──\n// 不再提供 `flush` variant(2026-05-01 移除,先前曾叫 `variant=\"list\"`)。\n// **canonical pattern** = consumer 自管 list outer wrapper + 用 `className` override 撤掉 chrome padding:\n// ```tsx\n// <DialogBody className=\"!px-0 !pt-0 !pb-0\">  ← @tabs-content-gap-ok: JSDoc 文件範例(list-as-region canonical,非 tabs !pt-0 hack)\n//   <div className=\"py-2\">  {/* list outer wrapper 自帶 py-2(menu group canonical)*/}\n//     {items.map(item => <MenuItem className=\"px-[var(--layout-space-loose)] rounded-md\" />)}\n//   </div>\n// </DialogBody>\n// ```\n// **rationale**:flush 只為 list-only body 省一行 className,但 (a) 多一個 row(search / banner)\n// 就破功 → 保留 chrome padding 反而更穩,(b) 加新 variant 不解決底層脆弱(consumer 仍要管 list py\n// 且 item px-loose),反而把 1 個 surface decision 拆兩 API。世界級主流(Material/Atlassian/Mantine/\n// shadcn)無 universal LayoutBody flush variant,Polaris flush API 只用於極窄 scope。\n// 詳 `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」節\n// `className` forward 到 **inner content div**(非外層 ScrollArea wrapper)——\n// consumer `<DialogBody className=\"flex flex-col gap-X\">` 期望作用於 children 排列;\n// 套在 ScrollArea 上會 0 效果(children 住 inner div),曾造成 modal form field 完全貼邊。\nconst DialogBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<typeof ScrollArea>\n>(({ className, children, ...props }, ref) => (\n  <ScrollArea fillX ref={ref} data-dialog-body className=\"flex-1 min-h-0\" {...props}>\n    <div\n      className={cn(\n        \"px-[var(--layout-space-loose)] pt-[var(--layout-space-tight)] pb-[var(--layout-space-bottom)]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </ScrollArea>\n))\nDialogBody.displayName = \"DialogBody\"\n\n// DialogFooter: SurfaceFooter wrap 加 data-dialog-footer(autoFocus fallback target)\nconst DialogFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ ...props }, ref) => <SurfaceFooter ref={ref} data-dialog-footer {...props} />)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-body-lg font-medium truncate\", className)}\n    {...props}\n  >\n    {/* 2026-07-28:截斷必附 tooltip(tooltip.spec.md「截斷 → tooltip,僅實際截斷時顯示」)——\n        title 單行 truncate 被裁掉後沒有 hover 補救路徑。display=\"block\":h2 是 block container,\n        inline span 量測不到 clientWidth(對照 breadcrumb.tsx 同型消費)。 */}\n    <TruncatedText display=\"block\">{children}</TruncatedText>\n  </DialogPrimitive.Title>\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    // title → description 間距 canonical:DialogTitle 是 body-lg(16)+ desc body(14)→ reading-lg token\n    // (label tier 決定 token 選擇;item-anatomy Family 2 reading-family token 對照表)\n    className={cn(\"mt-[var(--item-gap-label-desc-reading-lg)] text-body text-fg-secondary\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const dialogMeta = {\n  component: 'Dialog',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-07-04 audit 對齊:容器無 hover/active/disabled 態(spec「狀態處理的職責邊界」明文;對齊 popover meta 已修 pattern)\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-fg-secondary'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],"names":["XIcon"],"mappings":"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"}

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAA"}

package/dist/components/Dialog/index.js

@@ -0,0 +1,16 @@
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogMeta } from "./dialog.js";
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  dialogMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/DropdownMenu/dropdown-menu.d.ts

@@ -26,19 +26,26 @@ import { type RowSize } from "../../patterns/element-anatomy/item-anatomy";
  * `:focus-visible` 行為不一致,導致 mouse hover 有時無 bg。改用 `data-[highlighted]:` 後行為
  * 一致 —— 世界級 canonical(shadcn / Radix docs / Ariakit 皆此)。
  */
+/** @internal — menu 形浮層共用 class(DropdownMenu/SelectMenu/Command 內部);consumer 不 hand-craft menu surface,用元件本身。root barrel 排除(subpath 仍可 wrap 後用)。 */
 declare const floatingLayerClass: string;
 type SizeKey = RowSize;
-declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenu: {
+    ({ open, defaultOpen, onOpenChange, modal, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+interface DropdownMenuContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, 'asChild'> {
     size?: SizeKey;
-    /** 最小寬度（px），預設跟隨觸發元件寬度 */
+    /** 最小寬度（px），預設 `max(180px, 觸發元件寬度)`——窄 trigger 時吃 180px 地板 */
     minWidth?: number;
-    /** 最大高度（px），超過時捲動 */
+    /**
+     * 最大高度（px）——**可選更低上限**。預設已 viewport-adaptive(夾到 trigger→視窗碰撞邊界的剩餘高度、
+     * 離窗 ≥8px、超過即捲動);傳 `maxHeight` 只在「想比視窗剩餘更矮」時用(取 `min(視窗剩餘, maxHeight)`)。
+     */
     maxHeight?: number;
 }
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -57,7 +64,8 @@ interface DropdownMenuItemProps extends Omit<React.ComponentPropsWithoutRef<type
     badge?: React.ReactNode;
     /** 後綴指示型 icon（LucideIcon），fg-muted */
     endIcon?: LucideIcon;
-    /** 鍵盤快捷鍵 */
+    /** 鍵盤快捷鍵提示(canonical)——渲染進 MenuItem `endContent` 正規後綴 slot。
+     *  替代方案是 `<DropdownMenuShortcut>` child(composition escape-hatch);**同 item 勿混用**。 */
     shortcut?: string;
     /** 單選選中（bg-neutral-selected，持續選中狀態）*/
     selected?: boolean;
@@ -83,7 +91,8 @@ interface DropdownMenuCheckboxItemProps extends Omit<React.ComponentPropsWithout
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+interface DropdownMenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, 'children'> {
+    children: React.ReactNode;
     /** Prefix icon(LucideIcon) */
     startIcon?: LucideIcon;
     /** 次要說明文字 */
@@ -96,14 +105,14 @@ declare const DropdownMenuShortcut: {
 };
 export declare const dropdownMenuMeta: {
     readonly component: "DropdownMenu";
-    readonly family: null;
+    readonly family: 1;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "active", "selected", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-neutral-hover", "bg-surface-raised", "bg-transparent"];
+        readonly bg: readonly ["bg-neutral-hover", "bg-neutral-selected", "bg-neutral-selected-focus", "bg-surface-raised", "bg-transparent"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
-        readonly ring: readonly [];
+        readonly ring: readonly ["ring-ring"];
     };
 };
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut, floatingLayerClass, };

package/dist/components/DropdownMenu/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/DropdownMenu/dropdown-menu.js

@@ -7,9 +7,11 @@ import { MenuItem } from "../Menu/menu-item.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
 import { useRowSize, RowSizeProvider, ICON_SIZE as ICON_SIZE$1 } from "../../patterns/element-anatomy/item-anatomy.js";
+import { overlayMotion } from "../../tokens/motion/overlay-motion.js";
 const floatingLayerClass = [
   "z-50 overflow-hidden rounded-lg border border-border bg-surface-raised",
-  "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
+  overlayMotion,
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
   "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
   "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
   "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
@@ -23,15 +25,50 @@ const radixItemClass = [
   "data-[highlighted]:bg-neutral-hover",
   "data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default"
 ].join(" ");
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Trigger,
-  {
-    ref,
-    className: cn("outline-none", className),
-    ...props
-  }
-));
+const DropdownMenuModalOpenContext = React.createContext(false);
+const DropdownMenu = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+  ...props
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const resolvedOpen = open ?? uncontrolledOpen;
+  const handleOpenChange = React.useCallback(
+    (nextOpen) => {
+      if (open === void 0) setUncontrolledOpen(nextOpen);
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [onOpenChange, open]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuModalOpenContext.Provider, { value: modal && resolvedOpen, children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      ...props
+    }
+  ) });
+};
+DropdownMenu.displayName = DropdownMenuPrimitive.Root.displayName;
+const DropdownMenuTrigger = React.forwardRef(({ className, tabIndex, ...props }, ref) => {
+  const modalOpen = React.useContext(DropdownMenuModalOpenContext);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      ref,
+      tabIndex: modalOpen ? -1 : tabIndex,
+      className: cn(
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        className
+      ),
+      ...props
+    }
+  );
+});
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
 const DropdownMenuGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Group,
@@ -52,19 +89,18 @@ const DropdownMenuContent = React.forwardRef(({ className, size = "md", sideOffs
     sideOffset,
     collisionPadding,
     align,
-    onCloseAutoFocus: (e) => e.preventDefault(),
-    className: cn(floatingLayerClass, !maxHeight && "py-2", className),
+    className: cn(floatingLayerClass, "flex flex-col min-h-0", className),
     style: {
       boxShadow: "var(--elevation-200)",
       minWidth: minWidth ?? "max(180px, var(--radix-dropdown-menu-trigger-width))",
-      maxHeight
+      // 2026-07-18 viewport-adaptive max-h(對齊 HoverCard/Popover 既有 canonical):夾到「trigger 到
+      //   碰撞邊界(已內縮 collisionPadding=8px)的剩餘高度」→ 高選單不溢出視窗、離視窗邊 ≥8px、
+      //   短選單仍貼內容;consumer `maxHeight` 為**可選更低上限**(min 取小者)。inline style 非 class,
+      //   故動態 maxHeight 不觸 Tailwind 掃描陷阱。
+      maxHeight: maxHeight ? `min(var(--radix-dropdown-menu-content-available-height, 100vh), ${maxHeight}px)` : "var(--radix-dropdown-menu-content-available-height, 100vh)"
     },
     ...props,
-    children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: maxHeight ? (
-      // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)
-      // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區
-      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[inherit]", children: /* @__PURE__ */ jsx("div", { className: "py-2", children }) })
-    ) : children })
+    children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", viewportTabIndex: null, children: /* @__PURE__ */ jsx("div", { className: "py-2", children }) }) })
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
@@ -90,7 +126,7 @@ function buildEndContent(size, badge, endIcon, shortcut) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     badge,
     EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconPx, className: "text-fg-muted", "aria-hidden": true }),
-    shortcut && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted", children: shortcut })
+    shortcut && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted tracking-shortcut", children: shortcut })
   ] });
 }
 const DropdownMenuItem = React.forwardRef(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {
@@ -101,9 +137,18 @@ const DropdownMenuItem = React.forwardRef(({ className, children, startIcon, ava
     {
       ref,
       disabled,
+      textValue: typeof children === "string" ? children : void 0,
       className: cn(
         radixItemClass,
-        selected && "bg-neutral-selected",
+        // 2026-07-04 Q2 拍板:selected bg 勝 hover/highlighted(bg 是唯一選中指示器,被 hover 洗掉
+        // = 選中資訊消失)。對齊 MenuItem(menu-item.tsx selected 時關 hover bg)+ Ant Menu
+        // `:not(-item-selected)` + VS Code list `:hover:not(.selected)`;Radix highlighted 同時是
+        // keyboard cursor,selected 項停留時維持 selected bg(DS bg 通道單一職責)。
+        // 2026-07-05 D4 補完 Q2 附帶條件:selected×highlighted(鍵盤 cursor 停留)深化一階,cursor 可感知
+        //(WCAG 2.4.7)。2026-08-11 user 拍板糾正兩處(SSOT = item-anatomy「選中 × 互動疊加」):
+        //(1) Radix highlighted 滑鼠也觸發,深化僅限鍵盤 — 滑鼠 hover 釘住不變(not-hover 分流,
+        //     深化 (0,3,0) > 釘住 (0,2,0));(2) token 從借用的 -active(按壓專屬)歸位 -focus。
+        selected && "bg-neutral-selected data-[highlighted]:bg-neutral-selected data-[highlighted]:not-hover:bg-neutral-selected-focus",
         className
       ),
       ...props,
@@ -138,6 +183,7 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, children, startIco
     DropdownMenuPrimitive.SubTrigger,
     {
       ref,
+      textValue: typeof children === "string" ? children : void 0,
       className: cn(
         radixItemClass,
         "data-[state=open]:bg-neutral-hover",
@@ -167,6 +213,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, startI
       ref,
       checked,
       disabled,
+      textValue: typeof children === "string" ? children : void 0,
       onSelect: (e) => e.preventDefault(),
       className: cn(radixItemClass, className),
       ...props,
@@ -202,7 +249,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, children, ...props }, r
           size,
           header: true,
           role: "presentation",
-          className: "pointer-events-none",
+          className: "pointer-events-none text-fg-secondary",
           children
         }
       )
@@ -226,8 +273,9 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, startIcon
     {
       ref,
       disabled,
+      textValue: typeof children === "string" ? children : void 0,
       onSelect: (e) => e.preventDefault(),
-      className: cn(radixItemClass, "data-[state=checked]:[&>*]:bg-neutral-selected", className),
+      className: cn(radixItemClass, "data-[state=checked]:bg-neutral-selected data-[state=checked]:data-[highlighted]:bg-neutral-selected data-[state=checked]:data-[highlighted]:not-hover:bg-neutral-selected-focus", className),
       ...props,
       children: /* @__PURE__ */ jsx(
         MenuItem,
@@ -248,22 +296,25 @@ DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
-    className: cn("ml-auto text-footnote text-fg-muted tracking-shortcut", className),
+    className: cn("ml-auto text-caption text-fg-muted tracking-shortcut", className),
     ...props
   }
 );
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 const dropdownMenuMeta = {
   component: "DropdownMenu",
-  family: null,
-  // non-family composite / overlay / layout
+  family: 1,
+  // 對齊 dropdown-menu.spec.md frontmatter L3(Family 1 消費者;DS 慣例 = meta 對齊 spec frontmatter,原 null 是 Phase 1 boilerplate 殘留)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'selected' = 單選/checked item 持續選中(bg-neutral-selected);'active' 保留 — highlight-on-selected
+  // 走 bg-neutral-selected-focus(2026-08-11 token 歸位:-active 回歸按壓專屬;深化僅限鍵盤反白)。
+  states: ["default", "hover", "active", "selected", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-neutral-hover", "bg-surface-raised", "bg-transparent"],
+    bg: ["bg-neutral-hover", "bg-neutral-selected", "bg-neutral-selected-focus", "bg-surface-raised", "bg-transparent"],
     fg: ["text-fg-disabled", "text-fg-muted"],
-    ring: []
+    ring: ["ring-ring"]
+    // 2026-07-05:Trigger focus canonical ring(對齊 Checkbox/Tabs 等 meta 慣例)
   }
 };
 export {