@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.81

package/dist/components/Button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/Button/button.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.\n// code-quality-allow: file-size — foundational composite(Button + iconOnly + danger + loading + asChild + dismiss + pressedTone)— 跨 7 axis variant 集中 SSOT 一處,拆分會 fragment cva variant catalog。當前 528 < cap 800。\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\n\n/**\n * Button — shadcn 風格，橋接設計系統 token\n *\n * ── Variants ──\n *   primary    主要操作，藍底白字\n *   secondary  次要品牌操作，藍框藍字；正面 vs 負面並存時用於正面那個\n *   tertiary   一般輔助操作，灰框灰字，hover 轉藍（最常用的非主要按鈕）\n *   text       無底色無邊框，hover 顯示灰底（工具列、密集 UI）\n *   link       外觀像連結的按鈕（本質仍是 button）\n *\n * ── danger prop ──\n *   danger     套用危險色（紅色）；僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）\n *\n *   <Button variant=\"primary\" danger>永久刪除</Button>        → 紅底白字（立即不可逆）\n *   <Button variant=\"secondary\" danger>移至垃圾桶</Button>    → 紅框紅字（點下去還可反悔）\n *\n * ── pressed prop（toggle）──\n *   pressed    Toggle 按下狀態（持續 on/off），寫入 aria-pressed + data-state\n *   僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：\n *     - secondary + pressed → primary-subtle 底、primary 字、透明邊框\n *     - tertiary  + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）\n *     - text      + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底\n *   primary / link 傳入 pressed 無視覺效果（語意不符）\n *\n * ── Sizes（預設 md）──\n *   xs   h-field-xs（24px 固定），不隨 density 縮放\n *   sm   h-field-sm，md=28px / lg=32px\n *   md   h-field-md，md=32px / lg=36px  ← 預設（跟 Field/Input 對齊）\n *   lg   h-field-lg，md=36px / lg=40px\n *   icon-only 不是獨立尺寸 — 加 iconOnly prop 讓任何尺寸變正方形\n *\n * ── 內部結構 ──\n *   [startIcon?]  [label]  [badge? + endIcon?]\n *\n * ── 用法範例 ──\n *   <Button startIcon={Plus}>新增</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n *   <Button variant=\"primary\" danger>永久刪除</Button>\n *   <Button variant=\"text\" pressed={isPinned} startIcon={Pin} aria-label=\"釘選\" iconOnly />\n *   <Button badge={<Badge count={3} />} endIcon={ChevronDown}>通知</Button>\n *   <Button size=\"sm\" iconOnly startIcon={Plus} aria-label=\"新增\" />\n *   <Button iconOnly startIcon={Bell} aria-label=\"通知 (3 則)\"\n *           overlayBadge={<Badge count={3} />} />  ← badge 自動貼 icon 右上角\n *\n * ── asChild ──\n *   <Button asChild><Link to=\"/home\">回首頁</Link></Button>\n */\nconst buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'whitespace-nowrap font-medium',\n    'border border-transparent',\n    'transition-colors duration-150',\n    'cursor-pointer select-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):`aria-disabled` visual 分支補(per WAI-ARIA APG —\n    // aria-disabled 給語意 + visual,但不 suppress functionality;functionality 由 consumer 阻 e.g.\n    // RowDragHandle listeners 只在 canDrag spread)。**故意不加** `aria-disabled:pointer-events-none`\n    // — Round 4 RowDragHandle Tooltip flicker fix root cause:aria-disabled buttons 必保 pointer events\n    // 讓 Radix Tooltip pointerenter 通過。HTML `disabled` 保 PE:none(完全 inactive)。\n    'disabled:pointer-events-none',\n    // 2026-05-12 fix v2(playwright pixel-quantified verify 抓 opacity=1 不生效):\n    // `opacity-disabled` 是 custom Tailwind v4 `@utility`(opacity.css:21),variant prefix\n    // `aria-disabled:` 跟 custom @utility 不 compose(`aria-disabled:cursor-not-allowed` 標準\n    // utility 能 work,custom 不行)。改 arbitrary value `opacity-[var(--opacity-disabled)]`\n    // 繞 custom @utility 限制(Tailwind v4 arbitrary value 直接生 `opacity: var(--opacity-disabled)`)。\n    'aria-disabled:opacity-[var(--opacity-disabled)]',\n    'rounded-md',\n    // Defensive:SVG 不被 flex shrink 擠扁(防 inner-area 計算誤差導致 icon 被擠成\n    // width<intrinsic 的 asymmetric 顯示)。詳 ICON_ONLY_PX 段 rationale。\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary text-on-emphasis',\n          'hover:bg-primary-hover',\n          'active:bg-primary-active',\n          'disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent',\n        ],\n        secondary: [\n          'bg-surface text-primary border-primary',\n          'hover:text-primary-hover hover:border-primary-hover',\n          'active:text-primary-active active:border-primary-active',\n          // Overlay trigger active(asChild Popover/DropdownMenu trigger)— 維持 hover 樣式\n          // (canonical 對齊 inline-action.spec.md:trigger 維持 host hover 直到 overlay 關閉)\n          'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n          // 2026-05-21 v12:Toggle pressed 視覺移到 compoundVariants(variant × pressedTone),\n          // 同時支援 emphasis(藍底)/ neutral(灰底)兩 tone。詳 cva.compoundVariants 段。\n        ],\n        tertiary: [\n          'bg-surface text-foreground border-border',\n          'hover:text-primary-hover hover:border-primary-hover',\n          'active:text-primary-active active:border-primary-active',\n          // Overlay trigger active — 維持 hover 樣式(同 secondary 邏輯)\n          'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n        ],\n        text: [\n          'bg-transparent text-foreground border-transparent',\n          'hover:bg-neutral-hover',\n          'active:bg-neutral-active',\n          // Overlay trigger active — 維持 hover 樣式(canonical 2026-05-02 改:hover token,\n          // 不另開 selected 4% — 對齊 shadcn/Radix/Material 狀態極簡派,跨 host 一致)\n          'data-[state=open]:bg-neutral-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled',\n        ],\n        link: [\n          'bg-transparent text-primary border-transparent',\n          'hover:text-primary-hover',\n          'active:text-primary-active',\n          'disabled:text-fg-disabled',\n        ],\n      },\n      danger: {\n        true: '', // 實際樣式由 compoundVariants 提供\n      },\n      /**\n       * 2026-05-21 v12 — pressed visual tone(per user「我認同這一個方向,然後預設emphasis」):\n       * emphasis = 淡藍底(toolbar functional toggle / 篩選啟用 / 面板開關 — Figma toolbar /\n       *            Linear toolbar / Material ToggleButton 共識)\n       * neutral  = 灰底(sidebar/contextual nav row pressed — Linear / Notion / VS Code Activity Bar 共識)\n       * 預設 `emphasis` per user directive。實際樣式由 compoundVariants(variant × pressedTone)套用。\n       * 只在 secondary / tertiary / text variant 觸發 toggle 視覺;primary / link 無視覺效果。\n       */\n      pressedTone: {\n        emphasis: '',\n        neutral: '',\n      },\n      size: {\n        xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n        sm: 'h-field-sm px-3 min-w-14 text-body leading-compact gap-1',\n        md: 'h-field-md px-3 min-w-16 text-body leading-compact gap-1',\n        lg: 'h-field-lg px-3 min-w-20 text-body-lg leading-compact gap-1',\n      },\n    },\n    compoundVariants: [\n      // primary + danger → 紅底白字（立即不可逆操作）\n      {\n        variant: 'primary',\n        danger: true,\n        class: [\n          'bg-error text-on-emphasis border-transparent',\n          'hover:bg-error-hover',\n          'active:bg-error-active',\n        ],\n      },\n      // secondary + danger → 紅框紅字（有確認步驟的危險操作）\n      {\n        variant: 'secondary',\n        danger: true,\n        class: [\n          'bg-surface text-error border-error',\n          'hover:text-error-hover hover:border-error-hover',\n          'active:text-error-active active:border-error-active',\n        ],\n      },\n      // text + danger → 紅字，hover 灰底\n      {\n        variant: 'text',\n        danger: true,\n        class: [\n          'text-error',\n          'hover:bg-neutral-hover hover:text-error-hover',\n          'active:bg-neutral-active active:text-error-active',\n        ],\n      },\n      // ── 2026-05-21 v12 Toggle pressed(variant × pressedTone)──────────────────\n      // 視覺由 data-[state=on] + aria-pressed(Radix overlay trigger fallback)觸發\n      //\n      // emphasis tone:藍底(primary-subtle / primary 字)— functional toggle\n      {\n        variant: ['secondary', 'tertiary', 'text'],\n        pressedTone: 'emphasis',\n        class: [\n          'data-[state=on]:bg-primary-subtle data-[state=on]:text-primary data-[state=on]:border-transparent',\n          'data-[state=on]:hover:text-primary-hover',\n          'data-[state=on]:active:text-primary-active',\n          'data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent',\n          // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)\n          'aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent',\n          'aria-pressed:hover:text-primary-hover',\n        ],\n      },\n      // neutral tone:灰底(neutral-selected family)— sidebar/contextual nav pressed\n      {\n        variant: ['secondary', 'tertiary', 'text'],\n        pressedTone: 'neutral',\n        class: [\n          'data-[state=on]:bg-neutral-selected data-[state=on]:text-foreground data-[state=on]:border-transparent',\n          'data-[state=on]:hover:bg-neutral-selected-hover',\n          'data-[state=on]:active:bg-neutral-selected-active',\n          'data-[state=on]:disabled:bg-transparent data-[state=on]:disabled:text-fg-disabled',\n          // aria-pressed fallback\n          'aria-pressed:bg-neutral-selected aria-pressed:text-foreground aria-pressed:border-transparent',\n          'aria-pressed:hover:bg-neutral-selected-hover',\n        ],\n      },\n    ],\n    defaultVariants: {\n      // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。\n      // 真正預設邏輯在元件 resolvedVariant(L394);此 cva default 供直接 buttonVariants() 呼叫者一致。\n      variant: 'tertiary',\n      size: 'md',\n      pressedTone: 'emphasis',\n    },\n  }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup 提供此 context;Button 讀取它注入 fullWidth。\n// Context 放本檔(不放 button-group.tsx)以避免循環 import。\ninterface ButtonGroupContextValue {\n  fullWidth?: boolean\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\n\ntype InternalVariant = VariantProps<typeof buttonVariants>['variant']\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'danger'> {\n  /**\n   * 將樣式套用至子元件（e.g. React Router Link）。\n   *\n   * ⚠️ **icon-only + asChild 警告**:當 `iconOnly={true}` 且 `asChild={true}` 時,內建\n   * Tooltip wrapper 不啟動(Radix Slot 不接受多 child)。consumer 必須**自管 child 的 `aria-label`**\n   * 給 screen reader,並視需要自行包 `<Tooltip>`(對齊 Polaris / Radix asChild idiom)。\n   * Button 不會主動補 tooltip — 否則會破壞 Slot 單 child 規則。\n   */\n  asChild?: boolean\n  /**\n   * 按鈕視覺強調等級。\n   * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link'\n  /** 套用危險色（紅色）。僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）。 */\n  danger?: boolean\n  /**\n   * Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：\n   * - 自動寫入 `aria-pressed` + `data-state=\"on\" | \"off\"`\n   * - 樣式由 variant × `pressedTone` 的 compoundVariants 套用\n   * - 僅 secondary / tertiary / text 有 toggle 視覺；primary / link 傳入無效果\n   *\n   * 不傳此 prop 時 Button 就是一般按鈕，不帶 aria-pressed。\n   */\n  pressed?: boolean\n  /**\n   * Pressed 視覺色調(2026-05-21 v12 加):\n   * - `'emphasis'`(預設)→ 淡藍底 / primary 字(對齊 Figma toolbar / Linear toolbar /\n   *   Material ToggleButton 共識 — toolbar functional toggle / 篩選啟用 / 面板開關)\n   * - `'neutral'` → 灰底 / foreground 字(對齊 Linear / Notion / VS Code Activity Bar\n   *   共識 — sidebar/contextual nav row pressed)\n   *\n   * 僅在 `pressed` 啟用且 variant ∈ {secondary, tertiary, text} 時生效。\n   * 跨 toggle context 維持單一 prop API,consumer 視語意選 tone 不另開 variant。\n   */\n  pressedTone?: 'emphasis' | 'neutral'\n  /** 左側 icon（LucideIcon），最多一個，loading 時自動替換為 spinner */\n  startIcon?: LucideIcon\n  /** 右側 badge（ReactNode），通常傳入計數指示器 */\n  badge?: React.ReactNode\n  /**\n   * Overlay badge(iconOnly 專用)。接收 `<Badge>` 元素,Button 內部**自動定位在 startIcon 右上角**——\n   * badge 中心對齊 icon 的 top-right corner(Material BadgedBox / iOS App icon canonical),不是按鈕邊緣。\n   * 解決手刻 `relative + absolute -top-1 -right-1` 讓 badge 飄在按鈕 chrome 右上的問題。\n   *\n   * 世界級對照:Material BadgedBox、iOS App Icon、Ant Badge wrap icon,badge 相對於**視覺重心**(icon)。\n   * 只在 `iconOnly=true` 時生效;非 iconOnly 時應該用 inline `badge` prop 放 suffix 位置。\n   */\n  overlayBadge?: React.ReactNode\n  /** 右側 icon（LucideIcon），放在 badge 右邊，通常用於 ChevronDown 等方向指示 */\n  endIcon?: LucideIcon\n  /** Icon-only 模式：移除 padding，變為正方形（必須同時設定 aria-label） */\n  iconOnly?: boolean\n  /**\n   * Dismiss 視覺類(X close only canonical)。專用於 **X(close)icon 的 dismiss 語意** —\n   * 「關閉 surface / 忽略訊息」。**不適用 Trash / Delete / Clear / Remove 等 destructive / clear 操作**。\n   *\n   * 自動套用:\n   * - `variant=\"text\"`(強制 override 其他 variant)\n   * - `iconOnly=true`(強制)\n   * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)\n   *\n   * 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 **chrome corner close X**\n   * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。\n   *\n   * 非 dismiss(**不套此 prop**):\n   * - Trash / Delete → destructive action,Button 用一般 variant 或 Inline Action(按 row size 判)\n   * - Clear → 欄位清空,用 Inline Action\n   * - Remove → collection 移除,用一般 Button / Inline Action\n   *\n   * 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/item-anatomy.spec.md\n   * 「Dismiss canonical — X close only」段。\n   */\n  dismiss?: boolean\n  /** 載入中狀態：startIcon 替換為 spinner，自動 disabled；badge / endIcon 維持顯示以避免 layout shift */\n  loading?: boolean\n  /** 撐滿父容器寬度 */\n  fullWidth?: boolean\n}\n\n// IconOnly 用 padding-free + aspect-square + flex-center 的 Polaris/Atlassian idiom\n// (M17 SSOT 必可傳播 — 取代 4 個 size 的 magic-number 公式):\n//   - aspect-square 鎖 width=height(來自 h-field-X)\n//   - p-0 移除 px-3 (label 模式) override\n//   - flex justify-center items-center(base 已有)→ SVG 自動視覺置中\n// 結果:0 magic number,0 公式,0 border-deduction,任何 size / icon size 都自然正方形。\n// World-class 對照:Polaris + Atlassian iconOnly 走 padding-free 派(Material/Ant 走\n// padding-based)。我們選 padding-free 因 SSOT 性更強(SegmentedControl / Tag dismiss\n// 等 host 全可共用同 utility class,無需各自抄公式)。詳 button.spec.md「iconOnly 鐵律」。\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant: variantProp,\n      danger: dangerProp,\n      size,\n      asChild = false,\n      startIcon: StartIcon,\n      badge,\n      overlayBadge,\n      endIcon: EndIcon,\n      iconOnly = false,\n      dismiss = false,\n      loading = false,\n      fullWidth = false,\n      pressed,\n      pressedTone, // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    // ── FieldContext：在 Field 內自動讀 size，讓 Button 跟 Input 同高(SSOT:useResolvedFieldSize)──\n    const resolvedSize = useResolvedFieldSize(size, 'md')\n\n    // ── Dismiss 視覺類 override(2026-04-22 cross-implementation dimming canonical) ──\n    // dismiss=true 強制:variant=\"text\" + iconOnly=true + icon 色弱化(fg-muted → hover foreground)\n    // 跟 Inline Action dismiss 視覺一致。詳見 button.spec.md「Dismiss 視覺類」。\n    const resolvedIconOnly = iconOnly || dismiss\n\n    // ── Dev-mode warning:overlayBadge 只適用 iconOnly ──\n    // 有 label 的 Button 傳入 overlayBadge 會被忽略(只 render icon / 不渲染 overlay slot),\n    // 靜默忽略會讓 consumer 誤以為「傳了但位置錯」。Dev mode 印 warning 引導改用 `badge` prop\n    // (inline 位置,跟 label 並列)或改 `iconOnly`。Spec SSOT:badge.spec.md「Overlay 適用元件」。\n    if (process.env.NODE_ENV !== 'production' && overlayBadge && !iconOnly) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '[DS Button] `overlayBadge` 只適用於 `iconOnly` Button。有 label 的 Button 請改用 `badge` prop(inline 位置,跟 label 並列),或移除 label 改為 iconOnly。SSOT:badge.spec.md「Overlay 適用元件 canonical」節。'\n      )\n    }\n\n    // 2026-05-23 deep-audit Phase A.4 Decision 1(user verbatim「決策ㄧ照你建議做」):dev-warn `iconOnly + (endIcon|badge)` 並用。\n    // Spec SSOT:button.spec.md「iconOnly 嚴格定義為『只有一個 icon,正方形』,不可與 endIcon 或 badge 並用」。\n    // 例外:overlayBadge 跟 iconOnly 並用 canonical(L372 反向 warn 已 cover)。\n    // 不擋 image canonical「icon + 下拉指示 = 不加 iconOnly + startIcon + endIcon + aria-label」(那 case iconOnly=false 不 trigger)。\n    if (process.env.NODE_ENV !== 'production' && iconOnly && (EndIcon !== undefined || badge != null)) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '[DS Button] `iconOnly` 嚴格定義為「只有一個 icon,正方形」,不可與 `endIcon` 或 `badge` 並用。若需 icon + 下拉指示 → 不加 iconOnly + startIcon + endIcon + aria-label;若需 icon + 角標 → iconOnly + overlayBadge。SSOT:button.spec.md `iconOnly 的邊界` 節 + `badge.spec.md` Overlay 適用元件 canonical。'\n      )\n    }\n\n    // shadcn compat:AlertDialog、Toast 等元件內部會傳入這些 alias,\n    // 在此靜默轉換,不暴露到型別或自動完成。\n    // dismiss=true 強制 variant=text(dismiss canonical);override 其他 variant 傳入。\n    // 2026-06-06 預設 emphasis 改低(對齊世界級:MUI 預設 text / Ant 預設 default / Polaris 低 emphasis —\n    // 預設 primary CTA 是 outlier)。labeled 無 variant → `tertiary`(中性外框,清楚可點性,再按重要程度升 primary);\n    // iconOnly 無 variant → `text`(toolbar ghost,對齊 action-bar.spec.md「純動作工具/低重量輔助 → text」+\n    // Material 3「icon-only = no fill」)。**CTA 必 explicit `variant=\"primary\"`**(不靠預設)。dismiss 仍強制 text。\n    const resolvedVariant: InternalVariant =\n      dismiss ? 'text' :\n      (variantProp as string) === 'destructive' ? 'primary' :\n      (variantProp as string) === 'ghost'        ? 'text'    :\n      (variantProp as InternalVariant) ?? (iconOnly ? 'text' : 'tertiary')\n\n    const resolvedDanger = dangerProp || (variantProp as string) === 'destructive'\n\n    // ButtonGroup context：vertical group 自動注入 fullWidth\n    const groupCtx = React.useContext(ButtonGroupContext)\n    const resolvedFullWidth = fullWidth || !!groupCtx.fullWidth\n\n    const Comp = asChild ? Slot : 'button'\n    const iconSize = resolvedSize === 'lg' ? 20 : 16\n\n    // loading 行為：spinner 永遠在 prefix 位置\n    //   有 prefix icon → icon 換成 spinner（同位置，零 layout shift）\n    //   無 prefix icon → spinner 加在文字左邊（按鈕略微變寬，可接受）\n    const hasSuffix = badge != null || EndIcon !== undefined\n\n    // icon-only 自動 tooltip：從 props 提取 aria-label，同時保留在 DOM\n    const { 'aria-label': ariaLabel, ...restProps } = props\n\n    // Toggle 狀態：pressed 定義時自動寫入 aria-pressed + data-state。\n    // 未定義時不寫入任何 toggle 屬性（按鈕為一般 action button）。\n    // 樣式由 cva data-[state=on] compoundVariants（variant × pressedTone）套用——\n    // secondary/tertiary/text 預設 pressedTone='emphasis' 走 primary-subtle，\n    // pressedTone='neutral' 才走 neutral-selected family；primary/link 不定義 on 分支，傳入無效果。\n    const toggleAttrs =\n      pressed === undefined\n        ? {}\n        : { 'aria-pressed': pressed, 'data-state': pressed ? 'on' : 'off' }\n\n    // Chrome-unbounded marker(2026-04-22 v5 canonical):button 若無視覺邊界(text variant 或 dismiss),\n    // 標記 data-unbounded=\"true\"。SurfaceHeader 透過 [&_[data-unbounded]]:my-[...] 套負 margin\n    // 讓 layout 佔位縮到 24(chrome-header-height 幾何)— button native size 與 touch target 不變。\n    // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n    const unboundedAttr =\n      resolvedVariant === 'text' || dismiss ? { 'data-unbounded': 'true' } : {}\n\n    const buttonEl = (\n      <Comp\n        className={cn(\n          buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, pressedTone, className }),\n          // iconOnly 鐵律:padding-free + aspect-square + flex-center (Polaris idiom)\n          // 0 magic-number 0 公式自動正方形。詳 ICON_ONLY_BASE rationale。\n          resolvedIconOnly && ICON_ONLY_BASE,\n          // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground\n          // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)\n          dismiss && 'text-fg-muted hover:text-foreground',\n          resolvedFullWidth && 'w-full',\n        )}\n        ref={ref}\n        type=\"button\"\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        {...toggleAttrs}\n        {...unboundedAttr}\n        {...restProps}\n      >\n        {loading ? (\n          <CircularProgress size={iconSize} className=\"text-current\" />\n        ) : StartIcon ? (\n          resolvedIconOnly && overlayBadge ? (\n            // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner\n            // (Material BadgedBox / iOS App icon),不是 button chrome 角。\n            //\n            // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`\n            // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span\n            // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button\n            // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。\n            <span\n              className=\"relative inline-block leading-none shrink-0 pointer-events-none\"\n              style={{ width: iconSize, height: iconSize }}\n            >\n              <StartIcon size={iconSize} aria-hidden />\n              <span className=\"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto\">\n                {overlayBadge}\n              </span>\n            </span>\n          ) : (\n            <StartIcon size={iconSize} aria-hidden />\n          )\n        ) : null}\n        {children != null && <span className=\"px-1\">{children}</span>}\n        {hasSuffix && (\n          <span className=\"inline-flex items-center gap-1\">\n            {badge}\n            {EndIcon && <EndIcon size={iconSize} aria-hidden />}\n          </span>\n        )}\n      </Comp>\n    )\n\n    // icon-only + aria-label → 自動包 Tooltip（tooltip 是元件保證的行為）\n    // 不建立獨立 TooltipProvider——依賴全域 Provider，\n    // 這樣所有 tooltip 共享同一組 delay 參數和 warm-up 機制\n    if (resolvedIconOnly && typeof ariaLabel === 'string' && !asChild) {\n      return (\n        <Tooltip>\n          <TooltipTrigger asChild>{buttonEl}</TooltipTrigger>\n          <TooltipContent>{ariaLabel}</TooltipContent>\n        </Tooltip>\n      )\n    }\n\n    return buttonEl\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * componentMeta — Story Auto-Compile 系統消費的結構化 canonical\n * (見 .claude/planning/story-auto-compile.md Phase 1)\n *\n * compile-stories.mjs 讀本 export + spec.md frontmatter 產出\n * anatomy.stories.tsx 的 variant/size/state/token 矩陣 canonical section。\n *\n * Keys 必跟 buttonVariants cva + spec frontmatter 對齊(compile-time 驗證)。\n */\nexport const buttonMeta = {\n  component: 'Button',\n  family: 3, // Pill Layout\n  variants: {\n    primary: { purpose: '主要 action / CTA' },\n    secondary: { purpose: '次要 action(陪襯 primary)' },\n    tertiary: { purpose: '第三級 action(tool-like)' },\n    text: { purpose: '文字樣式 action(low emphasis / toolbar)' },\n    link: { purpose: '內文連結(inline reading)' },\n  },\n  sizes: {\n    xs: { fieldHeight: 24, iconSize: 16, typography: 'caption' },\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['--primary', '--primary-hover', '--primary-active', '--bg-disabled'],\n    fg: ['--on-emphasis', '--fg-disabled'],\n    ring: ['--ring'],\n  },\n  defaultVariant: 'tertiary',  // 2026-06-10 修 stale:對齊 cva defaultVariants(2026-06-06 labeled 預設改 tertiary,meta 漏同步)\n  defaultSize: 'md',\n} as const\n\nexport { Button, buttonVariants, ButtonGroupContext }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/components/Button/button.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.\n// code-quality-allow: file-size — foundational composite(Button + iconOnly + danger + loading + asChild + dismiss + pressedTone)— 跨 7 axis variant 集中 SSOT 一處,拆分會 fragment cva variant catalog。當前 528 < cap 800。\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\n\n/**\n * Button — shadcn 風格，橋接設計系統 token\n *\n * ── Variants ──\n *   primary    主要操作，藍底白字\n *   secondary  次要品牌操作，藍框藍字；正面 vs 負面並存時用於正面那個\n *   tertiary   一般輔助操作，灰框灰字，hover 轉藍（最常用的非主要按鈕）\n *   text       無底色無邊框，hover 顯示灰底（工具列、密集 UI）\n *   link       外觀像連結的按鈕（本質仍是 button）\n *\n * ── danger prop ──\n *   danger     套用危險色（紅色）；僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）\n *\n *   <Button variant=\"primary\" danger>永久刪除</Button>        → 紅底白字（立即不可逆）\n *   <Button variant=\"secondary\" danger>移至垃圾桶</Button>    → 紅框紅字（點下去還可反悔）\n *\n * ── pressed prop（toggle）──\n *   pressed    Toggle 按下狀態（持續 on/off），寫入 aria-pressed + data-state\n *   僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：\n *     - secondary + pressed → primary-subtle 底、primary 字、透明邊框\n *     - tertiary  + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）\n *     - text      + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底\n *   primary / link 傳入 pressed 無視覺效果（語意不符）\n *\n * ── Sizes（預設 md）──\n *   xs   h-field-xs（24px 固定），不隨 density 縮放\n *   sm   h-field-sm，md=28px / lg=32px\n *   md   h-field-md，md=32px / lg=36px  ← 預設（跟 Field/Input 對齊）\n *   lg   h-field-lg，md=36px / lg=40px\n *   icon-only 不是獨立尺寸 — 加 iconOnly prop 讓任何尺寸變正方形\n *\n * ── 內部結構 ──\n *   [startIcon?]  [label]  [badge? + endIcon?]\n *\n * ── 用法範例 ──\n *   <Button startIcon={Plus}>新增</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n *   <Button variant=\"primary\" danger>永久刪除</Button>\n *   <Button variant=\"text\" pressed={isPinned} startIcon={Pin} aria-label=\"釘選\" iconOnly />\n *   <Button badge={<Badge count={3} />} endIcon={ChevronDown}>通知</Button>\n *   <Button size=\"sm\" iconOnly startIcon={Plus} aria-label=\"新增\" />\n *   <Button iconOnly startIcon={Bell} aria-label=\"通知 (3 則)\"\n *           overlayBadge={<Badge count={3} />} />  ← badge 自動貼 icon 右上角\n *\n * ── asChild ──\n *   <Button asChild><Link to=\"/home\">回首頁</Link></Button>\n */\nconst buttonVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'whitespace-nowrap font-medium',\n    'border border-transparent',\n    'transition-colors duration-150',\n    'cursor-pointer select-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):`aria-disabled` visual 分支補(per WAI-ARIA APG —\n    // aria-disabled 給語意 + visual,但不 suppress functionality;functionality 由 consumer 阻 e.g.\n    // RowDragHandle listeners 只在 canDrag spread)。**故意不加** `aria-disabled:pointer-events-none`\n    // — Round 4 RowDragHandle Tooltip flicker fix root cause:aria-disabled buttons 必保 pointer events\n    // 讓 Radix Tooltip pointerenter 通過。HTML `disabled` 保 PE:none(完全 inactive)。\n    'disabled:pointer-events-none',\n    // 2026-05-12 fix v2(playwright pixel-quantified verify 抓 opacity=1 不生效):\n    // `opacity-disabled` 是 custom Tailwind v4 `@utility`(opacity.css:21),variant prefix\n    // `aria-disabled:` 跟 custom @utility 不 compose(`aria-disabled:cursor-not-allowed` 標準\n    // utility 能 work,custom 不行)。改 arbitrary value `opacity-[var(--opacity-disabled)]`\n    // 繞 custom @utility 限制(Tailwind v4 arbitrary value 直接生 `opacity: var(--opacity-disabled)`)。\n    'aria-disabled:opacity-[var(--opacity-disabled)]',\n    'rounded-md',\n    // Defensive:SVG 不被 flex shrink 擠扁(防 inner-area 計算誤差導致 icon 被擠成\n    // width<intrinsic 的 asymmetric 顯示)。詳 ICON_ONLY_PX 段 rationale。\n    '[&_svg]:shrink-0',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-primary text-on-emphasis',\n          'hover:bg-primary-hover',\n          'active:bg-primary-active',\n          'disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent',\n        ],\n        secondary: [\n          'bg-surface text-primary border-primary',\n          'hover:text-primary-hover hover:border-primary-hover',\n          'active:text-primary-active active:border-primary-active',\n          // Overlay trigger active(asChild Popover/DropdownMenu trigger)— 維持 hover 樣式\n          // (canonical 對齊 inline-action.spec.md:trigger 維持 host hover 直到 overlay 關閉)\n          'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n          // 2026-05-21 v12:Toggle pressed 視覺移到 compoundVariants(variant × pressedTone),\n          // 同時支援 emphasis(藍底)/ neutral(灰底)兩 tone。詳 cva.compoundVariants 段。\n        ],\n        tertiary: [\n          'bg-surface text-foreground border-border',\n          'hover:text-primary-hover hover:border-primary-hover',\n          'active:text-primary-active active:border-primary-active',\n          // Overlay trigger active — 維持 hover 樣式(同 secondary 邏輯)\n          'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n        ],\n        text: [\n          'bg-transparent text-foreground border-transparent',\n          'hover:bg-neutral-hover',\n          'active:bg-neutral-active',\n          // Overlay trigger active — 維持 hover 樣式(canonical 2026-05-02 改:hover token,\n          // 不另開 selected 4% — 對齊 shadcn/Radix/Material 狀態極簡派,跨 host 一致)\n          'data-[state=open]:bg-neutral-hover',\n          'disabled:bg-transparent disabled:text-fg-disabled',\n        ],\n        link: [\n          'bg-transparent text-primary border-transparent',\n          'hover:text-primary-hover',\n          'active:text-primary-active',\n          'disabled:text-fg-disabled',\n        ],\n      },\n      danger: {\n        true: '', // 實際樣式由 compoundVariants 提供\n      },\n      /**\n       * 2026-05-21 v12 — pressed visual tone(per user「我認同這一個方向,然後預設emphasis」):\n       * emphasis = 淡藍底(toolbar functional toggle / 篩選啟用 / 面板開關 — Figma toolbar /\n       *            Linear toolbar / Material ToggleButton 共識)\n       * neutral  = 灰底(sidebar/contextual nav row pressed — Linear / Notion / VS Code Activity Bar 共識)\n       * 預設 `emphasis` per user directive。實際樣式由 compoundVariants(variant × pressedTone)套用。\n       * 只在 secondary / tertiary / text variant 觸發 toggle 視覺;primary / link 無視覺效果。\n       */\n      pressedTone: {\n        emphasis: '',\n        neutral: '',\n      },\n      size: {\n        xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n        sm: 'h-field-sm px-3 min-w-14 text-body leading-compact gap-1',\n        md: 'h-field-md px-3 min-w-16 text-body leading-compact gap-1',\n        lg: 'h-field-lg px-3 min-w-20 text-body-lg leading-compact gap-1',\n      },\n    },\n    compoundVariants: [\n      // primary + danger → 紅底白字（立即不可逆操作）\n      {\n        variant: 'primary',\n        danger: true,\n        class: [\n          'bg-error text-on-emphasis border-transparent',\n          'hover:bg-error-hover',\n          'active:bg-error-active',\n        ],\n      },\n      // secondary + danger → 紅框紅字（有確認步驟的危險操作）\n      {\n        variant: 'secondary',\n        danger: true,\n        class: [\n          'bg-surface text-error border-error',\n          'hover:text-error-hover hover:border-error-hover',\n          'active:text-error-active active:border-error-active',\n        ],\n      },\n      // text + danger → 紅字，hover 灰底\n      {\n        variant: 'text',\n        danger: true,\n        class: [\n          'text-error',\n          'hover:bg-neutral-hover hover:text-error-hover',\n          'active:bg-neutral-active active:text-error-active',\n        ],\n      },\n      // ── 2026-05-21 v12 Toggle pressed(variant × pressedTone)──────────────────\n      // 視覺由 data-[state=on] + aria-pressed(Radix overlay trigger fallback)觸發\n      //\n      // emphasis tone:藍底(primary-subtle / primary 字)— functional toggle\n      {\n        variant: ['secondary', 'tertiary', 'text'],\n        pressedTone: 'emphasis',\n        class: [\n          'data-[state=on]:bg-primary-subtle data-[state=on]:text-primary data-[state=on]:border-transparent',\n          'data-[state=on]:hover:text-primary-hover',\n          'data-[state=on]:active:text-primary-active',\n          'data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent',\n          // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)\n          'aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent',\n          'aria-pressed:hover:text-primary-hover',\n        ],\n      },\n      // neutral tone:灰底(neutral-selected family)— sidebar/contextual nav pressed\n      {\n        variant: ['secondary', 'tertiary', 'text'],\n        pressedTone: 'neutral',\n        class: [\n          'data-[state=on]:bg-neutral-selected data-[state=on]:text-foreground data-[state=on]:border-transparent',\n          'data-[state=on]:hover:bg-neutral-selected-hover',\n          'data-[state=on]:active:bg-neutral-selected-active',\n          'data-[state=on]:disabled:bg-transparent data-[state=on]:disabled:text-fg-disabled',\n          // aria-pressed fallback\n          'aria-pressed:bg-neutral-selected aria-pressed:text-foreground aria-pressed:border-transparent',\n          'aria-pressed:hover:bg-neutral-selected-hover',\n        ],\n      },\n    ],\n    defaultVariants: {\n      // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。\n      // 真正預設邏輯在元件內 resolvedVariant(相對指法,免行號漂移);此 cva default 供直接 buttonVariants() 呼叫者一致。\n      variant: 'tertiary',\n      size: 'md',\n      pressedTone: 'emphasis',\n    },\n  }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup 提供此 context;Button 讀取它注入 fullWidth。\n// Context 放本檔(不放 button-group.tsx)以避免循環 import。\ninterface ButtonGroupContextValue {\n  fullWidth?: boolean\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\n\ntype InternalVariant = VariantProps<typeof buttonVariants>['variant']\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'danger'> {\n  /**\n   * 將樣式套用至子元件（e.g. React Router Link）。\n   *\n   * ⚠️ **icon-only + asChild 警告**:當 `iconOnly={true}` 且 `asChild={true}` 時,內建\n   * Tooltip wrapper 不啟動(Radix Slot 不接受多 child)。consumer 必須**自管 child 的 `aria-label`**\n   * 給 screen reader,並視需要自行包 `<Tooltip>`(對齊 Polaris / Radix asChild idiom)。\n   * Button 不會主動補 tooltip — 否則會破壞 Slot 單 child 規則。\n   */\n  asChild?: boolean\n  /**\n   * 按鈕視覺強調等級。\n   * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link'\n  /** 套用危險色（紅色）。僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）。 */\n  danger?: boolean\n  /**\n   * Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：\n   * - 自動寫入 `aria-pressed` + `data-state=\"on\" | \"off\"`\n   * - 樣式由 variant × `pressedTone` 的 compoundVariants 套用\n   * - 僅 secondary / tertiary / text 有 toggle 視覺；primary / link 傳入無效果\n   *\n   * 不傳此 prop 時 Button 就是一般按鈕，不帶 aria-pressed。\n   */\n  pressed?: boolean\n  /**\n   * Pressed 視覺色調(2026-05-21 v12 加):\n   * - `'emphasis'`(預設)→ 淡藍底 / primary 字(對齊 Figma toolbar / Linear toolbar /\n   *   Material ToggleButton 共識 — toolbar functional toggle / 篩選啟用 / 面板開關)\n   * - `'neutral'` → 灰底 / foreground 字(對齊 Linear / Notion / VS Code Activity Bar\n   *   共識 — sidebar/contextual nav row pressed)\n   *\n   * 僅在 `pressed` 啟用且 variant ∈ {secondary, tertiary, text} 時生效。\n   * 跨 toggle context 維持單一 prop API,consumer 視語意選 tone 不另開 variant。\n   */\n  pressedTone?: 'emphasis' | 'neutral'\n  /** 左側 icon（LucideIcon），最多一個，loading 時自動替換為 spinner */\n  startIcon?: LucideIcon\n  /** 右側 badge（ReactNode），通常傳入計數指示器 */\n  badge?: React.ReactNode\n  /**\n   * Overlay badge(iconOnly 專用)。接收 `<Badge>` 元素,Button 內部**自動定位在 startIcon 右上角**——\n   * badge 中心對齊 icon 的 top-right corner(Material BadgedBox / iOS App icon canonical),不是按鈕邊緣。\n   * 解決手刻 `relative + absolute -top-1 -right-1` 讓 badge 飄在按鈕 chrome 右上的問題。\n   *\n   * 世界級對照:Material BadgedBox、iOS App Icon、Ant Badge wrap icon,badge 相對於**視覺重心**(icon)。\n   * 只在 `iconOnly=true` 時生效;非 iconOnly 時應該用 inline `badge` prop 放 suffix 位置。\n   */\n  overlayBadge?: React.ReactNode\n  /** 右側 icon（LucideIcon），放在 badge 右邊，通常用於 ChevronDown 等方向指示 */\n  endIcon?: LucideIcon\n  /** Icon-only 模式：移除 padding，變為正方形（必須同時設定 aria-label） */\n  iconOnly?: boolean\n  /**\n   * Dismiss 視覺類(X close only canonical)。專用於 **X(close)icon 的 dismiss 語意** —\n   * 「關閉 surface / 忽略訊息」。**不適用 Trash / Delete / Clear / Remove 等 destructive / clear 操作**。\n   *\n   * 自動套用:\n   * - `variant=\"text\"`(強制 override 其他 variant)\n   * - `iconOnly=true`(強制)\n   * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)\n   *\n   * 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 **chrome corner close X**\n   * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。\n   *\n   * 非 dismiss(**不套此 prop**):\n   * - Trash / Delete → destructive action,Button 用一般 variant 或 Inline Action(按 row size 判)\n   * - Clear → 欄位清空,用 Inline Action\n   * - Remove → collection 移除,用一般 Button / Inline Action\n   *\n   * 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/inline-action.spec.md\n   * 「Dismiss canonical — X close only」段。\n   */\n  dismiss?: boolean\n  /** 載入中狀態：startIcon 替換為 spinner，自動 disabled；badge / endIcon 維持顯示以避免 layout shift */\n  loading?: boolean\n  /** 撐滿父容器寬度 */\n  fullWidth?: boolean\n}\n\n// IconOnly 用 padding-free + aspect-square + flex-center 的 Polaris/Atlassian idiom\n// (M17 SSOT 必可傳播 — 取代 4 個 size 的 magic-number 公式):\n//   - aspect-square 鎖 width=height(來自 h-field-X)\n//   - p-0 移除 px-3 (label 模式) override\n//   - flex justify-center items-center(base 已有)→ SVG 自動視覺置中\n// 結果:0 magic number,0 公式,0 border-deduction,任何 size / icon size 都自然正方形。\n// World-class 對照:Polaris + Atlassian iconOnly 走 padding-free 派(Material/Ant 走\n// padding-based)。我們選 padding-free 因 SSOT 性更強(SegmentedControl / Tag dismiss\n// 等 host 全可共用同 utility class,無需各自抄公式)。詳 button.spec.md「iconOnly 鐵律」。\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant: variantProp,\n      danger: dangerProp,\n      size,\n      asChild = false,\n      startIcon: StartIcon,\n      badge,\n      overlayBadge,\n      endIcon: EndIcon,\n      iconOnly = false,\n      dismiss = false,\n      loading = false,\n      fullWidth = false,\n      pressed,\n      pressedTone, // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    // ── FieldContext：在 Field 內自動讀 size，讓 Button 跟 Input 同高(SSOT:useResolvedFieldSize)──\n    const resolvedSize = useResolvedFieldSize(size, 'md')\n\n    // ── Dismiss 視覺類 override(2026-04-22 cross-implementation dimming canonical) ──\n    // dismiss=true 強制:variant=\"text\" + iconOnly=true + icon 色弱化(fg-muted → hover foreground)\n    // 跟 Inline Action dismiss 視覺一致。詳見 button.spec.md「Dismiss 視覺類」。\n    const resolvedIconOnly = iconOnly || dismiss\n\n    // ── Dev-mode warning:overlayBadge 只適用 iconOnly ──\n    // 有 label 的 Button 傳入 overlayBadge 會被忽略(只 render icon / 不渲染 overlay slot),\n    // 靜默忽略會讓 consumer 誤以為「傳了但位置錯」。Dev mode 印 warning 引導改用 `badge` prop\n    // (inline 位置,跟 label 並列)或改 `iconOnly`。Spec SSOT:badge.spec.md「Overlay 適用元件」。\n    if (process.env.NODE_ENV !== 'production' && overlayBadge && !iconOnly) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '[DS Button] `overlayBadge` 只適用於 `iconOnly` Button。有 label 的 Button 請改用 `badge` prop(inline 位置,跟 label 並列),或移除 label 改為 iconOnly。SSOT:badge.spec.md「Overlay 適用元件 canonical」節。'\n      )\n    }\n\n    // 2026-05-23 deep-audit Phase A.4 Decision 1(user verbatim「決策ㄧ照你建議做」):dev-warn `iconOnly + (endIcon|badge)` 並用。\n    // Spec SSOT:button.spec.md「iconOnly 嚴格定義為『只有一個 icon,正方形』,不可與 endIcon 或 badge 並用」。\n    // 例外:overlayBadge 跟 iconOnly 並用 canonical(上方 overlayBadge 反向 warn 已 cover;相對指法,免行號漂移)。\n    // 不擋 image canonical「icon + 下拉指示 = 不加 iconOnly + startIcon + endIcon + aria-label」(那 case iconOnly=false 不 trigger)。\n    if (process.env.NODE_ENV !== 'production' && iconOnly && (EndIcon !== undefined || badge != null)) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '[DS Button] `iconOnly` 嚴格定義為「只有一個 icon,正方形」,不可與 `endIcon` 或 `badge` 並用。若需 icon + 下拉指示 → 不加 iconOnly + startIcon + endIcon + aria-label;若需 icon + 角標 → iconOnly + overlayBadge。SSOT:button.spec.md `iconOnly 的邊界` 節 + `badge.spec.md` Overlay 適用元件 canonical。'\n      )\n    }\n\n    // shadcn compat:AlertDialog、Toast 等元件內部會傳入這些 alias,\n    // 在此靜默轉換,不暴露到型別或自動完成。\n    // dismiss=true 強制 variant=text(dismiss canonical);override 其他 variant 傳入。\n    // 2026-06-06 預設 emphasis 改低(對齊世界級:MUI 預設 text / Ant 預設 default / Polaris 低 emphasis —\n    // 預設 primary CTA 是 outlier)。labeled 無 variant → `tertiary`(中性外框,清楚可點性,再按重要程度升 primary);\n    // iconOnly 無 variant → `text`(toolbar ghost,對齊 action-bar.spec.md「純動作工具/低重量輔助 → text」+\n    // Material 3「icon-only = no fill」)。**CTA 必 explicit `variant=\"primary\"`**(不靠預設)。dismiss 仍強制 text。\n    const resolvedVariant: InternalVariant =\n      dismiss ? 'text' :\n      (variantProp as string) === 'destructive' ? 'primary' :\n      (variantProp as string) === 'ghost'        ? 'text'    :\n      (variantProp as InternalVariant) ?? (iconOnly ? 'text' : 'tertiary')\n\n    const resolvedDanger = dangerProp || (variantProp as string) === 'destructive'\n\n    // ButtonGroup context：vertical group 自動注入 fullWidth\n    const groupCtx = React.useContext(ButtonGroupContext)\n    const resolvedFullWidth = fullWidth || !!groupCtx.fullWidth\n\n    const Comp = asChild ? Slot : 'button'\n    const iconSize = resolvedSize === 'lg' ? 20 : 16\n\n    // loading 行為：spinner 永遠在 prefix 位置\n    //   有 prefix icon → icon 換成 spinner（同位置，零 layout shift）\n    //   無 prefix icon → spinner 加在文字左邊（按鈕略微變寬，可接受）\n    const hasSuffix = badge != null || EndIcon !== undefined\n\n    // icon-only 自動 tooltip：從 props 提取 aria-label，同時保留在 DOM\n    const { 'aria-label': ariaLabel, ...restProps } = props\n\n    // Toggle 狀態：pressed 定義時自動寫入 aria-pressed + data-state。\n    // 未定義時不寫入任何 toggle 屬性（按鈕為一般 action button）。\n    // 樣式由 cva data-[state=on] compoundVariants（variant × pressedTone）套用——\n    // secondary/tertiary/text 預設 pressedTone='emphasis' 走 primary-subtle，\n    // pressedTone='neutral' 才走 neutral-selected family；primary/link 不定義 on 分支，傳入無效果。\n    const toggleAttrs =\n      pressed === undefined\n        ? {}\n        : { 'aria-pressed': pressed, 'data-state': pressed ? 'on' : 'off' }\n\n    // Chrome-unbounded marker(2026-04-22 v5 canonical):button 若無視覺邊界(text variant 或 dismiss),\n    // 標記 data-unbounded=\"true\"。SurfaceHeader 透過 [&_[data-unbounded]]:my-[...] 套負 margin\n    // 讓 layout 佔位縮到 24(chrome-header-height 幾何)— button native size 與 touch target 不變。\n    // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n    const unboundedAttr =\n      resolvedVariant === 'text' || dismiss ? { 'data-unbounded': 'true' } : {}\n\n    // Native path 內部結構:[loading spinner | startIcon(+overlayBadge)] [label] [badge + endIcon]。\n    // asChild 時**不渲染**(2026-07-04 fix):Radix Slot 規範 children 必為單一 element\n    // (React.Children.only)— 內部多 expression children 變 array 必 runtime throw;\n    // asChild 分支只 render consumer child,內容由 consumer 自帶。\n    // 詳 CLAUDE.md 失敗記憶索引「asChild ? Slot : Native 內部 JSX 仍渲染多 children」條。\n    const nativeChildren = (\n      <>\n        {loading ? (\n          <CircularProgress size={iconSize} className=\"text-current\" />\n        ) : StartIcon ? (\n          resolvedIconOnly && overlayBadge ? (\n            // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner\n            // (Material BadgedBox / iOS App icon),不是 button chrome 角。\n            //\n            // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`\n            // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span\n            // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button\n            // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。\n            <span\n              className=\"relative inline-block leading-none shrink-0 pointer-events-none\"\n              style={{ width: iconSize, height: iconSize }}\n            >\n              <StartIcon size={iconSize} aria-hidden />\n              <span className=\"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto\">\n                {overlayBadge}\n              </span>\n            </span>\n          ) : (\n            <StartIcon size={iconSize} aria-hidden />\n          )\n        ) : null}\n        {children != null && <span className=\"px-1\">{children}</span>}\n        {hasSuffix && (\n          <span className=\"inline-flex items-center gap-1\">\n            {badge}\n            {EndIcon && <EndIcon size={iconSize} aria-hidden />}\n          </span>\n        )}\n      </>\n    )\n\n    const sharedClassName = cn(\n      buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, pressedTone, className }),\n      // iconOnly 鐵律:padding-free + aspect-square + flex-center (Polaris idiom)\n      // 0 magic-number 0 公式自動正方形。詳 ICON_ONLY_BASE rationale。\n      resolvedIconOnly && ICON_ONLY_BASE,\n      // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground\n      // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)\n      dismiss && 'text-fg-muted hover:text-foreground',\n      resolvedFullWidth && 'w-full',\n    )\n\n    // 2026-07-05 D4 修:asChild 原 silently drop loading/disabled 語意(無 aria-busy/aria-disabled/\n    // click guard → <a> loading 期間可重複點擊)。補 ARIA(任何 element 合法;aria-disabled 自動點亮\n    // cva 既有視覺)+ functional guard(APG aria-disabled 模式:語意+視覺由元件、功能阻斷由 guard)。\n    const { onClick: slotConsumerOnClick, ...slotRest } = restProps as typeof restProps & { onClick?: React.MouseEventHandler<HTMLElement> }\n    const buttonEl = asChild ? (\n      // Slot 分支:children 必為單一 consumer element(React.Children.only),\n      // 內部 slot(loading/startIcon/badge)不渲染;不硬塞 type/disabled(consumer child 可能是 <a>)。\n      <Comp\n        className={sharedClassName}\n        ref={ref}\n        aria-label={ariaLabel}\n        aria-busy={loading || undefined}\n        aria-disabled={disabled || loading || undefined}\n        onClick={disabled || loading\n          ? (e: React.MouseEvent<HTMLElement>) => { e.preventDefault(); e.stopPropagation() }\n          : slotConsumerOnClick}\n        {...toggleAttrs}\n        {...unboundedAttr}\n        {...slotRest}\n      >\n        {children}\n      </Comp>\n    ) : (\n      <Comp\n        className={sharedClassName}\n        ref={ref}\n        type=\"button\"\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        {...toggleAttrs}\n        {...unboundedAttr}\n        {...restProps}\n      >\n        {nativeChildren}\n      </Comp>\n    )\n\n    // icon-only + aria-label → 自動包 Tooltip（tooltip 是元件保證的行為）\n    // 不建立獨立 TooltipProvider——依賴全域 Provider，\n    // 這樣所有 tooltip 共享同一組 delay 參數和 warm-up 機制\n    if (resolvedIconOnly && typeof ariaLabel === 'string' && !asChild) {\n      return (\n        <Tooltip>\n          <TooltipTrigger asChild>{buttonEl}</TooltipTrigger>\n          <TooltipContent>{ariaLabel}</TooltipContent>\n        </Tooltip>\n      )\n    }\n\n    return buttonEl\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * componentMeta — Story Auto-Compile 系統消費的結構化 canonical\n * (見 .claude/planning/story-auto-compile.md Phase 1)\n *\n * compile-stories.mjs 讀本 export + spec.md frontmatter 產出\n * anatomy.stories.tsx 的 variant/size/state/token 矩陣 canonical section。\n *\n * Keys 必跟 buttonVariants cva + spec frontmatter 對齊(compile-time 驗證)。\n */\nexport const buttonMeta = {\n  component: 'Button',\n  family: 3, // Pill Layout\n  variants: {\n    primary: { purpose: '主要 action / CTA' },\n    secondary: { purpose: '次要 action(陪襯 primary)' },\n    tertiary: { purpose: '第三級 action(tool-like)' },\n    text: { purpose: '文字樣式 action(low emphasis / toolbar)' },\n    link: { purpose: '內文連結(inline reading)' },\n  },\n  sizes: {\n    xs: { fieldHeight: 24, iconSize: 16, typography: 'caption' },\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    // 2026-07-04 audit 補齊:原只列 primary variant 家族;按 buttonVariants cva 真實 class 補\n    // secondary/tertiary/text/link/danger 消費的 token(auto-compile token 矩陣依此)\n    bg: ['--primary', '--primary-hover', '--primary-active', '--primary-subtle', '--bg-disabled', '--surface', '--neutral-hover', '--neutral-active', '--neutral-selected'],\n    fg: ['--on-emphasis', '--fg-disabled', '--foreground', '--primary', '--error', '--error-hover', '--error-active'],\n    ring: ['--ring'],\n  },\n  defaultVariant: 'tertiary',  // 2026-06-10 修 stale:對齊 cva defaultVariants(2026-06-06 labeled 預設改 tertiary,meta 漏同步)\n  defaultSize: 'md',\n} as const\n\nexport { Button, buttonVariants, ButtonGroupContext }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/Button/index.js

@@ -1,6 +1,9 @@
 import { Button, ButtonGroupContext, buttonMeta, buttonVariants } from "./button.js";
+import { ButtonDivider, ButtonGroup } from "./button-group.js";
 export {
   Button,
+  ButtonDivider,
+  ButtonGroup,
   ButtonGroupContext,
   buttonMeta,
   buttonVariants

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

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

package/dist/components/Carousel/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAKlF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC;AAyBD,QAAA,MAAM,QAAQ,6HA0Gb,CAAA;AAKD,QAAA,MAAM,eAAe,6GAkBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAkBhB,CAAA;AAQF,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAWD,QAAA,MAAM,gBAAgB,sFA8BrB,CAAA;AAGD,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAqDhB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,KAAK,WAAW,GACjB,CAAA"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAKlF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC;AAyBD,QAAA,MAAM,QAAQ,6HA0Gb,CAAA;AAKD,QAAA,MAAM,eAAe,6GAkBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAkBhB,CAAA;AAQF,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAWD,QAAA,MAAM,gBAAgB,sFA8BrB,CAAA;AAID,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAqDhB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,KAAK,WAAW,GACjB,CAAA"}

package/dist/components/Carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../src/components/Carousel/carousel.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 useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * Carousel — 圖片 / 內容水平(或垂直)輪播\n *\n * 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。\n *\n * ── 世界級對照 ──\n * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /\n * Swiper(獨立 lib,功能更多但不在 DS 範疇)\n *\n * ── 視覺慣例(user 指示) ──\n * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;\n * 指示器(dots)在底部中央,clickable。\n *\n * ── API(shadcn parity) ──\n * <Carousel opts plugins orientation>\n *   <CarouselContent>\n *     <CarouselItem>...</CarouselItem>\n *     <CarouselItem>...</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />  ← 左箭頭\n *   <CarouselNext />       ← 右箭頭\n *   <CarouselDots />       ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)\n * </Carousel>\n */\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\ninterface CarouselContextProps extends CarouselProps {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (i: number) => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  selectedIndex: number\n  scrollSnaps: number[]\n  orientation: 'horizontal' | 'vertical'\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const ctx = React.useContext(CarouselContext)\n  if (!ctx) throw new Error('useCarousel 必須在 <Carousel> 內使用')\n  return ctx\n}\n\n// ── Root ────────────────────────────────────────────────────────────────────\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = 'horizontal',\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },\n      plugins,\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n    const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n    const onSelect = React.useCallback((a: CarouselApi) => {\n      if (!a) return\n      setCanScrollPrev(a.canScrollPrev())\n      setCanScrollNext(a.canScrollNext())\n      setSelectedIndex(a.selectedScrollSnap())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])\n    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])\n    const scrollTo = React.useCallback((i: number) => api?.scrollTo(i), [api])\n\n    React.useEffect(() => {\n      if (!api || !setApi) return\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) return\n      setScrollSnaps(api.scrollSnapList())\n      onSelect(api)\n      api.on('reInit', onSelect)\n      api.on('select', onSelect)\n      return () => {\n        api?.off('select', onSelect)\n        api?.off('reInit', onSelect) // D3 fix: previously leaked — stale closure on remount\n      }\n    }, [api, onSelect])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      // 鍵盤方向對齊內容捲動方向(APG 建議):horizontal → ←/→;vertical → ↑/↓\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n      if (e.key === prevKey) { e.preventDefault(); scrollPrev() }\n      else if (e.key === nextKey) { e.preventDefault(); scrollNext() }\n    }\n\n    const contextValue = React.useMemo(\n      () => ({\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      }),\n      [\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      ]\n    )\n\n    return (\n      <CarouselContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn('group/carousel relative', className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          aria-label=\"輪播\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  },\n)\nCarousel.displayName = 'Carousel'\n\n// ── Content / Item ──────────────────────────────────────────────────────────\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = 'CarouselItem'\n\n// ── Arrow buttons(hover 才顯示)────────────────────────────────────────────\n// 使用 DS Button (tertiary + iconOnly size md);hover-only 顯示由 wrapper 的\n// opacity transition 控制(Button 本身不負責)。此 wrapper 存在僅為絕對定位 +\n// hover/focus 可見性,不再覆寫 Button 的視覺 token。\n\ntype ArrowProps = {\n  className?: string\n  /** ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 */\n  'aria-label'?: string\n}\n\nconst arrowWrapperClass = cn(\n  'absolute z-10',\n  'transition-opacity duration-200',\n  'opacity-0 group-hover/carousel:opacity-100',\n  'focus-within:opacity-100',\n  '[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none',\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '上一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'left-3 top-1/2 -translate-y-1/2'\n            : 'top-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronLeft}\n          aria-label={ariaLabel}\n          disabled={!canScrollPrev}\n          onClick={scrollPrev}\n          // documented exception:視覺取向的 media carousel 箭頭用 rounded-full 圓形,\n          // 優於 DS default rounded-md。對齊 Instagram / Airbnb / Notion / Apple Photos\n          // 世界級慣例 — media carousel 箭頭圓形減少視覺方塊感壓迫內容。spec「箭頭視覺規格」有明示。\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '下一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'right-3 top-1/2 -translate-y-1/2'\n            : 'bottom-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronRight}\n          aria-label={ariaLabel}\n          disabled={!canScrollNext}\n          onClick={scrollNext}\n          // documented exception:同 Previous,媒體導向 carousel 箭頭圓形\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselNext.displayName = 'CarouselNext'\n\n// ── Dots indicator(底部中央)───────────────────────────────────────────────\n\nconst CarouselDots = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n  if (scrollSnaps.length <= 1) return null\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',\n        'flex items-center gap-1.5',\n        className,\n      )}\n      // 2026-06-12 a11y(deep-audit R2 verdict b):APG grouped carousel 模型,非 tabs 模型。\n      // APG:「picker buttons 收在 group 容器;現張的 picker button aria-disabled=true」\n      // (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/)+ Embla 官方 Accessibility plugin\n      // 同採 plain button + label、無 tab roles(https://www.embla-carousel.com/docs/plugins/accessibility)。\n      // 為何不用完整 tabs 模型(slide=tabpanel + dot aria-controls):\n      // (1) Embla snap ≠ slide — basis-1/3 多張並排時 1 dot 控多張,tab↔tabpanel 1:1 不成立\n      // (2) tabs 鍵盤契約(方向鍵移 tablist 內 focus)與根容器方向鍵=切張(本檔 handleKeyDown)衝突\n      // (3) compound API 下 CarouselItem 不知 index,aria-controls id 接線需額外 registration\n      // 舊實作 role=\"tablist\"/\"tab\" + aria-selected 是半套 tabs(無 aria-controls、slide 非 tabpanel)= 非法混血。\n      // 現張標記用 aria-current(非 APG 原文的 aria-disabled)— M23 DS 既有 canonical 優先:\n      // FileViewer filmstrip(file-viewer.tsx aria-current={active ? 'true' : undefined})同類\n      // 「視覺項導航 + 現張標記」已 codify group + button + aria-current;Bootstrap 5 indicators 同 idiom。\n      role=\"group\"\n      aria-label=\"輪播指示器\" /* i18n-allow: DS default; 對齊同檔其他 aria-label 語言 */\n      {...props}\n    >\n      {scrollSnaps.map((_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          // 現張 dot aria-current(告知 SR「你在這張」;仍可 focus / 點擊為 no-op)\n          aria-current={i === selectedIndex ? 'true' : undefined}\n          aria-label={`跳至第 ${i + 1} 張`}\n          onClick={() => scrollTo(i)}\n          className={cn(\n            'h-1.5 rounded-full transition-all',\n            // 2026-06-11 a11y(R2;Phase B codex 修重疊):hit-area 垂直擴至 24px、水平 ±3px(dot 6px+gap 6px → 中心距 12px,±3 恰相切零重疊;再寬必互搶點擊)\n            // — 視覺 dot 維持 6×6 不變,僅點擊目標擴大(anatomy story 原宣稱的 hit-area 機制補真)\n            'relative before:absolute before:-inset-y-[9px] before:-inset-x-[3px] before:content-[\"\"]',\n            // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義\n            // 跟其他「於飽和色底上的淺色前景」一致\n            'bg-on-emphasis/60 hover:bg-on-emphasis/80',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            i === selectedIndex ? 'w-6 bg-on-emphasis' : 'w-1.5',\n          )}\n        />\n      ))}\n    </div>\n  )\n})\nCarouselDots.displayName = 'CarouselDots'\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 carouselMeta = {\n  component: 'Carousel',\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: [],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  CarouselDots,\n  type CarouselApi,\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"carousel.js","sources":["../../../src/components/Carousel/carousel.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 useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * Carousel — 圖片 / 內容水平(或垂直)輪播\n *\n * 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。\n *\n * ── 世界級對照 ──\n * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /\n * Swiper(獨立 lib,功能更多但不在 DS 範疇)\n *\n * ── 視覺慣例(user 指示) ──\n * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;\n * 指示器(dots)在底部中央,clickable。\n *\n * ── API(shadcn parity) ──\n * <Carousel opts plugins orientation>\n *   <CarouselContent>\n *     <CarouselItem>...</CarouselItem>\n *     <CarouselItem>...</CarouselItem>\n *   </CarouselContent>\n *   <CarouselPrevious />  ← 左箭頭\n *   <CarouselNext />       ← 右箭頭\n *   <CarouselDots />       ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)\n * </Carousel>\n */\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: 'horizontal' | 'vertical'\n  setApi?: (api: CarouselApi) => void\n}\n\ninterface CarouselContextProps extends CarouselProps {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  scrollTo: (i: number) => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n  selectedIndex: number\n  scrollSnaps: number[]\n  orientation: 'horizontal' | 'vertical'\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const ctx = React.useContext(CarouselContext)\n  if (!ctx) throw new Error('useCarousel 必須在 <Carousel> 內使用')\n  return ctx\n}\n\n// ── Root ────────────────────────────────────────────────────────────────────\n\nconst Carousel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n  (\n    {\n      orientation = 'horizontal',\n      opts,\n      setApi,\n      plugins,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [carouselRef, api] = useEmblaCarousel(\n      { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },\n      plugins,\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n    const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n    const onSelect = React.useCallback((a: CarouselApi) => {\n      if (!a) return\n      setCanScrollPrev(a.canScrollPrev())\n      setCanScrollNext(a.canScrollNext())\n      setSelectedIndex(a.selectedScrollSnap())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])\n    const scrollNext = React.useCallback(() => api?.scrollNext(), [api])\n    const scrollTo = React.useCallback((i: number) => api?.scrollTo(i), [api])\n\n    React.useEffect(() => {\n      if (!api || !setApi) return\n      setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n      if (!api) return\n      setScrollSnaps(api.scrollSnapList())\n      onSelect(api)\n      api.on('reInit', onSelect)\n      api.on('select', onSelect)\n      return () => {\n        api?.off('select', onSelect)\n        api?.off('reInit', onSelect) // D3 fix: previously leaked — stale closure on remount\n      }\n    }, [api, onSelect])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      // 鍵盤方向對齊內容捲動方向(APG 建議):horizontal → ←/→;vertical → ↑/↓\n      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n      if (e.key === prevKey) { e.preventDefault(); scrollPrev() }\n      else if (e.key === nextKey) { e.preventDefault(); scrollNext() }\n    }\n\n    const contextValue = React.useMemo(\n      () => ({\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      }),\n      [\n        carouselRef,\n        api,\n        opts,\n        orientation,\n        scrollPrev,\n        scrollNext,\n        scrollTo,\n        canScrollPrev,\n        canScrollNext,\n        selectedIndex,\n        scrollSnaps,\n      ]\n    )\n\n    return (\n      <CarouselContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          onKeyDownCapture={handleKeyDown}\n          className={cn('group/carousel relative', className)}\n          role=\"region\"\n          aria-roledescription=\"carousel\"\n          aria-label=\"輪播\"\n          {...props}\n        >\n          {children}\n        </div>\n      </CarouselContext.Provider>\n    )\n  },\n)\nCarousel.displayName = 'Carousel'\n\n// ── Content / Item ──────────────────────────────────────────────────────────\n\nconst CarouselContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { carouselRef, orientation } = useCarousel()\n  return (\n    <div ref={carouselRef} className=\"overflow-hidden\">\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useCarousel()\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      className={cn(\n        'min-w-0 shrink-0 grow-0 basis-full',\n        orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n})\nCarouselItem.displayName = 'CarouselItem'\n\n// ── Arrow buttons(hover 才顯示)────────────────────────────────────────────\n// 使用 DS Button (tertiary + iconOnly size md);hover-only 顯示由 wrapper 的\n// opacity transition 控制(Button 本身不負責)。此 wrapper 存在僅為絕對定位 +\n// hover/focus 可見性,不再覆寫 Button 的視覺 token。\n\ntype ArrowProps = {\n  className?: string\n  /** ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 */\n  'aria-label'?: string\n}\n\nconst arrowWrapperClass = cn(\n  'absolute z-10',\n  'transition-opacity duration-200',\n  'opacity-0 group-hover/carousel:opacity-100',\n  'focus-within:opacity-100',\n  '[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none',\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '上一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'left-3 top-1/2 -translate-y-1/2'\n            : 'top-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronLeft}\n          aria-label={ariaLabel}\n          disabled={!canScrollPrev}\n          onClick={scrollPrev}\n          // documented exception:視覺取向的 media carousel 箭頭用 rounded-full 圓形,\n          // 優於 DS default rounded-md。對齊 Instagram / Airbnb / Notion / Apple Photos\n          // 世界級慣例 — media carousel 箭頭圓形減少視覺方塊感壓迫內容。spec「箭頭視覺規格」有明示。\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\n// code-quality-allow: long-function — 與 CarouselPrevious 結構對稱的 JSX-heavy arrow(方向/位置/邊界三態 className 組合),拆 helper 會破壞兩支對讀性\nconst CarouselNext = React.forwardRef<HTMLButtonElement, ArrowProps>(\n  ({ className, 'aria-label': ariaLabel = '下一張' /* i18n-allow: DS default; consumer override via aria-label prop */ }, ref) => {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n    return (\n      <div\n        className={cn(\n          arrowWrapperClass,\n          orientation === 'horizontal'\n            ? 'right-3 top-1/2 -translate-y-1/2'\n            : 'bottom-3 left-1/2 -translate-x-1/2 rotate-90',\n          className,\n        )}\n      >\n        <Button\n          ref={ref}\n          variant=\"tertiary\"\n          size=\"md\"\n          iconOnly\n          startIcon={ChevronRight}\n          aria-label={ariaLabel}\n          disabled={!canScrollNext}\n          onClick={scrollNext}\n          // documented exception:同 Previous,媒體導向 carousel 箭頭圓形\n          className=\"rounded-full\"\n        />\n      </div>\n    )\n  },\n)\nCarouselNext.displayName = 'CarouselNext'\n\n// ── Dots indicator(底部中央)───────────────────────────────────────────────\n\nconst CarouselDots = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n  if (scrollSnaps.length <= 1) return null\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',\n        'flex items-center gap-1.5',\n        className,\n      )}\n      // 2026-06-12 a11y(deep-audit R2 verdict b):APG grouped carousel 模型,非 tabs 模型。\n      // APG:「picker buttons 收在 group 容器;現張的 picker button aria-disabled=true」\n      // (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/)+ Embla 官方 Accessibility plugin\n      // 同採 plain button + label、無 tab roles(https://www.embla-carousel.com/docs/plugins/accessibility)。\n      // 為何不用完整 tabs 模型(slide=tabpanel + dot aria-controls):\n      // (1) Embla snap ≠ slide — basis-1/3 多張並排時 1 dot 控多張,tab↔tabpanel 1:1 不成立\n      // (2) tabs 鍵盤契約(方向鍵移 tablist 內 focus)與根容器方向鍵=切張(本檔 handleKeyDown)衝突\n      // (3) compound API 下 CarouselItem 不知 index,aria-controls id 接線需額外 registration\n      // 舊實作 role=\"tablist\"/\"tab\" + aria-selected 是半套 tabs(無 aria-controls、slide 非 tabpanel)= 非法混血。\n      // 現張標記用 aria-current(非 APG 原文的 aria-disabled)— M23 DS 既有 canonical 優先:\n      // FileViewer filmstrip(file-viewer.tsx aria-current={active ? 'true' : undefined})同類\n      // 「視覺項導航 + 現張標記」已 codify group + button + aria-current;Bootstrap 5 indicators 同 idiom。\n      role=\"group\"\n      aria-label=\"輪播指示器\" /* i18n-allow: DS default; 對齊同檔其他 aria-label 語言 */\n      {...props}\n    >\n      {scrollSnaps.map((_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          // 現張 dot aria-current(告知 SR「你在這張」;仍可 focus / 點擊為 no-op)\n          aria-current={i === selectedIndex ? 'true' : undefined}\n          aria-label={`跳至第 ${i + 1} 張`}\n          onClick={() => scrollTo(i)}\n          className={cn(\n            'h-1.5 rounded-full transition-all',\n            // 2026-06-11 a11y(R2;Phase B codex 修重疊):hit-area 垂直擴至 24px、水平 ±3px(dot 6px+gap 6px → 中心距 12px,±3 恰相切零重疊;再寬必互搶點擊)\n            // — 視覺 dot 維持 6×6 不變,僅點擊目標擴大(anatomy story 原宣稱的 hit-area 機制補真)\n            'relative before:absolute before:-inset-y-[9px] before:-inset-x-[3px] before:content-[\"\"]',\n            // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義\n            // 跟其他「於飽和色底上的淺色前景」一致\n            'bg-on-emphasis/60 hover:bg-on-emphasis/80',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            i === selectedIndex ? 'w-6 bg-on-emphasis' : 'w-1.5',\n          )}\n        />\n      ))}\n    </div>\n  )\n})\nCarouselDots.displayName = 'CarouselDots'\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 carouselMeta = {\n  component: 'Carousel',\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: [],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  CarouselDots,\n  type CarouselApi,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Chart/chart.d.ts.map

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

package/dist/components/Chart/chart.js

@@ -150,7 +150,7 @@ const ChartTooltipContent = React.forwardRef(
                           nestLabel ? tooltipLabel : null,
                           /* @__PURE__ */ jsx("span", { className: "text-fg-secondary", children: (itemConfig == null ? void 0 : itemConfig.label) || item.name })
                         ] }),
-                        item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                        item.value != null && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
                       ]
                     }
                   )

package/dist/components/Chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","sources":["../../../src/components/Chart/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\nimport { cn } from '@/lib/utils'\n\n/**\n * Chart — shadcn-style wrapper over Recharts + 本 DS token\n *\n * 結構對齊 shadcn chart(ChartContainer / ChartTooltipContent / ChartLegendContent),\n * 但所有視覺(tooltip / legend / grid / axis)改用本 DS token。\n *\n * ── Color mapping ──\n * ChartConfig.{key}.color 接受 2 種形式:\n *   1. CSS var 字串('var(--chart-1)' 等)\n *   2. 任何合法 CSS color\n * 預設建議使用 --chart-1..5(本 DS 提供的 5 色類別 token)\n *\n * ── 視覺 token ──\n * Tooltip: bg-surface-raised / border-border / shadow-[var(--elevation-200)] / rounded-md\n * Legend text: text-fg-secondary / text-caption\n * Grid: stroke-divider\n * Axis tick: text-fg-muted / text-caption\n */\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<'light' | 'dark', string> }\n  )\n}\n\ntype ChartContextProps = { config: ChartConfig }\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const ctx = React.useContext(ChartContext)\n  if (!ctx) throw new Error('useChart 必須在 <ChartContainer> 內使用')\n  return ctx\n}\n\n// ── ChartContainer ─────────────────────────────────────────────────────────\n\ninterface ChartContainerProps extends React.ComponentProps<'div'> {\n  config: ChartConfig\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId()\n    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n    // Memoize provider value(2026-04-22 D3 perf audit):避免 render 重建 wrapper object\n    const ctxValue = React.useMemo(() => ({ config }), [config])\n\n    return (\n      <ChartContext.Provider value={ctxValue}>\n        <div\n          ref={ref}\n          data-chart={chartId}\n          className={cn(\n            // 整體視覺套用本 DS typography + token\n            // 預設 aspect-video(16:9)— Recharts ResponsiveContainer 需 parent 有高度。\n            // Consumer 若需其他比例,包 <AspectRatio ratio={n}> 覆寫(AspectRatio 的 padding-bottom 高度會蓋過此 class)。\n            'flex aspect-video justify-center text-caption',\n            // recharts 內部預設樣式覆寫:grid / axis / tooltip shadow 等\n            \"[&_.recharts-cartesian-grid_line]:stroke-divider\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-fg-muted\",\n            \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider\",\n            \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider\",\n            \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-none\",\n            \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-sector]:outline-none\",\n            \"[&_.recharts-surface]:outline-none\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={chartId} config={config} />\n          <RechartsPrimitive.ResponsiveContainer>\n            {children}\n          </RechartsPrimitive.ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    )\n  },\n)\nChartContainer.displayName = 'ChartContainer'\n\n// ── ChartStyle ──────────────────────────────────────────────────────────────\n// 將 config 內每個 key 的 color 注入 scoped CSS variable(`--color-{key}`),\n// 供 Recharts `fill={`var(--color-${key})`}` 直接消費。\n\nconst THEMES = { light: '', dark: '[data-theme=dark] ' } as const\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([, v]) => 'color' in v || 'theme' in v)\n  if (entries.length === 0) return null\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(([theme, prefix]) => {\n            const vars = entries\n              .map(([key, item]) => {\n                const color =\n                  'theme' in item ? item.theme?.[theme as keyof typeof item.theme] : item.color\n                return color ? `  --color-${key}: ${color};` : null\n              })\n              .filter(Boolean)\n              .join('\\n')\n            return `${prefix}[data-chart=${id}] {\\n${vars}\\n}`\n          })\n          .join('\\n'),\n      }}\n    />\n  )\n}\n\n// ── ChartTooltip / ChartTooltipContent ─────────────────────────────────────\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\ntype RechartsTooltipPayloadItem = {\n  value?: string | number\n  name?: string | number\n  dataKey?: string | number\n  color?: string\n  payload?: unknown\n  [key: string]: unknown\n}\n\ninterface ChartTooltipContentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n  active?: boolean\n  payload?: RechartsTooltipPayloadItem[]\n  label?: unknown\n  labelFormatter?: (value: unknown, payload: RechartsTooltipPayloadItem[]) => React.ReactNode\n  labelClassName?: string\n  formatter?: (\n    value: unknown,\n    name: unknown,\n    item: RechartsTooltipPayloadItem,\n    index: number,\n    payload: unknown,\n  ) => React.ReactNode\n  color?: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: 'line' | 'dot' | 'dashed'\n  nameKey?: string\n  labelKey?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = 'dot',\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref,\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) return null\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || 'value'}`\n      const itemConfig = getPayloadConfig(config, item, key)\n      const value =\n        !labelKey && typeof label === 'string'\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n      if (labelFormatter) return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n      if (!value) return null\n      return <div className={cn('font-medium', labelClassName)}>{value}</div>\n    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n    if (!active || !payload?.length) return null\n\n    const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n    return (\n      <div\n        ref={ref}\n        // 2026-05-31 #5:自訂 tooltip 補 role=status + aria-live,保留 Recharts 原生 SR 朗讀(spec L146 宣稱鍵盤可達+讀屏)\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn(\n          'grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-caption shadow-[var(--elevation-200)]',\n          className,\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || 'value'}`\n            const itemConfig = getPayloadConfig(config, item, key)\n            const indicatorColor = color || (item.payload as { fill?: string })?.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey || index}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-fg-muted',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          })}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between leading-none',\n                        nestLabel ? 'items-end' : 'items-center',\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-fg-secondary\">{itemConfig?.label || item.name}</span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\nChartTooltipContent.displayName = 'ChartTooltipContent'\n\n// ── ChartLegend / ChartLegendContent ───────────────────────────────────────\n\nconst ChartLegend = RechartsPrimitive.Legend\n\ntype RechartsLegendPayloadItem = {\n  value?: unknown\n  dataKey?: string | number\n  color?: string\n  payload?: unknown\n  [key: string]: unknown\n}\n\ninterface ChartLegendContentProps extends React.ComponentProps<'div'> {\n  payload?: RechartsLegendPayloadItem[]\n  verticalAlign?: 'top' | 'middle' | 'bottom'\n  hideIcon?: boolean\n  nameKey?: string\n}\n\nconst ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n  ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n    const { config } = useChart()\n    if (!payload?.length) return null\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-center gap-4',\n          verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n          className,\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || 'value'}`\n          const itemConfig = getPayloadConfig(config, item, key)\n          return (\n            <div\n              key={String(item.value)}\n              className=\"flex items-center gap-1.5 text-fg-secondary [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-fg-muted\"\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div className=\"h-2 w-2 shrink-0 rounded-xs\" style={{ backgroundColor: item.color }} />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  },\n)\nChartLegendContent.displayName = 'ChartLegendContent'\n\n// ── helpers ────────────────────────────────────────────────────────────────\n\nfunction getPayloadConfig(\n  config: ChartConfig,\n  payload: unknown,\n  key: string,\n) {\n  if (typeof payload !== 'object' || payload === null) return undefined\n  const payloadPayload =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? payload.payload\n      : undefined\n  let configLabelKey: string = key\n  if (key in (payload as Record<string, unknown>) && typeof (payload as Record<string, unknown>)[key] === 'string') {\n    configLabelKey = (payload as Record<string, string>)[key]\n  } else if (payloadPayload && key in payloadPayload && typeof (payloadPayload as Record<string, unknown>)[key] === 'string') {\n    configLabelKey = (payloadPayload as Record<string, string>)[key]\n  }\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\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 chartMeta = {\n  component: 'Chart',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart.js","sources":["../../../src/components/Chart/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\nimport { cn } from '@/lib/utils'\n\n/**\n * Chart — shadcn-style wrapper over Recharts + 本 DS token\n *\n * 結構對齊 shadcn chart(ChartContainer / ChartTooltipContent / ChartLegendContent),\n * 但所有視覺(tooltip / legend / grid / axis)改用本 DS token。\n *\n * ── Color mapping ──\n * ChartConfig.{key}.color 接受 2 種形式:\n *   1. CSS var 字串('var(--chart-1)' 等)\n *   2. 任何合法 CSS color\n * 預設建議使用 --chart-1..5(本 DS 提供的 5 色類別 token)\n *\n * ── 視覺 token ──\n * Tooltip: bg-surface-raised / border-border / shadow-[var(--elevation-200)] / rounded-md\n * Legend text: text-fg-secondary / text-caption\n * Grid: stroke-divider\n * Axis tick: text-fg-muted / text-caption\n */\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<'light' | 'dark', string> }\n  )\n}\n\ntype ChartContextProps = { config: ChartConfig }\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const ctx = React.useContext(ChartContext)\n  if (!ctx) throw new Error('useChart 必須在 <ChartContainer> 內使用')\n  return ctx\n}\n\n// ── ChartContainer ─────────────────────────────────────────────────────────\n\ninterface ChartContainerProps extends React.ComponentProps<'div'> {\n  config: ChartConfig\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...props }, ref) => {\n    const uniqueId = React.useId()\n    const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`\n    // Memoize provider value(2026-04-22 D3 perf audit):避免 render 重建 wrapper object\n    const ctxValue = React.useMemo(() => ({ config }), [config])\n\n    return (\n      <ChartContext.Provider value={ctxValue}>\n        <div\n          ref={ref}\n          data-chart={chartId}\n          className={cn(\n            // 整體視覺套用本 DS typography + token\n            // 預設 aspect-video(16:9)— Recharts ResponsiveContainer 需 parent 有高度。\n            // Consumer 若需其他比例,包 <AspectRatio ratio={n}> 覆寫(AspectRatio 的 padding-bottom 高度會蓋過此 class)。\n            'flex aspect-video justify-center text-caption',\n            // recharts 內部預設樣式覆寫:grid / axis / tooltip shadow 等\n            \"[&_.recharts-cartesian-grid_line]:stroke-divider\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-fg-muted\",\n            \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider\",\n            \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider\",\n            \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-none\",\n            \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n            \"[&_.recharts-sector]:outline-none\",\n            \"[&_.recharts-surface]:outline-none\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={chartId} config={config} />\n          <RechartsPrimitive.ResponsiveContainer>\n            {children}\n          </RechartsPrimitive.ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    )\n  },\n)\nChartContainer.displayName = 'ChartContainer'\n\n// ── ChartStyle ──────────────────────────────────────────────────────────────\n// 將 config 內每個 key 的 color 注入 scoped CSS variable(`--color-{key}`),\n// 供 Recharts `fill={`var(--color-${key})`}` 直接消費。\n\nconst THEMES = { light: '', dark: '[data-theme=dark] ' } as const\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([, v]) => 'color' in v || 'theme' in v)\n  if (entries.length === 0) return null\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(([theme, prefix]) => {\n            const vars = entries\n              .map(([key, item]) => {\n                const color =\n                  'theme' in item ? item.theme?.[theme as keyof typeof item.theme] : item.color\n                return color ? `  --color-${key}: ${color};` : null\n              })\n              .filter(Boolean)\n              .join('\\n')\n            return `${prefix}[data-chart=${id}] {\\n${vars}\\n}`\n          })\n          .join('\\n'),\n      }}\n    />\n  )\n}\n\n// ── ChartTooltip / ChartTooltipContent ─────────────────────────────────────\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\ntype RechartsTooltipPayloadItem = {\n  value?: string | number\n  name?: string | number\n  dataKey?: string | number\n  color?: string\n  payload?: unknown\n  [key: string]: unknown\n}\n\ninterface ChartTooltipContentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n  active?: boolean\n  payload?: RechartsTooltipPayloadItem[]\n  label?: unknown\n  labelFormatter?: (value: unknown, payload: RechartsTooltipPayloadItem[]) => React.ReactNode\n  labelClassName?: string\n  formatter?: (\n    value: unknown,\n    name: unknown,\n    item: RechartsTooltipPayloadItem,\n    index: number,\n    payload: unknown,\n  ) => React.ReactNode\n  color?: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: 'line' | 'dot' | 'dashed'\n  nameKey?: string\n  labelKey?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n  (\n    {\n      active,\n      payload,\n      className,\n      indicator = 'dot',\n      hideLabel = false,\n      hideIndicator = false,\n      label,\n      labelFormatter,\n      labelClassName,\n      formatter,\n      color,\n      nameKey,\n      labelKey,\n    },\n    ref,\n  ) => {\n    const { config } = useChart()\n\n    const tooltipLabel = React.useMemo(() => {\n      if (hideLabel || !payload?.length) return null\n      const [item] = payload\n      const key = `${labelKey || item.dataKey || item.name || 'value'}`\n      const itemConfig = getPayloadConfig(config, item, key)\n      const value =\n        !labelKey && typeof label === 'string'\n          ? config[label as keyof typeof config]?.label || label\n          : itemConfig?.label\n      if (labelFormatter) return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n      if (!value) return null\n      return <div className={cn('font-medium', labelClassName)}>{value}</div>\n    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n    if (!active || !payload?.length) return null\n\n    const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n    return (\n      <div\n        ref={ref}\n        // 2026-05-31 #5:自訂 tooltip 補 role=status + aria-live,保留 Recharts 原生 SR 朗讀(spec L146 宣稱鍵盤可達+讀屏)\n        role=\"status\"\n        aria-live=\"polite\"\n        className={cn(\n          'grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-caption shadow-[var(--elevation-200)]',\n          className,\n        )}\n      >\n        {!nestLabel ? tooltipLabel : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || 'value'}`\n            const itemConfig = getPayloadConfig(config, item, key)\n            const indicatorColor = color || (item.payload as { fill?: string })?.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey || index}\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-fg-muted',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {\n                            'h-2.5 w-2.5': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          })}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between leading-none',\n                        nestLabel ? 'items-end' : 'items-center',\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-fg-secondary\">{itemConfig?.label || item.name}</span>\n                      </div>\n                      {/* 2026-07-04 修:falsy check 會讓合法資料值 0 不渲染(shadcn 上游同病)→ null check */}\n                      {item.value != null && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\nChartTooltipContent.displayName = 'ChartTooltipContent'\n\n// ── ChartLegend / ChartLegendContent ───────────────────────────────────────\n\nconst ChartLegend = RechartsPrimitive.Legend\n\ntype RechartsLegendPayloadItem = {\n  value?: unknown\n  dataKey?: string | number\n  color?: string\n  payload?: unknown\n  [key: string]: unknown\n}\n\ninterface ChartLegendContentProps extends React.ComponentProps<'div'> {\n  payload?: RechartsLegendPayloadItem[]\n  verticalAlign?: 'top' | 'middle' | 'bottom'\n  hideIcon?: boolean\n  nameKey?: string\n}\n\nconst ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n  ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n    const { config } = useChart()\n    if (!payload?.length) return null\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-center gap-4',\n          verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n          className,\n        )}\n      >\n        {payload.map((item) => {\n          const key = `${nameKey || item.dataKey || 'value'}`\n          const itemConfig = getPayloadConfig(config, item, key)\n          return (\n            <div\n              key={String(item.value)}\n              className=\"flex items-center gap-1.5 text-fg-secondary [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-fg-muted\"\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div className=\"h-2 w-2 shrink-0 rounded-xs\" style={{ backgroundColor: item.color }} />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n      </div>\n    )\n  },\n)\nChartLegendContent.displayName = 'ChartLegendContent'\n\n// ── helpers ────────────────────────────────────────────────────────────────\n\nfunction getPayloadConfig(\n  config: ChartConfig,\n  payload: unknown,\n  key: string,\n) {\n  if (typeof payload !== 'object' || payload === null) return undefined\n  const payloadPayload =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? payload.payload\n      : undefined\n  let configLabelKey: string = key\n  if (key in (payload as Record<string, unknown>) && typeof (payload as Record<string, unknown>)[key] === 'string') {\n    configLabelKey = (payload as Record<string, string>)[key]\n  } else if (payloadPayload && key in payloadPayload && typeof (payloadPayload as Record<string, unknown>)[key] === 'string') {\n    configLabelKey = (payloadPayload as Record<string, string>)[key]\n  }\n  return configLabelKey in config ? config[configLabelKey] : config[key]\n}\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 chartMeta = {\n  component: 'Chart',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Checkbox/checkbox.d.ts

@@ -11,13 +11,16 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Che
     /**
      * Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，
      * 套用 text-body / text-foreground / disabled 色 的 codified 樣式。
-     * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。
+     * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldLabel 接管）；
+     * CheckboxGroup 內每個 checkbox 的 label 是它自己的選項名，必保留
+     * （同檔 shouldSuppressLabel = insideField && !insideGroup，AR50 anchor）。
      */
     label?: React.ReactNode;
     /**
      * Inline description（secondary 文字）。須與 label 搭配使用。
      * 套用 text-body / text-fg-secondary 樣式。
-     * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。
+     * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldDescription 接管）；
+     * CheckboxGroup 內的 description 屬各選項自有，必保留（同 label 的 group 例外）。
      */
     description?: React.ReactNode;
     /** 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc 為 SSOT;與 avatar 互斥)*/

package/dist/components/Checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AAiCD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFAgJb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AAiCD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFA8Kb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Checkbox/checkbox.js

@@ -74,16 +74,29 @@ const Checkbox = React.forwardRef(
     const effectiveReadOnly = readOnly || resolvedMode === "readonly";
     const effectiveDisabled = resolvedDisabled || resolvedMode === "disabled";
     const resolvedBoxSize = useResolvedFieldSize(size ?? void 0, "md");
+    const {
+      checked: checkedProp,
+      defaultChecked: defaultCheckedProp,
+      onCheckedChange: _onCheckedChange,
+      required: _required,
+      name: _name,
+      value: _value,
+      asChild: _asChild,
+      children: _children,
+      ...restDomProps
+    } = props;
     if (resolvedMode === "display") {
-      const isChecked = props.checked === true;
-      return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
+      const isChecked = checkedProp === true;
+      return isChecked ? /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-fg-muted", children: "—" });
     }
     if (effectiveReadOnly && insideField && effectiveLabel == null) {
-      const isChecked = (props.checked ?? props.defaultChecked) === true;
+      const isChecked = (checkedProp ?? defaultCheckedProp) === true;
       const boxSize = resolvedBoxSize;
       return /* @__PURE__ */ jsx(
         "div",
         {
+          ...restDomProps,
+          ref,
           role: "checkbox",
           "aria-checked": isChecked,
           "aria-readonly": "true",
@@ -112,6 +125,14 @@ const Checkbox = React.forwardRef(
         "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
         className: cn(checkboxVariants({ size }), className),
         ...props,
+        onClick: (event) => {
+          var _a;
+          if (effectiveReadOnly) {
+            event.preventDefault();
+            return;
+          }
+          (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+        },
         children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) : /* @__PURE__ */ jsx(Check, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) })
       }
     );