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

package/src/components/Steps/steps.stories.tsx

@@ -1,7 +1,6 @@
 // @story-trait-rationale: AllSizes retired 2026-05-15(anatomy SizeMatrix own size matrix);
 //   AllStates retired 2026-05-17 per audit Dim 46(anatomy StateBehavior own state matrix,
 //   manual trait grid 違 story-rules.md 三層定位「展示層 = 典型使用情境,不是 trait grid」)。
-//   Disabled state 由 FocusRingCombinations 內部展示(disabled + ring combo 正交)。
 import * as React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Check } from 'lucide-react'
@@ -72,7 +71,7 @@ export const Default: Story = {
           </p>
           <div>
             <Button variant="secondary" onClick={reset}>
-              重新開始 demo
+              再填一份申請
             </Button>
           </div>
         </div>
@@ -146,60 +145,9 @@ export const Default: Story = {
 //   AllSizes retired 2026-05-15(anatomy SizeMatrix own);AllStates retired 2026-05-17
 //   per Dim 46 audit(anatomy StateBehavior 已 own state matrix,manual trait grid 違反
 //   story-rules.md 三層定位「展示層應為典型使用情境,不是 trait grid」)。
-
-// ── Focus marker 的正交示範 ─────────────────────────────────────────────
-// Ring 跟 content state 正交:任何 state + focused 都能組合
-
-export const FocusRingCombinations: Story = {
-  name: '聚焦環正交示範',
-  render: () => {
-    const [value, setValue] = React.useState('step-2')
-    return (
-      <div className="flex flex-col gap-4 w-[420px]">
-        <p className="text-caption text-fg-secondary">
-          點任何 step 看看 ring 如何獨立於底色——ring 表達「使用者在這步」,底色
-          表達「這步的狀態」。兩者正交。
-        </p>
-        <div className="flex gap-2">
-          {['step-1', 'step-2', 'step-3', 'step-4'].map(v => (
-            <Button
-              key={v}
-              size="sm"
-              variant={value === v ? 'primary' : 'secondary'}
-              onClick={() => setValue(v)}
-            >
-              value={v}
-            </Button>
-          ))}
-        </div>
-        <Steps
-          value={value}
-          onValueChange={setValue}
-          completedValues={['step-1', 'step-3']}
-          errorValues={['step-4']}
-          linear={false}
-        >
-          <StepItem value="step-1">
-            <StepLabel>Completed</StepLabel>
-            <StepDescription>藍底 ✓ + ring(若 focused)</StepDescription>
-          </StepItem>
-          <StepItem value="step-2">
-            <StepLabel>Current</StepLabel>
-            <StepDescription>中性底(bg-secondary)數字 + ring(若 focused)</StepDescription>
-          </StepItem>
-          <StepItem value="step-3">
-            <StepLabel>Completed</StepLabel>
-            <StepDescription>藍底 ✓ + ring(若 focused)</StepDescription>
-          </StepItem>
-          <StepItem value="step-4">
-            <StepLabel>Error</StepLabel>
-            <StepDescription>紅底 ✕ + 紅 ring(若 focused)</StepDescription>
-          </StepItem>
-        </Steps>
-      </div>
-    )
-  },
-}
+//   FocusRingCombinations retired 2026-07-17 per Dim 24 audit — ring⊥state 正交規則已由
+//   principles「規則:環是聚焦標記,不是選取」live own(completed+ring / error+ring 兩例);
+//   互動式聚焦移動於「預設」「非線性」既有 clickable steps 已可見,展示層不重複原則 grid。
 
 // ── Non-linear ──────────────────────────────────────────────────────────
 

package/src/components/Steps/steps.tsx

@@ -175,6 +175,11 @@ export interface StepsProps
   orientation?: StepsOrientation
   expansion?: StepsExpansion
   defaultExpanded?: 'all' | 'none' | string[]
+  /** Controlled 展開集合(2026-07-18 user 拍板補完整雙向控制,對齊 TreeView expandedIds + Radix/MUI/Ant Accordion)。
+   *  傳入則由 consumer 掌控展開狀態(與 `defaultExpanded` 二選一);toggle 時經 `onExpandedChange` 回寫。 */
+  expanded?: string[]
+  /** Controlled 展開變更回呼(展開/收合 step 時觸發,回傳新的展開值陣列)。 */
+  onExpandedChange?: (expanded: string[]) => void
 }
 
 // code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding
@@ -191,6 +196,8 @@ const Steps = React.forwardRef<HTMLOListElement, StepsProps>(
       orientation = 'vertical',
       expansion = 'follow-active',
       defaultExpanded,
+      expanded: expandedProp,
+      onExpandedChange,
       className,
       children,
       ...props
@@ -229,18 +236,30 @@ const Steps = React.forwardRef<HTMLOListElement, StepsProps>(
       [childValues, completedValues],
     )
 
-    const [expandedSet, setExpandedSet] = React.useState<Set<string>>(() =>
+    // Controlled(expandedProp 傳入)/ uncontrolled(defaultExpanded 初值)dual-mode(2026-07-18)。
+    const isExpandedControlled = expandedProp !== undefined
+    const [expandedInternal, setExpandedInternal] = React.useState<Set<string>>(() =>
       normalizeExpanded(defaultExpanded, childValues),
     )
+    const expandedSet = isExpandedControlled ? new Set(expandedProp) : expandedInternal
 
     const toggleExpanded = React.useCallback((itemValue: string) => {
-      setExpandedSet(prev => {
+      const compute = (prev: Set<string>) => {
         const next = new Set(prev)
         if (next.has(itemValue)) next.delete(itemValue)
         else next.add(itemValue)
         return next
-      })
-    }, [])
+      }
+      if (isExpandedControlled) {
+        onExpandedChange?.([...compute(new Set(expandedProp))])
+      } else {
+        setExpandedInternal(prev => {
+          const next = compute(prev)
+          onExpandedChange?.([...next])
+          return next
+        })
+      }
+    }, [isExpandedControlled, expandedProp, onExpandedChange])
 
     const stepCount = React.Children.count(children)
 
@@ -304,13 +323,15 @@ Steps.displayName = 'Steps'
 
 // ── StepItem ──────────────────────────────────────────────────────────────
 
+// Steps 內部 cloneElement 注入用的私有 props — 刻意「不」併入公開 StepItemProps:
+// dunder 內部欄位不進 root API(consumer 無合法理由手動控制末項 connector / 間距),
+// 也就不會被 barrel 匯出成公開型別。StepItem render body 以 intersection cast 內部讀取。
 interface StepItemInjectedProps {
   __isLast?: boolean
 }
 
 export interface StepItemProps
-  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>,
-    StepItemInjectedProps {
+  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'> {
   value: string
   state?: 'error'
   disabled?: boolean
@@ -336,7 +357,10 @@ const stepItemVariants = cva('group/step-item outline-none', {
 
 // code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding
 const StepItem = React.forwardRef<HTMLLIElement, StepItemProps>(
-  ({ value, state: stateOverride, disabled = false, children, className, __isLast = false, ...props }, ref) => {
+  ({ value, state: stateOverride, disabled = false, children, className, ...restProps }, ref) => {
+    // __isLast 由 Steps root 經 cloneElement 私下注入(見 StepItemInjectedProps);以 intersection
+    // cast 從 rest 讀出後解構掉,確保 dunder 不落到 DOM li,也不必污染公開 StepItemProps。
+    const { __isLast = false, ...props } = restProps as typeof restProps & StepItemInjectedProps
     const steps = useStepsContext()
     const state = computeState(
       value,

package/src/components/Switch/switch.anatomy.stories.tsx

@@ -38,7 +38,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(默認 inherit Field context 或 edit);display 渲純展示 勾/叉 icon,語意由 context 提供'],
+                ['mode', "'edit' | 'view' | 'readonly' | 'disabled'", "'edit'", 'Field mode(默認 inherit Field context 或 edit);view 渲純展示 勾/叉 icon,語意由 context 提供'],
                 ['size', "'sm' | 'md' | 'lg'", "'md'", '對齊 field size tier(sm 跟 md 視覺相同)'],
                 ['checked / defaultChecked', 'boolean', '—', 'ON/OFF 狀態(受控 / 非受控)'],
                 ['onCheckedChange', '(checked: boolean) => void', '—', '切換 callback'],
@@ -77,8 +77,8 @@ export const Inspector: InspectorStory = {
   argTypes: {
     mode: {
       control: 'radio',
-      options: ['edit', 'display', 'readonly', 'disabled'],
-      description: 'Field mode;display 渲純展示 勾/叉 icon(語意由 context 提供)',
+      options: ['edit', 'view', 'readonly', 'disabled'],
+      description: 'Field mode;view 渲純展示 勾/叉 icon(語意由 context 提供)',
     },
     size: {
       control: 'radio',

package/src/components/Switch/switch.principles.stories.tsx

@@ -116,7 +116,7 @@ export const UsageGuidance: Story = {
 
       <Rule
         title="使用場景對照"
-        note="Readonly(standalone settings list):值重要、視覺不能弱化。表單 readonly = Field 內灰框 + 勾/叉 icon(2026-06-12 拍板);DataTable cell 非編輯態 = mode display。Disabled:外部條件造成暫時不可用(方案限制、權限不足)——傳達「現在用不到」"
+        note="Readonly(standalone settings list):值重要、視覺不能弱化。表單 readonly = Field 內灰框 + 勾/叉 icon(2026-06-12 拍板);DataTable cell 非編輯態 = mode view。Disabled:外部條件造成暫時不可用(方案限制、權限不足)——傳達「現在用不到」"
       >
         <Label>兩者都不可切換、不在 tab order 內(standalone),機制不同:readonly 用 `pointer-events-none`(視覺正常);disabled 走 native `disabled` + `cursor-not-allowed`(降透明度)。Field 內 readonly 灰框則可聚焦(tabIndex=0)</Label>
       </Rule>

package/src/components/Switch/switch.spec.md

@@ -104,7 +104,7 @@ sm 和 md 視覺相同（純粹命名 mapping，讓消費者可直接傳同一
 | ON | `bg-primary` | 白色 + 2px primary border | primary check |
 | Disabled | 套 `opacity-disabled`（整體透明度降級） | 同 ON/OFF | 同 ON/OFF |
 | Readonly(standalone)| 視覺同一般態 | 但 `pointer-events-none` + click guard + `aria-readonly` | — |
-| Readonly(Field 內,2026-06-12 user 拍板)| 不渲染 toggle — 改渲染 `fieldWrapperStyles` readonly 灰框(= Input readonly 同源)+ 勾/叉 icon(display 同款值語言) | role="switch" + aria-checked + aria-readonly + 可 focus | — |
+| Readonly(Field 內,2026-06-12 user 拍板)| 不渲染 toggle — 改渲染 `fieldWrapperStyles` readonly 灰框(= Input readonly 同源)+ 勾/叉 icon(view 同款值語言) | role="switch" + aria-checked + aria-readonly + 可 focus | — |
 
 ### Disabled 用 `opacity`
 
@@ -129,13 +129,13 @@ sm 和 md 視覺相同（純粹命名 mapping，讓消費者可直接傳同一
 | Tab 焦點 | 不在 tab order | 不在 tab order |
 | 用途 | settings list 鎖定呈現 | 外部條件造成不可操作 |
 
-表單 readonly 呈現 = Field 內灰框 + 勾/叉 icon(2026-06-12 拍板);DataTable cell 非編輯態 = `mode="display"`(勾/叉 icon),皆非本表 standalone readonly。
+表單 readonly 呈現 = Field 內灰框 + 勾/叉 icon(2026-06-12 拍板);DataTable cell 非編輯態 = `mode="view"`(勾/叉 icon),皆非本表 standalone readonly。
 
 ### `mode` prop(Field mode,正交於 size)
 
-`mode?: 'edit' | 'display' | 'readonly' | 'disabled'`(默認 inherit Field context 或 `'edit'`),對齊 `field-types.ts` FieldMode：
+`mode?: 'edit' | 'view' | 'readonly' | 'disabled'`(默認 inherit Field context 或 `'edit'`),對齊 `field-types.ts` FieldMode：
 - `edit`(預設)— 可切換的 Switch。
-- `display` — **純展示**:渲染 勾/叉 icon(非互動 Switch;true=Check / false=X,中性 foreground 色,SSOT = `../SelectionControl/boolean-value.tsx`),語意由 context(如 DataTable boolean cell 的行/列 header)提供,對齊 Carbon read-only / Input·Select·Textarea display mode 一致。<!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
+- `view` — **純展示**:渲染 勾/叉 icon(非互動 Switch;true=Check / false=X,中性 foreground 色,SSOT = `../SelectionControl/boolean-value.tsx`),語意由 context(如 DataTable boolean cell 的行/列 header)提供,對齊 Carbon read-only / Input·Select·Textarea view mode 一致。<!-- @benchmark-unverified: see frontmatter benchmark list for canonical DS source URL -->
 - `readonly` — **Field 內** = 灰框 + 勾/叉 icon(消費 `fieldWrapperStyles` readonly,與 Input readonly 同一視覺語言;世界級:Salesforce output ✓ glyph / SAP 靜態文字 — readonly 下 boolean 是資料 value 非控件);**standalone** = 正常色鎖互動(settings list 場景)。
 - `disabled` — 同上表「Readonly vs Disabled」(opacity 弱化);`mode='disabled'` 直傳與 `disabled` prop 等效(effectiveDisabled,2026-06-12)。
 

package/src/components/Switch/switch.stories.tsx

@@ -20,9 +20,9 @@ export const Modes: Story = {
         <Switch defaultChecked aria-label="啟用通知(edit mode demo)" />
       </div>
       <div>
-        <h3 className="text-body font-bold text-foreground mb-2">display</h3>
-        <Switch mode="display" checked />
-        <p className="text-caption text-fg-muted mt-1">純視覺 勾/叉 icon；語意由 context（如 DataTable 表頭 + 行標籤）提供，display 不暴露獨立 aria-label。需螢幕報讀器可讀請用 edit / readonly。</p>
+        <h3 className="text-body font-bold text-foreground mb-2">view</h3>
+        <Switch mode="view" checked />
+        <p className="text-caption text-fg-muted mt-1">純視覺 勾/叉 icon；語意由 context（如 DataTable 表頭 + 行標籤）提供，view 不暴露獨立 aria-label。需螢幕報讀器可讀請用 edit / readonly。</p>
       </div>
       <div>
         <h3 className="text-body font-bold text-foreground mb-2">readonly</h3>

package/src/components/Switch/switch.tsx

@@ -96,7 +96,11 @@ const SPECS: Record<string, { thumb: number; check: number; checkStroke: number
 }
 
 export interface SwitchProps
-  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
+  // asChild / children 從公開型別 Omit(2026-07-18 決策2):Switch 固定 anatomy —
+  // 恆渲染 Thumb + BooleanValueIcon,非 Slot host;children 被固定 Thumb 靜默覆蓋,
+  // asChild(Radix Slot 單子節點)破壞 track/thumb 結構(CLAUDE.md 失敗記憶「asChild ? Slot」)。
+  // 對齊 Checkbox 同款收窄(sibling selection control)。
+  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, 'asChild' | 'children'>,
     VariantProps<typeof switchVariants> {
   /**
    * Inline label。提供時 Switch 自動包一個 <label> 並連結 htmlFor，
@@ -113,15 +117,15 @@ export interface SwitchProps
   /**
    * readonly 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + 勾/叉 icon。
    * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。
-   * DataTable cell 非編輯態用 mode="display"(勾/叉 icon),非 readOnly。
+   * DataTable cell 非編輯態用 mode="view"(勾/叉 icon),非 readOnly。
    */
   readOnly?: boolean
   /**
    * Field mode(2026-05-05 Phase B3 align):
    *   edit     — 一般可互動 Switch(預設)
-   *   display  — **純展示**:渲染 勾/叉 icon(無互動 primitive、無 input chrome);
+   *   view  — **純展示**:渲染 勾/叉 icon(無互動 primitive、無 input chrome);
    *              對齊 Carbon read-only / DataTable boolean cell。
-   *              `display` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。
+   *              `view` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。
    *   readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + 勾/叉 icon
    *   disabled — 同 disabled prop
    */
@@ -158,7 +162,7 @@ const Switch = React.forwardRef<
 
     // Field context 偵測：在 Field 內時忽略自己的 label/description，避免雙層
     // 2026-05-31 #35:hooks(useFieldContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。
-    // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。
+    // 原 mode='view' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。
     const fieldCtx = useFieldContext()
     // 2026-06-08 SSOT:<Field disabled>/<Field mode> cascade(原 disabled/mode 直傳 prop,漏 fieldCtx)
     const disabled = useResolvedFieldDisabled(disabledProp)
@@ -184,7 +188,7 @@ const Switch = React.forwardRef<
     const generatedId = React.useId()
     const inputId = idProp ?? fieldCtx?.id ?? generatedId
 
-    // 2026-07-04 修:display / readonly-in-Field 分支的裸 span/div 原丟棄剩餘 props
+    // 2026-07-04 修:view / readonly-in-Field 分支的裸 span/div 原丟棄剩餘 props
     // (id/data-*/aria-*)且不轉發 forwardRef ref → consumer 的 aria-label 等靜默失效。
     // 抽出 Radix 專屬 non-DOM props,其餘 DOM props 於兩分支 spread 轉發(與 Checkbox/
     // RadioGroup 同修);edit 主路徑不受影響(rootEl 仍 spread 完整 props)。
@@ -198,12 +202,14 @@ const Switch = React.forwardRef<
       asChild: _asChild,
       children: _children,
       ...restDomProps
-    } = props
+      // asChild/children 已從 SwitchProps 型別 Omit(見型別註解);此處 cast 保留 runtime strip
+      // (防 any-cast consumer 洩漏到 primitive),與 RadioGroup 同款防禦。
+    } = props as SwitchProps & { asChild?: boolean; children?: React.ReactNode }
 
-    // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────
-    // 純展示模式:無互動 toggle、渲染 Check / X icon。與 Checkbox display 對齊(同 boolean primitive,
+    // ── mode='view'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────
+    // 純展示模式:無互動 toggle、渲染 Check / X icon。與 Checkbox view 對齊(同 boolean primitive,
     // 共用 SelectionControl/boolean-value.tsx SSOT — 勾/叉 icon + 中性 foreground 色)。
-    if (resolvedMode === 'display') {
+    if (resolvedMode === 'view') {
       const isChecked = checkedProp === true
       return (
         <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className="inline-flex">

package/src/components/Tabs/tabs.anatomy.stories.tsx

@@ -54,6 +54,7 @@ export const Overview: Story = {
               </TabsTrigger>
               <TabsTrigger value="settings" startIcon={Settings}>設定</TabsTrigger>
             </TabsList>
+            <TabsContent value="files" className="text-body text-fg-secondary">專案文件與附件清單</TabsContent>
           </Tabs>
         </div>
       </div>
@@ -213,6 +214,7 @@ export const SizeMatrix: Story = {
                     <TabsTrigger value="b">成員</TabsTrigger>
                     <TabsTrigger value="c">設定</TabsTrigger>
                   </TabsList>
+                  <TabsContent value="a" className="text-body text-fg-secondary mt-2">專案的總覽資訊（KPI、最近活動）</TabsContent>
                 </Tabs>
               </div>
             </div>
@@ -297,6 +299,7 @@ export const ColorMatrix: Story = {
               </TabsTrigger>
               <TabsTrigger value="settings" startIcon={Settings}>設定</TabsTrigger>
             </TabsList>
+            <TabsContent value="members" className="text-body text-fg-secondary mt-2">成員名單（3 人待邀請）</TabsContent>
           </Tabs>
         </div>
       </div>
@@ -319,6 +322,7 @@ export const StateBehavior: Story = {
               <TabsTrigger value="notifications">通知</TabsTrigger>
               <TabsTrigger value="settings" disabled>設定</TabsTrigger>
             </TabsList>
+            <TabsContent value="overview" className="text-body text-fg-secondary mt-2">專案的總覽資訊（KPI、最近活動）</TabsContent>
           </Tabs>
         </div>
         <p className="text-footnote text-fg-muted mt-3">
@@ -350,6 +354,7 @@ export const OverflowMatrix: Story = {
               <TabsTrigger value="g">計費</TabsTrigger>
               <TabsTrigger value="h">安全性</TabsTrigger>
             </TabsList>
+            <TabsContent value="a" className="text-body text-fg-secondary mt-2">工作區總覽（成員、方案、近期活動）</TabsContent>
           </Tabs>
         </div>
       </div>
@@ -371,6 +376,7 @@ export const OverflowMatrix: Story = {
               <TabsTrigger value="g">計費</TabsTrigger>
               <TabsTrigger value="h">安全性</TabsTrigger>
             </TabsList>
+            <TabsContent value="a" className="text-body text-fg-secondary mt-2">工作區總覽（成員、方案、近期活動）</TabsContent>
           </Tabs>
         </div>
       </div>

package/src/components/Tabs/tabs.principles.stories.tsx

@@ -121,7 +121,10 @@ export const UsageGuidance: Story = {
                 <TabsTrigger value="products">產品</TabsTrigger>
                 <TabsTrigger value="settings">設定</TabsTrigger>
               </TabsList>
-              <TabsContent value="orders" className="text-body text-fg-muted">(訂單頁的 toolbar、filters、table…)</TabsContent>
+              <TabsContent value="orders" className="text-body text-fg-muted">1,284 筆訂單 · 篩選「待出貨」· 批次列印出貨單</TabsContent>
+              <TabsContent value="customers" className="text-body text-fg-muted">顧客名單、分群標籤與生命週期價值</TabsContent>
+              <TabsContent value="products" className="text-body text-fg-muted">商品目錄、庫存與上下架狀態</TabsContent>
+              <TabsContent value="settings" className="text-body text-fg-muted">商店設定：金流、物流、稅率</TabsContent>
             </Tabs>
           </div>
           <div>
@@ -191,6 +194,7 @@ export const SizeSelection: Story = {
             <TabsTrigger value="a">一般</TabsTrigger>
             <TabsTrigger value="b">進階</TabsTrigger>
           </TabsList>
+          <TabsContent value="a" className="text-body text-fg-secondary mt-2">名稱、描述與可見範圍等一般設定</TabsContent>
         </Tabs>
       </Rule>
 
@@ -205,6 +209,7 @@ export const SizeSelection: Story = {
             <TabsTrigger value="b">成員</TabsTrigger>
             <TabsTrigger value="c" badge={<Badge count={3} />}>通知</TabsTrigger>
           </TabsList>
+          <TabsContent value="a" className="text-body text-fg-secondary mt-2">專案的總覽資訊（KPI、最近活動）</TabsContent>
         </Tabs>
       </Rule>
 
@@ -217,6 +222,7 @@ export const SizeSelection: Story = {
             <TabsTrigger value="a">產品</TabsTrigger>
             <TabsTrigger value="b">服務</TabsTrigger>
           </TabsList>
+          <TabsContent value="a" className="text-body text-fg-secondary mt-2">產品功能、方案與定價總覽</TabsContent>
         </Tabs>
       </Rule>
     </div>
@@ -231,7 +237,7 @@ export const TriggerSlots: Story = {
     <div>
       <Rule
         title="startIcon 描述 tab 的內容性質"
-        note="使用名詞性 icon(人像配「成員」、齒輪配「設定」、鈴鐺配「通知」)。不放動詞性 icon(Download、Trash2),tab 是視圖切換不是動作觸發"
+        note="使用名詞性 icon(人像配「成員」、齒輪配「設定」、鈴鐺配「通知」)。不放動詞性 icon(Download、Trash2),tab 是視圖切換不是動作觸發。同一組 tabs 內 startIcon 全有或全無、不混用(spec 禁止事項),下方三個 trigger 皆帶 icon 即為「全有」的 uniform 示範"
       >
         <Tabs defaultValue="a">
           <TabsList>
@@ -239,6 +245,7 @@ export const TriggerSlots: Story = {
             <TabsTrigger value="b" startIcon={Settings}>設定</TabsTrigger>
             <TabsTrigger value="c" startIcon={Bell}>通知</TabsTrigger>
           </TabsList>
+          <TabsContent value="a" className="text-body text-fg-secondary mt-2">成員名單與角色權限管理</TabsContent>
         </Tabs>
       </Rule>
 
@@ -252,6 +259,7 @@ export const TriggerSlots: Story = {
             <TabsTrigger value="unread" badge={<Badge count={12} />}>未讀</TabsTrigger>
             <TabsTrigger value="starred" badge={<Badge count={3} />}>星標</TabsTrigger>
           </TabsList>
+          <TabsContent value="inbox" className="text-body text-fg-secondary mt-2">收件匣的所有訊息（依時間排序）</TabsContent>
         </Tabs>
       </Rule>
     </div>

package/src/components/Tabs/tabs.spec.md

@@ -86,7 +86,9 @@ TabsContent ← 對應被選中的 trigger
 - `startIcon` 描述 tab 的內容性質（人像 icon 配「成員」、齒輪 icon 配「設定」）
 - `badge` 傳達該 tab 底下的待處理計數（「通知 3」「成員 12」）
 - `endIcon` **純視覺 indicator only**（方向 / 狀態 — ChevronDown 暗示「展開後看到子內容」、Pin / Star 狀態徽記）。**不拼 click 行為** — 點到 endIcon 跟點到 tab body 同效果（切 tab）
-- `inlineAction`（2026-05-21 加）拆分 click target：點到 inlineAction 走它自己的 handler 不切 tab；典型如「『更多 ▾』tab 後綴點開 overflow dropdown 不切 tab」（split-click pattern,對齊 GitHub「Code ▾」/ Linear "Triage..." menu / Atlassian split-tab 共識）。DOM 上 inlineAction 是 trigger 的 **sibling**（絕對定位在 trigger 以 paddingRight 預留的區域,同 SidebarMenuButton suffixNode canonical）,**非巢狀 button** — Radix trigger 是原生 `<button>`,巢 button 為 HTML 不合法 + axe nested-interactive（2026-07-05 D4 修）
+- `inlineAction`（2026-05-21 加）拆分 click target：點到 inlineAction 走它自己的 handler 不切 tab；典型如「『更多 ▾』tab 後綴點開 overflow dropdown 不切 tab」（split-click pattern,對齊 GitHub「Code ▾」/ Linear "Triage..." menu / Atlassian split-tab 共識）。**DOM 結構(2026-07-18 決策1 axe 正規修)**:inlineAction **portal 到 `TabsList` 的 overlay 層(`role=tablist` 之外的 sibling div)**,以 trigger 的量測座標(viewport-relative,涵蓋 none/scroll/menu)定位在 trigger 右緣預留的 paddingRight 區。**為什麼不放 tablist 內**:`role=tablist` 只能擁有 `role=tab`(ARIA required-children);inlineAction(`button[aria-haspopup]`)DOM-在 tablist 內 = axe critical(2026-07-18 實測確認),故 portal 出去。trigger 本身仍在 tablist 內(Radix roving focus 要求 trigger 為 List React 子代)。**演進史**:2026-07-05 先修 button-巢-button(nested-interactive serious,改 sibling 佈局);2026-07-18 再修 button-在-tablist(required-children critical,改 portal overlay)。**代價(user 2026-07-18 拍板接受)**:鍵盤 Tab 序 = 全部 tab 之後才到 action(action 現為 overlay 內獨立 tab stop)。click 天然分流(action portal 出 trigger 子樹,不冒泡)。<!-- @benchmark-unverified: axe aria-required-children rule 實測(.claude/logs/a11y-audit.json);split-click pattern 對照未逐一 URL cite -->
+
+  **⚠️ ARIA required-children 鐵律(泛化,防同類 regression)**:任何 composite widget 容器(`role=tablist` / `listbox` / `menu` / `radiogroup` / `tree`)只能擁有其 required child role;要在容器「格子」旁塞獨立互動 element(action / dropdown trigger)時,**必 portal 出容器 DOM 子樹 + 量測定位**(aria-owns 不可行:axe required-children 計 DOM-owned 子代,不因 aria-owns 排除)。對齊 W3C ARIA APG composite-widget owned-elements 規範。
 
 ### 對標對象與故意的偏離
 
@@ -282,7 +284,8 @@ Tabs anatomy 採 DS 標準結構 + 元件特有矩陣:
 
 **Focus**:Tabs 為內嵌導覽,不困住焦點(無 focus trap);Radix `tabs` primitive 以 roving tabindex 管理 tab 之間的鍵盤移動(整組 tabs 為單一 tab stop)。選中 tab 與 TabsContent 各有 focus-visible 焦點框(`ring-2 ring-ring` per design-system focus-visible canonical)。
 
-**驗證**:Storybook a11y addon panel 應 0 critical violation;鍵盤完整可操作(無需滑鼠)。WCAG AA contrast ≥ 4.5:1(text)/ 3:1(UI)。
+**驗證**:Tabs 元件**自身結構** axe 0 critical(nested-interactive + aria-required-children 皆已修,2026-07-18 實測 `.claude/logs/a11y-audit.json`);鍵盤完整可操作(無需滑鼠)。WCAG AA contrast ≥ 4.5:1(text)/ 3:1(UI)。
+**已知非-Tabs-結構例外(誠實標註,非本元件缺陷)**:(a) `aria-controls` 指向未掛載的 inactive `TabsContent` = Radix 內建行為(inactive panel 預設 unmount → IDREF 懸空,axe `aria-valid-attr-value` flag);要消除需 `forceMount` 全 panel(有 perf 取捨,屬另案)。(b) story 內 demo 內容的 color-contrast / DataTable 巢狀(appshell story)非 Tabs 元件 own — 屬各自 owner。
 
 ## 被引用(auto-maintained,Dim 3 reciprocal audit)
 

package/src/components/Tabs/tabs.stories.tsx

@@ -1,6 +1,6 @@
-// @story-trait-rationale: hasSizes 由 anatomy.stories.tsx SizeMatrix auto-compile owns size showcase; hasInteractiveStates 的 Disabled story 已在本檔覆蓋(2026-05-15 F-migration)。
+// @story-trait-rationale: hasSizes 由 anatomy.stories.tsx SizeMatrix owns size showcase;hasInteractiveStates 由 anatomy.stories.tsx StateBehavior owns(展示層 Disabled + AllWithStartIcon story 2026-07-17 Dim 24 retire — 分別與 anatomy StateBehavior disabled 列 / Overview startIcon slot + principles TriggerSlots 全 icon 示範重複)。
 import type { Meta, StoryObj } from '@storybook/react'
-import { Users, Settings, Bell, ChevronDown, Archive, Pin, EyeOff } from 'lucide-react'
+import { ChevronDown, Archive, Pin, EyeOff } from 'lucide-react'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'
 import { Badge } from '@/design-system/components/Badge/badge'
 import { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'
@@ -75,24 +75,29 @@ export const WithSuffix: Story = {
           更多
         </TabsTrigger>
       </TabsList>
+      <TabsContent value="all" className="text-body text-fg-secondary">全部訊息（通知、提及、系統公告）</TabsContent>
+      <TabsContent value="notifications" className="text-body text-fg-secondary">12 則未讀通知（含 3 則需要你回覆）</TabsContent>
+      <TabsContent value="more" className="text-body text-fg-secondary">已封存與已釘選的通知</TabsContent>
     </Tabs>
   ),
 }
 
-export const AllWithStartIcon: Story = {
-  name: '全部含起始圖示',
-  // 2026-05-18 加(配合 #4 startIcon 全有全無 rule):示範另一極端 — 全 trigger 都帶
-  // startIcon,uniform visual。對齊 Material UI 「icon-positioned tabs」共識。
-  render: () => (
-    <Tabs defaultValue="overview" className="w-[600px]">
-      <TabsList>
-        <TabsTrigger value="overview" startIcon={Bell}>總覽</TabsTrigger>
-        <TabsTrigger value="members" startIcon={Users}>成員</TabsTrigger>
-        <TabsTrigger value="settings" startIcon={Settings}>設定</TabsTrigger>
-      </TabsList>
-    </Tabs>
-  ),
-}
+// AllWithStartIcon story 2026-07-17 Dim 24 retire — 「全 trigger 帶 startIcon」的 uniform visual
+// 已由 anatomy Overview「Trigger 內部結構」slot(全帶 icon)+ principles TriggerSlots(startIcon 全有全無 rule)
+// 完整覆蓋,單獨一則展示屬重複。#4 startIcon 全有全無 rule 語意保留在 TriggerSlots note。
+
+// 工作區設定頁的 8 個分頁 — OverflowScroll / OverflowMenu 共用(narrow 320px 容器強制觸發溢出);
+// 每個 trigger 都有對應 TabsContent,是完整可切換的真實設定頁(非只有 TabsList 的空殼)。
+const workspaceSettingsTabs = [
+  { value: 'overview', label: '總覽', content: '工作區總覽（成員、方案、近期活動）' },
+  { value: 'members', label: '成員', content: '成員名單與角色權限管理' },
+  { value: 'projects', label: '專案設定', content: '專案預設值與範本' },
+  { value: 'notifications', label: '通知', content: '通知偏好與訂閱範圍' },
+  { value: 'integrations', label: '整合', content: '已連接的第三方服務（Slack、Zoom、Google 日曆）' },
+  { value: 'api', label: 'API', content: 'API 金鑰與 Webhook 設定' },
+  { value: 'billing', label: '計費', content: '訂閱方案與付款方式' },
+  { value: 'security', label: '安全性', content: '雙重驗證與登入裝置管理' },
+] as const
 
 export const OverflowScroll: Story = {
   name: '溢出處理 — 水平捲動',
@@ -102,15 +107,13 @@ export const OverflowScroll: Story = {
     <div className="w-[320px] border border-divider rounded-md p-2">
       <Tabs defaultValue="overview">
         <TabsList overflow="scroll">
-          <TabsTrigger value="overview">總覽</TabsTrigger>
-          <TabsTrigger value="members">成員</TabsTrigger>
-          <TabsTrigger value="projects">專案設定</TabsTrigger>
-          <TabsTrigger value="notifications">通知</TabsTrigger>
-          <TabsTrigger value="integrations">整合</TabsTrigger>
-          <TabsTrigger value="api">API</TabsTrigger>
-          <TabsTrigger value="billing">計費</TabsTrigger>
-          <TabsTrigger value="security">安全性</TabsTrigger>
+          {workspaceSettingsTabs.map((t) => (
+            <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
+          ))}
         </TabsList>
+        {workspaceSettingsTabs.map((t) => (
+          <TabsContent key={t.value} value={t.value} className="text-body text-fg-secondary mt-2">{t.content}</TabsContent>
+        ))}
       </Tabs>
     </div>
   ),
@@ -123,15 +126,13 @@ export const OverflowMenu: Story = {
     <div className="w-[320px] border border-divider rounded-md p-2">
       <Tabs defaultValue="overview">
         <TabsList overflow="menu">
-          <TabsTrigger value="overview">總覽</TabsTrigger>
-          <TabsTrigger value="members">成員</TabsTrigger>
-          <TabsTrigger value="projects">專案設定</TabsTrigger>
-          <TabsTrigger value="notifications">通知</TabsTrigger>
-          <TabsTrigger value="integrations">整合</TabsTrigger>
-          <TabsTrigger value="api">API</TabsTrigger>
-          <TabsTrigger value="billing">計費</TabsTrigger>
-          <TabsTrigger value="security">安全性</TabsTrigger>
+          {workspaceSettingsTabs.map((t) => (
+            <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>
+          ))}
         </TabsList>
+        {workspaceSettingsTabs.map((t) => (
+          <TabsContent key={t.value} value={t.value} className="text-body text-fg-secondary mt-2">{t.content}</TabsContent>
+        ))}
       </Tabs>
     </div>
   ),
@@ -141,15 +142,6 @@ export const OverflowMenu: Story = {
 //   OverflowMatrix own;上方兩則「溢出處理」是 320px 窄容器的真實情境示範
 //   (2026-05-18 加,user 要求展示層要真的看得到溢出),兩層分工不重複。
 
-export const Disabled: Story = {
-  name: '停用',
-  render: () => (
-    <Tabs defaultValue="a" className="w-[600px]">
-      <TabsList>
-        <TabsTrigger value="a">可用</TabsTrigger>
-        <TabsTrigger value="b" disabled>停用</TabsTrigger>
-        <TabsTrigger value="c">可用</TabsTrigger>
-      </TabsList>
-    </Tabs>
-  ),
-}
+// Disabled story 2026-07-17 Dim 24 retire — 「可用 / 停用 / 可用」的 disabled 態
+// 已由 anatomy StateBehavior 的 disabled 列(selected / hover / disabled 三態並列)完整覆蓋,
+// 單獨一則展示屬重複。hasInteractiveStates trait 由 anatomy StateBehavior owns(見檔首 rationale)。