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

package/src/components/DataTable/data-table-filter-value-picker.tsx

@@ -23,6 +23,7 @@ import {
   DATE_RELATIVE_GROUPS,
   type ValueShape,
 } from './filter-operators'
+import type { DataTableFilterPanelLabels } from './data-table-filter-labels'
 
 // ── FilterValuePicker(value-picker switcher per ValueShape)────────────────
 //
@@ -47,6 +48,8 @@ export interface FilterValuePickerProps {
   disabled?: boolean
   /** 用 column.label 組「{label} 篩選值」(panel 每 row 不顯式 label,a11y 必填) */
   ariaLabel?: string
+  /** Resolved panel labels; placeholders and relative-date labels share one SSOT. */
+  labels: DataTableFilterPanelLabels
   /** Forward 給內部 Field control 的 className(2026-05-04 #2 fix)
    *  避免外層包 wrapper div 破壞 FieldControlGroup CSS variants(rounded radii / margin overlap) */
   className?: string
@@ -59,10 +62,11 @@ export function FilterValuePicker({
   colInfo,
   disabled,
   ariaLabel,
+  labels,
   className,
 }: FilterValuePickerProps) {
   if (!shape || disabled) {
-    return <Input size="sm" value="" onChange={() => {}} placeholder="輸入值…" disabled aria-label={ariaLabel} className={className} />
+    return <Input size="sm" value="" onChange={() => {}} placeholder={labels.valuePlaceholder} disabled aria-label={ariaLabel} className={className} />
   }
 
   switch (shape) {
@@ -75,7 +79,7 @@ export function FilterValuePicker({
           size="sm"
           value={String(value ?? '')}
           onChange={(e) => onChange(e.target.value)}
-          placeholder="輸入值…"
+          placeholder={labels.valuePlaceholder}
           aria-label={ariaLabel}
           className={className}
         />
@@ -87,7 +91,7 @@ export function FilterValuePicker({
           size="sm"
           value={typeof value === 'number' ? value : null}
           onChange={(v) => onChange(v ?? '')}
-          placeholder="輸入數字…"
+          placeholder={labels.numberPlaceholder}
           aria-label={ariaLabel}
           className={className}
         />
@@ -121,17 +125,21 @@ export function FilterValuePicker({
       // 群組分類:Past / Current / Future(對齊 Linear / Notion idiom),走 Select.groups → SelectMenu
       const opts: SelectOption[] = DATE_RELATIVE_OPTIONS.map((o) => ({
         value: o.value,
-        label: o.label,
+        label: labels.relativeDateOptionLabels[o.value] ?? o.label,
         group: o.group,
       }))
+      const groups = DATE_RELATIVE_GROUPS.map((group) => ({
+        key: group.key,
+        label: labels.relativeDateGroupLabels[group.key] ?? group.label,
+      }))
       return (
         <Select
           size="sm"
           options={opts}
-          groups={DATE_RELATIVE_GROUPS as unknown as Array<{ key: string; label: string }>}
+          groups={groups}
           value={String(value ?? '')}
           onChange={(v) => onChange(v)}
-          placeholder="選擇相對日期"
+          placeholder={labels.relativeDatePlaceholder}
           aria-label={ariaLabel}
           className={className}
         />
@@ -149,7 +157,7 @@ export function FilterValuePicker({
           options={opts}
           value={String(value ?? '')}
           onChange={(v) => onChange(v)}
-          placeholder="選擇值"
+          placeholder={labels.singleSelectPlaceholder}
           aria-label={ariaLabel}
           className={className}
         />
@@ -168,7 +176,8 @@ export function FilterValuePicker({
           options={opts}
           value={arr}
           onChange={(v) => onChange(v)}
-          placeholder="選擇值…"
+          placeholder={labels.multiSelectPlaceholder}
+          emptyText={labels.multiSelectEmptyText}
           aria-label={ariaLabel}
           className={className}
         />
@@ -213,6 +222,10 @@ export function FilterValuePicker({
           value={v ?? null}
           people={colInfo?.people ?? []}
           onChange={(next) => onChange(next[0] ?? null)}
+          placeholder={labels.peoplePlaceholder}
+          searchPlaceholder={labels.peopleSearchPlaceholder}
+          searchAriaLabel={labels.peopleSearchAriaLabel}
+          emptyText={labels.peopleEmptyText}
           aria-label={ariaLabel}
           className={className}
         />
@@ -226,6 +239,10 @@ export function FilterValuePicker({
           value={v}
           people={colInfo?.people ?? []}
           onChange={(next) => onChange(next)}
+          placeholder={labels.peoplePlaceholder}
+          searchPlaceholder={labels.peopleSearchPlaceholder}
+          searchAriaLabel={labels.peopleSearchAriaLabel}
+          emptyText={labels.peopleEmptyText}
           aria-label={ariaLabel}
           className={className}
         />

package/src/components/DataTable/data-table.spec.md

@@ -299,6 +299,18 @@ type FilterTreeNested = { mode: 'nested'; conjunction: 'and'|'or'; children: Fil
 
 `FilterGroup['children']` 只能 `FilterCondition[]` — TypeScript 編譯就拒 over-nest,不靠 runtime check。
 
+Panel 額外公開兩個正交控制:
+
+```ts
+interface DataTableFilterPanelProps<TData> {
+  maxConditions?: number
+  labels?: Partial<DataTableFilterPanelLabels>
+}
+```
+
+- **`maxConditions`**:計算 condition leaf 總數。flat = `tree.children.length`;nested = 所有 `group.children.length` 加總。未傳 = unlimited;有限值先 `floor` 並 clamp 至 ≥ 0,非有限非法值(NaN / -Infinity)fail closed 為 0。到 cap 後 initial-mount auto row、flat add、nested group 內 add、root add group、cell prefill 五條路徑全部拒絕;prefill 即使被拒仍呼叫 `onPrefillConsumed`，避免同一 request 重試迴圈。Controlled `value` 已超 cap 時**不裁資料**，只停用後續新增。
+- **`labels`**:跟 `DATA_TABLE_FILTER_PANEL_DEFAULT_LABELS` shallow + nested maps deep merge。涵蓋 panel chrome、Where/And/Or、欄位/operator/value placeholder 與 accessible name、刪除/新增/移除、multi-select 子 picker 的 trigger / empty 文案、PeoplePicker 的 trigger / search / empty 文案，以及 operator / relative-date group / option label maps。Panel dispatch 必須把這些子 picker 文案完整下傳，不能漏回 Combobox / PeoplePicker 的獨立 zh-TW defaults。Operator 未 override 的 key 回退 `OPERATOR_REGISTRY[].label`，registry 仍是預設文字 SSOT。
+
 ### 二、求值策略
 
 採 TanStack `globalFilter` + 自訂 `globalFilterFn(row, _, tree) => evaluateTree(tree, row.original)`,**棄 `columnFilters`**(N 條同 column 不能 OR)。`evaluateTree` SSOT 在 `filter-tree.ts`。**比對精度(2026-07-04 Q6 實作)**:panel 建 condition 時把 `meta.includeTime` 固化為 `condition.datePrecision`('ms' / 'day';`evaluateTree` 簽名不變)— date ops 預設 day 級(本地 `startOfDay` 截斷,AG Grid / MUI X 慣例;`is` 同步走日期比對非字串),`includeTime=true` 才 ms 全精度(避開 Airtable day-precision 漏邊界地雷)。
@@ -325,12 +337,15 @@ ValueShape ↔ DS picker 對照(canonical 2026-05-02):
 
 - 第 1 row conjunction 是靜態 `Where` label(`px-[var(--field-px)]` 對齊下方 Field value 起點 = 12px)
 - field 未選 → operator + value picker disabled;同 group 共用 conjunction(第 2 條 row 是唯一可改的 And/Or Select,改動連動整 group;第 3 條起唯讀顯示當前 conjunction — A6 canonical)
-- **空狀態(兩態,G fix 2026-05-04 v2)**:initial mount 且 value 空 → auto-add 1 條空 condition row(field 未選 → operator / value 自動 disabled;讓 user 直接看到 row shape,不必先點 CTA;useRef gate 只 mount 一次);user 手動刪光 → 只顯 inline `+ 加篩選` CTA、不 re-add(尊重清空意圖,對齊 Notion / Airtable / Linear) <!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
+- **空狀態(兩態,G fix 2026-05-04 v2)**:initial mount 且 value 空且 `maxConditions` 尚有容量 → auto-add 1 條空 condition row(field 未選 → operator / value 自動 disabled;讓 user 直接看到 row shape,不必先點 CTA;useRef gate 只 mount 一次);`maxConditions=0` 不 auto-add。user 手動刪光 → 只顯 inline `+ 加篩選` CTA、不 re-add(尊重清空意圖,對齊 Notion / Airtable / Linear) <!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
 - **CTA 位置**:緊貼最後一條 row(**廢 SurfaceFooter**),條件與「加入」屬同一語境;root-level「加篩選 / 加入篩選器」用 `tertiary`(輕量但有邊界,符合 root-CTA 重量),group 內「加入巢狀篩選」才用 `text`(更輕,inline 於 group 內)
 - **Trash / 刪除**:row 是 form-control row → text Button(non Inline Action,違 item-anatomy canonical)
 - **And/Or Select** `minRows={2}`(2 選項顯式縮 menu 高度);**Where padding** `px-[var(--field-px)]` align Field
 - Header refresh icon:`value !== defaultValue` 顯;ButtonDivider 串接 close X(對齊欄位顯示 chrome canonical)
 - **Relative date 群組**:`DATE_RELATIVE_GROUPS` Past / Current / Future,走 `<Select groups>`
+- **Labels / i18n**:所有 panel-owned 可見文字與 accessible name 經 `labels`；operator 與 relative-date maps 是 nested partial override。Column header / option label 仍由 consumer 的 `ColumnDef` 提供，不由 panel 翻譯。
+- **Readable secondary copy**:`Where` / 第 3 列起 conjunction 與 field placeholder 用 `fg-secondary`，在 `surface` / nested `muted` 背景維持 WCAG AA 正文對比；不可退回只適合弱化 icon / 非正文 metadata 的 `fg-muted`。
+- **Condition cap**:任何 add CTA 到 cap 時保留於原位置但 disabled；group creation 本身帶 1 個 condition，故消耗 1 容量。刪除後立即恢復新增。
 - Trigger button checked(`aria-pressed`):`value` 有 ≥ 1 active condition → on(語意:資料被篩,獨立於 refresh)
 
 ### 五、Filterable column 判定
@@ -401,6 +416,7 @@ tableOptions={{ getSubRows, getRowCanExpand, state: { expanded }, onExpandedChan
 - Click 分權:chevron stopPropagation 不 fire select
 - Leaf placeholder:同層 sibling 有 expandable 時 leaf 也佔位
 - a11y:`aria-expanded` 套在展開 chevron `<button>`(非 row);`aria-level` 尚未實作(row depth 目前僅以 `--tree-indent-*` 縮排視覺呈現)
+- Visual interaction regression:`NestedRowsExpanderHoverState` 的 play 標記實際 chevron button；`visual-assertions.json` interaction 再由 Playwright 真 pointer hover 並 fail-closed 驗證唯一 target / trusted pointer hit，禁止只 dispatch synthetic hover event 假綠。
 - Selection cascade:default OFF;`selectionCascade` opt-in 待 v2
 
 ### Drag visual SSOT(2026-05-06 v14.5)
@@ -484,6 +500,7 @@ DataTable 是 composite multi-section 元件,**不套 SizeMatrix / StateBehavior
 **ARIA / Pattern**:DataTable 是 composite tabular widget,**對齊 W3C ARIA Authoring Practices Guide `grid` pattern**(非 `radio-group`——之前 boilerplate 從 RadioGroup spec 誤抄;DataTable 是 multi-row / multi-column composite,not single-choice selection group,a11y semantics 完全不同(grid vs radio-group)<!-- @benchmark-verified: 2026-05-18 D1 rewrite -->):
 
 - Root 套 `role="table"`(currently)或 `role="grid"`(future tier,when cell editing 普及)— 詳 [WAI-ARIA APG: grid](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) + [MDN grid role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role)
+- Center body 捲動層套 `role="rowgroup"`(非空表):唯讀模式該層帶 `tabIndex=0` + `aria-label`(scrollable-region-focusable),**focusable 的無 role 中間層會被 axe aria-required-children 判為 table 的不合法 owned child**(2026-07-29 WM beta.95 錨例;與 Tabs 2026-07-18 決策1 同型)。rowgroup = 合法 table 子代 + 可具名([WAI-ARIA 1.2 §5.2.8.4 Name from author](https://www.w3.org/TR/wai-aria-1.2/#namecalculation))。空表例外:Empty 塊非 row → 不掛 rowgroup、亦無 overflow 故一併省 tabIndex/名稱
 - Column headers:以 `<div role="columnheader">` 顯式標記(本元件用 div + ARIA role,非語義 `<table>` — 見定位段;不渲染 `<th>` / `scope`)
 - Row headers:目前無對應(平面 row,無 row header 語意;未渲染 `role="rowheader"`)
 - Sortable column:`aria-sort="none" | "ascending" | "descending"` on 該 column header `<div role="columnheader">`

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

@@ -2,12 +2,20 @@
 // same-row-mixed-allow: file 含 toolbar Button iconOnly + row ItemInlineActionButton,但兩者在不同 row(toolbar 跟 panel row 分離)
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { createColumnHelper, type ColumnDef } from '@tanstack/react-table'
 import { Pencil, Trash2, MoreVertical, Search, Filter, Eye, Download, Plus, ArrowUpDown } from 'lucide-react'
 import { DataTable, type DataTableSelection } from './data-table'
 import { DataTableSortManager } from './data-table-sort-manager'
 import { DataTableColumnVisibilityPanel } from './data-table-column-visibility-panel'
-import { DataTableFilterPanel, evaluateTree, createEmptyFilterTree, isFilterTreeActive, type FilterTree } from './data-table-filter-panel'
+import {
+  DataTableFilterPanel,
+  evaluateTree,
+  createEmptyFilterTree,
+  isFilterTreeActive,
+  type DataTableFilterPanelLabels,
+  type FilterTree,
+} from './data-table-filter-panel'
 import { getFilteredRowModel, type SortingState } from '@tanstack/react-table'
 import { Button } from '@/design-system/components/Button/button'
 import { Empty } from '@/design-system/components/Empty/empty'
@@ -820,25 +828,23 @@ const NESTED_DATA: TaskRow[] = [
   },
 ]
 
+const NESTED_STATUS_OPTIONS = [
+  { value: 'Not started', label: 'Not started' },
+  { value: 'In progress', label: 'In progress' },
+  { value: 'Blocked', label: 'Blocked' },
+  { value: 'Done', label: 'Done' },
+]
+const nestedTaskColumn = createColumnHelper<TaskRow>()
+const NESTED_COLUMNS = [
+  nestedTaskColumn.accessor('task', { header: '任務', meta: { type: 'string', width: 360 } }),
+  nestedTaskColumn.accessor('owner', { header: '負責人', meta: { type: 'string', width: 160 } }),
+  nestedTaskColumn.accessor('status', { header: '狀態', meta: { type: 'select', options: NESTED_STATUS_OPTIONS, width: 140 } }),
+]
+
 export const NestedRows: Story = {
   name: '巢狀列（樹狀表格）',
   render: () => {
     const [expanded, setExpanded] = React.useState<Record<string, boolean>>({ 'task-1': true, 'task-1-1': true })
-    const STATUS_OPTIONS = [
-      { value: 'Not started', label: 'Not started' },
-      { value: 'In progress', label: 'In progress' },
-      { value: 'Blocked', label: 'Blocked' },
-      { value: 'Done', label: 'Done' },
-    ]
-    const taskCol = createColumnHelper<TaskRow>()
-    const taskColumns = React.useMemo(
-      () => [
-        taskCol.accessor('task', { header: '任務', meta: { type: 'string', width: 360 } }),
-        taskCol.accessor('owner', { header: '負責人', meta: { type: 'string', width: 160 } }),
-        taskCol.accessor('status', { header: '狀態', meta: { type: 'select', options: STATUS_OPTIONS, width: 140 } }),
-      ],
-      []
-    )
     return (
       <div>
         {/* 實作:forward TanStack getSubRows;縮排共用 --tree-indent-{sm,md,lg} token(跨 TreeView
@@ -848,7 +854,7 @@ export const NestedRows: Story = {
           點三角形只切換展開,不會順帶選取整列。
         </p>
         <DataTable
-          columns={taskColumns}
+          columns={NESTED_COLUMNS}
           data={NESTED_DATA}
           height="auto"
           getRowId={(row) => row.id}
@@ -865,6 +871,42 @@ export const NestedRows: Story = {
   },
 }
 
+export const NestedRowsExpanderHoverState: Story = {
+  name: '巢狀列展開鈕：滑鼠移過狀態',
+  tags: ['!autodocs'],
+  render: () => {
+    const [expanded, setExpanded] = React.useState<Record<string, boolean>>({})
+    return (
+      <div className="max-w-3xl p-6">
+        <p className="text-caption text-fg-secondary mb-3">
+          真實滑鼠停在第一列的展開鈕，驗證弱化圖示只前進一階到次要文字色。
+        </p>
+        <DataTable
+          columns={NESTED_COLUMNS}
+          data={NESTED_DATA}
+          height="auto"
+          getRowId={(row) => row.id}
+          tableOptions={{
+            getSubRows: (row: TaskRow) => row.children,
+            getRowCanExpand: (row) => Boolean(row.original.children?.length),
+            state: { expanded },
+            onExpandedChange: setExpanded as any,
+          }}
+        />
+      </div>
+    )
+  },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const expander = canvas.getAllByRole('button', { name: '展開' })[0]
+    expect(expander).toHaveAttribute('aria-expanded', 'false')
+    // play 只做 deterministic target selection；真 hover 完全由 visual-audit
+    // 的 Playwright locator.hover() 擁有，避免 synthetic userEvent 假綠。
+    expander.dataset.visualHoverTarget = 'true'
+    expect(canvasElement.querySelectorAll('[data-visual-hover-target]')).toHaveLength(1)
+  },
+}
+
 /* ── 巢狀 row × 拖曳重排(tree-table drag)──
    Tree drag 設計準則(2026-05-06 v14.7,對齊 spec.md「Cross-parent drop 禁止」)
    - **Top-level rows**:有 drag handle(absolute pinned to row left edge),可拖重排
@@ -876,21 +918,6 @@ export const NestedRowsWithDrag: Story = {
   render: () => {
     const [expanded, setExpanded] = React.useState<Record<string, boolean>>({ 'task-1': true })
     const [list, setList] = React.useState<TaskRow[]>(NESTED_DATA)
-    const STATUS_OPTIONS = [
-      { value: 'Not started', label: 'Not started' },
-      { value: 'In progress', label: 'In progress' },
-      { value: 'Blocked', label: 'Blocked' },
-      { value: 'Done', label: 'Done' },
-    ]
-    const taskCol = createColumnHelper<TaskRow>()
-    const taskColumns = React.useMemo(
-      () => [
-        taskCol.accessor('task', { header: '任務', meta: { type: 'string', width: 360 } }),
-        taskCol.accessor('owner', { header: '負責人', meta: { type: 'string', width: 160 } }),
-        taskCol.accessor('status', { header: '狀態', meta: { type: 'select', options: STATUS_OPTIONS, width: 140 } }),
-      ],
-      []
-    )
     const handleReorder = (sourceId: string, targetId: string, position: 'before' | 'after') => {
       setList((prev) => {
         // top-level reorder only(sub-rows 不可拖)
@@ -913,7 +940,7 @@ export const NestedRowsWithDrag: Story = {
           顯 invalid signal。Drop indicator 水平 2px primary line — 主檔對齊 TreeView。
         </p>
         <DataTable
-          columns={taskColumns}
+          columns={NESTED_COLUMNS}
           data={list}
           height="auto"
           getRowId={(row) => row.id}
@@ -1272,6 +1299,114 @@ const FILTER_COLUMNS = [
   col.accessor('updatedAt', { header: '更新時間', meta: { type: 'date', filterable: true, includeTime: true } }),
 ] as const
 
+const FILTER_COLUMNS_ENGLISH = [
+  col.accessor('name', { header: 'Name', meta: { type: 'string', filterable: true } }),
+  col.accessor('category', { header: 'Category', meta: {
+    type: 'select',
+    filterable: true,
+    options: [
+      { value: 'Electronics', label: 'Electronics' },
+      { value: 'Furniture', label: 'Furniture' },
+    ],
+  } }),
+  col.accessor('seller', { header: 'Owner', meta: {
+    type: 'person',
+    filterable: true,
+    people: SELLERS,
+  } }),
+  col.accessor('updatedAt', { header: 'Updated at', meta: { type: 'date', filterable: true } }),
+] as const
+
+const FILTER_CHILD_PICKER_COLUMNS = [
+  col.accessor('category', { header: 'Category', meta: {
+    type: 'select',
+    filterable: true,
+    options: [],
+  } }),
+  col.accessor('seller', { header: 'Owner', meta: {
+    type: 'person',
+    filterable: true,
+    people: [],
+  } }),
+] as const
+
+const FILTER_PANEL_ENGLISH_LABELS: Partial<DataTableFilterPanelLabels> = {
+  title: 'Filters',
+  resetToDefault: 'Reset to default',
+  close: 'Close',
+  where: 'Where',
+  and: 'And',
+  or: 'Or',
+  conjunctionAriaLabel: 'Conjunction for this group',
+  fieldPlaceholder: 'Choose field',
+  fieldAriaLabel: 'Filter field',
+  operatorPlaceholder: 'Operator',
+  operatorAriaLabel: 'Filter operator',
+  valuePlaceholder: 'Enter value…',
+  numberPlaceholder: 'Enter number…',
+  relativeDatePlaceholder: 'Choose relative date',
+  singleSelectPlaceholder: 'Choose value',
+  multiSelectPlaceholder: 'Choose values…',
+  multiSelectEmptyText: 'No matching values',
+  peoplePlaceholder: 'Choose people',
+  peopleSearchPlaceholder: 'Search people…',
+  peopleSearchAriaLabel: 'Search filter people',
+  peopleEmptyText: 'No matching people',
+  filterValueAriaLabel: (columnLabel) => columnLabel ? `${columnLabel} filter value` : 'Filter value',
+  deleteCondition: 'Delete condition',
+  addFilter: 'Add filter',
+  addGroup: 'Add filter group',
+  addNestedFilter: 'Add nested filter',
+  removeEmptyGroup: 'Remove empty group',
+  operatorLabels: {
+    contains: 'contains',
+    does_not_contain: 'does not contain',
+    is: 'is',
+    is_not: 'is not',
+    starts_with: 'starts with',
+    ends_with: 'ends with',
+    equals: 'equals',
+    not_equals: 'does not equal',
+    gt: 'is greater than',
+    gte: 'is greater than or equal to',
+    lt: 'is less than',
+    lte: 'is less than or equal to',
+    is_before: 'is before',
+    is_after: 'is after',
+    is_on_or_before: 'is on or before',
+    is_on_or_after: 'is on or after',
+    is_between: 'is between',
+    is_relative: 'is relative',
+    has_any_of: 'has any of',
+    has_all_of: 'has all of',
+    has_none_of: 'has none of',
+    is_set: 'is set',
+    is_not_set: 'is not set',
+    is_true: 'is checked',
+    is_false: 'is not checked',
+  },
+  relativeDateGroupLabels: {
+    past: 'Past',
+    current: 'Current',
+    future: 'Future',
+  },
+  relativeDateOptionLabels: {
+    past_30_days: 'Past 30 days',
+    past_7_days: 'Past 7 days',
+    last_month: 'Last month',
+    last_week: 'Last week',
+    yesterday: 'Yesterday',
+    today: 'Today',
+    this_week: 'This week',
+    this_month: 'This month',
+    tomorrow: 'Tomorrow',
+    next_week: 'Next week',
+    next_month: 'Next month',
+    next_7_days: 'Next 7 days',
+    next_30_days: 'Next 30 days',
+  },
+}
+
 /* ── 進階篩選 — 空狀態 ── */
 export const FilterPanelEmpty: Story = {
   name: '進階篩選 — 空狀態',
@@ -1442,6 +1577,184 @@ export const FilterPanelLongTagOverflow: Story = {
   },
 }
 
+const FilterPanelLabelsAndLimitHarness = () => {
+  const [childPickerLabels, setChildPickerLabels] = React.useState<FilterTree>({
+    mode: 'flat',
+    conjunction: 'and',
+    children: [
+      { kind: 'cond', id: 'labels-category', field: 'category', op: 'is', value: [] },
+      { kind: 'cond', id: 'labels-owner', field: 'seller', op: 'is', value: [] },
+    ],
+  })
+  const [flat, setFlat] = React.useState<FilterTree>({
+    mode: 'flat',
+    conjunction: 'and',
+    children: [
+      { kind: 'cond', id: 'flat-1', field: 'updatedAt', op: 'is_relative', value: 'past_7_days' },
+    ],
+  })
+  const [nestedCondition, setNestedCondition] = React.useState<FilterTree>({
+    mode: 'nested',
+    conjunction: 'and',
+    children: [{
+      kind: 'group',
+      id: 'nested-condition-group',
+      conjunction: 'and',
+      children: [{ kind: 'cond', id: 'nested-condition-1', field: 'name', op: 'contains', value: 'phone' }],
+    }],
+  })
+  const [nestedGroup, setNestedGroup] = React.useState<FilterTree>({
+    mode: 'nested',
+    conjunction: 'and',
+    children: [{
+      kind: 'group',
+      id: 'nested-group-1',
+      conjunction: 'and',
+      children: [{ kind: 'cond', id: 'nested-group-cond-1', field: 'name', op: 'contains', value: 'phone' }],
+    }],
+  })
+  const [mountCapZero, setMountCapZero] = React.useState<FilterTree>(() => createEmptyFilterTree('flat'))
+  const [prefillValue, setPrefillValue] = React.useState<FilterTree>({
+    mode: 'flat',
+    conjunction: 'and',
+    children: [{ kind: 'cond', id: 'prefill-1', field: 'name', op: 'contains', value: 'phone' }],
+  })
+  const [prefilledColumnId, setPrefilledColumnId] = React.useState<string | undefined>('category')
+  const [prefillConsumed, setPrefillConsumed] = React.useState(false)
+
+  return (
+    <div className="flex flex-col gap-10">
+      <div data-testid="filter-label-child-pickers">
+        <h3 className="text-body font-medium mb-2">English child-picker labels</h3>
+        <DataTableFilterPanel
+          columns={[...FILTER_CHILD_PICKER_COLUMNS]}
+          value={childPickerLabels}
+          onChange={setChildPickerLabels}
+          maxConditions={2}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+
+      <div data-testid="filter-limit-flat">
+        <h3 className="text-body font-medium mb-2">English labels + flat cap</h3>
+        <DataTableFilterPanel
+          columns={[...FILTER_COLUMNS_ENGLISH]}
+          value={flat}
+          onChange={setFlat}
+          maxConditions={2}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+
+      <div data-testid="filter-limit-nested-condition">
+        <h3 className="text-body font-medium mb-2">Nested condition cap</h3>
+        <DataTableFilterPanel
+          columns={[...FILTER_COLUMNS_ENGLISH]}
+          value={nestedCondition}
+          onChange={setNestedCondition}
+          maxConditions={2}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+
+      <div data-testid="filter-limit-nested-group">
+        <h3 className="text-body font-medium mb-2">Nested group cap</h3>
+        <DataTableFilterPanel
+          columns={[...FILTER_COLUMNS_ENGLISH]}
+          value={nestedGroup}
+          onChange={setNestedGroup}
+          maxConditions={2}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+
+      <div data-testid="filter-limit-mount-zero">
+        <h3 className="text-body font-medium mb-2">Initial mount at zero capacity</h3>
+        <DataTableFilterPanel
+          columns={[...FILTER_COLUMNS_ENGLISH]}
+          value={mountCapZero}
+          onChange={setMountCapZero}
+          maxConditions={0}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+
+      <div data-testid="filter-limit-prefill">
+        <h3 className="text-body font-medium mb-2">Prefill at capacity</h3>
+        <p data-testid="prefill-consumed" className="text-caption text-fg-secondary mb-2">
+          Prefill consumed: {prefillConsumed ? 'yes' : 'no'}
+        </p>
+        <DataTableFilterPanel
+          columns={[...FILTER_COLUMNS_ENGLISH]}
+          value={prefillValue}
+          onChange={setPrefillValue}
+          prefilledColumnId={prefilledColumnId}
+          onPrefillConsumed={() => {
+            setPrefilledColumnId(undefined)
+            setPrefillConsumed(true)
+          }}
+          maxConditions={1}
+          labels={FILTER_PANEL_ENGLISH_LABELS}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const FilterPanelLabelsAndLimit: Story = {
+  name: '進階篩選 — 標籤與條件上限',
+  render: () => <FilterPanelLabelsAndLimitHarness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const page = within(canvasElement.ownerDocument.body)
+
+    const childPickers = within(canvas.getByTestId('filter-label-child-pickers'))
+    const categoryValue = childPickers.getByRole('combobox', { name: 'Category filter value' })
+    await expect(categoryValue).toHaveTextContent('Choose values…')
+    await userEvent.click(categoryValue)
+    await expect(page.getAllByText('No matching values')).toHaveLength(2)
+    await userEvent.keyboard('{Escape}')
+
+    await userEvent.click(childPickers.getByRole('combobox', { name: 'Owner filter value' }))
+    const peopleSearch = await page.findByPlaceholderText('Search people…')
+    await expect(peopleSearch).toHaveAccessibleName('Search filter people')
+    await expect(page.getAllByText('No matching people')).toHaveLength(2)
+    await userEvent.keyboard('{Escape}')
+
+    const flat = within(canvas.getByTestId('filter-limit-flat'))
+    await expect(flat.getByText('Filters')).toBeInTheDocument()
+    await expect(flat.getByText('Where')).toBeInTheDocument()
+    await expect(flat.getByText('is relative')).toBeInTheDocument()
+    await expect(flat.getByText('Past 7 days')).toBeInTheDocument()
+    await userEvent.click(flat.getByRole('button', { name: 'Add filter' }))
+    await waitFor(() => expect(flat.getAllByLabelText('Filter field')).toHaveLength(2))
+    await expect(flat.getByRole('button', { name: 'Add filter' })).toBeDisabled()
+
+    const nestedCondition = within(canvas.getByTestId('filter-limit-nested-condition'))
+    await userEvent.click(nestedCondition.getByRole('button', { name: 'Add nested filter' }))
+    await waitFor(() => expect(nestedCondition.getAllByLabelText('Filter field')).toHaveLength(2))
+    await expect(nestedCondition.getByRole('button', { name: 'Add nested filter' })).toBeDisabled()
+    await expect(nestedCondition.getByRole('button', { name: 'Add filter group' })).toBeDisabled()
+
+    const nestedGroup = within(canvas.getByTestId('filter-limit-nested-group'))
+    await userEvent.click(nestedGroup.getByRole('button', { name: 'Add filter group' }))
+    await waitFor(() => expect(nestedGroup.getAllByLabelText('Filter field')).toHaveLength(2))
+    for (const button of nestedGroup.getAllByRole('button', { name: 'Add nested filter' })) {
+      await expect(button).toBeDisabled()
+    }
+    await expect(nestedGroup.getByRole('button', { name: 'Add filter group' })).toBeDisabled()
+
+    const mountCapZero = within(canvas.getByTestId('filter-limit-mount-zero'))
+    await expect(mountCapZero.queryAllByLabelText('Filter field')).toHaveLength(0)
+    await expect(mountCapZero.getByRole('button', { name: 'Add filter' })).toBeDisabled()
+
+    const prefill = within(canvas.getByTestId('filter-limit-prefill'))
+    await waitFor(() => expect(prefill.getByTestId('prefill-consumed')).toHaveTextContent('yes'))
+    await expect(prefill.getAllByLabelText('Filter field')).toHaveLength(1)
+    await expect(prefill.getByRole('button', { name: 'Add filter' })).toBeDisabled()
+  },
+}
+
 /* ── 列拖曳重排(Jira-style + 3-panel pinned columns)──────────────────────
    enableRowDrag + onRowReorder 整合範例(v3 Jira 設計準則):
    - handle 浮在 row 左緣(fixed-position;Button tertiary iconOnly xs = elevated chip)

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

@@ -1822,7 +1822,7 @@ function DataTableInner<TData>(
                       type="button"
                       aria-label={isExpanded ? '收合' : '展開'}
                       aria-expanded={isExpanded}
-                      className="inline-flex items-center justify-center shrink-0 w-4 h-4 mr-2 text-fg-muted hover:text-foreground rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-transform"
+                      className="inline-flex items-center justify-center shrink-0 w-4 h-4 mr-2 text-fg-muted hover:text-fg-secondary rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-transform"
                       style={{ transform: isExpanded ? 'rotate(90deg)' : undefined }}
                       onClick={(e) => { e.stopPropagation(); toggleExpand?.() }}
                     >
@@ -1867,7 +1867,7 @@ function DataTableInner<TData>(
                     type="button"
                     aria-label={isExpanded ? '收合' : '展開'}
                     aria-expanded={isExpanded}
-                    className="inline-flex items-center justify-center shrink-0 w-4 h-4 mr-2 text-fg-muted hover:text-foreground rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-transform"
+                    className="inline-flex items-center justify-center shrink-0 w-4 h-4 mr-2 text-fg-muted hover:text-fg-secondary rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-transform"
                     style={{ transform: isExpanded ? 'rotate(90deg)' : undefined }}
                     onClick={(e) => { e.stopPropagation(); toggleExpand?.() }}
                   >
@@ -2704,8 +2704,15 @@ function DataTableInner<TData>(
           // (非 enabled / spreadsheet)outer table 也不 focusable → 這裡補 tabIndex=0 + 具名 +
           // inset focus ring,讓鍵盤可聚焦後方向鍵捲動;互動模式已由 outer table keyboard handler
           // + focusable cells 覆蓋,不重複加 tab stop。
-          tabIndex={enabled || spreadsheetMode ? undefined : 0}
-          aria-label={enabled || spreadsheetMode ? undefined : '表格內容,可捲動'}
+          // **role="rowgroup" 必要**(2026-07-29 WM beta.95 axe 錨例):focusable 的無 role
+          // 中間層會被 axe aria-required-children 視為 role="table" 的不合法 owned child,
+          // 打斷 table→row ownership(修 scrollable-region-focusable 反引爆 required-children,
+          // 與 Tabs 2026-07-18 決策1 同型)。rowgroup = W3C ARIA 1.2 合法 table 子代 + 可具名
+          // (Name from author §5.2.8.4)+ 容納 rows,兩規則唯一同時滿足解。
+          // 空表例外:Empty 塊非 row → 不掛 rowgroup;空表無 overflow 也無需 tabIndex/名稱。
+          role={isEmpty ? undefined : 'rowgroup'}
+          tabIndex={enabled || spreadsheetMode || isEmpty ? undefined : 0}
+          aria-label={enabled || spreadsheetMode || isEmpty ? undefined : '表格內容,可捲動'}
           // overflow-x/y: auto — 沒 overflow 就不顯 bar。wrapper minWidth 仍 trigger H 真 overflow。
           // **不**用 scrollbar-gutter: stable — 那會永遠保留 V 軸 15px 空間,
           // content fit 時看起來像「永遠有 V 捲軸」(Image #5 bug)。

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

@@ -210,7 +210,7 @@
 | 4 | `date` 擴 `is_on_or_before` / `is_on_or_after` | ✅ 採用(CU gap) |
 | 5 | `multiSelect` 走 5 ops(含 `has_all_of`)| ✅ |
 | 6 | `is_exactly` 全砍 | ✅ |
-| 7 | label 暫硬編繁中 + 留 i18n hook | ✅ |
+| 7 | registry 繁中 label 作預設；panel 以 `labels.operatorLabels` / relative-date maps 提供 consumer i18n override | ✅ 2026-07-31 落地 |
 | 8 | op 命名 snake_case | ✅ |
 | 9 | 統一 `is_set` / `is_not_set`(不混 `is_empty`) | ✅ |
 
@@ -253,7 +253,7 @@
 - [x] InputSurface 議題消失(配合砍 `number.between`)
 - [x] FilterTree data model + DataTable 耦合 — 已落地 `filter-tree.ts` + `data-table-filter-panel.tsx`(原規劃 `advanced-filter.draft.md` 未另立檔,內容即本 spec + code)
 - [x] datetime spec — 併入本 spec v3(原規劃 `datetime-picker.draft.md` 不需要,無新元件)
-- [x] i18n 策略 — 暫硬編繁中,留 i18n hook(對齊 DS 既有元件慣例)
+- [x] i18n 策略 — registry 繁中 label 保持預設 SSOT；`DataTableFilterPanel labels` 可 deep-partial override operator、relative-date group / option 與全部 panel chrome(2026-07-31)
 - [→] Phase B.5 lock canonical via `/ensure-canonical`(spec 全收斂後)
 
 ## Sources(M8 benchmark)