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

package/src/patterns/element-anatomy/element-anatomy.spec.md

@@ -48,7 +48,7 @@ Taxonomy 跟 F1+F2 runtime primitive **co-locate 在同 folder** 是 `packages/d
 | Sub-profile | 成員 | Padding | Typography | Cursor | 為什麼 |
 |-------------|------|---------|-----------|--------|------|
 | **Action trigger** | Button / SegmentedControl / Chip | 較鬆(xs=`px-2`, sm+=`px-3`) | 對應 size 的 font-medium | pointer | 需命中區 + 視覺重量搶點擊焦點 |
-| **Data indicator** | Tag | 較緊(`px-1` 所有 size) | font-normal | text | Passive 讀取,不搶焦點 |
+| **Data indicator** | Tag | 較緊(`px-1` 所有 size) | font-normal(sm 例外 `font-medium`,詳 `tag.spec.md` 尺寸表) | text | Passive 讀取,不搶焦點 |
 
 ---
 
@@ -89,15 +89,15 @@ Switch / Checkbox / Radio / Avatar / Badge / CircularProgress / ProgressBar / Sk
 Dialog / Sheet / Popover / Tooltip / HoverCard / Coachmark / Command / SelectMenu / DropdownMenu
 
 **共同約束**:
-- 必消費 `patterns/overlay-surface/` 的 `SurfaceHeader` / `SurfaceBody` / `SurfaceFooter`(padding SSOT)
+- 結構化 chrome 浮層(Dialog / Sheet / Popover;Coachmark 經 `PopoverHeader`)消費 `patterns/overlay-surface/` 的 `SurfaceHeader` / `SurfaceBody` / `SurfaceFooter`(padding SSOT;實際 consumer 名單見 `overlay-surface.spec.md`「Consumers」)。menu 形浮層(Command / SelectMenu / DropdownMenu)走自有 menu surface canonical(`floatingLayerClass` + `py-2`);Tooltip(純文字 surface)與 HoverCard(behavior primitive,內容由 consumer 排)不消費 Surface*(2026-05-18 M18 anchor)
 - elevation 走 `--elevation-200`+ 的 overlay layer
-- dismiss 走 `onClose`(語意:關閉 overlay session,見 CLAUDE.md 命名 canonical)
+- dismiss 走 `onClose`(語意:關閉 overlay session,見 `packages/design-system/ds-canonical/references/props-naming.md`「關閉 / 移除類 callback canonical」)
 - 部分 overlay 有 modal vs non-modal 分流(Dialog / Sheet modal;Popover / HoverCard non-modal)
 - 在 dark-mode context(如 FileViewer chrome)中需支援 `data-theme="dark"` 子樹
 
 ### Page-composite(頁面內 composite,無 overlay 性質)
 
-Tabs / Accordion / DataTable / Calendar / Carousel / Breadcrumb / Sidebar / NameCard / FileItem / FileUpload / FileViewer / OverflowIndicator
+Tabs / Accordion / DataTable / Calendar / Carousel / Breadcrumb / Sidebar / ProfileCard / FileItem / FileUpload / FileViewer / OverflowIndicator
 
 **共同約束**:
 - 消費多個 row primitive 或 self-contained primitive
@@ -110,9 +110,9 @@ Tabs / Accordion / DataTable / Calendar / Carousel / Breadcrumb / Sidebar / Name
 CheckboxGroup / RadioGroup / FieldGroup(若建)
 
 **共同約束**:
-- 自己**無 render**(transparent wrapper)
-- 提供 context(`CheckboxGroupContext`)給 descendant 同步 state
-- spec 應明文「本元件無視覺」,對應 anatomy story 只有 `Overview` + `Inspector` 兩個(no ColorMatrix / SizeMatrix)
+- 自己**無視覺 chrome**(無 bg / border / radius)——僅渲染 `role="group"` layout 容器 + 提供 context(`CheckboxGroupContext` 等)給 descendant 同步 state;視覺由 descendant(Checkbox / RadioGroupItem / SelectionItem)承載
+- RadioGroup 註記:兼任 Field 家族「承載欄位值的互動控件」(見 `field-controls.spec.md`「哪些元件吃 `<Field disabled>` cascade」),有 display / empty mode 內容渲染,其 anatomy story 因此含 ColorMatrix / SizeMatrix
+- spec 應明文「本元件無自有視覺 chrome」;純 wrapper 的 anatomy story 最小集 = `Overview` + `Inspector`
 
 ---
 
@@ -141,12 +141,12 @@ Family 4 的 Input / Select 視覺對齊 Family 1 的 menu-item(高度、字體
 
 ## 新元件判斷流程
 
-1. **垂直列表裡?** → Family 1(menu 容器)/ Family 2(頁面)
+1. **垂直列表裡?** → Family 1(menu 容器)/ Family 2(頁面)——分界看「容器 + 閱讀模式」:浮層 menu 內掃視選擇 = Family 1(scanning),頁面上閱讀內容 = Family 2(reading);深度規格詳 `item-anatomy.spec.md` Family 1 / Family 2 章節
 2. **單行可點擊 / 可讀的 pill?** → Family 3(action trigger or data indicator)
 3. **單行可編輯資料?** → Family 4(必須視覺對齊 Family 1)
 4. **都不是?** → **停下討論**——新 family 還是 self-contained
 
-CLAUDE.md `# 4-Family Layout Model` 留概要 + 判斷流程(每 session signal)。本檔 own 完整 taxonomy + Family 3 sub-profile + size pairing + consumers + exclusions。
+`AGENTS.md` `# 4-Family Layout Model` 留每 session 導航；本檔 own 完整 taxonomy + 判斷流程 + Family 3 sub-profile + size pairing + consumers + exclusions。
 
 ---
 
@@ -174,7 +174,7 @@ CLAUDE.md `# 4-Family Layout Model` 留概要 + 判斷流程(每 session signal)
 
 Consumer 自建 chrome-like div 帶 bg/border/shadow 時,參考上表或就近取 `--layout-space-*` token。**具體值允許偏離,但 breathing 本身必存在**。
 
-**世界級對照**(DS-wide 共識):
+**世界級對照**(DS-wide 共識): <!-- @benchmark-unverified -->
 - Material Design 3:`<mat-card-content>` 16dp / `<mat-dialog-content>` 24dp / Drawer section padding
 - Polaris(Shopify):`<Page>` 16-20px / `<Card>` 16-20px / `<Modal>` 20px
 - Atlassian:`<Box padding="space.200">` / `<ModalBody>` 24px / Drawer body padding
@@ -191,8 +191,8 @@ Consumer 自建 chrome-like div 帶 bg/border/shadow 時,參考上表或就近
 
 **Enforcement**:
 - Chrome primitive(SurfaceHeader / SurfaceBody / SurfaceFooter / Input wrapper / Field wrapper)**已 own canonical padding**,繼續守 SSOT
-- Consumer 自建的有視覺邊界 div → hook `check_container_breathing.sh` warn(grep `bg-*|border|shadow-*` 無 `p*-`)
-- Audit dim 新增:「consumer 自建 chrome 是否有 inner padding」
+- Consumer 自建的有視覺邊界 div → 無 write-time hook(`check_container_breathing.sh` 已 retired,檔存 `.claude/hooks/retired/`)
+- 機械檢查走 audit dim 22「視覺容器 inner breathing」(design-system-audit SKILL)batch sweep:「consumer 自建 chrome 是否有 inner padding」
 
 **與既有規則的關係**:
 - `overlay-surface.spec.md` 「M11 state walk hover 檢查(三 invariant 必同時 ✓)」第 3 條(content 在 hover bg 內 breathing)= 本規則的**應用層 instance**(hover bg 也算「permanent」在該 state 內),非獨立規則
@@ -205,11 +205,15 @@ Consumer 自建 chrome-like div 帶 bg/border/shadow 時,參考上表或就近
 - `patterns/element-anatomy/item-anatomy.spec.md` — Family 1+2 row anatomy deep SSOT + runtime primitive(`<MenuItem>` canonical + `<ItemIcon>` / `<ItemAvatar>` / `<ItemLabel>` / `<ItemSuffix>` / `<ItemInlineAction>` slot components)
 - `components/Button/button.spec.md` — Family 3 Pill anatomy SSOT
 - `components/Field/field-controls.spec.md` — Family 4 Field control anatomy SSOT
-- CLAUDE.md `# 4-Family Layout Model` — 每 session signal 的概要 + judgment flow
+- `AGENTS.md` `# 4-Family Layout Model` — 每 session signal 的 owner 導航
 
 ## 被引用(auto-maintained,Dim 3 reciprocal audit)
 
 > 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
 
+- `button.spec.md`
 - `calendar.spec.md`
+- `field-controls.spec.md`
+- `field.spec.md`
+- `item-anatomy.spec.md`
 - `time-picker.spec.md`

package/src/patterns/element-anatomy/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/gen-component-indexes.mjs — DO NOT EDIT MANUALLY.
+// Re-export pattern enables package.json exports map subpath:
+//   import { ... } from '@qijenchen/design-system/{components,patterns}/<Dir>'
+// Regenerate: node scripts/gen-component-indexes.mjs
+export * from './item-anatomy'
+export * from './truncated-text'

package/src/patterns/element-anatomy/inline-action.spec.md

@@ -1,6 +1,6 @@
 <!-- @benchmark-cited: D5 retrofit 2026-05-18 — verified 0 world-class DS claim in body; blanket retract removed. -->
 
-# Inline Action 設計規格(SSOT)
+# Inline Action 設計原則(SSOT)
 
 **Layout Family**:non-family(hosted inline element,無 own layout — 由宿主 family 1/4 提供)。
 
@@ -27,6 +27,8 @@
 | focus-visible | `outline: 2px solid var(--ring)` | — |
 | 宿主 disabled | 不渲染 inline action | — |
 
+**Loading(明文 N/A)**:inline action **無 loading 態**——icon 級靶子沒有空間承載 spinner 且換渲會位移幾何,故不設 `aria-busy` / spinner surface。async 動作(row approve / retry / API delete)兩條路:(a) 觸發後由宿主層呈現 in-flight 結果(row pending 樣式 / Toast / optimistic update);(b) 需要使用者可感知的進行中狀態 → **升級為 `<Button loading>`**(Button spec「loading」段:CircularProgress + 自動 disabled + `aria-busy`),不用 inline action。double-trigger 防護由 consumer handler 冪等 / 重入 guard 承擔(對齊 `form-validation.spec.md`「Double-submit 防護」)。
+
 **Overlay trigger canonical**(2026-04-29 訂 / 2026-05-02 改 / 2026-05-05 prop 化):trigger 透過 `asChild` 作 DropdownMenu / Popover / Tooltip / HoverCard trigger 時,Radix 自動 set `data-state="open"`,**trigger 維持 host hover 樣式**直到浮層關閉。對齊**狀態極簡派**(shadcn / Radix Themes / Material — 不另開 4th token);避免 state 增生 + 跨 host(neutral / colored)規則同步。
 
 **2026-05-05 修正:overlay vs in-place 語意分離**。`Radix Collapsible.Trigger` 也 emit 同 `data-state="open"`,但語意完全不同(展開內容**接在下方非 floating**,user 不需追溯)。原 `ItemInlineActionButton` 將規則**無條件**套用於所有 `data-state=open`,造成 Sidebar collapsible group label 的 chevron 展開時殘留 hover bg(2026-05-05 user reported)。修正:`ItemInlineActionButton` 加 `overlayTrigger?: boolean` prop,**default `false`**。consumer 顯式宣告:
@@ -43,23 +45,27 @@
 
 Inline action icon 色彩規則 **依 host 是否有自帶色彩分兩支**。共同精神:inline action 視覺融入 host — neutral host 的融入方式是「退到 muted」,colored host 的融入方式是「接收 host 色」。
 
-**預設（neutral host）**:預設 `fg-muted`,hover / active 時變 `foreground`
+**預設（neutral host）**:預設 `fg-muted`,hover / active 時變 `fg-secondary`(**往前一階,不跳階**;2026-07-30 user 拍板)
+- **階梯 root invariant**:`fg-muted`(neutral-7)→ `fg-secondary`(neutral-8)→ `foreground`(neutral-9)。弱化 icon 只走一階;rest 已是 `fg-secondary` 的整列 / 文字 hover(如 `chip.tsx` / TreeItem row)→ `foreground` 同樣是一階,合規
+- **世界級對照**:Fluent 2 `packages/tokens/src/alias/lightColor.ts`——`neutralForeground3Hover` 就等於 `neutralForeground2` 的值(grey[26]),`neutralForeground2Hover` = grey[14](https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/alias/lightColor.ts);MUI `Chip.js` deleteIcon `alpha(text.primary, .26)` → hover `.4`(不到底,https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Chip/Chip.js)。Ant Design Tag close(`colorIcon` .45 → `colorTextHeading` .88)是唯一全跳,其 rest 值遠淡於本 DS `fg-muted`,travel 空間不對等,不採
+- **token 層 rule owner**:`tokens/color/semantic.css:53`「弱化 icon hover 後變 `fg-secondary`(neutral-8)」——本段與該行為同一 invariant 的兩個 home,禁互相漂移(機械強制:`check_pattern_invariants.sh` C.5)
 - 適用:Field endAction（Input clear button）/ TreeItem inline action / Menu inline action / DropdownMenu trigger inline action 等 **neutral 容器內**的 inline action
 - 語意:utility icon 是輔助操作,預設退到背景,hover 時提示可操作
 
 **例外（colored host）**:**繼承 host 文字色**（非 `fg-muted`）
 - 適用:**Tag dismiss** / 未來任何 **宿主自帶 branded / categorical 色彩** 的 inline action
 - 語意:宿主 bg 有色（Tag subtle blue 底 + blue-text 文字）,inline action icon 用 `fg-muted` 會視覺不連貫（視覺斷裂 / 顏色不連貫）;繼承 host 文字色維持「一個整體視覺單元」
-- Hover / active 背景:跟 host 同色系的 hover / active token（例 Tag solid blue dismiss → `--blue-hover`）
+- Hover / active 背景**依 host 深淺分支**(2026-07-07 補措辭缺口,對齊 tag.spec + code 既有行為):**solid** colored host → 同色系 hover / active token(Tag solid blue dismiss → `--blue-hover`;solid neutral → `--inverse-neutral-hover/active`);**subtle** colored host(categorical step-1 淺底)→ 維持預設 `--neutral-hover/active`——淺底上中性遮罩對比即足,同色系 step-1 遮罩幾乎不可辨。逐 variant 對照表 SSOT 見 `tag.spec.md`「Dismiss 行為(Inline Action 客製)」段
 
 **判斷法**:宿主 bg 是 surface / transparent（neutral）→ 走預設;宿主有 branded / categorical 色彩 → 走 colored host 例外。
 
 **現況清單**:
 | Host | 規則分類 | Icon 色 |
 |------|---------|--------|
-| Field / Input / NumberInput / DatePicker / Combobox endAction | neutral host | `fg-muted` → `foreground` |
-| TreeItem / Menu / DropdownMenu inline action | neutral host | `fg-muted` → `foreground` |
-| Tag dismiss | colored host | 繼承 Tag 文字色 |
+| Field / Input / NumberInput / DatePicker / Combobox endAction | neutral host | `fg-muted` → `fg-secondary` |
+| TreeItem / Menu / DropdownMenu inline action | neutral host | `fg-muted` → `fg-secondary` |
+| Tag dismiss(**neutral subtle**) | **neutral host** | `fg-muted` → `fg-secondary`(2026-07-30 修正:`bg-secondary` 是中性宿主,依上方判斷法走預設分支;97e62a80 曾誤把全 Tag variant 歸 colored host)|
+| Tag dismiss(**有色 variant / solid**) | colored host | 繼承 Tag 文字色 |
 
 ### 尺寸對照
 
@@ -142,7 +148,7 @@ Q3. Row 多大?
 
 1. **Inline Action 不參與 action group 規則** — 沒有 Button 的 variant chrome / Separator 分群 / size 對稱要求;只是 host 內部 tap target
 2. **Button 必對齊 action group 規則** — 同 size、Separator 分群(詳 `patterns/action-bar.spec.md`)
-3. **Dismiss X(close)特殊弱化** — Inline Action default 已 `fg-muted`;Button 需加 `dismiss` prop 才 override(詳本 spec 下方 dismiss 節)
+3. **Dismiss X(close)特殊弱化** — Inline Action default 已 `fg-muted`(hover 一階 `fg-secondary`);Button 需加 `dismiss` prop 才 override(詳本 spec 下方 dismiss 節)
 
 #### Real case 表(所有 DS 用法一覽)
 
@@ -153,7 +159,7 @@ Q3. Row 多大?
 | Menu / TreeView / SidebarMenuButton / SelectionItem suffix | Row inline flow | Inline Action | Inline with content |
 | SidebarGroup header chevron | Aux toggle | Inline Action | Inline header toggle |
 | Select ChevronDown / DatePicker Calendar / Combobox ChevronDown | Field chrome(裝飾)| **Decorative**(不是 action)| Click falls through;host 是 trigger |
-| **FileItem compact**(row 24)| Row slot | Inline Action | Row 太小容不下 Button xs 24 |
+| **FileItem compact**(row 24)| Row slot | Button xs iconOnly(`var(--field-height-xs)` 容器 + data-unbounded 收斂到 1lh)| 2026-04-23 user 統一 rich + compact 同 primitive,不撐高 row(見 file-item.tsx 註解)|
 | **FileItem rich**(row 56 sm/md rich)| Row slot | Button xs iconOnly(24 固定)| ≤ 24 cap,不放大 |
 | **DataTable header cell internal**(sort indicator / ⌄ menu / filter funnel / pin)| Header cell host internal | **Inline Action**(`ItemInlineActionButton` asChild for DropdownMenu)| Embedded inline,跟 label 一體 |
 | **DataTable body cell internal**(display endAction / clear / edit indicator)| Cell content host internal | **Inline Action**(自動繼承 Field family endAction)| Field display 元件已對齊 |
@@ -166,7 +172,7 @@ Q3. Row 多大?
 #### Content-role vs action-role 分層(附補充原理)
 
 Row 內元件分兩類,**size 規則不同**:
-- **Content-role**(display 資料):`<Input mode="display">` / Badge / Avatar / Tag → size 對應 row tier(sm row → sm)
+- **Content-role**(display 資料):`<Input mode="view">` / Badge / Avatar / Tag → size 對應 row tier(sm row → sm)
 - **Action-role**(互動觸發):row action icon → **固定 ≤ 24**,不參與 content size-pair
 
 Row action 的 affordance 是「次要功能」,不是 primary CTA。Button chrome 過度強調;用 **Button xs 24 固定** 提供 command affordance 但不侵蝕 content hierarchy。
@@ -188,9 +194,14 @@ Row action 的 affordance 是「次要功能」,不是 primary CTA。Button chro
 - 尺寸:`patterns/overlay-surface/overlay-surface.spec.md`「Chrome dismiss size canonical」(overlay sm + v5 trick / banner xs explicit)
 - variant / divider:`patterns/action-bar/action-bar.spec.md`(corner action group)
 
+### 邊界案例
+
+- **帶可見文字 label 的觸發**:不是 Inline Action — Inline Action 必 icon-only(label 走 tooltip + `aria-label`,見「實作要求」);需要可見文字 → `Button`(text / tertiary)。
+- **Dark mode**:hover / active / fg 全走 semantic token(`--neutral-hover` 等)自動 adapt,Inline Action 不 own dark token;colored host 的繼承色由 host token 處理(見 `tag.spec.md`)。
+
 ### Inline action 共用元件(`ItemInlineAction` / `ItemSuffix`)
 
-Canonical 實作於 `item-anatomy.tsx`,匯出 `ItemInlineAction` / `ItemSuffix`(從 `RowSizeContext` 自動查 icon size / hover bg / tooltip / aria-label / fg-muted → foreground 全內建)。
+Canonical 實作於 `item-anatomy.tsx`,匯出 `ItemInlineAction` / `ItemSuffix`(從 `RowSizeContext` 自動查 icon size / hover bg / tooltip / aria-label / fg-muted → `fg-secondary` 全內建)。
 
 ```tsx
 // 單一 action
@@ -199,7 +210,7 @@ Canonical 實作於 `item-anatomy.tsx`,匯出 `ItemInlineAction` / `ItemSuffix`(
 <ItemSuffix hoverReveal>{actions.map((a) => <ItemInlineAction action={a} />)}</ItemSuffix>
 ```
 
-**Host 走宣告式 API**(`inlineActions?: InlineActionConfig[]` prop)— 不自刻 button JSX。已遷移:`SidebarMenuButton`。Pending refactor:`Input` / `NumberInput` / `Tag` / `LinkInput` / `Combobox`。
+**Host 走宣告式 API**(`inlineActions?: InlineActionConfig[]` / `endAction?: InlineActionConfig` prop)— 不自刻 button JSX。已遷移:`SidebarMenuButton` / `Input` / `NumberInput`(2026-05-31 infra-audit 修 stale status:verify input.tsx/number-input.tsx 已用 endAction InlineActionConfig)、`Tag`(2026-05-01:宣告式 `onRemove` + 內部 `ItemInlineActionButton`,見 tag.tsx)。`LinkInput` / `Combobox` 屬下方「不適用清單」(右側 chrome 獨佔),內建 inline action 已直接消費 `ItemInlineAction` primitive——無 pending。
 
 ### Dismiss canonical — X close only
 
@@ -224,13 +235,13 @@ Canonical 實作於 `item-anatomy.tsx`,匯出 `ItemInlineAction` / `ItemSuffix`(
 
 #### `dismiss` prop 觸發條件(Button 限定)
 
-**明示**:`<Button dismiss />` 或 callback = `onClose` / `onDismiss` → 觸發弱化 override(icon fg-muted → hover foreground;variant 強制 text)
+**明示**:`<Button dismiss />`(唯一機械觸發;Button 無 `onClose` / `onDismiss` prop)→ 觸發弱化 override(icon `fg-muted` → hover `fg-secondary`;variant 強制 text)。語意判準:點擊語意 = X close 才用 dismiss
 
 **不觸發**:callback = `onRemove`(collection 操作)/ `onClear`(欄位清空)/ `onDelete` — 這些不是 dismiss 語意,Button 用對應 variant 即可
 
 #### Colored host 例外(Tag 內 X)
 
-Tag solid / branded color variant(`red / blue / orange`)→ Tag 內 X **繼承 host 文字色**(非 fg-muted),hover bg 配色相。詳「Icon 色彩原則」段。
+Tag solid / branded color variant(`red / blue / orange`)→ Tag 內 X **繼承 host 文字色**(非 fg-muted),hover bg 配色相。**neutral subtle Tag 例外**:中性宿主 → 走預設 `fg-muted` → `fg-secondary`(2026-07-30)。詳「Icon 色彩原則」段。
 
 #### ❌ 禁止
 
@@ -244,7 +255,7 @@ Tag solid / branded color variant(`red / blue / orange`)→ Tag 內 X **繼承 h
 
 sonner toast auto-dismiss / Radix Dialog `DialogClose` wiring — 第三方只管 state logic(何時關),**我們渲染的視覺按鈕必套對應 canonical**(chrome corner → Button dismiss;chrome padding → Inline Action)。
 
-hook `check_story_anatomy.sh` 規則 B 已在 stories 層攔 label Button 作 dismiss。
+hook `check_story_invariants.sh` R1(原 `check_story_anatomy.sh` 規則 B,已 folded)已在 stories 層攔 label Button 作 dismiss。
 
 ---
 
@@ -279,7 +290,7 @@ hook `check_story_anatomy.sh` 規則 B 已在 stories 層攔 label Button 作 di
 - `disabled / readonly` 模式 / Sidebar `collapsible=icon` 模式跟 config 一致(slot 也要被相同條件隱藏)
 - Reveal 模式(`actionsReveal="hover"`)、絕對定位 chrome 跟 config 共用,consumer 不需重做
 - Padding budget(Sidebar)slot mode 預設按 1 icon 寬度預留,多 icon 寬度需 consumer 自控 className
-- 視覺一致性 by consumer — 但 **app-code 不可直接 import L3 primitive**(`ItemInlineActionButton` / `ItemInlineAction` / `RowSizeProvider`),由 `check_l3_primitive_import.sh` 攔截。需要視覺一致 inline-action button 時,(a) 用 host 自帶 slot(此 escape hatch)、(b) 用 `<Button iconOnly variant="text" />`、(c) 走 spec rationale 例外申請
+- 視覺一致性 by consumer — 但 **app-code 不可直接 import L3 primitive**(`ItemInlineActionButton` / `ItemInlineAction` / `RowSizeProvider`),由 `check_canonical_propagation.sh` E.2(原 `check_l3_primitive_import`,已 folded,P0 BLOCK)攔截。需要視覺一致 inline-action button 時,(a) 用 host 自帶 slot(此 escape hatch)、(b) 用 `<Button iconOnly variant="text" />`、(c) 走 spec rationale 例外申請
 
 **現況清單**(2026-04-25 補完):
 - ✅ `Input.endSlot`
@@ -289,7 +300,7 @@ hook `check_story_anatomy.sh` 規則 B 已在 stories 層攔 label Button 作 di
 
 **不適用清單**:DatePicker / Combobox / Select / TimePicker / LinkInput 右側由元件自帶 chrome 獨佔(Calendar / ChevronDown / Clock / ExternalLink 等 intrinsic affordance),不開放 consumer 放置 endAction/endSlot — 這些元件的 inline-action 需求走**內建 clear X**(consumer 透過 `clearable` prop opt-in)或 `<Button iconOnly />` 放在 Field 外側。Escape hatch canonical 不涵蓋此類 host(本質上非 consumer-facing slot)。
 
-**世界級對照**:
+**世界級對照**: <!-- @benchmark-unverified -->
 - Material UI:`InputAdornment` ReactNode slot(無 config,純 escape hatch 派 — 我們的 90/10 比 Material 更有結構)
 - Polaris:`TextField.connectedRight` ReactNode 只接 Button,但無 config-based 簡化,API 一致性差
 - Ant Design:`Input.suffix` ReactNode slot,跟 Material 同派
@@ -303,13 +314,13 @@ hook `check_story_anatomy.sh` 規則 B 已在 stories 層攔 label Button 作 di
 
 - `alert.spec.md`
 - `breadcrumb.spec.md`
-- `button.spec.md`
 - `data-table.spec.md`
 - `field-controls.spec.md`
+- `item-anatomy.spec.md`
+- `overlay-surface.spec.md`
 - `popover.spec.md`
-
-## 被引用(auto-maintained,Dim 3 reciprocal audit)
-
-> 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
-
 - `sheet.spec.md`
+- `sidebar.spec.md`
+- `tag.spec.md`
+- `tree-view.spec.md`
+- `uiSize.spec.md`