@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/Switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../src/components/Switch/switch.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as SwitchPrimitives from '@radix-ui/react-switch'\nimport { Check } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\n\n/**\n * Switch — 開關控件\n *\n * ── 結構 ──\n *   Track（pill 形容器）→ Thumb（白色圓 + 2px border + check icon）\n *   Track 寬 = 2 × 高，thumb 直徑 = track 高度\n *\n * ── 尺寸（sm = md）──\n *   sm/md: track 20×40, thumb 20, 白色圓 16, check 12（= checkbox sm/md）\n *   lg:    track 24×48, thumb 24, 白色圓 20, check 16（= checkbox lg）\n *\n * ── 視覺狀態 ──\n *   OFF: track border (neutral-5), thumb 白色無 border 無 check\n *   ON:  track primary, thumb 白色 + 2px primary border + primary check icon\n *   disabled: opacity-disabled（整體透明度）\n *   readOnly: 視覺同一般態，但 pointer-events-none + aria-readonly\n *\n * ── label / description / readOnly ──\n * Switch 可以透過 `label` 和 `description` props 在元件內直接渲染緊鄰的文字，\n * 樣式全部 codify 在元件內（text-body、foreground/fg-secondary、disabled 色）。\n *\n * 單獨使用時：\n *   <Switch label=\"啟用通知\" description=\"收到新訊息時提醒\" />\n *\n * Form 內使用（在 <Field> context 內）：\n *   <Field>\n *     <FieldLabel>啟用通知</FieldLabel>\n *     <Switch />                      ← label/description prop 會被自動忽略\n *     <FieldDescription>收到新訊息時提醒</FieldDescription>\n *   </Field>\n *\n * Field context 透過 useFieldContext() 偵測，避免雙層 label。\n *\n * readOnly 模式：\n *   <Switch readOnly checked={true} label=\"...\" />\n *   視覺維持 ON/OFF 正確狀態，但無法互動、不在 tab order 內、寫入 aria-readonly。\n *   與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n */\n\nconst switchVariants = cva(\n  [\n    'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n    'transition-colors duration-150',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    'disabled:cursor-not-allowed disabled:opacity-disabled',\n    // readOnly：鎖定互動但視覺正常\n    'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n    // OFF → ON 背景色\n    'data-[state=unchecked]:bg-border',\n    'data-[state=checked]:bg-primary',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-5 w-10',   // 20×40\n        md: 'h-5 w-10',   // 20×40\n        lg: 'h-6 w-12',   // 24×48\n      },\n    },\n    defaultVariants: { size: 'md' },\n  }\n)\n\nconst SPECS: Record<string, { thumb: number; check: number; checkStroke: number; translate: string }> = {\n  // checkStroke:16px 以下 icon 視覺不夠顯眼 → 加粗 stroke 補償(跟 Checkbox 共用原則,\n  // 見 checkbox.tsx 的 checkStrokeWidth 註解)。12px 用 3.5(render ≈ 1.75px 線寬,比 Lucide\n  // 預設的 1px render 明顯更粗,視覺跟 16px 預設 stroke 的 1.33px 有足夠區別),16px 用 2.5\n  // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。\n  // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差\n  // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。\n  sm: { thumb: 20, check: 12, checkStroke: 3, translate: 'translateX(20px)' },\n  md: { thumb: 20, check: 12, checkStroke: 3, translate: 'translateX(20px)' },\n  lg: { thumb: 24, check: 16, checkStroke: 2.5, translate: 'translateX(24px)' },\n}\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n    VariantProps<typeof switchVariants> {\n  /**\n   * Inline label。提供時 Switch 自動包一個 <label> 並連結 htmlFor，\n   * 套用 text-body / text-foreground / disabled 色 的 codified 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用，\n   * 單獨設定 description 無效果。套用 text-body / text-fg-secondary 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n   */\n  description?: React.ReactNode\n  /**\n   * readonly 模式：鎖定互動但維持 ON/OFF 視覺正確。\n   * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n   * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n   */\n  readOnly?: boolean\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 Switch(預設)\n   *   display  — **純展示**:渲染 ✓ / —(無互動 primitive、無 input chrome);\n   *              對齊 Carbon read-only / DataTable boolean cell。\n   *              `readonly` 保留 toggle 視覺 + 鎖互動;`display` 完全無 toggle 形體 — 兩者語意分離(field-types.ts)。\n   *   readonly — 同 readOnly prop\n   *   disabled — 同 disabled prop\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — Switch 本體無 input wrapper variant,本 prop 對 Switch 主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      description,\n      readOnly = false,\n      disabled,\n      mode,\n      // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n      variant: _chrome,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const spec = SPECS[sizeKey]\n\n    // ── mode='display' ─────────────────────────────────────────────────────\n    // 純展示模式:無互動 toggle、無 input variant,渲染 ✓ / —。\n    // 與 Checkbox display 對齊(同為 boolean primitive)— DataTable boolean cell 場景共用。\n    // 與 readonly 差異:readonly 保留 toggle 視覺 + 鎖互動;display 完全無 toggle 形體。\n    if (mode === 'display') {\n      const isChecked = props.checked === true\n      return isChecked\n        ? <span className=\"text-foreground\">✓</span>\n        : <span className=\"text-fg-muted\">—</span>\n    }\n\n    // Field context 偵測：在 Field 內時忽略自己的 label/description，避免雙層\n    const fieldCtx = useFieldContext()\n    const insideField = fieldCtx?.hasFieldWrapper === true\n    const effectiveLabel = insideField ? undefined : label\n    const effectiveDescription = insideField ? undefined : description\n\n    // 在 horizontal Field 內自動齊右(iOS / macOS Settings canonical):\n    // horizontal Field 的 layout 是 label(固定寬)| control area(fill),Switch 作為\n    // trailing control 應靠右(對齊 horizontal DescriptionItem 的「label 左 / value 右」模式)。\n    // 世界級對照:iOS Settings / macOS System Settings / GitHub Settings / Figma prefs\n    // 一律 switch 齊右 — 視覺掃描快、對齊一致。\n    const alignRightInField =\n      insideField && fieldCtx?.orientation === 'horizontal' ? 'ml-auto' : ''\n\n    // Id 連結：優先使用 prop，再退到 Field context 的 id，最後用 useId 生成\n    const generatedId = React.useId()\n    const inputId = idProp ?? fieldCtx?.id ?? generatedId\n\n    const rootEl = (\n      <SwitchPrimitives.Root\n        id={inputId}\n        className={cn(switchVariants({ size }), alignRightInField, className)}\n        ref={ref}\n        disabled={disabled}\n        aria-readonly={readOnly || undefined}\n        data-readonly={readOnly || undefined}\n        tabIndex={readOnly ? -1 : undefined}\n        aria-describedby={fieldCtx?.descriptionId}\n        {...props}\n      >\n        <SwitchPrimitives.Thumb\n          className={cn(\n            'pointer-events-none flex items-center justify-center rounded-full bg-on-emphasis border-2',\n            'transition-all duration-150',\n            'data-[state=unchecked]:translate-x-0 data-[state=unchecked]:border-border',\n            'data-[state=checked]:border-primary',\n            sizeKey === 'lg' ? 'data-[state=checked]:translate-x-6' : 'data-[state=checked]:translate-x-5',\n          )}\n          style={{ width: spec.thumb, height: spec.thumb }}\n        >\n          {/* Check icon — Radix Thumb inherits data-state from Root */}\n          <Check\n            size={spec.check}\n            strokeWidth={spec.checkStroke}\n            className=\"text-primary opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100\"\n            aria-hidden\n          />\n        </SwitchPrimitives.Thumb>\n      </SwitchPrimitives.Root>\n    )\n\n    // 無 label → 只渲染 switch 本體\n    if (effectiveLabel == null) return rootEl\n\n    // 有 label → 包 <label> + codified 樣式\n    // Switch 慣例：label 在左、switch 在右（對齊 iOS / Polaris / Material 標準）\n    // label 行第一行對齊 switch 中線：容器用 items-start + switch 包 h-[1lh] flex-center\n    return (\n      <label\n        htmlFor={inputId}\n        className={cn(\n          'inline-flex items-start gap-3 select-none',\n          disabled ? 'cursor-not-allowed' : readOnly ? 'cursor-default' : 'cursor-pointer'\n        )}\n      >\n        {/* Label↔desc gap typography-mode-aware:\n            sm/md = reading(body+body 14/1.5),lg = reading-lg(body-lg+body 14/1.5) */}\n        <span\n          className={cn(\n            'flex-1 min-w-0 flex flex-col',\n            sizeKey === 'lg'\n              ? 'gap-[var(--item-gap-label-desc-reading-lg)]'\n              : 'gap-[var(--item-gap-label-desc-reading)]',\n          )}\n        >\n          <span\n            className={cn(\n              // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)\n              sizeKey === 'lg' ? 'text-body-lg' : 'text-body',\n              disabled ? 'text-fg-disabled' : 'text-foreground'\n            )}\n          >\n            {effectiveLabel}\n          </span>\n          {effectiveDescription != null && (\n            <span\n              className={cn(\n                disabled ? 'text-fg-disabled' : 'text-fg-secondary'\n              )}\n              // Reading mode description:**最小 14px**(spec 14→14px, 16→14px),lh 預設 1.5。\n              // 用 inline style 直接繞過 tailwind-merge 對 text-body / text-fg-* 的潛在衝突。\n              style={{ fontSize: 'var(--font-body-size)' }}\n            >\n              {effectiveDescription}\n            </span>\n          )}\n        </span>\n        <span className=\"h-[1lh] flex items-center shrink-0\">\n          {rootEl}\n        </span>\n      </label>\n    )\n  }\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const switchMeta = {\n  component: 'Switch',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-primary'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { Switch, switchVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"switch.js","sources":["../../../src/components/Switch/switch.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as SwitchPrimitives from '@radix-ui/react-switch'\nimport { Check } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\nimport { fieldWrapperStyles } from '@/design-system/components/Field/field-wrapper'\nimport { BooleanValueIcon } from '@/design-system/components/SelectionControl/boolean-value'\n\n/**\n * Switch — 開關控件\n *\n * ── 結構 ──\n *   Track（pill 形容器）→ Thumb（白色圓 + 2px border + check icon）\n *   Track 寬 = 2 × 高，thumb 直徑 = track 高度\n *\n * ── 尺寸（sm = md）──\n *   sm/md: track 20×40, thumb 20, 白色圓 16, check 12（= checkbox sm/md）\n *   lg:    track 24×48, thumb 24, 白色圓 20, check 16（= checkbox lg）\n *\n * ── 視覺狀態 ──\n *   OFF: track border (neutral-5), thumb 白色 + 2px border-border(neutral-5,與 OFF track 同色)無 check\n *   ON:  track primary, thumb 白色 + 2px primary border + primary check icon\n *   disabled: opacity-disabled（整體透明度）\n *   readOnly(standalone): 視覺同一般態，但 pointer-events-none + aria-readonly\n *   readOnly(Field 內): 渲染 readonly 灰框 + 勾/叉 icon(2026-06-12 拍板,= Input readonly 同視覺語言)\n *\n * ── label / description / readOnly ──\n * Switch 可以透過 `label` 和 `description` props 在元件內直接渲染緊鄰的文字，\n * 樣式全部 codify 在元件內（text-body、foreground/fg-secondary、disabled 色）。\n *\n * 單獨使用時：\n *   <Switch label=\"啟用通知\" description=\"收到新訊息時提醒\" />\n *\n * Form 內使用（在 <Field> context 內）：\n *   <Field>\n *     <FieldLabel>啟用通知</FieldLabel>\n *     <Switch />                      ← label/description prop 會被自動忽略\n *     <FieldDescription>收到新訊息時提醒</FieldDescription>\n *   </Field>\n *\n * Field context 透過 useFieldContext() 偵測，避免雙層 label。\n *\n * readOnly 模式：\n *   <Switch readOnly checked={true} label=\"...\" />\n *   standalone:視覺維持 ON/OFF 正確狀態,但無法互動、不在 tab order 內、寫入 aria-readonly。\n *   Field 內:渲染 readonly 灰框 + 勾/叉 icon(不渲染 toggle;見 forwardRef 內 readonly 分支)。\n *   與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n */\n\nconst switchVariants = cva(\n  [\n    'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n    'transition-colors duration-150',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    'disabled:cursor-not-allowed disabled:opacity-disabled',\n    // readOnly：鎖定互動但視覺正常\n    'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n    // OFF → ON 背景色\n    'data-[state=unchecked]:bg-border',\n    'data-[state=checked]:bg-primary',\n    // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 掃出 Switch 是「藍色選中家族」\n    // 唯一漏網:Checkbox checked hover 早有同款、Ant Switch checked hover = colorPrimaryHover\n    // 源碼實錘;順修 meta states 宣稱 'hover' 但 code 原本零 hover 樣式的 claim-vs-code 落差)。\n    // unchecked hover:border(n-5)→ border-hover(n-6)深一階,對齊 Checkbox 未選 hover\n    // 加深一階慣例 + Ant unchecked hover(colorTextTertiary 加深)同方向。\n    'data-[state=unchecked]:hover:bg-border-hover',\n    'data-[state=checked]:hover:bg-primary-hover',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-5 w-10',   // 20×40\n        md: 'h-5 w-10',   // 20×40\n        lg: 'h-6 w-12',   // 24×48\n      },\n    },\n    defaultVariants: { size: 'md' },\n  }\n)\n\nconst SPECS: Record<string, { thumb: number; check: number; checkStroke: number }> = {\n  // checkStroke:16px 以下 icon 視覺不夠顯眼 → 加粗 stroke 補償(跟 Checkbox 共用原則,\n  // 見 checkbox.tsx 的 checkStrokeWidth 註解)。12px 用 3.5(render ≈ 1.75px 線寬,比 Lucide\n  // 預設的 1px render 明顯更粗,視覺跟 16px 預設 stroke 的 1.33px 有足夠區別),16px 用 2.5\n  // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。\n  // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差\n  // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。\n  // 2026-07-04 刪 dead field translate:整檔零消費,實際位移 SSOT = Thumb className\n  // translate-x-5(20px)/ translate-x-6(24px)(見下方 Thumb),消除雙住所漂移風險。\n  sm: { thumb: 20, check: 12, checkStroke: 3 },\n  md: { thumb: 20, check: 12, checkStroke: 3 },\n  lg: { thumb: 24, check: 16, checkStroke: 2.5 },\n}\n\nexport interface SwitchProps\n  // asChild / children 從公開型別 Omit(2026-07-18 決策2):Switch 固定 anatomy —\n  // 恆渲染 Thumb + BooleanValueIcon,非 Slot host;children 被固定 Thumb 靜默覆蓋,\n  // asChild(Radix Slot 單子節點)破壞 track/thumb 結構(CLAUDE.md 失敗記憶「asChild ? Slot」)。\n  // 對齊 Checkbox 同款收窄(sibling selection control)。\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, 'asChild' | 'children'>,\n    VariantProps<typeof switchVariants> {\n  /**\n   * Inline label。提供時 Switch 自動包一個 <label> 並連結 htmlFor，\n   * 套用 text-body / text-foreground / disabled 色 的 codified 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用，\n   * 單獨設定 description 無效果。套用 text-body / text-fg-secondary 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n   */\n  description?: React.ReactNode\n  /**\n   * readonly 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + 勾/叉 icon。\n   * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。\n   * DataTable cell 非編輯態用 mode=\"view\"(勾/叉 icon),非 readOnly。\n   */\n  readOnly?: boolean\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 Switch(預設)\n   *   view  — **純展示**:渲染 勾/叉 icon(無互動 primitive、無 input chrome);\n   *              對齊 Carbon read-only / DataTable boolean cell。\n   *              `view` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。\n   *   readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + 勾/叉 icon\n   *   disabled — 同 disabled prop\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — Switch 本體無 input wrapper variant,本 prop 對 Switch 主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      description,\n      readOnly = false,\n      disabled: disabledProp,\n      mode,\n      // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n      variant: _chrome,\n      checked: checkedProp,\n      defaultChecked: defaultCheckedProp,\n      onCheckedChange,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const spec = SPECS[sizeKey]\n\n    // Field context 偵測：在 Field 內時忽略自己的 label/description，避免雙層\n    // 2026-05-31 #35:hooks(useFieldContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n    // 原 mode='view' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n    const fieldCtx = useFieldContext()\n    // 2026-06-08 SSOT:<Field disabled>/<Field mode> cascade(原 disabled/mode 直傳 prop,漏 fieldCtx)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n    const effectiveReadOnly = readOnly || resolvedMode === 'readonly'\n    // mode='disabled' 直傳(無 Field ctx 的 cell 場景)必須落到真 disabled chrome(同 Checkbox 2026-06-12 修)\n    const effectiveDisabled = disabled || resolvedMode === 'disabled'\n    // readonly 灰框 size:走 SSOT resolver(prop > ctx > 'md',field-context.ts:150-161)\n    const resolvedBoxSize = useResolvedFieldSize(size ?? undefined, 'md') as 'sm' | 'md' | 'lg'\n    const insideField = fieldCtx?.hasFieldWrapper === true\n    const effectiveLabel = insideField ? undefined : label\n    const effectiveDescription = insideField ? undefined : description\n\n    // 在 horizontal Field 內自動齊右(iOS / macOS Settings canonical):\n    // horizontal Field 的 layout 是 label(固定寬)| control area(fill),Switch 作為\n    // trailing control 應靠右(對齊 horizontal DescriptionItem 的「label 左 / value 右」模式)。\n    // 世界級對照:iOS Settings / macOS System Settings / GitHub Settings / Figma prefs\n    // 一律 switch 齊右 — 視覺掃描快、對齊一致。\n    const alignRightInField =\n      insideField && fieldCtx?.orientation === 'horizontal' ? 'ml-auto' : ''\n\n    // Id 連結：優先使用 prop，再退到 Field context 的 id，最後用 useId 生成\n    const generatedId = React.useId()\n    const inputId = idProp ?? fieldCtx?.id ?? generatedId\n\n    // 2026-07-04 修:view / readonly-in-Field 分支的裸 span/div 原丟棄剩餘 props\n    // (id/data-*/aria-*)且不轉發 forwardRef ref → consumer 的 aria-label 等靜默失效。\n    // 抽出 Radix 專屬 non-DOM props,其餘 DOM props 於兩分支 spread 轉發(與 Checkbox/\n    // RadioGroup 同修);edit 主路徑不受影響(rootEl 仍 spread 完整 props)。\n    const {\n      required: _required,\n      name: _name,\n      value: _value,\n      asChild: _asChild,\n      children: _children,\n      ...restDomProps\n      // asChild/children 已從 SwitchProps 型別 Omit(見型別註解);此處 cast 保留 runtime strip\n      // (防 any-cast consumer 洩漏到 primitive),與 RadioGroup 同款防禦。\n    } = props as SwitchProps & { asChild?: boolean; children?: React.ReactNode }\n\n    // Wrapper 持有 dual-mode 狀態，讓 edit toggle 後改成 view / Field readonly\n    // 仍顯示當前值；否則 Radix 內部 uncontrolled state 無法被非 Root 分支讀取。\n    const isControlled = checkedProp !== undefined\n    const [resolvedChecked, setResolvedChecked] = useControllable<boolean>({\n      value: checkedProp,\n      defaultValue: defaultCheckedProp ?? false,\n    })\n\n    // form.reset() 不發 checked-change event；wrapper 持有 uncontrolled SSOT 後需回復初始值。\n    const innerRef = React.useRef<HTMLButtonElement | null>(null)\n    React.useEffect(() => {\n      if (isControlled) return\n      const form = innerRef.current?.form\n      if (!form) return\n      const handleReset = () => setResolvedChecked(defaultCheckedProp ?? false)\n      form.addEventListener('reset', handleReset)\n      return () => form.removeEventListener('reset', handleReset)\n    }, [defaultCheckedProp, isControlled, resolvedMode, setResolvedChecked])\n    const setRef = React.useCallback((element: HTMLButtonElement | null) => {\n      innerRef.current = element\n      if (typeof ref === 'function') ref(element)\n      else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = element\n    }, [ref])\n\n    // ── mode='view'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n    // 純展示模式:無互動 toggle、渲染 Check / X icon。與 Checkbox view 對齊(同 boolean primitive,\n    // 共用 SelectionControl/boolean-value.tsx SSOT — 勾/叉 icon + 中性 foreground 色)。\n    if (resolvedMode === 'view') {\n      const isChecked = resolvedChecked\n      const viewAriaLabel = (restDomProps as { 'aria-label'?: string })['aria-label'] ?? (isChecked ? '是' : '否')\n      return (\n        <span\n          {...restDomProps}\n          ref={ref as React.Ref<HTMLSpanElement>}\n          role=\"img\"\n          aria-label={viewAriaLabel}\n          className={cn('inline-flex', className)}\n        >\n          <BooleanValueIcon checked={isChecked} size={resolvedBoxSize} />\n        </span>\n      )\n    }\n\n    // ── mode='readonly' in Field(2026-06-12 拍板「灰框 + 勾/叉」,與 Checkbox 同款;2026-07-09 glyph → Check/X icon)──\n    // Field 內 readonly boolean = fieldWrapperStyles readonly 灰框(= Input readonly 同源)\n    // + 勾/叉 icon 值語言;standalone readOnly(settings list)維持原樣鎖互動。詳 checkbox.tsx 同段註解。\n    if (effectiveReadOnly && insideField) {\n      const isChecked = resolvedChecked\n      const boxSize = resolvedBoxSize\n      return (\n        <div\n          {...(restDomProps as React.HTMLAttributes<HTMLDivElement>)}\n          ref={ref as React.Ref<HTMLDivElement>}\n          role=\"switch\"\n          aria-checked={isChecked}\n          aria-readonly=\"true\"\n          aria-labelledby={fieldCtx?.labelId}\n          aria-invalid={fieldCtx?.invalid || undefined}\n          data-readonly=\"true\"\n          tabIndex={0}\n          className={cn(\n            fieldWrapperStyles({ size: boxSize, mode: 'readonly', variant: 'default' }),\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n            className,\n          )}\n        >\n          <BooleanValueIcon checked={isChecked} size={boxSize} />\n        </div>\n      )\n    }\n\n    const rootEl = (\n      <SwitchPrimitives.Root\n        id={inputId}\n        className={cn(switchVariants({ size }), alignRightInField, className)}\n        ref={setRef}\n        disabled={effectiveDisabled}\n        checked={resolvedChecked}\n        onCheckedChange={(next) => {\n          setResolvedChecked(next)\n          onCheckedChange?.(next)\n        }}\n        aria-readonly={effectiveReadOnly || undefined}\n        data-readonly={effectiveReadOnly || undefined}\n        tabIndex={effectiveReadOnly ? -1 : undefined}\n        aria-describedby={fieldCtx?.descriptionId}\n        {...props}\n        // 2026-07-05 D4 修:readOnly 鎖互動補 label 繞道 — <label htmlFor> 的 synthetic click\n        // 不是 pointer event,cva pointer-events-none 攔不到,點 label 文字仍 toggle。\n        // preventDefault 讓 Radix composeEventHandlers(checkForDefaultPrevented)跳過內部 toggle;\n        // 必列在 {...props} 之後才不被 consumer onClick 覆蓋(與 Checkbox/RadioGroupItem 同修)。\n        onClick={(event) => {\n          if (effectiveReadOnly) {\n            event.preventDefault()\n            return\n          }\n          props.onClick?.(event)\n        }}\n      >\n        <SwitchPrimitives.Thumb\n          className={cn(\n            'pointer-events-none flex items-center justify-center rounded-full bg-on-emphasis border-2',\n            'transition-all duration-150 motion-reduce:duration-0',\n            'data-[state=unchecked]:translate-x-0 data-[state=unchecked]:border-border',\n            'data-[state=checked]:border-primary',\n            sizeKey === 'lg' ? 'data-[state=checked]:translate-x-6' : 'data-[state=checked]:translate-x-5',\n          )}\n          style={{ width: spec.thumb, height: spec.thumb }}\n        >\n          {/* Check icon — Radix Thumb inherits data-state from Root */}\n          <Check\n            size={spec.check}\n            strokeWidth={spec.checkStroke}\n            className=\"text-primary opacity-0 transition-opacity duration-150 motion-reduce:duration-0 group-data-[state=checked]:opacity-100\"\n            aria-hidden\n          />\n        </SwitchPrimitives.Thumb>\n      </SwitchPrimitives.Root>\n    )\n\n    // 無 label → 只渲染 switch 本體\n    if (effectiveLabel == null) return rootEl\n\n    // 有 label → 包 <label> + codified 樣式\n    // Switch 慣例：label 在左、switch 在右（對齊 iOS / Polaris / Material 標準）\n    // label 行第一行對齊 switch 中線：容器用 items-start + switch 包 h-[1lh] flex-center\n    return (\n      <label\n        htmlFor={inputId}\n        // 2026-07-05 D4 修:readOnly 時在 label 端取消 synthetic activation(第一道防線;\n        // Root onClick guard 為第二道 — 兩道對齊 finding suggestion 防 consumer 自寫 label 繞過)。\n        onClick={(event) => {\n          if (effectiveReadOnly) event.preventDefault()\n        }}\n        className={cn(\n          'inline-flex items-start gap-3 select-none',\n          effectiveDisabled ? 'cursor-not-allowed' : effectiveReadOnly ? 'cursor-default' : 'cursor-pointer'\n        )}\n      >\n        {/* Label↔desc gap typography-mode-aware:\n            sm/md = reading(body+body 14/1.5),lg = reading-lg(body-lg+body 14/1.5) */}\n        <span\n          className={cn(\n            'flex-1 min-w-0 flex flex-col',\n            sizeKey === 'lg'\n              ? 'gap-[var(--item-gap-label-desc-reading-lg)]'\n              : 'gap-[var(--item-gap-label-desc-reading)]',\n          )}\n        >\n          <span\n            className={cn(\n              // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)\n              sizeKey === 'lg' ? 'text-body-lg' : 'text-body',\n              effectiveDisabled ? 'text-fg-disabled' : 'text-foreground'\n            )}\n          >\n            {effectiveLabel}\n          </span>\n          {effectiveDescription != null && (\n            <span\n              className={cn(\n                effectiveDisabled ? 'text-fg-disabled' : 'text-fg-secondary'\n              )}\n              // Reading mode description:**最小 14px**(spec 14→14px, 16→14px),lh 預設 1.5。\n              // 用 inline style 直接繞過 tailwind-merge 對 text-body / text-fg-* 的潛在衝突。\n              style={{ fontSize: 'var(--font-body-size)' }}\n            >\n              {effectiveDescription}\n            </span>\n          )}\n        </span>\n        {/* @row-slot-handcraft-allow: Field 控件的 1lh 首行對齊 wrapper(selection-control 家族 Checkbox/RadioGroup 同構),非 row item slot,不消費 MenuItem */}\n        <span className=\"h-[1lh] flex items-center shrink-0\">\n          {rootEl}\n        </span>\n      </label>\n    )\n  }\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const switchMeta = {\n  component: 'Switch',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n  variants: {\n\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 12, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 12, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 16, typography: 'body-lg' },\n  },\n  // 2026-07-04 修 stale meta:移除 'active' — switchVariants / Thumb 無 active-state 樣式\n  // (cva 只有 unchecked/checked/disabled/readonly/focus-visible;對照 checkboxMeta 正確不含 active)\n  // 'checked' = ON 持續態(bg-primary;2026-07-07 meta 詞彙統一補列,toggle 家族用 'checked')\n  states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n  tokens: {\n    // 2026-07-04 補齊漏列:bg-border = OFF track(cva data-[state=unchecked]:bg-border)、\n    // bg-on-emphasis = Thumb 白圓(Thumb className)— 兩者 code 實際消費,meta 原漏列\n    bg: ['bg-border', 'bg-on-emphasis', 'bg-primary'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { Switch, switchVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAA"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,10 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger, tabsMeta, tabsTriggerVariants } from "./tabs.js";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsMeta,
+  tabsTriggerVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Tabs/tabs-inline-action-geometry.d.ts

@@ -0,0 +1,31 @@
+import type * as React from 'react';
+export interface TabsInlineActionRect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface TabsInlineActionClipRect extends TabsInlineActionRect {
+    clipX: boolean;
+    clipY: boolean;
+}
+export interface TabsInlineActionPosition {
+    left: number;
+    top: number;
+    height: number;
+}
+export declare const TABS_INLINE_ACTION_GAP = 8;
+export declare function getTabsInlineActionPaddingRight(actionWidth: number, hasAction: boolean): number | undefined;
+/**
+ * Keep the action in its canonical trailing slot. We intentionally do not clamp it:
+ * moving an action inward would consume the trigger's canonical 8px content-to-action gap.
+ */
+export declare function resolveTabsInlineActionPosition({ trigger, overlay, clips, actionWidth, }: {
+    trigger: TabsInlineActionRect;
+    overlay: TabsInlineActionRect;
+    clips: readonly TabsInlineActionClipRect[];
+    actionWidth: number;
+}): TabsInlineActionPosition | null;
+/** Preserve every consumer style except the canonical action-space reservation. */
+export declare function mergeTabsInlineActionStyle(style: React.CSSProperties | undefined, actionPaddingRight: number | undefined): React.CSSProperties | undefined;
+//# sourceMappingURL=tabs-inline-action-geometry.d.ts.map

package/dist/components/Tabs/tabs-inline-action-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-inline-action-geometry.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabs-inline-action-geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,wBAAyB,SAAQ,oBAAoB;IACpE,KAAK,EAAE,OAAO,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,sBAAsB,IAAI,CAAA;AAEvC,wBAAgB,+BAA+B,CAC7C,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,OAAO,GACjB,MAAM,GAAG,SAAS,CAEpB;AAED;;;GAGG;AACH,wBAAgB,+BAA+B,CAAC,EAC9C,OAAO,EACP,OAAO,EACP,KAAK,EACL,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,oBAAoB,CAAA;IAC7B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,KAAK,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC1C,WAAW,EAAE,MAAM,CAAA;CACpB,GAAG,wBAAwB,GAAG,IAAI,CAyClC;AAED,mFAAmF;AACnF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,EACtC,kBAAkB,EAAE,MAAM,GAAG,SAAS,GACrC,KAAK,CAAC,aAAa,GAAG,SAAS,CAGjC"}

package/dist/components/Tabs/tabs-inline-action-geometry.js

@@ -0,0 +1,43 @@
+const TABS_INLINE_ACTION_GAP = 8;
+function getTabsInlineActionPaddingRight(actionWidth, hasAction) {
+  return hasAction ? actionWidth + TABS_INLINE_ACTION_GAP : void 0;
+}
+function resolveTabsInlineActionPosition({
+  trigger,
+  overlay,
+  clips,
+  actionWidth
+}) {
+  const viewport = { ...overlay };
+  for (const clip of clips) {
+    if (clip.clipX) {
+      viewport.left = Math.max(viewport.left, clip.left);
+      viewport.right = Math.min(viewport.right, clip.right);
+    }
+    if (clip.clipY) {
+      viewport.top = Math.max(viewport.top, clip.top);
+      viewport.bottom = Math.min(viewport.bottom, clip.bottom);
+    }
+  }
+  const triggerIntersectsViewport = viewport.right > viewport.left && viewport.bottom > viewport.top && trigger.right > viewport.left && trigger.left < viewport.right && trigger.bottom > viewport.top && trigger.top < viewport.bottom;
+  if (!triggerIntersectsViewport) return null;
+  const actionLeft = trigger.right - actionWidth;
+  const canonicalActionSlotIsVisible = actionLeft >= viewport.left && trigger.right <= viewport.right && trigger.top >= viewport.top && trigger.bottom <= viewport.bottom;
+  if (!canonicalActionSlotIsVisible) return null;
+  return {
+    left: trigger.right - overlay.left,
+    top: trigger.top - overlay.top,
+    height: trigger.bottom - trigger.top
+  };
+}
+function mergeTabsInlineActionStyle(style, actionPaddingRight) {
+  if (actionPaddingRight === void 0) return style;
+  return { ...style, paddingRight: actionPaddingRight };
+}
+export {
+  TABS_INLINE_ACTION_GAP,
+  getTabsInlineActionPaddingRight,
+  mergeTabsInlineActionStyle,
+  resolveTabsInlineActionPosition
+};
+//# sourceMappingURL=tabs-inline-action-geometry.js.map

package/dist/components/Tabs/tabs-inline-action-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-inline-action-geometry.js","sources":["../../../src/components/Tabs/tabs-inline-action-geometry.ts"],"sourcesContent":["import type * as React from 'react'\n\nexport interface TabsInlineActionRect {\n  left: number\n  right: number\n  top: number\n  bottom: number\n}\n\nexport interface TabsInlineActionClipRect extends TabsInlineActionRect {\n  clipX: boolean\n  clipY: boolean\n}\n\nexport interface TabsInlineActionPosition {\n  left: number\n  top: number\n  height: number\n}\n\nexport const TABS_INLINE_ACTION_GAP = 8\n\nexport function getTabsInlineActionPaddingRight(\n  actionWidth: number,\n  hasAction: boolean,\n): number | undefined {\n  return hasAction ? actionWidth + TABS_INLINE_ACTION_GAP : undefined\n}\n\n/**\n * Keep the action in its canonical trailing slot. We intentionally do not clamp it:\n * moving an action inward would consume the trigger's canonical 8px content-to-action gap.\n */\nexport function resolveTabsInlineActionPosition({\n  trigger,\n  overlay,\n  clips,\n  actionWidth,\n}: {\n  trigger: TabsInlineActionRect\n  overlay: TabsInlineActionRect\n  clips: readonly TabsInlineActionClipRect[]\n  actionWidth: number\n}): TabsInlineActionPosition | null {\n  const viewport = { ...overlay }\n\n  for (const clip of clips) {\n    if (clip.clipX) {\n      viewport.left = Math.max(viewport.left, clip.left)\n      viewport.right = Math.min(viewport.right, clip.right)\n    }\n    if (clip.clipY) {\n      viewport.top = Math.max(viewport.top, clip.top)\n      viewport.bottom = Math.min(viewport.bottom, clip.bottom)\n    }\n  }\n\n  const triggerIntersectsViewport =\n    viewport.right > viewport.left &&\n    viewport.bottom > viewport.top &&\n    trigger.right > viewport.left &&\n    trigger.left < viewport.right &&\n    trigger.bottom > viewport.top &&\n    trigger.top < viewport.bottom\n\n  if (!triggerIntersectsViewport) return null\n\n  // The portal span's horizontal hitbox is the canonical one-icon trailing slot.\n  // A left-clipped trigger may keep its action when that trailing slot is visible;\n  // a right-clipped slot is omitted instead of being moved over trigger content.\n  const actionLeft = trigger.right - actionWidth\n  const canonicalActionSlotIsVisible =\n    actionLeft >= viewport.left &&\n    trigger.right <= viewport.right &&\n    trigger.top >= viewport.top &&\n    trigger.bottom <= viewport.bottom\n\n  if (!canonicalActionSlotIsVisible) return null\n\n  return {\n    left: trigger.right - overlay.left,\n    top: trigger.top - overlay.top,\n    height: trigger.bottom - trigger.top,\n  }\n}\n\n/** Preserve every consumer style except the canonical action-space reservation. */\nexport function mergeTabsInlineActionStyle(\n  style: React.CSSProperties | undefined,\n  actionPaddingRight: number | undefined,\n): React.CSSProperties | undefined {\n  if (actionPaddingRight === undefined) return style\n  return { ...style, paddingRight: actionPaddingRight }\n}\n"],"names":[],"mappings":"AAoBO,MAAM,yBAAyB;AAE/B,SAAS,gCACd,aACA,WACoB;AACpB,SAAO,YAAY,cAAc,yBAAyB;AAC5D;AAMO,SAAS,gCAAgC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKoC;AAClC,QAAM,WAAW,EAAE,GAAG,QAAA;AAEtB,aAAW,QAAQ,OAAO;AACxB,QAAI,KAAK,OAAO;AACd,eAAS,OAAO,KAAK,IAAI,SAAS,MAAM,KAAK,IAAI;AACjD,eAAS,QAAQ,KAAK,IAAI,SAAS,OAAO,KAAK,KAAK;AAAA,IACtD;AACA,QAAI,KAAK,OAAO;AACd,eAAS,MAAM,KAAK,IAAI,SAAS,KAAK,KAAK,GAAG;AAC9C,eAAS,SAAS,KAAK,IAAI,SAAS,QAAQ,KAAK,MAAM;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,4BACJ,SAAS,QAAQ,SAAS,QAC1B,SAAS,SAAS,SAAS,OAC3B,QAAQ,QAAQ,SAAS,QACzB,QAAQ,OAAO,SAAS,SACxB,QAAQ,SAAS,SAAS,OAC1B,QAAQ,MAAM,SAAS;AAEzB,MAAI,CAAC,0BAA2B,QAAO;AAKvC,QAAM,aAAa,QAAQ,QAAQ;AACnC,QAAM,+BACJ,cAAc,SAAS,QACvB,QAAQ,SAAS,SAAS,SAC1B,QAAQ,OAAO,SAAS,OACxB,QAAQ,UAAU,SAAS;AAE7B,MAAI,CAAC,6BAA8B,QAAO;AAE1C,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,KAAK,QAAQ,MAAM,QAAQ;AAAA,IAC3B,QAAQ,QAAQ,SAAS,QAAQ;AAAA,EAAA;AAErC;AAGO,SAAS,2BACd,OACA,oBACiC;AACjC,MAAI,uBAAuB,OAAW,QAAO;AAC7C,SAAO,EAAE,GAAG,OAAO,cAAc,mBAAA;AACnC;"}

package/dist/components/Tabs/tabs.d.ts

@@ -22,7 +22,7 @@ import type { LucideIcon } from 'lucide-react';
  *   slot 間 gap-2，suffix 內 gap-1
  *
  * ── Selected underline ──
- *   使用 ::after 絕對定位在 bottom: -1px，2px primary-hover，
+ *   使用 ::after 絕對定位在 bottom: -1px，2px primary（2026-07-06 拍板:持續選中站 base），
  *   蓋住 TabsList 的 1px gray border（單一視覺線條，不雙線）。
  */
 type TabsSize = 'sm' | 'md' | 'lg';
@@ -36,7 +36,7 @@ interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimit
      * Overflow 處理模式。詳見 tabs.spec.md 的 overflow 段。
      *   'none'   ★ 預設，不處理，triggers 溢出父容器（適用 tabs 數量可控的情境）
      *   'scroll' 單行橫向滾動 + 邊緣 fade mask（Material / Polaris / iOS 作法）
-     *   'menu'   塞不下收進 "⋯" dropdown，所有 triggers 仍在 DOM 保留 Radix a11y
+     *   'menu'   show-all navigator——全部 triggers 一直顯示在底層 overflow-x-auto 捲動容器內,
      *            （Ant Design / Atlassian 作法）
      */
     overflow?: TabsOverflow;
@@ -45,7 +45,7 @@ declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.Re
 declare const tabsTriggerVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'asChild'> {
     /** 左側 icon（LucideIcon） */
     startIcon?: LucideIcon;
     /** 右側 badge（通常是計數指示器） */
@@ -60,8 +60,11 @@ interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPri
      * Inline action slot(2026-05-21 v3 加,per user「圖一 後綴應該是 inline action」+「點擊
      * 該 tab 的 inline action 跟其他地方應該不同反應」directive):
      * 提供 `<ItemInlineAction>` / `<DropdownMenuTrigger asChild><ItemInlineAction ... /></DropdownMenuTrigger>`
-     * 等獨立 click target。**TabsTrigger 自動 stopPropagation**,inline action 點擊不冒泡到 tab body,
-     * 達成 split-click 行為(對齊 GitHub「Code ▾」/ Linear "Triage..." menu / Atlassian split-tab 共識)。
+     * 等獨立 click target。**DOM 上是 trigger 的 sibling(絕對定位),非巢狀 button**
+     * (2026-07-05 D4 修:Radix TabsTrigger 是原生 `<button>`,巢 button = HTML 不合法 +
+     * axe nested-interactive;同 SidebarMenuButton suffixNode canonical),inline action
+     * 點擊天然不落在 tab body,達成 split-click 行為(對齊 GitHub「Code ▾」/
+     * Linear "Triage..." menu / Atlassian split-tab 共識)。
      *
      * 跟 endIcon 區別:endIcon = 純視覺 indicator(無獨立行為,連同 tab 一起 click),
      * inlineAction = 獨立 click target(自己的 handler,不切 tab)。語意分家明確。
@@ -76,24 +79,24 @@ export declare const tabsMeta: {
     readonly variants: {};
     readonly sizes: {
         readonly sm: {
-            readonly fieldHeight: 28;
+            readonly fieldHeight: 32;
             readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly md: {
-            readonly fieldHeight: 32;
+            readonly fieldHeight: 40;
             readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
+            readonly fieldHeight: 48;
             readonly iconSize: 20;
-            readonly typography: "body";
+            readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-primary-hover", "bg-transparent"];
+        readonly bg: readonly ["bg-primary", "bg-transparent"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-secondary", "text-foreground"];
         readonly ring: readonly ["ring-ring"];
     };

package/dist/components/Tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAkB9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAU9C,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;CAAG;AAOxF,QAAA,MAAM,IAAI,kFAkCR,CAAA;AAiBF,UAAU,aACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED,QAAA,MAAM,QAAQ,sFAmCZ,CAAA;AAgMF,QAAA,MAAM,mBAAmB;;8EA0CxB,CAAA;AAED,UAAU,gBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE,0BAA0B;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,WAAW,4FA6Cf,CAAA;AAIF,QAAA,MAAM,WAAW,0JAYf,CAAA;AAKF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBX,CAAA;AAEV,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA;AACxE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAyB9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAkD9C,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;CAAG;AA2CxF,QAAA,MAAM,IAAI,kFA8BR,CAAA;AAyBF,UAAU,aACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED,QAAA,MAAM,QAAQ,sFA+CZ,CAAA;AA4MF,QAAA,MAAM,mBAAmB;;8EA4CxB,CAAA;AAED,UAAU,gBAIR,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IACrF,0BAA0B;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,WAAW,4FAiGf,CAAA;AAIF,QAAA,MAAM,WAAW,0JAkBf,CAAA;AAKF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBX,CAAA;AAEV,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA;AACxE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}