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

package/dist/components/Breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/Breadcrumb/breadcrumb.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 — Breadcrumb 含 BreadcrumbList(主)+ BreadcrumbItem + BreadcrumbEllipsis + items-collapse logic,split 會破壞 collapse/overflow Tooltip subtree\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── TruncatedLabel ────────────────────────────────────────────────────────────\n// 同 `data-table.tsx TruncateCell` + `tag.tsx isTruncated` SSOT pattern\n// (shared ResizeObserver + scrollWidth > clientWidth → wrap Tooltip)。\n// **TODO** future:Rule-of-3 達 → 抽 `patterns/element-anatomy/truncated-text.tsx` 共用\n// (本 component / DataTable TruncateCell / Tag inner 三處同 idiom,符合 M30 SSOT 抽取門檻)。\n\ntype RoCallback = (entry: ResizeObserverEntry) => void\nlet sharedRO: ResizeObserver | null = null\nconst sharedROCallbacks = new WeakMap<Element, RoCallback>()\nfunction getSharedRO(): ResizeObserver {\n  if (sharedRO) return sharedRO\n  sharedRO = new ResizeObserver((entries) => {\n    entries.forEach((e) => {\n      const cb = sharedROCallbacks.get(e.target)\n      if (cb) cb(e)\n    })\n  })\n  return sharedRO\n}\nfunction observeShared(el: Element, cb: RoCallback): () => void {\n  const obs = getSharedRO()\n  sharedROCallbacks.set(el, cb)\n  obs.observe(el)\n  return () => { sharedROCallbacks.delete(el); obs.unobserve(el) }\n}\n\nfunction TruncatedLabel({ children, fullText }: { children: React.ReactNode; fullText?: string }) {\n  const ref = React.useRef<HTMLSpanElement>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n  React.useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const check = () => setIsTruncated(el.scrollWidth > el.clientWidth)\n    check()\n    // 2026-05-11 fix:首幀 layout 未完成 / 字型 async load → scrollWidth=clientWidth 假陰性。\n    // RAF + 短延遲再驗一次,捕獲字型 / 容器尺寸後變(對齊 TruncateCell / Tag SSOT pattern)。\n    const raf = requestAnimationFrame(check)\n    const t = setTimeout(check, 100)\n    const cleanup = observeShared(el, check)\n    return () => {\n      cancelAnimationFrame(raf)\n      clearTimeout(t)\n      cleanup()\n    }\n  }, [])\n  // Tooltip canonical:per `tooltip.principles.stories.tsx:190`「Tooltip 是資訊補救 — 文字被\n  // truncate 時才顯示完整內容。沒被截斷就不該顯示 tooltip」\n  //\n  // 2026-05-11 fix(playwright tooltip-on-truncate 卡 hover 沒 tooltip):\n  // 原本 isTruncated=false 直接 return 裸 span / true 才 wrap Tooltip → JSX 樹結構改變\n  // → React 把 span unmount + remount(因為 wrapper component 變),ref 換到新 span,\n  // useEffect [] 不重跑(同 component instance)→ 觀察的 DOM 跟實際 DOM 對不上。\n  // Fix:**永遠 wrap Tooltip**(同 DOM 節點生命週期);`open` 由 isTruncated 控制 —\n  // 沒被 truncate 就 force `open={false}`,有 truncate 就 `undefined`(uncontrolled,\n  // hover 走 Radix default behavior)。對齊 canonical「沒被截斷就不該 tooltip」。\n  return (\n    <Tooltip open={isTruncated ? undefined : false}>\n      <TooltipTrigger asChild>\n        <span ref={ref} className=\"truncate min-w-0 block\">{children}</span>\n      </TooltipTrigger>\n      <TooltipContent>{fullText ?? children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\n/**\n * Breadcrumb — 顯示當前頁面在階層中的位置\n *\n * 基於 shadcn/ui Breadcrumb 結構(純 HTML nav + ol + li + a/span),\n * 橋接設計系統 token。\n *\n * ── 結構 ──\n *   <Breadcrumb>\n *     <BreadcrumbList size=\"md\">\n *       <BreadcrumbItem>\n *         <BreadcrumbLink href=\"/projects\">專案</BreadcrumbLink>\n *       </BreadcrumbItem>\n *       <BreadcrumbSeparator />\n *       <BreadcrumbItem>\n *         <BreadcrumbPage>目前頁面</BreadcrumbPage>\n *       </BreadcrumbItem>\n *     </BreadcrumbList>\n *   </Breadcrumb>\n *\n * ── Size(跟 page title 配對) ──\n *   sm  text-body(14)     → 建議配 text-h4(20) title —— Dialog / panel / drawer\n *   md  text-body(14)     → 建議配 text-h3(24) title —— 一般頁面 header (預設)\n *   lg  text-body-lg(16)  → 建議配 text-h2(32) title —— Detail page hero / landing\n *\n * ── 視覺 ──\n *   Link (預設): text-fg-secondary\n *   Link hover:  text-primary-hover (canonical「互動高亮」, 跟 Tabs / Chip 用法一致)\n *   Page (當前): text-foreground(不加粗 — 加粗會讓 breadcrumb 最右端視覺過重,見 spec)\n *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted\n *\n * ── 詳見 breadcrumb.spec.md ──\n */\n\n// ── Size context ─────────────────────────────────────────────────────────────\n\ntype BreadcrumbSize = 'sm' | 'md' | 'lg'\n\ninterface BreadcrumbContextValue {\n  size: BreadcrumbSize\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({ size: 'md' })\n\nconst BREADCRUMB_TEXT_CLASS: Record<BreadcrumbSize, string> = {\n  sm: 'text-body',\n  md: 'text-body',\n  lg: 'text-body-lg',\n}\n\n// Separator / ellipsis icon 尺寸 — 對齊 uiSize.spec.md「Icon Size Tier」(field-height-sm/md→16,lg→20)\n// 2026-05-18 改 per user 拍板「A 先改 16/16/20」+「做完」approval:\n// 撤回 text-flow 例外設計,Breadcrumb chevron 跟其他 chrome icon 同 tier。\n// World-class 對齊:Atlassian Breadcrumb chevron 16 default / Material 3 / Ant Design 同。\nconst BREADCRUMB_ICON_SIZE: Record<BreadcrumbSize, number> = {\n  sm: 16,\n  md: 16,\n  lg: 20,\n}\n\n// ── Breadcrumb (nav root) ────────────────────────────────────────────────────\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ ...props }, ref) => (\n  <nav ref={ref} aria-label=\"Breadcrumb\" {...props} />\n))\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ── BreadcrumbList (ol) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):declarative items mode 啟用 auto-collapse + auto-separator + auto-page-end。\n * 對齊 Material UI source `Breadcrumbs.js renderItemsBeforeAndAfter` mechanism(`maxItems`\n * default 8;本 DS 採 user-tuned 4 — 更積極 collapse 適合 single-line 緊湊 layout)。\n */\n// code-quality-allow: dead-export — public consumer-facing item spec type;對齊 BreadcrumbProps API contract,允許 consumer 構造 items array 外部\nexport interface BreadcrumbItemSpec {\n  label: React.ReactNode\n  href?: string\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 業界慣例:Breadcrumb 首項用 Home icon 強化視覺錨點(Material / Atlassian)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT(sm/md=16, lg=20,對齊 uiSize.spec.md Icon Size Tier)。\n   * Consumer **不傳** size,DS 統一管。\n   */\n  startIcon?: LucideIcon\n}\n\ninterface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'children'> {\n  /**\n   * 字體尺寸 — 依據與之配對的 page title 選擇:\n   *   sm  → 配 text-h4(20) title (Dialog / panel / drawer)\n   *   md  → 配 text-h3(24) title (一般頁面 header,預設)\n   *   lg  → 配 text-h2(32) title (Detail page hero / landing)\n   */\n  size?: BreadcrumbSize\n  /**\n   * Declarative items mode(opt-in)。當 provided 時 `children` 被忽略,List 內部自動:\n   *  - 插 separator\n   *  - 末位 spec(無 `href`)自動 BreadcrumbPage(per Title-breadcrumb-end SSOT)\n   *  - 超 `maxItems` auto-collapse 中段成 BreadcrumbEllipsis + DropdownMenu(對齊 Material UI\n   *    source `renderItemsBeforeAndAfter`)\n   */\n  items?: BreadcrumbItemSpec[]\n  /**\n   * Auto-collapse 閾值。Default 4(user-tuned;Material UI source 預設 8)。`items.length > maxItems`\n   * 才 collapse。\n   */\n  maxItems?: number\n  /** Collapse 後保留首 N 個(default 1)。對齊 Material UI source default。 */\n  itemsBeforeCollapse?: number\n  /** Collapse 後保留末 N 個(default 1)。對齊 Material UI source default。 */\n  itemsAfterCollapse?: number\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — items props × children narrowing × collapse-with-overflow × tooltip 4 軸組合在 BreadcrumbList,拆 sub-fn 會跨 fn 傳 itemsBeforeCollapse/After collapsed-tooltip refs\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, size = 'md', items, maxItems = 4, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, children, ...props }, ref) => {\n    // Memoize provider value(2026-04-22 D3 perf audit):單 field wrapper memoize\n    const ctxValue = React.useMemo(() => ({ size }), [size])\n\n    // Declarative mode(items prop provided):自動 render + auto-collapse\n    const declarativeContent = React.useMemo(() => {\n      if (!items) return null\n      const renderItem = (spec: BreadcrumbItemSpec, role: 'root' | 'middle' | 'current') => (\n        <BreadcrumbItem key={`${role}-${typeof spec.label === 'string' ? spec.label : Math.random()}`} role={role}>\n          {role === 'current'\n            ? <BreadcrumbPage startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\n              </BreadcrumbPage>\n            : <BreadcrumbLink href={spec.href} asChild={spec.asChild} startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\n              </BreadcrumbLink>\n          }\n        </BreadcrumbItem>\n      )\n\n      const shouldCollapse = items.length > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)  // 末位永遠 ≥ 1(current page)\n\n      type VisibleItem = { spec: BreadcrumbItemSpec; role: 'root' | 'middle' | 'current' }\n      let visible: Array<VisibleItem | { ellipsisOf: BreadcrumbItemSpec[] }>\n      if (!shouldCollapse) {\n        visible = items.map((spec, i) => ({\n          spec,\n          role: i === 0 ? 'root' : (i === items.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n      } else {\n        const before = items.slice(0, beforeN).map((spec, i) => ({\n          spec,\n          role: (i === 0 ? 'root' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        const collapsed = items.slice(beforeN, items.length - afterN)\n        const after = items.slice(items.length - afterN).map((spec, i, arr) => ({\n          spec,\n          role: (i === arr.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        visible = [...before, { ellipsisOf: collapsed }, ...after]\n      }\n\n      // Interleave with separators\n      const rendered: React.ReactNode[] = []\n      visible.forEach((entry, i) => {\n        if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n        if ('ellipsisOf' in entry) {\n          rendered.push(\n            <BreadcrumbItem key=\"ellipsis\" role=\"ellipsis\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <BreadcrumbEllipsis />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"start\">\n                  {entry.ellipsisOf.map((s, j) => (\n                    <DropdownMenuItem key={j} asChild={!!s.href}>\n                      {s.href ? <a href={s.href}>{s.label}</a> : <span>{s.label}</span>}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </BreadcrumbItem>\n          )\n        } else {\n          rendered.push(renderItem(entry.spec, entry.role))\n        }\n      })\n      return rendered\n    }, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    // 2026-05-12 fix(user 抓 image 2 Deep story 違反 single-line + max-levels canonical):\n    // Compositional path 也走 auto-collapse + flex-shrink hierarchy。Walk children, 找\n    // BreadcrumbItem 並按 index 分派 role (first=root / last=current / middle=middle)。\n    // > maxItems 自動 collapse 中段成 ellipsis(對齊 declarative path canonical SSOT)。\n    const compositionalContent = React.useMemo(() => {\n      if (items) return null\n      const childArr = React.Children.toArray(children)\n      // 抓 BreadcrumbItem children(skip BreadcrumbSeparator — auto re-interleave)\n      // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):type-identity primary path + displayName fallback。\n      // 純 `displayName` check 在 HOC / React.memo / consumer alias 場景脆弱(production build / wrap\n      // 可能改寫 displayName)。`c.type === BreadcrumbItem` 是 React fiber reference-identity 最穩\n      // primary(對齊 Radix children-walk pattern);displayName fallback 給 HOC 場景。\n      const itemChildren = childArr.filter((c): c is React.ReactElement<BreadcrumbItemProps> =>\n        React.isValidElement(c) && (c.type === BreadcrumbItem ||\n          (c.type as React.ComponentType)?.displayName === 'BreadcrumbItem')\n      )\n      // 無 item 或全是 separator → pass-through(consumer raw children,e.g. spinners)\n      if (itemChildren.length === 0) return children\n      // Assign role by position; clone with role prop\n      const total = itemChildren.length\n      const cloneWithRole = (item: React.ReactElement<BreadcrumbItemProps>, idx: number, role: 'root' | 'middle' | 'current') =>\n        React.cloneElement(item, { role: item.props.role ?? role, key: `bc-${role}-${idx}` })\n      const shouldCollapse = total > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)\n      const rendered: React.ReactNode[] = []\n      if (!shouldCollapse) {\n        itemChildren.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n          const role: 'root' | 'middle' | 'current' = i === 0 ? 'root' : (i === total - 1 ? 'current' : 'middle')\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      } else {\n        // before(first N) + ellipsis + after(last M)\n        const beforeItems = itemChildren.slice(0, beforeN)\n        const collapsedItems = itemChildren.slice(beforeN, total - afterN)\n        const afterItems = itemChildren.slice(total - afterN)\n        beforeItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-bef-${i}`} />)\n          const role: 'root' | 'middle' = i === 0 ? 'root' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n        if (rendered.length > 0) rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-before\" />)\n        rendered.push(\n          <BreadcrumbItem key=\"bc-ellipsis\" role=\"ellipsis\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <BreadcrumbEllipsis />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                {collapsedItems.map((item, j) => {\n                  // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):consumer BreadcrumbItem children 常包\n                  // `<BreadcrumbLink href>` = anchor button-like。直接放進 `<DropdownMenuItem>` 會 nested\n                  // interactive(menuitem within button violates HTML / a11y)。Fix:extract href + label,\n                  // 用 `asChild` 把 anchor 接到 menuitem 對齊 declarative path line 245 canonical pattern。\n                  const innerChildren = (item.props as { children?: React.ReactNode }).children\n                  let href: string | undefined\n                  let label: React.ReactNode = innerChildren\n                  React.Children.forEach(innerChildren, (c) => {\n                    if (React.isValidElement<{ href?: string; children?: React.ReactNode }>(c)) {\n                      if (c.props.href) href = c.props.href\n                      if (c.props.children != null) label = c.props.children\n                    }\n                  })\n                  return href\n                    ? <DropdownMenuItem key={`collapsed-${j}`} asChild><a href={href}>{label}</a></DropdownMenuItem>\n                    : <DropdownMenuItem key={`collapsed-${j}`}>{label}</DropdownMenuItem>\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n        )\n        rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-after\" />)\n        afterItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-aft-${i}`} />)\n          const role: 'middle' | 'current' = i === afterItems.length - 1 ? 'current' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      }\n      return rendered\n    }, [items, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    return (\n    <BreadcrumbContext.Provider value={ctxValue}>\n      <ol\n        ref={ref}\n        // gap-1 (4px) — separator 與兩邊 items 間距;緊湊節奏,符合 breadcrumb 密集流動感。\n        // 2026-05-10 Phase A single-line canonical(per user + Material UI source verified):\n        //   `flex-nowrap` 不 wrap。長路徑走中段折疊。\n        // 2026-05-12 fix:compositional 也走 auto-collapse + role-assignment(`compositionalContent`)\n        //   → declarative / compositional 兩 path 都符合 single-line + max-levels + width 分配 canonical SSOT。\n        className={cn(\n          'flex flex-nowrap items-center gap-1 text-fg-secondary leading-compact min-w-0',\n          BREADCRUMB_TEXT_CLASS[size],\n          className\n        )}\n        {...props}\n      >\n        {items ? declarativeContent : compositionalContent}\n      </ol>\n    </BreadcrumbContext.Provider>\n    )\n  },\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ── BreadcrumbItem (li) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):`role` prop emit `data-bc-role` attr → CSS flex-shrink hierarchy。\n * Per BreadcrumbItem 在 row 中的角色決定 shrink 優先級:\n *   - `root`(首位)→ shrink:3(縮最積極;root context 可弱化)\n *   - `middle`(中段)→ shrink:2\n *   - `current`(末位 / page)→ shrink:1(最後縮;a11y current page anchor)\n *   - `ellipsis`(BreadcrumbEllipsis 包裝)→ shrink:0(永遠完整 ⋯)\n *\n * 設計回應 user 兩 challenges:\n *   (a) Root 也 truncate(shrink:3,不是 shrink-0)\n *   (b) 不用 fixed max-width — flex-shrink hierarchy 容器寬時自然展開不浪費空間,\n *       窄時按優先級縮 + TruncatedLabel 內部 CSS truncate + tooltip。\n */\ninterface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<'li'> {\n  role?: 'root' | 'middle' | 'current' | 'ellipsis'\n}\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, role, style, ...props }, ref) => {\n    // 2026-05-20 fix v3(user 抓「專案 後方多 4px 間距 / 我的新專案 沒有」chevron 不對稱):\n    //   v2 `minWidth: '2rem'`(32px)在寬容器強制 li ≥ 32px → 短 label「專案」(natural ~28px)\n    //   被撐 4px,長 label「我的新專案」(natural ~70px)hug content → chevron 兩側不對稱。\n    //\n    // v3 解法:minWidth `2rem` → `1.5rem`(24px)\n    //   數學:中文「X…」最小寬度 = 1 char(~14-16px)+ ellipsis(~6-8px)≈ 22-24px → 24px 剛 cover\n    //   結果:\n    //     - 寬容器:所有自然 label ≥ 24px → li hug content,chevron 緊貼,對稱(本 fix 主目的)\n    //     - 窄容器 truncate:shrink 不過 24px → 「X…」仍可見 ellipsis 保險\n    //     - 短英文「OK / ID」(natural ~20px)→ 多 ~4px(原 12px → 縮到 4px,顯著改善)\n    //   對齊 user verbatim「minWidth 再調小一點」+ ellipsis 數學最小值。\n    const shrinkStyle: React.CSSProperties = role === 'root' ? { flexShrink: 3, minWidth: '1.5rem' }\n      : role === 'middle' ? { flexShrink: 2, minWidth: '1.5rem' }\n      : role === 'current' ? { flexShrink: 1, minWidth: '1.5rem' }\n      : role === 'ellipsis' ? { flexShrink: 0 }\n      : {}\n    return (\n      <li\n        ref={ref}\n        data-bc-role={role}\n        className={cn('inline-flex items-center min-w-0', className)}\n        style={{ ...shrinkStyle, ...style }}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ── BreadcrumbLink (a) ───────────────────────────────────────────────────────\n\ninterface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** 將樣式套用至子元件(e.g. React Router Link) */\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT,DS 統一尺寸不允許 consumer override。\n   * 對齊 uiSize.spec.md Icon Size Tier(2026-05-18 撤回 14 例外,統一 16/16/20)。\n   */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(user 抓 image 2 Deep story 麵包屑沒符合 single-line + truncate canonical):\n    // 純文字 children → auto-wrap TruncatedLabel(canonical「single-line + ellipsis + tooltip\n    // on truncate」per spec.md / Polaris breadcrumb)。Non-string children(consumer 自訂 icon+text\n    // 結構)→ pass-through 不 force-wrap(consumer own truncate)。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\n      : children\n    const sharedClassName = cn(\n      'inline-flex items-center gap-2',\n      'min-w-0 max-w-full',\n      'text-fg-secondary',\n      'hover:text-primary-hover',\n      'transition-colors duration-150',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n      'rounded-md',\n      className\n    )\n    // 2026-05-25 fix(user 抓 Breadcrumb asChild story React.Children.only runtime fail):\n    // Radix Slot 規範 children 必為單 element;原 unified Comp render 在 asChild path 內\n    // 仍輸出「{StartIcon && ...} + {wrappedChildren}」雙 JSX expression → Slot 收到 array\n    // → React.Children.only(array) throws「expected to receive a single React element child」。\n    // 分支 render 解 — asChild path 只傳 consumer-supplied child(icon 由 consumer 自管,\n    // 對齊 Radix Slot canonical「single child contract」);非 asChild path 維持原 native\n    // <a> + DS-controlled icon + wrapped label。\n    if (asChild) {\n      return (\n        <Slot ref={ref} className={sharedClassName} {...props}>\n          {wrappedChildren}\n        </Slot>\n      )\n    }\n    return (\n      <a ref={ref} className={sharedClassName} {...props}>\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </a>\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ── BreadcrumbPage (current, non-clickable) ──────────────────────────────────\n\ninterface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<'span'> {\n  /** 起始 icon。內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT。對齊 BreadcrumbLink. */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(同 BreadcrumbLink):純文字 children → auto-wrap TruncatedLabel。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\n      : children\n    return (\n      <span\n        ref={ref}\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('inline-flex items-center gap-2 min-w-0 max-w-full text-foreground', className)}\n        {...props}\n      >\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </span>\n    )\n  }\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ── BreadcrumbSeparator ──────────────────────────────────────────────────────\n\ninterface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ children, className, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        // Phase B(2026-05-10):separator 永遠 shrink-0(必完整顯示,否則 path 視覺斷裂)\n        className={cn('inline-flex items-center text-fg-muted shrink-0', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight size={BREADCRUMB_ICON_SIZE[size]} aria-hidden />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ── BreadcrumbEllipsis ───────────────────────────────────────────────────────\n\n/**\n * BreadcrumbEllipsis — 折疊路徑的 \"⋯\" 按鈕\n *\n * 2026-05-10 重寫:消費 `ItemInlineActionButton`(primitive SSOT)取代自刻 `<button>`。\n * Per inline-action.spec.md L106-131 predicate Q1+Q2+Q3 全指向 Inline Action:\n *   - Q1 點了要做事嗎?是(展開折疊路徑 dropdown)\n *   - Q2 位置?BreadcrumbList row inline flow(host 內)\n *   - Q3 row 多大?14-16px text row(compact tier)→ Inline Action\n * + 對齊 M1「視覺決策前必消費 SSOT」+ Mindset #2「優先消費既有」。\n *\n * 配合 DropdownMenuTrigger asChild 使用:\n *\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <BreadcrumbEllipsis />\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem asChild><a href=\"/org\">組織</a></DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n *\n * `overlayTrigger=true` 視覺鎖:DropdownMenu open 期間 button 維持 hover bg(對齊\n * shadcn / Radix Themes / Material 的 overlay trigger canonical,inline-action.spec.md\n * 「Overlay trigger canonical」段)。\n */\ntype BreadcrumbEllipsisProps = Omit<React.ComponentPropsWithoutRef<typeof ItemInlineActionButton>, 'icon' | 'size'>\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(\n  ({ 'aria-label': ariaLabel = '顯示折疊路徑' /* i18n-allow: DS default; consumer override via aria-label prop */, ...props }, ref) => {\n    return (\n      <ItemInlineActionButton\n        ref={ref}\n        icon={MoreHorizontal}\n        size=\"md\"  // Breadcrumb 不在 RowSizeProvider 樹內,固定 md(16px icon + 18px hover bg,對齊 inline-action.spec.md 尺寸表)\n        aria-label={ariaLabel}\n        overlayTrigger\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\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 breadcrumbMeta = {\n  component: 'Breadcrumb',\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: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\nexport type { BreadcrumbSize, BreadcrumbListProps, BreadcrumbEllipsisProps }\n// BreadcrumbItemSpec 已在上方 `export interface BreadcrumbItemSpec` 直接 export\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/Breadcrumb/breadcrumb.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 — Breadcrumb 含 BreadcrumbList(主)+ BreadcrumbItem + BreadcrumbEllipsis + items-collapse logic,split 會破壞 collapse/overflow Tooltip subtree\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── TruncatedLabel ────────────────────────────────────────────────────────────\n// 同 `data-table.tsx TruncateCell` + `tag.tsx isTruncated` SSOT pattern\n// (shared ResizeObserver + scrollWidth > clientWidth → wrap Tooltip)。\n// **TODO** future:Rule-of-3 達 → 抽 `patterns/element-anatomy/truncated-text.tsx` 共用\n// (本 component / DataTable TruncateCell / Tag inner 三處同 idiom,符合 M30 SSOT 抽取門檻)。\n\ntype RoCallback = (entry: ResizeObserverEntry) => void\nlet sharedRO: ResizeObserver | null = null\nconst sharedROCallbacks = new WeakMap<Element, RoCallback>()\nfunction getSharedRO(): ResizeObserver {\n  if (sharedRO) return sharedRO\n  sharedRO = new ResizeObserver((entries) => {\n    entries.forEach((e) => {\n      const cb = sharedROCallbacks.get(e.target)\n      if (cb) cb(e)\n    })\n  })\n  return sharedRO\n}\nfunction observeShared(el: Element, cb: RoCallback): () => void {\n  const obs = getSharedRO()\n  sharedROCallbacks.set(el, cb)\n  obs.observe(el)\n  return () => { sharedROCallbacks.delete(el); obs.unobserve(el) }\n}\n\nfunction TruncatedLabel({ children, fullText }: { children: React.ReactNode; fullText?: string }) {\n  const ref = React.useRef<HTMLSpanElement>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n  React.useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const check = () => setIsTruncated(el.scrollWidth > el.clientWidth)\n    check()\n    // 2026-05-11 fix:首幀 layout 未完成 / 字型 async load → scrollWidth=clientWidth 假陰性。\n    // RAF + 短延遲再驗一次,捕獲字型 / 容器尺寸後變(對齊 TruncateCell / Tag SSOT pattern)。\n    const raf = requestAnimationFrame(check)\n    const t = setTimeout(check, 100)\n    const cleanup = observeShared(el, check)\n    return () => {\n      cancelAnimationFrame(raf)\n      clearTimeout(t)\n      cleanup()\n    }\n  }, [])\n  // Tooltip canonical:per `tooltip.principles.stories.tsx:190`「Tooltip 是資訊補救 — 文字被\n  // truncate 時才顯示完整內容。沒被截斷就不該顯示 tooltip」\n  //\n  // 2026-05-11 fix(playwright tooltip-on-truncate 卡 hover 沒 tooltip):\n  // 原本 isTruncated=false 直接 return 裸 span / true 才 wrap Tooltip → JSX 樹結構改變\n  // → React 把 span unmount + remount(因為 wrapper component 變),ref 換到新 span,\n  // useEffect [] 不重跑(同 component instance)→ 觀察的 DOM 跟實際 DOM 對不上。\n  // Fix:**永遠 wrap Tooltip**(同 DOM 節點生命週期);`open` 由 isTruncated 控制 —\n  // 沒被 truncate 就 force `open={false}`,有 truncate 就 `undefined`(uncontrolled,\n  // hover 走 Radix default behavior)。對齊 canonical「沒被截斷就不該 tooltip」。\n  return (\n    <Tooltip open={isTruncated ? undefined : false}>\n      <TooltipTrigger asChild>\n        <span ref={ref} className=\"truncate min-w-0 block\">{children}</span>\n      </TooltipTrigger>\n      <TooltipContent>{fullText ?? children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\n/**\n * Breadcrumb — 顯示當前頁面在階層中的位置\n *\n * 基於 shadcn/ui Breadcrumb 結構(純 HTML nav + ol + li + a/span),\n * 橋接設計系統 token。\n *\n * ── 結構 ──\n *   <Breadcrumb>\n *     <BreadcrumbList size=\"md\">\n *       <BreadcrumbItem>\n *         <BreadcrumbLink href=\"/projects\">專案</BreadcrumbLink>\n *       </BreadcrumbItem>\n *       <BreadcrumbSeparator />\n *       <BreadcrumbItem>\n *         <BreadcrumbPage>目前頁面</BreadcrumbPage>\n *       </BreadcrumbItem>\n *     </BreadcrumbList>\n *   </Breadcrumb>\n *\n * ── Size(跟 page title 配對) ──\n *   sm  text-body(14)     → 建議配 text-h4(20) title —— Dialog / panel / drawer\n *   md  text-body(14)     → 建議配 text-h3(24) title —— 一般頁面 header (預設)\n *   lg  text-body-lg(16)  → 建議配 text-h2(32) title —— Detail page hero / landing\n *\n * ── 視覺 ──\n *   Link (預設): text-fg-secondary\n *   Link hover:  text-primary-hover (canonical「互動高亮」, 跟 Tabs / Chip 用法一致)\n *   Page (當前): text-foreground(不加粗 — 加粗會讓 breadcrumb 最右端視覺過重,見 spec)\n *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted\n *\n * ── 詳見 breadcrumb.spec.md ──\n */\n\n// ── Size context ─────────────────────────────────────────────────────────────\n\ntype BreadcrumbSize = 'sm' | 'md' | 'lg'\n\ninterface BreadcrumbContextValue {\n  size: BreadcrumbSize\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({ size: 'md' })\n\nconst BREADCRUMB_TEXT_CLASS: Record<BreadcrumbSize, string> = {\n  sm: 'text-body',\n  md: 'text-body',\n  lg: 'text-body-lg',\n}\n\n// Separator / ellipsis icon 尺寸 — 對齊 uiSize.spec.md「Icon Size Tier」(field-height-sm/md→16,lg→20)\n// 2026-05-18 改 per user 拍板「A 先改 16/16/20」+「做完」approval:\n// 撤回 text-flow 例外設計,Breadcrumb chevron 跟其他 chrome icon 同 tier。\n// World-class 對齊:Atlassian Breadcrumb chevron 16 default / Material 3 / Ant Design 同。\nconst BREADCRUMB_ICON_SIZE: Record<BreadcrumbSize, number> = {\n  sm: 16,\n  md: 16,\n  lg: 20,\n}\n\n// ── Breadcrumb (nav root) ────────────────────────────────────────────────────\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ ...props }, ref) => (\n  <nav ref={ref} aria-label=\"Breadcrumb\" {...props} />\n))\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ── BreadcrumbList (ol) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):declarative items mode 啟用 auto-collapse + auto-separator + auto-page-end。\n * 對齊 Material UI source `Breadcrumbs.js renderItemsBeforeAndAfter` mechanism(`maxItems`\n * default 8;本 DS 採 user-tuned 4 — 更積極 collapse 適合 single-line 緊湊 layout)。\n */\n// code-quality-allow: dead-export — public consumer-facing item spec type;對齊 BreadcrumbProps API contract,允許 consumer 構造 items array 外部\nexport interface BreadcrumbItemSpec {\n  label: React.ReactNode\n  href?: string\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 業界慣例:Breadcrumb 首項用 Home icon 強化視覺錨點(Material / Atlassian)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT(sm/md=16, lg=20,對齊 uiSize.spec.md Icon Size Tier)。\n   * Consumer **不傳** size,DS 統一管。\n   */\n  startIcon?: LucideIcon\n}\n\ninterface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'children'> {\n  /**\n   * 字體尺寸 — 依據與之配對的 page title 選擇:\n   *   sm  → 配 text-h4(20) title (Dialog / panel / drawer)\n   *   md  → 配 text-h3(24) title (一般頁面 header,預設)\n   *   lg  → 配 text-h2(32) title (Detail page hero / landing)\n   */\n  size?: BreadcrumbSize\n  /**\n   * Declarative items mode(opt-in)。當 provided 時 `children` 被忽略,List 內部自動:\n   *  - 插 separator\n   *  - 末位 spec(無 `href`)自動 BreadcrumbPage(per Title-breadcrumb-end SSOT)\n   *  - 超 `maxItems` auto-collapse 中段成 BreadcrumbEllipsis + DropdownMenu(對齊 Material UI\n   *    source `renderItemsBeforeAndAfter`)\n   */\n  items?: BreadcrumbItemSpec[]\n  /**\n   * Auto-collapse 閾值。Default 4(user-tuned;Material UI source 預設 8)。`items.length > maxItems`\n   * 才 collapse。\n   */\n  maxItems?: number\n  /** Collapse 後保留首 N 個(default 1)。對齊 Material UI source default。 */\n  itemsBeforeCollapse?: number\n  /** Collapse 後保留末 N 個(default 1)。對齊 Material UI source default。 */\n  itemsAfterCollapse?: number\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — items props × children narrowing × collapse-with-overflow × tooltip 4 軸組合在 BreadcrumbList,拆 sub-fn 會跨 fn 傳 itemsBeforeCollapse/After collapsed-tooltip refs\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, size = 'md', items, maxItems = 4, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, children, ...props }, ref) => {\n    // Memoize provider value(2026-04-22 D3 perf audit):單 field wrapper memoize\n    const ctxValue = React.useMemo(() => ({ size }), [size])\n\n    // Declarative mode(items prop provided):自動 render + auto-collapse\n    const declarativeContent = React.useMemo(() => {\n      if (!items) return null\n      // 2026-07-04 修:非字串 label 的 key 原用 Math.random() → 每次 render 新 key 造成\n      // BreadcrumbItem unmount/remount(重置 TruncatedLabel ResizeObserver 與 state)→ 改 stable idx key\n      const renderItem = (spec: BreadcrumbItemSpec, role: 'root' | 'middle' | 'current', idx: number) => (\n        <BreadcrumbItem key={`${role}-${typeof spec.label === 'string' ? spec.label : idx}`} role={role}>\n          {role === 'current'\n            ? <BreadcrumbPage startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\n              </BreadcrumbPage>\n            : <BreadcrumbLink href={spec.href} asChild={spec.asChild} startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\n              </BreadcrumbLink>\n          }\n        </BreadcrumbItem>\n      )\n\n      const shouldCollapse = items.length > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)  // 末位永遠 ≥ 1(current page)\n\n      type VisibleItem = { spec: BreadcrumbItemSpec; role: 'root' | 'middle' | 'current' }\n      let visible: Array<VisibleItem | { ellipsisOf: BreadcrumbItemSpec[] }>\n      if (!shouldCollapse) {\n        visible = items.map((spec, i) => ({\n          spec,\n          role: i === 0 ? 'root' : (i === items.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n      } else {\n        const before = items.slice(0, beforeN).map((spec, i) => ({\n          spec,\n          role: (i === 0 ? 'root' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        const collapsed = items.slice(beforeN, items.length - afterN)\n        const after = items.slice(items.length - afterN).map((spec, i, arr) => ({\n          spec,\n          role: (i === arr.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        visible = [...before, { ellipsisOf: collapsed }, ...after]\n      }\n\n      // Interleave with separators\n      const rendered: React.ReactNode[] = []\n      visible.forEach((entry, i) => {\n        if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n        if ('ellipsisOf' in entry) {\n          rendered.push(\n            <BreadcrumbItem key=\"ellipsis\" role=\"ellipsis\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <BreadcrumbEllipsis />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"start\">\n                  {entry.ellipsisOf.map((s, j) => (\n                    <DropdownMenuItem key={j} asChild={!!s.href}>\n                      {s.href ? <a href={s.href}>{s.label}</a> : <span>{s.label}</span>}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </BreadcrumbItem>\n          )\n        } else {\n          rendered.push(renderItem(entry.spec, entry.role, i))\n        }\n      })\n      return rendered\n    }, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    // 2026-05-12 fix(user 抓 image 2 Deep story 違反 single-line + max-levels canonical):\n    // Compositional path 也走 auto-collapse + flex-shrink hierarchy。Walk children, 找\n    // BreadcrumbItem 並按 index 分派 role (first=root / last=current / middle=middle)。\n    // > maxItems 自動 collapse 中段成 ellipsis(對齊 declarative path canonical SSOT)。\n    const compositionalContent = React.useMemo(() => {\n      if (items) return null\n      const childArr = React.Children.toArray(children)\n      // 抓 BreadcrumbItem children(skip BreadcrumbSeparator — auto re-interleave)\n      // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):type-identity primary path + displayName fallback。\n      // 純 `displayName` check 在 HOC / React.memo / consumer alias 場景脆弱(production build / wrap\n      // 可能改寫 displayName)。`c.type === BreadcrumbItem` 是 React fiber reference-identity 最穩\n      // primary(對齊 Radix children-walk pattern);displayName fallback 給 HOC 場景。\n      const itemChildren = childArr.filter((c): c is React.ReactElement<BreadcrumbItemProps> =>\n        React.isValidElement(c) && (c.type === BreadcrumbItem ||\n          (c.type as React.ComponentType)?.displayName === 'BreadcrumbItem')\n      )\n      // 無 item 或全是 separator → pass-through(consumer raw children,e.g. spinners)\n      if (itemChildren.length === 0) return children\n      // Assign role by position; clone with role prop\n      const total = itemChildren.length\n      const cloneWithRole = (item: React.ReactElement<BreadcrumbItemProps>, idx: number, role: 'root' | 'middle' | 'current') =>\n        React.cloneElement(item, { role: item.props.role ?? role, key: `bc-${role}-${idx}` })\n      const shouldCollapse = total > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)\n      const rendered: React.ReactNode[] = []\n      if (!shouldCollapse) {\n        itemChildren.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n          const role: 'root' | 'middle' | 'current' = i === 0 ? 'root' : (i === total - 1 ? 'current' : 'middle')\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      } else {\n        // before(first N) + ellipsis + after(last M)\n        const beforeItems = itemChildren.slice(0, beforeN)\n        const collapsedItems = itemChildren.slice(beforeN, total - afterN)\n        const afterItems = itemChildren.slice(total - afterN)\n        beforeItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-bef-${i}`} />)\n          const role: 'root' | 'middle' = i === 0 ? 'root' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n        if (rendered.length > 0) rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-before\" />)\n        rendered.push(\n          <BreadcrumbItem key=\"bc-ellipsis\" role=\"ellipsis\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <BreadcrumbEllipsis />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                {collapsedItems.map((item, j) => {\n                  // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):consumer BreadcrumbItem children 常包\n                  // `<BreadcrumbLink href>` = anchor button-like。直接放進 `<DropdownMenuItem>` 會 nested\n                  // interactive(menuitem within button violates HTML / a11y)。Fix:extract href + label,\n                  // 用 `asChild` 把 anchor 接到 menuitem 對齊 declarative path line 245 canonical pattern。\n                  const innerChildren = (item.props as { children?: React.ReactNode }).children\n                  let href: string | undefined\n                  let label: React.ReactNode = innerChildren\n                  React.Children.forEach(innerChildren, (c) => {\n                    if (React.isValidElement<{ href?: string; children?: React.ReactNode }>(c)) {\n                      if (c.props.href) href = c.props.href\n                      if (c.props.children != null) label = c.props.children\n                    }\n                  })\n                  return href\n                    ? <DropdownMenuItem key={`collapsed-${j}`} asChild><a href={href}>{label}</a></DropdownMenuItem>\n                    : <DropdownMenuItem key={`collapsed-${j}`}>{label}</DropdownMenuItem>\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n        )\n        rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-after\" />)\n        afterItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-aft-${i}`} />)\n          const role: 'middle' | 'current' = i === afterItems.length - 1 ? 'current' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      }\n      return rendered\n    }, [items, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    return (\n    <BreadcrumbContext.Provider value={ctxValue}>\n      <ol\n        ref={ref}\n        // gap-1 (4px) — separator 與兩邊 items 間距;緊湊節奏,符合 breadcrumb 密集流動感。\n        // 2026-05-10 Phase A single-line canonical(per user + Material UI source verified):\n        //   `flex-nowrap` 不 wrap。長路徑走中段折疊。\n        // 2026-05-12 fix:compositional 也走 auto-collapse + role-assignment(`compositionalContent`)\n        //   → declarative / compositional 兩 path 都符合 single-line + max-levels + width 分配 canonical SSOT。\n        className={cn(\n          'flex flex-nowrap items-center gap-1 text-fg-secondary leading-compact min-w-0',\n          BREADCRUMB_TEXT_CLASS[size],\n          className\n        )}\n        {...props}\n      >\n        {items ? declarativeContent : compositionalContent}\n      </ol>\n    </BreadcrumbContext.Provider>\n    )\n  },\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ── BreadcrumbItem (li) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):`role` prop emit `data-bc-role` attr → CSS flex-shrink hierarchy。\n * Per BreadcrumbItem 在 row 中的角色決定 shrink 優先級:\n *   - `root`(首位)→ shrink:3(縮最積極;root context 可弱化)\n *   - `middle`(中段)→ shrink:2\n *   - `current`(末位 / page)→ shrink:1(最後縮;a11y current page anchor)\n *   - `ellipsis`(BreadcrumbEllipsis 包裝)→ shrink:0(永遠完整 ⋯)\n *\n * 設計回應 user 兩 challenges:\n *   (a) Root 也 truncate(shrink:3,不是 shrink-0)\n *   (b) 不用 fixed max-width — flex-shrink hierarchy 容器寬時自然展開不浪費空間,\n *       窄時按優先級縮 + TruncatedLabel 內部 CSS truncate + tooltip。\n */\ninterface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<'li'> {\n  role?: 'root' | 'middle' | 'current' | 'ellipsis'\n}\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, role, style, ...props }, ref) => {\n    // 2026-05-20 fix v3(user 抓「專案 後方多 4px 間距 / 我的新專案 沒有」chevron 不對稱):\n    //   v2 `minWidth: '2rem'`(32px)在寬容器強制 li ≥ 32px → 短 label「專案」(natural ~28px)\n    //   被撐 4px,長 label「我的新專案」(natural ~70px)hug content → chevron 兩側不對稱。\n    //\n    // v3 解法:minWidth `2rem` → `1.5rem`(24px)\n    //   數學:中文「X…」最小寬度 = 1 char(~14-16px)+ ellipsis(~6-8px)≈ 22-24px → 24px 剛 cover\n    //   結果:\n    //     - 寬容器:所有自然 label ≥ 24px → li hug content,chevron 緊貼,對稱(本 fix 主目的)\n    //     - 窄容器 truncate:shrink 不過 24px → 「X…」仍可見 ellipsis 保險\n    //     - 短英文「OK / ID」(natural ~20px)→ 多 ~4px(原 12px → 縮到 4px,顯著改善)\n    //   對齊 user verbatim「minWidth 再調小一點」+ ellipsis 數學最小值。\n    const shrinkStyle: React.CSSProperties = role === 'root' ? { flexShrink: 3, minWidth: '1.5rem' }\n      : role === 'middle' ? { flexShrink: 2, minWidth: '1.5rem' }\n      : role === 'current' ? { flexShrink: 1, minWidth: '1.5rem' }\n      : role === 'ellipsis' ? { flexShrink: 0 }\n      : {}\n    return (\n      <li\n        ref={ref}\n        data-bc-role={role}\n        className={cn('inline-flex items-center min-w-0', className)}\n        style={{ ...shrinkStyle, ...style }}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ── BreadcrumbLink (a) ───────────────────────────────────────────────────────\n\ninterface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** 將樣式套用至子元件(e.g. React Router Link) */\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT,DS 統一尺寸不允許 consumer override。\n   * 對齊 uiSize.spec.md Icon Size Tier(2026-05-18 撤回 14 例外,統一 16/16/20)。\n   */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(user 抓 image 2 Deep story 麵包屑沒符合 single-line + truncate canonical):\n    // 純文字 children → auto-wrap TruncatedLabel(canonical「single-line + ellipsis + tooltip\n    // on truncate」per spec.md / Polaris breadcrumb)。Non-string children(consumer 自訂 icon+text\n    // 結構)→ pass-through 不 force-wrap(consumer own truncate)。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\n      : children\n    const sharedClassName = cn(\n      'inline-flex items-center gap-2',\n      'min-w-0 max-w-full',\n      'text-fg-secondary',\n      'hover:text-primary-hover',\n      'transition-colors duration-150',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n      'rounded-md',\n      className\n    )\n    // 2026-05-25 fix(user 抓 Breadcrumb asChild story React.Children.only runtime fail):\n    // Radix Slot 規範 children 必為單 element;原 unified Comp render 在 asChild path 內\n    // 仍輸出「{StartIcon && ...} + {wrappedChildren}」雙 JSX expression → Slot 收到 array\n    // → React.Children.only(array) throws「expected to receive a single React element child」。\n    // 分支 render 解 — asChild path 只傳 consumer-supplied child(icon 由 consumer 自管,\n    // 對齊 Radix Slot canonical「single child contract」);非 asChild path 維持原 native\n    // <a> + DS-controlled icon + wrapped label。\n    if (asChild) {\n      return (\n        <Slot ref={ref} className={sharedClassName} {...props}>\n          {wrappedChildren}\n        </Slot>\n      )\n    }\n    return (\n      <a ref={ref} className={sharedClassName} {...props}>\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </a>\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ── BreadcrumbPage (current, non-clickable) ──────────────────────────────────\n\ninterface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<'span'> {\n  /** 起始 icon。內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT。對齊 BreadcrumbLink. */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(同 BreadcrumbLink):純文字 children → auto-wrap TruncatedLabel。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\n      : children\n    return (\n      <span\n        ref={ref}\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('inline-flex items-center gap-2 min-w-0 max-w-full text-foreground', className)}\n        {...props}\n      >\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </span>\n    )\n  }\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ── BreadcrumbSeparator ──────────────────────────────────────────────────────\n\ninterface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ children, className, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        // Phase B(2026-05-10):separator 永遠 shrink-0(必完整顯示,否則 path 視覺斷裂)\n        className={cn('inline-flex items-center text-fg-muted shrink-0', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight size={BREADCRUMB_ICON_SIZE[size]} aria-hidden />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ── BreadcrumbEllipsis ───────────────────────────────────────────────────────\n\n/**\n * BreadcrumbEllipsis — 折疊路徑的 \"⋯\" 按鈕\n *\n * 2026-05-10 重寫:消費 `ItemInlineActionButton`(primitive SSOT)取代自刻 `<button>`。\n * Per inline-action.spec.md L106-131 predicate Q1+Q2+Q3 全指向 Inline Action:\n *   - Q1 點了要做事嗎?是(展開折疊路徑 dropdown)\n *   - Q2 位置?BreadcrumbList row inline flow(host 內)\n *   - Q3 row 多大?14-16px text row(compact tier)→ Inline Action\n * + 對齊 M1「視覺決策前必消費 SSOT」+ Mindset #2「優先消費既有」。\n *\n * 配合 DropdownMenuTrigger asChild 使用:\n *\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <BreadcrumbEllipsis />\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem asChild><a href=\"/org\">組織</a></DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n *\n * `overlayTrigger=true` 視覺鎖:DropdownMenu open 期間 button 維持 hover bg(對齊\n * shadcn / Radix Themes / Material 的 overlay trigger canonical,inline-action.spec.md\n * 「Overlay trigger canonical」段)。\n */\ntype BreadcrumbEllipsisProps = Omit<React.ComponentPropsWithoutRef<typeof ItemInlineActionButton>, 'icon' | 'size'>\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(\n  ({ 'aria-label': ariaLabel = '顯示折疊路徑' /* i18n-allow: DS default; consumer override via aria-label prop */, ...props }, ref) => {\n    return (\n      <ItemInlineActionButton\n        ref={ref}\n        icon={MoreHorizontal}\n        size=\"md\"  // Breadcrumb 不在 RowSizeProvider 樹內,固定 md(16px icon + 18px hover bg,對齊 inline-action.spec.md 尺寸表)\n        aria-label={ariaLabel}\n        overlayTrigger\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\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 breadcrumbMeta = {\n  component: 'Breadcrumb',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n    // 值源 = code SSOT:BREADCRUMB_SIZE_TEXT(sm/md=text-body, lg=text-body-lg)+ BREADCRUMB_ICON_SIZE(sm/md=16, lg=20)。\n    // Breadcrumb 是文字列無固定高度 token,故不列 height(對照 Tag meta 有自身 h-* 才列)。\n    sm: { iconSize: 16, typography: 'body' },\n    md: { iconSize: 16, typography: 'body' },\n    lg: { iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\nexport type { BreadcrumbSize, BreadcrumbListProps, BreadcrumbEllipsisProps }\n// BreadcrumbItemSpec 已在上方 `export interface BreadcrumbItemSpec` 直接 export\n"],"names":[],"mappings":"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"}

package/dist/components/BulkActionBar/bulk-action-bar.d.ts

@@ -3,7 +3,10 @@ export interface BulkActionBarLabels {
     count: (n: number) => string;
     clear: string;
     hiddenSuffix: (hidden: number) => string;
+    /** @deprecated 2026-07-06 role 已降級 "group"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */
     toolbarAriaLabel: string;
+    /** root `role="group"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */
+    ariaLabel?: string;
 }
 export declare const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels;
 export interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -13,7 +16,7 @@ export interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement>
     onClear?: () => void;
     /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */
     actions?: React.ReactNode;
-    /** Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 */
+    /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */
     hiddenByFilter?: number;
     /**
      * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar

package/dist/components/BulkActionBar/bulk-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,gBAAgB,EAAE,MAAM,CAAA;CACzB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,sFAAsF;IACtF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAmElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,8GAA8G;IAC9G,gBAAgB,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,sFAAsF;IACtF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAsElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/BulkActionBar/bulk-action-bar.js

@@ -21,8 +21,8 @@ const BulkActionBar = React.forwardRef(
       "div",
       {
         ref,
-        role: "toolbar",
-        "aria-label": labels.toolbarAriaLabel,
+        role: "group",
+        "aria-label": labels.ariaLabel ?? labels.toolbarAriaLabel,
         className: cn(
           "flex items-center gap-2",
           "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",

package/dist/components/BulkActionBar/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  toolbarAriaLabel: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClear?: () => void\n  /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        role=\"toolbar\"\n        aria-label={labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...props}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClear && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClear}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec L90 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA2BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,SAAS,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GACpG,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,QAAI,UAAU,WAAW,MAAM,iBAAiB,OAAO,EAAG,QAAO;AAEjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,OAAO;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}
+{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  /** @deprecated 2026-07-06 role 已降級 \"group\"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */\n  toolbarAriaLabel: string\n  /** root `role=\"group\"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */\n  ariaLabel?: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClear?: () => void\n  /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        // 2026-07-06 user 拍板:role \"toolbar\" → \"group\" — 原宣告 toolbar 但未實作 APG toolbar\n        // 方向鍵 roving 契約(AT 告知「工具列」但方向鍵無反應 = 空承諾);group 語意誠實,\n        // Tab 序照 DOM(spec 本有 canonical),Gmail / Linear bulk bar 實務同款。\n        role=\"group\"\n        aria-label={labels.ariaLabel ?? labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...props}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClear && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClear}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec「Count text color canonical」表 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA8BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,SAAS,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GACpG,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,QAAI,UAAU,WAAW,MAAM,iBAAiB,OAAO,EAAG,QAAO;AAEjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAIA,MAAK;AAAA,QACL,cAAY,OAAO,aAAa,OAAO;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}

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

@@ -129,7 +129,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * - Clear → 欄位清空,用 Inline Action
      * - Remove → collection 移除,用一般 Button / Inline Action
      *
-     * 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/item-anatomy.spec.md
+     * 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/inline-action.spec.md
      * 「Dismiss canonical — X close only」段。
      */
     dismiss?: boolean;
@@ -190,10 +190,10 @@ export declare const buttonMeta: {
             readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "active", "pressed", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["--primary", "--primary-hover", "--primary-active", "--bg-disabled"];
-        readonly fg: readonly ["--on-emphasis", "--fg-disabled"];
+        readonly bg: readonly ["--primary", "--primary-hover", "--primary-active", "--primary-subtle", "--bg-disabled", "--surface", "--neutral-hover", "--neutral-active", "--neutral-selected"];
+        readonly fg: readonly ["--on-emphasis", "--fg-disabled", "--foreground", "--primary", "--error", "--error-hover", "--error-active"];
         readonly ring: readonly ["--ring"];
     };
     readonly defaultVariant: "tertiary";

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;;;;;8EAkKnB,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,CAAA;IAChE,kFAAkF;IAClF,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;AAcD,QAAA,MAAM,MAAM,uFA0KX,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;;;;;8EAoKnB,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,CAAA;IAChE,kFAAkF;IAClF,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;AAcD,QAAA,MAAM,MAAM,uFA6MX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/Button/button.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -143,7 +143,9 @@ const buttonVariants = cva(
           "data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent",
           // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)
           "aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent",
-          "aria-pressed:hover:text-primary-hover"
+          "aria-pressed:hover:text-primary-hover",
+          // 2026-07-07 補齊第三階:fallback 分支與 data-[state=on] 分支同拼寫(選中之上按壓 = active 階)
+          "aria-pressed:active:text-primary-active"
         ]
       },
       // neutral tone:灰底(neutral-selected family)— sidebar/contextual nav pressed
@@ -163,7 +165,7 @@ const buttonVariants = cva(
     ],
     defaultVariants: {
       // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。
-      // 真正預設邏輯在元件 resolvedVariant(L394);此 cva default 供直接 buttonVariants() 呼叫者一致。
+      // 真正預設邏輯在元件內 resolvedVariant(相對指法,免行號漂移);此 cva default 供直接 buttonVariants() 呼叫者一致。
       variant: "tertiary",
       size: "md",
       pressedTone: "emphasis"
@@ -216,19 +218,69 @@ const Button = React.forwardRef(
     const { "aria-label": ariaLabel, ...restProps } = props;
     const toggleAttrs = pressed === void 0 ? {} : { "aria-pressed": pressed, "data-state": pressed ? "on" : "off" };
     const unboundedAttr = resolvedVariant === "text" || dismiss ? { "data-unbounded": "true" } : {};
-    const buttonEl = /* @__PURE__ */ jsxs(
+    const nativeChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+      loading ? /* @__PURE__ */ jsx(CircularProgress, { size: iconSize, className: "text-current" }) : StartIcon ? resolvedIconOnly && overlayBadge ? (
+        // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner
+        // (Material BadgedBox / iOS App icon),不是 button chrome 角。
+        //
+        // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`
+        // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span
+        // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button
+        // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "relative inline-block leading-none shrink-0 pointer-events-none",
+            style: { width: iconSize, height: iconSize },
+            children: [
+              /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto", children: overlayBadge })
+            ]
+          }
+        )
+      ) : /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }) : null,
+      children != null && /* @__PURE__ */ jsx("span", { className: "px-1", children }),
+      hasSuffix && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        badge,
+        EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconSize, "aria-hidden": true })
+      ] })
+    ] });
+    const sharedClassName = cn(
+      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,
+      // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground
+      // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)
+      dismiss && "text-fg-muted hover:text-foreground",
+      resolvedFullWidth && "w-full"
+    );
+    const { onClick: slotConsumerOnClick, ...slotRest } = restProps;
+    const buttonEl = asChild ? (
+      // Slot 分支:children 必為單一 consumer element(React.Children.only),
+      // 內部 slot(loading/startIcon/badge)不渲染;不硬塞 type/disabled(consumer child 可能是 <a>)。
+      /* @__PURE__ */ jsx(
+        Comp,
+        {
+          className: sharedClassName,
+          ref,
+          "aria-label": ariaLabel,
+          "aria-busy": loading || void 0,
+          "aria-disabled": disabled || loading || void 0,
+          onClick: disabled || loading ? (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          } : slotConsumerOnClick,
+          ...toggleAttrs,
+          ...unboundedAttr,
+          ...slotRest,
+          children
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
       Comp,
       {
-        className: cn(
-          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,
-          // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground
-          // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)
-          dismiss && "text-fg-muted hover:text-foreground",
-          resolvedFullWidth && "w-full"
-        ),
+        className: sharedClassName,
         ref,
         type: "button",
         disabled: disabled || loading,
@@ -237,33 +289,7 @@ const Button = React.forwardRef(
         ...toggleAttrs,
         ...unboundedAttr,
         ...restProps,
-        children: [
-          loading ? /* @__PURE__ */ jsx(CircularProgress, { size: iconSize, className: "text-current" }) : StartIcon ? resolvedIconOnly && overlayBadge ? (
-            // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner
-            // (Material BadgedBox / iOS App icon),不是 button chrome 角。
-            //
-            // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`
-            // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span
-            // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button
-            // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。
-            /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "relative inline-block leading-none shrink-0 pointer-events-none",
-                style: { width: iconSize, height: iconSize },
-                children: [
-                  /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }),
-                  /* @__PURE__ */ jsx("span", { className: "absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto", children: overlayBadge })
-                ]
-              }
-            )
-          ) : /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }) : null,
-          children != null && /* @__PURE__ */ jsx("span", { className: "px-1", children }),
-          hasSuffix && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-            badge,
-            EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconSize, "aria-hidden": true })
-          ] })
-        ]
+        children: nativeChildren
       }
     );
     if (resolvedIconOnly && typeof ariaLabel === "string" && !asChild) {
@@ -293,10 +319,13 @@ const buttonMeta = {
     md: { fieldHeight: 32, iconSize: 16, typography: "body" },
     lg: { fieldHeight: 36, iconSize: 20, typography: "body-lg" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'pressed' = toggle on 持續態(data-[state=on],emphasis 淡藍底/neutral 灰底;2026-07-07 meta 詞彙統一補列)
+  states: ["default", "hover", "active", "pressed", "focus-visible", "disabled"],
   tokens: {
-    bg: ["--primary", "--primary-hover", "--primary-active", "--bg-disabled"],
-    fg: ["--on-emphasis", "--fg-disabled"],
+    // 2026-07-04 audit 補齊:原只列 primary variant 家族;按 buttonVariants cva 真實 class 補
+    // secondary/tertiary/text/link/danger 消費的 token(auto-compile token 矩陣依此)
+    bg: ["--primary", "--primary-hover", "--primary-active", "--primary-subtle", "--bg-disabled", "--surface", "--neutral-hover", "--neutral-active", "--neutral-selected"],
+    fg: ["--on-emphasis", "--fg-disabled", "--foreground", "--primary", "--error", "--error-hover", "--error-active"],
     ring: ["--ring"]
   },
   defaultVariant: "tertiary",