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

package/src/patterns/overlay-surface/overlay-surface.stories.tsx

@@ -0,0 +1,116 @@
+// @story-baseline: patterns/header-canonical/header-canonical.stories.tsx#Overview — SurfaceHeader 段(title text-body-lg font-medium + dismiss size=sm)+ components/Dialog/dialog.stories.tsx footer 檔式(取消 tertiary + primary CTA)
+//
+// Internal Pattern 參照 story(對標 patterns/header-canonical 的 anatomy 參照定位)。
+// SurfaceHeader / SurfaceBody / SurfaceFooter 是 @internal primitive——end-user 用
+// DialogHeader / SheetHeader / PopoverHeader 等 wrapper,不直接 import;
+// 本頁給 DS contributor 看「overlay 三段式結構 + padding / 分隔線契約」長什麼樣。
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ReactNode } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { SurfaceHeader, SurfaceBody, SurfaceFooter } from './overlay-surface'
+import { Button } from '@/design-system/components/Button/button'
+
+const meta: Meta = {
+  title: 'Design System/Internal Patterns/Overlay Surface',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+**@internal** — Dialog / Sheet / Popover / Coachmark 共用的浮層結構 primitive(SurfaceHeader / SurfaceBody / SurfaceFooter),統一 padding(\`px-loose py-tight\`)+ 分隔線(\`border-divider\`)語言,消除各 overlay 自寫 chrome 的漂移空間。
+
+end-user 不直接 import——用 DialogHeader / SheetHeader / PopoverHeader 等 consumer wrapper;本頁是 DS contributor 的結構參照。
+
+完整規則:\`packages/design-system/src/patterns/overlay-surface/overlay-surface.spec.md\`(padding-based header canonical / unbounded slot trick / ScrollArea canonical / dismiss size canonical)
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+/** 模擬 consumer Content 外殼——radius / border / shadow / bg 是浮層外殼職責,
+ *  由 Dialog / Popover 的 Content 自己套(spec「不屬本 primitive 的職責」段 token 組)。 */
+function Shell({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border border-border bg-surface-raised shadow-[var(--elevation-200)]',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** 1. 三段式結構 — Header(border-b)/ Body / Footer(border-t)各自的 padding 契約。
+ *  對標 Dialog「邀請成員」場景;header title = modal-tier typography(text-body-lg font-medium)。 */
+export const ThreePartStructure: Story = {
+  name: '三段式結構',
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Shell className="w-[420px]">
+        <SurfaceHeader>
+          <h2 className="flex-1 truncate text-body-lg font-medium text-foreground">邀請成員加入專案</h2>
+          <Button iconOnly dismiss size="sm" startIcon={X} aria-label="關閉" />
+        </SurfaceHeader>
+        <SurfaceBody>
+          <p className="text-body text-foreground">
+            輸入 Email 即可邀請成員加入「Acme 品牌改版」專案。
+          </p>
+          <p className="mt-2 text-caption text-fg-secondary">
+            被邀請者會收到通知信,接受後自動取得專案的檢視與留言權限。
+          </p>
+        </SurfaceBody>
+        <SurfaceFooter>
+          <Button variant="tertiary">取消</Button>
+          <Button variant="primary">寄出邀請</Button>
+        </SurfaceFooter>
+      </Shell>
+      <p className="max-w-[420px] text-caption text-fg-muted">
+        三段共用 px-loose / py-tight;Header 自畫 border-b、Footer 自畫 border-t。Header 是
+        padding-based(title 可換行、chrome 隨內容長高),dismiss 按鈕 native size 保 sm、
+        layout 佔位由 unbounded slot trick 縮回 title 行高 → header 自然閉合 48px。
+      </p>
+    </div>
+  ),
+}
+
+/** 2. 內文捲動 — 定高浮層下 header / footer 固定、body 內捲。
+ *  Shell 需 flex flex-col(viewport-aware scroll chain:中間 wrapper 斷鏈 = body 不捲,spec K11 invariant)。 */
+export const BodyScroll: Story = {
+  name: '內文捲動',
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Shell className="flex h-[280px] w-[420px] flex-col">
+        <SurfaceHeader>
+          <h2 className="flex-1 truncate text-body-lg font-medium text-foreground">服務條款更新</h2>
+          <Button iconOnly dismiss size="sm" startIcon={X} aria-label="關閉" />
+        </SurfaceHeader>
+        <SurfaceBody>
+          <div className="flex flex-col gap-3 text-body text-foreground">
+            <p>1. 資料保存期限由 30 天調整為 90 天,到期後自動匿名化。</p>
+            <p>2. 新增歐盟區域資料中心選項,既有工作區可在設定頁遷移。</p>
+            <p>3. API 免費額度調整為每月 10,000 次呼叫,超額部分依用量計費。</p>
+            <p>4. 子處理商清單新增兩家 CDN 供應商,完整清單見信任中心。</p>
+            <p>5. 帳單爭議申訴窗口由 14 天延長為 30 天。</p>
+            <p>6. 本次更新於 2026 年 8 月 1 日生效,繼續使用即視為同意。</p>
+          </div>
+        </SurfaceBody>
+        <SurfaceFooter>
+          <Button variant="tertiary">稍後再讀</Button>
+          <Button variant="primary">我已閱讀並同意</Button>
+        </SurfaceFooter>
+      </Shell>
+      <p className="max-w-[420px] text-caption text-fg-muted">
+        SurfaceBody 恆套 flex-1 min-h-0 overflow-y-auto:定高(或 viewport 太小)時 header / footer
+        永遠可見、body 內捲。注意:Dialog / Sheet 正式 consumer 的 body 走 ScrollArea canonical
+        (跨 OS 捲軸一致),此處為 primitive 裸展示。
+      </p>
+    </div>
+  ),
+}

package/src/tokens/color/color.spec.md

@@ -159,10 +159,7 @@ Semantic token 按**載體類型**分成四個 family,**family 之間的 token
 
 > **Case**:Slider disabled 的 Range(填充段)一開始寫成 `bg-fg-disabled`。理由:`--fg-disabled`(neutral-6)剛好是我想要的「比 track 深但比文字淺」的灰度。但 `--fg-disabled` 語意是「**disabled 文字的前景色**」,拿來當 bg 等於借 fg token 當 bg 用。
 >
-> **問題**:
-> 1. **語意矛盾**:consumer 讀 code 時 `bg-fg-disabled` 會困惑「這到底是 bg 還是 fg」
-> 2. **耦合未來變動**:未來若微調 `--fg-disabled`(例如從 n-6 改成 n-7 讓 disabled 文字更可讀),Slider range 會被迫一起變,但它不是文字、不需要文字可讀性的約束
-> 3. **缺乏單一來源的 bg token**:應該存在一個「disabled 狀態的中層填充色」的 bg token(如果沒有,要新增一個 semantic alias,而不是借 fg)
+> **問題**:(1)**語意矛盾**——consumer 讀 `bg-fg-disabled` 會困惑這是 bg 還是 fg;(2)**耦合未來變動**——微調 `--fg-disabled`(如 n-6→n-7 提高 disabled 文字可讀)會被迫連動 range,但 range 非文字、無文字可讀性約束;(3)**缺單一來源 bg token**——應存在「disabled 中層填充」bg token(沒有就新增 semantic alias,不是借 fg)
 >
 > **修正**:改用 `bg-border`(neutral-5)。`--border` 屬於 Border family,語意是「視覺分隔線 / 容器邊框 / 階層分隔的視覺元件」——跟 range 的「填充視覺指示器」角色接近,且 family 對得上(非文字的視覺填充類)。
 
@@ -677,14 +674,14 @@ Dark mode 覆寫：hover/active 方向反轉（hover → step-7，active → ste
 | Utility | Token | 用途 |
 |---------|-------|------|
 | `border-border` | neutral-5 alpha 15% | 元件標準邊框（input / Field family / standalone control)|
-| `border-border-hover` | neutral-6 alpha 25% | input、checkbox、radio 的 hover 邊框 |
+| `border-border-hover` | neutral-6 alpha 25% | input、checkbox、radio 的 hover 邊框——**未 focus 的欄位 hover 走中性、不搶藍**(2026-07-07 源碼實查:MUI text.primary / Polaris input-border-hover / Fluent NeutralStroke1Hover / Carbon・shadcn 不變 = 多數派;Ant colorPrimaryHover 藍 hover 為少數派不採,藍色保留給 focus / 選中)|
 | `border-divider` | neutral-4 alpha 9% | 分隔線（比 border 更淡)/ **table 外框 + row divider 同色**(T-junction connectivity)|
 | `border-[var(--border-opaque)]` | neutral-5 opaque | alpha-immune 變體;cell bg 非白(disabled 灰底 / nested surface)時用 |
 
-選中狀態的邊框或文字使用 hover token：
+選中狀態的邊框或文字使用 base token（2026-07-06 拍板：持續選中站 base、hover 階專屬瞬時態——Ant / Atlassian / Material 三家「瞬時弱、持續強」實錘；SSOT = semantic.css「選中狀態」段）：
 
 ```tsx
-<div className="border-primary-hover text-primary-hover" />
+<div className="border-primary text-primary" />
 ```
 
 ### T-junction connectivity 原則(2026-05-04 升 SSOT)
@@ -798,4 +795,5 @@ SSOT → `.claude/references/structural-token-retention.md`(6 類保留 + sub-ag
 - `progress-bar.spec.md`
 - `separator.spec.md`
 - `skeleton.spec.md`
+- `slider.spec.md`
 - `token-system.spec.md`

package/src/tokens/color/semantic.css

@@ -67,7 +67,13 @@
    │  --border-hover  input/checkbox/radio hover 邊框（neutral-6）       │
    │  --divider       分隔線（neutral-4，比 border 更淡）                │
    │  --ring          focus 輪廓（= primary）                           │
-   │  選中狀態的邊框或文字 → 直接使用 var(--primary-hover)              │
+   │  選中狀態的邊框或文字 → 直接使用 var(--primary)                    │
+   │  (2026-07-06 拍板:持續選中站 base、hover 階專屬瞬時態——            │
+   │   Ant / Atlassian / Material 三家「瞬時弱、持續強」實錘)            │
+   │  選中之上的互動 = 同色相升降階(完整三階,2026-07-07 補):          │
+   │    hover → var(--primary-hover)、按壓 → var(--primary-active)      │
+   │  (Button pressed hover / Ant active 頁 hover 同派;實心填色家族     │
+   │   同理:bg-primary → hover bg-primary-hover,Checkbox/Switch/DateGrid)│
    └─────────────────────────────────────────────────────────────────────┘
 
    ┌─ Static Subtle ─────────────────────────────────────────────────────┐
@@ -137,7 +143,7 @@
    │     （不橋接成 utility class——只有 Tag/Avatar dismiss 一個 consumer）│
    └─────────────────────────────────────────────────────────────────────┘
 
-   選中邊框/文字 → border-[var(--primary-hover)] / text-[var(--primary-hover)]
+   選中邊框/文字 → border-primary / text-primary(2026-07-06 持續選中改 base,hover 階專屬瞬時態)
    ═══════════════════════════════════════════════════════════════════════ */
 
 

package/src/tokens/layoutSpace/layoutSpace.spec.md

@@ -320,5 +320,6 @@ document.documentElement.setAttribute('data-layout-space', 'lg')
 - `description-list.spec.md`
 - `empty.spec.md`
 - `overlay-surface.spec.md`
+- `pagination.spec.md`
 - `token-system.spec.md`
 - `uiSize.spec.md`

package/src/tokens/motion/motion.stories.tsx

@@ -0,0 +1,142 @@
+// @story-baseline: components/HoverCard/hover-card.stories.tsx#LinkPreview — 延遲體感 demo 消費真實 consumer(Button iconOnly auto-Tooltip + HoverCard 預設 delay),非手刻浮層
+import type { Meta, StoryObj } from '@storybook/react'
+import { Download } from 'lucide-react'
+import { Button } from '@/design-system/components/Button/button'
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from '@/design-system/components/HoverCard/hover-card'
+
+const meta: Meta = {
+  title: 'Design System/Tokens/Motion',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+Motion token 系統。目前唯一 token 家族 = **hover delay 3-tier**(「hover 觸發 → 延遲 N ms → overlay 顯示」)——目的不是動畫長度,是「user 真的想看」過濾器;overlay 開閉的 enter / exit 動畫由 Radix data-state + CSS 處理,系統**無** duration / easing token。
+
+完整規則:\`packages/design-system/src/tokens/motion/motion.spec.md\`
+
+**JS mirror**:Radix props(\`delayDuration\` / \`openDelay\` / \`closeDelay\`)只吃 number 不認 CSS var,故 consumer 消費 \`motion.ts\` 的 \`HOVER_DELAY_PLAIN_MS\` / \`HOVER_DELAY_RICH_MS\` / \`HOVER_DELAY_CLOSE_MS\`(與 \`motion.css\` 同值鏡像)。
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+
+function DelayRow({ token, value, usage, consumers }: {
+  token: string; value: string; usage: string; consumers: string
+}) {
+  return (
+    <div className="grid items-center gap-x-6 gap-y-1 border-b border-border py-4 last:border-0"
+      style={{ gridTemplateColumns: '200px 80px 1fr 220px' }}>
+      <div>
+        <code className="block text-caption font-medium text-fg-secondary">{token}</code>
+      </div>
+      <div className="text-caption font-mono text-fg-muted">{value}</div>
+      <div className="text-body text-foreground">{usage}</div>
+      <div className="text-caption text-fg-muted">{consumers}</div>
+    </div>
+  )
+}
+
+
+export const Overview: Story = {
+  name: '總覽',
+  render: () => (
+    <div className="max-w-4xl">
+      <h2 className="text-h3 mb-2">Hover Delay Tokens</h2>
+      <p className="text-body text-fg-secondary mb-6">
+        三層 tier:<code>plain</code>(被動文字提示)/ <code>rich</code>(含 fetch 的內容預覽,門檻更高)/
+        <code>close</code>(通用關閉緩衝)。命名對齊 Material 3「plain / rich tooltip」術語 +
+        DS 既有 <code>compact / rich</code> mode 詞彙。
+      </p>
+
+      <DelayRow
+        token="--hover-delay-plain"
+        value="500ms"
+        usage="純文字提示——被動 hint,user 真停留才觸發,避免滑過列表時 N 次視覺擾動"
+        consumers="Tooltip / OverflowIndicator"
+      />
+      <DelayRow
+        token="--hover-delay-rich"
+        value="700ms"
+        usage="內容預覽——含 fetch / multi-section,避免列表掃視誤觸發 fetch waterfall"
+        consumers="HoverCard / ProfileCard / Avatar"
+      />
+      <DelayRow
+        token="--hover-delay-close"
+        value="200ms"
+        usage="通用關閉緩衝——mouse leave 後 200ms 內移回不會關(誤滑出容錯)"
+        consumers="所有 hover overlay"
+      />
+
+      <p className="text-caption text-fg-muted mt-6">
+        實際 CSS 值見 <code>packages/design-system/src/tokens/motion/motion.css</code>;
+        JS number 鏡像見同目錄 <code>motion.ts</code>;tier 選擇表(何時用哪 token)見 <code>motion.spec.md</code>。
+      </p>
+    </div>
+  ),
+}
+
+
+/* 延遲體感 — 用真實 consumer 展示三個 token 的實際時序(非模擬動畫):
+   Tooltip 走全域 TooltipProvider delayDuration=500(= plain);
+   HoverCard Root 預設 openDelay=700 / closeDelay=200(= rich / close)。 */
+export const DelayFeel: Story = {
+  name: '延遲體感',
+  render: () => (
+    <div className="flex max-w-2xl flex-col gap-8">
+      <section className="flex flex-col gap-2">
+        <div className="text-body font-medium text-foreground">plain(500ms)— 工具列 icon 按鈕的文字提示</div>
+        <p className="text-caption text-fg-secondary">
+          hover 下方按鈕停留 500ms 才出現 tooltip;快速滑過不觸發。移開後 tooltip 立即依全域
+          Provider 收合節奏消失。
+        </p>
+        <div>
+          <Button iconOnly variant="text" size="sm" startIcon={Download} aria-label="下載簡報" />
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <div className="text-body font-medium text-foreground">rich(700ms)+ close(200ms)— 留言裡的人名預覽卡</div>
+        <p className="text-caption text-fg-secondary">
+          rich 內容(可能含 fetch)門檻比 plain 高 200ms——必須「真的想看」才停留 700ms;
+          移開後 200ms 內移回卡片不會關(close 緩衝)。
+        </p>
+        <p className="text-body leading-relaxed">
+          這版 onboarding 流程的視覺稿請找
+          {/* defaultOpen:讓 visual snapshot 看得到卡片(M15 OpenSnapshot);移開再 hover 即體驗 700/200ms 時序 */}
+          <HoverCard defaultOpen>
+            <HoverCardTrigger asChild>
+              <a
+                href="#"
+                onClick={(e) => e.preventDefault()}
+                className="text-primary underline underline-offset-2 mx-1 cursor-pointer"
+              >
+                陳美惠
+              </a>
+            </HoverCardTrigger>
+            <HoverCardContent
+              className="bg-surface-raised border border-border rounded-lg p-4"
+              style={{ boxShadow: 'var(--elevation-200)', width: 260 }}
+            >
+              <div className="flex flex-col gap-1">
+                <div className="text-body font-medium text-foreground">陳美惠</div>
+                <div className="text-caption text-fg-secondary">產品設計師 · Design Platform</div>
+                <div className="text-footnote text-fg-muted">台北 · GMT+8 · 上班時間 10:00–19:00</div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+          確認,她負責這一季的設計系統整合。
+        </p>
+      </section>
+    </div>
+  ),
+}

package/src/tokens/opacity/opacity.spec.md

@@ -64,7 +64,7 @@ Tailwind 提供 `opacity-{5/10/20/30/40/50/60/70/80/90/95}` 百分比 ladder,但
 
 ## 消費者
 
-直接套用 `opacity-disabled` 的元件（grep 驗證 2026-06-11）：Avatar（Field disabled context self-dim）、Button（`aria-disabled` 分支）、MenuItem、Rating（disabled / loading 整塊）、Steps、Switch、Textarea（disabled 分支）、DataTable（drag source 半透 + 整表 refresh loading reuse，經 `lib/drag-visual.ts`）。
+直接套用 `opacity-disabled` 的元件（grep 驗證 2026-07-05;Textarea 已全面 token-swap 化移除）：Avatar（Field disabled context self-dim）、Button（`aria-disabled` 分支）、MenuItem、Rating（disabled / loading 整塊）、Steps、Switch、DataTable（drag source 半透 + 整表 refresh loading reuse，經 `lib/drag-visual.ts`）。
 
 非消費者（曾誤列）：Slider / Sidebar 走灰階 token swap；Chip 無 opacity 用例；Field wrapper blanket 已移除（Avatar self-dim 取代，見 field-wrapper.tsx 註解）。
 

package/src/tokens/uiSize/uiSize.stories.tsx

@@ -0,0 +1,103 @@
+// @story-baseline: tokens/density/density.stories.tsx#UISize — token bar 展示慣例同源;本頁展示 size-tier 軸(xs/sm/md/lg + icon 兩 tier),density md/lg 軸在 Tokens/Density 不重複
+import type { Meta, StoryObj } from '@storybook/react'
+import { Download } from 'lucide-react'
+import { ICON_SIZE } from './icon-size'
+
+const meta: Meta = {
+  title: 'Design System/Tokens/UiSize',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+元件高度的語義 token(rem 單位,尊重使用者瀏覽器字體設定)。\`--field-height-*\` 是核心家族——Button / Input / Select 等互動元件共享 **default \`md\`**;另有 table-row / tab-height / chrome-header 等家族(見 spec)。
+
+完整規則:\`packages/design-system/src/tokens/uiSize/uiSize.spec.md\`(family 成員清單 / default md 硬規則 / icon 兩 tier / chrome header 選型)
+
+**md ↔ lg density 軸**的對照展示在 \`Design System/Tokens/Density\`,本頁不重複;此處展示 **size tier 軸**(xs / sm / md / lg)與 icon 尺寸的離散配對。
+        `,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+
+function HeightRow({ token, px, usage, isDefault }: {
+  token: string; px: string; usage: string; isDefault?: boolean
+}) {
+  return (
+    <div className="grid items-center gap-x-6 border-b border-border py-3 last:border-0"
+      style={{ gridTemplateColumns: '200px 160px 60px 1fr' }}>
+      <div>
+        <code className="block text-caption font-medium text-fg-secondary">{token}</code>
+        {isDefault && <span className="text-caption text-fg-muted">★ family default</span>}
+      </div>
+      <div
+        className="rounded-md bg-primary"
+        style={{ height: `var(${token})`, width: '100%' }}
+      />
+      <span className="text-caption font-mono text-fg-muted">{px}</span>
+      <span className="text-body text-foreground">{usage}</span>
+    </div>
+  )
+}
+
+function IconTierRow({ tier, iconPx, note }: { tier: string; iconPx: number; note: string }) {
+  return (
+    <div className="grid items-center gap-x-6 border-b border-border py-3 last:border-0"
+      style={{ gridTemplateColumns: '260px 120px 1fr' }}>
+      <code className="text-caption font-medium text-fg-secondary">{tier}</code>
+      <div className="flex items-center gap-2">
+        <Download size={iconPx} className="text-foreground" aria-hidden />
+        <span className="text-caption font-mono text-fg-muted">{iconPx}px</span>
+      </div>
+      <span className="text-body text-foreground">{note}</span>
+    </div>
+  )
+}
+
+
+export const Overview: Story = {
+  name: '總覽',
+  render: () => (
+    <div className="max-w-3xl">
+      <h2 className="text-h3 mb-2">Field Height</h2>
+      <p className="text-body text-fg-secondary mb-4">
+        Button / Input / Checkbox SelectionItem 等互動元件的高度。所有 field-height 消費者
+        <strong>不傳 size 時自動對齊 md</strong>——Form / Toolbar 並排多控件默認等高。
+        下列為 md density 預設值(lg density 對照見 Tokens/Density)。
+      </p>
+
+      <HeightRow token="--field-height-xs" px="24px" usage="密集 UI 地板高度;固定不隨 density 縮放。獨立互動元件不得低於此高度" />
+      <HeightRow token="--field-height-sm" px="28px" usage="輕量浮層(Popover body / footer)內的控件尺寸" />
+      <HeightRow token="--field-height-md" px="32px" usage="Form / Dialog / 一般頁面的控件尺寸" isDefault />
+      <HeightRow token="--field-height-lg" px="36px" usage="需要更大點擊目標的場景;同時切換到大 icon tier(20px)" />
+
+      <h2 className="text-h3 mb-2 mt-10">Icon 尺寸兩 tier</h2>
+      <p className="text-body text-fg-secondary mb-4">
+        Icon 尺寸由元件引用的 field-height token 決定——離散兩組配對,無中間值、不需公式。
+        程式化 SSOT 是 <code>ICON_SIZE</code> 常數(本表直接消費真值渲染)。
+      </p>
+
+      <IconTierRow
+        tier="field-height-xs / sm / md"
+        iconPx={ICON_SIZE.sm}
+        note="搭配 text-body(14px);Checkbox / Radio 控件同 16px"
+      />
+      <IconTierRow
+        tier="field-height-lg"
+        iconPx={ICON_SIZE.lg}
+        note="搭配 text-body-lg(16px);Checkbox / Radio 控件同 20px"
+      />
+
+      <p className="text-caption text-fg-muted mt-6">
+        Stroke icon 下限 12px(僅出現在 Checkbox 等指示器內部);Rating / Avatar 等 8 個 carve-out
+        見 <code>uiSize.spec.md</code>「跨 regime pointer index」。table-row / tab-height /
+        chrome-header 等其餘 uiSize 家族與選型 decision tree 同見該 spec。
+      </p>
+    </div>
+  ),
+}