@qijenchen/design-system 0.1.0-beta.85 → 0.1.0-beta.87

package/src/components/Field/field-wrapper.tsx

@@ -1,22 +1,24 @@
 // @internal — DS-internal 單元(Field 家族 chrome 基底,consumer 用 Field/Input 等 wrapper 不直用);不隨 index.ts re-export 進 npm public surface。
 // @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.
 import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
 
 // ── Field Wrapper Styles ────────────────────────────────────────────────────
 // 所有 Field 元件共用的 input wrapper 樣式。
 //
-// 4 種模式(2026-05-05 expand):
+// 4 種模式(2026-05-05 expand;2026-07-16 round16 `display`→`view` 更名 + Model A):
 //   edit     — bg-surface, border, hover/focus 回饋(可編輯 input)
-//   display  — 純展示(無 input chrome、無 affordance);語意「read-only 內容,展示給人看」。
-//              對齊 Carbon read-only / PatternFly inline-edit hidden-input。
+//   view     — 純展示值(非表單);**Model A = edit 幾何減 chrome**(透明 bg/border,**保留 px 內距 + 高度**),
+//              故 read↔edit 零跳。對齊 Atlassian inline-edit(read=edit 幾何)+ Bootstrap plaintext(留 padding)。
 //   readonly — bg-readonly(neutral-2), 無邊框, 文字正常色(input chrome 但鎖定;token 獨立於 disabled)
 //   disabled — bg-disabled(neutral-2), 無邊框, 文字灰化
 //
 // 2 種視覺外殼(variant;2026-07-09 `bare` 退役後):
-//   default — 完整 chrome(form input 場景)
+//   default — 完整 chrome(form input 場景);view×default = edit 幾何減 chrome(留 px/py)
 //   naked   — cell-as-input substrate(DataTable);**edit×naked 自畫 border-based state machine**
 //              (border-border → hover:border-border-hover → focus-within:border-primary → error 紅框);
-//              display/readonly/disabled×naked 用 transparent border,由 host cell 提供視覺邊框
+//              view×naked = bare(host TD 給 padding)。**view×default ≠ view×naked**(不 collapse)。
+//              (2026-07-16 cell disabled 態廢除 → readonly×naked/disabled×naked 死格已移除)
 //
 // 高度:固定 h = field-height token(rem),與 Button 共用同一組 token。
 
@@ -45,7 +47,7 @@ export const fieldWrapperStyles = cva(
     variants: {
       mode: {
         edit: '',
-        display: '',
+        view: '',
         readonly: '',
         disabled: '',
       },
@@ -54,7 +56,7 @@ export const fieldWrapperStyles = cva(
         default: '',
         // naked — cell-as-input(Notion / Airtable / Excel canonical)。**edit×naked 自畫** border +
         // hover:border-border-hover + focus-within:border-primary + error 紅框(v14 border-based state
-        // machine,見下方 compoundVariants L182-196);display/readonly/disabled×naked 用 transparent
+        // machine,見下方 compoundVariants L182-196);view×naked 用 transparent
         // border 由 host cell 提供視覺邊框,內部 input 純文字承載。
         // 世界級對照:Airtable / Notion / Excel / Google Sheets cell editing。
         // (2026-07-09 `bare` variant 已退役 — 見 field-types.ts FieldVariant 註解;
@@ -126,13 +128,18 @@ export const fieldWrapperStyles = cva(
       },
       { mode: 'edit', variant: 'default', error: false, className: 'focus-within:!border-primary focus-within:hover:!border-primary' },
       {
-        mode: 'display',
+        // 2026-07-16 round16 Model A(user GO,推翻 2026-05-13 Path Ⅰ 的 `!px-0 !py-0`):
+        // view×default = **edit 幾何減 chrome** — 保留 size 軸的 `px-[var(--field-px)]` + `h-field-*`,
+        // 只拔 border/bg(透明)。理由 = view 用在 cell/inline-edit/詳情,要對齊的是「edit 的值位置」
+        // (非 label 左緣),故水平垂直都留 → view 與 edit 同一顆控件、只差 chrome → read↔edit 零跳。
+        // 世界級對照:Atlassian inline-edit(read=edit 幾何,靠容器負邊距對齊)+ Bootstrap
+        // `.form-control-plaintext`(`padding: $input-padding-y 0` 留 padding);我們比 Bootstrap 更徹底
+        // (連水平 px 也留),因用例是 align-to-edit 非 align-to-label。詳 field-controls.spec.md「軸一 view mode」
+        // + planning/2026-07-15-inline-edit-field-mode-remediation.md round16。
+        // ⚠️ view×default ≠ view×naked:naked = bare(cell substrate,host TD 給 padding);default = 留幾何。
+        mode: 'view',
         variant: 'default',
-        // 2026-05-13 Q3 Path Ⅰ(user 拍板 Path Ⅰ 全 zero chrome + codex V2 verdict + field-controls.spec.md (d)):
-        // default display = zero chrome — !px-0 !py-0 override size token 的 px-[var(--field-px)],跟 Select / Combobox
-        // / DatePicker / TimePicker / LinkInput non-D-path bare-span idiom 一致(Carbon read-only / Stripe
-        // display / Notion property / Polaris readonly TextField 全 zero chrome)。
-        className: 'bg-transparent border border-transparent !px-0 !py-0',
+        className: 'bg-transparent border border-transparent',
       },
       {
         mode: 'readonly',
@@ -203,7 +210,7 @@ export const fieldWrapperStyles = cva(
       { mode: 'edit', variant: 'naked', error: false, className: 'focus-within:!border-primary focus-within:hover:!border-primary' },
       {
         // 2026-05-12 fix v2(M32 root invariant audit):
-        //   Q1 root invariant?:cell-as-input display 視覺位置 = `cell.items-{X}` × `Field.height`
+        //   Q1 root invariant?:cell-as-input view 視覺位置 = `cell.items-{X}` × `Field.height`
         //                       兩變數函數;canonical = autoRow → Field intrinsic + cell.items-start
         //                       (text 在 cell top + cellPadding-y),fixed → Field h-field-md +
         //                       cell.items-center(text 在 cell vertical center)。
@@ -217,33 +224,18 @@ export const fieldWrapperStyles = cva(
         //                  override h-field-md → Field intrinsic line-height → cell items-start
         //                  真實 anchor text at cell.top + padding。
         // Edit mode 不動(`!h-full` 保留 — border 必滿格對齊 cell border)。
-        mode: 'display',
+        // 2026-07-16 round16:view×naked 保持 bare(cell substrate,host TD 給 padding)— 與 view×default
+        // (edit 幾何減 chrome、留 px/py)本質不同用途,**不 collapse**(round14 合併是錯的)。
+        mode: 'view',
         variant: 'naked',
         className: [
           'bg-transparent !rounded-none !px-0 !py-0 !h-auto',
           'border border-transparent',
         ],
       },
-      {
-        mode: 'readonly',
-        variant: 'naked',
-        className: [
-          'bg-transparent !rounded-none !px-0 !py-0 !h-auto',
-          'border border-transparent',
-        ],
-      },
-      {
-        // 2026-05-13 Q3 fix(per codex Q3 verdict + color.spec.md:729 逃生艙 rule):
-        // 移除 `opacity-disabled` blanket — naked wrapper 只負責 substrate(透明 border + 抑制 cursor),
-        // 內部 content(text / icon / avatar)各自 disabled context 處理(text-fg-disabled / Avatar opacity 等具體 token)。
-        // 對齊 DataTable cell-disabled TD 加 `bg-disabled` 表達 cell-level disabled state 的 SSOT 分權。
-        mode: 'disabled',
-        variant: 'naked',
-        className: [
-          'bg-transparent !rounded-none cursor-not-allowed !px-0 !py-0 !h-auto',
-          'border border-transparent',
-        ],
-      },
+      // 2026-07-16 round16:`readonly×naked` / `disabled×naked` 死格移除 —— DataTable cell 廢除
+      //   disabled 態(view 一律 mode="view";displayOrDisabled helper 已刪)+ readonly 從不入 naked
+      //   路徑(全庫 0 消費)。軸對稱靠 cva 省略即天然覆蓋(base+size+透明),不需 dead compound 佔位。
     ],
     defaultVariants: {
       mode: 'edit',
@@ -264,7 +256,7 @@ export const bareInputStyles = [
   // bareInputStyles 套上,placeholder 無 ellipsis → narrow cell(<160px)硬裁無 `...`(user round 3
   // 圖一證據)。加 truncate 後 `<input>` `text-overflow: ellipsis` 啟動,符合 user 「placeholder 直接被截掉沒有變...」
   // 該顯 ellipsis 的 SSOT。對齊 data-table.spec.md:233「禁硬裁無 ellipsis」+ field-controls.spec.md:286
-  // 共享 contract(a)「display/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。
+  // 共享 contract(a)「view/readonly/disabled/edit 4 mode 共享同一 renderer」semantic 對齊。
   'flex-1 min-w-0 truncate bg-transparent',
   'outline-none border-none p-0',
   'text-[inherit] font-[inherit] leading-[inherit]',
@@ -300,13 +292,13 @@ export const bareInputStyles = [
 // Audit:design-system-audit Group N(periodic batch verify)
 export const nakedCellRowModeAlign = 'group-data-[row-mode=auto]/cell:items-start'
 
-// ── Cell-as-input Display Hover Ring(2026-05-05 v9 — sole remaining ring const)─
-// editable cell **display mode hover 提示**(「這 cell 可編,點 → 進 edit」affordance 信號)。
+// ── Cell-as-input View Hover Ring(2026-05-05 v9 — sole remaining ring const)─
+// editable cell **view mode hover 提示**(「這 cell 可編,點 → 進 edit」affordance 信號)。
 // 對齊 Notion / Airtable hover-cell-shows-border canonical。
 //
 // **為何只剩這一個**:Field naked **edit/focus/open state ring 已下沉到 Field default state
 // machine**(border-based,2026-05-05 v9 architectural rewrite),不需 outline 平行系統;
-// 但 display mode 沒 Field state(display = 純展示無互動),hover 提示需 cell wrapper 自加。
+// 但 view mode 沒 Field state(view = 純展示無互動),hover 提示需 cell wrapper 自加。
 //
 // **2026-05-09 v15.17 revert v15.16(user 未同意 ship)— 維持 v15.13 outline+offset:-1**
 //
@@ -359,7 +351,7 @@ export const nakedCellEditableDisplayHover = 'hover:outline hover:outline-1 hove
 // ── Empty Value Display ─────────────────────────────────────────────────────
 
 // 2026-07-08 user 拍板(verbatim「我從頭到尾哪裡有說要用全形的」):空值符號 = **半形 hyphen
-// `-`(U+002D)**，非全形 em dash `—`(U+2014)。不可編輯(readonly / standalone display /
+// `-`(U+002D)**，非全形 em dash `—`(U+2014)。不可編輯(readonly / standalone view /
 // table 不可編輯 cell)空值一律此符號 + `text-fg-muted`。分流邏輯 SSOT = field-context.ts
 // `useFieldEmptyDisplay()`(table-cell 可編輯 → 空白；其餘 → 本常數)。
 // 世界級對照:Ant ProTable `columnEmptyText` 預設 `'-'`(U+002D 半形)
@@ -367,10 +359,34 @@ export const nakedCellEditableDisplayHover = 'hover:outline hover:outline-1 hove
 export const EMPTY_DISPLAY = '-'
 
 /**
- * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) display typography canonical):
- * Field family display path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,
- * 跨 9 元件 display 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。
+ * 2026-05-14 I2 fix(per field-controls.spec.md contract (e) view typography canonical):
+ * Field family view path bare-span helper — `sm/md → text-body` / `lg → text-body-lg`,
+ * 跨 9 元件 view 視覺尺寸統一(user 抓 LinkInput 字體跟其他 Field 不一致 = SSOT 違反)。
  * Consumer:LinkInput / Select / Combobox / DatePicker / TimePicker non-D-path bare-span 套此 class。
  */
 export const fieldDisplayTextClass = (size: 'sm' | 'md' | 'lg'): string =>
   size === 'lg' ? 'text-body-lg' : 'text-body'
+
+/**
+ * 2026-07-16 round16 Model A(user GO):Field view mode 幾何 SSOT(= view×default compound 的
+ * 幾何部分,抽成 class helper 供 **InlineEdit 純值/標題路徑** 消費,避免 InlineEdit 自帶重複的
+ * geometry cva〔M17 消重〕)。
+ *
+ * 回傳「edit 幾何減 chrome」的排版盒:
+ *   - 水平:`px-[var(--field-px)]`(= edit 內距,靠 InlineEdit `-mx` 拉回欄左緣後,值落 edit 值位置)
+ *   - 單行:`min-h-[var(--field-height-N)]` N∈{sm,md,lg} + `items-center`(垂直置中於 field 高度,= edit 單行)
+ *   - 多行:`items-start` + `py-2`(頂對齊 + 上下內距,**= Textarea edit `py-2`**,textarea.tsx base;
+ *     read↔edit 零跳)。⚠️ py-2 與 Textarea 同值 = SSOT 契約,`scripts/inline-edit-view-geometry-invariant.mjs`
+ *     機械鎖(Textarea py 一改即紅)。
+ *
+ * 值-格式化路徑(Select→Tag / Date / avatar)**不用**此 helper —— 直接委派 `<Control mode="view">`,
+ * 幾何 + 內部間距皆由控件 view×default 提供(read=edit 同一顆 → 天生一致)。
+ */
+export const fieldViewGeometry = (size: 'sm' | 'md' | 'lg', multiline?: boolean): string =>
+  cn(
+    'flex w-full min-w-0 px-[var(--field-px)]',
+    size === 'sm' && 'min-h-[var(--field-height-sm)]',
+    size === 'md' && 'min-h-[var(--field-height-md)]',
+    size === 'lg' && 'min-h-[var(--field-height-lg)]',
+    multiline ? 'items-start py-2' : 'items-center',
+  )

package/src/components/Field/field.anatomy.stories.tsx

@@ -53,7 +53,7 @@ export const Overview: Story = {
               <tr><Td>資料格式化(千分位/貨幣/locale)</Td><Td>—</Td><Td>✓ 管</Td></tr>
               <tr><Td>驗證邏輯</Td><Td>—</Td><Td>✓ 管(+ zod schema 於 form 層)</Td></tr>
               <tr><Td>readonly 呈現</Td><Td>—</Td><Td>✓ 管</Td></tr>
-              <tr><Td>DataTable cell 顯示</Td><Td>—</Td><Td>✓ 管(mode="display" 渲染分支)</Td></tr>
+              <tr><Td>DataTable cell 顯示</Td><Td>—</Td><Td>✓ 管(mode="view" 渲染分支)</Td></tr>
             </tbody>
           </table>
         </div>
@@ -72,8 +72,8 @@ export const Overview: Story = {
                 ['invalid', 'boolean', 'false', 'error 狀態 + context.invalid(觸發 aria-invalid)'],
                 ['disabled', 'boolean', 'false', 'context.disabled 傳給 control'],
                 ['size', "'sm' | 'md' | 'lg'", "'md'", 'context.size 傳給 input-class control(Input / NumberInput / Select);primitive 不讀'],
-                ['mode', "'edit' | 'display' | 'readonly' | 'disabled'", "'edit'", 'context.mode 傳給 Field Controls'],
-                ['variant', "'default'", "'default'", "視覺外殼(公開型別僅 'default',2026-07-14 收窄;naked = @internal FieldVariantInternal):default 含 border+bg / naked = DataTable cell substrate:edit×naked 自畫 border-based state machine(rest/hover/focus/error),display/readonly/disabled×naked 用 transparent border;2026-07-09 `bare` 退役"],
+                ['mode', "'edit' | 'view' | 'readonly' | 'disabled'", "'edit'", 'context.mode 傳給 Field Controls'],
+                ['variant', "'default'", "'default'", "視覺外殼(公開型別僅 'default',2026-07-14 收窄;naked = @internal FieldVariantInternal):default 含 border+bg / naked = DataTable cell substrate:edit×naked 自畫 border-based state machine(rest/hover/focus/error),view×naked 用 transparent border;2026-07-09 `bare` 退役"],
                 ['controlLayout', "'inline' | 'block'", '(自動偵測)', '逃生艙:覆寫 control area 佈局(consumer 手寫 JSX 當 control 無法偵測時用)'],
               ].map(([p, t, d, desc]) => (
                 <tr key={p}><Td mono>{p}</Td><Td mono>{t}</Td><Td mono>{d}</Td><Td>{desc}</Td></tr>
@@ -109,7 +109,7 @@ export const Overview: Story = {
 interface InspectorArgs {
   orientation: 'vertical' | 'horizontal'
   size: 'sm' | 'md' | 'lg'
-  mode: 'edit' | 'display' | 'readonly' | 'disabled'
+  mode: 'edit' | 'view' | 'readonly' | 'disabled'
   required: boolean
   invalid: boolean
   disabled: boolean
@@ -148,8 +148,8 @@ export const Inspector: Story = {
     },
     mode: {
       control: 'radio',
-      options: ['edit', 'display', 'readonly', 'disabled'],
-      description: 'Context 傳給控制元件:edit 可編輯 / display 純展示 / readonly 鎖定但保留輸入外觀 / disabled 停用',
+      options: ['edit', 'view', 'readonly', 'disabled'],
+      description: 'Context 傳給控制元件:edit 可編輯 / view 純展示 / readonly 鎖定但保留輸入外觀 / disabled 停用',
     },
     required: { control: 'boolean', description: 'label 文字前加 * + aria-required' },
     invalid: { control: 'boolean', description: '觸發 error border + aria-invalid;本例以 FieldError 條件替換 FieldDescription(consumer 慣例,非元件行為)' },

package/src/components/Field/field.principles.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import LinkTo from '@storybook/addon-links/react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Upload } from 'lucide-react'
-import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup } from './field'
+import { Field, FieldLabel, FieldDescription, FieldGroup } from './field'
 import { Input } from '@/design-system/components/Input/input'
 import { Select } from '@/design-system/components/Select/select'
 import { Button } from '@/design-system/components/Button/button'
@@ -141,33 +141,10 @@ export const UsageGuidance: Story = {
   ),
 }
 
-export const ResponsibilityRule: Story = {
-  name: 'Field 只負責佈局,不管資料',
-  render: () => (
-    <div>
-      <Rule
-        title="Field 的職責 — Layout + Context,不擁有資料邏輯"
-        note="Field 只負責:label / control / description / error 的空間關係 + 把 mode / disabled / required / invalid / id 透過 context 傳給子元件。與資料相關的一切(格式化、驗證、readonly 呈現、DataTable cell 顯示)住在 Field Control 元件本身"
-      >
-        <div className="max-w-sm">
-          <FieldGroup>
-            <Field required>
-              <FieldLabel>電子郵件</FieldLabel>
-              <Input type="email" placeholder="name@example.com" />
-              <FieldDescription>我們不會公開您的電子郵件</FieldDescription>
-            </Field>
-            <Field invalid>
-              <FieldLabel>密碼</FieldLabel>
-              <Input type="password" />
-              <FieldError>密碼必須至少 8 個字元</FieldError>
-            </Field>
-          </FieldGroup>
-        </div>
-        <Label>↑ Field 管 layout + required 星號 + error 顯示,Input 管 type=email / 驗證邏輯</Label>
-      </Rule>
-    </div>
-  ),
-}
+// ResponsibilityRule retired 2026-07-17 per audit Dim 24 —— 與 anatomy Overview「子元件責任邊界」
+// 責任表 + 逐字相同的 電子郵件/密碼 範例重複;職責原則亦已由上方 UsageGuidance「❌ Field 試圖承載
+// 資料型別邏輯」涵蓋(earn-existence 2-test 皆 NO)。UsageGuidance 使 principles universal-core 仍 ≥ 2,
+// 無 LinkTo 引用此 story,退役零斷鏈。
 
 export const OrientationRule: Story = {
   name: '方向 選擇',

package/src/components/Field/field.spec.md

@@ -32,7 +32,7 @@ Field 是**表單欄位的佈局容器**。只負責排版（label / control / d
 Field 和 Field Controls（Input / NumberInput / DatePicker / Select / Combobox / LinkInput / PeoplePicker / Textarea）是兩件事：
 
 - **Field**（本元件）：只管佈局 + 狀態 context
-- **Field Controls / Checkbox / Switch / RadioGroup**：管自己的資料型別 + edit/readonly/disabled 三態 + 格式化(`mode="display"` 渲染供 DataTable cell 共用)
+- **Field Controls / Checkbox / Switch / RadioGroup**：管自己的資料型別 + edit/readonly/disabled 三態 + 格式化(`mode="view"` 渲染供 DataTable cell 共用)
 
 這麼拆的理由：**Checkbox 在 table cell、form field、settings row 應該是同一個 primitive**，不該為了進到 form 就被包一層 CheckboxField；form 的高度對齊由 Field 的 control area 負責，不由 primitive 本身負責。Field Controls 的詳細共用規則見 `Field/field-controls.spec.md`。
 
@@ -206,7 +206,7 @@ Field 透過 Context 暴露以下狀態給子元件（Primitive 可以透過 `us
 | `id` | FieldLabel 自動 `htmlFor`、Input 自動 `id` |
 | `descriptionId` | FieldDescription 的 id，Input 自動 `aria-describedby` |
 | `errorId` | FieldError 的 id，Input 自動 `aria-errormessage` |
-| `mode` | `edit` / `display` / `readonly` / `disabled`，Control 決定自己的視覺形態 |
+| `mode` | `edit` / `view` / `readonly` / `disabled`，Control 決定自己的視覺形態 |
 | `disabled` | Control 顯示 disabled 樣式 |
 | `required` | FieldLabel 自動渲染 `*`；Input 自動 `aria-required` |
 | `invalid` | Control 顯示 error 邊框；Input 自動 `aria-invalid` |
@@ -416,9 +416,9 @@ Field 內的資料輸入控件（Input / NumberInput / DatePicker / Select / Com
 | **L1 Slot** | `patterns/element-anatomy/item-anatomy.tsx` | `<ItemPrefix>` / `<ItemSuffix>`(永遠 `h-[1lh]` 對齊第 1 行) |
 | **L2 Align** | `field-wrapper.tsx` `nakedCellRowModeAlign` | host cell `data-row-mode` propagate(autoRow→items-start / fixed→items-center)|
 | **L3 State machine** | **繼承 Field default v13.3**(↑ 上方 SSOT)| 不重定義 |
-| **L4 Display hover** | `field-wrapper.tsx` `nakedCellEditableDisplayHover` | editable cell display mode `outline-1 outline-offset:-1 outline-[var(--cell-hover-outline-color,var(--border-hover))]`(cell wrapper outline;2026-05-10 Slice D:spreadsheet overlay 啟用時 DataTable cell host 可 set `--cell-hover-outline-color: transparent` 抑制 outline、讓 overlay layer 接管 hover ring paint,fallback 即 `--border-hover` 既有行為不變)。**v15.13 design intent(user-accepted 2026-05-07)**:hover ring 蓋 cell.borderRight。**known asymmetry**(2026-05-09 user 重抓):只 **right** 邊 outline 跟 cell own border-r 同位置覆蓋成 1 條;top/left/bottom 邊 outline 在 cell.outer 內 1px,grid lines(前 row border-b / 前 cell border-r / row 自己 border-b 在 cell.outer 外 1px)露出 → 視覺 4 邊不對稱。**Pending design decision**(等 user 拍板才 ship):4 邊都蓋(spec 1 selection-style)vs 4 邊都不蓋(spec 2 inset 1px)vs 維持現狀。三層 SSOT:state source = cell wrapper / paint owner = 混合(hover=cell / edit=Field)/ grid divider = DataTable own |
+| **L4 Display hover** | `field-wrapper.tsx` `nakedCellEditableDisplayHover` | editable cell view mode `outline-1 outline-offset:-1 outline-[var(--cell-hover-outline-color,var(--border-hover))]`(cell wrapper outline;2026-05-10 Slice D:spreadsheet overlay 啟用時 DataTable cell host 可 set `--cell-hover-outline-color: transparent` 抑制 outline、讓 overlay layer 接管 hover ring paint,fallback 即 `--border-hover` 既有行為不變)。**v15.13 design intent(user-accepted 2026-05-07)**:hover ring 蓋 cell.borderRight。**known asymmetry**(2026-05-09 user 重抓):只 **right** 邊 outline 跟 cell own border-r 同位置覆蓋成 1 條;top/left/bottom 邊 outline 在 cell.outer 內 1px,grid lines(前 row border-b / 前 cell border-r / row 自己 border-b 在 cell.outer 外 1px)露出 → 視覺 4 邊不對稱。**Pending design decision**(等 user 拍板才 ship):4 邊都蓋(spec 1 selection-style)vs 4 邊都不蓋(spec 2 inset 1px)vs 維持現狀。三層 SSOT:state source = cell wrapper / paint owner = 混合(hover=cell / edit=Field)/ grid divider = DataTable own |
 | **L5 Position(v14,2026-05-06 revert v12)** | naked compoundVariant flow | Field 留 layout flow,**不**用 `!absolute`(v12 absolute 跟 autoRowHeight 不相容)。視覺接受 cell `border-r grid` + Field border 2px 雙線;cell border-r divider 永遠保留(對齊 L4 Invariant divider-owner / editor-owner 分離)|
-| **L6 Cell trigger indicator(v16,2026-07-08 user 拍板 A 案)** | naked-display branch + `showDisplayEndIcon?: boolean` opt-in(**default off,production 不再傳**)| **display 態零恆顯型別 icon** — editable affordance 統一 = L4 hover outline。Benchmark 6/6(Ant editable-cells 純文字+hover border / MUI X singleSelect display 純文字 / AG Grid 無內建 indicator / Atlaskit v2.0.0 移除 hover-pencil 後 9 版未回歸 / Notion / Airtable click-to-edit)display 態皆無恆顯 icon;唯一反例 Google Sheets Chip/Arrow 為 spreadsheet 域可選檔位。prop 保留為 spreadsheet-flavored 消費端 opt-in 逃生門:傳 true → `<ItemSuffix>` 渲型別 icon(Select/Combobox/PeoplePicker → ChevronDown / DatePicker → Calendar / TimePicker → Clock / **LinkInput 例外 = wrapper-only 無 icon**)。cell-registry 現況:6 picker 站不傳;url 站傳 `isEditable === true`(取 wrapper chrome 對齊 edit Input,非 icon)。edit 態 chevron 照舊(edit-trigger 通道,不受此 prop 管)。**值內容 vs affordance 分層(2026-07-08 user Q2 拍板)**:值內容(`selectedItemRenderer` 輸出 / avatar / type icon 等語意呈現)歸 value renderer,display 態照常渲染,恆顯**不**違反本條;本條管的是 affordance(chevron / pencil / outline)。前身 v15 恆顯制(2026-05-10/06-26 拍板)由本輪 benchmark 重判推翻。詳 `.claude/planning/cell-indicator-ssot-rfc.md`。|
+| **L6 Cell trigger indicator(v16,2026-07-08 user 拍板 A 案)** | naked-view branch + `showDisplayEndIcon?: boolean` opt-in(**default off,production 不再傳**)| **view 態零恆顯型別 icon** — editable affordance 統一 = L4 hover outline。Benchmark 6/6(Ant editable-cells 純文字+hover border / MUI X singleSelect view 純文字 https://mui.com/x/react-data-grid/editing/ / AG Grid 無內建 indicator https://www.ag-grid.com/react-data-grid/cell-editing/ / Atlaskit v2.0.0 移除 hover-pencil 後 9 版未回歸 https://github.com/pioug/atlassian-frontend-mirror/tree/main/design-system/inline-edit / Notion / Airtable click-to-edit)view 態皆無恆顯 icon;唯一反例 Google Sheets Chip/Arrow 為 spreadsheet 域可選檔位。prop 保留為 spreadsheet-flavored 消費端 opt-in 逃生門:傳 true → `<ItemSuffix>` 渲型別 icon(Select/Combobox/PeoplePicker → ChevronDown / DatePicker → Calendar / TimePicker → Clock / **LinkInput 例外 = wrapper-only 無 icon**)。cell-registry 現況:6 picker 站不傳;url 站傳 `isEditable === true`(取 wrapper chrome 對齊 edit Input,非 icon)。edit 態 chevron 照舊(edit-trigger 通道,不受此 prop 管)。**值內容 vs affordance 分層(2026-07-08 user Q2 拍板)**:值內容(`selectedItemRenderer` 輸出 / avatar / type icon 等語意呈現)歸 value renderer,view 態照常渲染,恆顯**不**違反本條;本條管的是 affordance(chevron / pencil / outline)。前身 v15 恆顯制(2026-05-10/06-26 拍板)由本輪 benchmark 重判推翻。詳 `.claude/planning/cell-indicator-ssot-rfc.md`(六家實查 SSOT)。|
 
 **前身 retire**:v4-v8 `outline-2` 平行 state(已下沉 L3)/ v9 border-only(focus 跟 open specificity tie)/ per-control `open && 'border-primary'`(v13.3 retire)/ `nakedCell{Hover,Focus,Open}Ring` 三 const / `nakedCell{Prefix,Suffix}Slot`(下沉 L1)/ **v12 `!absolute -inset-px` seamless grid**(2026-05-06 revert — autoRowHeight 不相容)/ **DataTable parallel `getEditIndicator`**(2026-05-09 D-path retire — 由 Field naked-display 透過 `showDisplayEndIcon` opt-in 自渲 ItemSuffix,跨元件 SSOT 統一)。
 
@@ -452,6 +452,7 @@ Field 內的資料輸入控件（Input / NumberInput / DatePicker / Select / Com
 
 > 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
 
+- `data-table.spec.md`
 - `description-list.spec.md`
 - `element-anatomy.spec.md`
 - `field-control-group.spec.md`

package/src/components/Field/field.stories.tsx

@@ -91,21 +91,21 @@ export const StateCascade: Story = {
           <Field mode="readonly" className="w-44"><FieldLabel>負責人</FieldLabel><Input value="王小明" onChange={() => {}} /></Field>
           <Field mode="readonly" className="w-44"><FieldLabel>同意條款</FieldLabel><Checkbox checked /></Field>
           <Field mode="readonly" className="w-44"><FieldLabel>已啟用</FieldLabel><Switch checked /></Field>
-          <Field mode="readonly" className="w-44"><FieldLabel>未勾選範例</FieldLabel><Checkbox /></Field>
+          <Field mode="readonly" className="w-44"><FieldLabel>行銷電子報</FieldLabel><Checkbox /></Field>
           <Field mode="readonly" className="w-44"><FieldLabel>付款方式</FieldLabel><RadioGroup value="card"><RadioGroupItem value="card" label="信用卡" /><RadioGroupItem value="cash" label="貨到付款" /></RadioGroup></Field>
           <Field mode="readonly" className="w-44"><FieldLabel>滿意度</FieldLabel><Rating value={4} aria-label="滿意度" /></Field>
           <Field mode="readonly" className="w-44"><FieldLabel>完成度</FieldLabel><Slider defaultValue={[40]} aria-label="完成度" /></Field>
         </div>
       </div>
       <div>
-        <p className="text-body-sm font-medium text-fg-secondary mb-3">{'<Field mode="display"> — 有展示態的控件自動切純展示（Select / DatePicker / Checkbox / Switch 修復後生效）'}</p>
+        <p className="text-body-sm font-medium text-fg-secondary mb-3">{'<Field mode="view"> — 有展示態的控件自動切純展示（Select / DatePicker / Checkbox / Switch 修復後生效）'}</p>
         <div className="flex flex-wrap gap-x-8 gap-y-4 max-w-3xl">
-          <Field mode="display" className="w-44"><FieldLabel>負責人</FieldLabel><Input value="王小明" onChange={() => {}} /></Field>
-          <Field mode="display" className="w-44"><FieldLabel>優先級</FieldLabel><Select options={CASCADE_PRIORITY} value="high" aria-label="優先級" /></Field>
-          <Field mode="display" className="w-44"><FieldLabel>截止日</FieldLabel><DatePicker value="2026-06-20" onChange={() => {}} /></Field>
-          <Field mode="display" className="w-44"><FieldLabel>數量</FieldLabel><NumberInput value={42} onChange={() => {}} /></Field>
-          <Field mode="display" className="w-44"><FieldLabel>已啟用</FieldLabel><Switch checked /></Field>
-          <Field mode="display" className="w-44"><FieldLabel>同意條款</FieldLabel><Checkbox checked /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>負責人</FieldLabel><Input value="王小明" onChange={() => {}} /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>優先級</FieldLabel><Select options={CASCADE_PRIORITY} value="high" aria-label="優先級" /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>截止日</FieldLabel><DatePicker value="2026-06-20" onChange={() => {}} /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>數量</FieldLabel><NumberInput value={42} onChange={() => {}} /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>已啟用</FieldLabel><Switch checked /></Field>
+          <Field mode="view" className="w-44"><FieldLabel>同意條款</FieldLabel><Checkbox checked /></Field>
         </div>
       </div>
     </div>
@@ -143,7 +143,7 @@ export const Horizontal: Story = {
 // ── Horizontal 垂直對齊公式驗證 ─────────────────────────────────────────
 
 export const HorizontalLabelAlignment: Story = {
-  name: '水平:標籤垂直對齊公式驗證',
+  name: '水平:標籤與控件垂直對齊',
   render: () => (
     <div className="max-w-3xl flex flex-col gap-8">
       <div>
@@ -153,8 +153,8 @@ export const HorizontalLabelAlignment: Story = {
           這是 padding-top: calc((field-height - 1lh) / 2) 的基本情境。
         </p>
         <Field orientation="horizontal" labelWidth="160px">
-          <FieldLabel>短 label</FieldLabel>
-          <Input placeholder="input 中線應與 label 對齊" />
+          <FieldLabel>職稱</FieldLabel>
+          <Input placeholder="如:資深產品設計師" />
         </Field>
       </div>
 
@@ -165,8 +165,8 @@ export const HorizontalLabelAlignment: Story = {
           視覺上 label 從 input 中線往下延伸，而不是從 input 頂部開始。
         </p>
         <Field orientation="horizontal" labelWidth="160px">
-          <FieldLabel>這是一個會換行的很長的 label 用來驗證多行情境</FieldLabel>
-          <Input placeholder="input 中線應與 label 第一行對齊" />
+          <FieldLabel>緊急聯絡人手機(發生狀況時優先撥打)</FieldLabel>
+          <Input placeholder="如:0912-345-678" />
         </Field>
       </div>
 
@@ -177,18 +177,27 @@ export const HorizontalLabelAlignment: Story = {
           無需 JS 測量。
         </p>
         <div className="flex flex-col gap-3">
-          <Field orientation="horizontal" labelWidth="100px" size="sm">
-            <FieldLabel>sm size</FieldLabel>
-            <Input size="sm" placeholder="28px high" />
-          </Field>
-          <Field orientation="horizontal" labelWidth="100px" size="md">
-            <FieldLabel>md size</FieldLabel>
-            <Input size="md" placeholder="32px high" />
-          </Field>
-          <Field orientation="horizontal" labelWidth="100px" size="lg">
-            <FieldLabel>lg size</FieldLabel>
-            <Input size="lg" placeholder="36px high" />
-          </Field>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">小尺寸 sm — 控件高 28px</div>
+            <Field orientation="horizontal" labelWidth="100px" size="sm">
+              <FieldLabel>電子郵件</FieldLabel>
+              <Input size="sm" placeholder="name@example.com" />
+            </Field>
+          </div>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">中尺寸 md — 控件高 32px</div>
+            <Field orientation="horizontal" labelWidth="100px" size="md">
+              <FieldLabel>電子郵件</FieldLabel>
+              <Input size="md" placeholder="name@example.com" />
+            </Field>
+          </div>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">大尺寸 lg — 控件高 36px</div>
+            <Field orientation="horizontal" labelWidth="100px" size="lg">
+              <FieldLabel>電子郵件</FieldLabel>
+              <Input size="lg" placeholder="name@example.com" />
+            </Field>
+          </div>
         </div>
       </div>
     </div>
@@ -279,31 +288,40 @@ export const SegmentedControlInField: Story = {
           整個欄位改尺寸時,分段控制器也會跟著一起縮放。
         </p>
         <FieldGroup>
-          <Field size="sm">
-            <FieldLabel>檢視模式（sm）</FieldLabel>
-            <SegmentedControl defaultValue="list">
-              <SegmentedControlItem value="list">清單</SegmentedControlItem>
-              <SegmentedControlItem value="board">看板</SegmentedControlItem>
-              <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
-            </SegmentedControl>
-            <FieldDescription>切換內容呈現方式</FieldDescription>
-          </Field>
-          <Field size="md">
-            <FieldLabel>檢視模式（md）</FieldLabel>
-            <SegmentedControl defaultValue="list">
-              <SegmentedControlItem value="list">清單</SegmentedControlItem>
-              <SegmentedControlItem value="board">看板</SegmentedControlItem>
-              <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
-            </SegmentedControl>
-          </Field>
-          <Field size="lg">
-            <FieldLabel>檢視模式（lg）</FieldLabel>
-            <SegmentedControl defaultValue="list">
-              <SegmentedControlItem value="list">清單</SegmentedControlItem>
-              <SegmentedControlItem value="board">看板</SegmentedControlItem>
-              <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
-            </SegmentedControl>
-          </Field>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">小尺寸 sm</div>
+            <Field size="sm">
+              <FieldLabel>檢視模式</FieldLabel>
+              <SegmentedControl defaultValue="list">
+                <SegmentedControlItem value="list">清單</SegmentedControlItem>
+                <SegmentedControlItem value="board">看板</SegmentedControlItem>
+                <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
+              </SegmentedControl>
+              <FieldDescription>切換內容呈現方式</FieldDescription>
+            </Field>
+          </div>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">中尺寸 md</div>
+            <Field size="md">
+              <FieldLabel>檢視模式</FieldLabel>
+              <SegmentedControl defaultValue="list">
+                <SegmentedControlItem value="list">清單</SegmentedControlItem>
+                <SegmentedControlItem value="board">看板</SegmentedControlItem>
+                <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
+              </SegmentedControl>
+            </Field>
+          </div>
+          <div>
+            <div className="text-caption text-fg-muted mb-1">大尺寸 lg</div>
+            <Field size="lg">
+              <FieldLabel>檢視模式</FieldLabel>
+              <SegmentedControl defaultValue="list">
+                <SegmentedControlItem value="list">清單</SegmentedControlItem>
+                <SegmentedControlItem value="board">看板</SegmentedControlItem>
+                <SegmentedControlItem value="calendar">行事曆</SegmentedControlItem>
+              </SegmentedControl>
+            </Field>
+          </div>
         </FieldGroup>
       </div>
 
@@ -478,23 +496,35 @@ export const LabelWidth: Story = {
   name: '標籤寬度',
   render: () => (
     <div className="max-w-2xl flex flex-col gap-4">
-      <p className="text-caption text-fg-muted">labelWidth 支援任何 CSS length 值</p>
-      <Field orientation="horizontal" labelWidth="80px">
-        <FieldLabel>80px</FieldLabel>
-        <Input placeholder="short label column" />
-      </Field>
-      <Field orientation="horizontal" labelWidth="160px">
-        <FieldLabel>160px（預設常用）</FieldLabel>
-        <Input placeholder="typical settings form" />
-      </Field>
-      <Field orientation="horizontal" labelWidth="240px">
-        <FieldLabel>240px（寬 label 欄）</FieldLabel>
-        <Input placeholder="wide label column" />
-      </Field>
-      <Field orientation="horizontal" labelWidth="30%">
-        <FieldLabel>30%（比例）</FieldLabel>
-        <Input placeholder="percentage" />
-      </Field>
+      <p className="text-caption text-fg-muted">labelWidth 支援任何 CSS length 值(80px / 160px / 240px / 30% 等);同一表單依最長的 label 挑一個固定寬,讓控件起點對齊。</p>
+      <div>
+        <div className="text-caption text-fg-muted mb-1">labelWidth = 80px</div>
+        <Field orientation="horizontal" labelWidth="80px">
+          <FieldLabel>城市</FieldLabel>
+          <Input placeholder="如:台北市" />
+        </Field>
+      </div>
+      <div>
+        <div className="text-caption text-fg-muted mb-1">labelWidth = 160px(預設常用)</div>
+        <Field orientation="horizontal" labelWidth="160px">
+          <FieldLabel>公司統一編號</FieldLabel>
+          <Input placeholder="8 碼數字" />
+        </Field>
+      </div>
+      <div>
+        <div className="text-caption text-fg-muted mb-1">labelWidth = 240px(寬 label 欄)</div>
+        <Field orientation="horizontal" labelWidth="240px">
+          <FieldLabel>發票寄送電子郵件地址</FieldLabel>
+          <Input placeholder="billing@company.com" />
+        </Field>
+      </div>
+      <div>
+        <div className="text-caption text-fg-muted mb-1">labelWidth = 30%(比例)</div>
+        <Field orientation="horizontal" labelWidth="30%">
+          <FieldLabel>備註</FieldLabel>
+          <Input placeholder="選填" />
+        </Field>
+      </div>
     </div>
   ),
 }
@@ -531,9 +561,9 @@ export const WithSlider: Story = {
           </Field>
 
           <Field>
-            <FieldLabel>已鎖定</FieldLabel>
+            <FieldLabel>儲存空間配額</FieldLabel>
             <Slider defaultValue={[40]} disabled />
-            <FieldDescription>不可調整的範例</FieldDescription>
+            <FieldDescription>由系統管理員設定,無法自行調整</FieldDescription>
           </Field>
         </FieldGroup>
       </div>
@@ -602,9 +632,9 @@ export const SliderWithLiveNumberInput: Story = {
               max={200}
             />
           </div>
+          {/* Slider 與 NumberInput 透過 `h-field-md` 對齊高度——實作細節,不進使用者可見文案 */}
           <FieldDescription>
-            Slider 跟 NumberInput 同步——拖曳 slider 即時更新數字,改數字即時更新
-            slider。兩個元件高度透過 `h-field-md` 對齊。
+            拖曳滑桿或直接輸入數字都能即時調整縮放比例,範圍 0–200%。
           </FieldDescription>
         </Field>
       </div>
@@ -640,7 +670,7 @@ function UpdateProjectSettingsForm() {
         <Field required invalid={!!form.errors.name}>
           <FieldLabel>專案名稱</FieldLabel>
           <Input {...form.getInputProps('name')} />
-          <FieldDescription>改成「產品路線圖 Q3」可觸發 submit 業務驗證(名稱重複)</FieldDescription>
+          <FieldDescription>專案名稱不得與其他專案重複</FieldDescription>
           <FieldError>{form.errors.name}</FieldError>
         </Field>
         <Field required invalid={!!form.errors.ownerEmail}>
@@ -700,6 +730,7 @@ export const FormValidation: Story = {
         <p className="text-caption text-fg-muted max-w-80">
           按鈕沒改不亮;打字中不報錯(blur 才驗);已出錯欄位一編輯立即清 error;
           Escape 回復原值;空 submit / 格式錯 → anchor 到第一個錯誤欄位。
+          試著把名稱改成「產品路線圖 Q3」再儲存,會觸發「名稱重複」業務驗證。
         </p>
         <UpdateProjectSettingsForm />
       </div>