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

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 縮放而非固定。
 
@@ -333,6 +333,7 @@ DatePicker 套 `React.forwardRef` + `displayName`;`DatePickerProps` extends `Omi
 
 - `calendar.spec.md`
 - `date-grid.spec.md`
+- `header-canonical.spec.md`
 - `input.spec.md`
 - `number-input.spec.md`
 - `time-picker.spec.md`

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

@@ -76,8 +76,8 @@ export const Modes: Story = {
       </div>
       {/* @story-trait-rationale: pre-existing trait gaps tracked separately */}
       <div>
-        <h3 className="text-body font-bold text-foreground mb-2">display</h3>
-        <DatePicker mode="display" value="2026-04-02" />
+        <h3 className="text-body font-bold text-foreground mb-2">view</h3>
+        <DatePicker mode="view" value="2026-04-02" />
       </div>
       <div>
         <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>
@@ -315,26 +315,26 @@ export const ShowTimeRange: Story = {
   },
 }
 
-/* ── Display（DataTable cell 用）── */
-export const Display: Story = {
-  name: '展示樣式',
+/* ── View（DataTable cell 用）── */
+export const View: Story = {
+  name: '檢視樣式',
   render: () => (
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">預設</span>
-        <DatePicker mode="display" value="2026-04-02" />
+        <DatePicker mode="view" value="2026-04-02" />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">完整月份</span>
-        <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' }} />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">zh-TW</span>
-        <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' }} />
       </div>
       <div className="flex items-center gap-3">
         <span className="text-caption text-fg-muted w-20">null</span>
-        <DatePicker mode="display" value={null} />
+        <DatePicker mode="view" value={null} />
       </div>
     </div>
   ),

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

@@ -328,9 +328,9 @@ export interface DatePickerProps
    */
   needConfirm?: boolean
   /**
-   * Display 是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)
-   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
-   * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,
+   * View 態是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)
+   * — DataTable cell view↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
+   * 設 true 時 view 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,
    * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
    */
   showDisplayEndIcon?: boolean
@@ -409,7 +409,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
     const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix:<Field size>/cell surface-size 對 DatePicker 生效
     const error = useResolvedFieldInvalid(errorProp)
     const disabled = useResolvedFieldDisabled(disabledProp)
-    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
     const resolvedMode = useResolvedFieldMode({ mode, disabled })
     const emptyDisplay = useFieldEmptyDisplay()
     const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
@@ -475,21 +475,21 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
       }
     }, [onChange, showTime])
 
-    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 對齊原 DatePickerDisplay sub-component(retired)。
+    // mode='view'(Phase B2 2026-05-05):純內容輸出 — 對齊原 DatePickerDisplay sub-component(retired)。
     //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Calendar icon — backward compat 裸 span。
     //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Calendar,
-    //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。
-    if (resolvedMode === 'display') {
+    //   與 edit 同結構消除 cell view↔edit 像素偏移(Layer-B padding mismatch)。
+    if (resolvedMode === 'view') {
       if (!showDisplayEndIcon) {
-        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):bare span 套
+        // 2026-05-14 I2 fix(spec contract (e) view typography canonical):bare span 套
         // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。
         if (!value) return <span className={cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>
         return <span className={cn(fieldDisplayTextClass(size), 'truncate', className)}>{displayCommitted}</span>
       }
       return (
         <div
-          className={cn(fieldWrapperStyles({ mode: 'display', variant, width, size }), className)}
-          data-field-mode="display"
+          className={cn(fieldWrapperStyles({ mode: 'view', variant, width, size }), className)}
+          data-field-mode="view"
         >
           <span className={cn(bareInputStyles, 'flex-1 min-w-0 truncate', !value && fieldEmptyColorClass(resolvedMode))}>
             {value ? displayCommitted : emptyDisplay}
@@ -801,7 +801,7 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerRangeProps>(
     const size = useResolvedFieldSize(sizeProp)  // B 組 cascade fix:<Field size>/cell surface-size 對 DatePicker 生效
     const error = useResolvedFieldInvalid(errorProp)
     const disabled = useResolvedFieldDisabled(disabledProp)
-    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="display"> 漏 cascade
+    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode;修 <Field mode="view"> 漏 cascade
     const resolvedMode = useResolvedFieldMode({ mode, disabled })
     const emptyDisplay = useFieldEmptyDisplay()
     const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)
@@ -936,8 +936,8 @@ const DatePickerRange = React.forwardRef<HTMLDivElement, DatePickerRangeProps>(
       return false
     }, [activeEnd, startDate, endDate])
 
-    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 無 Field wrapper / 無 Calendar icon。
-    if (resolvedMode === 'display') {
+    // mode='view'(Phase B2 2026-05-05):純內容輸出 — 無 Field wrapper / 無 Calendar icon。
+    if (resolvedMode === 'view') {
       const hasAny = !!(startIso || endIso)
       if (!hasAny) return <span className={cn(fieldEmptyColorClass(resolvedMode), className)}>{emptyDisplay}</span>
       return (

package/src/components/DescriptionList/description-list.anatomy.stories.tsx

@@ -5,7 +5,7 @@
 //     foreground(value),無 variant × state 色彩矩陣。色彩 token 已於
 //     Overview「Typography(閱讀模式)」段列出。
 //   SizeMatrix N/A — 不提供 size prop;大小固定 text-body(14px reading mode),
-//     由 layout(cols / direction / divided)而非 size 決定差異。ColsMatrix 已
+//     由 layout(cols / orientation / divided)而非 size 決定差異。ColsMatrix 已
 //     涵蓋 layout 變化。
 import type { Meta, StoryObj } from '@storybook/react'
 import { DescriptionList, DescriptionItem } from './description-list'
@@ -54,7 +54,7 @@ export const Overview: Story = {
         <Desc>items 之間垂直間距走 `--layout-space-tight` token(density-aware)——切 density 自動適配,避免硬寫 px / py-N 脫鉤 token;label → value(同 item 內)走 `--item-gap-label-desc-reading`(2px,見下表 row 1)。</Desc>
         <div className="overflow-x-auto">
           <table className="text-caption border-collapse">
-            <thead><tr><Th>Direction</Th><Th>位置</Th><Th>Value</Th><Th>Rationale</Th></tr></thead>
+            <thead><tr><Th>Orientation</Th><Th>位置</Th><Th>Value</Th><Th>Rationale</Th></tr></thead>
             <tbody>
               <tr><Td mono>vertical</Td><Td>label → value(同 item 內)</Td><Td mono>--item-gap-label-desc-reading(2px)</Td><Td>極小間距,視覺上 label 與 value 緊密配對(dt body + dd body → reading token)</Td></tr>
               <tr><Td mono>vertical</Td><Td>items 之間垂直 gap</Td><Td mono>gap-y-[var(--layout-space-tight)]</Td><Td>density-aware;Gestalt proximity 群組</Td></tr>
@@ -73,16 +73,16 @@ export const Overview: Story = {
 export const Inspector: Story = {
   name: '元件檢閱器',
   parameters: {
-    docs: { description: { story: '右側 Controls 切 props 即時 render,取代 Figma inspect。調整 `cols` / `direction` / `divided` 看 CSS grid 配置變化。' } },
+    docs: { description: { story: '右側 Controls 切 props 即時 render,取代 Figma inspect。調整 `cols` / `orientation` / `divided` 看 CSS grid 配置變化。' } },
   },
   args: {
     cols: 2,
-    direction: 'vertical',
+    orientation: 'vertical',
     divided: false,
   },
   argTypes: {
     cols: { control: 'radio', options: [1, 2, 3] },
-    direction: { control: 'radio', options: ['vertical', 'horizontal'] },
+    orientation: { control: 'radio', options: ['vertical', 'horizontal'] },
     divided: { control: 'boolean', description: 'horizontal 模式下,每個 item 下加 border-b 對齊 rows(長列表建議開)' },
   },
   render: (args) => (

package/src/components/DescriptionList/description-list.principles.stories.tsx

@@ -197,7 +197,7 @@ export const LabelAlignmentRule: Story = {
     <div>
       <Rule
         title="本系統採 stacked(label 在上、value 在下)— label 左對齊"
-        note="對齊 Atlassian / Shopify Polaris / Stripe 慣例——label 與 value 垂直堆疊,兩者都左對齊。閱讀節奏由上往下、由左往右,不需視線左右跳動。這是 vertical(預設)模式的結構;label 左 / value 右的 metadata 列改用既有 `direction=&quot;horizontal&quot;` prop(見 spec「Direction」段)"
+        note="對齊 Atlassian / Shopify Polaris / Stripe 慣例——label 與 value 垂直堆疊,兩者都左對齊。閱讀節奏由上往下、由左往右,不需視線左右跳動。這是 vertical(預設)模式的結構;label 左 / value 右的 metadata 列改用既有 `orientation=&quot;horizontal&quot;` prop(見 spec「Orientation」段)"
       >
         <Frame className="max-w-md">
           <DescriptionList cols={2}>
@@ -225,7 +225,7 @@ export const LabelAlignmentRule: Story = {
 
       <Rule
         title="❌ 不要自己用 flex 改 horizontal layout"
-        note="手刻 flex 模擬 label 左 / value 右 → 失去 dl/dt/dd 語意,且多欄配置下 grid 對齊錯亂。有此需求 → 用既有 `direction=&quot;horizontal&quot;` prop(dl/dt/dd 語意完整保留,見 showcase「水平佈局」story),不要自組 layout"
+        note="手刻 flex 模擬 label 左 / value 右 → 失去 dl/dt/dd 語意,且多欄配置下 grid 對齊錯亂。有此需求 → 用既有 `orientation=&quot;horizontal&quot;` prop(dl/dt/dd 語意完整保留,見 showcase「水平佈局」story),不要自組 layout"
       >
         <Frame className="max-w-md">
           <div className="flex justify-between py-1">

package/src/components/DescriptionList/description-list.spec.md

@@ -44,11 +44,11 @@ benchmark:
 ## 結構
 
 - `DescriptionList`：外層 `dl`，vertical 模式為 CSS grid、horizontal 模式為 flex column
-- `DescriptionItem`：一組 `dt`（label）+ `dd`（value），透過 context 知道當前 direction 自動切 layout
+- `DescriptionItem`：一組 `dt`（label）+ `dd`（value），透過 context 知道當前 orientation 自動切 layout
 
-## Direction(2026-04-20 新增)
+## Orientation(2026-04-20 新增)
 
-| direction | Layout | 典型情境 | 世界級對照 |
+| orientation | Layout | 典型情境 | 世界級對照 |
 |-----------|--------|---------|-----------|
 | `vertical`(預設)| label 在上 / value 在下 | ProfileCard detail、sidebar 長 value(地址、bio) | Atlassian DescriptionList、Polaris DescriptionList |
 | `horizontal` | label 左 / value 右對齊 | **file info panel / 訂單詳情 / settings summary**(短 value 的 metadata 列) | Google Drive file info、Notion file panel、iOS Settings | <!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
@@ -63,13 +63,13 @@ benchmark:
 
 ```tsx
 // 短 metadata 列,無需 divider
-<DescriptionList direction="horizontal">
+<DescriptionList orientation="horizontal">
   <DescriptionItem label="建立">2026-04-20</DescriptionItem>
   <DescriptionItem label="修改">2026-04-20</DescriptionItem>
 </DescriptionList>
 
 // 檔案資訊 — 多 row + key 長度不一 → divided 對齊格線
-<DescriptionList direction="horizontal" divided>
+<DescriptionList orientation="horizontal" divided>
   <DescriptionItem label="檔名">Q1 財報分析.xlsx</DescriptionItem>
   <DescriptionItem label="類型">application/vnd.xlsx</DescriptionItem>
   <DescriptionItem label="大小">1.2 MB</DescriptionItem>
@@ -86,18 +86,18 @@ benchmark:
 
 ## 間距
 
-### Vertical direction
+### Vertical orientation
 
 - **label → value**(同 item 內):`--item-gap-label-desc-reading` token(2px)——極小間距,視覺上 label 與 value 緊密配對
 - **items 之間垂直 gap**:`gap-y-[var(--layout-space-tight)]`——density-aware,跟隨系統密度設定
 - **columns 之間水平 gap**:`gap-x-4`(16px)
 
-### Horizontal direction(divided=false)
+### Horizontal orientation(divided=false)
 
 - **items 之間垂直 gap**:`mb-[var(--layout-space-tight)]` per item(last:mb-0)——density-aware,等同 vertical 的 items gap
 - label ↔ value 水平距離:`justify-between` + `gap-4`(最小 16px,content 之間拉開)
 
-### Horizontal direction(divided=true)
+### Horizontal orientation(divided=true)
 
 - 每個 item `py-[var(--layout-space-tight)]`(density-aware,形成 cell-like row 高度)
 - 每個 item 底部 `border-b border-divider`,`last:border-b-0`——row 之間視覺格線,key 長度不一時易於對齊掃描
@@ -106,9 +106,9 @@ benchmark:
 
 ## Props
 
-### `direction`:vertical / horizontal
+### `orientation`:vertical / horizontal
 
-見上「Direction」段。
+見上「Orientation」段。
 
 ### `divided`:horizontal 專用 row divider
 
@@ -184,11 +184,11 @@ consumer 要在 DL 上方加 section heading(「基本資料」/「團隊資訊
 
 DescriptionList 是**唯讀 label / value 資料呈現**(非互動 / 非 variant 驅動):
 
-- **有 Inspector**:DL 雖唯讀,但有 layout prop 可即時切換——`Inspector` story 暴露 `cols`(1 / 2 / 3)/ `direction`(vertical / horizontal)/ `divided` 三個 prop 的 Controls,取代 Figma inspect。`direction` 與 `divided` 是 `ColsMatrix`(只示範 cols)沒涵蓋的維度。
+- **有 Inspector**:DL 雖唯讀,但有 layout prop 可即時切換——`Inspector` story 暴露 `cols`(1 / 2 / 3)/ `orientation`(vertical / horizontal)/ `divided` 三個 prop 的 Controls,取代 Figma inspect。`orientation` 與 `divided` 是 `ColsMatrix`(只示範 cols)沒涵蓋的維度。
 - **無 ColorMatrix**:DL 固定 semantic token(label `text-fg-secondary` / value `text-foreground`),無自己的色彩變體,dark mode 由 semantic token 自動切換。加 color variant 不符語意(DL 是資訊展示,非狀態載體)。
 - **無 SizeMatrix**:DL 無 size prop——垂直間距隨 `layout-space` token 感知 density(見「間距」段),但 label / value typography 走 reading mode 固定 tier,不提供 sm / md / lg 變體。不同 density 由 token 自動處理,非 prop 切換。
 
-對應 anatomy story(實際 5 個,對齊 6-canonical 結構;ColorMatrix / SizeMatrix N/A):`Overview`(anatomy + typography + 間距) + `Inspector`(Controls 即時切 `cols` / `direction` / `divided`) + `ColsMatrix`(元件特有 1 / 2 / 3 欄對照) + `StateBehavior`(空值 `-` / 長值 / 多行 / ReactNode value) + `Accessibility`(`dl/dt/dd` 語意 + 無互動說明)。
+對應 anatomy story(實際 5 個,對齊 6-canonical 結構;ColorMatrix / SizeMatrix N/A):`Overview`(anatomy + typography + 間距) + `Inspector`(Controls 即時切 `cols` / `orientation` / `divided`) + `ColsMatrix`(元件特有 1 / 2 / 3 欄對照) + `StateBehavior`(空值 `-` / 長值 / 多行 / ReactNode value) + `Accessibility`(`dl/dt/dd` 語意 + 無互動說明)。
 
 ---
 

package/src/components/DescriptionList/description-list.stories.tsx

@@ -89,14 +89,14 @@ export const DetailPanel: Story = {
   ),
 }
 
-/* ── Horizontal direction(label 左 / value 右,divided=false)──────── */
+/* ── Horizontal orientation(label 左 / value 右,divided=false)──────── */
 export const Horizontal: Story = {
   name: '水平佈局',
   render: () => (
     <div className="border border-border rounded-lg p-[var(--layout-space-loose)] max-w-md">
       {/* title 到第一個 item 的間距 = item 之間間距(Gestalt proximity canonical,見 spec) */}
       <div className="text-body font-medium mb-[var(--layout-space-tight)]">檔案資訊</div>
-      <DescriptionList direction="horizontal">
+      <DescriptionList orientation="horizontal">
         <DescriptionItem label="檔名">Q1-roadmap.pdf</DescriptionItem>
         <DescriptionItem label="類型">application/pdf</DescriptionItem>
         <DescriptionItem label="大小">2.4 MB</DescriptionItem>
@@ -107,7 +107,7 @@ export const Horizontal: Story = {
 }
 
 // @story-trait-rationale: HorizontalDivided retired 2026-05-17 per audit Dim 24/25 strict re-run —
-//   違 story-rules.md L42「同 affordance 內 prop variations 用 Controls 不另開」。Horizontal direction
+//   違 story-rules.md L42「同 affordance 內 prop variations 用 Controls 不另開」。Horizontal orientation
 //   已展示;divided 是單一 prop toggle,anatomy Inspector 已 expose Controls (L85-86)。
 //   原本內容 archive 於 git history(若要看 divided 視覺,進 anatomy Inspector 開 divided=true)。
 //   2026-06-12:刪除 zombie export _RETIRED_HorizontalDivided,對齊 DS-wide comment-only 退役慣例(deep-audit dim25)。

package/src/components/DescriptionList/description-list.tsx

@@ -12,7 +12,7 @@ import { cn } from '@/lib/utils'
  * value (dd): text-body (14px) text-foreground (neutral-9)
  * 兩者都是 14px × 1.5 行高——層級靠色彩區分，不靠字體大小。
  *
- * ── direction（2026-04-20 新增）──
+ * ── orientation（2026-04-20 新增）──
  * vertical（預設）：label 在上 / value 在下，適合長 value（地址、bio、說明段落）、
  *                   form-like 資訊展示
  * horizontal     ：label 左 / value 右對齊，適合短 value 的 metadata 列
@@ -30,15 +30,15 @@ import { cn } from '@/lib/utils'
  * divided horizontal 模式：每 item py-[var(--layout-space-tight)]（cell-like row 高度）
  */
 
-export type DescriptionDirection = 'vertical' | 'horizontal'
+export type DescriptionListOrientation = 'vertical' | 'horizontal'
 
 interface DescriptionContextValue {
-  direction: DescriptionDirection
+  orientation: DescriptionListOrientation
   divided: boolean
 }
 
 const DescriptionContext = React.createContext<DescriptionContextValue>({
-  direction: 'vertical',
+  orientation: 'vertical',
   divided: false,
 })
 
@@ -46,7 +46,7 @@ export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElem
   /** grid 欄數（vertical 才生效；horizontal 永遠單欄），預設 1 */
   cols?: 1 | 2 | 3
   /** 項目排列方向，預設 vertical（label 在上 / value 在下） */
-  direction?: DescriptionDirection
+  orientation?: DescriptionListOrientation
   /**
    * horizontal 模式下每個 item 下方加分隔線以對齊 rows。預設 false。
    * 短列表（< 4 rows）不需要；檔案 metadata 等長列表、key 長度不一時建議開。
@@ -61,10 +61,10 @@ const colsClass: Record<number, string> = {
 }
 
 const DescriptionList = React.forwardRef<HTMLDListElement, DescriptionListProps>(
-  ({ cols = 1, direction = 'vertical', divided = false, className, ...props }, ref) => {
-    const isHorizontal = direction === 'horizontal'
+  ({ cols = 1, orientation = 'vertical', divided = false, className, ...props }, ref) => {
+    const isHorizontal = orientation === 'horizontal'
     // Memoize provider value(2026-04-22 D3 perf audit):避免每 render 重建 2-field object
-    const ctxValue = React.useMemo(() => ({ direction, divided }), [direction, divided])
+    const ctxValue = React.useMemo(() => ({ orientation, divided }), [orientation, divided])
     return (
       <DescriptionContext.Provider value={ctxValue}>
         <dl
@@ -90,8 +90,8 @@ export interface DescriptionItemProps extends React.HTMLAttributes<HTMLDivElemen
 
 const DescriptionItem = React.forwardRef<HTMLDivElement, DescriptionItemProps>(
   ({ label, children, className, ...props }, ref) => {
-    const { direction, divided } = React.useContext(DescriptionContext)
-    if (direction === 'horizontal') {
+    const { orientation, divided } = React.useContext(DescriptionContext)
+    if (orientation === 'horizontal') {
       return (
         <div
           ref={ref}

package/src/components/Dialog/dialog.tsx

@@ -52,7 +52,10 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+// asChild Omit(2026-07-18 決策2):DialogContent 是固定 surface chrome(overlay + 定位 +
+// bg/rounded/shadow + onOpenAutoFocus),恆渲染 {children}(consumer body,通常 Header+Body+Footer
+// 多節點)→ <Content asChild> Radix Slot React.Children.only crash。children 保留(consumer body)。
+interface DialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'> {
   /** 最大寬度。預設 512px。傳 number 視為 px。 */
   maxWidth?: string | number
   /**