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

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

@@ -11,18 +11,18 @@ const BULK_ACTION_BAR_DEFAULT_LABELS = {
   toolbarAriaLabel: "批次操作"
 };
 const BulkActionBar = React.forwardRef(
-  function BulkActionBar2({ selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props }, ref) {
+  function BulkActionBar2({ selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props }, ref) {
     const labels = React.useMemo(
       () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),
       [labelsOverride]
     );
-    if (selection.length === 0) return null;
+    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null;
     return /* @__PURE__ */ jsxs(
       "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)]",
@@ -32,7 +32,7 @@ const BulkActionBar = React.forwardRef(
         ),
         ...props,
         children: [
-          onClear && /* @__PURE__ */ jsx(
+          onClearSelection && /* @__PURE__ */ jsx(
             Button,
             {
               variant: "text",
@@ -41,10 +41,10 @@ const BulkActionBar = React.forwardRef(
               dismiss: true,
               startIcon: X,
               "aria-label": labels.clear,
-              onClick: onClear
+              onClick: onClearSelection
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "text-body text-foreground tabular-nums", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-body text-foreground font-medium tabular-nums", "aria-live": "polite", "aria-atomic": "true", children: [
             labels.count(typeof totalSelected === "number" ? totalSelected : selection.length),
             hiddenByFilter !== void 0 && hiddenByFilter > 0 && /* @__PURE__ */ jsxs("span", { className: "text-fg-muted font-normal", children: [
               " ",
@@ -66,7 +66,7 @@ const bulkActionBarMeta = {
   sizes: {},
   states: ["default"],
   tokens: {
-    fg: ["text-fg-secondary", "text-fg-muted"],
+    fg: ["text-foreground", "text-fg-muted"],
     border: ["border-divider"]
   }
 };

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=sm,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 sm)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 description 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 提供 sm 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//   全 sm 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// description={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    if (selection.length === 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        <span className=\"text-body text-foreground tabular-nums\">\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 提供 sm 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-fg-secondary', '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;AAIjB,QAAI,UAAU,WAAW,EAAG,QAAO;AAEnC,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,UASb,qBAAC,QAAA,EAAK,WAAU,0CAEb,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,qBAAqB,eAAe;AAAA,IACzC,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  onClearSelection?: () => void\n  /** 批次 actions(consumer 提供 md Button,一律 variant=tertiary；不用 primary/danger) */\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, onClearSelection, 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        {onClearSelection && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClearSelection}\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,kBAAkB,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GAC7G,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,oBACC;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/BulkActionBar/index.d.ts

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

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

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

package/dist/components/BulkActionBar/index.js

@@ -0,0 +1,7 @@
+import { BULK_ACTION_BAR_DEFAULT_LABELS, BulkActionBar, bulkActionBarMeta } from "./bulk-action-bar.js";
+export {
+  BULK_ACTION_BAR_DEFAULT_LABELS,
+  BulkActionBar,
+  bulkActionBarMeta
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -20,22 +20,48 @@ import * as React from 'react';
  * </ButtonGroup>
  *
  * // 垂直排列（fullWidth 自動套用）
- * <ButtonGroup direction="vertical">
+ * <ButtonGroup orientation="vertical">
  *   <Button variant="primary">確認</Button>
  *   <Button variant="tertiary">取消</Button>
  * </ButtonGroup>
  */
 interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 排列方向，預設 horizontal */
-    direction?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical';
     /** 水平對齊，預設 start */
     align?: 'start' | 'center' | 'end';
 }
 declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 群組排列方向。橫排群組畫直線（預設），直排群組畫橫線。寫死方向會讓
+     * `<ButtonGroup orientation="vertical">` 出現方向錯誤的線。
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * 是否對輔助科技宣告語意。預設 `true`（純視覺）→ `role="none"`，與 Separator primitive
+     * 預設一致（separator.spec.md:102「純視覺分隔，SR 不朗讀」）。動作群組的分組語意已由排列
+     * 順序與間距表達，線本身不切分內容，故不朗讀。
+     */
+    decorative?: boolean;
+}
 /**
- * ButtonDivider — 按鈕群組內的分隔線
+ * ButtonDivider — action region 群組分隔線
+ *
+ * **幾何 SSOT** → `patterns/action-bar/action-bar.spec.md`「分隔線幾何」：
+ * 線長 = 所在那一列**最高元件**的高度 − `--action-divider-inset`（8px），不短於
+ * `--action-divider-min`（16px），垂直置中。
+ *
+ * 兩層構造是必要的而非包裝：外層 `self-stretch` 取「該列最高元件」當基準——同一列的每條線
+ * 因此必然等長、不會參差；內層畫線並套 inset 與地板，置中由外層 `items-center` 負責，所以
+ * 地板生效時線仍置中。單層寫法（`self-stretch` + `min-h`）會被釘在行首，地板一啟動線就歪掉。
+ * 外層佔位與舊寫法完全相同，改動不位移任何同列元素。
+ *
+ * **前提**：必須放在自動高度的 cluster 內。直接置於固定高度容器（如 48px chrome header）時
+ * 基準會退化成容器高——CSS 無法在容器有明確高度時看見「最高手足」。由
+ * `scripts/test-action-divider-placement.mjs` 機械把關。
  *
- * 自身左右各 4px，與相鄰按鈕形成 8px（gap）+ 4px（自身）= 12px 的視覺距離。
+ * **水平間距**：自身兩端各 4px，與 `gap-2` 容器合成 12px 視覺距離。
  *
  * @example
  * <ButtonGroup>
@@ -44,6 +70,6 @@ declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & Re
  *   <Button variant="primary" danger size="sm" iconOnly startIcon={Trash2} aria-label="刪除" />
  * </ButtonGroup>
  */
-declare const ButtonDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ButtonDivider: React.ForwardRefExoticComponent<ButtonDividerProps & React.RefAttributes<HTMLDivElement>>;
 export { ButtonGroup, ButtonDivider };
 //# sourceMappingURL=button-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,yBAAyB;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACnC;AAMD,QAAA,MAAM,WAAW,yFAsBhB,CAAA;AAGD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,aAAa,6GAcjB,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,yBAAyB;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACnC;AAMD,QAAA,MAAM,WAAW,yFAsBhB,CAAA;AAGD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,aAAa,2FA8BlB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Button/button-group.js

@@ -5,8 +5,8 @@ import { ButtonGroupContext } from "./button.js";
 const BUTTON_GROUP_CTX_VERTICAL = { fullWidth: true };
 const BUTTON_GROUP_CTX_HORIZONTAL = { fullWidth: false };
 const ButtonGroup = React.forwardRef(
-  ({ direction = "horizontal", align = "start", className, children, ...props }, ref) => {
-    const isVertical = direction === "vertical";
+  ({ orientation = "horizontal", align = "start", className, children, ...props }, ref) => {
+    const isVertical = orientation === "vertical";
     return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: isVertical ? BUTTON_GROUP_CTX_VERTICAL : BUTTON_GROUP_CTX_HORIZONTAL, children: /* @__PURE__ */ jsx(
       "div",
       {
@@ -25,19 +25,36 @@ const ButtonGroup = React.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-const ButtonDivider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    role: "separator",
-    className: cn(
-      "self-stretch w-px mx-1 my-1",
-      "bg-divider",
-      className
-    ),
-    ...props
+const ButtonDivider = React.forwardRef(
+  ({ className, orientation = "vertical", decorative = true, ...props }, ref) => {
+    const isVertical = orientation === "vertical";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: decorative ? "none" : "separator",
+        "aria-orientation": decorative ? void 0 : orientation,
+        "data-orientation": orientation,
+        "data-action-divider": "",
+        className: cn(
+          "flex shrink-0 self-stretch",
+          isVertical ? "w-px mx-1 items-center" : "h-px my-1 justify-center",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-divider",
+              isVertical ? "w-px h-[calc(100%-var(--action-divider-inset))] min-h-[var(--action-divider-min)]" : "h-px w-[calc(100%-var(--action-divider-inset))] min-w-[var(--action-divider-min)]"
+            )
+          }
+        )
+      }
+    );
   }
-));
+);
 ButtonDivider.displayName = "ButtonDivider";
 export {
   ButtonDivider,

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../../src/components/Button/button-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { ButtonGroupContext } from './button'\n\n/**\n * ButtonGroup — 按鈕群組容器\n *\n * 負責群組內的間距（gap 8px）與對齊方式。\n * 垂直排列時透過 ButtonGroupContext 讓所有直接子 Button 自動套用 fullWidth，\n * 無需 cloneElement — 符合 shadcn 的 Context 慣例。\n *\n * @example\n * // 水平排列（預設）\n * <ButtonGroup>\n *   <Button variant=\"primary\">確認</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n * </ButtonGroup>\n *\n * // 靠右對齊（primary 放右側）\n * <ButtonGroup align=\"end\">\n *   <Button variant=\"tertiary\">取消</Button>\n *   <Button variant=\"primary\">確認</Button>\n * </ButtonGroup>\n *\n * // 垂直排列（fullWidth 自動套用）\n * <ButtonGroup direction=\"vertical\">\n *   <Button variant=\"primary\">確認</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n * </ButtonGroup>\n */\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 排列方向，預設 horizontal */\n  direction?: 'horizontal' | 'vertical'\n  /** 水平對齊，預設 start */\n  align?: 'start' | 'center' | 'end'\n}\n\n// Module-level 常數(2026-04-22 D3 perf audit):provider value 為 2 狀態 boolean,hoist 避免 render 重建\nconst BUTTON_GROUP_CTX_VERTICAL = { fullWidth: true } as const\nconst BUTTON_GROUP_CTX_HORIZONTAL = { fullWidth: false } as const\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ direction = 'horizontal', align = 'start', className, children, ...props }, ref) => {\n    const isVertical = direction === 'vertical'\n\n    return (\n      <ButtonGroupContext.Provider value={isVertical ? BUTTON_GROUP_CTX_VERTICAL : BUTTON_GROUP_CTX_HORIZONTAL}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-2',\n            isVertical ? 'flex-col items-stretch' : 'flex-row items-center flex-wrap',\n            !isVertical && align === 'center' && 'justify-center',\n            !isVertical && align === 'end'    && 'justify-end',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\n/**\n * ButtonDivider — 按鈕群組內的分隔線\n *\n * 自身左右各 4px，與相鄰按鈕形成 8px（gap）+ 4px（自身）= 12px 的視覺距離。\n *\n * @example\n * <ButtonGroup>\n *   <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Settings} aria-label=\"設定\" />\n *   <ButtonDivider />\n *   <Button variant=\"primary\" danger size=\"sm\" iconOnly startIcon={Trash2} aria-label=\"刪除\" />\n * </ButtonGroup>\n */\nconst ButtonDivider = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"separator\"\n    className={cn(\n      'self-stretch w-px mx-1 my-1',\n      'bg-divider',\n      className,\n    )}\n    {...props}\n  />\n))\nButtonDivider.displayName = 'ButtonDivider'\n\nexport { ButtonGroup, ButtonDivider }\n"],"names":[],"mappings":";;;;AAsCA,MAAM,4BAA4B,EAAE,WAAW,KAAA;AAC/C,MAAM,8BAA8B,EAAE,WAAW,MAAA;AAEjD,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,YAAY,cAAc,QAAQ,SAAS,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,aAAa,cAAc;AAEjC,+BACG,mBAAmB,UAAnB,EAA4B,OAAO,aAAa,4BAA4B,6BAC3E,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,2BAA2B;AAAA,UACxC,CAAC,cAAc,UAAU,YAAY;AAAA,UACrC,CAAC,cAAc,UAAU,SAAY;AAAA,UACrC;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAc1B,MAAM,gBAAgB,MAAM,WAG1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,MAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AACD,cAAc,cAAc;"}
+{"version":3,"file":"button-group.js","sources":["../../../src/components/Button/button-group.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { ButtonGroupContext } from './button'\n\n/**\n * ButtonGroup — 按鈕群組容器\n *\n * 負責群組內的間距（gap 8px）與對齊方式。\n * 垂直排列時透過 ButtonGroupContext 讓所有直接子 Button 自動套用 fullWidth，\n * 無需 cloneElement — 符合 shadcn 的 Context 慣例。\n *\n * @example\n * // 水平排列（預設）\n * <ButtonGroup>\n *   <Button variant=\"primary\">確認</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n * </ButtonGroup>\n *\n * // 靠右對齊（primary 放右側）\n * <ButtonGroup align=\"end\">\n *   <Button variant=\"tertiary\">取消</Button>\n *   <Button variant=\"primary\">確認</Button>\n * </ButtonGroup>\n *\n * // 垂直排列（fullWidth 自動套用）\n * <ButtonGroup orientation=\"vertical\">\n *   <Button variant=\"primary\">確認</Button>\n *   <Button variant=\"tertiary\">取消</Button>\n * </ButtonGroup>\n */\ninterface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 排列方向，預設 horizontal */\n  orientation?: 'horizontal' | 'vertical'\n  /** 水平對齊，預設 start */\n  align?: 'start' | 'center' | 'end'\n}\n\n// Module-level 常數(2026-04-22 D3 perf audit):provider value 為 2 狀態 boolean,hoist 避免 render 重建\nconst BUTTON_GROUP_CTX_VERTICAL = { fullWidth: true } as const\nconst BUTTON_GROUP_CTX_HORIZONTAL = { fullWidth: false } as const\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({ orientation = 'horizontal', align = 'start', className, children, ...props }, ref) => {\n    const isVertical = orientation === 'vertical'\n\n    return (\n      <ButtonGroupContext.Provider value={isVertical ? BUTTON_GROUP_CTX_VERTICAL : BUTTON_GROUP_CTX_HORIZONTAL}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-2',\n            isVertical ? 'flex-col items-stretch' : 'flex-row items-center flex-wrap',\n            !isVertical && align === 'center' && 'justify-center',\n            !isVertical && align === 'end'    && 'justify-end',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport interface ButtonDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 群組排列方向。橫排群組畫直線（預設），直排群組畫橫線。寫死方向會讓\n   * `<ButtonGroup orientation=\"vertical\">` 出現方向錯誤的線。\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * 是否對輔助科技宣告語意。預設 `true`（純視覺）→ `role=\"none\"`，與 Separator primitive\n   * 預設一致（separator.spec.md:102「純視覺分隔，SR 不朗讀」）。動作群組的分組語意已由排列\n   * 順序與間距表達，線本身不切分內容，故不朗讀。\n   */\n  decorative?: boolean\n}\n\n/**\n * ButtonDivider — action region 群組分隔線\n *\n * **幾何 SSOT** → `patterns/action-bar/action-bar.spec.md`「分隔線幾何」：\n * 線長 = 所在那一列**最高元件**的高度 − `--action-divider-inset`（8px），不短於\n * `--action-divider-min`（16px），垂直置中。\n *\n * 兩層構造是必要的而非包裝：外層 `self-stretch` 取「該列最高元件」當基準——同一列的每條線\n * 因此必然等長、不會參差；內層畫線並套 inset 與地板，置中由外層 `items-center` 負責，所以\n * 地板生效時線仍置中。單層寫法（`self-stretch` + `min-h`）會被釘在行首，地板一啟動線就歪掉。\n * 外層佔位與舊寫法完全相同，改動不位移任何同列元素。\n *\n * **前提**：必須放在自動高度的 cluster 內。直接置於固定高度容器（如 48px chrome header）時\n * 基準會退化成容器高——CSS 無法在容器有明確高度時看見「最高手足」。由\n * `scripts/test-action-divider-placement.mjs` 機械把關。\n *\n * **水平間距**：自身兩端各 4px，與 `gap-2` 容器合成 12px 視覺距離。\n *\n * @example\n * <ButtonGroup>\n *   <Button variant=\"text\" size=\"sm\" iconOnly startIcon={Settings} aria-label=\"設定\" />\n *   <ButtonDivider />\n *   <Button variant=\"primary\" danger size=\"sm\" iconOnly startIcon={Trash2} aria-label=\"刪除\" />\n * </ButtonGroup>\n */\nconst ButtonDivider = React.forwardRef<HTMLDivElement, ButtonDividerProps>(\n  ({ className, orientation = 'vertical', decorative = true, ...props }, ref) => {\n    const isVertical = orientation === 'vertical'\n    return (\n      <div\n        ref={ref}\n        role={decorative ? 'none' : 'separator'}\n        aria-orientation={decorative ? undefined : orientation}\n        data-orientation={orientation}\n        // 穩定標記:讓像素量測(scripts/measure-action-dividers.mjs)只鎖 action region 群組線,\n        // 不會誤抓版面切分家族(DataTable 欄界 / 欄寬把手 / Steps connector — 那些不適用本幾何)。\n        data-action-divider=\"\"\n        className={cn(\n          'flex shrink-0 self-stretch',\n          isVertical ? 'w-px mx-1 items-center' : 'h-px my-1 justify-center',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'bg-divider',\n            isVertical\n              ? 'w-px h-[calc(100%-var(--action-divider-inset))] min-h-[var(--action-divider-min)]'\n              : 'h-px w-[calc(100%-var(--action-divider-inset))] min-w-[var(--action-divider-min)]',\n          )}\n        />\n      </div>\n    )\n  },\n)\nButtonDivider.displayName = 'ButtonDivider'\n\nexport { ButtonGroup, ButtonDivider }\n"],"names":[],"mappings":";;;;AAsCA,MAAM,4BAA4B,EAAE,WAAW,KAAA;AAC/C,MAAM,8BAA8B,EAAE,WAAW,MAAA;AAEjD,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,cAAc,cAAc,QAAQ,SAAS,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AACvF,UAAM,aAAa,gBAAgB;AAEnC,+BACG,mBAAmB,UAAnB,EAA4B,OAAO,aAAa,4BAA4B,6BAC3E,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,2BAA2B;AAAA,UACxC,CAAC,cAAc,UAAU,YAAY;AAAA,UACrC,CAAC,cAAc,UAAU,SAAY;AAAA,UACrC;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAyC1B,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,cAAc,YAAY,aAAa,MAAM,GAAG,MAAA,GAAS,QAAQ;AAC7E,UAAM,aAAa,gBAAgB;AACnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,aAAa,SAAS;AAAA,QAC5B,oBAAkB,aAAa,SAAY;AAAA,QAC3C,oBAAkB;AAAA,QAGlB,uBAAoB;AAAA,QACpB,WAAW;AAAA,UACT;AAAA,UACA,aAAa,2BAA2B;AAAA,UACxC;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,aACI,sFACA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AACA,cAAc,cAAc;"}

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

@@ -12,7 +12,7 @@ import type { LucideIcon } from 'lucide-react';
  *   link       外觀像連結的按鈕（本質仍是 button）
  *
  * ── danger prop ──
- *   danger     套用在任何 variant 上，將顏色改為危險色（紅色）
+ *   danger     套用危險色（紅色）；僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）
  *
  *   <Button variant="primary" danger>永久刪除</Button>        → 紅底白字（立即不可逆）
  *   <Button variant="secondary" danger>移至垃圾桶</Button>    → 紅框紅字（點下去還可反悔）
@@ -22,7 +22,7 @@ import type { LucideIcon } from 'lucide-react';
  *   僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：
  *     - secondary + pressed → primary-subtle 底、primary 字、透明邊框
  *     - tertiary  + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）
- *     - text      + pressed → neutral-selected 底，hover 反向變淺，:active 深一階
+ *     - text      + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底
  *   primary / link 傳入 pressed 無視覺效果（語意不符）
  *
  * ── Sizes（預設 md）──
@@ -49,14 +49,15 @@ import type { LucideIcon } from 'lucide-react';
  *   <Button asChild><Link to="/home">回首頁</Link></Button>
  */
 declare const buttonVariants: (props?: ({
-    variant?: "text" | "link" | "primary" | "secondary" | "tertiary" | null | undefined;
+    variant?: "text" | "link" | "secondary" | "primary" | "tertiary" | null | undefined;
     danger?: boolean | null | undefined;
-    pressedTone?: "emphasis" | "neutral" | null | undefined;
+    pressedTone?: "neutral" | "emphasis" | null | undefined;
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonGroupContextValue {
     fullWidth?: boolean;
 }
+/** @internal — ButtonGroup↔Button 私有 context(fullWidth 注入);consumer 不直接 import,經 <ButtonGroup> 消費。root barrel 排除(subpath 仍可 wrap 後用)。 */
 declare const ButtonGroupContext: React.Context<ButtonGroupContextValue>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'danger'> {
     /**
@@ -72,8 +73,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * 按鈕視覺強調等級。
      * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。
      */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link' | (string & {});
-    /** 套用危險色（紅色）。可與任何 variant 組合使用。 */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
+    /** 套用危險色（紅色）。僅 primary / secondary / text 支援（tertiary / link 不支援，見 spec 禁止事項）。 */
     danger?: boolean;
     /**
      * Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：
@@ -119,7 +120,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * 自動套用:
      * - `variant="text"`(強制 override 其他 variant)
      * - `iconOnly=true`(強制)
-     * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)
+     * - Icon 色 override:`fg-muted` → hover `fg-secondary`(跟 Inline Action dismiss 視覺一致)
      *
      * 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 **chrome corner close X**
      * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。
@@ -129,7 +130,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;
@@ -172,7 +173,7 @@ export declare const buttonMeta: {
         readonly xs: {
             readonly fieldHeight: 24;
             readonly iconSize: 16;
-            readonly typography: "body";
+            readonly typography: "caption";
         };
         readonly sm: {
             readonly fieldHeight: 28;
@@ -185,18 +186,18 @@ export declare const buttonMeta: {
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
+            readonly fieldHeight: 36;
             readonly iconSize: 20;
             readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "active", "pressed", "loading", "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", "--neutral-selected-hover", "--neutral-selected-active", "--error", "--error-hover", "--error-active"];
+        readonly fg: readonly ["--on-emphasis", "--fg-disabled", "--foreground", "--primary", "--primary-hover", "--primary-active", "--error", "--error-hover", "--error-active"];
         readonly ring: readonly ["--ring"];
     };
-    readonly defaultVariant: "primary";
+    readonly defaultVariant: "tertiary";
     readonly defaultSize: "md";
 };
 export { Button, buttonVariants, ButtonGroupContext };

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

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

package/dist/components/Button/button.js

@@ -1,10 +1,10 @@
-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";
 import { CircularProgress } from "../CircularProgress/circular-progress.js";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useResolvedFieldSize } from "../Field/field-context.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
 const buttonVariants = cva(
   [
@@ -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
@@ -162,7 +164,9 @@ const buttonVariants = cva(
       }
     ],
     defaultVariants: {
-      variant: "primary",
+      // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。
+      // 真正預設邏輯在元件內 resolvedVariant(相對指法,免行號漂移);此 cva default 供直接 buttonVariants() 呼叫者一致。
+      variant: "tertiary",
       size: "md",
       pressedTone: "emphasis"
     }
@@ -186,13 +190,13 @@ const Button = React.forwardRef(
     loading = false,
     fullWidth = false,
     pressed,
+    pressedTone,
+    // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default
     children,
     disabled,
     ...props
   }, ref) => {
-    var _a;
-    const fieldCtx = (_a = useFieldContext) == null ? void 0 : _a();
-    const resolvedSize = size ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
+    const resolvedSize = useResolvedFieldSize(size, "md");
     const resolvedIconOnly = iconOnly || dismiss;
     if (process.env.NODE_ENV !== "production" && overlayBadge && !iconOnly) {
       console.warn(
@@ -204,8 +208,13 @@ const Button = React.forwardRef(
         "[DS Button] `iconOnly` 嚴格定義為「只有一個 icon,正方形」,不可與 `endIcon` 或 `badge` 並用。若需 icon + 下拉指示 → 不加 iconOnly + startIcon + endIcon + aria-label;若需 icon + 角標 → iconOnly + overlayBadge。SSOT:button.spec.md `iconOnly 的邊界` 節 + `badge.spec.md` Overlay 適用元件 canonical。"
       );
     }
-    const resolvedVariant = dismiss ? "text" : variantProp === "destructive" ? "primary" : variantProp === "ghost" ? "text" : variantProp ?? "primary";
+    const resolvedVariant = dismiss ? "text" : variantProp === "destructive" ? "primary" : variantProp === "ghost" ? "text" : variantProp ?? (iconOnly ? "text" : "tertiary");
     const resolvedDanger = dangerProp || variantProp === "destructive";
+    if (process.env.NODE_ENV !== "production" && resolvedDanger && (resolvedVariant === "tertiary" || resolvedVariant === "link")) {
+      console.warn(
+        `[DS Button] \`danger\` 不支援 variant="${resolvedVariant}"(無對應 compoundVariant,會靜默渲染成一般 ${resolvedVariant},無紅色 danger 視覺)。危險操作請改用 primary(立即不可逆)/ secondary(可反悔)/ text(低度)。SSOT:button.spec.md「禁止事項」danger 條。`
+      );
+    }
     const groupCtx = React.useContext(ButtonGroupContext);
     const resolvedFullWidth = fullWidth || !!groupCtx.fullWidth;
     const Comp = asChild ? Slot : "button";
@@ -214,19 +223,70 @@ 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 fg-secondary
+      // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)
+      // 弱化 icon hover 一階(item-anatomy.tsx ItemInlineActionButton 同階梯 SSOT)
+      dismiss && "text-fg-muted hover:text-fg-secondary",
+      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, 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,
@@ -235,33 +295,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) {
@@ -286,18 +320,26 @@ const buttonMeta = {
     link: { purpose: "內文連結(inline reading)" }
   },
   sizes: {
-    xs: { fieldHeight: 24, iconSize: 16, typography: "body" },
+    xs: { fieldHeight: 24, iconSize: 16, typography: "caption" },
     sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
     md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body-lg" }
+    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 詞彙統一補列)
+  // 'loading' = CircularProgress spinner 取代 startIcon + aria-busy + click guard(2026-07-14 deep-audit
+  // 補列,原漏 → auto-compile 生成矩陣缺 loading;對齊 anatomy StateBehavior Loading 行 + tsx loading 分支)
+  states: ["default", "hover", "active", "pressed", "loading", "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 矩陣依此)。
+    // 2026-07-14 deep-audit 二次補齊(掃 cva 全 bg-* class):+ neutral-selected-hover / neutral-selected-active
+    // (neutral pressedTone compound 消費)+ error / error-hover / error-active(primary+danger bg-error 系)
+    bg: ["--primary", "--primary-hover", "--primary-active", "--primary-subtle", "--bg-disabled", "--surface", "--neutral-hover", "--neutral-active", "--neutral-selected", "--neutral-selected-hover", "--neutral-selected-active", "--error", "--error-hover", "--error-active"],
+    fg: ["--on-emphasis", "--fg-disabled", "--foreground", "--primary", "--primary-hover", "--primary-active", "--error", "--error-hover", "--error-active"],
     ring: ["--ring"]
   },
-  defaultVariant: "primary",
+  defaultVariant: "tertiary",
+  // 2026-06-10 修 stale:對齊 cva defaultVariants(2026-06-06 labeled 預設改 tertiary,meta 漏同步)
   defaultSize: "md"
 };
 export {