@qijenchen/design-system 0.1.0-beta.95 → 0.1.0-beta.99

package/src/patterns/header-canonical/header-canonical.stories.tsx

@@ -120,6 +120,83 @@ export const WithTabs = () => (
 )
 WithTabs.storyName = '含分頁列'
 
+/* 3-4. withTabs × overflow(scroll / menu)— header 分頁列在窄容器的溢出模式。
+   對標 Jira 專案設定頁:細分頁多到單行放不下(概覽/待辦清單/衝刺/看板/報表/版本/元件/權限/通知)。
+   Panel 限寬 420px + 9 個分頁強制觸發溢出;W2 契約(triggers 內縮 px-loose 對齊 header
+   content row)三種 overflow 模式同享,border 隨溢出內容延展(min-w-full,header-canonical.spec.md Rule W2)。
+   兩則共用同組分頁資料(同 tabs.stories.tsx OverflowScroll/OverflowMenu 精神),各教一種溢出機制。 */
+const projectSettingsTabs = [
+  { value: 'overview', label: '概覽', content: '負責人:張惟安 · 分類:客戶關係 · Scrum 流程已啟用' },
+  { value: 'backlog', label: '待辦清單', content: 'Backlog 42 項:預設排序 = 優先級,顯示 story point 欄位' },
+  { value: 'sprints', label: '衝刺', content: 'Sprint 18 進行中(04/14–04/28),完成 21 / 34 點' },
+  { value: 'board', label: '看板', content: '欄位:待處理 / 進行中 / 審查中 / 完成;WIP 上限 5' },
+  { value: 'reports', label: '報表', content: '燃盡圖 / 速度圖 / 累積流量圖,每週一自動寄送摘要' },
+  { value: 'releases', label: '版本', content: 'v2.4.0 規劃中(05/30 發布)· v2.3.1 已發布' },
+  { value: 'components', label: '元件', content: '前端 / API / 資料庫 / 通知服務,各自指派預設負責人' },
+  { value: 'permissions', label: '權限', content: '管理員 3 人 · 成員 24 人;訪客僅能檢視看板' },
+  { value: 'notifications', label: '通知', content: '議題指派與提及即時通知;摘要每日 09:00 寄送' },
+] as const
+
+/** 3. withTabs + overflow="scroll" — 窄 header 的分頁列單行橫向捲動(fade mask + 左右 arrow)。 */
+export const WithTabsOverflowScroll = () => (
+  <div className="w-[420px]">
+    <Panel>
+      <Tabs defaultValue="overview">
+        <ChromeHeader
+          tabsSlot={
+            <TabsList overflow="scroll">
+              {projectSettingsTabs.map((t) => (
+                <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
+              ))}
+            </TabsList>
+          }
+        >
+          <h2 className="flex-1 truncate text-body-lg font-medium text-foreground">
+            CRM 平台 — 專案設定
+          </h2>
+          <Button iconOnly dismiss size="sm" startIcon={X} aria-label="關閉" />
+        </ChromeHeader>
+        {projectSettingsTabs.map((t) => (
+          <TabsContent key={t.value} value={t.value}>
+            <div className="p-6 text-body text-fg-secondary">{t.content}</div>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </Panel>
+  </div>
+)
+WithTabsOverflowScroll.storyName = '含分頁列 — 溢出水平捲動'
+
+/** 4. withTabs + overflow="menu" — 窄 header 的分頁列 + 右側 ⌄ 導覽選單(show-all navigator)。 */
+export const WithTabsOverflowMenu = () => (
+  <div className="w-[420px]">
+    <Panel>
+      <Tabs defaultValue="overview">
+        <ChromeHeader
+          tabsSlot={
+            <TabsList overflow="menu">
+              {projectSettingsTabs.map((t) => (
+                <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
+              ))}
+            </TabsList>
+          }
+        >
+          <h2 className="flex-1 truncate text-body-lg font-medium text-foreground">
+            CRM 平台 — 專案設定
+          </h2>
+          <Button iconOnly dismiss size="sm" startIcon={X} aria-label="關閉" />
+        </ChromeHeader>
+        {projectSettingsTabs.map((t) => (
+          <TabsContent key={t.value} value={t.value}>
+            <div className="p-6 text-body text-fg-secondary">{t.content}</div>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </Panel>
+  </div>
+)
+WithTabsOverflowMenu.storyName = '含分頁列 — 溢出 ⌄ 導覽選單'
+
 /** Overview — header anatomy 兩型疊起來一次看完,每型上方標清「何時用 + 對標既有元件」。
  *  注:ChromeHeader 另有 `leadingRail` slot,但它專為「跟 sidebar 收合 icon 對齊」而生(寬 = sidebar 收合寬),
  *  只在有 sidebar 時有意義 → canonical demo 放 AppShell primary-header(leadingRail = <SidebarTrigger />),

package/src/patterns/horizontal-overflow/horizontal-overflow.stories.tsx

@@ -65,6 +65,8 @@ function FilmstripScrollDemo() {
     <div className="relative w-[480px]">
       <div
         ref={scrollRef}
+        tabIndex={0}
+        aria-label="簡報頁面縮圖"
         className="overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         style={{ maskImage, WebkitMaskImage: maskImage }}
       >

package/src/patterns/overlay-surface/overlay-surface.spec.md

@@ -32,6 +32,7 @@ Dialog 和 Popover 的**結構化 sub-components 共用 primitive**——提供
 ### SurfaceBody
 - `px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]`
 - **永遠套 `flex-1 min-h-0 overflow-y-auto`**(viewport-aware scroll:視窗太小時 body 內捲動;非 flex-col parent 內 flex-1/min-h-0 為 no-op,backward compat)。2026-05-31 infra-audit 修:原寫「無額外 flex 屬性」與 code(overlay-surface.tsx:183 恆套)矛盾。consumer 依浮層類型:
+- **Focus ownership**:SurfaceBody 不預設 `tabIndex`——短內容時它不是 scroll region,一律塞進 sequential focus order 會製造多餘 tab stop。當 bare SurfaceBody 在定高/viewport 壓縮下**實際 overflow**時,consumer 必須傳 `tabIndex={0}` + `role="region"` + 語意明確的 `aria-label`;SurfaceBody runtime 內建 inset DS focus ring。`BodyScroll` story 的 play assertion 機械驗證該具名節點確實 overflow 且可聚焦。Dialog / Sheet 正式 consumer 仍優先走下節 ScrollArea canonical。
   - **Popover**:多數 bare consume,padding 即是總 padding
   - **Dialog / Sheet**:consumer **不直接 wrap SurfaceBody**——走 ScrollArea canonical(下節),padding 搬到 ScrollArea viewport 內層 div
 - **邊界**:空 children → 不渲染 placeholder、無最小高度(定高浮層內仍被 `flex-1` 撐滿剩餘空間);viewport 極小 → 見「Viewport-aware scroll chain invariant」節(body 內捲動);loading / error / empty 屬 consumer 內容層職責,非本 structural pattern(見 `dialog.spec.md`「狀態處理的職責邊界」)

package/src/patterns/overlay-surface/overlay-surface.stories.tsx

@@ -5,6 +5,7 @@
 // DialogHeader / SheetHeader / PopoverHeader 等 wrapper,不直接 import;
 // 本頁給 DS contributor 看「overlay 三段式結構 + padding / 分隔線契約」長什麼樣。
 import type { Meta, StoryObj } from '@storybook/react'
+import { expect, within } from '@storybook/test'
 import type { ReactNode } from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
@@ -91,7 +92,11 @@ export const BodyScroll: Story = {
           <h2 className="flex-1 truncate text-body-lg font-medium text-foreground">服務條款更新</h2>
           <Button iconOnly dismiss size="sm" startIcon={X} aria-label="關閉" />
         </SurfaceHeader>
-        <SurfaceBody>
+        <SurfaceBody
+          tabIndex={0}
+          role="region"
+          aria-label="服務條款更新內容"
+        >
           <div className="flex flex-col gap-3 text-body text-foreground">
             <p>1. 資料保存期限由 30 天調整為 90 天,到期後自動匿名化。</p>
             <p>2. 新增歐盟區域資料中心選項,既有工作區可在設定頁遷移。</p>
@@ -113,4 +118,15 @@ export const BodyScroll: Story = {
       </p>
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const scrollRegion = canvas.getByRole('region', {
+      name: '服務條款更新內容',
+    })
+
+    await expect(scrollRegion.scrollHeight).toBeGreaterThan(scrollRegion.clientHeight)
+    await expect(scrollRegion).toHaveAttribute('tabindex', '0')
+    scrollRegion.focus()
+    await expect(scrollRegion).toHaveFocus()
+  },
 }

package/src/patterns/overlay-surface/overlay-surface.tsx

@@ -90,9 +90,10 @@ export interface SurfaceHeaderProps
    * Tabs row slot(2026-05-18 加 per header-canonical.spec.md W2/W4 真實能用 + user-mandated fix)。
    * 提供時 SurfaceHeader 自動 column 結構:
    *   row 1 = children(title + actions/dismiss,px-loose py-tight)
-   *   row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper(v3:wrapper 自身
-   *           無 px / 無 border;TabsList 自己 w-full + px-loose,border-b 延展全寬 —
-   *           W1 視覺一條線。詳 chrome-header.tsx v3 fix 註解)
+   *   row 2 = tabsSlot 包在 `HEADER_TABS_SLOT_WRAPPER_CLASS` wrapper(v4:wrapper 自身
+   *           無 px / 無 border;`[&_[data-slot=tabs-list]]` 注入 px-loose,寬度 TabsList
+   *           各 overflow 模式自帶,border-b 延展全寬 — W1 視覺一條線。
+   *           詳 chrome-header.tsx HEADER_TABS_SLOT_WRAPPER_CLASS 註解)
    *
    * Consumer 傳:`tabsSlot={<TabsList>...</TabsList>}`,TabsContent 仍放 DialogBody 內。
    * `<Tabs>` root 必須 wrap 整 DialogContent(Radix TabsList ↔ TabsContent 同 root 連動)。
@@ -133,8 +134,10 @@ export const SurfaceHeader = React.forwardRef<
             - v1: wrapper border + TabsList border = 雙線(W1 違反)
             - v2: wrapper px-loose + TabsList w-full inside = border 只跨 dialog - 2×px-loose
                  (不到 dialog 邊 user 抓「分隔線寬度應該要填滿整個 dialog」)
-            - v3(本):wrapper 不 inset,TabsList 自己 px-loose 內 padding inset triggers
+            - v3:wrapper 不 inset,TabsList 自己 px-loose 內 padding inset triggers
                   → TabsList border-b 延展全 dialog 寬,triggers 對齊 header content
+            - v4(2026-07-30):選取機制改 `data-slot="tabs-list"` attribute contract
+                  (beta.86 overlay 包裹層破 direct-child;詳 chrome-header.tsx 註解)
             對齊既有 `tabs.spec.md`「Underline 與 TabsList border 的視覺關係」段「selected 底線從
             TabsList 的 gray border 位置長出來」(token = border-divider,tabs.tsx TABS_LIST_BASE)
             + GitHub Primer UnderlineNav / Ant Design line type / Mantine default 共識
@@ -181,6 +184,7 @@ export const SurfaceBody = React.forwardRef<
     ref={ref}
     className={cn(
       'flex-1 min-h-0 overflow-y-auto',
+      'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',
       'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',
       className,
     )}

package/src/patterns/resize-handle/resize-handle.spec.md

@@ -15,14 +15,14 @@ benchmark:
 
 ## 定位
 
-**Drag-to-resize 視覺 + a11y 共同 primitive**——統一 column resize / sidebar drag-resize / row resize / panel resize 的命中區、cursor、視覺 line、a11y attributes。
+**Drag-to-resize 視覺共同 primitive**——統一 column resize / sidebar drag-resize / row resize / panel resize 的命中區、cursor 與視覺 line。
 
 **消費者(計畫)**:
 - DataTable column resize(目前自畫 — Phase 2 migrate)
 - Sidebar drag-resize(目前無 — Phase 3 enable)
 - AppShell Aside drag-resize(目前無 — Phase 4 enable)
 
-**不耦合 drag math** — consumer 自管 width state(TanStack `header.getResizeHandler()` / 手刻 pointer math / `useResizeObserver` 各種路徑)。本 primitive only ship 視覺 + cursor + a11y。
+**不耦合 drag math** — consumer 自管 width state(TanStack `header.getResizeHandler()` / 手刻 pointer math / `useResizeObserver` 各種路徑)。本 primitive only ship 視覺 + cursor，且固定 aria-hidden。
 
 **Layout Family**:N/A(self-contained primitive,非 row-layout family member)。
 
@@ -38,7 +38,6 @@ benchmark:
   position="end"           // | "start"
   isResizing?: boolean     // consumer 自管 drag state
   disabled?: boolean       // consumer 自決 resizable opt-in
-  aria-label="拖曳調整欄寬" // 必傳
   showLine?: boolean       // default true,false = consumer paint own line
   lineInsetStart?: string  // line start inset(eg. var(--table-cell-py))
   lineInsetEnd?: string    // line end inset
@@ -46,11 +45,11 @@ benchmark:
 />
 ```
 
-上方為自有(own)props。drag handler(`onPointerDownCapture` / `onPointerDown` / `onTouchStart` 等)**非本元件 bespoke typed prop**,而是經 `ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'>`(resize-handle.tsx:38;`role` 被 Omit 型別鎖死不可覆寫 — a11y `role="separator"` SSOT 防漂移)的 `...restProps` spread 透傳到底層 `<span>`(與 `onClick` / `onPointerMove` 等 generic DOM 事件同 status)。consumer 接 drag math 即透過這些透傳事件,本 primitive 不耦合。
+上方為自有(own)props。drag handler(`onPointerDownCapture` / `onPointerDown` / `onTouchStart` 等)**非本元件 bespoke typed prop**,而是經 `ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label' | 'aria-orientation' | 'aria-hidden'>` 的 `...restProps` spread 透傳到底層 `<span>`(與 `onClick` / `onPointerMove` 等 generic DOM 事件同 status)。上述四個 ARIA props 由 primitive 固定為誠實的純 pointer decoration 契約，consumer 不可覆寫。consumer 接 drag math 即透過這些透傳事件,本 primitive 不耦合。
 
 **direction**:
-- `horizontal`(拖左右)→ `cursor: col-resize` + `aria-orientation="vertical"`(separator 軸垂直於 drag)
-- `vertical`(拖上下)→ `cursor: row-resize` + `aria-orientation="horizontal"`
+- `horizontal`(拖左右)→ `cursor: col-resize`
+- `vertical`(拖上下)→ `cursor: row-resize`
 
 **position**:`end` 命中區在右(horizontal)/ 底(vertical)— column right edge / sidebar right edge 典型;`start` 左 / 上 — 罕用。
 
@@ -69,9 +68,8 @@ benchmark:
 
 ## a11y
 
-- **`role="separator"`** + **`aria-orientation`** + **`aria-label`**:目前 Phase 1 暴露 `role="separator"` marker + 描述性 label 供輔助技術(AT)發現此元件。完整 WAI-ARIA *window-splitter widget* 語意(focusable / `aria-valuenow`/`min`/`max` / `aria-controls` / Arrow key 操作)deferred 至鍵盤 Phase(見下行)。本元件目前不可 focus、無 value 屬性、無鍵盤 handler,屬靜態 separator marker 形狀,尚非可操作的 separator widget。
-- 鍵盤導覽 future Phase: Arrow keys 微調 + Enter 顯式 commit(consumer Phase 2+ 補)
-- `disabled` 時不掛 role / orientation / label(語意正確 — disabled separator 不該為 a11y tree 入口)
+- 固定 `aria-hidden="true"`:目前只有 pointer hit target / visual line，沒有 focus、`aria-valuenow/min/max`、`aria-controls` 或 Arrow-key 行為，不能冒充 WAI-ARIA separator/window-splitter widget。
+- consumer 若把 resize 作為必要功能，必須另提供 keyboard-operable 等價控制；完整 splitter widget 需由新元件一次擁有 value、controls 與鍵盤 contract，不能在本 visual primitive 上零碎加 ARIA。
 
 ## 何時用 / 何時不用
 
@@ -84,10 +82,10 @@ benchmark:
 
 ## 邊界案例
 
-- **Disabled**:仍渲染 1px line(`bg-divider`,無 hover affordance),但無 cursor、無 `select-none`、不掛 role / orientation / label(見 a11y 段)。disabled 切換不改 DOM 結構,只增減 attribute。
+- **Disabled**:仍渲染 1px line(`bg-divider`,無 hover affordance),但無 cursor、無 `select-none`;所有狀態皆固定從 accessibility tree 隱藏。
 - **拖到 min / max 卡住**:primitive 不持 width state(不耦合 drag math),邊界 clamp 與卡住回饋由 consumer 的 resize handler 管;`isResizing` 期間 line 維持 `bg-primary` 不另示警。
 - **同列多 handle 並存**(多欄 column resize):各 handle 為獨立 `<span>`,無互相協調;`-3px` outward offset 使相鄰欄命中區可能相接,先命中者(DOM 順序 / pointer target)收事件,衝突仲裁屬 consumer drag math。
-- **RTL**:未特化——命中區與 line 用 physical `left/right` 定位(`resize-handle.tsx`),RTL 鏡像需另案。
+- **RTL**:全域明定 LTR-only；本元件使用 physical `left/right` 定位，不提供 RTL 鏡像。
 
 ## Roadmap(用 user 既有的 v2 framing)
 
@@ -110,11 +108,11 @@ Phase 2-4 需獨立 RFC + 各別 user approval,本 spec 只 ship Phase 1 + 鎖
 | **VS Code** | 8px(activity bar)| bg highlight on drag | col-resize | aria-label "Resize" |
 | **Figma** | 8px | 1px line | col-resize | role separator |
 
-共識:7-8px hit zone / 1px line / cursor 對應 direction / role="separator" + aria-label。本 primitive 7px hit zone + 全對齊。
+視覺共識是 7-8px hit zone / 1px line / cursor 對應 direction；各產品 a11y contract 不一致。本 primitive 只收斂視覺，不把未實作的 splitter behavior 偽裝成 separator。
 
 ## 禁止事項
 
 - ❌ 自畫 resize handle 視覺(`<div className="cursor-col-resize">`)— 必消費本 primitive
 - ❌ 直接給 ResizeHandle 加 drag state hook(eg. `useColumnResize`)— drag math 是 consumer concern,不污染 primitive
 - ❌ Phase 2/3/4 不走 RFC + user approval 自動 migrate — Audit-vs-execute 分權違反
-- ❌ 重新發明 a11y attributes — `role="separator"` + `aria-orientation` + `aria-label` SSOT 不可漂移
+- ❌ 在本 pointer-only primitive 加 `role="separator"` / `aria-*value*`——完整 splitter 語意必須連同 keyboard/value/controls 一次實作

package/src/patterns/resize-handle/resize-handle.stories.tsx

@@ -1,4 +1,4 @@
-// @story-baseline: none — primitive 用 minimal scenario showcase visual + cursor + a11y
+// @story-baseline: none — primitive 用 minimal scenario showcase visual + cursor
 import type { Meta, StoryObj } from '@storybook/react'
 import * as React from 'react'
 import { ResizeHandle } from './resize-handle'
@@ -21,7 +21,6 @@ const ColumnDemo: React.FC<{ isResizing?: boolean; disabled?: boolean }> = ({ is
       position="end"
       isResizing={isResizing}
       disabled={disabled}
-      aria-label="拖曳調整欄寬"
     />
   </div>
 )
@@ -64,7 +63,6 @@ export const Vertical: Story = {
       <ResizeHandle
         direction="vertical"
         position="end"
-        aria-label="拖曳調整面板高度"
       />
     </div>
   ),

package/src/patterns/resize-handle/resize-handle.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 /**
- * ResizeHandle — pattern primitive for drag-to-resize visual + a11y(2026-05-21 v1 ship per
+ * ResizeHandle — pattern primitive for drag-to-resize visual hit target(2026-05-21 v1 ship per
  * user「style 難道不用跟 data table column resize 維持 ssot」+「都照你建議做」approval)。
  *
  * ── 定位 ──
- * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區 / a11y attributes。
+ * 統一所有 drag-resize affordance 的視覺 / cursor / 命中區。
  * Consumer 自管 drag math(TanStack column resize / Sidebar drag-resize / Aside drag-resize
  * 各有不同 width state pathway,本 primitive 不耦合)。
  *
@@ -32,13 +32,16 @@ import { cn } from '@/lib/utils'
  * - Figma left panel resize(8px hit zone + 1px line)
  *
  * 統一共識:hit zone ≥ 7px(fingertip-friendly)/ 1px visual line(non-intrusive)/
- * hover affordance(stronger line) / drag feedback(primary highlight) /
- * a11y `role="separator"` + `aria-orientation` + 描述性 aria-label。
+ * hover affordance(stronger line) / drag feedback(primary highlight)。
+ *
+ * 本 primitive 目前只有 pointer drag visual/hit target，沒有 keyboard/value/controls contract；
+ * 因此固定從 accessibility tree 隱藏，不冒充 WAI-ARIA separator/window-splitter widget。
  */
-export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role'> {
+export interface ResizeHandleProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-hidden' | 'aria-label' | 'aria-orientation'> {
   /**
    * Drag 方向。`horizontal` = 拖拉左右(column resize / sidebar width);
-   * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor + aria-orientation。
+   * `vertical` = 拖拉上下(row resize / panel height)。決定 cursor。
    */
   direction: 'horizontal' | 'vertical'
   /**
@@ -53,11 +56,9 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
   isResizing?: boolean
   /**
    * 是否禁用拖拉。consumer 透過 col / panel 的 resizable flag 決定。
-   * 禁用時不 render cursor + 不 attach a11y role。
+   * 禁用時不 render cursor；元件所有狀態皆固定 aria-hidden。
    */
   disabled?: boolean
-  /** a11y 描述性 label。consumer 必傳(eg. 「拖曳調整欄寬」/「拖曳調整側欄寬度」)。 */
-  'aria-label': string
   /**
    * 是否畫 visual line(1px divider)。`false` = consumer 已 paint(eg. DataTable panel
    * boundary col by panel-r 接管,不重複)。Default `true`。
@@ -82,7 +83,6 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
  *   position="end"
  *   isResizing={header.column.getIsResizing?.()}
  *   disabled={!isResizable}
- *   aria-label="拖曳調整欄寬"
  *   onPointerDownCapture={(e) => {
  *     e.stopPropagation()
  *     header.getResizeHandler?.()(e.nativeEvent)
@@ -96,7 +96,6 @@ export interface ResizeHandleProps extends Omit<React.HTMLAttributes<HTMLSpanEle
  *   direction="horizontal"
  *   position="end"
  *   isResizing={isDragging}
- *   aria-label="拖曳調整側欄寬度"
  *   onPointerDown={startDrag}
  * />
  * ```
@@ -117,7 +116,6 @@ export const ResizeHandle = React.forwardRef<HTMLSpanElement, ResizeHandleProps>
     ref,
   ) => {
     const isHorizontal = direction === 'horizontal'
-    const ariaOrientation = isHorizontal ? 'vertical' : 'horizontal'  // separator's axis is perpendicular to drag
 
     // 命中區用 inline style 而非 Tailwind arbitrary values(避免 Tailwind v4 JIT 對新增 arbitrary
     // class 在 dev mode 不更新 stylesheet 的 quirk;7px 是 primitive constant 非 token,inline 妥當)。
@@ -162,17 +160,14 @@ export const ResizeHandle = React.forwardRef<HTMLSpanElement, ResizeHandleProps>
           ...(position === 'end' ? { bottom: 3 } : { top: 3 }),
         }
 
-    // 抽 aria-label / style 由我們管,其他 ...props 不重複
-    const { 'aria-label': ariaLabel, style: extraStyle, ...restProps } = props
+    const { style: extraStyle, ...restProps } = props
     return (
       <span
         ref={ref}
-        role={disabled ? undefined : 'separator'}
-        aria-orientation={disabled ? undefined : ariaOrientation}
-        aria-label={disabled ? undefined : ariaLabel}
+        {...restProps}
+        aria-hidden="true"
         style={{ ...hitZoneStyle, ...extraStyle }}
         className={cn('group/resize', !disabled && 'select-none', className)}
-        {...restProps}
       >
         {showLine && (
           <span

package/src/tokens/color/semantic.css

@@ -50,7 +50,9 @@
    │  --fg-disabled     disabled 文字（neutral-6）                       │
    │                                                                     │
    │  文字色一律使用 neutral alpha，透明度疊加在任何背景皆可維持對比      │
-   │  弱化 icon hover 後變 fg-secondary（neutral-8）                     │
+   │  弱化 icon hover 後變 fg-secondary（neutral-8）— 往前一階不跳階      │
+   │    rule owner 對偶:patterns/element-anatomy/inline-action.spec.md   │
+   │    「Icon 色彩」段;機械強制 check_pattern_invariants.sh C.5         │
    └─────────────────────────────────────────────────────────────────────┘
 
    ┌─ 互動狀態（引用色盤 step）─────────────────────────────────────────────┐

package/src/tokens/layoutSpace/layoutSpace.stories.tsx

@@ -40,7 +40,7 @@ function SpaceRow({ utility, mdValue, lgValue, usage }: {
       <div className="text-caption font-mono text-fg-muted">lg: {lgValue}</div>
       <div className="text-body text-foreground">{usage}</div>
       <div className="flex items-center justify-end">
-        <div className="bg-primary h-6" style={{ width: mdValue }} aria-label={`${utility} preview`} />
+        <div aria-hidden="true" className="bg-primary h-6" style={{ width: mdValue }} />
       </div>
     </div>
   )

package/src/tokens/opacity/opacity.stories.tsx

@@ -33,9 +33,9 @@ function OpacityRow({ utility, value, usage }: { utility: string; value: string;
       <div className="text-body text-foreground">{usage}</div>
       <div className="flex items-center gap-2">
         <div
+          aria-hidden="true"
           className="h-8 w-8 rounded bg-primary"
           style={{ opacity: parseFloat(value) }}
-          aria-label={`${utility} preview`}
         />
         <span className="text-caption text-fg-muted">preview</span>
       </div>

package/src/tokens/radius/radius.stories.tsx

@@ -33,9 +33,9 @@ export const Overview: Story = {
           <span className="text-caption text-fg-muted">2px — 極小 indicator(≤ 10px)</span>
         </div>
         <div className="flex flex-wrap gap-3 items-center">
-          <div className="rounded-xs bg-primary h-2 w-2" aria-label="Chart legend dot" />
-          <div className="rounded-xs bg-success h-2 w-2" />
-          <div className="rounded-xs bg-error h-2 w-2" />
+          <div aria-hidden="true" className="rounded-xs bg-primary h-2 w-2" />
+          <div aria-hidden="true" className="rounded-xs bg-success h-2 w-2" />
+          <div aria-hidden="true" className="rounded-xs bg-error h-2 w-2" />
           <span className="text-caption text-fg-muted ml-2">Chart legend swatch(8×8 色塊):md 4px 在 8×8 上接近 50% 圓,xs 2px 保留「色塊」而非「膠囊」語意</span>
         </div>
       </div>

package/src/tokens/uiSize/uiSize.css

@@ -24,6 +24,17 @@
   --field-height-md: 2rem;      /* 32px */
   --field-height-lg: 2.25rem;   /* 36px */
 
+  /* Field control vertical padding — 讓「單行的多行控件」與同 size 單行 Input 等高 SSOT。
+     公式 = (field-height − 1lh)/2 − 1px:`1lh` 在使用端解析成該元素自己的行高(text-body 21px /
+     text-body-lg 24px),`−1px` 補 border-box 內的上下各 1px 邊框——少了它三個 size 都會高 2px。
+     density 自動連動(引用 --field-height-*,lg density 覆寫後公式仍成立)。
+     消費者:Textarea edit base + fieldViewGeometry 多行 view(兩者相等 = InlineEdit 多行零跳契約,
+     由 scripts/inline-edit-view-geometry-invariant.mjs 機械鎖)。
+     DataTable cell 不消費此 token——cell 的 padding 載體無邊框,自有 --table-cell-py 公式。 */
+  --field-control-py-sm: calc((var(--field-height-sm) - 1lh) / 2 - 1px);
+  --field-control-py-md: calc((var(--field-height-md) - 1lh) / 2 - 1px);
+  --field-control-py-lg: calc((var(--field-height-lg) - 1lh) / 2 - 1px);
+
   /* Field horizontal padding — 固定 12px(不隨 size/density);form-context field 左右內距 SSOT。
      跟 --table-cell-px(cell-context)同 -px 慣例;Input/Select/Combobox/DatePicker/TimePicker/Textarea
      + tag 模式右緣 re-assert 全消費此 token(取代散落的 px-3 / inline 0.75rem,M17 SSOT 可傳播)。 */

package/src/tokens/uiSize/uiSize.spec.md

@@ -457,6 +457,7 @@ document.documentElement.setAttribute('data-density', 'lg')
 - `app-shell.spec.md`
 - `breadcrumb.spec.md`
 - `button.spec.md`
+- `dialog.spec.md`
 - `header-canonical.spec.md`
 - `overlay-surface.spec.md`
 - `popover.spec.md`

package/ds-canonical/commands/gov-status.md

@@ -1,9 +0,0 @@
----
-description: Retired command compatibility pointer
----
-
-# `/gov-status` retired
-
-This one-time Genesis compatibility file has no executable workflow. Use the
-provider-neutral `governance-status` skill. The distinct protected cleanup PR
-removes this legacy command path after the A/M-only transition closes.