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

package/dist/components/Tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/Tabs/tabs.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(Tabs + overflow scroll mode + dropdown switcher + inline action slot)在單一 wrapper SSOT 內,拆分會破壞 a11y / focus management chain。當前 515 < cap 800。\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\nimport {\n  useScrollEdges,\n  useScrollByPage,\n  buildFadeMask,\n  ARROW_BUTTON_WIDTH,\n  OverflowScrollArrow,\n  OverflowMenuTriggerButton,\n} from '@/design-system/patterns/horizontal-overflow/horizontal-overflow'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * Tabs — 基於 Radix Tabs，橋接設計系統 token\n *\n * ── 定位 ──\n *   同一上下文底下切換平行的 view。切 view（不是切 value）。\n *   切 value 用 SegmentedControl；切路由用 navigation。\n *\n * ── Size ──\n *   sm   h-tab-sm（32/40），★ 預設(2026-05-17 從 md 改),overlay / chrome / dense\n *   md   h-tab-md（40/48），future tier 無 recommended use case\n *   lg   h-tab-lg（48/56），page-level hero / 獨立 tabs 取代 chrome header\n *\n * ── 寬度行為 ──\n *   Trigger 寬度永遠由內容決定（hug content）。\n *   Triggers 之間 gap 為 --layout-space-loose（16px / 24px lg density）。\n *\n * ── Trigger 結構 ──\n *   [startIcon?] [label] [suffix: badge? + endIcon?]\n *   slot 間 gap-2，suffix 內 gap-1\n *\n * ── Selected underline ──\n *   使用 ::after 絕對定位在 bottom: -1px，2px primary-hover，\n *   蓋住 TabsList 的 1px gray border（單一視覺線條，不雙線）。\n */\n\n// ── Size context ──\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsOverflow = 'none' | 'scroll' | 'menu'\n\ninterface TabsContextValue {\n  size: TabsSize\n}\nconst TabsContext = React.createContext<TabsContextValue>({ size: 'md' })\n\n// ── Root ──\n// Wrap Radix Tabs 以支援 value/onValueChange 的 context pass-through\n// （menu 模式的 overflow items 需要能 proxy click 觸發同一個 onValueChange）\ninterface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {}\n\nconst TabsValueContext = React.createContext<{\n  value?: string\n  onValueChange?: (value: string) => void\n}>({})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(({ value, onValueChange, defaultValue, children, ...props }, ref) => {\n  // 內部維護一份 uncontrolled state，讓 overflow menu 的 proxy 有 onValueChange 可呼叫\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(defaultValue)\n  const isControlled = value !== undefined\n  const currentValue = isControlled ? value : internalValue\n\n  const handleValueChange = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setInternalValue(next)\n      onValueChange?.(next)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const valueContext = React.useMemo(\n    () => ({ value: currentValue, onValueChange: handleValueChange }),\n    [currentValue, handleValueChange]\n  )\n\n  return (\n    <TabsValueContext.Provider value={valueContext}>\n      <TabsPrimitive.Root\n        ref={ref}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n// ── List ──\n// TabsList 基礎 class — inline-flex 單列 + gap-loose + 底部 border-divider\n// 2026-05-18 改 border-border → border-divider(per user verbatim「我認為應該把 tabs 的\n// 下底線統一改成是 divider 色吧?」+「做」approval):\n// - 跟 Dialog / Sheet / Popover / Sidebar header `border-b border-divider`(neutral-4)同色\n// - withTabs scenario 下 tabs underline = chrome separator,跟 dialog 其他 separator 視覺一致\n// - Selected trigger 2px primary 仍 overlay underlying divider(對比 primary >> divider 不弱)\n// - 對齊 `color.spec.md:706-708` outer-vs-divider 判準(Dialog 結構,T-junction 思路適用)\nconst TABS_LIST_BASE = [\n  'inline-flex items-stretch',\n  'gap-[var(--layout-space-loose)]',\n  'border-b border-divider',\n].join(' ')\n\ninterface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  size?: TabsSize\n  /**\n   * Overflow 處理模式。詳見 tabs.spec.md 的 overflow 段。\n   *   'none'   ★ 預設，不處理，triggers 溢出父容器（適用 tabs 數量可控的情境）\n   *   'scroll' 單行橫向滾動 + 邊緣 fade mask（Material / Polaris / iOS 作法）\n   *   'menu'   塞不下收進 \"⋯\" dropdown，所有 triggers 仍在 DOM 保留 Radix a11y\n   *            （Ant Design / Atlassian 作法）\n   */\n  overflow?: TabsOverflow\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, size = 'sm', overflow = 'none', children, ...props }, ref) => {\n  const tabsSizeContext = React.useMemo(() => ({ size }), [size])\n  if (overflow === 'scroll') {\n    return (\n      <TabsContext.Provider value={tabsSizeContext}>\n        <ScrollTabsList ref={ref} className={className} {...props}>\n          {children}\n        </ScrollTabsList>\n      </TabsContext.Provider>\n    )\n  }\n  if (overflow === 'menu') {\n    return (\n      <TabsContext.Provider value={tabsSizeContext}>\n        <MenuTabsList ref={ref} className={className} {...props}>\n          {children}\n        </MenuTabsList>\n      </TabsContext.Provider>\n    )\n  }\n  // none（預設）\n  return (\n    <TabsContext.Provider value={tabsSizeContext}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(TABS_LIST_BASE, 'w-fit', className)}\n        {...props}\n      >\n        {children}\n      </TabsPrimitive.List>\n    </TabsContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ── Scroll mode ──\n//\n// 共同策略(對齊 Material 3 / Ant Design / Primer UnderlineNav 世界級作法):\n//   - 容器 overflow-x-auto + overflow-y-hidden(真的可滾,鍵盤焦點可 scroll-into-view;\n//     明示 y-hidden 阻 CSS overflow-3 spec「一軸 auto 時另軸 visible compute auto」)\n//   - border-b 在 TabsList 內部(TABS_LIST_BASE),不在 outer wrapper,避免\n//     active underline `after:bottom:-1px` 跟 outer + overflow-x-auto 觸發 y promote bug\n//   - mask / arrow / fade 全部從 horizontal-overflow pattern module 取得——\n//     參見 `patterns/horizontal-overflow/horizontal-overflow.spec.md`\n//   - Menu 模式 = scroll 模式 + 額外的 ⌄ quick-jump button,點 menu item 同時\n//     觸發 onValueChange + scrollIntoView,讓使用者在 tab strip 看到選中的 tab\n// 單行水平滾動 + 邊緣 fade mask 延伸到 arrow button 底下 + 左右 always-visible arrows\n//   - 鍵盤: Radix 原生方向鍵 + 瀏覽器 scroll-into-view\n//   - Trackpad: 兩指橫向滑動\n//   - 滑鼠滾輪: 點 arrow buttons (Shift+wheel 太隱晦)\n\nconst ScrollTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n  const scrollByPage = useScrollByPage(scrollRef)\n  const maskImage = buildFadeMask({\n    canScroll,\n    atStart,\n    atEnd,\n    reserveArrowWidth: ARROW_BUTTON_WIDTH,\n  })\n\n  return (\n    // 2026-05-19 fix(scroll-overflow underline clip + y auto-promote):\n    //   outer 撤 `border-b` → owner 升到 `TabsList` (TABS_LIST_BASE 含 border-b border-divider)\n    //   把 trigger `after:bottom-[-1px]` 2px underline 的下半部 1px 收進 list border-box,\n    //   再加 `overflow-y-hidden` 明示阻 browser y auto-promote(CSS overflow-3 spec:\n    //   overflow-x:auto + overflow-y:visible 必 compute auto)。\n    //   不加 `pb-px`(outer border 撤後 list border 已接 -1px 部分,加 pb 多 1px 多餘空白)。\n    //   對齊 Primer UnderlineNav `overflow-x:auto; overflow-y:hidden` canonical 同步動\n    //   horizontal-overflow.spec.md L75/L101/L129 owner 升 list 內部。\n    <div className=\"relative\">\n      <div\n        ref={scrollRef}\n        className=\"overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        style={{ maskImage, WebkitMaskImage: maskImage }}\n      >\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(TABS_LIST_BASE, 'w-fit', className)}\n          {...props}\n        >\n          {children}\n        </TabsPrimitive.List>\n      </div>\n      {!atStart && canScroll && (\n        <OverflowScrollArrow direction=\"left\" onClick={() => scrollByPage('left')} />\n      )}\n      {!atEnd && canScroll && (\n        <OverflowScrollArrow direction=\"right\" onClick={() => scrollByPage('right')} />\n      )}\n    </div>\n  )\n})\nScrollTabsList.displayName = 'ScrollTabsList'\n\n// ── Menu mode ──\n// Show-all navigator pattern (Chrome tab dropdown / VS Code editor tabs / Discord channel jumper):\n//   - Menu 永遠顯示全部 tabs,active 的用 checked 標記 (單選語意)\n//   - 點 menu item = onValueChange + scrollIntoView(center),把該 tab 捲到視圖中央\n//   - Menu 內容穩定,跟 scroll 位置無關,使用者對「⋯ = navigator」的直覺一致\n//\n// 為什麼底層仍是 overflow-x-auto 而非 overflow-hidden:\n//   - scrollIntoView 需要真實 scroll 容器\n//   - 鍵盤 focus 也依賴真實 scroll 讓 browser auto scroll-into-view\n//   - scrollbar 用 CSS 隱藏,視覺看不出來\n//\n// Fade mask 純視覺,軟化內容硬邊,跟 menu 機制正交 (兩者可並存)。\n// Menu button 出現條件: canScroll (有溢出空間才需要 navigator)。\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n  const { onValueChange, value: activeValue } = React.useContext(TabsValueContext)\n\n  // Local ref map — 追蹤每個 trigger 的 DOM 元素,供 scrollIntoView 使用。\n  // 不用 useOverflowIndices 因為 menu 永遠顯示全部,不需要動態 overflow 計算。\n  // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n  const itemRefs = React.useRef<Map<number, HTMLElement>>(new Map())\n  // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n  const scrollRafIdRef = React.useRef<number>(0)\n  React.useEffect(() => () => { if (scrollRafIdRef.current) cancelAnimationFrame(scrollRafIdRef.current) }, [])\n  const registerItem = React.useCallback(\n    (index: number) => (el: HTMLElement | null) => {\n      if (el) itemRefs.current.set(index, el)\n      else itemRefs.current.delete(index)\n    },\n    []\n  )\n\n  const items = React.useMemo(\n    () => React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[],\n    [children]\n  )\n\n  const enhancedChildren = items.map((child, i) =>\n    React.cloneElement(\n      child as React.ReactElement<{ ref?: React.Ref<HTMLElement> }>,\n      { ref: registerItem(i) }\n    )\n  )\n\n  // Menu 模式沒有 arrows,但仍套 fade mask (reserveArrowWidth: 0) 軟化內容硬邊\n  // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n  const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: 0 })\n\n  const handleMenuSelect = React.useCallback(\n    (triggerValue: string, index: number) => {\n      onValueChange?.(triggerValue)\n      // 下一個 tick 再 scroll, 讓 Radix 先完成 data-state 更新\n      if (scrollRafIdRef.current) cancelAnimationFrame(scrollRafIdRef.current)\n      scrollRafIdRef.current = requestAnimationFrame(() => {\n        scrollRafIdRef.current = 0\n        itemRefs.current.get(index)?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n      })\n    },\n    [onValueChange]\n  )\n\n  return (\n    // 2026-05-19 fix(scroll-overflow underline clip + y auto-promote,parallel to ScrollTabsList):\n    //   outer 改 items-stretch(menu button 容器跟 TabsList 含 border 共底線)+ 撤 border。\n    //   list 套 TABS_LIST_BASE,inner scroll 加 overflow-y-hidden。menu button 容器自帶\n    //   border-b border-divider 跟 TabsList border 同 y 對齊(items-stretch 保證)。\n    <div className=\"flex items-stretch\">\n      <div\n        ref={scrollRef}\n        className=\"flex-1 min-w-0 overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        style={{ maskImage, WebkitMaskImage: maskImage }}\n      >\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(TABS_LIST_BASE, 'w-fit', className)}\n          {...props}\n        >\n          {enhancedChildren}\n        </TabsPrimitive.List>\n      </div>\n      {canScroll && (\n        <div className=\"flex-shrink-0 pl-[var(--layout-space-loose)] flex items-center border-b border-divider\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <OverflowMenuTriggerButton\n                aria-label={`頁籤選單(共 ${items.length} 個)`}\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {items.map((trigger, index) => {\n                const triggerProps = trigger.props as {\n                  value?: string\n                  children?: React.ReactNode\n                  disabled?: boolean\n                }\n                const triggerValue = triggerProps.value\n                if (typeof triggerValue !== 'string') return null\n                // 單選 active 用 DropdownMenuItem 的 selected prop\n                //  → 對應 bg-neutral-selected 持續選中背景, 跟 SelectMenu 單選完全\n                //  同一套 canonical 視覺, 全 DS 一致。不可用 className 發明樣式。\n                return (\n                  <DropdownMenuItem\n                    key={triggerValue}\n                    disabled={triggerProps.disabled}\n                    selected={activeValue === triggerValue}\n                    onSelect={() => handleMenuSelect(triggerValue, index)}\n                  >\n                    {triggerProps.children}\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      )}\n    </div>\n  )\n})\nMenuTabsList.displayName = 'MenuTabsList'\n\n// ── Trigger ──\nconst tabsTriggerVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'gap-2',\n    'whitespace-nowrap',\n    'font-medium text-fg-secondary',\n    'transition-colors duration-150',\n    'cursor-pointer select-none',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    // Trigger 無水平 padding — 寬度 = 內容寬度。triggers 間的分隔靠 TabsList 的 gap-[layout-space-loose]\n    // selected underline：::after 絕對定位在 bottom:-1px，2px primary-hover\n    // left-0/right-0 因為 trigger 已無 padding，底線等於內容寬度\n    // 底線蓋住 TabsList 的 1px gray border，視覺單一線條\n    'after:absolute after:left-0 after:right-0 after:bottom-[-1px] after:h-0.5',\n    'after:bg-transparent after:transition-colors after:duration-150',\n    // hover（未選）：文字轉深\n    'hover:text-foreground',\n    // selected\n    'data-[state=active]:text-foreground data-[state=active]:font-medium',\n    'data-[state=active]:after:bg-primary-hover',\n    // disabled：cursor-not-allowed + 不吃 hover 色\n    // 不用 pointer-events-none，否則 cursor 不會改變；button[disabled] 本身就擋 click\n    'disabled:cursor-not-allowed disabled:text-fg-disabled',\n    'disabled:hover:text-fg-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        // leading-compact：trigger 是單行文字容器，使用 1.3 行高避免 text-body/body-lg 預設 1.5 造成垂直偏移\n        sm: 'h-[var(--tab-height-sm)] text-body leading-compact',\n        md: 'h-[var(--tab-height-md)] text-body leading-compact',\n        lg: 'h-[var(--tab-height-lg)] text-body-lg leading-compact',\n      },\n    },\n    defaultVariants: {\n      // size = 'sm' per header-canonical.spec.md W6:overlay / chrome / dense toolbar\n      // 都用 sm;獨立 page hero 用 lg。md 為 future tier(無 recommended use case)。\n      // 2026-05-17 從 'md' 改 'sm'(M31 codex 比稿後)— production consumer = 0,\n      // 影響面限 stories baseline(已過 visual diff gate)。\n      size: 'sm',\n    },\n  }\n)\n\ninterface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  /** 左側 icon（LucideIcon） */\n  startIcon?: LucideIcon\n  /** 右側 badge（通常是計數指示器） */\n  badge?: React.ReactNode\n  /**\n   * 右側純視覺 indicator(LucideIcon)。**僅限方向 / 狀態 indicator**:ChevronDown / Pin / Star。\n   * **不要拼 click 行為** — endIcon 是 tab body 的一部分,點到也是切 tab。\n   * 需要「點該後綴開 dropdown / menu」場景請用 `inlineAction` slot(2026-05-21 拆分)。\n   */\n  endIcon?: LucideIcon\n  /**\n   * Inline action slot(2026-05-21 v3 加,per user「圖一 後綴應該是 inline action」+「點擊\n   * 該 tab 的 inline action 跟其他地方應該不同反應」directive):\n   * 提供 `<ItemInlineAction>` / `<DropdownMenuTrigger asChild><ItemInlineAction ... /></DropdownMenuTrigger>`\n   * 等獨立 click target。**TabsTrigger 自動 stopPropagation**,inline action 點擊不冒泡到 tab body,\n   * 達成 split-click 行為(對齊 GitHub「Code ▾」/ Linear \"Triage...\" menu / Atlassian split-tab 共識)。\n   *\n   * 跟 endIcon 區別:endIcon = 純視覺 indicator(無獨立行為,連同 tab 一起 click),\n   * inlineAction = 獨立 click target(自己的 handler,不切 tab)。語意分家明確。\n   */\n  inlineAction?: React.ReactNode\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, startIcon: StartIcon, badge, endIcon: EndIcon, inlineAction, children, ...props }, ref) => {\n  const { size } = React.useContext(TabsContext)\n  // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n  const hasSuffix = badge != null || EndIcon !== undefined || inlineAction != null\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(tabsTriggerVariants({ size }), className)}\n      {...props}\n    >\n      {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n      {children != null && <span>{children}</span>}\n      {hasSuffix && (\n        <span className=\"inline-flex items-center gap-1\">\n          {badge}\n          {EndIcon && <EndIcon size={iconSize} aria-hidden />}\n          {inlineAction != null && (\n            // 2026-05-21 split-click invariant:inlineAction 點擊不冒泡到 TabsPrimitive.Trigger。\n            // Radix Tabs 在 3 個 channel 觸發 tab 切換,全部 stopPropagation:\n            //   - onMouseDown(primary, Radix Tabs source code main switch trigger)\n            //   - onFocus(activationMode='automatic' default,focus 落內部按鈕也算「focused」)\n            //   - onKeyDown Enter/Space(鍵盤啟動)\n            // 加 onPointerDown / onClick 防禦其他 framework 慣例。\n            // 對齊 GitHub「Code ▾」/ Linear \"Triage...\" split-tab 共識。\n            <span\n              onPointerDown={(e) => e.stopPropagation()}\n              onMouseDown={(e) => e.stopPropagation()}\n              onClick={(e) => e.stopPropagation()}\n              onFocus={(e) => e.stopPropagation()}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') e.stopPropagation()\n              }}\n            >\n              {inlineAction}\n            </span>\n          )}\n        </span>\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ── Content ──\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\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 tabsMeta = {\n  component: 'Tabs',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-primary-hover', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'sm',\n} as const\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants }\nexport type { TabsSize, TabsListProps, TabsTriggerProps }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/Tabs/tabs.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(Tabs + overflow scroll mode + dropdown switcher + inline action slot)在單一 wrapper SSOT 內,拆分會破壞 a11y / focus management chain。當前 515 < cap 800。\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\nimport {\n  useScrollEdges,\n  useScrollByPage,\n  buildFadeMask,\n  ARROW_BUTTON_WIDTH,\n  OverflowScrollArrow,\n  OverflowMenuTriggerButton,\n} from '@/design-system/patterns/horizontal-overflow/horizontal-overflow'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * Tabs — 基於 Radix Tabs，橋接設計系統 token\n *\n * ── 定位 ──\n *   同一上下文底下切換平行的 view。切 view（不是切 value）。\n *   切 value 用 SegmentedControl；切路由用 navigation。\n *\n * ── Size ──\n *   sm   h-tab-sm（32/40），★ 預設(2026-05-17 從 md 改),overlay / chrome / dense\n *   md   h-tab-md（40/48），future tier 無 recommended use case\n *   lg   h-tab-lg（48/56），page-level hero / 獨立 tabs 取代 chrome header\n *\n * ── 寬度行為 ──\n *   Trigger 寬度永遠由內容決定（hug content）。\n *   Triggers 之間 gap 為 --layout-space-loose（16px / 24px lg density）。\n *\n * ── Trigger 結構 ──\n *   [startIcon?] [label] [suffix: badge? + endIcon?]\n *   slot 間 gap-2，suffix 內 gap-1\n *\n * ── Selected underline ──\n *   使用 ::after 絕對定位在 bottom: -1px，2px primary-hover，\n *   蓋住 TabsList 的 1px gray border（單一視覺線條，不雙線）。\n */\n\n// ── Size context ──\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsOverflow = 'none' | 'scroll' | 'menu'\n\ninterface TabsContextValue {\n  size: TabsSize\n}\nconst TabsContext = React.createContext<TabsContextValue>({ size: 'md' })\n\n// ── Root ──\n// Wrap Radix Tabs 以支援 value/onValueChange 的 context pass-through\n// （menu 模式的 overflow items 需要能 proxy click 觸發同一個 onValueChange）\ninterface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {}\n\nconst TabsValueContext = React.createContext<{\n  value?: string\n  onValueChange?: (value: string) => void\n}>({})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(({ value, onValueChange, defaultValue, children, ...props }, ref) => {\n  // 內部維護一份 uncontrolled state，讓 overflow menu 的 proxy 有 onValueChange 可呼叫\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(defaultValue)\n  const isControlled = value !== undefined\n  const currentValue = isControlled ? value : internalValue\n\n  const handleValueChange = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setInternalValue(next)\n      onValueChange?.(next)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const valueContext = React.useMemo(\n    () => ({ value: currentValue, onValueChange: handleValueChange }),\n    [currentValue, handleValueChange]\n  )\n\n  return (\n    <TabsValueContext.Provider value={valueContext}>\n      <TabsPrimitive.Root\n        ref={ref}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n// ── List ──\n// TabsList 基礎 class — inline-flex 單列 + gap-loose + 底部 border-divider\n// 2026-05-18 改 border-border → border-divider(per user verbatim「我認為應該把 tabs 的\n// 下底線統一改成是 divider 色吧?」+「做」approval):\n// - 跟 Dialog / Sheet / Popover / Sidebar header `border-b border-divider`(neutral-4)同色\n// - withTabs scenario 下 tabs underline = chrome separator,跟 dialog 其他 separator 視覺一致\n// - Selected trigger 2px primary 仍 overlay underlying divider(對比 primary >> divider 不弱)\n// - 對齊 `color.spec.md`「T-junction connectivity 原則」段 outer-vs-divider 判準(Dialog 結構,T-junction 思路適用)\nconst TABS_LIST_BASE = [\n  'inline-flex items-stretch',\n  'gap-[var(--layout-space-loose)]',\n  'border-b border-divider',\n].join(' ')\n\ninterface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  size?: TabsSize\n  /**\n   * Overflow 處理模式。詳見 tabs.spec.md 的 overflow 段。\n   *   'none'   ★ 預設，不處理，triggers 溢出父容器（適用 tabs 數量可控的情境）\n   *   'scroll' 單行橫向滾動 + 邊緣 fade mask（Material / Polaris / iOS 作法）\n   *   'menu'   show-all navigator——全部 triggers 一直顯示在底層 overflow-x-auto 捲動容器內,\n   *            （Ant Design / Atlassian 作法）\n   */\n  overflow?: TabsOverflow\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, size = 'sm', overflow = 'none', children, ...props }, ref) => {\n  const tabsSizeContext = React.useMemo(() => ({ size }), [size])\n  if (overflow === 'scroll') {\n    return (\n      <TabsContext.Provider value={tabsSizeContext}>\n        <ScrollTabsList ref={ref} className={className} {...props}>\n          {children}\n        </ScrollTabsList>\n      </TabsContext.Provider>\n    )\n  }\n  if (overflow === 'menu') {\n    return (\n      <TabsContext.Provider value={tabsSizeContext}>\n        <MenuTabsList ref={ref} className={className} {...props}>\n          {children}\n        </MenuTabsList>\n      </TabsContext.Provider>\n    )\n  }\n  // none（預設）\n  return (\n    <TabsContext.Provider value={tabsSizeContext}>\n      <TabsPrimitive.List\n        ref={ref}\n        className={cn(TABS_LIST_BASE, 'w-full', className)}\n        {...props}\n      >\n        {children}\n      </TabsPrimitive.List>\n    </TabsContext.Provider>\n  )\n})\nTabsList.displayName = 'TabsList'\n\n// ── Scroll mode ──\n//\n// 共同策略(對齊 Material 3 / Ant Design / Primer UnderlineNav 世界級作法):\n//   - 容器 overflow-x-auto + overflow-y-hidden(真的可滾,鍵盤焦點可 scroll-into-view;\n//     明示 y-hidden 阻 CSS overflow-3 spec「一軸 auto 時另軸 visible compute auto」)\n//   - border-b 在 TabsList 內部(TABS_LIST_BASE),不在 outer wrapper,避免\n//     active underline `after:bottom:-1px` 跟 outer + overflow-x-auto 觸發 y promote bug\n//   - mask / arrow / fade 全部從 horizontal-overflow pattern module 取得——\n//     參見 `patterns/horizontal-overflow/horizontal-overflow.spec.md`\n//   - Menu 模式 = scroll 模式 + 額外的 ⌄ quick-jump button,點 menu item 同時\n//     觸發 onValueChange + scrollIntoView,讓使用者在 tab strip 看到選中的 tab\n// 單行水平滾動 + 邊緣 fade mask 延伸到 arrow button 底下 + 左右 always-visible arrows\n//   - 鍵盤: Radix 原生方向鍵 + 瀏覽器 scroll-into-view\n//   - Trackpad: 兩指橫向滑動\n//   - 滑鼠滾輪: 點 arrow buttons (Shift+wheel 太隱晦)\n\nconst ScrollTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n  const scrollByPage = useScrollByPage(scrollRef)\n  const maskImage = buildFadeMask({\n    canScroll,\n    atStart,\n    atEnd,\n    reserveArrowWidth: ARROW_BUTTON_WIDTH,\n  })\n\n  return (\n    // 2026-05-19 fix(scroll-overflow underline clip + y auto-promote):\n    //   outer 撤 `border-b` → owner 升到 `TabsList` (TABS_LIST_BASE 含 border-b border-divider)\n    //   把 trigger `after:bottom-[-1px]` 2px underline 的下半部 1px 收進 list border-box,\n    //   再加 `overflow-y-hidden` 明示阻 browser y auto-promote(CSS overflow-3 spec:\n    //   overflow-x:auto + overflow-y:visible 必 compute auto)。\n    //   不加 `pb-px`(outer border 撤後 list border 已接 -1px 部分,加 pb 多 1px 多餘空白)。\n    //   對齊 Primer UnderlineNav `overflow-x:auto; overflow-y:hidden` canonical 同步動\n    //   horizontal-overflow.spec.md(「Hook re-export」+「典型 scroll / menu 模式組裝」段)owner 升 list 內部。\n    <div className=\"relative\">\n      <div\n        ref={scrollRef}\n        className=\"overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        style={{ maskImage, WebkitMaskImage: maskImage }}\n      >\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(TABS_LIST_BASE, 'min-w-full', className)}\n          {...props}\n        >\n          {children}\n        </TabsPrimitive.List>\n      </div>\n      {!atStart && canScroll && (\n        <OverflowScrollArrow direction=\"left\" onClick={() => scrollByPage('left')} />\n      )}\n      {!atEnd && canScroll && (\n        <OverflowScrollArrow direction=\"right\" onClick={() => scrollByPage('right')} />\n      )}\n    </div>\n  )\n})\nScrollTabsList.displayName = 'ScrollTabsList'\n\n// ── Menu mode ──\n// Show-all navigator pattern (Chrome tab dropdown / VS Code editor tabs / Discord channel jumper):\n//   - Menu 永遠顯示全部 tabs,active 的用 checked 標記 (單選語意)\n//   - 點 menu item = onValueChange + scrollIntoView(center),把該 tab 捲到視圖中央\n//   - Menu 內容穩定,跟 scroll 位置無關,使用者對「⌄ = navigator」的直覺一致\n//\n// 為什麼底層仍是 overflow-x-auto 而非 overflow-hidden:\n//   - scrollIntoView 需要真實 scroll 容器\n//   - 鍵盤 focus 也依賴真實 scroll 讓 browser auto scroll-into-view\n//   - scrollbar 用 CSS 隱藏,視覺看不出來\n//\n// Fade mask 純視覺,軟化內容硬邊,跟 menu 機制正交 (兩者可並存)。\n// Menu button 出現條件: canScroll (有溢出空間才需要 navigator)。\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuTabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, children, ...props }, ref) => {\n  const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n  const { onValueChange, value: activeValue } = React.useContext(TabsValueContext)\n\n  // Local ref map — 追蹤每個 trigger 的 DOM 元素,供 scrollIntoView 使用。\n  // 不用 useOverflowIndices 因為 menu 永遠顯示全部,不需要動態 overflow 計算。\n  // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n  const itemRefs = React.useRef<Map<number, HTMLElement>>(new Map())\n  // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n  const scrollRafIdRef = React.useRef<number>(0)\n  React.useEffect(() => () => { if (scrollRafIdRef.current) cancelAnimationFrame(scrollRafIdRef.current) }, [])\n  const registerItem = React.useCallback(\n    (index: number) => (el: HTMLElement | null) => {\n      if (el) itemRefs.current.set(index, el)\n      else itemRefs.current.delete(index)\n    },\n    []\n  )\n\n  const items = React.useMemo(\n    () => React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[],\n    [children]\n  )\n\n  const enhancedChildren = items.map((child, i) =>\n    React.cloneElement(\n      child as React.ReactElement<{ ref?: React.Ref<HTMLElement> }>,\n      { ref: registerItem(i) }\n    )\n  )\n\n  // Menu 模式沒有 arrows,但仍套 fade mask (reserveArrowWidth: 0) 軟化內容硬邊\n  // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n  const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: 0 })\n\n  const handleMenuSelect = React.useCallback(\n    (triggerValue: string, index: number) => {\n      onValueChange?.(triggerValue)\n      // 下一個 tick 再 scroll, 讓 Radix 先完成 data-state 更新\n      if (scrollRafIdRef.current) cancelAnimationFrame(scrollRafIdRef.current)\n      scrollRafIdRef.current = requestAnimationFrame(() => {\n        scrollRafIdRef.current = 0\n        itemRefs.current.get(index)?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n      })\n    },\n    [onValueChange]\n  )\n\n  return (\n    // 2026-05-19 fix(scroll-overflow underline clip + y auto-promote,parallel to ScrollTabsList):\n    //   outer 改 items-stretch(menu button 容器跟 TabsList 含 border 共底線)+ 撤 border。\n    //   list 套 TABS_LIST_BASE,inner scroll 加 overflow-y-hidden。menu button 容器自帶\n    //   border-b border-divider 跟 TabsList border 同 y 對齊(items-stretch 保證)。\n    <div className=\"flex items-stretch\">\n      <div\n        ref={scrollRef}\n        className=\"flex-1 min-w-0 overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n        style={{ maskImage, WebkitMaskImage: maskImage }}\n      >\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(TABS_LIST_BASE, 'min-w-full', className)}\n          {...props}\n        >\n          {enhancedChildren}\n        </TabsPrimitive.List>\n      </div>\n      {canScroll && (\n        <div className=\"flex-shrink-0 pl-[var(--layout-space-loose)] flex items-center border-b border-divider\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <OverflowMenuTriggerButton\n                aria-label={`頁籤選單(共 ${items.length} 個)`}\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              {items.map((trigger, index) => {\n                const triggerProps = trigger.props as {\n                  value?: string\n                  children?: React.ReactNode\n                  disabled?: boolean\n                }\n                const triggerValue = triggerProps.value\n                if (typeof triggerValue !== 'string') return null\n                // 單選 active 用 DropdownMenuItem 的 selected prop\n                //  → 對應 bg-neutral-selected 持續選中背景, 跟 SelectMenu 單選完全\n                //  同一套 canonical 視覺, 全 DS 一致。不可用 className 發明樣式。\n                return (\n                  <DropdownMenuItem\n                    key={triggerValue}\n                    disabled={triggerProps.disabled}\n                    selected={activeValue === triggerValue}\n                    onSelect={() => handleMenuSelect(triggerValue, index)}\n                  >\n                    {triggerProps.children}\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      )}\n    </div>\n  )\n})\nMenuTabsList.displayName = 'MenuTabsList'\n\n// ── Trigger ──\nconst tabsTriggerVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'gap-2',\n    'whitespace-nowrap',\n    'font-medium text-fg-secondary',\n    'transition-colors duration-150',\n    'cursor-pointer select-none',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    // Trigger 無水平 padding — 寬度 = 內容寬度。triggers 間的分隔靠 TabsList 的 gap-[var(--layout-space-loose)]\n    // selected underline：::after 絕對定位在 bottom:-1px，2px primary-hover\n    // left-0/right-0 因為 trigger 已無 padding，底線等於內容寬度\n    // 底線蓋住 TabsList 的 1px gray border，視覺單一線條\n    'after:absolute after:left-0 after:right-0 after:bottom-[-1px] after:h-0.5',\n    'after:bg-transparent after:transition-colors after:duration-150',\n    // hover（未選）：文字轉深\n    'hover:text-foreground',\n    // selected\n    'data-[state=active]:text-foreground data-[state=active]:font-medium',\n    'data-[state=active]:after:bg-primary-hover',\n    // disabled：cursor-not-allowed + 不吃 hover 色\n    // 不用 pointer-events-none，否則 cursor 不會改變；button[disabled] 本身就擋 click\n    'disabled:cursor-not-allowed disabled:text-fg-disabled',\n    'disabled:hover:text-fg-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        // leading-compact：trigger 是單行文字容器，使用 1.3 行高避免 text-body/body-lg 預設 1.5 造成垂直偏移\n        sm: 'h-[var(--tab-height-sm)] text-body leading-compact',\n        md: 'h-[var(--tab-height-md)] text-body leading-compact',\n        lg: 'h-[var(--tab-height-lg)] text-body-lg leading-compact',\n      },\n    },\n    defaultVariants: {\n      // size = 'sm' per header-canonical.spec.md W6:overlay / chrome / dense toolbar\n      // 都用 sm;獨立 page hero 用 lg。md 為 future tier(無 recommended use case)。\n      // 2026-05-17 從 'md' 改 'sm'(M31 codex 比稿後)— production consumer = 0,\n      // 影響面限 stories baseline(已過 visual diff gate)。\n      size: 'sm',\n    },\n  }\n)\n\ninterface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  /** 左側 icon（LucideIcon） */\n  startIcon?: LucideIcon\n  /** 右側 badge（通常是計數指示器） */\n  badge?: React.ReactNode\n  /**\n   * 右側純視覺 indicator(LucideIcon)。**僅限方向 / 狀態 indicator**:ChevronDown / Pin / Star。\n   * **不要拼 click 行為** — endIcon 是 tab body 的一部分,點到也是切 tab。\n   * 需要「點該後綴開 dropdown / menu」場景請用 `inlineAction` slot(2026-05-21 拆分)。\n   */\n  endIcon?: LucideIcon\n  /**\n   * Inline action slot(2026-05-21 v3 加,per user「圖一 後綴應該是 inline action」+「點擊\n   * 該 tab 的 inline action 跟其他地方應該不同反應」directive):\n   * 提供 `<ItemInlineAction>` / `<DropdownMenuTrigger asChild><ItemInlineAction ... /></DropdownMenuTrigger>`\n   * 等獨立 click target。**DOM 上是 trigger 的 sibling(絕對定位),非巢狀 button**\n   * (2026-07-05 D4 修:Radix TabsTrigger 是原生 `<button>`,巢 button = HTML 不合法 +\n   * axe nested-interactive;同 SidebarMenuButton suffixNode canonical),inline action\n   * 點擊天然不落在 tab body,達成 split-click 行為(對齊 GitHub「Code ▾」/\n   * Linear \"Triage...\" menu / Atlassian split-tab 共識)。\n   *\n   * 跟 endIcon 區別:endIcon = 純視覺 indicator(無獨立行為,連同 tab 一起 click),\n   * inlineAction = 獨立 click target(自己的 handler,不切 tab)。語意分家明確。\n   */\n  inlineAction?: React.ReactNode\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, startIcon: StartIcon, badge, endIcon: EndIcon, inlineAction, children, ...props }, ref) => {\n  const { size } = React.useContext(TabsContext)\n  // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n  const hasSuffix = badge != null || EndIcon !== undefined\n  // 2026-07-05 D4 修(deep-audit「Tabs:inlineAction slot 造成 button 巢 button」):\n  // Radix TabsTrigger render 原生 <button>,inlineAction(ItemInlineActionButton)也是原生\n  // <button> — 巢狀 interactive = HTML 不合法 + axe nested-interactive(serious)+ tab 的\n  // accessible name 混入 action 內容。改 sibling 佈局(同 SidebarMenuButton suffixNode\n  // canonical,sidebar.tsx):wrapper span(relative)內 trigger + 絕對定位 action;trigger 以\n  // paddingRight 預留 action 空間 — icon 寬 + 原 gap(有 badge/endIcon 時 4px = suffix 內\n  // gap-1;僅 action 時 8px = slot 間 gap-2),幾何與巢狀版一致。click 天然分流(action 不在\n  // trigger 子樹,不冒泡),原 stopPropagation 五連發不再需要。\n  const hasAction = inlineAction != null\n  const actionPaddingRight = hasAction ? iconSize + (hasSuffix ? 4 : 8) : undefined\n\n  const trigger = (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(tabsTriggerVariants({ size }), className)}\n      style={hasAction ? { paddingRight: actionPaddingRight } : undefined}\n      {...props}\n    >\n      {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n      {children != null && <span>{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    </TabsPrimitive.Trigger>\n  )\n\n  if (!hasAction) return trigger\n\n  return (\n    // sibling 佈局 wrapper:span(relative)內 trigger + 絕對定位 action。\n    // Radix roving focus 用 collection context 收 trigger,不要求 trigger 是 List 直接子層。\n    <span className=\"relative inline-flex\">\n      {trigger}\n      <span className=\"absolute top-1/2 -translate-y-1/2 right-0 inline-flex items-center\">\n        {inlineAction}\n      </span>\n    </span>\n  )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ── Content ──\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      // 與 TabsList 的間距 canonical(2026-06-12 user 拍板):--layout-space-tight(md 12px,\n      // density 連動)。依 layoutSpace.spec「親疏 3 級」:Tabs↔Content 同 bundle(第一級,\n      // 元件 spec own),值取規則 3「直接功能依賴 = tight」精神(heading → labeled content 同類)。\n      // 收斂原 DS-wide 四種土法(無間距 / mt-4 / p-4 / pt-4 — M17 假 SSOT)。\n      // full-height 佈局(AppShell pane)用 className=\"mt-0\" 覆寫(tailwind-merge)。\n      'mt-[var(--layout-space-tight)]',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = 'TabsContent'\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 tabsMeta = {\n  component: 'Tabs',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  // 注:`fieldHeight` 為 meta 通用 height key;Tabs **不複用 field-height**,值為 `--tab-height-*`(md density,對齊 spec.md size table + uiSize.css)\n  sizes: {\n    sm: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 40, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 48, iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-primary-hover', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'sm',\n} as const\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants }\nexport type { TabsSize, TabsListProps, TabsTriggerProps }\n"],"names":[],"mappings":";;;;;;;;;AAuDA,MAAM,cAAc,MAAM,cAAgC,EAAE,MAAM,MAAM;AAOxE,MAAM,mBAAmB,MAAM,cAG5B,EAAE;AAEL,MAAM,OAAO,MAAM,WAGjB,CAAC,EAAE,OAAO,eAAe,cAAc,UAAU,GAAG,MAAA,GAAS,QAAQ;AAErE,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA6B,YAAY;AACzF,QAAM,eAAe,UAAU;AAC/B,QAAM,eAAe,eAAe,QAAQ;AAE5C,QAAM,oBAAoB,MAAM;AAAA,IAC9B,CAAC,SAAiB;AAChB,UAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,qDAAgB;AAAA,IAClB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAAA;AAG9B,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,EAAE,OAAO,cAAc,eAAe,kBAAA;AAAA,IAC7C,CAAC,cAAc,iBAAiB;AAAA,EAAA;AAGlC,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAChC,UAAA;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,eAAe;AAAA,MACd,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;AACD,KAAK,cAAc;AAUnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAeV,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,OAAO,MAAM,WAAW,QAAQ,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5E,QAAM,kBAAkB,MAAM,QAAQ,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC;AAC9D,MAAI,aAAa,UAAU;AACzB,WACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,iBAC3B,UAAA,oBAAC,gBAAA,EAAe,KAAU,WAAuB,GAAG,OACjD,UACH,GACF;AAAA,EAEJ;AACA,MAAI,aAAa,QAAQ;AACvB,WACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,iBAC3B,UAAA,oBAAC,cAAA,EAAa,KAAU,WAAuB,GAAG,OAC/C,UACH,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,iBAC3B,UAAA;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gBAAgB,UAAU,SAAS;AAAA,MAChD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;AACD,SAAS,cAAc;AAkBvB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,EAAE,WAAW,SAAS,OAAO,UAAA,IAAc,eAAA;AACjD,QAAM,eAAe,gBAAgB,SAAS;AAC9C,QAAM,YAAY,cAAc;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,EAAA,CACpB;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,iBAAiB,UAAA;AAAA,UAErC,UAAA;AAAA,YAAC,cAAc;AAAA,YAAd;AAAA,cACC;AAAA,cACA,WAAW,GAAG,gBAAgB,cAAc,SAAS;AAAA,cACpD,GAAG;AAAA,cAEH;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAED,CAAC,WAAW,aACX,oBAAC,qBAAA,EAAoB,WAAU,QAAO,SAAS,MAAM,aAAa,MAAM,EAAA,CAAG;AAAA,MAE5E,CAAC,SAAS,aACT,oBAAC,qBAAA,EAAoB,WAAU,SAAQ,SAAS,MAAM,aAAa,OAAO,EAAA,CAAG;AAAA,IAAA,EAAA,CAEjF;AAAA;AAEJ,CAAC;AACD,eAAe,cAAc;AAiB7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,EAAE,WAAW,SAAS,OAAO,UAAA,IAAc,eAAA;AACjD,QAAM,EAAE,eAAe,OAAO,gBAAgB,MAAM,WAAW,gBAAgB;AAK/E,QAAM,WAAW,MAAM,OAAiC,oBAAI,KAAK;AAEjE,QAAM,iBAAiB,MAAM,OAAe,CAAC;AAC7C,QAAM,UAAU,MAAM,MAAM;AAAE,QAAI,eAAe,QAAS,sBAAqB,eAAe,OAAO;AAAA,EAAE,GAAG,CAAA,CAAE;AAC5G,QAAM,eAAe,MAAM;AAAA,IACzB,CAAC,UAAkB,CAAC,OAA2B;AAC7C,UAAI,GAAI,UAAS,QAAQ,IAAI,OAAO,EAAE;AAAA,UACjC,UAAS,QAAQ,OAAO,KAAK;AAAA,IACpC;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,QAAQ,MAAM;AAAA,IAClB,MAAM,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,MAAM,cAAc;AAAA,IAClE,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,mBAAmB,MAAM;AAAA,IAAI,CAAC,OAAO,MACzC,MAAM;AAAA,MACJ;AAAA,MACA,EAAE,KAAK,aAAa,CAAC,EAAA;AAAA,IAAE;AAAA,EACzB;AAKF,QAAM,YAAY,cAAc,EAAE,WAAW,SAAS,OAAO,mBAAmB,GAAG;AAEnF,QAAM,mBAAmB,MAAM;AAAA,IAC7B,CAAC,cAAsB,UAAkB;AACvC,qDAAgB;AAEhB,UAAI,eAAe,QAAS,sBAAqB,eAAe,OAAO;AACvE,qBAAe,UAAU,sBAAsB,MAAM;;AACnD,uBAAe,UAAU;AACzB,uBAAS,QAAQ,IAAI,KAAK,MAA1B,mBAA6B,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,MAC7F,CAAC;AAAA,IACH;AAAA,IACA,CAAC,aAAa;AAAA,EAAA;AAGhB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,iBAAiB,UAAA;AAAA,UAErC,UAAA;AAAA,YAAC,cAAc;AAAA,YAAd;AAAA,cACC;AAAA,cACA,WAAW,GAAG,gBAAgB,cAAc,SAAS;AAAA,cACpD,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAED,aACC,oBAAC,OAAA,EAAI,WAAU,0FACb,+BAAC,cAAA,EACC,UAAA;AAAA,QAAA,oBAAC,qBAAA,EAAoB,SAAO,MAC1B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAY,UAAU,MAAM,MAAM;AAAA,UAAA;AAAA,QAAA,GAEtC;AAAA,QACA,oBAAC,uBAAoB,OAAM,OACxB,gBAAM,IAAI,CAAC,SAAS,UAAU;AAC7B,gBAAM,eAAe,QAAQ;AAK7B,gBAAM,eAAe,aAAa;AAClC,cAAI,OAAO,iBAAiB,SAAU,QAAO;AAI7C,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,UAAU,aAAa;AAAA,cACvB,UAAU,gBAAgB;AAAA,cAC1B,UAAU,MAAM,iBAAiB,cAAc,KAAK;AAAA,cAEnD,UAAA,aAAa;AAAA,YAAA;AAAA,YALT;AAAA,UAAA;AAAA,QAQX,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA,EAAA,CAEJ;AAAA;AAEJ,CAAC;AACD,aAAa,cAAc;AAG3B,MAAM,sBAAsB;AAAA,EAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,QAEJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AA8BA,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,WAAW,WAAW,OAAO,SAAS,SAAS,cAAc,UAAU,GAAG,MAAA,GAAS,QAAQ;AACzG,QAAM,EAAE,KAAA,IAAS,MAAM,WAAW,WAAW;AAE7C,QAAM,WAAW,UAAU,IAA0B;AACrD,QAAM,YAAY,SAAS,QAAQ,YAAY;AAS/C,QAAM,YAAY,gBAAgB;AAClC,QAAM,qBAAqB,YAAY,YAAY,YAAY,IAAI,KAAK;AAExE,QAAM,UACJ;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW,GAAG,oBAAoB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MACtD,OAAO,YAAY,EAAE,cAAc,uBAAuB;AAAA,MACzD,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAa,oBAAC,WAAA,EAAU,MAAM,UAAU,eAAW,MAAC;AAAA,QACpD,YAAY,QAAQ,oBAAC,QAAA,EAAM,SAAA,CAAS;AAAA,QACpC,aACC,qBAAC,QAAA,EAAK,WAAU,kCACb,UAAA;AAAA,UAAA;AAAA,UACA,WAAW,oBAAC,SAAA,EAAQ,MAAM,UAAU,eAAW,KAAA,CAAC;AAAA,QAAA,EAAA,CACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,MAAI,CAAC,UAAW,QAAO;AAEvB;AAAA;AAAA;AAAA,IAGE,qBAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAU,sEACb,UAAA,aAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA;AAEJ,CAAC;AACD,YAAY,cAAc;AAG1B,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAc;AAInB,MAAM,WAAW;AAAA,EACtB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA;AAAA,EAIV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,UAAA;AAAA,EAAU;AAAA,EAE7D,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,oBAAoB,gBAAgB;AAAA,IACzC,IAAI,CAAC,oBAAoB,qBAAqB,iBAAiB;AAAA,IAC/D,MAAM,CAAC,WAAW;AAAA,EAAA;AAAA,EAEpB,aAAa;AACf;"}

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

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

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

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

package/dist/components/Tag/index.js

@@ -0,0 +1,7 @@
+import { Tag, tagMeta, tagVariants } from "./tag.js";
+export {
+  Tag,
+  tagMeta,
+  tagVariants
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Tag/tag.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 declare const tagVariants: (props?: ({
-    color?: "blue" | "green" | "indigo" | "magenta" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | null | undefined;
+    color?: "blue" | "green" | "indigo" | "lime" | "magenta" | "orange" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | "deep-orange" | "amber" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>, VariantProps<typeof tagVariants> {
@@ -10,9 +10,11 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'pr
     icon?: LucideIcon;
     /** 左側 avatar（ReactNode），與 icon 互斥。 */
     avatar?: React.ReactNode;
-    /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */
-    onDismiss?: () => void;
-    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */
+    /** 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) */
+    onRemove?: () => void;
+    /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 */
+    dismissLabel?: string;
+    /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */
     solid?: boolean;
     /**
      * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):
@@ -29,51 +31,63 @@ export declare const tagMeta: {
     readonly family: 3;
     readonly variants: {
         readonly neutral: {
-            readonly purpose: "通用分類、草稿、無特定語義";
+            readonly purpose: "通用分類、草稿、無特定語義(secondary 底)";
         };
         readonly blue: {
-            readonly purpose: "進行中、資訊提示、active 狀態（對應 --info）";
-        };
-        readonly red: {
-            readonly purpose: "錯誤、已封鎖、危險（對應 --error）";
+            readonly purpose: "categorical 色相(--color-blue-*)";
         };
         readonly green: {
-            readonly purpose: "成功、已完成、已核准（對應 --success）";
+            readonly purpose: "categorical 色相(--color-green-*)";
+        };
+        readonly 'deep-orange': {
+            readonly purpose: "categorical 色相(--color-deep-orange-*,hue 38)";
         };
         readonly yellow: {
-            readonly purpose: "警告、待審核、注意（對應 --warning）";
+            readonly purpose: "categorical 色相(--color-yellow-*,淺底深字)";
+        };
+        readonly red: {
+            readonly purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)";
+        };
+        readonly orange: {
+            readonly purpose: "categorical 色相(--color-orange-*)";
+        };
+        readonly amber: {
+            readonly purpose: "categorical 色相(--color-amber-*,淺底深字)";
+        };
+        readonly lime: {
+            readonly purpose: "categorical 色相(--color-lime-*)";
         };
         readonly turquoise: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-turquoise-*)";
+        };
+        readonly indigo: {
+            readonly purpose: "categorical 色相(--color-indigo-*)";
         };
         readonly purple: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-purple-*)";
         };
         readonly magenta: {
-            readonly purpose: "分類色（無固定語義）";
-        };
-        readonly indigo: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-magenta-*)";
         };
     };
     readonly sizes: {
         readonly sm: {
-            readonly fieldHeight: 28;
+            readonly height: 20;
             readonly iconSize: 16;
-            readonly typography: "body";
+            readonly typography: "caption";
         };
         readonly md: {
-            readonly fieldHeight: 32;
+            readonly height: 24;
             readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
-            readonly iconSize: 20;
+            readonly height: 24;
+            readonly iconSize: 16;
             readonly typography: "body";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-neutral-active", "bg-neutral-hover", "bg-secondary", "bg-transparent"];
         readonly fg: readonly ["text-foreground", "text-inverse-fg"];

package/dist/components/Tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAuB9C,QAAA,MAAM,WAAW;;;8EA4BhB,CAAA;AAiBD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAyHD,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BV,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAwB9C,QAAA,MAAM,WAAW;;;8EAuBhB,CAAA;AAWD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2GAA2G;IAC3G,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAkHD,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CV,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Tag/tag.js

@@ -5,6 +5,7 @@ import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
 import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+import { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from "../../tokens/categorical-color.js";
 let _measureCtx = null;
 function getMeasureCtx() {
   if (!_measureCtx) _measureCtx = document.createElement("canvas").getContext("2d");
@@ -14,18 +15,13 @@ const tagVariants = cva(
   "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text",
   {
     variants: {
+      // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——
+      // key X 一律對 `--color-X-*`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。
+      // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange hue-38
+      // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。
       color: {
-        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層
-        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確
         neutral: "bg-secondary text-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
       },
       size: {
         sm: "h-5 px-1 text-caption font-medium",
@@ -41,27 +37,13 @@ const tagVariants = cva(
 );
 const SOLID_CLASSES = {
   neutral: "bg-[var(--color-neutral-9)] text-inverse-fg",
-  blue: "bg-[var(--color-blue-6)] text-on-emphasis",
-  red: "bg-[var(--color-deep-orange-6)] text-on-emphasis",
-  green: "bg-[var(--color-green-6)] text-on-emphasis",
-  yellow: "bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]",
-  turquoise: "bg-[var(--color-turquoise-6)] text-on-emphasis",
-  purple: "bg-[var(--color-purple-6)] text-on-emphasis",
-  magenta: "bg-[var(--color-magenta-6)] text-on-emphasis",
-  indigo: "bg-[var(--color-indigo-6)] text-on-emphasis"
+  ...CAT_SOLID
 };
 const SOLID_DISMISS_HOVER = {
   neutral: { hover: "var(--inverse-neutral-hover)", active: "var(--inverse-neutral-active)" },
-  blue: { hover: "var(--blue-hover)", active: "var(--blue-active)" },
-  red: { hover: "var(--red-hover)", active: "var(--red-active)" },
-  green: { hover: "var(--green-hover)", active: "var(--green-active)" },
-  yellow: { hover: "var(--yellow-hover)", active: "var(--yellow-active)" },
-  turquoise: { hover: "var(--turquoise-hover)", active: "var(--turquoise-active)" },
-  purple: { hover: "var(--purple-hover)", active: "var(--purple-active)" },
-  magenta: { hover: "var(--magenta-hover)", active: "var(--magenta-active)" },
-  indigo: { hover: "var(--indigo-hover)", active: "var(--indigo-active)" }
+  ...CAT_INTERACT
 };
-function TagDismiss({ onDismiss, label, solid, color }) {
+function TagDismiss({ onRemove, label, solid, color }) {
   const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : void 0;
   return /* @__PURE__ */ jsx(
     ItemInlineActionButton,
@@ -70,16 +52,16 @@ function TagDismiss({ onDismiss, label, solid, color }) {
       size: "md",
       onClick: (e) => {
         e.stopPropagation();
-        onDismiss();
+        onRemove();
       },
-      "aria-label": `移除 ${label}`,
+      "aria-label": label ? `移除 ${label}` : "移除",
       style: solidColors ? { "--dismiss-hover": solidColors.hover, "--dismiss-active": solidColors.active } : void 0,
       hoverBgClassName: solidColors ? "group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]" : void 0,
       className: "text-current hover:text-current active:text-current"
     }
   );
 }
-function TagInner({ className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }, forwardedRef) {
+function TagInner({ className, color, size, icon: Icon, avatar, onRemove, dismissLabel, solid, unbounded = false, children, style, ...props }, forwardedRef) {
   const solidClass = solid ? SOLID_CLASSES[color ?? "neutral"] : void 0;
   const ownRef = React.useRef(null);
   const [isTruncated, setIsTruncated] = React.useState(false);
@@ -124,7 +106,7 @@ function TagInner({ className, color, size, icon: Icon, avatar, onDismiss, solid
         Icon && /* @__PURE__ */ jsx(Icon, { size: 16, "aria-hidden": true }),
         avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full", children: avatar }),
         /* @__PURE__ */ jsx("span", { "data-tag-text": "", className: "px-1 truncate min-w-0", children }),
-        onDismiss && /* @__PURE__ */ jsx(TagDismiss, { onDismiss, label, solid, color: color ?? "neutral" })
+        onRemove && /* @__PURE__ */ jsx(TagDismiss, { onRemove, label: dismissLabel || label, solid, color: color ?? "neutral" })
       ]
     }
   );
@@ -139,24 +121,41 @@ Tag.displayName = "Tag";
 const tagMeta = {
   component: "Tag",
   family: 3,
+  // categorical 色相(裝飾性分類,非語意狀態)。**1:1 對 `--color-{hue}-*` primitive,零 offset**。
+  // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,
+  // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架
+  // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。
   variants: {
-    neutral: { purpose: "通用分類、草稿、無特定語義" },
-    blue: { purpose: "進行中、資訊提示、active 狀態（對應 --info）" },
-    red: { purpose: "錯誤、已封鎖、危險（對應 --error）" },
-    green: { purpose: "成功、已完成、已核准（對應 --success）" },
-    yellow: { purpose: "警告、待審核、注意（對應 --warning）" },
-    turquoise: { purpose: "分類色（無固定語義）" },
-    purple: { purpose: "分類色（無固定語義）" },
-    magenta: { purpose: "分類色（無固定語義）" },
-    indigo: { purpose: "分類色（無固定語義）" }
+    neutral: { purpose: "通用分類、草稿、無特定語義(secondary 底)" },
+    blue: { purpose: "categorical 色相(--color-blue-*)" },
+    green: { purpose: "categorical 色相(--color-green-*)" },
+    "deep-orange": { purpose: "categorical 色相(--color-deep-orange-*,hue 38)" },
+    yellow: { purpose: "categorical 色相(--color-yellow-*,淺底深字)" },
+    red: { purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)" },
+    orange: { purpose: "categorical 色相(--color-orange-*)" },
+    amber: { purpose: "categorical 色相(--color-amber-*,淺底深字)" },
+    lime: { purpose: "categorical 色相(--color-lime-*)" },
+    turquoise: { purpose: "categorical 色相(--color-turquoise-*)" },
+    indigo: { purpose: "categorical 色相(--color-indigo-*)" },
+    purple: { purpose: "categorical 色相(--color-purple-*)" },
+    magenta: { purpose: "categorical 色相(--color-magenta-*)" }
   },
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+    // Tag 尺寸不引用 field-height token（spec「尺寸」段——Tag 與 Field 尺寸獨立;段名指法免行號漂移）。
+    // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。
+    // iconSize 全尺寸統一 16（本檔 CAT icon render 硬寫 size={16}）。
+    sm: { height: 20, iconSize: 16, typography: "caption" },
+    md: { height: 24, iconSize: 16, typography: "body" },
+    lg: { height: 24, iconSize: 16, typography: "body" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // Tag 為純展示 indicator，無互動 state（spec「為何無 StateBehavior」段;段名指法免行號漂移）。
+  // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。
+  states: ["default"],
   tokens: {
+    // 2026-07-04 audit 註記:另有動態色相家族不逐一列 — CAT_SUBTLE 12 色相
+    // bg-[var(--color-{hue}-1)] + step-7 深字、CAT_SOLID step-6 底 + --on-emphasis(-dark) 配字、
+    // neutral solid bg-[var(--color-neutral-9)] — 全由 categorical-color.ts SSOT 衍生
+    //(anatomy TOKEN_MAP 以 stripVar 機械衍生,零漂移)。
     bg: ["bg-neutral-active", "bg-neutral-hover", "bg-secondary", "bg-transparent"],
     fg: ["text-foreground", "text-inverse-fg"],
     ring: []

package/dist/components/Tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../../src/components/Tag/tag.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/design-system/components/Tooltip/tooltip\"\nimport { ItemInlineActionButton } from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n// ── Tag（inline label）─────────────────────────────────────────────────────\n// 用於分類標籤、狀態標記、多選已選值。\n//\n// 三種尺寸（子元件補齊原則——消費端直接透傳 size，不做 mapping）：\n//   sm — 20px 高, 12px 字, 4px tag-px, font-medium（配 field sm）\n//   md — 24px 高, 14px 字, 4px tag-px, font-normal（配 field md）— 預設\n//   lg — 24px = md alias（配 field lg，子元件補齊原則）\n//\n// 截斷：max-w-40（160px），超出時文字 truncate + 自動 tooltip。\n// 用 Canvas measureText 偵測截斷（scrollWidth 在 flex 內不可靠）。\n\nlet _measureCtx: CanvasRenderingContext2D | null = null\nfunction getMeasureCtx() {\n  if (!_measureCtx) _measureCtx = document.createElement('canvas').getContext('2d')\n  return _measureCtx\n}\n\nconst tagVariants = cva(\n  \"inline-flex items-center rounded-md border border-transparent transition-colors cursor-text\",\n  {\n    variants: {\n      color: {\n        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層\n        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確\n        neutral:   \"bg-secondary text-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      size: {\n        sm: \"h-5 px-1 text-caption font-medium\",\n        md: \"h-6 px-1 text-body font-normal\",\n        lg: \"h-6 px-1 text-body font-normal\",\n      },\n    },\n    defaultVariants: {\n      color: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\n// ── Solid variant 色彩（step-6 底 + 白字，warning 用 --warning-foreground）──\n// 直接引用 primitive step-6，不經過語義層\n// neutral 用 neutral-9 + --inverse-fg（light=白字, dark=深字，自動反轉）\nconst SOLID_CLASSES: Record<string, string> = {\n  neutral:   'bg-[var(--color-neutral-9)] text-inverse-fg',\n  blue:      'bg-[var(--color-blue-6)] text-on-emphasis',\n  red:       'bg-[var(--color-deep-orange-6)] text-on-emphasis',\n  green:     'bg-[var(--color-green-6)] text-on-emphasis',\n  yellow:    'bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]',\n  turquoise: 'bg-[var(--color-turquoise-6)] text-on-emphasis',\n  purple:    'bg-[var(--color-purple-6)] text-on-emphasis',\n  magenta:   'bg-[var(--color-magenta-6)] text-on-emphasis',\n  indigo:    'bg-[var(--color-indigo-6)] text-on-emphasis',\n}\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>,\n    VariantProps<typeof tagVariants> {\n  /** 左側 icon（LucideIcon），由 Tag 統一 16px。與 avatar 互斥。 */\n  icon?: LucideIcon\n  /** 左側 avatar（ReactNode），與 icon 互斥。 */\n  avatar?: React.ReactNode\n  /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */\n  onDismiss?: () => void\n  /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */\n  solid?: boolean\n  /**\n   * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):\n   * Tag 寬度由 parent constrain,不套預設 max-w-40(160px)。用於 cell-as-input narrow cell\n   * (< 160px)時 Tag fit cell 寬度 + truncate ellipsis,而非 160px 後被 cell `overflow-hidden`\n   * 硬切。對齊「同 cell width → 同 overflow 判斷」SSOT。Default false 保 backward compat\n   * (wrap layout / pill rail 等仍受 160px 保護)。\n   */\n  unbounded?: boolean\n}\n\n// ── Solid dismiss hover/active bg ──\n// 用 semantic --{hue}-hover/active token，跟 --primary-hover/active 同模式：\n// solid 色彩 shade change（hover 較亮 step、active 較暗 step），跟 Button 等\n// 互動元件視覺一致。在 semantic 層做 dark mode swap 確保方向跨 mode 一致。\n// neutral 特例：bg 是 neutral-9 隨 mode 反轉，用 --inverse-neutral-* 鏡射\nconst SOLID_DISMISS_HOVER: Record<string, { hover: string; active: string }> = {\n  neutral:   { hover: 'var(--inverse-neutral-hover)', active: 'var(--inverse-neutral-active)' },\n  blue:      { hover: 'var(--blue-hover)',            active: 'var(--blue-active)' },\n  red:       { hover: 'var(--red-hover)',             active: 'var(--red-active)' },\n  green:     { hover: 'var(--green-hover)',           active: 'var(--green-active)' },\n  yellow:    { hover: 'var(--yellow-hover)',          active: 'var(--yellow-active)' },\n  turquoise: { hover: 'var(--turquoise-hover)',       active: 'var(--turquoise-active)' },\n  purple:    { hover: 'var(--purple-hover)',          active: 'var(--purple-active)' },\n  magenta:   { hover: 'var(--magenta-hover)',         active: 'var(--magenta-active)' },\n  indigo:    { hover: 'var(--indigo-hover)',          active: 'var(--indigo-active)' },\n}\n\n// ── Dismiss（internal）────────────────────────────────────────────────────\n// 走 `ItemInlineActionButton`(item-anatomy SSOT)+ `hoverBgClassName` override prop\n// (2026-05-01 整合,消除原 Tag 自刻 `<button>` 繞 DS infra 的 tech debt)。\n//\n// 視覺對齊:`size=\"md\"` → icon 16 / hover-bg 18,跟 Tag 既有手刻幾何完全相等。\n// Solid variant(blue/green/red 等)透過 `hoverBgClassName` 套色相 override token;\n// Subtle variant 落用 ItemInlineActionButton 預設 neutral-hover。\n// 圖標色繼承 Tag 文字色 → `text-current` 三態覆寫。\n\nfunction TagDismiss({ onDismiss, label, solid, color }: { onDismiss: () => void; label: string; solid?: boolean; color?: string }) {\n  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : undefined\n\n  return (\n    <ItemInlineActionButton\n      icon={X}\n      size=\"md\"\n      onClick={(e) => { e.stopPropagation(); onDismiss() }}\n      aria-label={`移除 ${label}`}\n      style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}\n      hoverBgClassName={\n        solidColors\n          ? 'group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]'\n          : undefined\n      }\n      // Override default fg-muted → 繼承 Tag 文字色(label 同色)\n      className=\"text-current hover:text-current active:text-current\"\n    />\n  )\n}\n\nfunction TagInner(\n  { className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }: TagProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined\n  const ownRef = React.useRef<HTMLDivElement | null>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n\n  React.useLayoutEffect(() => {\n    const el = ownRef.current\n    if (!el) return\n    const ctx = getMeasureCtx()\n    const check = () => {\n      const textSpan = el.querySelector('[data-tag-text]')\n      if (!textSpan || !ctx) return\n      const text = textSpan.textContent || ''\n      const cs = getComputedStyle(textSpan)\n      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`\n      const textWidth = ctx.measureText(text).width\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const needed = textWidth + padL + padR\n      setIsTruncated(needed > (textSpan as HTMLElement).clientWidth + 1)\n    }\n    check()\n    const obs = new ResizeObserver(check)\n    obs.observe(el)\n    return () => obs.disconnect()\n  }, [children])\n\n  const label = typeof children === 'string' ? children : ''\n\n  const tag = (\n    <div\n      ref={(el) => {\n        ownRef.current = el\n        if (typeof forwardedRef === 'function') forwardedRef(el)\n        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el\n      }}\n      data-tag-root=\"\"\n      className={cn(tagVariants({ color, size }), solidClass, 'w-fit min-w-0 overflow-hidden', className)}\n      // 2026-05-18 Round 5 fix(per Codex M31 Round 5 verdict + user 拍板「那就開始做」):\n      // 用 CSS var `--combobox-tag-area-inline-size`(由 Combobox useOverflowCount JS-injected)取代\n      // `min(100%, 10rem)` cyclic percentage。CSS Sizing 3 §5.2.1:percentage 在 indefinite containing\n      // block 退化為 initial value → Round 4 的 100% 沒 enforce。改 explicit px 值(JS measured)避此 trap。\n      // unbounded=true:cap = inject 寬(回 cell-as-input narrow cell 原 behavior)\n      // default:cap = min(inject 寬, 160px)— 兩 cap 取小。fallback(無 var,Form context 等)= 100% / 10rem。\n      style={{\n        maxWidth: unbounded\n          ? 'var(--combobox-tag-area-inline-size, 100%)'\n          : 'min(var(--combobox-tag-area-inline-size, 10rem), 10rem)',\n        ...style,\n      }}\n      {...props}\n    >\n      {Icon && <Icon size={16} aria-hidden />}\n      {avatar && <span className=\"shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full\">{avatar}</span>}\n      <span data-tag-text=\"\" className=\"px-1 truncate min-w-0\">{children}</span>\n      {onDismiss && <TagDismiss onDismiss={onDismiss} label={label} solid={solid} color={color ?? 'neutral'} />}\n    </div>\n  )\n\n  if (!isTruncated) return tag\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{tag}</TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Tag = React.forwardRef<HTMLDivElement, TagProps>(TagInner)\nTag.displayName = 'Tag'\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 tagMeta = {\n  component: 'Tag',\n  family: 3,\n  variants: {\n    neutral: { purpose: '通用分類、草稿、無特定語義' },\n    blue: { purpose: '進行中、資訊提示、active 狀態（對應 --info）' },\n    red: { purpose: '錯誤、已封鎖、危險（對應 --error）' },\n    green: { purpose: '成功、已完成、已核准（對應 --success）' },\n    yellow: { purpose: '警告、待審核、注意（對應 --warning）' },\n    turquoise: { purpose: '分類色（無固定語義）' },\n    purple: { purpose: '分類色（無固定語義）' },\n    magenta: { purpose: '分類色（無固定語義）' },\n    indigo: { purpose: '分類色（無固定語義）' },\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-active', 'bg-neutral-hover', 'bg-secondary', 'bg-transparent'],\n    fg: ['text-foreground', 'text-inverse-fg'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n  defaultSize: 'md',\n} as const\n\nexport { Tag, tagVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tag.js","sources":["../../../src/components/Tag/tag.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/design-system/components/Tooltip/tooltip\"\nimport { ItemInlineActionButton } from \"@/design-system/patterns/element-anatomy/item-anatomy\"\nimport { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from \"@/design-system/tokens/categorical-color\"\n\n// ── Tag（inline label）─────────────────────────────────────────────────────\n// 用於分類標籤、狀態標記、多選已選值。\n//\n// 三種尺寸（子元件補齊原則——消費端直接透傳 size，不做 mapping）：\n//   sm — 20px 高, 12px 字, 4px tag-px, font-medium（配 field sm）\n//   md — 24px 高, 14px 字, 4px tag-px, font-normal（配 field md）— 預設\n//   lg — 24px = md alias（配 field lg，子元件補齊原則）\n//\n// 截斷：max-w-40（160px），超出時文字 truncate + 自動 tooltip。\n// 用 Canvas measureText 偵測截斷（scrollWidth 在 flex 內不可靠）。\n\nlet _measureCtx: CanvasRenderingContext2D | null = null\nfunction getMeasureCtx() {\n  if (!_measureCtx) _measureCtx = document.createElement('canvas').getContext('2d')\n  return _measureCtx\n}\n\nconst tagVariants = cva(\n  \"inline-flex items-center rounded-md border border-transparent transition-colors cursor-text\",\n  {\n    variants: {\n      // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——\n      // key X 一律對 `--color-X-*`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。\n      // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange hue-38\n      // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。\n      color: {\n        neutral: \"bg-secondary text-foreground\",\n        ...CAT_SUBTLE,\n      },\n      size: {\n        sm: \"h-5 px-1 text-caption font-medium\",\n        md: \"h-6 px-1 text-body font-normal\",\n        lg: \"h-6 px-1 text-body font-normal\",\n      },\n    },\n    defaultVariants: {\n      color: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\n// ── Solid variant 色彩（step-6 底 + on-emphasis 配對文字,消費 categorical-color SSOT）──\n// 白字 --on-emphasis(夠深的 hue)/ 深字 --on-emphasis-dark(亮 hue:yellow/amber/orange/lime);green 白字例外。\n// **消費 categorical-color SSOT**(CAT_SOLID,1:1 色相)。neutral 非色相,用 neutral-9\n// + --inverse-fg（light=白字, dark=深字，自動反轉）自處理。\nconst SOLID_CLASSES: Record<string, string> = {\n  neutral: 'bg-[var(--color-neutral-9)] text-inverse-fg',\n  ...CAT_SOLID,\n}\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>,\n    VariantProps<typeof tagVariants> {\n  /** 左側 icon（LucideIcon），由 Tag 統一 16px。與 avatar 互斥。 */\n  icon?: LucideIcon\n  /** 左側 avatar（ReactNode），與 icon 互斥。 */\n  avatar?: React.ReactNode\n  /** 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) */\n  onRemove?: () => void\n  /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 */\n  dismissLabel?: string\n  /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */\n  solid?: boolean\n  /**\n   * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):\n   * Tag 寬度由 parent constrain,不套預設 max-w-40(160px)。用於 cell-as-input narrow cell\n   * (< 160px)時 Tag fit cell 寬度 + truncate ellipsis,而非 160px 後被 cell `overflow-hidden`\n   * 硬切。對齊「同 cell width → 同 overflow 判斷」SSOT。Default false 保 backward compat\n   * (wrap layout / pill rail 等仍受 160px 保護)。\n   */\n  unbounded?: boolean\n}\n\n// ── Solid dismiss hover/active bg ──\n// **消費 categorical-color SSOT**(CAT_INTERACT,semantic --{hue}-hover/active token),\n// 跟 --primary-hover/active 同模式:solid 色彩 shade change(hover 較亮 step、active 較暗 step),\n// 在 semantic 層做 dark mode swap 確保方向跨 mode 一致。\n// neutral 特例:bg 是 neutral-9 隨 mode 反轉,用 --inverse-neutral-* 鏡射,自處理。\nconst SOLID_DISMISS_HOVER: Record<string, { hover: string; active: string }> = {\n  neutral: { hover: 'var(--inverse-neutral-hover)', active: 'var(--inverse-neutral-active)' },\n  ...CAT_INTERACT,\n}\n\n// ── Dismiss（internal）────────────────────────────────────────────────────\n// 走 `ItemInlineActionButton`(item-anatomy SSOT)+ `hoverBgClassName` override prop\n// (2026-05-01 整合,消除原 Tag 自刻 `<button>` 繞 DS infra 的 tech debt)。\n//\n// 視覺對齊:`size=\"md\"` → icon 16 / hover-bg 18,跟 Tag 既有手刻幾何完全相等。\n// Solid variant(blue/green/red 等)透過 `hoverBgClassName` 套色相 override token;\n// Subtle variant 落用 ItemInlineActionButton 預設 neutral-hover。\n// 圖標色繼承 Tag 文字色 → `text-current` 三態覆寫。\n\nfunction TagDismiss({ onRemove, label, solid, color }: { onRemove: () => void; label: string; solid?: boolean; color?: string }) {\n  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : undefined\n\n  return (\n    <ItemInlineActionButton\n      icon={X}\n      size=\"md\"\n      onClick={(e) => { e.stopPropagation(); onRemove() }}\n      aria-label={label ? `移除 ${label}` : '移除'}\n      style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}\n      hoverBgClassName={\n        solidColors\n          ? 'group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]'\n          : undefined\n      }\n      // Override default fg-muted → 繼承 Tag 文字色(label 同色)\n      className=\"text-current hover:text-current active:text-current\"\n    />\n  )\n}\n\nfunction TagInner(\n  { className, color, size, icon: Icon, avatar, onRemove, dismissLabel, solid, unbounded = false, children, style, ...props }: TagProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined\n  const ownRef = React.useRef<HTMLDivElement | null>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n\n  React.useLayoutEffect(() => {\n    const el = ownRef.current\n    if (!el) return\n    const ctx = getMeasureCtx()\n    const check = () => {\n      const textSpan = el.querySelector('[data-tag-text]')\n      if (!textSpan || !ctx) return\n      const text = textSpan.textContent || ''\n      const cs = getComputedStyle(textSpan)\n      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`\n      const textWidth = ctx.measureText(text).width\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const needed = textWidth + padL + padR\n      setIsTruncated(needed > (textSpan as HTMLElement).clientWidth + 1)\n    }\n    check()\n    const obs = new ResizeObserver(check)\n    obs.observe(el)\n    return () => obs.disconnect()\n  }, [children])\n\n  const label = typeof children === 'string' ? children : ''\n\n  const tag = (\n    <div\n      ref={(el) => {\n        ownRef.current = el\n        if (typeof forwardedRef === 'function') forwardedRef(el)\n        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el\n      }}\n      data-tag-root=\"\"\n      className={cn(tagVariants({ color, size }), solidClass, 'w-fit min-w-0 overflow-hidden', className)}\n      // 2026-05-18 Round 5 fix(per Codex M31 Round 5 verdict + user 拍板「那就開始做」):\n      // 用 CSS var `--combobox-tag-area-inline-size`(由 Combobox useOverflowCount JS-injected)取代\n      // `min(100%, 10rem)` cyclic percentage。CSS Sizing 3 §5.2.1:percentage 在 indefinite containing\n      // block 退化為 initial value → Round 4 的 100% 沒 enforce。改 explicit px 值(JS measured)避此 trap。\n      // unbounded=true:cap = inject 寬(回 cell-as-input narrow cell 原 behavior)\n      // default:cap = min(inject 寬, 160px)— 兩 cap 取小。fallback(無 var,Form context 等)= 100% / 10rem。\n      style={{\n        maxWidth: unbounded\n          ? 'var(--combobox-tag-area-inline-size, 100%)'\n          : 'min(var(--combobox-tag-area-inline-size, 10rem), 10rem)',\n        ...style,\n      }}\n      {...props}\n    >\n      {Icon && <Icon size={16} aria-hidden />}\n      {avatar && <span className=\"shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full\">{avatar}</span>}\n      <span data-tag-text=\"\" className=\"px-1 truncate min-w-0\">{children}</span>\n      {onRemove && <TagDismiss onRemove={onRemove} label={dismissLabel || label} solid={solid} color={color ?? 'neutral'} />}\n    </div>\n  )\n\n  if (!isTruncated) return tag\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{tag}</TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Tag = React.forwardRef<HTMLDivElement, TagProps>(TagInner)\nTag.displayName = 'Tag'\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 tagMeta = {\n  component: 'Tag',\n  family: 3,\n  // categorical 色相(裝飾性分類,非語意狀態)。**1:1 對 `--color-{hue}-*` primitive,零 offset**。\n  // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,\n  // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架\n  // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。\n  variants: {\n    neutral: { purpose: '通用分類、草稿、無特定語義(secondary 底)' },\n    blue: { purpose: 'categorical 色相(--color-blue-*)' },\n    green: { purpose: 'categorical 色相(--color-green-*)' },\n    'deep-orange': { purpose: 'categorical 色相(--color-deep-orange-*,hue 38)' },\n    yellow: { purpose: 'categorical 色相(--color-yellow-*,淺底深字)' },\n    red: { purpose: 'categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)' },\n    orange: { purpose: 'categorical 色相(--color-orange-*)' },\n    amber: { purpose: 'categorical 色相(--color-amber-*,淺底深字)' },\n    lime: { purpose: 'categorical 色相(--color-lime-*)' },\n    turquoise: { purpose: 'categorical 色相(--color-turquoise-*)' },\n    indigo: { purpose: 'categorical 色相(--color-indigo-*)' },\n    purple: { purpose: 'categorical 色相(--color-purple-*)' },\n    magenta: { purpose: 'categorical 色相(--color-magenta-*)' },\n  },\n  sizes: {\n    // Tag 尺寸不引用 field-height token（spec「尺寸」段——Tag 與 Field 尺寸獨立;段名指法免行號漂移）。\n    // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。\n    // iconSize 全尺寸統一 16（本檔 CAT icon render 硬寫 size={16}）。\n    sm: { height: 20, iconSize: 16, typography: 'caption' },\n    md: { height: 24, iconSize: 16, typography: 'body' },\n    lg: { height: 24, iconSize: 16, typography: 'body' },\n  },\n  // Tag 為純展示 indicator，無互動 state（spec「為何無 StateBehavior」段;段名指法免行號漂移）。\n  // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。\n  states: ['default'],\n  tokens: {\n    // 2026-07-04 audit 註記:另有動態色相家族不逐一列 — CAT_SUBTLE 12 色相\n    // bg-[var(--color-{hue}-1)] + step-7 深字、CAT_SOLID step-6 底 + --on-emphasis(-dark) 配字、\n    // neutral solid bg-[var(--color-neutral-9)] — 全由 categorical-color.ts SSOT 衍生\n    //(anatomy TOKEN_MAP 以 stripVar 機械衍生,零漂移)。\n    bg: ['bg-neutral-active', 'bg-neutral-hover', 'bg-secondary', 'bg-transparent'],\n    fg: ['text-foreground', 'text-inverse-fg'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n  defaultSize: 'md',\n} as const\n\nexport { Tag, tagVariants }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/Textarea/index.js

@@ -0,0 +1,7 @@
+import { Textarea, textareaMeta, textareaVariants } from "./textarea.js";
+export {
+  Textarea,
+  textareaMeta,
+  textareaVariants
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Textarea/textarea.d.ts

@@ -14,7 +14,7 @@ import type { FieldMode, FieldVariant } from '../../components/Field/field-types
  *
  * ── Padding 規則 ───────────────────────────────────────────────────────
  * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center，
- * 改用 py-2（8px）固定上下內距 + px-3 左右內距（與 Input 一致）。
+ * 改用 py-2（8px）固定上下內距 + px-[var(--field-px)]（12px token，左右內距 SSOT，與 Input/Field family 一致）。
  *
  * ── Size ────────────────────────────────────────────────────────────────
  * sm / md → text-body（14px）
@@ -27,6 +27,7 @@ declare const textareaVariants: (props?: ({
     mode?: "display" | "disabled" | "edit" | "readonly" | null | undefined;
     variant?: "default" | "bare" | "naked" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, Omit<VariantProps<typeof textareaVariants>, 'mode' | 'variant'> {
     /** Field display mode */
@@ -34,7 +35,8 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     /**
      * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。透傳自 FieldContext.variant,per-prop override。
      * - `'default'` — 完整 chrome(form 場景)
-     * - `'bare'` — 透明 variant,hover/focus reveal(toolbar / cell-as-input)
+     * - `'bare'` — 透明 variant,hover/focus 才 reveal inner border(toolbar / inline editing)
+     * - `'naked'` — 完全無 chrome,cell-as-input(host cell 提供 border + focus frame,對齊 Airtable / Notion / Excel cell editing)
      */
     variant?: FieldVariant;
     /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */
@@ -47,24 +49,18 @@ export declare const textareaMeta: {
     readonly variants: {};
     readonly sizes: {
         readonly sm: {
-            readonly fieldHeight: 28;
-            readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly md: {
-            readonly fieldHeight: 32;
-            readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
-            readonly iconSize: 20;
-            readonly typography: "body";
+            readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "readonly", "disabled", "error"];
     readonly tokens: {
-        readonly bg: readonly ["bg-disabled", "bg-surface"];
+        readonly bg: readonly ["bg-disabled", "bg-readonly", "bg-surface"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
         readonly ring: readonly [];
     };

package/dist/components/Textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,QAAA,MAAM,gBAAgB;;;;8EAyHrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EACrE,IAAI,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAGD,QAAA,MAAM,QAAQ,2FAkFb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,QAAA,MAAM,gBAAgB;;;;;8EAoIrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EACrE,IAAI,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAGD,QAAA,MAAM,QAAQ,2FA4Eb,CAAA;AAMD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;CAoBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}