@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/components/Switch/switch.d.ts

@@ -14,10 +14,11 @@ import type { FieldMode, FieldVariant } from '../../components/Field/field-types
  *   lg:    track 24×48, thumb 24, 白色圓 20, check 16（= checkbox lg）
  *
  * ── 視覺狀態 ──
- *   OFF: track border (neutral-5), thumb 白色無 border 無 check
+ *   OFF: track border (neutral-5), thumb 白色 + 2px border-border(neutral-5,與 OFF track 同色)無 check
  *   ON:  track primary, thumb 白色 + 2px primary border + primary check icon
  *   disabled: opacity-disabled（整體透明度）
- *   readOnly: 視覺同一般態，但 pointer-events-none + aria-readonly
+ *   readOnly(standalone): 視覺同一般態，但 pointer-events-none + aria-readonly
+ *   readOnly(Field 內): 渲染 readonly 灰框 + ✓/—(2026-06-12 拍板,= Input readonly 同視覺語言)
  *
  * ── label / description / readOnly ──
  * Switch 可以透過 `label` 和 `description` props 在元件內直接渲染緊鄰的文字，
@@ -37,7 +38,8 @@ import type { FieldMode, FieldVariant } from '../../components/Field/field-types
  *
  * readOnly 模式：
  *   <Switch readOnly checked={true} label="..." />
- *   視覺維持 ON/OFF 正確狀態，但無法互動、不在 tab order 內、寫入 aria-readonly。
+ *   standalone:視覺維持 ON/OFF 正確狀態,但無法互動、不在 tab order 內、寫入 aria-readonly。
+ *   Field 內:渲染 readonly 灰框 + ✓/—(不渲染 toggle;見 forwardRef 內 readonly 分支)。
  *   與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。
  */
 declare const switchVariants: (props?: ({
@@ -57,9 +59,9 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
      */
     description?: React.ReactNode;
     /**
-     * readonly 模式：鎖定互動但維持 ON/OFF 視覺正確。
-     * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。
-     * 用於表單 readonly 呈現、DataTable cell 非編輯態。
+     * readonly 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + ✓/—。
+     * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。
+     * DataTable cell 非編輯態用 mode="display"(✓/—),非 readOnly。
      */
     readOnly?: boolean;
     /**
@@ -67,8 +69,8 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
      *   edit     — 一般可互動 Switch(預設)
      *   display  — **純展示**:渲染 ✓ / —(無互動 primitive、無 input chrome);
      *              對齊 Carbon read-only / DataTable boolean cell。
-     *              `readonly` 保留 toggle 視覺 + 鎖互動;`display` 完全無 toggle 形體 — 兩者語意分離(field-types.ts)。
-     *   readonly — 同 readOnly prop
+     *              `display` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。
+     *   readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + ✓/—
      *   disabled — 同 disabled prop
      */
     mode?: FieldMode;
@@ -81,28 +83,28 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const switchMeta: {
     readonly component: "Switch";
-    readonly family: 4;
+    readonly family: null;
     readonly variants: {};
     readonly sizes: {
         readonly sm: {
             readonly fieldHeight: 28;
-            readonly iconSize: 16;
+            readonly iconSize: 12;
             readonly typography: "body";
         };
         readonly md: {
             readonly fieldHeight: 32;
-            readonly iconSize: 16;
+            readonly iconSize: 12;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
-            readonly iconSize: 20;
-            readonly typography: "body";
+            readonly fieldHeight: 36;
+            readonly iconSize: 16;
+            readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-primary"];
+        readonly bg: readonly ["bg-border", "bg-on-emphasis", "bg-primary"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"];
         readonly ring: readonly ["ring-ring"];
     };

package/dist/components/Switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAG3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,QAAA,MAAM,cAAc;;8EAsBnB,CAAA;AAcD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,uFAyIX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,QAAA,MAAM,cAAc;;8EAsBnB,CAAA;AAgBD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,uFA8MX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Switch/switch.js

@@ -4,7 +4,8 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { Check } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
+import { fieldWrapperStyles } from "../Field/field-wrapper.js";
 const switchVariants = cva(
   [
     "group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
@@ -38,9 +39,11 @@ const SPECS = {
   // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。
   // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差
   // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。
-  sm: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
-  md: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
-  lg: { thumb: 24, check: 16, checkStroke: 2.5, translate: "translateX(24px)" }
+  // 2026-07-04 刪 dead field translate:整檔零消費,實際位移 SSOT = Thumb className
+  // translate-x-5(20px)/ translate-x-6(24px)(見下方 Thumb),消除雙住所漂移風險。
+  sm: { thumb: 20, check: 12, checkStroke: 3 },
+  md: { thumb: 20, check: 12, checkStroke: 3 },
+  lg: { thumb: 24, check: 16, checkStroke: 2.5 }
 };
 const Switch = React.forwardRef(
   ({
@@ -49,7 +52,7 @@ const Switch = React.forwardRef(
     label,
     description,
     readOnly = false,
-    disabled,
+    disabled: disabledProp,
     mode,
     // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。
     variant: _chrome,
@@ -58,29 +61,77 @@ const Switch = React.forwardRef(
   }, ref) => {
     const sizeKey = size ?? "md";
     const spec = SPECS[sizeKey];
-    if (mode === "display") {
-      const isChecked = props.checked === true;
-      return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
-    }
     const fieldCtx = useFieldContext();
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly });
+    const effectiveReadOnly = readOnly || resolvedMode === "readonly";
+    const effectiveDisabled = disabled || resolvedMode === "disabled";
+    const resolvedBoxSize = useResolvedFieldSize(size ?? void 0, "md");
     const insideField = (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true;
     const effectiveLabel = insideField ? void 0 : label;
     const effectiveDescription = insideField ? void 0 : description;
     const alignRightInField = insideField && (fieldCtx == null ? void 0 : fieldCtx.orientation) === "horizontal" ? "ml-auto" : "";
     const generatedId = React.useId();
     const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id) ?? generatedId;
+    const {
+      checked: checkedProp,
+      defaultChecked: defaultCheckedProp,
+      onCheckedChange: _onCheckedChange,
+      required: _required,
+      name: _name,
+      value: _value,
+      asChild: _asChild,
+      children: _children,
+      ...restDomProps
+    } = props;
+    if (resolvedMode === "display") {
+      const isChecked = checkedProp === true;
+      return isChecked ? /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-fg-muted", children: "—" });
+    }
+    if (effectiveReadOnly && insideField) {
+      const isChecked = (checkedProp ?? defaultCheckedProp) === true;
+      const boxSize = resolvedBoxSize;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...restDomProps,
+          ref,
+          role: "switch",
+          "aria-checked": isChecked,
+          "aria-readonly": "true",
+          "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
+          "aria-invalid": (fieldCtx == null ? void 0 : fieldCtx.invalid) || void 0,
+          "data-readonly": "true",
+          tabIndex: 0,
+          className: cn(
+            fieldWrapperStyles({ size: boxSize, mode: "readonly", variant: "default" }),
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className
+          ),
+          children: isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" })
+        }
+      );
+    }
     const rootEl = /* @__PURE__ */ jsx(
       SwitchPrimitives.Root,
       {
         id: inputId,
         className: cn(switchVariants({ size }), alignRightInField, className),
         ref,
-        disabled,
-        "aria-readonly": readOnly || void 0,
-        "data-readonly": readOnly || void 0,
-        tabIndex: readOnly ? -1 : void 0,
+        disabled: effectiveDisabled,
+        "aria-readonly": effectiveReadOnly || void 0,
+        "data-readonly": effectiveReadOnly || void 0,
+        tabIndex: effectiveReadOnly ? -1 : void 0,
         "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
         ...props,
+        onClick: (event) => {
+          var _a;
+          if (effectiveReadOnly) {
+            event.preventDefault();
+            return;
+          }
+          (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+        },
         children: /* @__PURE__ */ jsx(
           SwitchPrimitives.Thumb,
           {
@@ -110,9 +161,12 @@ const Switch = React.forwardRef(
       "label",
       {
         htmlFor: inputId,
+        onClick: (event) => {
+          if (effectiveReadOnly) event.preventDefault();
+        },
         className: cn(
           "inline-flex items-start gap-3 select-none",
-          disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"
+          effectiveDisabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"
         ),
         children: [
           /* @__PURE__ */ jsxs(
@@ -129,7 +183,7 @@ const Switch = React.forwardRef(
                     className: cn(
                       // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)
                       sizeKey === "lg" ? "text-body-lg" : "text-body",
-                      disabled ? "text-fg-disabled" : "text-foreground"
+                      effectiveDisabled ? "text-fg-disabled" : "text-foreground"
                     ),
                     children: effectiveLabel
                   }
@@ -138,7 +192,7 @@ const Switch = React.forwardRef(
                   "span",
                   {
                     className: cn(
-                      disabled ? "text-fg-disabled" : "text-fg-secondary"
+                      effectiveDisabled ? "text-fg-disabled" : "text-fg-secondary"
                     ),
                     style: { fontSize: "var(--font-body-size)" },
                     children: effectiveDescription
@@ -156,16 +210,21 @@ const Switch = React.forwardRef(
 Switch.displayName = SwitchPrimitives.Root.displayName;
 const switchMeta = {
   component: "Switch",
-  family: 4,
+  family: null,
+  // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)
   variants: {},
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+    sm: { fieldHeight: 28, iconSize: 12, typography: "body" },
+    md: { fieldHeight: 32, iconSize: 12, typography: "body" },
+    lg: { fieldHeight: 36, iconSize: 16, typography: "body-lg" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 修 stale meta:移除 'active' — switchVariants / Thumb 無 active-state 樣式
+  // (cva 只有 unchecked/checked/disabled/readonly/focus-visible;對照 checkboxMeta 正確不含 active)
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-primary"],
+    // 2026-07-04 補齊漏列:bg-border = OFF track(cva data-[state=unchecked]:bg-border)、
+    // bg-on-emphasis = Thumb 白圓(Thumb className)— 兩者 code 實際消費,meta 原漏列
+    bg: ["bg-border", "bg-on-emphasis", "bg-primary"],
     fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"],
     ring: ["ring-ring"]
   },

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 { fieldWrapperStyles } from '@/design-system/components/Field/field-wrapper'\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 灰框 + ✓/—(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 灰框 + ✓/—(不渲染 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  ],\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  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 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + ✓/—。\n   * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。\n   * DataTable cell 非編輯態用 mode=\"display\"(✓/—),非 readOnly。\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   *              `display` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。\n   *   readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + ✓/—\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      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='display' 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 修:display / 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      checked: checkedProp,\n      defaultChecked: defaultCheckedProp,\n      onCheckedChange: _onCheckedChange,\n      required: _required,\n      name: _name,\n      value: _value,\n      asChild: _asChild,\n      children: _children,\n      ...restDomProps\n    } = props\n\n    // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n    // 純展示模式:無互動 toggle、渲染 ✓ / —。與 Checkbox display 對齊(同 boolean primitive)。\n    if (resolvedMode === 'display') {\n      const isChecked = checkedProp === true\n      return isChecked\n        ? <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className=\"text-foreground\">✓</span>\n        : <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className=\"text-fg-muted\">—</span>\n    }\n\n    // ── mode='readonly' in Field(2026-06-12 user 拍板「灰框 + ✓/—」,與 Checkbox 同款)──\n    // Field 內 readonly boolean = fieldWrapperStyles readonly 灰框(= Input readonly 同源)\n    // + ✓/— 值語言;standalone readOnly(settings list)維持原樣鎖互動。詳 checkbox.tsx 同段註解。\n    if (effectiveReadOnly && insideField) {\n      const isChecked = (checkedProp ?? defaultCheckedProp) === true\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          {isChecked ? <span className=\"text-foreground\">✓</span> : <span className=\"text-fg-muted\">—</span>}\n        </div>\n      )\n    }\n\n    const rootEl = (\n      <SwitchPrimitives.Root\n        id={inputId}\n        className={cn(switchVariants({ size }), alignRightInField, className)}\n        ref={ref}\n        disabled={effectiveDisabled}\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',\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        // 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' : 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              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  states: ['default', 'hover', '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":";;;;;;;;AAmDA,MAAM,iBAAiB;AAAA,EACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB,EAAE,MAAM,KAAA;AAAA,EAAK;AAElC;AAEA,MAAM,QAA+E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASnF,IAAI,EAAE,OAAO,IAAI,OAAO,IAAI,aAAa,EAAA;AAAA,EACzC,IAAI,EAAE,OAAO,IAAI,OAAO,IAAI,aAAa,EAAA;AAAA,EACzC,IAAI,EAAE,OAAO,IAAI,OAAO,IAAI,aAAa,IAAA;AAC3C;AAwCA,MAAM,SAAS,MAAM;AAAA,EAInB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA;AAAA,IAEA,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,QAAQ;AACxB,UAAM,OAAO,MAAM,OAAO;AAK1B,UAAM,WAAW,gBAAA;AAEjB,UAAM,WAAW,yBAAyB,YAAY;AACtD,UAAM,eAAe,qBAAqB,EAAE,MAAM,UAAU,UAAU;AACtE,UAAM,oBAAoB,YAAY,iBAAiB;AAEvD,UAAM,oBAAoB,YAAY,iBAAiB;AAEvD,UAAM,kBAAkB,qBAAqB,QAAQ,QAAW,IAAI;AACpE,UAAM,eAAc,qCAAU,qBAAoB;AAClD,UAAM,iBAAiB,cAAc,SAAY;AACjD,UAAM,uBAAuB,cAAc,SAAY;AAOvD,UAAM,oBACJ,gBAAe,qCAAU,iBAAgB,eAAe,YAAY;AAGtE,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,WAAU,qCAAU,OAAM;AAM1C,UAAM;AAAA,MACJ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACD;AAIJ,QAAI,iBAAiB,WAAW;AAC9B,YAAM,YAAY,gBAAgB;AAClC,aAAO,YACH,oBAAC,QAAA,EAAM,GAAG,cAAc,KAAwC,WAAU,mBAAkB,UAAA,IAAA,CAAC,wBAC5F,QAAA,EAAM,GAAG,cAAc,KAAwC,WAAU,iBAAgB,UAAA,KAAC;AAAA,IACjG;AAKA,QAAI,qBAAqB,aAAa;AACpC,YAAM,aAAa,eAAe,wBAAwB;AAC1D,YAAM,UAAU;AAChB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAI;AAAA,UACL;AAAA,UACA,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,iBAAc;AAAA,UACd,mBAAiB,qCAAU;AAAA,UAC3B,iBAAc,qCAAU,YAAW;AAAA,UACnC,iBAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAW;AAAA,YACT,mBAAmB,EAAE,MAAM,SAAS,MAAM,YAAY,SAAS,WAAW;AAAA,YAC1E;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA,YAAY,oBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA,IAAA,CAAC,IAAU,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,IAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGjG;AAEA,UAAM,SACJ;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,eAAe,EAAE,MAAM,GAAG,mBAAmB,SAAS;AAAA,QACpE;AAAA,QACA,UAAU;AAAA,QACV,iBAAe,qBAAqB;AAAA,QACpC,iBAAe,qBAAqB;AAAA,QACpC,UAAU,oBAAoB,KAAK;AAAA,QACnC,oBAAkB,qCAAU;AAAA,QAC3B,GAAG;AAAA,QAKJ,SAAS,CAAC,UAAU;;AAClB,cAAI,mBAAmB;AACrB,kBAAM,eAAA;AACN;AAAA,UACF;AACA,sBAAM,YAAN,+BAAgB;AAAA,QAClB;AAAA,QAEA,UAAA;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,YAAY,OAAO,uCAAuC;AAAA,YAAA;AAAA,YAE5D,OAAO,EAAE,OAAO,KAAK,OAAO,QAAQ,KAAK,MAAA;AAAA,YAGzC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,KAAK;AAAA,gBACX,aAAa,KAAK;AAAA,gBAClB,WAAU;AAAA,gBACV,eAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAKJ,QAAI,kBAAkB,KAAM,QAAO;AAKnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QAGT,SAAS,CAAC,UAAU;AAClB,cAAI,yBAAyB,eAAA;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,oBAAoB,uBAAuB,WAAW,mBAAmB;AAAA,QAAA;AAAA,QAK3E,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,OACR,gDACA;AAAA,cAAA;AAAA,cAGN,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW;AAAA;AAAA,sBAET,YAAY,OAAO,iBAAiB;AAAA,sBACpC,oBAAoB,qBAAqB;AAAA,oBAAA;AAAA,oBAG1C,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,wBAAwB,QACvB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW;AAAA,sBACT,oBAAoB,qBAAqB;AAAA,oBAAA;AAAA,oBAI3C,OAAO,EAAE,UAAU,wBAAA;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAIJ,oBAAC,QAAA,EAAK,WAAU,sCACb,UAAA,OAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,OAAO,cAAc,iBAAiB,KAAK;AAIpC,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,UAAA;AAAA,EAAU;AAAA;AAAA;AAAA,EAI7D,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA;AAAA;AAAA,IAGN,IAAI,CAAC,aAAa,kBAAkB,YAAY;AAAA,IAChD,IAAI,CAAC,oBAAoB,qBAAqB,mBAAmB,cAAc;AAAA,IAC/E,MAAM,CAAC,WAAW;AAAA,EAAA;AAAA,EAEpB,aAAa;AACf;"}

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.d.ts

@@ -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;
@@ -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,19 +79,19 @@ 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"];

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;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;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B;AAED,QAAA,MAAM,WAAW,4FAiDf,CAAA;AAIF,QAAA,MAAM,WAAW,0JAkBf,CAAA;AAKF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBX,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"}

package/dist/components/Tabs/tabs.js

@@ -53,7 +53,7 @@ const TabsList = React.forwardRef(({ className, size = "sm", overflow = "none",
     TabsPrimitive.List,
     {
       ref,
-      className: cn(TABS_LIST_BASE, "w-fit", className),
+      className: cn(TABS_LIST_BASE, "w-full", className),
       ...props,
       children
     }
@@ -77,7 +77,7 @@ const ScrollTabsList = React.forwardRef(({ className, children, ...props }, ref)
     //   overflow-x:auto + overflow-y:visible 必 compute auto)。
     //   不加 `pb-px`(outer border 撤後 list border 已接 -1px 部分,加 pb 多 1px 多餘空白)。
     //   對齊 Primer UnderlineNav `overflow-x:auto; overflow-y:hidden` canonical 同步動
-    //   horizontal-overflow.spec.md L75/L101/L129 owner 升 list 內部。
+    //   horizontal-overflow.spec.md(「Hook re-export」+「典型 scroll / menu 模式組裝」段)owner 升 list 內部。
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -89,7 +89,7 @@ const ScrollTabsList = React.forwardRef(({ className, children, ...props }, ref)
             TabsPrimitive.List,
             {
               ref,
-              className: cn(TABS_LIST_BASE, "w-fit", className),
+              className: cn(TABS_LIST_BASE, "min-w-full", className),
               ...props,
               children
             }
@@ -156,7 +156,7 @@ const MenuTabsList = React.forwardRef(({ className, children, ...props }, ref) =
             TabsPrimitive.List,
             {
               ref,
-              className: cn(TABS_LIST_BASE, "w-fit", className),
+              className: cn(TABS_LIST_BASE, "min-w-full", className),
               ...props,
               children: enhancedChildren
             }
@@ -199,7 +199,7 @@ const tabsTriggerVariants = cva(
     "transition-colors duration-150",
     "cursor-pointer select-none",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-    // Trigger 無水平 padding — 寬度 = 內容寬度。triggers 間的分隔靠 TabsList 的 gap-[layout-space-loose]
+    // Trigger 無水平 padding — 寬度 = 內容寬度。triggers 間的分隔靠 TabsList 的 gap-[var(--layout-space-loose)]
     // selected underline：::after 絕對定位在 bottom:-1px，2px primary-hover
     // left-0/right-0 因為 trigger 已無 padding，底線等於內容寬度
     // 底線蓋住 TabsList 的 1px gray border，視覺單一線條
@@ -236,43 +236,35 @@ const tabsTriggerVariants = cva(
 const TabsTrigger = React.forwardRef(({ className, startIcon: StartIcon, badge, endIcon: EndIcon, inlineAction, children, ...props }, ref) => {
   const { size } = React.useContext(TabsContext);
   const iconSize = ICON_SIZE[size];
-  const hasSuffix = badge != null || EndIcon !== void 0 || inlineAction != null;
-  return /* @__PURE__ */ jsxs(
+  const hasSuffix = badge != null || EndIcon !== void 0;
+  const hasAction = inlineAction != null;
+  const actionPaddingRight = hasAction ? iconSize + (hasSuffix ? 4 : 8) : void 0;
+  const trigger = /* @__PURE__ */ jsxs(
     TabsPrimitive.Trigger,
     {
       ref,
       className: cn(tabsTriggerVariants({ size }), className),
+      style: hasAction ? { paddingRight: actionPaddingRight } : void 0,
       ...props,
       children: [
         StartIcon && /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }),
         children != null && /* @__PURE__ */ jsx("span", { children }),
         hasSuffix && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
           badge,
-          EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconSize, "aria-hidden": true }),
-          inlineAction != null && // 2026-05-21 split-click invariant:inlineAction 點擊不冒泡到 TabsPrimitive.Trigger。
-          // Radix Tabs 在 3 個 channel 觸發 tab 切換,全部 stopPropagation:
-          //   - onMouseDown(primary, Radix Tabs source code main switch trigger)
-          //   - onFocus(activationMode='automatic' default,focus 落內部按鈕也算「focused」)
-          //   - onKeyDown Enter/Space(鍵盤啟動)
-          // 加 onPointerDown / onClick 防禦其他 framework 慣例。
-          // 對齊 GitHub「Code ▾」/ Linear "Triage..." split-tab 共識。
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              onPointerDown: (e) => e.stopPropagation(),
-              onMouseDown: (e) => e.stopPropagation(),
-              onClick: (e) => e.stopPropagation(),
-              onFocus: (e) => e.stopPropagation(),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") e.stopPropagation();
-              },
-              children: inlineAction
-            }
-          )
+          EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconSize, "aria-hidden": true })
         ] })
       ]
     }
   );
+  if (!hasAction) return trigger;
+  return (
+    // sibling 佈局 wrapper:span(relative)內 trigger + 絕對定位 action。
+    // Radix roving focus 用 collection context 收 trigger,不要求 trigger 是 List 直接子層。
+    /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+      trigger,
+      /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 -translate-y-1/2 right-0 inline-flex items-center", children: inlineAction })
+    ] })
+  );
 });
 TabsTrigger.displayName = "TabsTrigger";
 const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -280,6 +272,12 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
+      // 與 TabsList 的間距 canonical(2026-06-12 user 拍板):--layout-space-tight(md 12px,
+      // density 連動)。依 layoutSpace.spec「親疏 3 級」:Tabs↔Content 同 bundle(第一級,
+      // 元件 spec own),值取規則 3「直接功能依賴 = tight」精神(heading → labeled content 同類)。
+      // 收斂原 DS-wide 四種土法(無間距 / mt-4 / p-4 / pt-4 — M17 假 SSOT)。
+      // full-height 佈局(AppShell pane)用 className="mt-0" 覆寫(tailwind-merge)。
+      "mt-[var(--layout-space-tight)]",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
       className
     ),
@@ -292,10 +290,11 @@ const tabsMeta = {
   family: null,
   // non-family composite / overlay / layout
   variants: {},
+  // 注:`fieldHeight` 為 meta 通用 height key;Tabs **不複用 field-height**,值為 `--tab-height-*`(md density,對齊 spec.md size table + uiSize.css)
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+    sm: { fieldHeight: 32, iconSize: 16, typography: "body" },
+    md: { fieldHeight: 40, iconSize: 16, typography: "body" },
+    lg: { fieldHeight: 48, iconSize: 20, typography: "body-lg" }
   },
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {