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

package/src/components/Tabs/tabs.tsx

@@ -1,6 +1,7 @@
 // @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.
-// code-quality-allow: file-size — foundational composite(Tabs + overflow scroll mode + dropdown switcher + inline action slot)在單一 wrapper SSOT 內,拆分會破壞 a11y / focus management chain。當前 515 < cap 800。
+// code-quality-allow: file-size — foundational composite(Tabs + overflow scroll mode + dropdown switcher + inline action slot)在單一 wrapper SSOT 內,拆分會破壞 a11y / focus management chain。當前 ~578 < cap 800。
 import * as React from 'react'
+import { createPortal } from 'react-dom'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { cva } from 'class-variance-authority'
 import type { LucideIcon } from 'lucide-react'
@@ -55,6 +56,15 @@ interface TabsContextValue {
 }
 const TabsContext = React.createContext<TabsContextValue>({ size: 'md' })
 
+// ── Inline-action overlay context(2026-07-18 決策1,axe aria-required-children 正規修)──
+// role=tablist 只能擁有 role=tab;per-tab inlineAction(如「更多 ▾」dropdown)若 DOM-在 tablist 內
+// = critical 違規(axe 實測確認)。Radix 要求 trigger 為 TabsList 的 React 子代(roving focus
+// context),故 trigger 必 DOM-在 tablist 內;唯一正規解 = 把 action **portal 出 tablist** 到一個
+// sibling overlay 層,以 trigger 的量測座標定位(涵蓋 3 種 overflow 模式,viewport-relative)。
+// aria-owns 不可行:axe required-children 計 DOM-owned 子代,不因 aria-owns 排除。
+// 代價(user 2026-07-18 接受):鍵盤 Tab 序 = 全部 tab 後才到 action(action 現為 overlay 內獨立 tab stop)。
+const TabsActionOverlayContext = React.createContext<HTMLDivElement | null>(null)
+
 // ── Root ──
 // Wrap Radix Tabs 以支援 value/onValueChange 的 context pass-through
 // （menu 模式的 overflow items 需要能 proxy click 觸發同一個 onValueChange）
@@ -170,27 +180,26 @@ const TabsList = React.forwardRef<
   TabsListProps
 >(({ className, size = 'sm', overflow = 'none', children, ...props }, ref) => {
   const tabsSizeContext = React.useMemo(() => ({ size }), [size])
+  // Overlay 層(決策1):per-tab inlineAction 由 TabsTrigger portal 到此,DOM-在 tablist 外,
+  // 以量測座標定位在對應 tab 之上。pointer-events-none(action span 自帶 auto);z 疊在 tab 之上。
+  const [overlayEl, setOverlayEl] = React.useState<HTMLDivElement | null>(null)
+
+  let listNode: React.ReactNode
   if (overflow === 'scroll') {
-    return (
-      <TabsContext.Provider value={tabsSizeContext}>
-        <ScrollTabsList ref={ref} className={className} {...props}>
-          {children}
-        </ScrollTabsList>
-      </TabsContext.Provider>
+    listNode = (
+      <ScrollTabsList ref={ref} className={className} {...props}>
+        {children}
+      </ScrollTabsList>
     )
-  }
-  if (overflow === 'menu') {
-    return (
-      <TabsContext.Provider value={tabsSizeContext}>
-        <MenuTabsList ref={ref} className={className} {...props}>
-          {children}
-        </MenuTabsList>
-      </TabsContext.Provider>
+  } else if (overflow === 'menu') {
+    listNode = (
+      <MenuTabsList ref={ref} className={className} {...props}>
+        {children}
+      </MenuTabsList>
     )
-  }
-  // none（預設）
-  return (
-    <TabsContext.Provider value={tabsSizeContext}>
+  } else {
+    // none（預設）
+    listNode = (
       <TabsPrimitive.List
         ref={ref}
         className={cn(TABS_LIST_BASE, 'w-full', className)}
@@ -198,6 +207,18 @@ const TabsList = React.forwardRef<
       >
         {children}
       </TabsPrimitive.List>
+    )
+  }
+
+  return (
+    <TabsContext.Provider value={tabsSizeContext}>
+      <TabsActionOverlayContext.Provider value={overlayEl}>
+        <div className="relative">
+          {listNode}
+          {/* inline-action overlay:sibling of tablist(非其 DOM 子代)→ 修 axe aria-required-children */}
+          <div ref={setOverlayEl} className="pointer-events-none absolute inset-0 z-10" />
+        </div>
+      </TabsActionOverlayContext.Provider>
     </TabsContext.Provider>
   )
 })
@@ -449,7 +470,10 @@ const tabsTriggerVariants = cva(
 )
 
 interface TabsTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+  // asChild Omit(2026-07-18 決策2):Tab trigger 固定渲染 [startIcon?, <span>{children}</span>,
+  // suffix?] 多節點陣列 → Radix Slot 的 React.Children.only 恆 crash(每個 tab 都會)。
+  // children(label)保留合法;TabsRoot / TabsList 為真容器不收窄。
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'asChild'> {
   /** 左側 icon（LucideIcon） */
   startIcon?: LucideIcon
   /** 右側 badge（通常是計數指示器） */
@@ -481,23 +505,56 @@ const TabsTrigger = React.forwardRef<
   TabsTriggerProps
 >(({ className, startIcon: StartIcon, badge, endIcon: EndIcon, inlineAction, children, ...props }, ref) => {
   const { size } = React.useContext(TabsContext)
+  const overlayEl = React.useContext(TabsActionOverlayContext)
   // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)
   const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']
   const hasSuffix = badge != null || EndIcon !== undefined
-  // 2026-07-05 D4 修(deep-audit「Tabs:inlineAction slot 造成 button 巢 button」):
-  // Radix TabsTrigger render 原生 <button>,inlineAction(ItemInlineActionButton)也是原生
-  // <button> — 巢狀 interactive = HTML 不合法 + axe nested-interactive(serious)+ tab 的
-  // accessible name 混入 action 內容。改 sibling 佈局(同 SidebarMenuButton suffixNode
-  // canonical,sidebar.tsx):wrapper span(relative)內 trigger + 絕對定位 action;trigger 以
-  // paddingRight 預留 action 空間 — icon 寬 + 原 gap(有 badge/endIcon 時 4px = suffix 內
-  // gap-1;僅 action 時 8px = slot 間 gap-2),幾何與巢狀版一致。click 天然分流(action 不在
-  // trigger 子樹,不冒泡),原 stopPropagation 五連發不再需要。
+  // inlineAction 幾何:trigger 以 paddingRight 預留 action 空間 — icon 寬 + 原 gap(有 badge/endIcon
+  // 時 4px = suffix 內 gap-1;僅 action 時 8px = slot 間 gap-2)。2026-07-05 修 button-巢-button
+  // (sibling 佈局);2026-07-18 決策1 再進化:action 不再是 tablist DOM 內的 sibling(axe
+  // aria-required-children critical),改 portal 到 TabsList 的 overlay 層(tablist 外),以量測座標
+  // 定位在 trigger 右緣。trigger 仍在 tablist 內(Radix roving focus 要求)。
   const hasAction = inlineAction != null
   const actionPaddingRight = hasAction ? iconSize + (hasSuffix ? 4 : 8) : undefined
 
+  // 量測 trigger 位置(viewport-relative,涵蓋 none/scroll/menu 三模式),同步 overlay 內 action 座標。
+  const triggerElRef = React.useRef<HTMLButtonElement | null>(null)
+  const setTriggerRef = React.useCallback(
+    (el: HTMLButtonElement | null) => {
+      triggerElRef.current = el
+      if (typeof ref === 'function') ref(el)
+      else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = el
+    },
+    [ref],
+  )
+  const [actionPos, setActionPos] = React.useState<{ left: number; top: number; height: number } | null>(null)
+
+  React.useLayoutEffect(() => {
+    if (!hasAction || !overlayEl) return
+    const el = triggerElRef.current
+    if (!el) return
+    const compute = () => {
+      const t = triggerElRef.current?.getBoundingClientRect()
+      const o = overlayEl.getBoundingClientRect()
+      if (!t) return
+      setActionPos({ left: t.right - o.left, top: t.top - o.top, height: t.height })
+    }
+    compute()
+    const ro = new ResizeObserver(compute)
+    ro.observe(el)
+    ro.observe(overlayEl)
+    window.addEventListener('resize', compute)
+    window.addEventListener('scroll', compute, true) // capture:含 scroll-mode 捲動容器內部捲動
+    return () => {
+      ro.disconnect()
+      window.removeEventListener('resize', compute)
+      window.removeEventListener('scroll', compute, true)
+    }
+  }, [hasAction, overlayEl])
+
   const trigger = (
     <TabsPrimitive.Trigger
-      ref={ref}
+      ref={setTriggerRef}
       className={cn(tabsTriggerVariants({ size }), className)}
       style={hasAction ? { paddingRight: actionPaddingRight } : undefined}
       {...props}
@@ -516,14 +573,22 @@ const TabsTrigger = React.forwardRef<
   if (!hasAction) return trigger
 
   return (
-    // sibling 佈局 wrapper:span(relative)內 trigger + 絕對定位 action。
-    // Radix roving focus 用 collection context 收 trigger,不要求 trigger 是 List 直接子層。
-    <span className="relative inline-flex">
+    <>
       {trigger}
-      <span className="absolute top-1/2 -translate-y-1/2 right-0 inline-flex items-center">
-        {inlineAction}
-      </span>
-    </span>
+      {overlayEl &&
+        actionPos &&
+        createPortal(
+          // action portal 到 overlay(tablist 外);left=trigger.right + `-translate-x-full` → action
+          // 右緣對齊 trigger 右緣;top/height + items-center → 垂直置中(同原 right-0 + top-1/2 幾何)。
+          <span
+            className="pointer-events-auto absolute inline-flex -translate-x-full items-center"
+            style={{ left: actionPos.left, top: actionPos.top, height: actionPos.height }}
+          >
+            {inlineAction}
+          </span>,
+          overlayEl,
+        )}
+    </>
   )
 })
 TabsTrigger.displayName = 'TabsTrigger'

package/src/components/Tag/tag.anatomy.stories.tsx

@@ -31,7 +31,7 @@ type SizeKey = 'sm' | 'md' | 'lg'
 type ColorSpec = { bg: string; text: string; border: string }
 type SolidSpec = 'subtle' | 'solid'
 
-// neutral + 全 12 色相(順序對齊 SSOT CATEGORICAL_HUES,1:1 對 primitives.css / color token 列)
+// neutral + 全 12 色相(順序對齊 SSOT CATEGORICAL_HUES = categorical 指派序;與 primitives.css 檔內宣告序本就不同,見 categorical-color.ts 注)
 const VARIANTS: VariantKey[] = ['neutral', ...CATEGORICAL_HUES]
 const SIZES: SizeKey[] = ['sm', 'md', 'lg']
 
@@ -326,7 +326,7 @@ const InspectorInner = () => {
               onRemove={withDismiss ? () => {} : undefined}
               solid={solid}
             >
-              Label
+              設計
             </Tag>
           </div>
 

package/src/components/Tag/tag.principles.stories.tsx

@@ -237,7 +237,7 @@ export const IconRule: Story = {
     <div>
       <Rule
         title="icon — 類別圖示(tag label 的視覺強化)"
-        note="用 LucideIcon,Tag 統一 16px。icon 顏色繼承 Tag 文字色(有色時跟色)"
+        note="用 LucideIcon,Tag 一律固定 16px、不隨 Tag 尺寸縮放——讓所有 Tag 的 icon 前綴維持相同節奏,一整排並排掃視時對齊不跳動。icon 顏色繼承 Tag 文字色(有色 variant 就跟該色),而不是自成一色:避免 icon 變成 Tag 內第二個視覺焦點,搶走 label 的主體性。"
       >
         <div className="flex items-center gap-2 flex-wrap">
           <Tag color="blue" icon={TagIcon}>Feature</Tag>
@@ -247,13 +247,13 @@ export const IconRule: Story = {
 
       <Rule
         title="avatar — 人員 / 組織類 Tag 前綴"
-        note="多選 Combobox 的已選成員用 avatar + name 組合"
+        note="多選 Combobox 的已選成員用 avatar + name 組合。avatar 只提供視覺辨識(一眼看到「是個人」),真正承載身份的是名字;兩者並用才能避免相似頭像、或圖片載入失敗時的誤認——所以 avatar Tag 一定要保留可見姓名,不能只放頭像。人員 / 組織標籤同理。"
       >
         <div className="flex items-center gap-2 flex-wrap">
-          <Tag color="neutral" avatar={<img src="https://i.pravatar.cc/40?img=1" className="w-4 h-4 rounded-full" />}>
+          <Tag color="neutral" avatar={<img src="https://i.pravatar.cc/40?img=1" alt="" className="w-4 h-4 rounded-full" />}>
             Ada Chen
           </Tag>
-          <Tag color="neutral" avatar={<img src="https://i.pravatar.cc/40?img=2" className="w-4 h-4 rounded-full" />}>
+          <Tag color="neutral" avatar={<img src="https://i.pravatar.cc/40?img=2" alt="" className="w-4 h-4 rounded-full" />}>
             Alice
           </Tag>
         </div>

package/src/components/Tag/tag.spec.md

@@ -220,6 +220,8 @@ Inline Action 的其他規則（尺寸、hover 背景 pattern）不變。
 | `icon` | `LucideIcon` | 左側 icon，Tag 統一 16px。與 avatar 互斥 |
 | `avatar` | `ReactNode` | 左側 avatar。與 icon 互斥 |
 | `onRemove` | `() => void` | 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) |
+| `removeAriaLabel` | `string` | remove 按鈕 aria-label 的目標名(對齊 FileUpload `removeAriaLabel` 同場景 + `<動作>AriaLabel` 命名慣例)。**children 為非字串 ReactNode 時必傳**,否則 SR 只讀得出泛稱「移除」、辨識不出移除哪個 Tag;children 為字串時預設取 children |
+| ~~`dismissLabel`~~ | `string` | **@deprecated 2026-07-17 → `removeAriaLabel`**(dismiss 保留給 Alert/Notice/Toast「通知被忽略」;過渡一版仍可用) |
 | `solid` | `boolean` | 深底配對前景模式（step-6 背景；yellow/amber/orange/lime 用深字，其餘白字），預設 false |
 | `unbounded` | `boolean` | 預設 false = 寬度 cap 160px;true = 寬度交給 parent constrain（cell-as-input narrow cell 場景），詳「邊界案例」 |
 
@@ -271,7 +273,7 @@ Tag 是**純顯示 indicator**(Family 3 indicator variant,見「與 Button 的
 Tag 是**純視覺 indicator**(非互動 control,互動版本是 Chip),預設 ARIA 行為:
 
 - **靜態 Tag**(無 `onRemove`):render 為 `<div data-tag-root>`(無 role、`inline-flex`,SR 等價於無語意 generic container,視覺上為 inline-level 跟隨 inline flow)。若 Tag 表達狀態語意(「進行中」「已逾期」),consumer 應在父 region 用 `aria-label` 或視覺 prefix(icon)讓 SR 理解 context
-- **Removable Tag**(`onRemove` 存在):inline X close 走 `<ItemInlineActionButton icon={X} size="md" aria-label="移除 {tagLabel}" />`(item-anatomy SSOT 的原生 `<button>`,非 `Button` 元件)— 對齊 inline-action canonical(`patterns/element-anatomy/inline-action.spec.md`)
+- **Removable Tag**(`onRemove` 存在):inline X close 走 `<ItemInlineActionButton icon={X} size="md" aria-label="移除 {name}" />`(item-anatomy SSOT 的原生 `<button>`,非 `Button` 元件)— 對齊 inline-action canonical(`patterns/element-anatomy/inline-action.spec.md`)。**名稱來源**:`removeAriaLabel` prop 優先(舊名 `dismissLabel` deprecated 仍支援),否則取字串 children;**若 children 是非字串 ReactNode(如 avatar + 排版節點)且未傳 `removeAriaLabel`,aria-label 會退化成泛稱「移除」**——多個 Tag 並排時 SR 無法區分移除哪一個,故非字串 children 必傳 `removeAriaLabel`
 - **Keyboard**:靜態 Tag 不取得 focus(無互動);**例外:截斷時條件性 `tabIndex=0`**(2026-07-06 拍板)——全文 tooltip 需鍵盤可達,APG Tooltip pattern 原文「popup 在元素收到鍵盤焦點或 hover 時顯示」= trigger 可 focus 是 W3C 官方前提;Radix Tooltip focus-open 自動生效,未截斷不入 tab 序。dismissible 的 X 走原生 button 鍵盤(Tab → focus → Enter/Space → dismiss)
 - **Color-only 語意警告**:Tag 用色相區分狀態時必有文字 label 或 prefix icon(色盲 user 友好);對齊 WCAG 1.4.1「不僅靠顏色傳達」
 - **驗證**:Storybook a11y addon panel 0 critical violation;WCAG AA contrast ≥ 4.5:1(text)/ 3:1(icon)
@@ -289,4 +291,5 @@ Tag 是**純視覺 indicator**(非互動 control,互動版本是 Chip),預設 AR
 
 - `avatar.spec.md`
 - `badge.spec.md`
+- `inline-action.spec.md`
 - `overflow-indicator.spec.md`

package/src/components/Tag/tag.tsx

@@ -68,7 +68,9 @@ export interface TagProps
   avatar?: React.ReactNode
   /** 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) */
   onRemove?: () => void
-  /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 */
+  /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。對齊 FileUpload `removeAriaLabel`(同「移除集合項目」場景 + DS `<動作>AriaLabel` 命名慣例)。 */
+  removeAriaLabel?: string
+  /** @deprecated 2026-07-17 改名為 `removeAriaLabel`(對齊 FileUpload + onRemove callback 語意;dismiss 保留給 Alert/Notice/Toast「通知被忽略」)。舊名過渡一版後移除。 */
   dismissLabel?: string
   /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */
   solid?: boolean
@@ -123,7 +125,7 @@ function TagDismiss({ onRemove, label, solid, color }: { onRemove: () => void; l
 }
 
 function TagInner(
-  { className, color, size, icon: Icon, avatar, onRemove, dismissLabel, solid, unbounded = false, children, style, ...props }: TagProps,
+  { className, color, size, icon: Icon, avatar, onRemove, removeAriaLabel, dismissLabel, solid, unbounded = false, children, style, ...props }: TagProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined
@@ -202,7 +204,7 @@ function TagInner(
       {Icon && <Icon size={16} aria-hidden />}
       {avatar && <span className="shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full">{avatar}</span>}
       <span data-tag-text="" className="px-1 truncate min-w-0">{children}</span>
-      {onRemove && <TagDismiss onRemove={onRemove} label={dismissLabel || label} solid={solid} color={color ?? 'neutral'} />}
+      {onRemove && <TagDismiss onRemove={onRemove} label={removeAriaLabel ?? dismissLabel ?? label} solid={solid} color={color ?? 'neutral'} />}
     </div>
   )
 

package/src/components/Textarea/textarea.anatomy.stories.tsx

@@ -34,7 +34,7 @@ export const Overview: Story = {
             <thead><tr><Th>Prop</Th><Th>Type</Th><Th>Default</Th><Th>說明</Th></tr></thead>
             <tbody>
               {[
-                ['mode', "'edit' | 'display' | 'readonly' | 'disabled'", "'edit'", 'Field mode(display 渲染純文字 div;readonly 用底色 + padding 標示閱讀區)'],
+                ['mode', "'edit' | 'view' | 'readonly' | 'disabled'", "'edit'", 'Field mode(view 渲染純文字 div;readonly 用底色 + padding 標示閱讀區)'],
                 ['size', "'sm' | 'md' | 'lg'", "'md'", 'sm/md text-body,lg text-body-lg'],
                 ['rows', 'number', '3', '預設可見行數'],
                 ['placeholder', 'string', '—', '空值提示'],
@@ -82,7 +82,7 @@ export const Inspector: Story = {
     defaultValue: '',
   },
   argTypes: {
-    mode: { control: 'radio', options: ['edit', 'display', 'readonly', 'disabled'] },
+    mode: { control: 'radio', options: ['edit', 'view', 'readonly', 'disabled'] },
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },
     rows: { control: { type: 'number', min: 1, max: 20 } },
     error: { control: 'boolean', description: 'error 視覺(border-error + aria-invalid)' },
@@ -126,10 +126,10 @@ export const ModeMatrix: Story = {
         />
       </div>
       <div>
-        <H3>display — 純展示(渲 div 取代 textarea,whitespace-pre-wrap 保留多行)</H3>
+        <H3>view — 純展示(渲 div 取代 textarea,whitespace-pre-wrap 保留多行)</H3>
         <Desc>對齊 Carbon read-only / Cloudscape display mode。常見於檢視已提交的留言 / 評論。</Desc>
         <Textarea
-          mode="display"
+          mode="view"
           rows={3}
           value="我覺得這個專案非常有潛力,建議加強 onboarding 的引導流程..."
         />
@@ -201,11 +201,11 @@ export const ColorMatrix: Story = {
                 <Td><TokenCell token="--fg-muted" display="fg-muted" /></Td>
               </tr>
               <tr>
-                <Td mono>display</Td>
+                <Td mono>view</Td>
                 <Td>透明（zero-chrome，host context 提供邊界）</Td>
                 <Td>透明（無邊框）</Td>
                 <Td><TokenCell token="--foreground" display="foreground" /></Td>
-                <Td>—（display 無 placeholder；空值顯半形 -(hyphen)foreground）</Td>
+                <Td>—（view 無 placeholder；空值顯半形 -(hyphen)foreground）</Td>
               </tr>
               <tr>
                 <Td mono>readonly</Td>

package/src/components/Textarea/textarea.spec.md

@@ -27,7 +27,7 @@ benchmark:
 
 Textarea 是**多行文字**的輸入與顯示元件——Input 的多行版本。格式化邏輯為 identity（value → value）。
 
-**Layout Family**：Family 4（Field control）— multi-line variant。**繼承** Family 4 的 token（字體 / padding / border / state 色彩），但**結構簡化為單一 native `<textarea>`**（edit 態裸 `<textarea>`、display 態裸 `<div>`）——無 fieldWrapper composite、無 startIcon / content / endAction 多 slot anatomy（見下方「與 Input 的差異」表與「禁止事項」）。高度可隨 rows / resize-y 擴展、不受 `--field-height-*` 約束。
+**Layout Family**：Family 4（Field control）— multi-line variant。**繼承** Family 4 的 token（字體 / padding / border / state 色彩），但**結構簡化為單一 native `<textarea>`**（edit 態裸 `<textarea>`、view 態裸 `<div>`）——無 fieldWrapper composite、無 startIcon / content / endAction 多 slot anatomy（見下方「與 Input 的差異」表與「禁止事項」）。高度可隨 rows / resize-y 擴展、不受 `--field-height-*` 約束。
 
 **實作基礎**：native `<textarea>` + 橋接 DS token，無 external primitive base。shadcn 同類做法。
 
@@ -71,7 +71,7 @@ Textarea 是**多行文字**的輸入與顯示元件——Input 的多行版本
 
 - **`rows` prop**：預設 `3`，控制初始可見行數
 - **`resize-y`**：使用者可手動拖拉下邊緣垂直 resize
-- **`variant="naked"` 例外**：cell-as-input substrate（DataTable cell）四 mode 一律 `!resize-none` 覆蓋 `resize-y`，並以 `!h-full` 撐滿 cell——cell 內手動 resize 會破壞表格佈局（`textarea.tsx` naked compoundVariants，intentional divergence）
+- **`variant="naked"` 例外**：cell-as-input substrate（DataTable cell）naked 僅 edit/view 兩 mode（readonly/disabled×naked 死格 2026-07-16 移除），一律 `!resize-none` 覆蓋 `resize-y`，並以 `!h-full` 撐滿 cell——cell 內手動 resize 會破壞表格佈局（`textarea.tsx` naked compoundVariants，intentional divergence）
 - **`min-h-*` className**：消費者可透過 Tailwind utility 覆寫最小高度
 - **禁止 `resize: horizontal` 或 `both`**：水平 resize 破壞 form 佈局
 
@@ -104,12 +104,12 @@ native `<textarea>` 自帶 `value` / `defaultValue` / `onChange` triplet — Tex
 
 ### Readonly 特例
 
-不同於 Input 的 readonly（同高度、緊湊底色），`variant="default"` 的 Textarea readonly **保留 padding，並填上 `bg-readonly` 底色標示閱讀區**——多行內容需要明確的閱讀區域邊界訊號,沒有這塊填色區會無法與周圍純文字內容區分。`variant="naked"`(cell-as-input substrate)readonly 透明且 `!px-0 !py-0`——邊界訊號由 host context(table cell)提供(`textarea.tsx` compoundVariants,intentional divergence;`bare` variant 2026-07-09 退役)。
+不同於 Input 的 readonly（同高度、緊湊底色），`variant="default"` 的 Textarea readonly **保留 padding，並填上 `bg-readonly` 底色標示閱讀區**——多行內容需要明確的閱讀區域邊界訊號,沒有這塊填色區會無法與周圍純文字內容區分。`variant="naked"`(cell-as-input substrate)view 態透明且 `!px-0 !py-0`——邊界訊號由 host context(table cell)提供(`textarea.tsx` compoundVariants,intentional divergence;readonly/disabled×naked 死格 2026-07-16 移除;`bare` variant 2026-07-09 退役)。
 
 ### 邊界案例
 
-- **空值**:edit 態顯示 placeholder;display / readonly 態 value 為空(`null` / `''`)時渲染半形 `-`(`EMPTY_DISPLAY`)+ `text-foreground`(disabled → fg-disabled)
-- **極長文字**:edit 態高度固定於 rows / resize 結果,內容超出時 native 內部捲動;display 態 `<div>` 隨內容增高(`whitespace-pre-wrap break-words`),無截斷
+- **空值**:edit 態顯示 placeholder;view / readonly 態 value 為空(`null` / `''`)時渲染半形 `-`(`EMPTY_DISPLAY`)+ `text-foreground`(disabled → fg-disabled)
+- **極長文字**:edit 態高度固定於 rows / resize 結果,內容超出時 native 內部捲動;view 態 `<div>` 隨內容增高(`whitespace-pre-wrap break-words`),無截斷
 - **resize 上限**:`resize-y` 預設無上限;需限制時 consumer 傳 `max-h-*` className(native resize 受 max-height 約束)
 
 ---

package/src/components/Textarea/textarea.tsx

@@ -11,12 +11,12 @@ import { useControllable } from '@/design-system/hooks/use-controllable'
  * Textarea — 多行文字輸入
  *
  * ── 定位 ────────────────────────────────────────────────────────────────
- * 多行版本的 Input，edit / display / readonly / disabled 四態與 Input 邏輯一致(Phase B1 2026-05-05)。
+ * 多行版本的 Input，edit / view / readonly / disabled 四態與 Input 邏輯一致(Phase B1 2026-05-05)。
  * 不同於 Input：
  *   - 沒有固定 field-height（高度由 rows 或 min-h 決定）
  *   - 沒有 startIcon / endAction（textarea 慣例不放 icon）
  *   - readonly 呈現保留邊框與 padding，只改底色，讓多行文字有合理閱讀區
- *   - display 渲染 <div> + white-space:pre-wrap 保留多行文本
+ *   - view 渲染 <div> + white-space:pre-wrap 保留多行文本
  *
  * ── Padding 規則 ───────────────────────────────────────────────────────
  * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center，
@@ -48,7 +48,7 @@ const textareaVariants = cva(
     variants: {
       mode: {
         edit: '',
-        display: '',
+        view: '',
         readonly: '',
         disabled: '',
       },
@@ -80,11 +80,13 @@ const textareaVariants = 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`):
+        // Textarea view×default = **edit 幾何減 chrome** — 保留 base `px-[var(--field-px)] py-2`(= edit 內距),
+        // 只拔 border/bg。多行 read↔edit 零跳(view 與 edit 同一顆 Textarea、py-2 天生一致)。跟 Field wrapper
+        // view×default 同 SSOT(field-wrapper.tsx)。
+        mode: 'view',
         variant: 'default',
-        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-[var(--field-px)] py-2`
-        // (跟 Input 同 SSOT,per field-controls.spec.md (d))
-        className: 'bg-transparent border border-transparent !px-0 !py-0',
+        className: 'bg-transparent border border-transparent',
       },
       {
         mode: 'readonly',
@@ -118,7 +120,7 @@ const textareaVariants = cva(
           '!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]',
           'border border-border',
           'hover:border-border-hover',
-          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 display
+          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 view
           // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height
           // shift。顯式 leading 對齊 div 行為。
           '!leading-[1.5]',
@@ -126,16 +128,14 @@ const textareaVariants = cva(
       },
       { mode: 'edit', variant: 'naked', error: false, className: 'focus-visible:!border-primary focus-visible:hover:!border-primary' },
       // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):
-      // Textarea naked display/readonly/disabled 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。
+      // Textarea view×naked 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。
       // Why divergence:textarea 是 native form element 帶 intrinsic rows-based height,且 cell 內
       // multi-line text 需要撐滿 cell 而非依 line-height intrinsic。`!h-full` 讓 textarea 填滿 cell
       // 高度,文字 anchored to cell.top + cell padding(同視覺結果 Field wrapper autoRow !h-auto)。
       // 此 divergence intentional + documented;非 SSOT violation。
-      { mode: 'display', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },
-      { mode: 'readonly', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },
-      // 2026-05-13 codex V2 fix:移除 `opacity-disabled` blanket(對齊 field-wrapper.tsx naked R3 fix +
-      //   color.spec.md:729 逃生艙 rule)。Textarea 已用具體 `text-fg-disabled` token,不需要 wrapper opacity。
-      { mode: 'disabled', variant: 'naked', className: 'bg-transparent !rounded-none cursor-not-allowed text-fg-disabled !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },
+      { mode: 'view', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },
+      // 2026-07-16 round16:`readonly×naked` / `disabled×naked` 死格移除(鏡射 field-wrapper.tsx;
+      //   DataTable cell 廢 disabled 態 + readonly 從不入 naked,全庫 0 消費)。
     ],
     defaultVariants: {
       mode: 'edit',
@@ -149,7 +149,7 @@ const textareaVariants = cva(
 export interface TextareaProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
     Omit<VariantProps<typeof textareaVariants>, 'mode' | 'variant'> {
-  /** Field display mode */
+  /** Field view mode */
   mode?: FieldMode
   /**
    * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。透傳自 FieldContext.variant,per-prop override。
@@ -193,22 +193,22 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })
     const emptyDisplay = useFieldEmptyDisplay()
     const isEditable = resolvedMode === 'edit'
-    const isDisplay = resolvedMode === 'display'
+    const isView = resolvedMode === 'view'
     const inputId = idProp ?? fieldCtx?.id
     const ariaDescribedBy = ariaDescribedByProp ?? fieldCtx?.descriptionId
     const ariaErrorMessage = ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)
 
-    // ── display mode(+ readonly 空值)純展示,渲染 <div> 取代 <textarea>(white-space:pre-wrap 保留多行) ──
+    // ── view mode(+ readonly 空值)純展示,渲染 <div> 取代 <textarea>(white-space:pre-wrap 保留多行) ──
     // 對齊 Carbon read-only / Cloudscape display-mode
-    // 2026-07-08 user 拍板:readonly 空值也走 display-div 顯 '-'(readonly **有值** 仍走下方
+    // 2026-07-08 user 拍板:readonly 空值也走 view-div 顯 '-'(readonly **有值** 仍走下方
     // native <textarea readOnly> 保留選取/複製語意 — field-controls.spec.md「null / undefined 值」)。
-    // 2026-07-13 fix:空值判斷需認得 uncontrolled defaultValue — readonly / display 也要顯示內容,
+    // 2026-07-13 fix:空值判斷需認得 uncontrolled defaultValue — readonly / view 也要顯示內容,
     //   不可誤判為空值渲 '-'(原為靜態 value ?? defaultValue)。
     // 2026-07-14 R2(dual-model consensus,同 Input input.tsx):resolved value 改走 useControllable
     // 內部 SSOT(Radix idiom)。原靜態版有 typing-stale gap:uncontrolled 打字後外部切
-    // display / readonly 仍顯示 stale defaultValue。uncontrolled 時 native textarea 由
+    // view / readonly 仍顯示 stale defaultValue。uncontrolled 時 native textarea 由
     // value={resolved} 內部驅動(defaultValue 只作初始值,不落 DOM attribute),同時修
-    // remount-stale(切 display 再回 edit 從 defaultValue attribute 重掛)+ form.reset() stale
+    // remount-stale(切 view 再回 edit 從 defaultValue attribute 重掛)+ form.reset() stale
     // (HTML 標準 reset 不發 input event,下方 reset bridge 修)。controlled(傳 value)時
     // useControllable 純 passthrough,行為與原本完全一致。consumer onChange 不接進 hook
     // (保留 native event signature),於 <textarea> onChange 另行轉發。
@@ -218,10 +218,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       defaultValue: defaultValue ?? '',
     })
     const displayValue = resolved != null && resolved !== '' ? String(resolved) : null
-    const showDisplaySpan = isDisplay || (resolvedMode === 'readonly' && displayValue == null)
+    const showDisplaySpan = isView || (resolvedMode === 'readonly' && displayValue == null)
 
     // form.reset() bridge(uncontrolled only):reset 恢復 defaultValue 但不發 input event →
-    // 手動把 resolved 歸位 defaultValue。keyed on showDisplaySpan:display 分支不掛 native
+    // 手動把 resolved 歸位 defaultValue。keyed on showDisplaySpan:view 分支不掛 native
     // textarea,回 edit 重掛時 effect 重跑補掛 listener。
     const innerRef = React.useRef<HTMLTextAreaElement | null>(null)
     React.useEffect(() => {
@@ -240,7 +240,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     }, [ref])
 
     if (showDisplaySpan) {
-      const spanMode = isDisplay ? 'display' : 'readonly'
+      const spanMode = isView ? 'view' : 'readonly'
       return (
         <div
           id={inputId}

package/src/components/TimePicker/time-picker.anatomy.stories.tsx

@@ -28,7 +28,7 @@ type Story = StoryObj<typeof TimePicker>
 
 export const Overview: Story = {
   name: '元件總覽',
-  render: () => <TimePicker value="09:00" onChange={() => {}} />,
+  render: () => <TimePicker value="09:00" onChange={() => {}} aria-label="時間選擇器總覽" />,
 }
 
 /**
@@ -105,9 +105,9 @@ export const ColorMatrix: Story = {
             </table>
           </div>
           <div className="flex gap-3 mt-3">
-            <TimePicker value="09:00" onChange={() => {}} />
-            <TimePicker value="09:00" onChange={() => {}} error />
-            <TimePicker value="09:00" onChange={() => {}} disabled />
+            <TimePicker value="09:00" onChange={() => {}} aria-label="時間欄位配色(預設)" />
+            <TimePicker value="09:00" onChange={() => {}} error aria-label="時間欄位配色(錯誤狀態)" />
+            <TimePicker value="09:00" onChange={() => {}} disabled aria-label="時間欄位配色(停用)" />
           </div>
         </div>
 
@@ -169,15 +169,15 @@ export const SizeMatrix: Story = {
     <div className="flex flex-col gap-3">
       <div className="flex items-center gap-3">
         <span className="w-12 text-caption text-fg-muted">sm</span>
-        <TimePicker size="sm" value="09:00" onChange={() => {}} />
+        <TimePicker size="sm" value="09:00" onChange={() => {}} aria-label="小尺寸時間選擇器" />
       </div>
       <div className="flex items-center gap-3">
         <span className="w-12 text-caption text-fg-muted">md ★default</span>
-        <TimePicker size="md" value="09:00" onChange={() => {}} />
+        <TimePicker size="md" value="09:00" onChange={() => {}} aria-label="中尺寸時間選擇器" />
       </div>
       <div className="flex items-center gap-3">
         <span className="w-12 text-caption text-fg-muted">lg</span>
-        <TimePicker size="lg" value="09:00" onChange={() => {}} />
+        <TimePicker size="lg" value="09:00" onChange={() => {}} aria-label="大尺寸時間選擇器" />
       </div>
     </div>
   ),
@@ -205,15 +205,15 @@ export const PrecisionMatrix: Story = {
     <div className="flex flex-col gap-3 w-80">
       <div>
         <div className="text-caption text-fg-muted mb-1">兩欄(showSeconds=false,預設)</div>
-        <TimePicker value="09:00" onChange={() => {}} />
+        <TimePicker value="09:00" onChange={() => {}} aria-label="時分兩欄時間選擇器" />
       </div>
       <div>
         <div className="text-caption text-fg-muted mb-1">三欄(showSeconds=true)</div>
-        <TimePicker value="09:00:00" onChange={() => {}} showSeconds />
+        <TimePicker value="09:00:00" onChange={() => {}} showSeconds aria-label="時分秒三欄時間選擇器" />
       </div>
       <div>
         <div className="text-caption text-fg-muted mb-1">minuteStep=15(會議常用)</div>
-        <TimePicker value="09:00" onChange={() => {}} minuteStep={15} />
+        <TimePicker value="09:00" onChange={() => {}} minuteStep={15} aria-label="15 分鐘間隔時間選擇器" />
       </div>
       <div>
         <div className="text-caption text-fg-muted mb-1">disabledTime:0-5 點不可選</div>
@@ -221,6 +221,7 @@ export const PrecisionMatrix: Story = {
           value="09:00"
           onChange={() => {}}
           disabledTime={() => ({ disabledHours: [0, 1, 2, 3, 4, 5] })}
+          aria-label="限制可選時段的時間選擇器"
         />
       </div>
     </div>
@@ -246,7 +247,7 @@ export const Inspector: Story = {
   },
   render: (args) => {
     const [v, setV] = React.useState(args.value ?? '')
-    return <TimePicker {...args} value={v} onChange={setV} />
+    return <TimePicker {...args} value={v} onChange={setV} aria-label="時間選擇器檢閱器" />
   },
 }