@qijenchen/design-system 0.1.0-beta.53 → 0.1.0-beta.55

package/dist/components/AspectRatio/aspect-ratio.d.ts

@@ -29,7 +29,7 @@ export declare const aspectRatioMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

package/dist/components/AspectRatio/aspect-ratio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;CAelB,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;CAiBlB,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AspectRatio/aspect-ratio.js

@@ -6,10 +6,12 @@ AspectRatio.displayName = "AspectRatio";
 const aspectRatioMeta = {
   component: "AspectRatio",
   family: null,
-  // non-family composite / overlay / layout
+  // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec.md L101「無 hover/focus/active/disabled」)。
+  // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。
+  states: ["default"],
   tokens: {
     bg: [],
     fg: [],

package/dist/components/AspectRatio/aspect-ratio.js.map

@@ -1 +1 @@
-{"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/**\n * AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n *\n * 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n *\n * ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n *\n * ── 標準 ratio(DS 慣例) ──\n * 16/9  — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3   — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1   — Avatar / 方形貼文預覽 / icon preview\n * 3/4   — 直式照片(人物 portrait)\n * 21/9  — Ultra-wide banner(hero section)\n *\n * Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n *\n * ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n  React.ElementRef<typeof AspectRatioPrimitive.Root>,\n  AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n  component: 'AspectRatio',\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: [],\n  },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAgCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/**\n * AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n *\n * 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n *\n * ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n *\n * ── 標準 ratio(DS 慣例) ──\n * 16/9  — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3   — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1   — Avatar / 方形貼文預覽 / icon preview\n * 3/4   — 直式照片(人物 portrait)\n * 21/9  — Ultra-wide banner(hero section)\n *\n * Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n *\n * ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n  React.ElementRef<typeof AspectRatioPrimitive.Root>,\n  AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n  component: 'AspectRatio',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec.md L101「無 hover/focus/active/disabled」)。\n  // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。\n  states: ['default'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAgCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA;AAAA,EAKP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Avatar/avatar.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type CategoricalColor } from '../../tokens/categorical-color';
 /**
  * Avatar — 頭像元件
  *
@@ -17,7 +18,7 @@ import type { LucideIcon } from 'lucide-react';
  *   circle（預設）→ rounded-full，用於人物
  *   square → rounded-md (4px)，用於實體（專案、組織、App）
  */
-type ColorKey = 'neutral' | 'blue' | 'red' | 'green' | 'yellow' | 'turquoise' | 'purple' | 'magenta' | 'indigo';
+type ColorKey = CategoricalColor;
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */
     size?: number | 'fill';
@@ -31,7 +32,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: LucideIcon;
     /** Icon / text fallback 的背景色，預設 neutral */
     color?: ColorKey;
-    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false */
+    /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */
     solid?: boolean;
     /**
      * 在線狀態指示器(presence),顯示在 avatar **右下角**。

package/dist/components/Avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAO9C;;;;;;;;;;;;;;;;GAgBG;AAMH,KAAK,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AA2E/G,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAiMD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAMrH;;;;;;;;;;;;;;;;GAgBG;AAQH,KAAK,QAAQ,GAAG,gBAAgB,CAAA;AA6DhC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,yGAAyG;IACzG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAiMD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Avatar/avatar.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { User } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import { CAT_SOLID_TOKENS, CAT_SUBTLE_TOKENS } from "../../tokens/categorical-color.js";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
 import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
 import { Badge } from "../Badge/badge.js";
@@ -9,25 +10,11 @@ import { useTableIsScrolling, useFieldContext } from "../Field/field-context.js"
 const COLOR_MAP = {
   subtle: {
     neutral: { bg: "var(--muted)", text: "var(--foreground)" },
-    blue: { bg: "var(--color-blue-1)", text: "var(--color-blue-7)" },
-    red: { bg: "var(--color-deep-orange-1)", text: "var(--color-deep-orange-7)" },
-    green: { bg: "var(--color-green-1)", text: "var(--color-green-7)" },
-    yellow: { bg: "var(--color-yellow-1)", text: "var(--color-yellow-7)" },
-    turquoise: { bg: "var(--color-turquoise-1)", text: "var(--color-turquoise-7)" },
-    purple: { bg: "var(--color-purple-1)", text: "var(--color-purple-7)" },
-    magenta: { bg: "var(--color-magenta-1)", text: "var(--color-magenta-7)" },
-    indigo: { bg: "var(--color-indigo-1)", text: "var(--color-indigo-7)" }
+    ...CAT_SUBTLE_TOKENS
   },
   solid: {
     neutral: { bg: "var(--color-neutral-9)", text: "var(--inverse-fg)" },
-    blue: { bg: "var(--color-blue-6)", text: "var(--on-emphasis)" },
-    red: { bg: "var(--color-deep-orange-6)", text: "var(--on-emphasis)" },
-    green: { bg: "var(--color-green-6)", text: "var(--on-emphasis)" },
-    yellow: { bg: "var(--color-yellow-6)", text: "var(--warning-foreground)" },
-    turquoise: { bg: "var(--color-turquoise-6)", text: "var(--on-emphasis)" },
-    purple: { bg: "var(--color-purple-6)", text: "var(--on-emphasis)" },
-    magenta: { bg: "var(--color-magenta-6)", text: "var(--on-emphasis)" },
-    indigo: { bg: "var(--color-indigo-6)", text: "var(--on-emphasis)" }
+    ...CAT_SOLID_TOKENS
   }
 };
 function getIconSize(avatarSize) {

package/dist/components/Avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useFieldContext, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/**\n * Avatar — 頭像元件\n *\n * 三種內容模式（按優先順序）：\n *   1. src → 圖片\n *   2. icon → icon 在底色圓/方形內\n *   3. alt → 取首字作文字 fallback\n *   4. 都沒有 → 預設 User icon\n *\n * ── 尺寸 ──\n *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n *   文字 fallback 字體 = size × 0.5\n *\n * ── 形狀 ──\n *   circle（預設）→ rounded-full，用於人物\n *   square → rounded-md (4px)，用於實體（專案、組織、App）\n */\n\n// ── 色彩 ──\n// 直接引用 primitive（bg=step-1, text=step-7），不經過語義層\n// solid：step-6 全色底 + 白色前景（yellow 例外用 --warning-foreground）\n// neutral solid：neutral-9 + --inverse-fg（自動反轉）\ntype ColorKey = 'neutral' | 'blue' | 'red' | 'green' | 'yellow' | 'turquoise' | 'purple' | 'magenta' | 'indigo'\ntype VariantKey = 'subtle' | 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n  subtle: {\n    neutral:   { bg: 'var(--muted)',                text: 'var(--foreground)' },\n    blue:      { bg: 'var(--color-blue-1)',         text: 'var(--color-blue-7)' },\n    red:       { bg: 'var(--color-deep-orange-1)',  text: 'var(--color-deep-orange-7)' },\n    green:     { bg: 'var(--color-green-1)',        text: 'var(--color-green-7)' },\n    yellow:    { bg: 'var(--color-yellow-1)',       text: 'var(--color-yellow-7)' },\n    turquoise: { bg: 'var(--color-turquoise-1)',    text: 'var(--color-turquoise-7)' },\n    purple:    { bg: 'var(--color-purple-1)',       text: 'var(--color-purple-7)' },\n    magenta:   { bg: 'var(--color-magenta-1)',      text: 'var(--color-magenta-7)' },\n    indigo:    { bg: 'var(--color-indigo-1)',       text: 'var(--color-indigo-7)' },\n  },\n  solid: {\n    neutral:   { bg: 'var(--color-neutral-9)',      text: 'var(--inverse-fg)' },\n    blue:      { bg: 'var(--color-blue-6)',         text: 'var(--on-emphasis)' },\n    red:       { bg: 'var(--color-deep-orange-6)',  text: 'var(--on-emphasis)' },\n    green:     { bg: 'var(--color-green-6)',        text: 'var(--on-emphasis)' },\n    yellow:    { bg: 'var(--color-yellow-6)',       text: 'var(--warning-foreground)' },\n    turquoise: { bg: 'var(--color-turquoise-6)',    text: 'var(--on-emphasis)' },\n    purple:    { bg: 'var(--color-purple-6)',       text: 'var(--on-emphasis)' },\n    magenta:   { bg: 'var(--color-magenta-6)',      text: 'var(--on-emphasis)' },\n    indigo:    { bg: 'var(--color-indigo-6)',       text: 'var(--on-emphasis)' },\n  },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n  return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n  return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string | null {\n  const [theme, setTheme] = React.useState<string | null>(() =>\n    typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n  )\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const update = () => setTheme(root.getAttribute('data-theme'))\n    update()\n    const obs = new MutationObserver(update)\n    obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => obs.disconnect()\n  }, [])\n  return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */\n  size?: number | 'fill'\n  /** 形狀：circle（人物）或 square（實體），預設 circle */\n  shape?: 'circle' | 'square'\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt?: string\n  /** Icon 模式（LucideIcon） */\n  icon?: LucideIcon\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /** 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false */\n  solid?: boolean\n  /**\n   * 在線狀態指示器(presence),顯示在 avatar **右下角**。\n   * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n   * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在 在不在」)。\n   */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /**\n   * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。\n   * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n   * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n   * 與右下的 presence 共存不衝突(不同角、不同語義)。\n   * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n   */\n  badgeCount?: number\n  /**\n   * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n   * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n    const [imgError, setImgError] = React.useState(false)\n    const documentTheme = useDocumentTheme()\n    const isTableScrolling = useTableIsScrolling()\n    // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n    // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n    // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n    // Scope narrowest:`fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true`,標準 Field\n    // 家族 wrapper disabled 時才 dim;**沒包在 Field wrapper 內的 standalone Avatar**(ProfileCard / FileItem /\n    // HoverCard / Dialog 等 display 場景)**backward compat 不變**。對齊 avatar.spec.md「Avatar 在 disabled\n    // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n    const fieldCtx = useFieldContext()\n    const isDisabledInField = fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true\n    const isFill = size === 'fill'\n    // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n    // 數字模式下用既有 px 計算\n    const numSize = isFill ? 32 : (size as number)\n    const iconPx = getIconSize(numSize)\n    const fontSizePx = Math.round(numSize * 0.5)\n    const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n    const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n    const radius = shape === 'circle' ? '9999px' : '4px'\n\n    // 決定內容\n    const showImage = src && !imgError\n    const showIcon = !showImage && (Icon || (!alt))\n    const showText = !showImage && !showIcon && alt\n\n    const FallbackIcon = Icon ?? User\n\n    // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n    // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n    // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n    // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n    const dotBorder = dotSize >= 12 ? 3 : 2\n\n    const avatarEl = (\n      <div\n        className={cn(\n          'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n          isFill && 'w-full h-full',\n          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n          isDisabledInField && 'opacity-disabled',\n        )}\n        style={{\n          ...(isFill\n            ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n            : { width: numSize, height: numSize }),\n          borderRadius: radius,\n          backgroundColor: showImage ? undefined : colors.bg,\n          color: showImage ? undefined : colors.text,\n        }}\n        data-avatar-size={isFill ? 'fill' : numSize}\n        role={!showImage && alt && !hoverCard ? 'img' : undefined}\n        aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n      >\n        {showImage && (\n          <img\n            src={src}\n            alt={alt ?? ''}\n            className=\"w-full h-full object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n        {showIcon && (\n          isFill\n            ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n            : <FallbackIcon size={iconPx} aria-hidden />\n        )}\n        {showText && (\n          <span\n            className=\"font-medium leading-none\"\n            style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n            aria-hidden\n          >\n            {getInitial(alt!)}\n          </span>\n        )}\n      </div>\n    )\n\n    const hasOverlay = status || typeof badgeCount === 'number'\n    // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n    // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n    // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n    // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n    // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n    const focusableProps = hoverCard\n      ? {\n          tabIndex: 0,\n          role: 'button' as const,\n          'aria-haspopup': 'dialog' as const,\n          'aria-label': alt ?? 'View profile',\n        }\n      : {}\n    // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md 對齊 body radius L173),\n    // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n    // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n    const focusableClass = hoverCard\n      ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n      : ''\n    const baseEl = !hasOverlay\n      ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n      : (\n        <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n          {avatarEl}\n          {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n              落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n              border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n              a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n              (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 */}\n          {status && (\n            <span\n              className=\"absolute block rounded-full\"\n              style={{\n                width: dotSize,\n                height: dotSize,\n                bottom: 0,\n                right: 0,\n                backgroundColor: STATUS_DOT_COLOR[status],\n                boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-hidden\n            />\n          )}\n          {/* Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n              Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n              再加 ring 與 avatar 分離 */}\n          {typeof badgeCount === 'number' && badgeCount > 0 && (\n            <Badge\n              variant=\"critical\"\n              count={badgeCount}\n              max={99}\n              className=\"absolute -top-1 -right-1\"\n              style={{\n                boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-label={`${badgeCount} unread`}\n            />\n          )}\n        </div>\n      )\n\n    // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n    // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n    // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n    // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n    // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n    if (!hoverCard || isTableScrolling) return baseEl\n\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {baseEl}\n        </HoverCardTrigger>\n        {/* HoverCardContent canonical(2026-04-23):\n            - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n            - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n            - **不設 max-height**:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n              自約束高度 + 內部 ScrollArea 處理捲動\n            - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 **app-level theme**(從 `<html data-theme>`\n              動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n              tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n              確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 */}\n        <HoverCardContent\n          data-theme={documentTheme ?? undefined}\n          className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n          style={{ boxShadow: 'var(--elevation-200)' }}\n        >\n          {hoverCard}\n        </HoverCardContent>\n      </HoverCard>\n    )\n  }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt: string\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /**\n   * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n   * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n   * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n   * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n   */\n  hoverCard?: React.ReactNode\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 avatarMeta = {\n  component: 'Avatar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground', '--on-emphasis'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useFieldContext, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/**\n * Avatar — 頭像元件\n *\n * 三種內容模式（按優先順序）：\n *   1. src → 圖片\n *   2. icon → icon 在底色圓/方形內\n *   3. alt → 取首字作文字 fallback\n *   4. 都沒有 → 預設 User icon\n *\n * ── 尺寸 ──\n *   size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n *   文字 fallback 字體 = size × 0.5\n *\n * ── 形狀 ──\n *   circle（預設）→ rounded-full，用於人物\n *   square → rounded-md (4px)，用於實體（專案、組織、App）\n */\n\n// ── 色彩 ──\n// **消費 categorical-color SSOT**(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-*`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' | 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n  subtle: {\n    neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n    ...CAT_SUBTLE_TOKENS,\n  },\n  solid: {\n    neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n    ...CAT_SOLID_TOKENS,\n  },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n  return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n  return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string | null {\n  const [theme, setTheme] = React.useState<string | null>(() =>\n    typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n  )\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return\n    const root = document.documentElement\n    const update = () => setTheme(root.getAttribute('data-theme'))\n    update()\n    const obs = new MutationObserver(update)\n    obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => obs.disconnect()\n  }, [])\n  return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 */\n  size?: number | 'fill'\n  /** 形狀：circle（人物）或 square（實體），預設 circle */\n  shape?: 'circle' | 'square'\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt?: string\n  /** Icon 模式（LucideIcon） */\n  icon?: LucideIcon\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */\n  solid?: boolean\n  /**\n   * 在線狀態指示器(presence),顯示在 avatar **右下角**。\n   * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n   * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在 在不在」)。\n   */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /**\n   * 未讀 / 通知計數 badge,顯示在 avatar **右上角**。\n   * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n   * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n   * 與右下的 presence 共存不衝突(不同角、不同語義)。\n   * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n   */\n  badgeCount?: number\n  /**\n   * 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n   * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n   */\n  hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n    const [imgError, setImgError] = React.useState(false)\n    const documentTheme = useDocumentTheme()\n    const isTableScrolling = useTableIsScrolling()\n    // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n    // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n    // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n    // Scope narrowest:`fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true`,標準 Field\n    // 家族 wrapper disabled 時才 dim;**沒包在 Field wrapper 內的 standalone Avatar**(ProfileCard / FileItem /\n    // HoverCard / Dialog 等 display 場景)**backward compat 不變**。對齊 avatar.spec.md「Avatar 在 disabled\n    // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n    const fieldCtx = useFieldContext()\n    const isDisabledInField = fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true\n    const isFill = size === 'fill'\n    // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n    // 數字模式下用既有 px 計算\n    const numSize = isFill ? 32 : (size as number)\n    const iconPx = getIconSize(numSize)\n    const fontSizePx = Math.round(numSize * 0.5)\n    const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n    const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n    const radius = shape === 'circle' ? '9999px' : '4px'\n\n    // 決定內容\n    const showImage = src && !imgError\n    const showIcon = !showImage && (Icon || (!alt))\n    const showText = !showImage && !showIcon && alt\n\n    const FallbackIcon = Icon ?? User\n\n    // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n    // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n    // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n    const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n    // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n    const dotBorder = dotSize >= 12 ? 3 : 2\n\n    const avatarEl = (\n      <div\n        className={cn(\n          'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n          isFill && 'w-full h-full',\n          // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n          // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n          isDisabledInField && 'opacity-disabled',\n        )}\n        style={{\n          ...(isFill\n            ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n            : { width: numSize, height: numSize }),\n          borderRadius: radius,\n          backgroundColor: showImage ? undefined : colors.bg,\n          color: showImage ? undefined : colors.text,\n        }}\n        data-avatar-size={isFill ? 'fill' : numSize}\n        role={!showImage && alt && !hoverCard ? 'img' : undefined}\n        aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n      >\n        {showImage && (\n          <img\n            src={src}\n            alt={alt ?? ''}\n            className=\"w-full h-full object-cover\"\n            onError={() => setImgError(true)}\n          />\n        )}\n        {showIcon && (\n          isFill\n            ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n            : <FallbackIcon size={iconPx} aria-hidden />\n        )}\n        {showText && (\n          <span\n            className=\"font-medium leading-none\"\n            style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n            aria-hidden\n          >\n            {getInitial(alt!)}\n          </span>\n        )}\n      </div>\n    )\n\n    const hasOverlay = status || typeof badgeCount === 'number'\n    // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n    // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n    // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n    // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n    // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n    const focusableProps = hoverCard\n      ? {\n          tabIndex: 0,\n          role: 'button' as const,\n          'aria-haspopup': 'dialog' as const,\n          'aria-label': alt ?? 'View profile',\n        }\n      : {}\n    // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md 對齊 body radius L173),\n    // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n    // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n    const focusableClass = hoverCard\n      ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n      : ''\n    const baseEl = !hasOverlay\n      ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n      : (\n        <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n          {avatarEl}\n          {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n              落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n              border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n              a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n              (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 */}\n          {status && (\n            <span\n              className=\"absolute block rounded-full\"\n              style={{\n                width: dotSize,\n                height: dotSize,\n                bottom: 0,\n                right: 0,\n                backgroundColor: STATUS_DOT_COLOR[status],\n                boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-hidden\n            />\n          )}\n          {/* Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n              Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n              再加 ring 與 avatar 分離 */}\n          {typeof badgeCount === 'number' && badgeCount > 0 && (\n            <Badge\n              variant=\"critical\"\n              count={badgeCount}\n              max={99}\n              className=\"absolute -top-1 -right-1\"\n              style={{\n                boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n              }}\n              aria-label={`${badgeCount} unread`}\n            />\n          )}\n        </div>\n      )\n\n    // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n    // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n    // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n    // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n    // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n    if (!hoverCard || isTableScrolling) return baseEl\n\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {baseEl}\n        </HoverCardTrigger>\n        {/* HoverCardContent canonical(2026-04-23):\n            - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n            - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n            - **不設 max-height**:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n              自約束高度 + 內部 ScrollArea 處理捲動\n            - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 **app-level theme**(從 `<html data-theme>`\n              動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n              tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n              確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 */}\n        <HoverCardContent\n          data-theme={documentTheme ?? undefined}\n          className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n          style={{ boxShadow: 'var(--elevation-200)' }}\n        >\n          {hoverCard}\n        </HoverCardContent>\n      </HoverCard>\n    )\n  }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n  /** 圖片 URL */\n  src?: string\n  /** 替代文字（圖片失敗時取首字作 fallback） */\n  alt: string\n  /** Icon / text fallback 的背景色，預設 neutral */\n  color?: ColorKey\n  /**\n   * Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n   * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n   * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n   * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n   */\n  hoverCard?: React.ReactNode\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 avatarMeta = {\n  component: 'Avatar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground', '--on-emphasis'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/badge.d.ts

@@ -18,7 +18,7 @@ export declare const badgeMeta: {
     readonly family: 3;
     readonly variants: {
         readonly critical: {
-            readonly purpose: "紅底白字（bg-notification）";
+            readonly purpose: "deep-orange 底白字（bg-notification = deep-orange-6）";
         };
         readonly high: {
             readonly purpose: "藍底白字（bg-info）";

package/dist/components/Badge/badge.js

@@ -47,7 +47,7 @@ const badgeMeta = {
   component: "Badge",
   family: 3,
   variants: {
-    critical: { purpose: "紅底白字（bg-notification）" },
+    critical: { purpose: "deep-orange 底白字（bg-notification = deep-orange-6）" },
     high: { purpose: "藍底白字（bg-info）" },
     medium: { purpose: "淺藍底藍字（bg-info-subtle）" },
     low: { purpose: "使用者切 tab 才看，不需搶注意力" }

package/dist/components/Badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n//   count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n//   dot   — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n//   low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n//   medium      — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n//   high        — 藍底白字（bg-info），有感影響的待辦\n//   critical    — 紅底白字（bg-notification），立即處理\n//\n// 規則：default low, escalate with reason。見 badge.spec.md「選 level 的流程」。\n\nconst badgeVariants = cva(\n  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n  'inline-flex items-center justify-center rounded-full leading-none',\n  {\n    variants: {\n      variant: {\n        critical: 'bg-notification text-on-emphasis',\n        high: 'bg-info text-on-emphasis',\n        medium: 'bg-info-subtle text-info-text',\n        low: 'bg-secondary text-fg-muted',\n      },\n      dot: {\n        true: 'w-1.5 h-1.5',\n        false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n      },\n    },\n    defaultVariants: {\n      variant: 'low',\n      dot: false,\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Omit<VariantProps<typeof badgeVariants>, 'dot'> {\n  /** dot 模式：6×6px 純色圓點，無文字 */\n  dot?: boolean\n  /** 顯示的數量（dot 模式下忽略） */\n  count?: number\n  /** 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n  max?: number\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n    const display = dot ? null : (\n      max != null && count != null && count > max ? `${max}+` : `${count}`\n    )\n\n    // a11y(2026-04-25 axe aria-prohibited-attr fix):\n    // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n    // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n    // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n    return (\n      <span\n        ref={ref}\n        role={role ?? 'status'}\n        className={cn(badgeVariants({ variant, dot }), className)}\n        {...props}\n      >\n        {display}\n      </span>\n    )\n  }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n  component: 'Badge',\n  family: 3,\n  variants: {\n    critical: { purpose: '紅底白字（bg-notification）' },\n    high: { purpose: '藍底白字（bg-info）' },\n    medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n    low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n    fg: ['text-fg-muted', 'text-info-text'],\n    ring: [],\n  },\n  defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAmBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAaA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACxE,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,IAAA,CAAK,GAAG,SAAS;AAAA,QACvD,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,wBAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,gBAAgB;AAAA,IACtC,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n//   count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n//   dot   — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n//   low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n//   medium      — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n//   high        — 藍底白字（bg-info），有感影響的待辦\n//   critical    — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// 規則：default low, escalate with reason。見 badge.spec.md「選 level 的流程」。\n\nconst badgeVariants = cva(\n  // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n  // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n  // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n  // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n  'inline-flex items-center justify-center rounded-full leading-none',\n  {\n    variants: {\n      variant: {\n        critical: 'bg-notification text-on-emphasis',\n        high: 'bg-info text-on-emphasis',\n        medium: 'bg-info-subtle text-info-text',\n        low: 'bg-secondary text-fg-muted',\n      },\n      dot: {\n        true: 'w-1.5 h-1.5',\n        false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n      },\n    },\n    defaultVariants: {\n      variant: 'low',\n      dot: false,\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Omit<VariantProps<typeof badgeVariants>, 'dot'> {\n  /** dot 模式：6×6px 純色圓點，無文字 */\n  dot?: boolean\n  /** 顯示的數量（dot 模式下忽略） */\n  count?: number\n  /** 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n  max?: number\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n    const display = dot ? null : (\n      max != null && count != null && count > max ? `${max}+` : `${count}`\n    )\n\n    // a11y(2026-04-25 axe aria-prohibited-attr fix):\n    // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n    // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n    // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n    return (\n      <span\n        ref={ref}\n        role={role ?? 'status'}\n        className={cn(badgeVariants({ variant, dot }), className)}\n        {...props}\n      >\n        {display}\n      </span>\n    )\n  }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n  component: 'Badge',\n  family: 3,\n  variants: {\n    critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n    high: { purpose: '藍底白字（bg-info）' },\n    medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n    low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n    fg: ['text-fg-muted', 'text-info-text'],\n    ring: [],\n  },\n  defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAmBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAaA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AACxE,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,IAAA,CAAK,GAAG,SAAS;AAAA,QACvD,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,gBAAgB;AAAA,IACtC,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;8EAgKnB,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAChF,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAwBD,QAAA,MAAM,MAAM,uFAqKX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;8EAgKnB,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAChF,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAwBD,QAAA,MAAM,MAAM,uFAsKX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/Button/button.js

@@ -186,6 +186,8 @@ const Button = React.forwardRef(
     loading = false,
     fullWidth = false,
     pressed,
+    pressedTone,
+    // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default
     children,
     disabled,
     ...props
@@ -218,7 +220,7 @@ const Button = React.forwardRef(
       Comp,
       {
         className: cn(
-          buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, className }),
+          buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, pressedTone, className }),
           // iconOnly 鐵律:padding-free + aspect-square + flex-center (Polaris idiom)
           // 0 magic-number 0 公式自動正方形。詳 ICON_ONLY_BASE rationale。
           resolvedIconOnly && ICON_ONLY_BASE,

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 { useFieldContext } 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     套用在任何 variant 上，將顏色改為危險色（紅色）\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 → neutral-selected 底，hover 反向變淺，:active 深一階\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      variant: 'primary',\n      size: 'md',\n      pressedTone: 'emphasis',\n    },\n  }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup provides this context; Button reads it for fullWidth injection.\n// Context lives here (not in button-group.tsx) so there is no circular 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' | (string & {})\n  /** 套用危險色（紅色）。可與任何 variant 組合使用。 */\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/**\n * Icon-only padding — calc `(field-height - icon-size) / 2` per size。\n *\n * 設計:startIcon 到左邊距離 = padding = `(height - icon) / 2`。\n * 純 icon-only 時 width = 2*padding + icon = height → **自然正方形**,不需要 aspect-square。\n * 有 suffix(badge / endIcon)時 width = 2*pad + icon + gap + suffix > height → **自然長方形**。\n * StartIcon 到左邊距離始終不變,形狀自動適應內容。\n *\n * 用 CSS var 讓 density 切換時 padding 自動跟著算(field-height 會變)。\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      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    // ── FieldContext：在 Field 內時自動讀 size，讓 Button 跟 Input 同高 ──\n    const fieldCtx = useFieldContext?.()\n    const resolvedSize = size ?? (fieldCtx?.size as typeof 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    const resolvedVariant: InternalVariant =\n      dismiss ? 'text' :\n      (variantProp as string) === 'destructive' ? 'primary' :\n      (variantProp as string) === 'ghost'        ? 'text'    :\n      (variantProp as InternalVariant) ?? 'primary'\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] 分支套用——secondary/tertiary 走 primary-subtle，\n    // text 走 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, 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: 'body' },\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, 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: 'primary',\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 { useFieldContext } 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     套用在任何 variant 上，將顏色改為危險色（紅色）\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 → neutral-selected 底，hover 反向變淺，:active 深一階\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      variant: 'primary',\n      size: 'md',\n      pressedTone: 'emphasis',\n    },\n  }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup provides this context; Button reads it for fullWidth injection.\n// Context lives here (not in button-group.tsx) so there is no circular 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' | (string & {})\n  /** 套用危險色（紅色）。可與任何 variant 組合使用。 */\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/**\n * Icon-only padding — calc `(field-height - icon-size) / 2` per size。\n *\n * 設計:startIcon 到左邊距離 = padding = `(height - icon) / 2`。\n * 純 icon-only 時 width = 2*padding + icon = height → **自然正方形**,不需要 aspect-square。\n * 有 suffix(badge / endIcon)時 width = 2*pad + icon + gap + suffix > height → **自然長方形**。\n * StartIcon 到左邊距離始終不變,形狀自動適應內容。\n *\n * 用 CSS var 讓 density 切換時 padding 自動跟著算(field-height 會變)。\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 同高 ──\n    const fieldCtx = useFieldContext?.()\n    const resolvedSize = size ?? (fieldCtx?.size as typeof 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    const resolvedVariant: InternalVariant =\n      dismiss ? 'text' :\n      (variantProp as string) === 'destructive' ? 'primary' :\n      (variantProp as string) === 'ghost'        ? 'text'    :\n      (variantProp as InternalVariant) ?? 'primary'\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] 分支套用——secondary/tertiary 走 primary-subtle，\n    // text 走 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: 'body' },\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, 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: 'primary',\n  defaultSize: 'md',\n} as const\n\nexport { Button, buttonVariants, ButtonGroupContext }\n"],"names":[],"mappings":"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"}

package/dist/components/Calendar/calendar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type CategoricalHue } from '../../tokens/categorical-color';
 /**
  * Calendar — 事件檢視 canvas(月 view MVP)
  *
@@ -25,10 +26,11 @@ export interface CalendarEvent {
     end: string | Date;
     allDay?: boolean;
     /**
-     * 事件類別色。值為 DS primitive 色名(blue / green / orange / purple / red / yellow)。
-     * 對照 Badge / Tag 的 primitive color variants。
+     * 事件類別色(categorical 色相,1:1 對 `--color-{hue}-*`)。**消費 categorical-color SSOT**,
+     * 與 Tag / Avatar 共用同一組 12 色相。2026-06-04 修:原 `orange` 與 `red` 都誤接 deep-orange;
+     * 改消費 SSOT 後 orange→`--color-orange-*`、red→`--color-red-*`(品牌紅 hue 25),各自獨立。
      */
-    color?: 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow';
+    color?: CategoricalHue;
     metadata?: Record<string, unknown>;
 }
 export type CalendarView = 'month' | 'week' | 'day';

package/dist/components/Calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAE3C,wBAAwB;IACxB,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,oBAAoB,CAAC,EAAE,IAAI,CAAA;IAC3B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAE5C,WAAW;IACX,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IAExB,sBAAsB;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,uBAAuB;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAEpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAE3D,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAgDD,QAAA,MAAM,QAAQ,sFAwQZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,OAAO,EAAyB,KAAK,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAIrG;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAE3C,wBAAwB;IACxB,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,oBAAoB,CAAC,EAAE,IAAI,CAAA;IAC3B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAE5C,WAAW;IACX,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IAExB,sBAAsB;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,uBAAuB;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAEpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAE3D,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAgCD,QAAA,MAAM,QAAQ,sFAwQZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Calendar/calendar.js

@@ -3,24 +3,11 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
 import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isSameDay, format, subMonths, addMonths } from "date-fns";
 import { cn } from "../../lib/utils.js";
+import { CAT_ACCENT, CAT_EVENT } from "../../tokens/categorical-color.js";
 import { Button } from "../Button/button.js";
 import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/segmented-control.js";
-const EVENT_COLOR_CLASSES = {
-  blue: "bg-[var(--color-blue-1)] text-[var(--color-blue-7)] hover:bg-[var(--color-blue-2)]",
-  green: "bg-[var(--color-green-1)] text-[var(--color-green-7)] hover:bg-[var(--color-green-2)]",
-  orange: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]",
-  purple: "bg-[var(--color-purple-1)] text-[var(--color-purple-7)] hover:bg-[var(--color-purple-2)]",
-  red: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]",
-  yellow: "bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)] hover:bg-[var(--color-yellow-2)]"
-};
-const EVENT_ALLDAY_ACCENT = {
-  blue: "border-l-[3px] border-[var(--color-blue-6)]",
-  green: "border-l-[3px] border-[var(--color-green-6)]",
-  orange: "border-l-[3px] border-[var(--color-deep-orange-6)]",
-  purple: "border-l-[3px] border-[var(--color-purple-6)]",
-  red: "border-l-[3px] border-[var(--color-deep-orange-6)]",
-  yellow: "border-l-[3px] border-[var(--color-yellow-6)]"
-};
+const EVENT_COLOR_CLASSES = CAT_EVENT;
+const EVENT_ALLDAY_ACCENT = CAT_ACCENT;
 function coerceDate(value) {
   return value instanceof Date ? value : new Date(value);
 }