@qijenchen/design-system 0.1.0-beta.145 → 0.1.0-beta.147

package/src/components/PeoplePicker/people-picker.tsx

@@ -418,7 +418,6 @@ const PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(functio
         // 型別跟 PeoplePicker `HTMLAttributes<HTMLDivElement>` 不一致(`onCopy` / `onChange` 等)。
         // Runtime spread 等效 — DOM 收到 attrs 不挑剔(非 allowlist attrs 落 CustomSelect rest,
         // 續 spread 到 trigger div,runtime 行為不變)。
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         // any-allow: rest 含 `onChange: FormEventHandler` 跟 Select onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)
         {...(rest as any)}
       />
@@ -465,7 +464,6 @@ const PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(functio
         className={className}
         aria-label={ariaLabel}
         // codex P2 forward(see Select branch comment for type-cast rationale)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)
         {...(rest as any)}
         // **Tag SSOT canonical**:用 `avatar` prop(不塞 children),Tag 內部統一
@@ -558,7 +556,7 @@ const PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(functio
       // 跟 avatar 同 slot(等寬同 step,non-overlapping 多 24px 區塊不再 saw)。對齊 user
       // 「avatars 和 +N 都是同尺寸圓形,空間最多容固定數量圓形」物理模型 directive +
       // MUI AvatarGroup / Primer AvatarStack 共識(`AvatarGroup.js` L54-59 same negative margin)。
-      overflowWrapperClassName="-ml-0.5 first:ml-0 relative inline-flex"
+      overflowWrapperClassName="-ml-[var(--avatar-stack-overlap)] first:ml-0 relative inline-flex"
       tagAreaGapPx={0}
       tagAreaPaddingLeftPx={undefined}
       // 2026-05-12 Round 7 fix(user 抓 image 2「+N tag 應該圓形不是矩形」+ 對齊 GitHub picker idiom):
@@ -595,7 +593,6 @@ const PeoplePicker = React.forwardRef<HTMLDivElement, PeoplePickerProps>(functio
           </Tag>
         )
       }}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       // any-allow: rest 含 `onChange: FormEventHandler` 跟 Combobox onChange signature 衝突 — DOM runtime spread 安全(per codex P2 forward)
       {...(rest as any)}
       tagRenderer={(item, onRemove) => {

package/src/components/PeoplePicker/person-display.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 import { useFieldEmptyDisplay } from '@/design-system/components/Field/field-context'
 import { Tag } from '@/design-system/components/Tag/tag'
 import { OverflowIndicator } from '@/design-system/components/OverflowIndicator/overflow-indicator'
-import { Avatar } from '@/design-system/components/Avatar/avatar'
+import { Avatar, AVATAR_STACK_CLASS, AVATAR_STACK_ITEM_CLASS, AVATAR_DISMISS_OVERLAY_PX, avatarStackItemStyle } from '@/design-system/components/Avatar/avatar'
 import { ProfileCard, ProfileCardDefaultActions } from '@/design-system/components/ProfileCard/profile-card'
 import { useTableIsScrolling } from '@/design-system/components/Field/field-context'
 import { ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'
@@ -87,9 +87,9 @@ function buildPersonProfileCard(person: PersonData): React.ReactNode {
 }
 
 // ── Avatar Size ─────────────────────────────────────────────────────────────
-// 與 Tag 高度對齊:sm=20px, md/lg=24px(對齊 item-anatomy AVATAR_SIZE.inline)
-
-const AVATAR_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 20, md: 24, lg: 24 }
+// 唯一住所在 avatar-stack-overflow.ts `AVATAR_STACK_AVATAR_PX`(與 Tag 高度對齊:sm=20px, md/lg=24px);
+// 這裡只是別名,不再另寫一份(2026-09-27,M17)。
+const AVATAR_PX = AVATAR_STACK_AVATAR_PX
 
 // ── PersonAvatar ────────────────────────────────────────────────────────────
 // Consume DS `Avatar` primitive(2026-04-22 refactor,M1 SSOT consumption)+ 預設 ProfileCard
@@ -112,6 +112,8 @@ function PersonAvatar({
   className = '',
   style,
   disabled = false,
+  stacked = false,
+  dismissCutout = false,
 }: {
   person: PersonData
   size?: 'sm' | 'md' | 'lg'
@@ -123,6 +125,10 @@ function PersonAvatar({
    *  PeoplePicker disabled 分支無 fieldCtx,Avatar self-dim 搆不到,host 補)。
    *  對齊 people-picker.spec.md「disabled:灰化整個 field,不可互動」。 */
   disabled?: boolean
+  /** 頭像堆疊裡的一項 → 轉給 Avatar `stacked`(挖空;avatar.spec.md「頭像堆疊(疊在一起時)」) */
+  stacked?: boolean
+  /** 右上浮著移除 ×(AvatarDismissOverlay)→ 轉給 Avatar `dismissCutout`(× 顯示時把它底下連縫挖掉) */
+  dismissCutout?: boolean
 }) {
   const isTableScrolling = useTableIsScrolling()
   const nameCard = React.useMemo(
@@ -137,6 +143,8 @@ function PersonAvatar({
       className={cn(className, disabled && 'opacity-disabled')}
       style={style}
       hoverCard={nameCard}
+      stacked={stacked}
+      dismissCutout={dismissCutout}
     />
   )
 }
@@ -174,7 +182,10 @@ PersonDisplay.displayName = 'PersonDisplay'
 
 // ── Multi Person Display ────────────────────────────────────────────────────
 // 多人堆疊:avatar 重疊(-2px),不顯示人名。
-// 第一個 avatar z-index 最高(在最上面),依此類推。
+// 第一個 avatar z-index 最高(在最上面),依此類推;+N 在最下面。
+// 疊在一起的地方用挖空分開(不是外圈):幾何與層次都消費 Avatar 的頭像堆疊 SSOT
+//(`AVATAR_STACK_CLASS` / `AVATAR_STACK_ITEM_CLASS` + `avatarStackItemStyle` + Avatar `stacked` + OverflowIndicator circle;avatar.spec.md「頭像堆疊(疊在一起時)」、
+// people-picker.spec.md §D row 1)。
 // 溢出時顯示 +N 指示器,hover 出 tooltip 列出溢出的人(avatar + 人名)。
 
 function MultiPersonDisplay({
@@ -302,9 +313,11 @@ function MultiPersonDisplay({
 
   // 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識):outer items-start + avatar stack
   // 鎖 first-line baseline(整 stack 是 prefix slot,h-[1lh] 對齊 first line)。
+  // 項目總數含 +N(它是最後一項、在最下層)。
+  const stackCount = visible.length + (overflow > 0 ? 1 : 0)
   return (
     <span ref={containerRef} className="inline-flex items-start min-w-0">
-      <ItemPrefix className="!justify-start"><span className="inline-flex items-center min-w-0">
+      <ItemPrefix className="!justify-start"><span className={cn('inline-flex items-center min-w-0', AVATAR_STACK_CLASS)}>
       {visible.map((person, i) => {
         // **2026-05-07 v15.11 Bug D 升級 SSOT**:visible avatar 也支援 inline dismiss
         // (對齊 user directive「avatar = tag」)。Dismiss overlay 走 `AvatarDismissOverlay`
@@ -312,11 +325,11 @@ function MultiPersonDisplay({
         // 都用同一視覺 — 紅圈 X 對齊 avatar 右上,hover/focus-visible 才顯。
         const handleDismiss = onRemove ? () => onRemove(value![i]) : undefined
         return (
-          <span key={person.name + i} className={`relative inline-flex group/avatar ${i > 0 ? '-ml-0.5' : ''}`} style={{ zIndex: visible.length - i }}>
+          <span key={person.name + i} className={cn(AVATAR_STACK_ITEM_CLASS, 'group/avatar')} style={avatarStackItemStyle(i, stackCount)}>
             <PersonAvatar
               person={person}
               size={size}
-              className="ring-2 ring-[var(--surface)]"
+              stacked
               disabled={disabled}
             />
             {handleDismiss && <AvatarDismissOverlay onRemove={handleDismiss} label={person.name} />}
@@ -324,10 +337,11 @@ function MultiPersonDisplay({
         )
       })}
       {overflow > 0 && (
+        // +N 也是堆疊的一項:包一層 item,結構與頭像項目相同(item > 觸發點 > 圓),挖空才對得上。
+        <span className={AVATAR_STACK_ITEM_CLASS} style={avatarStackItemStyle(visible.length, stackCount)}>
         <OverflowIndicator
           count={overflow}
           size={size}
-          className="ring-2 ring-[var(--surface)] -ml-0.5"
         >
           {hidden.map((person, i) => (
             <Tag
@@ -353,6 +367,7 @@ function MultiPersonDisplay({
             </Tag>
           ))}
         </OverflowIndicator>
+        </span>
       )}
       </span></ItemPrefix>
     </span>
@@ -365,8 +380,9 @@ MultiPersonDisplay.displayName = 'MultiPersonDisplay'
 //
 // **Visual canonical**(對齊 DS new token `--surface-strong`):
 //   - **12×12 圓**(固定,不隨 field size 變)
-//   - **bg `--surface-strong`**(neutral-6),hover → `--surface-strong-hover`
-//     (light=neutral-5 / dark=neutral-7,跨 mode 對稱)
+//   - **bg `--surface-strong`**(neutral-6-opaque),hover → `--surface-strong-hover`(自己的配對 = 下一階,
+//     color.spec.md「Hover 換色配對總則」)。兩個主題都是 neutral-7-opaque:淺 #BFBFBF→#8C8C8C 變深、
+//     深 #737373→#A6A6A6 變亮(semantic.css Surface 段)。2026-09-25 更正:原註解寫「light=neutral-5」與實值不符。
 //   - **X icon size=12 strokeWidth=3**(icon 跟底色一樣大,對齊 checkbox checkmark
 //     sm/md stroke 規格;2026-06-12 同步 checkbox 2026-05-18 簡化 3.5→3,SSOT →
 //     packages/design-system/ds-canonical/references/ui-dev-rules.md「小尺寸 icon stroke 補償」)
@@ -387,22 +403,19 @@ function AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label
       onClick={(e) => { e.stopPropagation(); onRemove() }}
       data-collection-remove
       aria-label={`移除 ${label}`}
+      // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric top -1px / right -4px — field padding-y
+      // (4px sm/md)緊 → top 只 -1px 安全;padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。
+      // 對齊 ClickUp 世界級 idiom(asymmetric offset by avatar/field size constraint)。
+      // 幾何只有一個住所 `AVATAR_DISMISS_OVERLAY_PX`(avatar.tsx):Avatar 用同一組數字在頭像上挖 × 底下的洞。
+      style={{ top: AVATAR_DISMISS_OVERLAY_PX.top, right: AVATAR_DISMISS_OVERLAY_PX.right, width: AVATAR_DISMISS_OVERLAY_PX.size, height: AVATAR_DISMISS_OVERLAY_PX.size }}
       className={[
-        // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric `-top-px -right-1`
-        // (top -1px / right -4px)— field padding-y(4px sm/md)緊 → top 只 -1px 安全;
-        // padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。對齊 ClickUp
-        // 世界級 idiom(asymmetric offset by avatar/field size constraint)。
-        'absolute -top-px -right-1 z-10',
+        'absolute z-10',
         'inline-flex items-center justify-center',
-        // **12×12 + 2px white ring**(SSOT match stacked avatar,Slack/Material/iOS
-        // notification badge 2px ring canonical)。改用 `[box-shadow:...]` 而非 `ring-2`
-        // 避免跟焦點指示在 tailwind-merge 衝突(同 ring family
-        // override 互殺)。
-        // **2026-09-07 訂正**:原註解寫「也不被 focus-visible ring 蓋掉(不同 layer)」——
-        // 實測相反(當時焦點還走 ring 通道)。兩者最終都寫同一個 CSS `box-shadow` 屬性,而帶偽類的那條
-        // 帶偽類、特異性較高 → 聚焦當下白環**整層被藍環取代**。
-        // 這不是缺陷(聚焦時本來就該讓焦點指示器出線),但註解不能寫成相反的事實。
-        'w-3 h-3 rounded-full [box-shadow:0_0_0_2px_var(--surface)]',
+        // **12×12,與底下頭像之間的縫是從頭像上挖出來的**(Avatar `dismissCutout`,由 PersonAvatarTag 傳;2026-09-26 待辦總帳 N49):
+        // 此前是 `[box-shadow:0 0 0 2px var(--surface)]` 畫一圈當縫,深色 `--surface` 半透明 → 在頁面 / 卡片 / 滑過列上各是一圈錯色;
+        // 挖空露出真正的底,不需要知道底色(同 avatar.tsx 狀態圓點 / 計數徽章 / 頭像堆疊)。
+        // 聚焦時的藍框由全域 `:focus-visible` 外描邊畫,不再與白環搶同一個 box-shadow 屬性。
+        'rounded-full',
         // bg-surface-strong = neutral-6-opaque / hover = neutral-7-opaque(both modes,
         // step-7 dark 公式自動 lighter → engaged 跨 mode 對稱)
         'bg-surface-strong text-on-emphasis hover:bg-surface-strong-hover',
@@ -416,7 +429,7 @@ function AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label
         // 的 X 都秀出來,這樣看起來超亂」)。觸控的多人移除改由 PeoplePicker 自動降階為既有
         // pill 型態(Combobox tag SSOT,每顆 pill 自帶 X)承擔 — 見 people-picker.spec.md
         // 「觸控裝置(native 分支)」。本 overlay 維持 hover / focus 才顯的桌機語意。
-        'transition-opacity duration-150 motion-reduce:duration-0',
+        // 瞬間出現,不寫 transition-opacity(tokens/motion/motion.spec.md「hover 回饋不做過渡」;2026-09-26 延伸到滑過才出現的按鈕,待辦總帳 L9 / N4(3))。
       ].join(' ')}
     >
       <X size={12} strokeWidth={3} aria-hidden />
@@ -429,11 +442,15 @@ function AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label
 // (那是 pill mode),改 render 此元件 — Avatar overlap 視覺 + AvatarDismissOverlay。
 // 對齊 user directive「avatar = tag 概念,差別只在視覺,SSOT 一致」(2026-05-07 v15.13)。
 //
-// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-0.5` overlap wrapper,
+// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-[var(--avatar-stack-overlap)]` overlap wrapper,
 // 因 Combobox `tagRenderer` 結果會被內部 `<div shrink-0>` 包成 measurement wrapper
 // (useOverflowCount 必要)。把 overlap + group 拉到 Combobox 的 `tagWrapperClassName`
 // 上,sibling-level overlap + group selector 才能正確 chain → AvatarDismissOverlay 的
 // `group-hover/avatar:opacity-100` 才會通。
+//
+// **挖空(2026-09-26)**:本元件拿不到自己是第幾顆,但不需要 —— Avatar `stacked` 的挖空由結構決定
+//(所在 wrapper 前面有看得見的堆疊項目才挖;Combobox 量寬時 `hidden` 的 wrapper 不算),
+// 見 avatar.tsx「頭像堆疊」段、people-picker.spec.md §D row 1。
 function PersonAvatarTag({
   person, size = 'md', onRemove,
 }: {
@@ -443,7 +460,7 @@ function PersonAvatarTag({
 }) {
   return (
     <>
-      <PersonAvatar person={person} size={size} className="ring-2 ring-[var(--surface)]" />
+      <PersonAvatar person={person} size={size} stacked dismissCutout={!!onRemove} />
       {onRemove && <AvatarDismissOverlay onRemove={onRemove} label={person.name} />}
     </>
   )

package/src/components/Popover/popover.anatomy.stories.tsx

@@ -276,7 +276,7 @@ export const Accessibility = {
   render: () => (
     <div className="max-w-3xl text-body text-fg-secondary">
       <h3 className="text-h5 text-foreground mb-2">無障礙設計</h3>
-      <p className="whitespace-pre-line">{"焦點 / 鍵盤 / ARIA 行為（部分為 DS 覆寫,部分為 Radix 內建）：\n\n-   開啟焦點（DS 覆寫）  ：DS 以  onOpenAutoFocus  覆寫 Radix 預設,開啟時把焦點落在 body 第一個可互動元素（避免 Radix 預設先 focus 右上 close X,觸發 tooltip leak）\n-   關閉返回（Radix 內建）  ：關閉時 focus return to trigger\n-   Esc 關閉（Radix 內建）  ：按 Esc 自動關閉並返回焦點\n-   Focus trap（Radix 內建,僅 modal）  ： modal={true}  時焦點鎖在 content 內\n-   點外 / 焦點離開即關（Radix 內建,non-modal）  ：預設 non-modal 不鎖焦點,焦點或指標離開 content 樹即自動關閉（dismiss,非 focus trap）\n-   ARIA（Radix 內建）  ：trigger 自動  aria-expanded  /  aria-controls ，content  role=\"dialog\" \n-   Accessible name（DS 覆寫）  ：content  role=\"dialog\"  預設無 accessible name， PopoverTitle  掛載時自動接上 content 的  aria-labelledby （consumer 自傳 aria-label / aria-labelledby 優先）\n\n保留 Radix  data-state  屬性即可；無  PopoverTitle  的 naked popover 需 consumer 自傳  aria-label ，否則 role=\"dialog\" 無 accessible name。"}</p>
+      <p className="whitespace-pre-line">{"焦點 / 鍵盤 / ARIA 行為（部分為 DS 覆寫,部分為 Radix 內建）：\n\n-   開啟焦點（DS 覆寫）  ：DS 以  onOpenAutoFocus  覆寫 Radix 預設,開啟時把焦點落在 body 第一個表單控件(排除右上 close X;查無時退回 footer 按鈕、再無則 content 容器),避免 Radix 預設先 focus close X 觸發 tooltip leak\n-   關閉返回（Radix 內建）  ：關閉時 focus return to trigger\n-   Esc 關閉（Radix 內建）  ：按 Esc 自動關閉並返回焦點\n-   Focus trap（Radix 內建,僅 modal）  ： modal={true}  時焦點鎖在 content 內\n-   Tab 留在面板裡（Radix 內建,modal / non-modal 皆同）  ：最後一格按 Tab 回第一格、第一格按 Shift+Tab 回最後一格,離開面板 = 按 Esc(W3C 對話框規則;2026-09-25 更正:原寫「non-modal 不鎖焦點」與實作不符)\n-   點外 / 焦點被移走即關（Radix 內建,non-modal）  ：non-modal 不 trap 的意思是滑鼠點別處、程式把焦點移走時可以離開,一離開就自動關閉（dismiss,不是「Tab 可以走出去」）\n-   例外:選單類浮層按 Tab = 收起並往下走（DropdownMenu、單選下拉,見各自 spec）\n-   ARIA（Radix 內建）  ：trigger 自動  aria-expanded  /  aria-controls ，content  role=\"dialog\" \n-   Accessible name（DS 覆寫）  ：content  role=\"dialog\"  預設無 accessible name， PopoverTitle  掛載時自動接上 content 的  aria-labelledby （consumer 自傳 aria-label / aria-labelledby 優先）\n\n保留 Radix  data-state  屬性即可；無  PopoverTitle  的 naked popover 需 consumer 自傳  aria-label ，否則 role=\"dialog\" 無 accessible name。"}</p>
     </div>
   ),
 }

package/src/components/Popover/popover.principles.stories.tsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import LinkTo from '@storybook/addon-links/react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Filter, Copy, Edit, Trash2, Info } from 'lucide-react'
+import { Filter, Copy, Edit, Trash2 } from 'lucide-react'
 import {
   Popover,
   PopoverTrigger,
@@ -28,11 +28,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '@/design-system/components/DropdownMenu/dropdown-menu'
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from '@/design-system/components/Tooltip/tooltip'
+import { FieldLabel } from '@/design-system/components/Field/field'
 import { Button } from '@/design-system/components/Button/button'
 import { Checkbox } from '@/design-system/components/Checkbox/checkbox'
 import { CheckboxGroup } from '@/design-system/components/Checkbox/checkbox-group'
@@ -201,12 +197,7 @@ export const UsageGuidance: Story = {
         title="Tooltip — hover 觸發,純文字輔助說明"
         note="解釋 icon 按鈕含義、欄位說明、快捷鍵提示。使用者 hover 看到、移開就消失,內容不可互動。典型案例:Figma toolbar icon tooltip、Slack 按鈕功能提示、Gmail 的快捷鍵說明"
       >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button variant="text" size="sm" iconOnly startIcon={Info} aria-label="說明" />
-          </TooltipTrigger>
-          <TooltipContent>此欄位只接受英文與數字</TooltipContent>
-        </Tooltip>
+        <FieldLabel info="此欄位只接受英文與數字">專案代碼</FieldLabel>{/* 只給資訊的 ⓘ 用 FieldLabel info(內部就是 Tooltip;平常淡、滑過深一階、一般箭頭),不用 Button:Button 會帶按鈕底色與手形,iconOnly 還會自己再掛一層提示 → 同時浮出兩個 */}
         <Label>↑ 純文字輔助 → Tooltip(hover 觸發,移開消失)</Label>
       </Rule>
 

package/src/components/Popover/popover.spec.md

@@ -56,7 +56,7 @@ Popover 是**點擊觸發的浮層容器**——提供定位、動畫、焦點
 - **含標題**：組合 `<PopoverHeader>` + `<PopoverBody>`（下分隔線由 Header 提供）
 - **含操作按鈕列**：再加 `<PopoverFooter>`（上分隔線由 Footer 提供）
 
-**Dismiss 預設**(與 Dialog 一致):Popover **預設 dismissible** —— 點擊 trigger 外 / 按 Esc / focus 離開 content 樹,三者任一皆關閉。由 Radix 內建 `onPointerDownOutside` / `onEscapeKeyDown` 行為提供,consumer 無需額外 wire。如需強制 modal(必須按 Close 才能關),傳 `modal={true}` 並在 Header 放 Close 按鈕;但這是例外,不是預設——Popover 的本質是「使用者可以忽略、繼續主流程」。
+**Dismiss 預設**(與 Dialog 一致):Popover **預設 dismissible** —— 點擊 trigger 外 / 按 Esc / 焦點被移到 content 樹之外(滑鼠點到別處、程式把焦點移走),三者任一皆關閉。由 Radix 內建 `onPointerDownOutside` / `onFocusOutside` / `onEscapeKeyDown` 行為提供,consumer 無需額外 wire。**鍵盤 Tab 不是離開的路**:面板裡按 Tab / Shift+Tab 在面板內繞圈、走不到 content 樹之外(見「A11y 預設」;2026-09-25 更正,原句「focus 離開 content 樹」被讀成 Tab 可以走出去,與實測不符)。如需強制 modal(必須按 Close 才能關),傳 `modal={true}` 並在 Header 放 Close 按鈕;但這是例外,不是預設——Popover 的本質是「使用者可以忽略、繼續主流程」。
 
 > **跨家族 SSOT pointer**:PopoverHeader 屬 **Padding-based overlay header 家族**;border / padding / dismiss size / withTabs(tabs 進 PopoverHeader 時 border auto-suppress + tabs size sm)的跨家族視覺契約 SSOT 詳 `patterns/header-canonical/header-canonical.spec.md`。本節僅 codify Popover 特有 close X v5 unbounded canonical。
 
@@ -169,8 +169,10 @@ canonical 判斷:「使用者 click 單項是否立即改變系統狀態?」是
 - **開啟焦點(DS 覆寫)**：DS 以 `onOpenAutoFocus` 覆寫底層 primitive 的預設 autofocus(見 `popover.tsx` `handlePopoverOpenAutoFocus`),開啟時把焦點落在 body 第一個**表單控件**(`input` / `textarea` / `select` / `button`,排除右上 close X);查無表單控件時退回 footer 按鈕,再無則落在 content 容器(`role="dialog"`)本身。原預設會先 focus 右上 close X,DS 覆寫以避免觸發 tooltip leak，selector 與 `dialog.tsx handleOpenAutoFocus` 共用同一套 DS canonical。**注意**:(1) 若移除此 default handler,行為會回退成底層預設 focus close X;(2) selector 只認表單控件——body 若只含 `a[href]` / `[tabindex]` / `contenteditable` 類可聚焦內容,焦點會落在 content 容器而非該內容,consumer 需自傳 `onOpenAutoFocus` 指定要聚焦的元素。
 - **關閉返回(Radix 內建)**：關閉時 focus return to trigger
 - **Esc 關閉(Radix 內建)**：按 Esc 自動關閉並返回焦點
-- **Focus trap(Radix 內建,僅 modal)**：`modal={true}` 時焦點鎖在 content 內
-- **點外 / 焦點離開即關(Radix 內建,non-modal)**：預設 non-modal **不鎖焦點**(無 focus trap),焦點或指標離開 content 樹時由 DismissableLayer 觸發 dismiss 自動關閉——這是 dismiss-on-focus-out 機制,**不是** focus trap
+- **Tab 留在面板裡(Radix 內建,modal / non-modal 皆同)**:焦點在面板裡的可 Tab 元素上時,在最後一格按 Tab 回到第一格、在第一格按 Shift+Tab 回到最後一格,鍵盤走不出面板(面板裡沒有可 Tab 的元素、焦點落在 content 容器本身時,Tab 原地不動);要離開面板 = 按 Esc(焦點回 trigger)。機制:Radix Popover 內容的 FocusScope `loop: true`(`@radix-ui/react-popover` 1.1.15 `dist/index.mjs:225-226`;non-modal 時 `trapped: false`,見下一條)。這就是 W3C 對話框的規則 ——「Like non-modal dialogs, modal dialogs contain their tab sequence. That is, Tab and Shift + Tab do not move focus outside the dialog.」(<https://github.com/w3c/aria-practices/blob/3f094fde1c81b25dfa69162563bf28d093f854d4/content/patterns/dialog-modal/dialog-modal-pattern.html#L29-L30>),而 Popover content 本身就是 `role="dialog"`。2026-09-25 更正:本條原寫「預設 non-modal **不鎖焦點**」,R15 實測 Tab 出不去,與實作不符(待辦總帳 B11)
+- **Focus trap(Radix 內建,僅 modal)**:`modal={true}` 時連滑鼠點外面 / 程式移焦都出不去(`trapped: true`),焦點鎖在 content 內
+- **點外 / 焦點被移走即關(Radix 內建,non-modal)**:non-modal 不 trap 的意思是**滑鼠點到別處、程式把焦點移走**時焦點可以離開,一離開就由 DismissableLayer 觸發 dismiss 自動關閉——這是 dismiss-on-focus-out 機制,**不是**「Tab 可以走出去」
+- **例外:選單類浮層按 Tab = 收起並往下走**:DropdownMenu 選單與單選下拉(Select / PeoplePicker single)不是對話框,開著按 Tab 收起、焦點從觸發鈕往下(Shift+Tab 往上)走;規則在各自 spec(`../SelectMenu/select-menu.spec.md`「A11y 預設」、`../DropdownMenu/dropdown-menu.spec.md`),來源 = 待辦總帳 B11。多選下拉(有全選鈕)面板裡有按鈕 / 搜尋框,是對話框型,照上面「Tab 留在面板裡」
 - **ARIA(Radix 內建)**：trigger 自動 `aria-expanded` / `aria-controls`，content `role="dialog"`
 - **Accessible name(DS 覆寫)**:Radix Popover 沒有 Radix Dialog Title 式的自動接線,content `role="dialog"` 預設**無 accessible name**。DS 以 context 補同機制(見 `popover.tsx` `PopoverTitleContext`):`<PopoverTitle>` 掛載時自動把 id 接上 content 的 `aria-labelledby`;consumer 自傳 `aria-label` / `aria-labelledby` 一律優先
 
@@ -201,10 +203,12 @@ canonical 判斷:「使用者 click 單項是否立即改變系統狀態?」是
 
 > 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
 
+- `agent-panel.spec.md`
 - `coachmark.spec.md`
 - `dialog.spec.md`
 - `dropdown-menu.spec.md`
 - `hover-card.spec.md`
+- `overlay-chrome-sizing.spec.md`
 - `overlay-surface.spec.md`
 - `select-menu.spec.md`
 - `tooltip.spec.md`

package/src/components/ProfileCard/profile-card.anatomy.stories.tsx

@@ -360,7 +360,7 @@ export const HoverCardIntegration: Story = {
           ].map(p => (
             <HoverCard key={p.name}>
               <HoverCardTrigger asChild>
-                <span className="inline-block cursor-pointer">
+                <span className="inline-block cursor-default">{/* 滑過只浮出名片、點了不做事 → 一般箭頭(hit-area-canonical.md 三-1;同 hover-card.stories 頭像觸發) */}
                   <Avatar src={p.avatarUrl} alt={p.name} size={40} status={p.status} />
                 </span>
               </HoverCardTrigger>

package/src/components/ProfileCard/profile-card.spec.md

@@ -108,7 +108,7 @@ ProfileCard 的 default actions **是 `Chat + Audio call`**(chat app 標配,cano
 
 ## Status 區
 
-非互動狀態標籤以 `bg-muted` 承載(不用 `bg-secondary`——Muted 視覺重量更低,對齊 Badge / Skeleton family)。狀態點顏色走 `--status-*` presence token(2026-04-20):`online` / `away` / `busy` / `offline`——跟 Avatar status 同源、獨立於 success/warning/error(presence 不是 validation state)。訊息必須包在 `<DescriptionList>` 內以 `<DescriptionItem>` 呈現(不可孤立 dt/dd),**完整顯示不截斷**——內容過長時由 Body 區 `<ScrollArea>` 在固定高度內捲動,不 clamp 行數。
+非互動狀態標籤以 `bg-muted` 承載(不用 `bg-secondary`——Muted 視覺重量更低;同用 `bg-muted` 的是 Skeleton,登記在 `../../tokens/color/color.spec.md`「Static Subtle Background」段的 `bg-muted` 列)。2026-09-25 更正引用(待辦總帳 C2 / R12 W2):原寫「對齊 Badge / Skeleton family」,但 Badge 的 `low` 用的是 `bg-secondary`(`../Badge/badge.tsx` `badgeVariants` 的 `low`),不是本條的先例。狀態點顏色走 `--status-*` presence token(2026-04-20):`online` / `away` / `busy` / `offline`——跟 Avatar status 同源、獨立於 success/warning/error(presence 不是 validation state)。訊息必須包在 `<DescriptionList>` 內以 `<DescriptionItem>` 呈現(不可孤立 dt/dd),**完整顯示不截斷**——內容過長時由 Body 區 `<ScrollArea>` 在固定高度內捲動,不 clamp 行數。
 
 ## Info Fields
 

package/src/components/ProfileCard/profile-card.tsx

@@ -46,7 +46,6 @@ export const ProfileCardDefaultActions = ({
   // Dev-mode warning(對齊本檔 defaultFieldValues dev-warn 先例):預設 actions 沒接 handler
   // = 按鈕點了永遠沒反應(2026-07-06 D4 finding);production 必傳 callback 或自組 actions。
   if (process.env.NODE_ENV !== 'production' && !onChat && !onCall) {
-    // eslint-disable-next-line no-console
     console.warn(
       '[DS ProfileCard] ProfileCardDefaultActions 未接 onChat/onCall——按鈕點擊無反應。請傳入 callback(PersonData.onChat/onCall 會自動 forward)或自組 actions。'
     )
@@ -199,7 +198,6 @@ const ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(
         Object.values(DEFAULT_FIELD_LABEL).includes(f.label as string),
       )
       if (legacyEntry) {
-        // eslint-disable-next-line no-console
         console.warn(
           `[ProfileCard] "${name}":legacy pattern — fields[].label="${legacyEntry.label}" ` +
           `is a default field. Migrate to defaultFieldValues={{ id, employeeNumber }} prop ` +
@@ -210,7 +208,6 @@ const ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(
 
     // Dev mode warn:consumer 沒傳 default field 任何 key → 提示補完(避免漂移成 placeholder-only)
     if (process.env.NODE_ENV !== 'production' && !defaultFieldValues) {
-      // eslint-disable-next-line no-console
       console.warn(
         `[ProfileCard] "${name}":no defaultFieldValues passed — sections will render placeholders. ` +
         `Pass at least { id, employeeNumber } via defaultFieldValues prop. ` +

package/src/components/ProgressBar/progress-bar.anatomy.stories.tsx

@@ -12,6 +12,7 @@ import { useState } from 'react'
 import { CircleCheck, XCircle, X } from 'lucide-react'
 import { ProgressBar } from './progress-bar'
 import { Button } from '@/design-system/components/Button/button'
+import { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'
 import { H3, Desc, Th, Td, TokenCell } from '@/design-system/stories-helpers/anatomy/anatomy-utils'
 
 const meta: Meta = {
@@ -138,18 +139,6 @@ export const Overview = {
    2. 元件檢閱器
    ═══════════════════════════════════════════════════════════════════════════ */
 
-const Tab = ({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) => (
-  <button
-    type="button"
-    onClick={onClick}
-    className={`px-2.5 py-1 text-[12px] font-mono rounded-md cursor-pointer transition-colors ${
-      active ? 'bg-primary text-white font-semibold' : 'bg-neutral-hover text-fg-secondary hover:bg-neutral-active'
-    }`}
-  >
-    {children}
-  </button>
-)
-
 const PropRow = ({ label, children }: { label: string; children: React.ReactNode }) => (
   <div className="flex items-start gap-3 py-2 border-b border-divider last:border-b-0">
     <span className="text-[11px] text-fg-muted font-medium w-[72px] shrink-0 pt-0.5">{label}</span>
@@ -171,21 +160,22 @@ const InspectorInner = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Controls */}
+      {/* Controls — 互斥切換消費 SegmentedControl(segmented-control.spec.md「何時用」2–5 個互斥選項;
+          取代手刻 Tab:它靜止借 neutral-hover、hover 借 neutral-active,是 color.spec.md 成對 token 的錯配) */}
       <div className="flex flex-col gap-2.5">
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Status</span>
-          <div className="flex gap-1.5">
-            {STATUSES.map((s) => <Tab key={s} active={status === s} onClick={() => setStatus(s)}>{s}</Tab>)}
-          </div>
+          <SegmentedControl size="sm" aria-label="Status" value={status} onValueChange={(v) => setStatus(v as StatusKey)}>
+            {STATUSES.map((s) => <SegmentedControlItem key={s} value={s}>{s}</SegmentedControlItem>)}
+          </SegmentedControl>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Affix</span>
-          <div className="flex gap-1.5">
-            <Tab active={affix === 'none'} onClick={() => setAffix('none')}>none</Tab>
-            <Tab active={affix === 'value'} onClick={() => setAffix('value')}>value</Tab>
-            <Tab active={affix === 'status-icon'} onClick={() => setAffix('status-icon')}>status-icon</Tab>
-          </div>
+          <SegmentedControl size="sm" aria-label="Affix" value={affix} onValueChange={(v) => setAffix(v as AffixKey)}>
+            <SegmentedControlItem value="none">none</SegmentedControlItem>
+            <SegmentedControlItem value="value">value</SegmentedControlItem>
+            <SegmentedControlItem value="status-icon">status-icon</SegmentedControlItem>
+          </SegmentedControl>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Value</span>

package/src/components/ProgressBar/progress-bar.spec.md

@@ -50,7 +50,7 @@ ProgressBar 是**量化 linear 進度** primitive——consumer 必須能回答
 | 骨架載入(預期內容形狀) | `Skeleton` | Skeleton 保留 layout,ProgressBar 只傳達「執行中量化」 |
 | 步驟導覽(顯示 step 1/2/3 結構) | `Steps` | Steps 強調 step 本身是什麼、ProgressBar 只看整體百分比 |
 | 容量 / 配額靜態顯示(非動態進行中) | 可用 ProgressBar(不傳 status,預設 inProgress 即可) | 可接受——ProgressBar 也能表達靜態 ratio,但若只是裝飾比例、非「進行中」語意,考慮 Chart bar 類元件 |
-| 評分顯示(5 顆星 80%) | `Rating` | Rating 有離散刻度語意 |
+| 評分顯示(例:「★ 4.7」) | `Rating`(唯讀精簡版) | Rating 有離散刻度語意 |
 | 小空間 / inline icon 位置的量化進度 | `CircularProgress`(有 value,determinate) | ProgressBar 在 16–24px 的小空間視覺比例不如 circular arc |
 
 ---

package/src/components/RadioGroup/radio-group.anatomy.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta } from '@storybook/react'
 import { useState } from 'react'
 import { RadioGroup, RadioGroupItem } from './radio-group'
+import { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'
 
 const meta: Meta = {
   title: 'Design System/Components/RadioGroup/設計規格',
@@ -99,15 +100,6 @@ const TokenAnnotation = ({ colors }: { colors: ColorSpec }) => (
   </div>
 )
 
-const Tab = ({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) => (
-  <button type="button" onClick={onClick}
-    className={`px-2.5 py-1 text-[12px] font-mono rounded-md cursor-pointer transition-colors ${
-      active ? 'bg-primary text-white font-semibold' : 'bg-neutral-hover text-fg-secondary hover:bg-neutral-active'
-    }`}>
-    {children}
-  </button>
-)
-
 const PropRow = ({ label, dot, children }: { label: string; dot?: string; children: React.ReactNode }) => (
   <div className="flex items-start gap-3 py-2 border-b border-divider last:border-b-0">
     <span className="text-[11px] text-fg-muted font-medium w-[72px] shrink-0 pt-0.5 flex items-center gap-1.5">
@@ -254,32 +246,33 @@ const InspectorInner = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Controls */}
+      {/* Controls — 互斥切換消費 SegmentedControl(segmented-control.spec.md「何時用」2–5 個互斥選項;
+          取代手刻 Tab:它靜止借 neutral-hover、hover 借 neutral-active,是 color.spec.md 成對 token 的錯配) */}
       <div className="flex flex-col gap-2.5">
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Checked</span>
-          <div className="flex gap-1.5">
-            {CHECKED_STATES.map((c) => <Tab key={c} active={checked === c} onClick={() => setChecked(c)}>{c}</Tab>)}
-          </div>
+          <SegmentedControl size="sm" aria-label="Checked" value={checked} onValueChange={(v) => setChecked(v as CheckedKey)}>
+            {CHECKED_STATES.map((c) => <SegmentedControlItem key={c} value={c}>{c}</SegmentedControlItem>)}
+          </SegmentedControl>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">State</span>
-          <div className="flex gap-1.5">
-            {STATES.map((st) => <Tab key={st} active={state === st} onClick={() => setState(st)}>{st}</Tab>)}
-          </div>
+          <SegmentedControl size="sm" aria-label="State" value={state} onValueChange={(v) => setState(v as StateKey)}>
+            {STATES.map((st) => <SegmentedControlItem key={st} value={st}>{st}</SegmentedControlItem>)}
+          </SegmentedControl>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Size</span>
-          <div className="flex gap-1.5">
-            {SIZES.map((sz) => <Tab key={sz} active={size === sz} onClick={() => setSize(sz)}>{sz}</Tab>)}
-          </div>
+          <SegmentedControl size="sm" aria-label="Size" value={size} onValueChange={(v) => setSize(v as SizeKey)}>
+            {SIZES.map((sz) => <SegmentedControlItem key={sz} value={sz}>{sz}</SegmentedControlItem>)}
+          </SegmentedControl>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-[11px] text-fg-muted w-16 shrink-0">Description</span>
-          <div className="flex gap-1.5">
-            <Tab active={!withDescription} onClick={() => setWithDescription(false)}>off</Tab>
-            <Tab active={withDescription} onClick={() => setWithDescription(true)}>on</Tab>
-          </div>
+          <SegmentedControl size="sm" aria-label="Description" value={withDescription ? 'on' : 'off'} onValueChange={(v) => setWithDescription(v === 'on')}>
+            <SegmentedControlItem value="off">off</SegmentedControlItem>
+            <SegmentedControlItem value="on">on</SegmentedControlItem>
+          </SegmentedControl>
           <span className="text-[11px] text-fg-muted">label 下方的次要說明</span>
         </div>
       </div>
@@ -379,7 +372,7 @@ const InspectorInner = () => {
             <div className="py-2 border-b border-divider"><span className="text-[10px] font-semibold text-fg-muted uppercase tracking-wider">Style</span></div>
             <PropRow label="Radius"><TkVal token="rounded-full" value="9999px" /></PropRow>
             <PropRow label="Border"><TkVal token="border" value="1px solid" /></PropRow>
-            <PropRow label="Focus"><TkVal token="ring-2 ring-ring ring-offset-1" /></PropRow>
+            <PropRow label="Focus"><TkVal token=":focus-visible(全域規則,無 class)" value="outline: 2px solid var(--ring) / outline-offset: 2px" /></PropRow>
             <PropRow label="Transition"><TkVal token="duration-150" value="colors" /></PropRow>
           </div>
         </div>

package/src/components/RadioGroup/radio-group.spec.md

@@ -134,7 +134,7 @@ Item-level default / hover / checked / disabled **色彩**與 Checkbox 共用同
 - ↑/↓ 與 ←/→ — 切 option(Radix roving focus,焦點移動即選取;設 `orientation` 時限對應軸向)
 - Space — 選擇
 
-**Focus**:Radix primitive 以 roving tabindex 管理群組內焦點(整組只佔一個 Tab 停留點,方向鍵在選項間移動);**非** focus trap——Tab 仍會離開群組、跳到下一個表單欄位。聚焦時顯示 visible ring(`ring-2 ring-ring ring-offset-1`,box-shadow ring 機制,並 `outline-none` 關閉原生 outline,per design-system focus-visible canonical)。
+**Focus**:Radix primitive 以 roving tabindex 管理群組內焦點(整組只佔一個 Tab 停留點,方向鍵在選項間移動);**非** focus trap——Tab 仍會離開群組、跳到下一個表單欄位。聚焦時顯示焦點框:全域 `:focus-visible` 外描邊(`outline: 2px solid var(--ring)`,往外 2px;radio-group.tsx 不寫任何焦點 class,也不寫 `outline-none`,per design-system focus-visible canonical)。
 
 **驗證**:Storybook a11y addon panel 應 0 critical violation;鍵盤完整可操作(無需滑鼠)。WCAG AA contrast ≥ 4.5:1(text)/ 3:1(UI)。
 

package/src/components/RadioGroup/radio-group.tsx

@@ -164,8 +164,19 @@ const RadioGroup = React.forwardRef<
       <div
         {...restDomProps}
         ref={setRef}
-        role="radiogroup"
-        aria-readonly="true"
+        // ⛔ 2026-09-24:這裡原本是 role="radiogroup" + aria-readonly="true",是**空頭承諾**。
+        // 這個分支只渲一個 <span> 顯示選中值,**一個 role="radio" 子元素都沒有**,也沒有任何方向鍵
+        // —— 螢幕閱讀器會宣告「單選群組」並提供方向鍵,按下去什麼都沒有;而且 radiogroup 的
+        // aria-required-children 就是 radio,這棵樹在結構上本來就是壞的。
+        //
+        // 改成 role="group" 是**對齊本 DS 既有先例**(M23):Select 的 ReadonlyDisplay
+        //(select.tsx:374 起)就是純 <span> / <div>,**不掛任何 role**。
+        // aria-readonly 同時拿掉 —— WAI-ARIA 1.2 沒把它列進 group 的支援屬性
+        //(axe 的 aria-allowed-attr 會抓;rating.tsx 唯讀分支 role=img 記過同一個坑)。
+        // 唯讀語意已由「裡面根本沒有可互動控件」表達,與 Select 一致。
+        // 規則 → ds-canonical/references/keyboard-model-canonical.md「宣告了 composite 角色,
+        // 就必須真的實作那套鍵盤」;機械閘 scripts/composite-role-keyboard-invariant.mjs。
+        role="group"
         aria-labelledby={fieldCtx?.labelId}
         aria-invalid={fieldCtx?.invalid || undefined}
         data-readonly="true"
@@ -229,6 +240,9 @@ const radioItemVariants = cva(
   [
     'grid place-content-center shrink-0 rounded-full',
     'border border-border bg-surface',
+    // @hover-transition-allow: 這條過渡的主人是 checked ↔ unchecked 的狀態切換(外框轉主色、圓點出現),與 checkbox.tsx 同一個例外,
+    //   不是 hover;而且它是控件大小的點目標,不是指標掃過去的列面。例外清單的唯一住所 = tokens/motion/motion.spec.md「唯一的例外」
+    //   (2026-09-26 補登,待辦總帳 L9 / N4(3):hover 延伸到外框時盤點出 Radio 與 Checkbox 同一種過渡,先前漏列)。
     'transition-colors duration-150',
     'hover:border-border-hover',
     'data-[state=checked]:border-primary data-[state=checked]:text-primary',
@@ -237,7 +251,11 @@ const radioItemVariants = cva(
     'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:border-transparent disabled:data-[state=checked]:text-fg-disabled',
     // readOnly：鎖定互動但維持 checked/unchecked 視覺
     'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',
-    'data-[readonly=true]:hover:border-border',
+    // readOnly × hover:框與點都釘在自己的靜止值,不升 hover 階(checkbox.spec.md「狀態 › Radio」表 readonly 列)。
+    // 指標停在 SelectionItem 的 <label for> 上時控件照樣進入 :hover(pointer-events-none 擋不住),原本只釘了
+    // 未選中的框 → 已選中的框與點(text-current)仍轉 primary-hover。寫法與 checkbox.tsx 同一組,`enabled:` 理由同該檔。
+    'data-[readonly=true]:enabled:data-[state=unchecked]:hover:border-border',
+    'data-[readonly=true]:enabled:data-[state=checked]:hover:border-primary data-[readonly=true]:enabled:data-[state=checked]:hover:text-primary',
   ],
   {
     variants: {
@@ -410,7 +428,7 @@ export const radioGroupMeta = {
   tokens: {
     bg: ['bg-disabled', 'bg-surface'],
     fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],
-    ring: ['ring-ring'],
+    ring: ['--ring'],
   },
   defaultSize: 'md',
 } as const