@qijenchen/design-system 0.1.0-beta.146 → 0.1.0-beta.147

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

@@ -283,16 +283,6 @@ Tag 是**純視覺 indicator**(非互動 control,互動版本是 Chip),預設 AR
 - `../Chip/chip.spec.md` — 可互動 filter（Tag 的互動版本）
 - `../Combobox/combobox.spec.md` — 多選場景會渲染 Tag 陣列
 - `../ProfileCard/profile-card.spec.md` — 人員資訊顯示
-
-## 被引用(auto-maintained,Dim 3 reciprocal audit)
-
-> 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
-
-- `avatar.spec.md`
-- `badge.spec.md`
-- `inline-action.spec.md`
-- `overflow-indicator.spec.md`
-
 ## 截斷量測不加快取(2026-09-14 退回紀錄)
 
 Tag 用 Canvas `measureText` 判截斷(flex 內 `scrollWidth` 不可靠)。一次量測做三件事:`getComputedStyle`(逼出樣式重算)、
@@ -304,3 +294,12 @@ CPU 剖析實測:一次 6,000px/s 手勢裡這個 measure 自身時間 142–232
 曾加兩層快取(字型 + 文字寬,`document.fonts` `loadingdone` 時整個清掉)。同機交錯 CPU 剖析(dpr2 + CPU×6):
 main 223ms / 加快取後 380ms / 再把快取鍵最佳化後 412ms —— 每次呼叫要組兩個字串當鍵(其中一個含 Tag 的 Tailwind class,數百字元)再各查一次 Map,
 組字串加雜湊比它想省的那兩個瀏覽器呼叫還貴。要再嘗試必先重跑同一組對照剖析,拿到比 main 低的數字才可回來。
+
+## 被引用(auto-maintained,Dim 3 reciprocal audit)
+
+> 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
+
+- `avatar.spec.md`
+- `badge.spec.md`
+- `inline-action.spec.md`
+- `overflow-indicator.spec.md`

package/src/components/Tag/tag.tsx

@@ -33,7 +33,8 @@ function getMeasureCtx() {
 export const TAG_HEIGHT_PX = { sm: 20, md: 24, lg: 24 } as const
 
 const tagVariants = cva(
-  "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text",
+  // 停用(consumer 掛 aria-disabled;Combobox 的停用示範就是)→ 禁止符號蓋掉 cursor-text(hit-area-canonical.md 滑過原則一-3「停用的用禁止符號」,2026-09-29 全站掃出)
+  "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text aria-disabled:cursor-not-allowed",
   {
     variants: {
       // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——
@@ -189,7 +190,6 @@ function TagInner(
   // 內部結構;原僅 jsdoc/spec 約束會靜默通過 → 2026-07-05 對齊 Button overlayBadge dev-warn
   // 先例(button.tsx「Dev-mode warning」段)補齊家族一致 runtime 防線。
   if (process.env.NODE_ENV !== 'production' && Icon && avatar) {
-    // eslint-disable-next-line no-console
     console.warn(
       '[DS Tag] `icon` 與 `avatar` 互斥(同為 prefix slot),同時傳會並列渲染破壞 Tag 內部結構,請只擇一。SSOT:tag.spec.md Props 表 + tag.principles.stories.tsx IconRule。'
     )

package/src/components/Textarea/textarea.tsx

@@ -43,6 +43,10 @@ const textareaVariants = cva(
     // K10 fix(2026-05-04):disabled 時 placeholder + text 切 fg-disabled(parallel 到 bareInputStyles)
     //   Textarea 自身 `<textarea disabled>` 帶 disabled HTML attribute,用 `disabled:` variant 直接命中
     'disabled:placeholder:text-fg-disabled disabled:text-fg-disabled',
+    // 停用游標:外框(fieldWrapperStyles disabled compound)是 cursor-not-allowed,但 <textarea disabled> 自己的 UA 樣式
+    // 是 cursor: default,指到文字區就變回箭頭 —— 同 Input(input.tsx 停用分支)在控件本身補上禁止符號
+    //(field-controls.spec.md「游標指引」disabled → cursor-not-allowed;hit-area-canonical.md 滑過原則一-3「停用的用禁止符號」)。
+    'disabled:cursor-not-allowed',
     'px-[var(--field-px)]',
     // 不寫 transition-colors:hover 外框一律瞬間(tokens/motion/motion.spec.md「hover 回饋不做過渡」;2026-09-26 由底色延伸到外框,待辦總帳 L9 / N4(3))。
     // 外框規則來自 field-wrapper.tsx 的 fieldDefaultChromeCompounds —— 單行 wrapper(fieldWrapperStyles)、

package/src/components/TimePicker/time-columns.tsx

@@ -263,7 +263,8 @@ export function TimeColumns({
         values={hourValues}
         selected={safeValue.hours}
         disabledSet={disabledSets.hours}
-        label="hours"
+        // 讀屏文字中文(全庫 SR label 中文,2026-07-04;同元件的「清除時間」「選擇時間」早已是中文,只有三欄的 listbox 名稱漏了)
+        label="時"
         onSelect={(h) => onChange({ ...safeValue, hours: h })}
         withDivider
       />
@@ -271,7 +272,7 @@ export function TimeColumns({
         values={minuteValues}
         selected={safeValue.minutes}
         disabledSet={disabledSets.minutes}
-        label="minutes"
+        label="分"
         onSelect={(m) => onChange({ ...safeValue, minutes: m })}
         withDivider={showSeconds}
       />
@@ -280,7 +281,7 @@ export function TimeColumns({
           values={secondValues}
           selected={safeValue.seconds}
           disabledSet={disabledSets.seconds}
-          label="seconds"
+          label="秒"
           onSelect={(s) => onChange({ ...safeValue, seconds: s })}
         />
       )}

package/src/components/TimePicker/time-picker.spec.md

@@ -215,7 +215,7 @@ N/A — TimePicker 是純同步輸入,無 async 狀態。
 - trigger `role="combobox"`,在 `<Field>` 內時以 `aria-labelledby` 指向 field label(`fieldCtx.labelId`)
 - **Standalone(無 `<Field>` 包裹)accessible name**:trigger 無預設 `aria-label`,`<Field>` 外使用時 consumer **必須**自帶 `aria-label` 或 `aria-labelledby`,否則 `role="combobox"` 成為無名稱控件(對齊 Select / Combobox / DatePicker 同家族 standalone 約定)。DS 不為 trigger 塞泛用 fallback name(如「時間」),避免遮蔽 consumer 的具體語意(如「會議開始時間」);Field 內則自動接線無需 consumer 介入。Panel 本體(Popover dialog)另有本 DS 提供的 `aria-label="選擇時間"`,與 trigger name 職責分離
 - Panel 開啟時 trigger `aria-expanded="true"` + `aria-haspopup="dialog"`
-- 每欄 `role="listbox"`(`aria-label` 為 `hours` / `minutes` / `seconds`),item `role="option" aria-selected`
+- 每欄 `role="listbox"`(`aria-label` 為 `時` / `分` / `秒`;讀屏文字中文,2026-09-29 由 `hours` / `minutes` / `seconds` 改 —— 全庫 SR label 中文 2026-07-04,同元件的「清除時間」「選擇時間」早已是中文),item `role="option" aria-selected`
 - Screen reader 經 trigger 的 label + 內層可見值文字朗讀目前選取時間(目前值以可見 `<span>` 呈現,無額外 `aria-valuetext`)
 
 ---

package/src/components/Tooltip/tooltip.spec.md

@@ -141,6 +141,7 @@ Tooltip 是**單一職責 hover 提示 primitive**(一句話補充),刻意無變
 
 > 本節由 `scripts/add-reciprocal-pointers.mjs` 自動維護,列出在 SSOT 語境下指向本 spec 的其他 spec。若要手動補充,寫在本節之前。
 
+- `agent-panel.spec.md`
 - `calendar.spec.md`
 - `coachmark.spec.md`
 - `date-picker.spec.md`

package/src/components/TreeView/tree-view.spec.md

@@ -92,7 +92,7 @@ TreeView 本身只負責三件事:
 
 Chevron 是**展開/收合控件**,不是 prefix icon:`fg-muted`(指示色,hover 時 `fg-secondary`,只前進一階)/ 位置在 indent 之後 icon 之前 / 點擊只 toggle expand 不觸發 selection / `rotate-90` transition。
 
-**消費共用行內小按鈕**(2026-09-26,待辦總帳 L5,user:「是改成inline action對吧？」):箭頭本身就是 `ItemInlineActionButton`(`../../patterns/element-anatomy/item-anatomy.tsx`),尺寸照 `../../patterns/element-anatomy/inline-action.spec.md`「尺寸對照」TreeItem 列 —— 圖示與排版佔位 16(lg 20)、**滑過底色 18(lg 22)= 點得到的範圍**(`../../../ds-canonical/references/hit-area-canonical.md`)、按下多一階 `neutral-active`。與 DataTable 巢狀列的展開箭頭同一顆(`../DataTable/data-table.tsx` nestedPrefix)。縮排不變:箭頭仍住 `ItemPrefix` 鎖寬的槽,多出的 1px 靠溢出不吃版位。2026-09-26 之前這裡手刻一顆 16×16 的按鈕,滑過底色與點擊範圍都只有 16、也沒有按下態。箭頭 `tabIndex=-1`、對讀屏隱藏(展開 / 收合的鍵盤與語意在列上:`→` / `←` 與 `aria-expanded`)。
+**消費共用行內小按鈕**(2026-09-26,待辦總帳 L5,user:「是改成inline action對吧？」):箭頭本身就是 `ItemInlineActionButton`(`../../patterns/element-anatomy/item-anatomy.tsx`),尺寸照 `../../patterns/element-anatomy/inline-action.spec.md`「尺寸對照」TreeItem 列 —— 圖示與排版佔位 16(lg 20)、**滑過底色 18(lg 22)= 點得到的範圍**(`../../../ds-canonical/references/hit-area-canonical.md`)、按下多一階 `neutral-active`。與 DataTable 巢狀列的展開箭頭同一顆(`../DataTable/data-table.tsx` nestedPrefix)。縮排不變:箭頭仍住 `ItemPrefix` 鎖寬的槽,多出的 1px 靠溢出不吃版位。2026-09-26 之前這裡手刻一顆 16×16 的按鈕,滑過底色與點擊範圍都只有 16、也沒有按下態。箭頭 `tabIndex=-1`(不佔 Tab 停靠點;展開 / 收合的鍵盤在列上:`→` / `←`),**但保留名字與角色、不 `aria-hidden`**(2026-09-29 更正,待辦總帳 N46):`aria-label` 展開 / 收合 + `aria-expanded`,語音控制使用者喊「展開」才按得到、讀屏在列裡也叫得到它;與 DataTable 巢狀列的展開箭頭同一種寫法(`../DataTable/data-table.tsx` nestedPrefix)。2026-09-29 前寫 `aria-hidden`,一顆能聚焦(`tabIndex=-1` 仍可被程式與滑鼠聚焦)的按鈕對讀屏隱藏是 axe `aria-hidden-focus` 那一族。
 
 ### 佔位規則(chevron + icon)
 
@@ -175,10 +175,13 @@ Chevron 是**展開/收合控件**,不是 prefix icon:`fg-muted`(指示色,hover
 | `←` | 展開的資料夾 → 收合;收著的資料夾或葉節點 → 回上一層;最外層 → 不動 |
 | `Enter` / `Space` | 選取(等同點擊 label;`expandOnSelect` 的連帶展開僅限指標點擊) |
 | `Tab` / `Shift+Tab` | **一下就離開整棵樹**(別列、本列的按鈕都不在 Tab 路上) |
+| 打字(可見字元) | **打字跳位**(2026-09-29,待辦總帳 N46;`ds-canonical/references/keyboard-model-canonical.md` 五條判準第 2 條把「打字前導」列為樹必備):焦點移到**下一個**名字以該字開頭的可見列(從目前這一列的下一列往後找,到底繞回第一列;折疊大小寫);1 秒內連打多個字 = 以整串比對(「fr」→ Frontend);連打同一個字母而沒有名字以「bb」開頭時退回單字循環(在同字母的列之間輪流)。`Space` 不算(它是選取)。一手:W3C APG Tree View 逐字 "Type a character: focus moves to the next node with a name that starts with the typed character." / "Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of characters typed."(<https://www.w3.org/WAI/ARIA/apg/patterns/treeview/>);1 秒的累積窗與同字母退回是 AI 推導。閘:`scripts/tree-view-keyboard-route-invariant.mjs` K1(真按鍵)+ `scripts/test-tree-keyboard-route.mjs`(判定表) |
 | `Cmd/Ctrl+Shift+↑` / `↓` | 重排:同層上移 / 下移(僅 `draggable` 時;詳「Drag and Drop → 鍵盤重排」) |
 | `Cmd/Ctrl+Shift+→` | 重排:移入上一個 sibling(需為 folder;收合時自動展開) |
 | `Cmd/Ctrl+Shift+←` | 重排:移出,成為 parent 的下一個 sibling |
 
+**列被刪掉時焦點接力**(2026-09-29,待辦總帳 N46「刪除 / 消失後焦點去下一項」):consumer 從資料裡拿掉節點時,焦點若在那一列(或它的按鈕)上,接力到畫面順序的**下一個可見列**(可能是下一個頂層節點);沒有下一列 → **上一個可見列**(可能就是父節點);禁止掉到 `body`。落點順序同 `../FileUpload/file-upload.spec.md`「移除焦點」(下一個 → 上一個 → 擁有者)。收合中的分支不算候選(整段子樹一起卸載,落點是收合的那個父節點)。實作 = `tree-view.tsx` TreeItem 的 layout-effect cleanup(節點拆掉前鄰列都還在);驗證 = `tree-view.stories.tsx`「刪除後焦點接力」(play 實刪四次)。
+
 焦點在**列上的按鈕**上:
 
 | 按鍵 | 行為 |

package/src/components/TreeView/tree-view.stories.tsx

@@ -1,10 +1,10 @@
 // @story-history: hasInteractiveStates trait — TreeView interactive states(hover / focus / selected / disabled)由 TreeItem 內部處理(spec.md state machine + anatomy StateBehavior story 已 cover),showcase 層 manual Disabled/States story retired per F migration(2026-05-15)— anatomy.stories.tsx auto-compile owns StateBehavior 6-canonical。AllSizes 同理 retired(SizeMatrix anatomy auto-compile owns)。
 import * as React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import {
   Folder, FileText, FileCode, Image, Settings,
-  CheckCircle2, Circle, Minus, MoreVertical, Plus,
+  CheckCircle2, Circle, Minus, MoreVertical, Plus, Trash2,
   type LucideIcon,
 } from 'lucide-react'
 import { TreeView, TreeItem } from './tree-view'
@@ -67,8 +67,9 @@ export const ActionHoverState: Story = {
     </div>
   ),
   play: async ({ canvasElement }) => {
+    // 展開箭頭 2026-09-29 起保留名字(aria-label 展開 / 收合)、不再 aria-hidden(tree-view.spec.md「展開 / 收合 chevron」;待辦總帳 N46)
     const action = canvasElement.querySelector<HTMLElement>(
-      '[data-tree-id="product-roadmap"] button[aria-hidden="true"]',
+      '[data-tree-row="product-roadmap"] button[aria-label="展開"]',
     )
     if (!action) throw new Error('TreeView 展開動作不存在')
     action.setAttribute('data-visual-hover-target', '')
@@ -353,6 +354,89 @@ export const RowActions: Story = {
   },
 }
 
+// ── 刪除節點後焦點接力(2026-09-29 待辦總帳 N46「刪除 / 消失後焦點去下一項」)──────────
+// 真實情境:知識庫的頁面樹,列上的「刪除」把節點從資料裡拿掉。焦點在被刪的那一列(或它的按鈕)上時,
+// 接力到畫面順序的**下一個可見列**(可能是下一個頂層節點);沒有下一列 → **上一個可見列**(可能就是父節點);禁止掉到 body。
+// 落點順序同 FileUpload 的移除鈕(下一個 → 上一個 → 擁有者)。
+type WikiNode = { id: string; label: string; children?: WikiNode[] }
+const dropNode = (nodes: WikiNode[], id: string): WikiNode[] =>
+  nodes.filter((n) => n.id !== id).map((n) => (n.children ? { ...n, children: dropNode(n.children, id) } : n))
+const DeleteHandoffTree = () => {
+  const [nodes, setNodes] = React.useState<WikiNode[]>([
+    { id: 'handbook', label: '員工手冊', children: [
+      { id: 'onboarding', label: '到職第一週' },
+      { id: 'expense', label: '報帳流程' },
+      { id: 'leave', label: '請假規定' },
+    ] },
+    { id: 'archive', label: '封存' },
+  ])
+  const remove = (id: string) => ({ icon: Trash2, label: '刪除', onClick: () => setNodes((prev) => dropNode(prev, id)) })
+  const renderNodes = (list: WikiNode[]) => list.map((n) => (
+    <TreeItem key={n.id} id={n.id} icon={n.children ? Folder : FileText} label={n.label} inlineActions={[remove(n.id)]}>
+      {n.children ? renderNodes(n.children) : undefined}
+    </TreeItem>
+  ))
+  return (
+    <div className="flex flex-col gap-2">
+      <button type="button" className="sr-only">樹狀清單之前</button>
+      <div className="w-[320px] border border-divider rounded-lg bg-surface overflow-hidden py-2">
+        <TreeView aria-label="知識庫" defaultExpandedIds={['handbook']}>{renderNodes(nodes)}</TreeView>
+      </div>
+      <button type="button" className="sr-only">樹狀清單之後</button>
+    </div>
+  )
+}
+
+export const DeleteHandoff: Story = {
+  name: '刪除後焦點接力',
+  parameters: {
+    demoFocus: 'keep',
+    docs: {
+      description: {
+        story:
+          '列上的「刪除」把節點從資料裡拿掉時,鍵盤焦點不會掉到頁面外:接力到畫面順序的下一個可見列(可能是下一個頂層節點);' +
+          '已是最後一列 → 上一個可見列(可能就是父節點)。這則的 play 用鍵盤實際刪四次驗證(同層下一列 / 下一個頂層節點 / 上一列 / 父節點)。',
+      },
+    },
+  },
+  render: () => <DeleteHandoffTree />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const before = canvas.getByRole('button', { name: '樹狀清單之前' })
+    const row = (id: string) => {
+      const el = canvasElement.querySelector<HTMLElement>(`[data-tree-row="${id}"]`)
+      if (!el) throw new Error(`找不到列 ${id}`)
+      return el
+    }
+    // Tab 進樹落在第一列(員工手冊),↓↓ 到「報帳流程」,→ 進它的「刪除」,Enter 刪掉 → 焦點接力到下一列「請假規定」
+    before.focus()
+    await userEvent.tab()
+    await expect(row('handbook')).toHaveFocus()
+    await userEvent.keyboard('{ArrowDown}{ArrowDown}')
+    await expect(row('expense')).toHaveFocus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(row('expense').querySelector('[data-tree-actions] button')).toHaveFocus()
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(canvasElement.querySelector('[data-tree-row="expense"]')).toBeNull())
+    await waitFor(() => expect(row('leave')).toHaveFocus())
+    // 刪掉「請假規定」(員工手冊的最後一個子節點):畫面順序的下一個可見列是下一個頂層節點「封存」
+    await userEvent.keyboard('{ArrowRight}{Enter}')
+    await waitFor(() => expect(canvasElement.querySelector('[data-tree-row="leave"]')).toBeNull())
+    await waitFor(() => expect(row('archive')).toHaveFocus())
+    // 刪掉「封存」(整棵樹最後一列):沒有下一列 → 上一個可見列「到職第一週」
+    await userEvent.keyboard('{ArrowRight}{Enter}')
+    await waitFor(() => expect(canvasElement.querySelector('[data-tree-row="archive"]')).toBeNull())
+    await waitFor(() => expect(row('onboarding')).toHaveFocus())
+    // 再刪「到職第一週」(唯一剩下的子節點):上一列就是父節點「員工手冊」;整棵樹的 Tab 停靠點跟著落在它
+    await userEvent.keyboard('{ArrowRight}{Enter}')
+    await waitFor(() => expect(canvasElement.querySelector('[data-tree-row="onboarding"]')).toBeNull())
+    await waitFor(() => expect(row('handbook')).toHaveFocus())
+    await expect(row('handbook')).toHaveAttribute('tabindex', '0')
+    // 收尾:焦點放回樹外
+    canvas.getByRole('button', { name: '樹狀清單之後' }).focus()
+  },
+}
+
 // ── Long label (wrap test) ──────────────────────────────────────────────
 
 export const LongLabel: Story = {

package/src/components/TreeView/tree-view.tsx

@@ -17,7 +17,7 @@ import { ChevronRight } from 'lucide-react'
 import { cva } from 'class-variance-authority'
 import type { LucideIcon } from 'lucide-react'
 import { dragSourceClass, dropIndicatorRow, dropIndicatorInside, DRAG_ACTIVATION_DISTANCE_PX } from '@/design-system/lib/drag-visual'
-import { createDragAnnouncements, type DragOutcome } from '@/design-system/lib/drag-announcements'
+import { type DragOutcome, useDragAccessibility } from '@/design-system/lib/drag-announcements'
 import { cn } from '@/lib/utils'
 import { Checkbox } from '@/design-system/components/Checkbox/checkbox'
 // 「列上有小按鈕的一串」鍵盤路線的唯一判定與執行(與 Sidebar / FileUpload / Command 共用;判定表 scripts/test-roving-list-keyboard.mjs
@@ -161,6 +161,8 @@ const DEFAULT_REORDER_ANNOUNCEMENTS: Required<TreeReorderAnnouncements> = {
 // + 子項容器(`data-tree-children`,Radix Collapsible Content)。列不得包住子列(treegrid 的 row 只能擁有格),
 // 所以 aria-level / aria-expanded / aria-selected 都住在 row 上,wrapper 只是結構。
 const ROW_SELECTOR = '[data-tree-row]'
+/** 打字跳位:兩次按鍵相隔在這之內算同一串(AI 推導;見 TreeView 內 typeahead) */
+const TYPEAHEAD_WINDOW_MS = 1000
 const cssEscape = (value: string) =>
   typeof CSS !== 'undefined' && typeof CSS.escape === 'function' ? CSS.escape(value) : value.replace(/["\\]/g, '\\$&')
 const rowSelector = (id: string) => `[data-tree-row="${cssEscape(id)}"]`
@@ -404,6 +406,8 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
     // (來源見 tree-view.spec.md「A11y 預設」)。
     const [focusedId, setFocusedId] = React.useState<string | null>(null)
     const treeRef = React.useRef<HTMLDivElement>(null)
+    // 打字跳位的累積字串(見下方 typeahead)
+    const typeaheadRef = React.useRef({ buffer: '', at: 0 })
     React.useImperativeHandle(ref, () => treeRef.current!)
     const focusRow = React.useCallback((id: string) => {
       treeRef.current?.querySelector<HTMLElement>(rowSelector(id))?.focus({ preventScroll: true })
@@ -412,10 +416,11 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
     // ── 唯一的 Tab 停靠點(roving tabindex)──
     // 順序:焦點最後停的那一列(仍看得到)→ 選中的第一列 → 第一個可用列
     // (W3C keyboard-interface「進入組合元件時落在選中項,沒有就第一項」;來源見 spec)。
-    // 每次 render 後在 layout 階段重算(列的展開 / 選取 / 卸載都會改變答案),相同就不 setState,不會迴圈。
+    // 在 layout 階段從真 DOM 重算,相同就不 setState,不會迴圈:答案只看列的存在 / 開合 / aria-selected / aria-disabled 與 focusedId,
+    // 不看 tabStopId 本身(它只影響列的 tabIndex),所以 set 之後那一次重算必然相等。
     const [tabStopId, setTabStopId] = React.useState<string | null>(null)
-    // 只用來觸發一次 re-render(值本身不讀):列卸載後讓下方 layout effect 重算停靠點
-    const [, setRowRepairTick] = React.useState(0)
+    // 值本身不讀,只當下方 layout effect 的相依:列卸載時 TreeView 自己不一定 re-render,靠它讓 effect 重算停靠點
+    const [rowRepairTick, setRowRepairTick] = React.useState(0)
     const tabStopRef = React.useRef<string | null>(null)
     tabStopRef.current = tabStopId
     const focusedIdRef = React.useRef<string | null>(null)
@@ -434,7 +439,11 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
       })
       const next = stop?.dataset.treeRow ?? null
       if (next !== tabStopId) setTabStopId(next)
-    })
+      // 相依 = 會改變「哪些列存在 / 在開著的分支裡 / aria-selected / aria-disabled」的 render 輸入,加上 remembered(focusedId)與比對用的 tabStopId:
+      // children(節點增刪 / disabled)、expandedIds(子樹掛載與開合)、selectedIds + selectionMode(aria-selected)、rowRepairTick(列卸載通知)。
+      // 2026-09-29 前沒有相依清單(每次 render 都跑);列 DOM 只會因這幾個輸入而變,其餘 render(拖曳落點 / 播報文字 / 無關 prop)重算結果必相同,
+      // 跳過不改行為。日後新增會影響列 DOM 的輸入時要一併列進來。
+    }, [children, expandedIds, selectedIds, selectionMode, focusedId, tabStopId, rowRepairTick])
     // 列被卸載(例:consumer 收合了焦點所在列的上一層,關閉動畫結束後子樹才卸載 —— 那一刻 TreeView 本身不會 re-render)
     // → 若它是停靠點或焦點所在,觸發一次重算,否則整棵樹會從 Tab 路上消失。
     const onRowUnmount = React.useCallback((id: string) => {
@@ -607,10 +616,8 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
     // 這裡把指標路徑也接上,並誠實回報結果:守衛擋下(不合法 target / 子樹內)
     // 就播「未變更」而不是假的成功。共用 SSOT 見 `lib/drag-announcements.ts`。
     const dragOutcomeRef = React.useRef<DragOutcome | null>(null)
-    const dndAnnouncements = React.useMemo(
-      () => createDragAnnouncements({ getOutcome: () => dragOutcomeRef.current, kind: '項目' }),
-      [],
-    )
+    // 指標拖曳的播報走 polite 區域 + 繁中操作說明(2026-09-27 OE10;先前交給 dnd-kit 寫死的 assertive 區域)
+    const drag = useDragAccessibility({ getOutcome: () => dragOutcomeRef.current, kind: '項目' })
 
     const handleDragEnd = React.useCallback((event: DragEndEvent) => {
       dragOutcomeRef.current = null
@@ -906,6 +913,8 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
         controlIndex: onRow ? -1 : actions.indexOf(target),
         controlIsTextEntry: !onRow && isTextEntryElement(target),
         tree: { hasChildren: wrapper?.dataset.treeHasChildren === 'true', expanded: expandedIds.has(id), hasParent: parentId != null },
+        // 打字跳位只在列上(按鈕上打字沒有意義;動作格裡的輸入框由 controlIsTextEntry 保住自己的打字)
+        typeahead: onRow,
         // 未啟用拖曳 → 重排組合整組 no-op(modifier 組合不落入導覽)
         reorderable: draggable,
         defaultPrevented: e.defaultPrevented,
@@ -933,9 +942,42 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
         onCollapse: () => toggleExpand(id),
         onParent: () => { if (parentId) focusRow(parentId) },
         onActivateItem: () => select(id),
+        onTypeahead: (char) => typeahead(char, row),
       })
     }
 
+    // ── 打字跳位(typeahead;2026-09-29 待辦總帳 N46)──
+    // keyboard-model-canonical.md 五條判準第 2 條把「打字前導」列為樹必備的鍵盤模型;規格 tree-view.spec.md「鍵盤導覽」。
+    // W3C APG Tree View 逐字:"Type a character: focus moves to the next node with a name that starts with the typed character." /
+    // "Type multiple characters in rapid succession: focus moves to the next node with a name that starts with the string of
+    // characters typed."(https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)。
+    // 名字 = 列的 accessible name(aria-labelledby 指到的 label 文字),比對折疊大小寫;候選 = 看得到、沒停用的列,
+    // 從目前這一列的**下一列**往後找、到底再從頭(繞回一圈,最後才是自己 → 只有自己符合就不動)。
+    // 連打同一個字母(「bb」)而沒有名字以「bb」開頭時退回單字循環(連按同一鍵 = 在同字母的列之間輪流)。
+    // 字串累積窗 1000ms(AI 推導,無外部出處;超過就當重新開始)。判定在 lib/roving-list-keyboard.ts(`typeahead` 格),
+    // 這裡只做「找哪一列、搬焦點」。
+    const typeahead = (char: string, row: HTMLElement) => {
+      const tree = treeRef.current
+      if (!tree) return
+      const now = Date.now()
+      const state = typeaheadRef.current
+      const buffer = now - state.at <= TYPEAHEAD_WINDOW_MS ? state.buffer + char : char
+      typeaheadRef.current = { buffer, at: now }
+      const rows = Array.from(tree.querySelectorAll<HTMLElement>(ROW_SELECTOR)).filter((r) => isInOpenBranch(r) && isRowEnabled(r))
+      const nameOf = (r: HTMLElement) => {
+        const labelledBy = r.getAttribute('aria-labelledby')
+        const label = labelledBy ? document.getElementById(labelledBy) : null
+        return (label?.textContent ?? '').trim().toLocaleLowerCase()
+      }
+      const start = rows.indexOf(row)
+      const ordered = [...rows.slice(start + 1), ...rows.slice(0, start + 1)]
+      const find = (prefix: string) => ordered.find((r) => nameOf(r).startsWith(prefix))
+      const lower = buffer.toLocaleLowerCase()
+      const sameChar = lower.length > 1 && [...lower].every((c) => c === lower[0])
+      const target = find(lower) ?? (sameChar ? find(lower[0]) : undefined)
+      target?.focus({ preventScroll: true })
+    }
+
     const treeEl = (
       <div
         // {...props} 在最前:內部 role/style(--tree-px)/onKeyDownCapture 必須勝過 consumer
@@ -997,9 +1039,11 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
           onDragOver={handleDragOver}
           onDragEnd={handleDragEnd}
           onDragCancel={handleDragCancel}
-          accessibility={{ announcements: dndAnnouncements }}
+          accessibility={drag.accessibility}
         >
           {treeEl}
+          {/* 指標拖曳播報的 polite 區域(sr-only;lib/drag-announcements.ts useDragAccessibility);鍵盤重排另有下方自有區域 */}
+          {drag.liveRegion}
           {draggable && (
             <>
               {/* 鍵盤重排 SR 播報 — TreeView 自有 sr-only polite live region(單一節點覆寫式更新;
@@ -1229,6 +1273,34 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
       }
     }, [isFocused])
 
+    // ── 列被刪掉時焦點去下一列(2026-09-29 待辦總帳 N46「刪除 / 消失後焦點去下一項」)──
+    // consumer 從資料裡拿掉這個節點時,焦點若在這一列或它的按鈕上,搬到**下一列**;沒有下一列 → **上一列**(上一列可能就是父節點)。
+    // 落點順序同 FileUpload focusAfterFileRemoval(下一個 → 上一個 → 擁有者)。用 layout effect 的 cleanup:它在 React 把這棵子樹從 DOM
+    // 拆掉之前跑,鄰列都還在、焦點還在列上;passive effect 的 cleanup 跑的時候節點已不在 DOM、焦點早掉到 body。真正搬焦點放到 microtask
+    //(commit 同步結束之後):那時列真的不在 DOM 了才搬 —— StrictMode 開發模式會多跑一次 cleanup 再 re-mount,那一次列還在,不搬。
+    // 收合中的分支(Collapsible 關閉動畫結束後才卸載、期間 data-state="closed")不算候選:整段子樹都在拆,落點是上一列(= 收合的父節點)。
+    // 整棵樹一起卸載時候選全空 / 目標也已離線,focus() 是 no-op。
+    React.useLayoutEffect(() => () => {
+      const row = rowRef.current
+      const active = document.activeElement
+      if (!row || !active || !row.contains(active)) return
+      const tree = row.closest<HTMLElement>('[role="treegrid"]')
+      const wrapper = row.closest<HTMLElement>('[data-tree-id]')
+      if (!tree || !wrapper) return
+      const rows = Array.from(tree.querySelectorAll<HTMLElement>(ROW_SELECTOR))
+        .filter((r) => !wrapper.contains(r) && isInOpenBranch(r) && isRowEnabled(r))
+      const after = rows.find((r) => (wrapper.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
+      const before = [...rows].reverse().find((r) => (wrapper.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
+      const target = after ?? before
+      if (!target) return
+      queueMicrotask(() => {
+        if (row.isConnected) return
+        const now = document.activeElement
+        if (now && now !== document.body && now.isConnected) return // 有人(consumer 的對話框等)已經接走焦點
+        target.focus({ preventScroll: true })
+      })
+    }, [])
+
     // ── 列上的按鈕不在 Tab 路上(總帳 B9;tree-view.spec.md「鍵盤導覽」)──
     // 動作格裡每一個可聚焦的東西都設 tabIndex=-1,改由 → / ← 走到。用 DOM 設而不是逐一傳 prop:
     // inlineActionsSlot 是 consumer 的任意 ReactNode(選單觸發鈕、連結…),拿不到它們的 props;
@@ -1313,14 +1385,18 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
     // 依據 inline-action.spec.md「尺寸對照」TreeItem 列 + hit-area-canonical.md:滑過底色 18(lg 22)= 點得到的範圍,
     // 盒與排版佔位仍是圖示尺寸 16 / 20,多出的 1px 靠溢出;按下多一階 neutral-active)。與 DataTable 巢狀列的展開箭頭同一顆
     //(data-table.tsx nestedPrefix)。2026-09-26 之前這裡手刻一顆 16×16 的 <button>,滑過底色與點擊範圍都只有 16。
-    // 鍵盤用 → / ← 展開收合(列上的 aria-expanded),箭頭本身不在 Tab 路上、對讀屏隱藏。
+    // 鍵盤用 → / ← 展開收合(列上的 aria-expanded),箭頭本身不在 Tab 路上(tabIndex -1),**但保留名字與角色、不 aria-hidden**
+    //(2026-09-29 待辦總帳 N46):語音控制使用者喊「展開」才按得到、讀屏在列裡也叫得到它;與 DataTable 巢狀列的展開箭頭同一種寫法
+    //(data-table.tsx nestedPrefix:aria-label 展開 / 收合 + aria-expanded)。2026-09-29 前寫 aria-hidden,一顆能聚焦的按鈕對讀屏隱藏
+    // 也是 axe aria-hidden-focus 那一族。
     const chevronSlot = (
       <ItemPrefix style={{ width: iconPx }}>
         {hasChildren ? (
           <ItemInlineActionButton
             icon={ChevronRight}
             tabIndex={-1}
-            aria-hidden
+            aria-label={isExpanded ? '收合' : '展開'}
+            aria-expanded={isExpanded}
             onClick={handleChevronClick}
             // 展開 / 收合的旋轉是狀態切換的動畫,不是滑過回饋 → 保留(motion.spec.md「hover 回饋不做過渡」只管滑過;
             // 滑過底色與圖示色由 ItemInlineActionButton 瞬間切換)

package/src/hooks/use-overflow-items.ts

@@ -88,11 +88,15 @@ export function useScrollEdges<T extends HTMLElement = HTMLElement>(): UseScroll
     // 監聽 children 變化（items 增減、字體載入）
     const mo = new MutationObserver(update)
     mo.observe(el, { childList: true, subtree: true, characterData: true })
+    // 標記捲動容器(2026-09-29,待辦總帳 OE26):OverflowScrollArrow 卸載時若焦點在它身上、另一側箭頭也不在,
+    // 就把焦點交給這個容器 —— 靠這個屬性找到它,消費者不用多傳 ref。
+    el.setAttribute('data-overflow-scroller', '')
 
     return () => {
       el.removeEventListener('scroll', update)
       ro.disconnect()
       mo.disconnect()
+      el.removeAttribute('data-overflow-scroller')
     }
   }, [])
 

package/src/hooks/use-truncated.ts

@@ -103,8 +103,9 @@ export function useTruncated<E extends HTMLElement = HTMLElement>(
       if (t) clearTimeout(t)
       cleanup()
     }
-    // deps 由 consumer 決定(Tag: [children];其餘: []);measure 走 ref 不需進 deps。
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // deps 由 consumer 決定(預設 [] = mount-once;Tag / Calendar / Select 等傳文字來源);measure 走 ref 不需進 deps;
+    // recheckAfterPaint / timing 是 call-site 固定字面值,只在訂閱當下讀一次。exhaustive-deps 只認 useEffect /
+    // useLayoutEffect 等已知名字(config 未設 additionalHooks),不檢查 `useIsoEffect` 別名 → 這裡不掛 eslint-disable。
   }, deps)
 
   return { ref, isTruncated }

package/src/lib/drag-announcements.ts

@@ -25,6 +25,25 @@
 // handler 靜默 `return prev`,而螢幕閱讀器仍聽到「已移動」。
 // 2026-09-07 錨:ColumnReorder story 的 columnOrder 漏了 `seller`(畫面 7 欄、state 6 個),
 // 拖到該欄時就是這個情況;已修 story,並由 `scripts/drag-runtime-contract.mjs` 守著。
+//
+// **播報的禮貌等級 = polite,不是 assertive**(2026-09-27,待辦總帳 OE10):
+// dnd-kit 6.3.1 自己的 live region 寫死 `aria-live="assertive"`
+// (`@dnd-kit/accessibility` LiveRegion 的 `ariaLiveType = "assertive"`,`DndContext` 沒有任何 prop 能改),
+// 拖曳中每移到一個落點就打斷螢幕閱讀器正在唸的句子。WAI-ARIA 1.2 對 `assertive` 的定義:
+// "Indicates that updates to the region have the highest priority and should be presented to the user immediately."
+// 並明文 "don't use the assertive value unless the interruption is imperative"
+// (<https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live>,
+// 轉述 <https://www.w3.org/TR/wai-aria-1.2/#aria-live>)。拖曳的落點回饋不是「必須打斷」的事 ——
+// DS 內自己的先例也是這麼判的:TreeView 鍵盤重排的區域是 polite(tree-view.tsx)、Toast 只有 error / warning
+// 才 assertive(toast.tsx)、Alert 同(alert.tsx)。所以 `useDragAccessibility` 把文字寫進**本檔自己的 polite 區域**,
+// 交給 dnd-kit 的那份永遠是空字串(它的 assertive 區域因此一個字都不會唸)。
+// 世界級並非一致(react-beautiful-dnd 的 announcer 是 assertive),這裡依 DS 內既有 canonical(M23)取 polite。
+//
+// **操作說明也一併改成繁中**:dnd-kit 預設的 `screenReaderInstructions.draggable`
+// ("To pick up a draggable item, press the space bar…")會被掛到每一顆把手的 `aria-describedby`,
+// 四個 DndContext 先前全部唸英文。
+
+import * as React from 'react'
 
 /** 拖曳結果。`null` = 沒有真的重排(被守衛擋下 / 使用者放在原位)。 */
 export interface DragOutcome {
@@ -85,3 +104,62 @@ export function createDragAnnouncements({ getOutcome, kind }: DragAnnouncementAr
       `已取消移動${kindOf(active)}『${String(active.id)}』,回到原位`,
   }
 }
+
+/**
+ * dnd-kit 掛在每顆把手 `aria-describedby` 上的操作說明(繁中;取代 dnd-kit 的英文預設)。
+ * 句型沿用 TreeView 既有的鍵盤重排說明(tree-view.tsx `DEFAULT_REORDER_ANNOUNCEMENTS.instructions`)。
+ */
+export const DRAG_SCREEN_READER_INSTRUCTIONS = {
+  draggable: '按空白鍵提起,用方向鍵移動,再按空白鍵放下;按 Esc 取消。', // i18n-allow: DS 預設文案
+}
+
+type DragAnnouncements = ReturnType<typeof createDragAnnouncements>
+
+/**
+ * 四個 `DndContext` 共用的無障礙接線:**繁中播報 + polite 區域 + 繁中操作說明**。
+ *
+ * 用法:
+ * ```tsx
+ * const drag = useDragAccessibility({ getOutcome: () => outcomeRef.current, kind: '列' })
+ * <DndContext sensors={…} onDragEnd={…} accessibility={drag.accessibility}>
+ *   {children}
+ *   {drag.liveRegion}
+ * </DndContext>
+ * ```
+ * `accessibility.announcements` 的四個函式把句子寫進 `liveRegion`(role=status、aria-live=polite)後
+ * **回傳空字串**:dnd-kit 只在回傳值非 null 時寫進它自己的 assertive 區域,空字串寫進去也沒有東西可唸。
+ * `liveRegion` 必須渲染在 DOM 裡(放在 DndContext 內外都可以);沒渲染 = 螢幕閱讀器整趟拖曳無聲,
+ * 靜態閘 `scripts/drag-announcement-invariant.mjs` 會抓。
+ */
+export function useDragAccessibility(args: DragAnnouncementArgs): {
+  accessibility: { announcements: DragAnnouncements; screenReaderInstructions: typeof DRAG_SCREEN_READER_INSTRUCTIONS }
+  liveRegion: React.ReactElement
+} {
+  const [text, setText] = React.useState('')
+  // 呼叫端幾乎都傳 inline 箭頭函式;拿它們當 memo 依賴會每次 render 重建 announcements、DndContext 也跟著拿到新物件。
+  // 所以 announcements 只建一份,讀取時再經 ref 取最新的 getOutcome / kind。
+  const argsRef = React.useRef(args)
+  argsRef.current = args
+  const accessibility = React.useMemo(() => {
+    const inner = createDragAnnouncements({
+      getOutcome: () => argsRef.current.getOutcome(),
+      kind: (active) => { const k = argsRef.current.kind; return typeof k === 'function' ? k(active) : k },
+    })
+    // 同一句連續兩次(例:拖曳中一直停在同一個落點)不重寫 —— 文字沒變,polite 區域本來就不會再唸;
+    // 換成別句再回來則會唸(狀態真的變了)。
+    const speak = (s: string) => { setText(s); return '' }
+    const announcements: DragAnnouncements = {
+      onDragStart: (e) => speak(inner.onDragStart(e)),
+      onDragOver: (e) => speak(inner.onDragOver(e)),
+      onDragEnd: () => speak(inner.onDragEnd()),
+      onDragCancel: (e) => speak(inner.onDragCancel(e)),
+    }
+    return { announcements, screenReaderInstructions: DRAG_SCREEN_READER_INSTRUCTIONS }
+  }, [])
+  const liveRegion = React.createElement(
+    'div',
+    { role: 'status', 'aria-live': 'polite', 'aria-atomic': true, className: 'sr-only', 'data-drag-live-region': '' },
+    text,
+  )
+  return { accessibility, liveRegion }
+}

package/src/lib/roving-list-keyboard.ts

@@ -59,6 +59,13 @@ export interface RovingKeyInput {
   tree?: RovingTreeState
   /** 可以用 Cmd / Ctrl + Shift + 方向鍵重排(只有 draggable 的樹) */
   reorderable?: boolean
+  /**
+   * 這一串有「打字跳位」(只有樹:keyboard-model-canonical.md 五條判準第 2 條「需要 tree 那一整套鍵盤模型(打字前導、…)」)。
+   * 焦點在項目上打一個可見字元 → 回 `typeahead`,由宿主找下一個名字以該字開頭的項目;平面清單(側欄 / 檔案清單)不傳 = 不處理。
+   * 出處:W3C APG Tree View 逐字 "Type a character: focus moves to the next node with a name that starts with the typed character."
+   * (<https://www.w3.org/WAI/ARIA/apg/patterns/treeview/>)。
+   */
+  typeahead?: boolean
   /** 事件已被更外層的捕獲處理程式 preventDefault */
   defaultPrevented: boolean
   metaKey: boolean
@@ -92,6 +99,8 @@ export type RovingKeyAction =
   | { type: 'activate-control' }
   /** 鍵盤重排(樹;修飾鍵層,與導覽鍵正交) */
   | { type: 'reorder'; key: RovingReorderKey }
+  /** 打字跳位(只有 `typeahead: true` 的宿主):焦點在項目上打了一個可見字元,由宿主找下一個名字以它開頭的項目 */
+  | { type: 'typeahead'; char: string }
 
 const REORDER_KEYS: readonly string[] = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
 const isReorderKey = (key: string): key is RovingReorderKey => REORDER_KEYS.includes(key)
@@ -107,6 +116,7 @@ const isReorderKey = (key: string): key is RovingReorderKey => REORDER_KEYS.incl
  * | ← | 樹:展開的先收合、否則回上一層;平面清單:不動 | 上一個;第一個 → 回項目 |
  * | Tab / Shift+Tab | 一下離開這一串 | 同左(X7:先回項目、再由瀏覽器往外走) |
  * | Enter / 空白鍵 | 這一項自己的預設動作 | 那個東西自己的動作 |
+ * | 可見字元(只有 `typeahead` 宿主 = 樹)| 打字跳位:下一個名字以它開頭的項目(W3C APG Tree View) | 不處理(按鈕上打字沒有意義) |
  */
 export function resolveRovingKey(input: RovingKeyInput): RovingKeyAction {
   const { key } = input
@@ -191,6 +201,8 @@ export function resolveRovingKey(input: RovingKeyInput): RovingKeyAction {
     case ' ':
       return { type: 'activate-item' }
     default:
+      // 打字跳位(樹):單一可見字元(空白鍵已在上面 = 選取;Shift+字母 也是一個可見字元,大小寫由宿主比對時折疊)
+      if (input.typeahead && key.length === 1 && key !== ' ') return { type: 'typeahead', char: key }
       return { type: 'none' }
   }
 }
@@ -322,6 +334,8 @@ export interface RovingDomHost {
   onParent?: () => void
   /** 項目本身的預設動作要由宿主執行時才傳(樹 = 選取);不傳 = 項目是原生按鈕,交給瀏覽器 */
   onActivateItem?: () => void
+  /** 打字跳位(只有 `typeahead: true` 的宿主):宿主自己累積字串、找項目、搬焦點 */
+  onTypeahead?: (char: string) => void
 }
 
 /**
@@ -348,6 +362,12 @@ export function applyRovingAction(action: RovingKeyAction, host: RovingDomHost):
       event.preventDefault()
       host.onActivateItem()
       return
+    case 'typeahead':
+      // 判定只在 typeahead 宿主才會回這格;擋預設是為了不讓 Firefox「輸入時搜尋」之類的瀏覽器功能吃掉字元
+      if (!host.onTypeahead) return
+      event.preventDefault()
+      host.onTypeahead(action.char)
+      return
     default:
       break
   }

package/src/lib/utils.ts

@@ -80,7 +80,7 @@ const twMerge = extendTailwindMerge({
       // color.spec.md「Hover 換色配對總則」,待辦總帳 B8)。它們寫的是 background-image,不是底色 ——
       // 不註冊的話 tailwind-merge 把 `bg-*` 一律猜成 bg-color,`cn('bg-surface', 'bg-interaction-hover')`
       // 會把 bg-surface 刪掉,底色整個消失(2026-09-25 以 tailwind-merge 3.5 實測)。登記在 bg-image 才對得上它真正寫的屬性。
-      'bg-image': ['bg-interaction-hover', 'bg-interaction-active'],
+      'bg-image': ['bg-interaction-hover', 'bg-interaction-active', 'bg-interaction-selected', 'bg-interaction-selected-hover', 'bg-interaction-selected-active'],
     },
   },
 })