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

package/src/components/DataTable/data-table.tsx

@@ -7,7 +7,7 @@
 //   - data-table-filter-panel.tsx + data-table-sort-manager.tsx + data-table-column-visibility-panel.tsx(panel state 隔離)
 //   - data-table-filter-group.tsx + data-table-filter-value-picker.tsx(@internal;2026-07-14 filter panel
 //     過 800 hard cap 拆檔 — row/nested-group renderer + ValueShape picker,只被 panel 消費)
-//   - cell-registry.tsx(column type → cell display / edit 解析 SSOT)
+//   - cell-registry.tsx(column type → cell view / edit 解析 SSOT)
 //   - data-table-interaction-layer.tsx + active-editor-controller.ts(spreadsheet overlay + portal editor)
 //   - column-types.ts + filter-operators.ts(✓ Rule-of-3 SSOT,3+ consumer)
 //   - filter-tree.ts(pure data + eval,test isolation)
@@ -96,7 +96,7 @@ export interface DataTableProps<TData>
   /**
    * Issue 9 cell error system(2026-05-10)。
    *
-   * Map of `${rowId}:${colId}` → error message(string | string[])。Cell display mode 在 content
+   * Map of `${rowId}:${colId}` → error message(string | string[])。Cell view mode 在 content
    * 下方渲 `text-body text-error` 訊息,gap-1 spacing。Multi-error 用 array → ul / li 分行渲。
    *
    * **使用建議**:
@@ -279,13 +279,13 @@ export interface DataTablePaginationOptions {
 //
 // 原 `renderTypedValue` switch + `EditableCellContent` switch 兩條平行 type-switch
 // 已 collapse 為單一 `cellRegistry`(./cell-registry.ts)— 每個 type → 一個 cell component,
-// 同時處理 display + edit mode(底層 Field control 的 mode prop)。對齊 M17 SSOT consolidation。
+// 同時處理 view + edit mode(底層 Field control 的 mode prop)。對齊 M17 SSOT consolidation。
 //
 // 對齊 Notion / Airtable type-aware inline edit canonical(詳 spec §十二):
 //   - string / number / currency:cell click → inline edit
 //   - date / time / select / multiSelect / person / multiPerson:cell click → 進 edit mode
 //   - boolean:不分 read/edit mode,直接 `<Checkbox>` 點即 toggle + commit
-//   - url:read = LinkInput display + hover Pencil button,click Pencil 才進 edit mode
+//   - url:read = LinkInput view + hover Pencil button,click Pencil 才進 edit mode
 //
 // Cell id format: `${rowId}__${columnId}`(編輯狀態 keying)
 // Commit: blur OR Enter OR overlay close → 呼叫 onCellCommit
@@ -393,10 +393,10 @@ function columnSizeStyle(
   //
   // **flex-basis: baseSize(2026-05-06 v14.2)**:把 baseSize 當 explicit basis(不是 `0%`)。
   // 為什麼:flex item base = basis + padding(box-sizing: border-box content-box 行為)。前 `0%`
-  // basis → cell padding 變 base 一部分。display(padding 12)vs edit(padding 0,Field 接管)
+  // basis → cell padding 變 base 一部分。view(padding 12)vs edit(padding 0,Field 接管)
   // 兩態 base 不同 → flex 重分配 → user 報「Price cell 進 edit 寬度縮 12px」
-  // (量測:Price display 130.5 → edit 118.5 = -12px)。
-  // explicit basis = baseSize 讓 padding 不參與 base 計算 → display↔edit 寬度穩定。
+  // (量測:Price view 130.5 → edit 118.5 = -12px)。
+  // explicit basis = baseSize 讓 padding 不參與 base 計算 → view↔edit 寬度穩定。
   return { flex: `1 1 ${baseSize}px`, minWidth: baseSize, maxWidth: maxSize }
 }
 
@@ -649,12 +649,33 @@ function DraggableHeaderCell({
     : dropIndicatorSide === 'after'
     ? dropIndicatorColumn.pseudoAfter
     : ''
+  // dnd-kit KeyboardSensor 的 activator = listeners.onKeyDown,掛在整個 header cell 上(column
+  // 無獨立 activator node,不像 row drag 的 button-only handle)。巢狀互動 descendant(more-menu
+  // 按鈕 / resize separator / 排序 chevron)的 Enter/Space 冒泡到此 → dnd-kit preventDefault 啟動
+  // 欄位拖曳,吃掉按鈕原生啟動。包一層 guard:事件來自互動 descendant(非 header cell 本身)時
+  // 交回原生,不啟動拖曳。對齊 dnd-kit「activator node 排除互動 descendant」idiom。
+  const rawListeners = draggable.listeners as Record<string, ((e: React.SyntheticEvent) => void) | undefined> | undefined
+  const guardedListeners: Record<string, unknown> | undefined = rawListeners
+    ? {
+        ...rawListeners,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          const target = e.target as HTMLElement
+          if (
+            target !== e.currentTarget &&
+            target.closest('button, a, input, select, textarea, [role="menuitem"], [role="separator"]')
+          ) {
+            return
+          }
+          rawListeners.onKeyDown?.(e)
+        },
+      }
+    : rawListeners
   return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
     ref: setRefs,
     style: { ...(childProps.style ?? {}), ...dragStyle },
     'data-column-id': id,
     'data-column-locked': isLocked || undefined,
-    ...(disabled ? {} : { ...draggableAttrs, ...(draggable.listeners as unknown as Record<string, unknown>) }),
+    ...(disabled ? {} : { ...draggableAttrs, ...(guardedListeners ?? {}) }),
     // 2026-05-06 v14.9 cursor canonical(對齊 Notion / Jira):
     // **idle hover NOT 顯 cursor-grab** — header click 觸發 sort,grab cursor 會誤導 user 以為「點 = 拖」;
     // **drag activation 後**(isDragging=true,過 8px activationConstraint)才顯 cursor-grabbing。
@@ -869,7 +890,7 @@ function RowDragHandle({ disabled, anyDragActive }: { disabled: boolean; anyDrag
 // 但 renderCellContent 每次 render 傳 3 個全新 inline closure(onCommit / onCommitLive /
 // onRequestEdit)+ `meta ?? {}` 新 object → memo shallow-compare 100% fail,防線靜默失效
 // (DataTableInner 任何 re-render — scroll / resize / drag / spreadsheet 選取 / portal keystroke —
-// 都讓全部 visible cells 的 Field display subtree 整棵重渲)。
+// 都讓全部 visible cells 的 Field view subtree 整棵重渲)。
 // Fix:中介 memo slot — 從 parent 接 stable callback(commitCell / cancelCellEdit / onCellCommit /
 // enterCellEdit)+ primitive rowId / colId,在 slot 內 useCallback 綁 per-cell closure;
 // props 全 primitive / stable reference → memo 真命中,unchanged cells render 成本歸零。
@@ -884,11 +905,10 @@ interface MemoCellSlotProps {
   value: any
   // any-allow: free-form consumer meta bag(同 CellComponentProps.meta)
   meta: Record<string, any>
-  mode: 'display' | 'edit'
+  mode: 'view' | 'edit'
   size: 'sm' | 'md' | 'lg'
   autoRowHeight: boolean
   isEditable: boolean
-  isDisabled: boolean
   onCommitCell: (rowId: string, colId: string, next: unknown) => void
   onCancelCell: (rowId: string, colId: string) => void
   onCellCommitLive?: (rowId: string, colId: string, next: unknown) => void
@@ -897,13 +917,12 @@ interface MemoCellSlotProps {
 
 const MemoCellSlot = React.memo(function MemoCellSlot({
   Cell, rowId, colId, value, meta, mode, size, autoRowHeight,
-  isEditable, isDisabled, onCommitCell, onCancelCell, onCellCommitLive, onEnterEdit,
+  isEditable, onCommitCell, onCancelCell, onCellCommitLive, onEnterEdit,
 }: MemoCellSlotProps) {
   const onCommit = React.useCallback((next: unknown) => onCommitCell(rowId, colId, next), [onCommitCell, rowId, colId])
   const onCommitLive = React.useCallback((next: unknown) => onCellCommitLive?.(rowId, colId, next), [onCellCommitLive, rowId, colId])
   const onCancel = React.useCallback(() => onCancelCell(rowId, colId), [onCancelCell, rowId, colId])
-  // disabled guard 保留原 renderCellContent inline closure 語意(`() => !disabled && setEditingCellId(...)`)
-  const onRequestEdit = React.useCallback(() => { if (!isDisabled) onEnterEdit(rowId, colId) }, [onEnterEdit, isDisabled, rowId, colId])
+  const onRequestEdit = React.useCallback(() => onEnterEdit(rowId, colId), [onEnterEdit, rowId, colId])
   return (
     <Cell
       value={value}
@@ -912,7 +931,6 @@ const MemoCellSlot = React.memo(function MemoCellSlot({
       size={size}
       autoRowHeight={autoRowHeight}
       isEditable={isEditable}
-      isDisabled={isDisabled}
       onCommit={onCommit}
       onCommitLive={onCommitLive}
       onCancel={onCancel}
@@ -1040,28 +1058,13 @@ function DataTableInner<TData>(
     },
     [],
   )
-  // 2026-05-13 Stream C Cluster B Q3 ship(per codex Q3 verdict + user 拍板「全部馬不停蹄做完」):
-  // Mirror isCellEditable pattern。`column.meta.disabled` 接 bool 或 (row) => boolean fn。
-  // cell disabled → (a) TD 加 `bg-disabled cursor-not-allowed` + 抑制 hover, (b) inner Field
-  // 透過 isDisabled prop 走 mode='disabled'(各 Field type 內部具體 disabled token,非 wrapper blanket opacity),
-  // (c) edit entry condition: `cellEditable && !cellDisabled`。
-  const isCellDisabled = React.useCallback(
-    // any-allow: free-form consumer meta — same rationale as L143 renderTypedValue
-    (meta: Record<string, any> | undefined, row: unknown): boolean => {
-      const d = meta?.disabled
-      if (typeof d === 'function') return d(row) === true
-      return d === true
-    },
-    [],
-  )
-  // 2026-05-13:canEditCell helper consolidation(per codex V4 follow-up + user「沒理由不做」拍板)
-  // 抽 4-site repeated `editable && !disabled` pattern。3 path sites(keyboard / Tab / InteractionLayer)
-  // call canEditCell;另 2 sites(renderCellContent + onEditableCellClick)用 already-computed `editable`/
-  // `disabled` 變數(因為 disabled 還要單獨給 isDisabled prop + bg-disabled class),不 collapse to helper。
+  // 2026-07-16 round16:cell「disabled」態廢除(世界級 grid 無 disabled cell;meta.disabled 全庫 0 消費)。
+  // 鎖定 cell = `editable:(row)=>false`(= isCellEditable 模型),非灰化 disabled 態。原 isCellDisabled
+  // helper + bg-disabled TD 灰化 + isDisabled prop 全移除;canEditCell 收斂為 isCellEditable。
   const canEditCell = React.useCallback(
     (meta: Record<string, unknown> | undefined, row: unknown): boolean =>
-      isCellEditable(meta, row) && !isCellDisabled(meta, row),
-    [isCellEditable, isCellDisabled],
+      isCellEditable(meta, row),
+    [isCellEditable],
   )
   const [sorting, setSorting] = React.useState<SortingState>(tableOptions?.state?.sorting as SortingState ?? [])
 
@@ -1502,7 +1505,7 @@ function DataTableInner<TData>(
   const hoverProps = (_idx: number): Record<string, never> => ({})
 
   // ── Cell render(Phase C 2026-05-05 — type-keyed registry SSOT)──
-  // 命中 columnType → 走 cellRegistry(display / edit mode 同元件 with `mode` prop);
+  // 命中 columnType → 走 cellRegistry(view / edit mode 同元件 with `mode` prop);
   // 無 columnType → consumer 自訂 cell.columnDef.cell。
   const renderCellContent = (cell: ReturnType<typeof rows[number]['getVisibleCells']>[number]) => {
     const meta = cell.column.columnDef.meta
@@ -1510,27 +1513,25 @@ function DataTableInner<TData>(
     const wrap = autoRowHeight && meta?.wrap === true
     // 已知 compound 欄位(Tag / PersonDisplay / LinkInput 等自帶 layout)直接 bypass TruncateCell,
     // 因為 `truncate` 的 inline baseline context 會破壞自訂 layout 的垂直對齊。
-    // 2026-05-09 D-path:date / time 加入(showDisplayEndIcon → Field naked-display 需 full width 才能
+    // 2026-05-09 D-path:date / time 加入(showDisplayEndIcon → Field naked-view 需 full width 才能
     //   右對齊 ItemSuffix。TruncateCell 的 `<span truncate min-w-0>` block-display 會 collapse Field
     //   to content size,讓 Calendar / Clock icon 緊貼 value text 而非右邊緣)。
     const isKnownCompound = colType === 'select' || colType === 'multiSelect' || colType === 'person' || colType === 'multiPerson' || colType === 'url' || colType === 'date' || colType === 'time'
     const rowId = cell.row.id
     const colId = cell.column.id
     const editable = isCellEditable(meta, cell.row.original)
-    const disabled = isCellDisabled(meta, cell.row.original)
     const isEditingThisCell = editingCellId === cellEditId(rowId, colId)
 
     let content: React.ReactNode
     if (colType) {
       const Cell = resolveCellComponent(colType)
       // 2026-05-10 Slice D Step 5(D.3 portal Field):當 portal flag 啟 + cell 編輯中 →
-      // cell 保持 display mode(SSOT preserved per codex Q6.2),portal layer 渲 edit Field 在上。
-      // 預設 inline-edit:isEditingThisCell ? edit : display。
-      // 2026-05-13 Q3 cell-disabled:disabled cell 永遠 display lifecycle(state overlay,不進 edit)。
-      const cellMode: 'edit' | 'display' =
+      // cell 保持 view mode(SSOT preserved per codex Q6.2),portal layer 渲 edit Field 在上。
+      // 預設 inline-edit:isEditingThisCell ? edit : view。
+      const cellMode: 'edit' | 'view' =
         (experimentalActiveEditorController && isEditingThisCell)
-          ? 'display'
-          : (isEditingThisCell && !disabled) ? 'edit' : 'display'
+          ? 'view'
+          : isEditingThisCell ? 'edit' : 'view'
       // 2026-07-05 D3 perf fix:改經 MemoCellSlot — 原 inline closure props 讓 CellWithSurface
       // memo 100% miss(詳 MemoCellSlot 檔頭註解)。
       content = (
@@ -1544,7 +1545,6 @@ function DataTableInner<TData>(
           size={size}
           autoRowHeight={autoRowHeight}
           isEditable={editable}
-          isDisabled={disabled}
           onCommitCell={commitCell}
           onCancelCell={cancelCellEdit}
           onCellCommitLive={onCellCommit}
@@ -1572,8 +1572,8 @@ function DataTableInner<TData>(
   const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']
 
   // 2026-05-09 D-path retired:`getEditIndicator(colType)` parallel system 移除。
-  // Indicator authority 從 DataTable cellEl 移交 **Field naked-display branch via `showDisplayEndIcon` opt-in**
-  //   — Select / TimePicker / DatePicker / Combobox / PeoplePicker 5 picker 的 display mode 內建
+  // Indicator authority 從 DataTable cellEl 移交 **Field naked-view branch via `showDisplayEndIcon` opt-in**
+  //   — Select / TimePicker / DatePicker / Combobox / PeoplePicker 5 picker 的 view mode 內建
   //   `<ItemSuffix>` 渲對應 trigger icon(同 edit DOM 結構)。LinkInput URL anchor 例外(無 suffix)。
   // SSOT chain:cell-registry.tsx(opt-in props)→ Field component(intrinsic icon + ItemSuffix DOM)→
   //   item-anatomy ItemPrefix/ItemSuffix layout SSOT。詳 `.claude/planning/cell-indicator-ssot-rfc.md`。
@@ -1681,17 +1681,15 @@ function DataTableInner<TData>(
     const cellRowId = cell.row.id
     const cellColId = cell.column.id
     const cellEditable = isCellEditable(meta, cell.row.original)
-    const cellDisabled = isCellDisabled(meta, cell.row.original)
     const isEditingThisCell = editingCellId === cellEditId(cellRowId, cellColId)
-    // Indicator canonical(2026-05-09 D-path retire):**Field naked-display branch own** via
+    // Indicator canonical(2026-05-09 D-path retire):**Field naked-view branch own** via
     //   `showDisplayEndIcon` opt-in(per-picker `<ItemSuffix>` 渲 ChevronDown/Calendar/Clock)。
     //   DataTable cellEl 不再 render parallel indicator — SSOT 對齊 Field family。
     //   詳 `.claude/planning/cell-indicator-ssot-rfc.md` Step 9。
     // Cell click → 進 edit mode(boolean 不需 — 自己 toggle;url 不需 — 走內部 Pencil button,Phase C 由 UrlCell 內處理)
     const cellSpreadsheetId = `${cellRowId}:${cellColId}`
     const isSelectedCell = spreadsheetMode && selectedCellId === cellSpreadsheetId
-    // 2026-05-13 Q3:cellDisabled → 抑制 editable click(對齊 `editable && !disabled` invariant)
-    const onEditableCellClick = cellEditable && !cellDisabled && colType !== 'boolean' && colType !== 'url' && !isEditingThisCell
+    const onEditableCellClick = cellEditable && colType !== 'boolean' && colType !== 'url' && !isEditingThisCell
       ? (e: React.MouseEvent) => {
         if (spreadsheetMode) {
           // Slice D Step 4 spreadsheet semantics(2026-05-10 user 拍板,2026-05-12 v2 fix):
@@ -1767,7 +1765,7 @@ function DataTableInner<TData>(
         role="cell"
         // group/cell + data-row-mode:讓 Field naked 用 `group-data-[row-mode=...]/cell:items-X`
         // 從 cell 取 alignment(autoRowHeight=auto 頂對齊 / fixed=fixed 置中)。CSS propagation,
-        // Field API 不變;每個 mode 內 display↔edit 同 alignment(同 Field, 同 group → 同 items)。
+        // Field API 不變;每個 mode 內 view↔edit 同 alignment(同 Field, 同 group → 同 items)。
         // H1(2026-05-10):per-row error → effectiveAutoRowForCell 同 row.tsx effectiveAutoRow
         data-row-mode={effectiveAutoRowForCell ? 'auto' : 'fixed'}
         data-column-id={cell.column.id}
@@ -1777,8 +1775,6 @@ function DataTableInner<TData>(
         // Phase 9 Issue 1 fix(2026-05-10):range cell bg fill via CSS [data-range-cell],
         // 不在 overlay layer(避免 layer fixed-position bg 蓋 cell content)。
         data-range-cell={spreadsheetMode && rangeCellIdSet.has(`${cell.row.id}:${cell.column.id}`) ? '' : undefined}
-        // 2026-05-13 V1.6:data-cell-disabled attribute 給 CSS `:not([data-cell-disabled])` 過濾,disabled cell 不被 range fill 蓋
-        data-cell-disabled={cellDisabled ? 'true' : undefined}
         // Issue 9 cell error(2026-05-10):aria-describedby 接 error message id 給 AT 讀
         aria-describedby={cellErrorId}
         aria-invalid={hasCellError || undefined}
@@ -1817,19 +1813,16 @@ function DataTableInner<TData>(
           // Field naked edit border 仍 own(per Field SSOT)— 編輯時 Field 自帶 border 1px,
           // 跟 cell 4 邊 inset divider 視覺相疊(同 pixel)= 1 line visual,不雙線。
           inlineEdit && 'dtCellGrid',
-          onEditableCellClick && ['cursor-pointer', nakedCellEditableDisplayHover],  // editable cell display hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
+          onEditableCellClick && ['cursor-pointer', nakedCellEditableDisplayHover],  // editable cell view hover affordance(對齊 Notion / Airtable hover-cell-shows-border canonical)
           // a11y(2026-07-14 dim-10 修):非 spreadsheet inlineEdit cell 可 Tab 聚焦(見下方
           // tabIndex/onKeyDown)— focus-visible ring 對齊本檔 expand button / sortable header canonical。
           onEditableCellClick && !spreadsheetMode && 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
-          // 2026-05-13 Q3 cell disabled SSOT(per codex Q3 verdict + user 拍板「全部馬不停蹄做完」):
-          // bg `--bg-disabled` component-state token(color.spec.md:671 owner)+ cursor 抑制 click affordance。
-          cellDisabled && 'bg-disabled cursor-not-allowed',
           // z-10 raise inline-edit cell;portal mode 不需(layer z-3 already on top)。
           isEditingThisCell && !experimentalActiveEditorController && 'z-10',
         )}
         style={{
           ...columnSizeStyle(cell.column, { resize: enableColumnResize, isSystemCol: isSystemColumn(cell.column.id) }),
-          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 display padding
+          // Padding override 只在 inline-edit cell(naked Field 撐滿 cell);portal mode cell 走正常 view padding
           ...(isEditingThisCell && !experimentalActiveEditorController ? {} : cellPadding),
           // Slice D Step 2(2026-05-10):flag 開時 set CSS variable 抑制 Field naked hover outline,
           // 讓 overlay layer 接管 hover ring paint(per RFC Contract 8 「one geometry owner, two paint owners」)。
@@ -1839,7 +1832,7 @@ function DataTableInner<TData>(
         onClick={onEditableCellClick}
         // a11y(2026-07-14 dim-10 修):非 spreadsheet 的 inlineEdit cell 原本只有 onClick —
         // 鍵盤 user 無法聚焦 cell、無法進入編輯(WCAG 2.1.1)。對齊 Atlassian InlineEdit
-        // read-view-focusable idiom:editable display cell 可 Tab 聚焦,Enter / F2 進 edit。
+        // read-view-focusable idiom:editable view cell 可 Tab 聚焦,Enter / F2 進 edit。
         // spreadsheetMode 不加(該模式走 table-level selectedCellId 鍵盤導覽 SSOT,per-cell
         // tab stop 會跟 roving 模型衝突);cell 內 embedded 控件事件不攔(target guard)。
         tabIndex={onEditableCellClick && !spreadsheetMode ? 0 : undefined}
@@ -1852,7 +1845,7 @@ function DataTableInner<TData>(
         } : undefined}
       >
         {/* Issue 9 cell error(2026-05-10):有 error → cell 內外結構切 flex-col,
-            上 row 渲既有 nested + content,下 row 渲 error message 14px text-error。
+            上 row 渲既有 nested + content,下 row 渲 error message `text-body text-error`。
             無 error 時走原 flex-row(backward-compat 0 layout shift)。 */}
         {hasCellError ? (
           <span className="flex flex-col self-stretch w-full min-w-0 gap-1">
@@ -2085,8 +2078,7 @@ function DataTableInner<TData>(
         else if (e.key === 'ArrowLeft' && curColIdx > 0) { nextColIdx = curColIdx - 1 }
         else if (e.key === 'ArrowRight' && curColIdx < allCols.length - 1) { nextColIdx = curColIdx + 1 }
         else if (e.key === 'Enter' || e.key === 'F2') {
-          // Enter / F2 → 進 edit(若 cell editable + 非 boolean / url + 非 disabled)
-          // 2026-05-13 codex V1 fix:加 `!isCellDisabled(meta, row)` gate(對齊 mouse click invariant)
+          // Enter / F2 → 進 edit(若 cell editable + 非 boolean / url)。edit 入口統一走 canEditCell(= isCellEditable)。
           const row = table.getRowModel().rowsById[curRowId]
           const colDef = table.getAllLeafColumns().find((c) => c.id === curColId)
           // any-allow: column meta free-form
@@ -2142,7 +2134,7 @@ function DataTableInner<TData>(
     },
     // D3 dep-hygiene fix(2026-07-06):handler 內(portal edit Enter 分支)呼叫的是 canEditCell,
     // 非 isCellEditable — 原 deps 列 isCellEditable 是靠 canEditCell identity-stable 才無實害的
-    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable + isCellDisabled)。
+    // stale-closure 地雷;改列真實依賴 canEditCell(其 useCallback deps 已含 isCellEditable)。
     [enabled, mode, hasAnySelection, selectableVisibleIds, setSelection,
      spreadsheetMode, selectedCellId, editingCellId, table, canEditCell]
   )
@@ -2315,16 +2307,40 @@ function DataTableInner<TData>(
           const colOptIn = colMeta?.resizable !== false
           const isResizable = enableColumnResize && !isSystemColumn(colId) && colOptIn
           const isResizing = header.column.getIsResizing?.()
+          // 鍵盤 resize(WAI-ARIA window-splitter):方向鍵調整欄寬,公開目前值 + 下限。
+          // effectiveMinWidth 對齊 drag 路徑(resolveColumnSizing minSize),step 16px。
+          const effectiveMinWidth = header.column.columnDef.minSize ?? MIN_COLUMN_WIDTH
+          const currentWidth = Math.round(header.column.getSize())
+          const RESIZE_KEY_STEP = 16
           // H2: 不論 showDivider,只要 isResizable 就 render hot zone(panel boundary col 仍可拖)
           if (!showDivider && !isResizable) return null
           return (
             <span
               role={isResizable ? 'separator' : undefined}
               aria-orientation={isResizable ? 'vertical' : undefined}
-              aria-label={isResizable ? '拖曳調整欄寬' : undefined}
+              aria-label={isResizable ? '調整欄寬' : undefined}
+              // 鍵盤可操作 separator(WAI-ARIA window-splitter):focusable + 方向鍵調整 +
+              // 公開目前寬度 / 下限。aria-valuetext 給 SR px 值(避免無 valuemax 時被誤讀成百分比)。
+              tabIndex={isResizable ? 0 : undefined}
+              aria-valuenow={isResizable ? currentWidth : undefined}
+              aria-valuemin={isResizable ? effectiveMinWidth : undefined}
+              aria-valuetext={isResizable ? `${currentWidth}px` : undefined}
+              onKeyDown={isResizable ? (e: React.KeyboardEvent<HTMLSpanElement>) => {
+                let next: number | null = null
+                if (e.key === 'ArrowLeft') next = Math.max(effectiveMinWidth, currentWidth - RESIZE_KEY_STEP)
+                else if (e.key === 'ArrowRight') next = currentWidth + RESIZE_KEY_STEP
+                else if (e.key === 'Home') next = effectiveMinWidth
+                if (next == null) return
+                // stopPropagation:不讓方向鍵冒泡到 header 排序 / 欄位拖曳 keyboard listener。
+                e.preventDefault()
+                e.stopPropagation()
+                table.setColumnSizing((prev) => ({ ...prev, [colId]: next as number }))
+                // onColumnResize 由 columnSizing useEffect 自動 fire(非 drag 路徑不經 isResizingColumn)。
+              } : undefined}
               className={cn(
                 'group/resize absolute top-0 bottom-0 right-0 -mr-[3px] w-[7px]',
                 isResizable && 'cursor-col-resize select-none',
+                isResizable && 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
               )}
               // 2026-05-12 fix v2(user 抓 R3 stopPropagation 沒生效):dnd-kit PointerSensor
               // 監聽 `pointerdown`,我前一輪只 stop `onMouseDown` → pointerdown 仍冒泡 →
@@ -2721,12 +2737,19 @@ function DataTableInner<TData>(
           // Center body 同時擁有 H + V scroll;maxHeight 限制讓 H scrollbar 落在 visible 底部
           data-datatable-hscroll
           data-datatable-panel="center"
+          // a11y(scrollable-region-focusable,對齊 DS ScrollArea Viewport canonical):唯讀表格
+          // 的可捲動 body 若無任何 focusable descendant,鍵盤使用者無法捲動。read-only 模式
+          // (非 enabled / spreadsheet)outer table 也不 focusable → 這裡補 tabIndex=0 + 具名 +
+          // inset focus ring,讓鍵盤可聚焦後方向鍵捲動;互動模式已由 outer table keyboard handler
+          // + focusable cells 覆蓋,不重複加 tab stop。
+          tabIndex={enabled || spreadsheetMode ? undefined : 0}
+          aria-label={enabled || spreadsheetMode ? undefined : '表格內容,可捲動'}
           // overflow-x/y: auto — 沒 overflow 就不顯 bar。wrapper minWidth 仍 trigger H 真 overflow。
           // **不**用 scrollbar-gutter: stable — 那會永遠保留 V 軸 15px 空間,
           // content fit 時看起來像「永遠有 V 捲軸」(Image #5 bug)。
           // trade-off:V scroll 出現時 body 內側少 15px,header 不縮 → 右端微 misalign,
           // 但 content fit 視覺乾淨優先(Mac 用戶 overlay scrollbar 不可見)。
-          className="flex-1 min-w-0 overflow-x-auto overflow-y-auto"
+          className="flex-1 min-w-0 overflow-x-auto overflow-y-auto focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"
           // isFillHeight:用 JS 算的 px(bodyMaxHeight),bypass CSS % 在 flex 場景的不可靠 shrink。
           // 固定 px(300px etc):直接套 height。
           style={
@@ -2779,7 +2802,7 @@ function DataTableInner<TData>(
         activeEditorEnabled={experimentalActiveEditorController}
         // Slice D Step 5(D.3 portal Field,2026-05-10):real portal Field render callback。
         // Layer 在 ActiveEditorHost(z 3 float rect)render `<Cell mode="edit" />` 同 registry。
-        // Cell wrapper 保持 mode="display"(SSOT preserved per codex Q6.2)。
+        // Cell wrapper 保持 mode="view"(SSOT preserved per codex Q6.2)。
         activeEditorRender={experimentalActiveEditorController ? (cellId) => {
           const lastColon = cellId.lastIndexOf(':')
           if (lastColon < 0) return null

package/src/components/DataTable/filter-operators.spec.md

@@ -245,6 +245,8 @@
 - **巢狀深度**:1-level cap 由 TypeScript 型別鎖死(`FilterGroup.children: FilterCondition[]`),無 runtime guard;繞過型別塞入的非 condition 物件缺 `field`/`op` → incomplete → pass-through,不 crash
 - **relative 區間邊界**:全部 local time、雙端 inclusive(`startOfDay`–`endOfDay`);`past_7_days` = 7 天前 00:00 起**含今天整天**;week 以週一起算(`weekStartsOn: 1`)
 
+**A11y / Loading(明文 N/A)**:本 spec 是 Operator × ColumnType × ValueShape 資料模型 SSOT(非 UI 元件)——filter panel 的互動 a11y / loading 狀態屬 UI 層 owner(`data-table.spec.md` + filter panel 家族元件)與各 Field 控件 spec。
+
 ## 9. Phase B 進度
 
 - [x] ValueShape × DS 元件對照 — 完成,coverage 8/12 直接消費 + 4 預留;datetime 走 `<DatePicker showTime>` / `<DatePickerRange showTime>` prop variant(M21,非新元件)

package/src/components/DateGrid/date-grid.spec.md

@@ -58,7 +58,7 @@ DateGrid 是 internal primitive(見「定位」),一般 consumer 經 `DatePicker
 | 場景 | 改用 | 原因 |
 |------|------|------|
 | 日期輸入欄位 | `DatePicker` | DateGrid 是 inline,欄位需要 trigger + popup 結構 |
-| 純顯示單日期 | `<DatePicker mode="display">` / `Intl.DateTimeFormat` | 不需 interactive 月曆 |
+| 純顯示單日期 | `<DatePicker mode="view">` / `Intl.DateTimeFormat` | 不需 interactive 月曆 |
 | 時間選擇(時分) | `TimePicker`(見 `../TimePicker/time-picker.spec.md`)| DateGrid 只處理日期層級 |
 | 事件行事曆(日程本) | 專用行事曆元件 | DateGrid 是日期選擇;事件日誌需要 event overlay / drag / week/month view 切換 |
 

package/src/components/DatePicker/date-picker.anatomy.stories.tsx

@@ -248,7 +248,7 @@ export const Overview = {
             <thead><tr><Th>Prop</Th><Th>Type</Th><Th>Default</Th><Th>說明</Th></tr></thead>
             <tbody>
               {[
-                ['mode', "'edit' | 'display' | 'readonly' | 'disabled'", "'edit'", "顯示模式；display 為純內容輸出（DataTable cell 用）。優先序：顯式 mode prop 永遠最優先，未傳 mode 時 disabled 才升 disabled（useResolvedFieldMode）；disabled 以 aria-disabled 表達（trigger 為 div role=combobox，非原生 disabled 屬性）"],
+                ['mode', "'edit' | 'view' | 'readonly' | 'disabled'", "'edit'", "顯示模式；view 為純內容輸出（DataTable cell 用）。優先序：顯式 mode prop 永遠最優先，未傳 mode 時 disabled 才升 disabled（useResolvedFieldMode）；disabled 以 aria-disabled 表達（trigger 為 div role=combobox，非原生 disabled 屬性）"],
                 ['error', 'boolean', 'false', '紅色邊框 + aria-invalid，僅 edit 模式生效'],
                 ['size', "'sm' | 'md' | 'lg'", "'md'", '高度與字體，與 Button 共用 field-height token'],
                 ['value', 'string | null', '—', 'ISO date string（YYYY-MM-DD）'],
@@ -708,12 +708,12 @@ export const StateBehavior = {
           <span className="text-caption font-medium text-fg-secondary">格式化 — 預設 YYYY/MM/DD 直接組；傳 formatOptions / locale 走 Intl.DateTimeFormat</span>
           <div className="overflow-x-auto">
             <table className="border-collapse text-caption">
-              <thead><tr><Th>設定</Th><Th>readonly 預覽</Th><Th>Display 預覽</Th></tr></thead>
+              <thead><tr><Th>設定</Th><Th>readonly 預覽</Th><Th>view 預覽</Th></tr></thead>
               <tbody>
                 <tr>
                   <Td>預設（YYYY/MM/DD）</Td>
                   <td className="p-2 border-b border-divider"><DatePicker mode="readonly" value="2026-04-02" /></td>
-                  <td className="p-2 border-b border-divider"><DatePicker mode="display" value="2026-04-02" /></td>
+                  <td className="p-2 border-b border-divider"><DatePicker mode="view" value="2026-04-02" /></td>
                 </tr>
                 <tr>
                   <Td mono>month: 'short'</Td>
@@ -721,7 +721,7 @@ export const StateBehavior = {
                     <DatePicker mode="readonly" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'short', day: 'numeric' }} />
                   </td>
                   <td className="p-2 border-b border-divider">
-                    <DatePicker mode="display" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'short', day: 'numeric' }} />
+                    <DatePicker mode="view" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'short', day: 'numeric' }} />
                   </td>
                 </tr>
                 <tr>
@@ -730,7 +730,7 @@ export const StateBehavior = {
                     <DatePicker mode="readonly" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
                   </td>
                   <td className="p-2 border-b border-divider">
-                    <DatePicker mode="display" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
+                    <DatePicker mode="view" value="2026-04-02" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
                   </td>
                 </tr>
                 <tr>
@@ -739,13 +739,13 @@ export const StateBehavior = {
                     <DatePicker mode="readonly" value="2026-04-02" locale="zh-TW" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
                   </td>
                   <td className="p-2 border-b border-divider">
-                    <DatePicker mode="display" value="2026-04-02" locale="zh-TW" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
+                    <DatePicker mode="view" value="2026-04-02" locale="zh-TW" formatOptions={{ year: 'numeric', month: 'long', day: 'numeric' }} />
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
-          <span className="text-[11px] text-fg-muted">edit trigger 顯示文字與 Display 都用 Intl.DateTimeFormat 格式化（formatOptions / locale prop 對兩者皆生效,跨模式一致）。</span>
+          <span className="text-[11px] text-fg-muted">edit trigger 顯示文字與 view 都用 Intl.DateTimeFormat 格式化（formatOptions / locale prop 對兩者皆生效,跨模式一致）。</span>
         </div>
 
         {/* Empty value display */}
@@ -761,8 +761,8 @@ export const StateBehavior = {
               <DatePicker mode="disabled" value={null} className="w-48" />
             </div>
             <div className="flex items-center gap-3">
-              <span className="text-[11px] text-fg-muted w-20 shrink-0">Display</span>
-              <DatePicker mode="display" value={null} />
+              <span className="text-[11px] text-fg-muted w-20 shrink-0">view</span>
+              <DatePicker mode="view" value={null} />
             </div>
           </div>
         </div>

package/src/components/DatePicker/date-picker.principles.stories.tsx

@@ -51,7 +51,7 @@ export const UsageGuidance: Story = {
             <li><LinkTo kind="Design System/Components/DatePicker/展示" name="可清除"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">篩選器的選填截止日,填錯一鍵清空(可清除)</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/DatePicker/展示" name="尺寸"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">緊湊工具列與標準表單的尺寸對應(尺寸)</span></LinkTo></li>
             <li><LinkTo kind="Design System/Components/DatePicker/展示" name="範圍模式:訂房 / 訂機票情境"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">Range:訂房 / 訂機票情境</span></LinkTo></li>
-            <li><LinkTo kind="Design System/Components/DatePicker/展示" name="展示樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">審批詳情頁唯讀展示申請日期(展示樣式)</span></LinkTo></li>
+            <li><LinkTo kind="Design System/Components/DatePicker/展示" name="檢視樣式"><span className="text-primary hover:text-primary-hover font-medium cursor-pointer">審批詳情頁唯讀展示申請日期(展示樣式)</span></LinkTo></li>
           </ul>
           <p className="text-fg-muted mt-3">判斷不確定時:對照 spec.md「何時用 / 何時不用」段;若仍不符,改用近親元件(見下方 vs 近親 段)。</p>
         </div>
@@ -139,7 +139,7 @@ export const FormattingRule: Story = {
     <div>
       <Rule
         title="格式化跨模式一致 — 預設 YYYY/MM/DD,傳 formatOptions / locale 走 Intl.DateTimeFormat"
-        note="未傳格式 prop 時預設直接組 YYYY/MM/DD(locale-independent);傳 formatOptions + locale 才啟用 Intl.DateTimeFormat,同時控制 readonly / disabled 的 Display 文字與 edit trigger 顯示文字。跨模式一致、跨頁面可預期。Calendar popup 的月份語言由 Calendar 內部 locale 處理"
+        note="未傳格式 prop 時預設直接組 YYYY/MM/DD(locale-independent);傳 formatOptions + locale 才啟用 Intl.DateTimeFormat,同時控制 view / readonly / disabled 的格式化文字與 edit trigger 顯示文字。跨模式一致、跨頁面可預期。Calendar popup 的月份語言由 Calendar 內部 locale 處理"
       >
         <DatePicker
           mode="readonly"
@@ -157,7 +157,7 @@ export const FormattingRule: Story = {
 
       <Rule
         title="Edit trigger 文字也受 formatOptions / locale 控制"
-        note={'原本原生 <input type="date"> 的 trigger 格式受瀏覽器 locale 控制無法干預;改自建後,edit trigger 顯示的已選日期也走 Intl.DateTimeFormat——跟 Display 模式完全一致'}
+        note={'原本原生 <input type="date"> 的 trigger 格式受瀏覽器 locale 控制無法干預;改自建後,edit trigger 顯示的已選日期也走 Intl.DateTimeFormat——跟 view 模式完全一致'}
       >
         <DatePicker
           value="2026-05-15"
@@ -170,7 +170,7 @@ export const FormattingRule: Story = {
 
       <Rule
         title="null 值統一顯示半形連字號"
-        note="Display 模式 null / undefined 顯示半形 -(foreground,同 readonly value 色),與其他 Field 元件一致"
+        note="view 模式 null / undefined 顯示半形 -(foreground,同 readonly value 色),與其他 Field 元件一致"
       >
         <DatePicker mode="readonly" value={null} />
       </Rule>

package/src/components/DatePicker/date-picker.spec.md

@@ -68,7 +68,7 @@ open 軸同樣只開最小 API — **uncontrolled-only**:`defaultOpen`(初始開
 |------|------|------|
 | 日期範圍（from → to） | **`<DatePicker.Range>`**(本檔下「DatePicker.Range」段,2026-04-21 新增) | 仿 Ant `DatePicker.RangePicker` 架構:雙 input + 箭頭 + 共用 calendar icon,Popover 展開兩月份並列 |
 | 日期 + 時間（含時分） | **本元件加 `showTime` prop**(canonical 2026-05-02,Ant idiom) | DatePicker `showTime` / DatePickerRange `showTime` 內建 TimeColumns + 此刻/確定 footer;value 變 ISO datetime |
-| 相對時間（「3 天前」「昨天」）| 自訂 Display 元件 | DatePicker 的 Display 是絕對日期；相對時間需要計算 + locale 格式化 |
+| 相對時間（「3 天前」「昨天」）| 自訂展示元件 | DatePicker 的 view 態是絕對日期；相對時間需要計算 + locale 格式化 |
 | 純文字 YYYY-MM-DD（不需要 picker）| `Input` | 如 API debug 介面、不需互動的純記錄 |
 | 生日等「只有月日、不需要年」的欄位 | 目前用 DatePicker 忍受年份 | 多數情境可接受；要極致可自訂 MonthDayPicker |
 | Notion / Google 式 event calendar 檢視 | **`<Calendar>`** 元件(見 `../Calendar/calendar.spec.md`,月/週/日 event view);**非本元件語義** | DatePicker 是「選日期」的 form control;Calendar 是「看事件」的頁面 canvas,兩者雖名字都有 calendar 但是不同 DS 元件 |
@@ -232,7 +232,7 @@ DateGrid cell 有 5 種語意視覺,每種用不同形狀/色彩語言避免混
 - **needConfirm 獨立於 showTime**(2026-07-05 D4 codify):date-only `<DatePicker needConfirm>` 亦成立,footer 渲染 gate = `showTime || needConfirm`(single 與 Range 一致)——needConfirm 時「確定」是唯一 commit 路徑,漏渲 footer = draft 永遠無法 commit 的死路(2026-07-05 修 single 漏 `|| needConfirm`)
 - showSeconds=false(default)→ TimeColumns 只顯示 H/M(對齊 Ant 預設)
 - Range cell disable(對齊 Ant `useRangeDisabledDate`):activeEnd='start' + end 已選 → date > end disabled;activeEnd='end' + start 已選 → date < start disabled
-- Range stadium pattern(canonical 2026-05-03 v8):rangeStart/End cell pseudo `before:rounded-l-full / rounded-r-full` 跟 button 圓的左/右半弧 EXACTLY OVERLAY → 無「凸出」(對齊 Ant `cell-range-start::before { border-radius: 9999px 0 0 9999px }`)
+- Range stadium pattern(canonical 2026-05-03 v8):SSOT → `../DateGrid/date-grid.spec.md`(`range_start` / `range_end` 半圓 stadium 規則;class 細節見 `date-grid.tsx`)
 
 ### 為什麼用 prop 而非分離 `<DateTimePicker>` 元件
 
@@ -258,7 +258,7 @@ DateGrid cell 有 5 種語意視覺,每種用不同形狀/色彩語言避免混
 | `formatOptions` | `Intl.DateTimeFormatOptions` | `{ year: 'numeric', month: 'short', day: 'numeric' }` |
 | `locale` | BCP 47 locale | `'zh-TW'`、`'en-US'` |
 
-預設(未傳 `formatOptions` / `locale`)直接組 `YYYY/MM/DD`(locale-independent,對齊 Ant year-first;見 date-picker.tsx `formatDate` 註解);傳 `formatOptions` / `locale` 才走 `Intl.DateTimeFormat`。Display 模式(readonly / disabled / DataTable cell)與 Edit 模式 trigger 文字同一條格式化路徑,兩者一致。
+預設(未傳 `formatOptions` / `locale`)直接組 `YYYY/MM/DD`(locale-independent,對齊 Ant year-first;見 date-picker.tsx `formatDate` 註解);傳 `formatOptions` / `locale` 才走 `Intl.DateTimeFormat`。View / readonly / disabled 模式(含 DataTable cell)與 Edit 模式 trigger 文字同一條格式化路徑,兩者一致。
 
 ---
 
@@ -267,7 +267,7 @@ DateGrid cell 有 5 種語意視覺,每種用不同形狀/色彩語言避免混
 `clearable` prop 在有值時顯示 clear 按鈕（endAction）。
 
 - 只在 edit 模式顯示
-- 清除後 value 變為 `null`（Display 顯示半形 -,text-foreground）
+- 清除後 `onChange?.('')`（空字串 = 空值；view 態顯示半形 -,text-foreground）
 - **Dual-state sync canonical**(2026-05-03 v10):X 點擊必同時 `onChange?.('')` + `setDraft(null)`(Range 同),否則 `needConfirm=true`(showTime 預設)且 popover 開著時 `displayValue=draft` 仍顯示舊值,trigger 看起來「沒清」。X 在 trigger 上是 standard clear affordance,不走 needConfirm「等確定」語義 — 立刻 commit + 同步 draft
 
 ---
@@ -284,16 +284,16 @@ DateGrid cell 有 5 種語意視覺,每種用不同形狀/色彩語言避免混
 
 DatePicker 套 `React.forwardRef` + `displayName`;`DatePickerProps` extends `Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'placeholder' | 'defaultValue'>`,剩餘 DOM attrs `...props` spread 到**當前 mode 的 root wrapper**(edit trigger `<div role="combobox">` / readonly · disabled wrapper div / Range wrapper div)。
 
-**例外**:`mode="display"` 預設(未 opt-in `showDisplayEndIcon`)輸出裸 `<span>`,**不** spread `...props`——consumer 傳 DOM attrs(`data-testid` / `onFocus` 等)時注意 display 模式不生效;`className` 各 mode 皆顯式接收(套在該 mode 的 root 元素)。
+**例外**:`mode="view"` 預設(未 opt-in `showDisplayEndIcon`)輸出裸 `<span>`,**不** spread `...props`——consumer 傳 DOM attrs(`data-testid` / `onFocus` 等)時注意 view 模式不生效;`className` 各 mode 皆顯式接收(套在該 mode 的 root 元素)。
 
-**`asChild` 不支援**:trigger 是 compound(display 裸 span / edit `div role="combobox"` 不同 render tree),無單一 Slot 目標。consumer 若要自訂 trigger 視覺,改用 `<DatePicker mode="display">` + 自家 Button composition。
+**`asChild` 不支援**:trigger 是 compound(view 裸 span / edit `div role="combobox"` 不同 render tree),無單一 Slot 目標。consumer 若要自訂 trigger 視覺,改用 `<DatePicker mode="view">` + 自家 Button composition。
 
 ---
 
 ## A11y 預設
 
 - Trigger:`role="combobox"` + `aria-haspopup="dialog"` + `aria-expanded={open}` + 必含 accessible name(`aria-label` / 或外層 `<label>` / 或 fieldCtx label)
-- Popover content:`role="dialog"`;單一日期 popover 不重覆 `aria-label`(由 trigger 的 `role="combobox"` accessible name 標示),Range popover 加 `aria-label="日期區間選擇"`
+- Popover content:`role="dialog"`;單一日期 popover 的 PopoverContent 帶 `aria-label="日期選擇"`(date-picker.tsx:650,DS default dialog label),Range popover 加 `aria-label="日期區間選擇"`
 - DateGrid 鍵盤:Arrow keys 切日 / PageUp/Down 切月 / Home/End 行首尾(react-day-picker v9 內建)
 - Trigger 鍵盤(Space / Enter open;Esc close + 回焦):單一 DatePicker 的 `<div role="combobox">` 無 native Enter/Space→click,由元件**自建 `onKeyDown`** 開 popover(Radix PopoverTrigger 只 compose onClick;date-picker.tsx:554),Esc 關閉後靠 PopoverTrigger 的 Radix **內建** `triggerRef.focus()` 回焦;Range 用 native `<button>` onClick 開、只掛 PopoverAnchor(triggerRef 恆 null → 內建回焦 no-op),改由**自建 `onCloseAutoFocus`** 手動回焦 active 端 button(date-picker.tsx:1020-1026,守 WCAG 2.4.3)
 - Range 雙 trigger:`activeEnd` state 指向當前編輯端,`aria-expanded` 對應只當該 trigger active 時 true
@@ -311,11 +311,11 @@ DatePicker 套 `React.forwardRef` + `displayName`;`DatePickerProps` extends `Omi
 
 ## 邊界案例
 
-- **Disabled**:Field SSOT own;resolvedMode='disabled' 走 readonly / disabled 純 wrapper 分支(無 Popover trigger、`aria-disabled`、不開 picker),文字與 Calendar icon 切 `text-fg-disabled`。readonly 不顯示 Calendar icon(類型身份 indicator 規則,SSOT field-controls.spec.md L227);disabled 保留並切 `fg-disabled`。顯式 `mode="display"` 永遠最優先(useResolvedFieldMode step 1,見 field-context.ts):display + disabled 同傳走 display 分支不套 disabled token;要 disabled chrome 傳 `disabled` 或 `mode="disabled"`。
+- **Disabled**:Field SSOT own;resolvedMode='disabled' 走 readonly / disabled 純 wrapper 分支(無 Popover trigger、`aria-disabled`、不開 picker),文字與 Calendar icon 切 `text-fg-disabled`。readonly 不顯示 Calendar icon(類型身份 indicator 規則,SSOT field-controls.spec.md「下拉箭頭與類型身份 indicator」段 L266-276);disabled 保留並切 `fg-disabled`。顯式 `mode="view"` 永遠最優先(useResolvedFieldMode step 1,見 field-context.ts):view + disabled 同傳走 view 分支不套 disabled token;要 disabled chrome 傳 `disabled` 或 `mode="disabled"`。
 - **Loading(server-rendered grid)**:DatePicker 為 sync UI 不獨立 own loading。若 consumer 場景需 async date constraint fetch(如後端 disabled-dates list),consumer 應先 disable trigger 直到 fetch 完成,或在 popover 開啟後 body 切 `<Empty icon={<CircularProgress/>}/>`(對齊 panel-body loading SSOT)。本 spec scope 內不渲 loading state。
 - **Empty(no value)**:`value=null` → trigger 顯 placeholder(預設 `YYYY/MM/DD`,showTime 時 `YYYY/MM/DD HH:MM`;consumer 可傳 `placeholder` 覆寫)。無導覽目標時鍵盤焦點停留(react-day-picker v9 內建)。
 - **Invalid date input**:Field validation 處理 `aria-invalid="true"` + error border + 下方 error message;DatePicker 本身不 own validation 規則。
-- **極長格式化日期**:trigger 文字單行 `truncate`(ellipsis),不換行不撐高(Display / Edit / typeable / Range 雙 input 皆同)。
+- **極長格式化日期**:trigger 文字單行 `truncate`(ellipsis),不換行不撐高(View / Edit / typeable / Range 雙 input 皆同)。
 - **RTL**:未實作方向鏡像(trigger / Range 雙 input / DateGrid 皆以 LTR physical 方向設計);RTL 屬 DS-wide 決策,未定(與 Chip / Breadcrumb 同口徑)。
 - **Dark mode / density**:走 Field + Popover SSOT 自動 adapt;DateGrid 內 cell 尺寸 density-aware(消費 `--field-height-sm`:md=28×28 / lg=32×32,對齊 L128 + `date-grid.spec.md:120`),隨 density 縮放而非固定。