@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.82

package/dist/components/ScrollArea/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.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 ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/**\n * ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n *\n * 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n *\n * ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n *   macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n *   Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n *\n * 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n *\n * ScrollArea 用 Radix 包裝自建 overlay 捲軸 → **跨 OS 一致不吃寬度**,\n * 捲動時浮現(hover / scroll 自動顯示)。\n *\n * ── 何時用 ──\n * - DataTable 橫向捲動(水平跑版最明顯場景)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n *\n * ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n */\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn('relative flex flex-col overflow-hidden', className)}\n    {...props}\n  >\n    {/* Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n        原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n        flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n        content height 而非 parent height → 失去 scroll 能力。\n        改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n        `w-full` 保留(水平維度不受影響)。 */}\n    {/* a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n        才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n        visible:outline 用 DS focus ring,不破壞視覺。 */}\n    <ScrollAreaPrimitive.Viewport\n      tabIndex={0}\n      className=\"flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n      className,\n    )}\n    {...props}\n  >\n    {/* Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n         共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n         (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n         前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n         未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.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 scrollAreaMeta = {\n  component: 'ScrollArea',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;AAiCA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.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 ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/**\n * ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n *\n * 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n *\n * ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n *   macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n *   Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n *\n * 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n *\n * ScrollArea 用 Radix 包裝自建 overlay 捲軸 → **跨 OS 一致不吃寬度**,\n * 捲動時浮現(hover / scroll 自動顯示)。\n *\n * ── 何時用 ──\n * - DataTable 橫向捲動(水平跑版最明顯場景)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n *\n * ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n */\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn('relative flex flex-col overflow-hidden', className)}\n    {...props}\n  >\n    {/* Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n        原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n        flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n        content height 而非 parent height → 失去 scroll 能力。\n        改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n        `w-full` 保留(水平維度不受影響)。 */}\n    {/* a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n        才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n        visible:outline 用 DS focus ring,不破壞視覺。 */}\n    <ScrollAreaPrimitive.Viewport\n      tabIndex={0}\n      className=\"flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n      className,\n    )}\n    {...props}\n  >\n    {/* Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n         共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n         (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n         前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n         未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.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 scrollAreaMeta = {\n  component: 'ScrollArea',\n  family: 'self-contained', // 對齊 scroll-area.spec.md frontmatter(SSOT;同 Separator/OverflowIndicator meta 寫法)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;AAiCA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/SegmentedControl/segmented-control.d.ts

@@ -89,10 +89,10 @@ export declare const segmentedControlMeta: {
             readonly purpose: "touch / prominent CTA";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "selected", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface"];
-        readonly fg: readonly ["text-fg-disabled", "text-fg-secondary", "text-foreground"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"];
         readonly ring: readonly ["ring-ring"];
     };
     readonly defaultSize: "md";

package/dist/components/SegmentedControl/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FAmDrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAMD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA4DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FA4DrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EAiDjB,CAAA;AAMD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA4DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/SegmentedControl/segmented-control.js

@@ -41,6 +41,8 @@ const SegmentedControl = React.forwardRef(
   }, ref) => {
     const resolvedSize = useResolvedFieldSize(sizeProp, "md");
     const resolvedDisabled = useResolvedFieldDisabled(disabled);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+    const resolvedValue = value !== void 0 ? value : internalValue;
     const ctxValue = React.useMemo(
       () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),
       [resolvedSize, fullWidth, iconOnly, resolvedDisabled]
@@ -50,10 +52,11 @@ const SegmentedControl = React.forwardRef(
       {
         ref,
         type: "single",
-        value,
-        defaultValue,
+        value: resolvedValue,
         onValueChange: (v) => {
-          if (v) onValueChange == null ? void 0 : onValueChange(v);
+          if (!v) return;
+          if (value === void 0) setInternalValue(v);
+          onValueChange == null ? void 0 : onValueChange(v);
         },
         disabled: resolvedDisabled,
         className: cn(segmentedControlVariants({ fullWidth }), className),
@@ -79,12 +82,19 @@ const itemVariants = cva(
     "disabled:hover:text-fg-disabled disabled:hover:border-border",
     // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover
     "hover:text-foreground hover:border-border-hover hover:z-[5]",
-    // selected: 文字 + 邊框都用 primary-hover,底色維持 bg-surface 不變 (跟 Chip 一致)
-    //   ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則:
-    //      primary-hover 同時染文字和線條;底色不改 (不用 primary-subtle)。
-    //      Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary-hover)。
+    // selected: 文字 + 邊框都用 primary base,底色維持 bg-surface 不變 (跟 Chip 一致)
+    //   ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則(SSOT = semantic.css「選中狀態」段):
+    //      primary base 同時染文字和線條;底色不改 (不用 primary-subtle)。
+    //      2026-07-06 user 拍板:持續選中 hover 階 → base(三家世界級「瞬時弱、持續強」實錘)。
+    //      Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary)。
     //   z-10 讓 border 浮在相鄰 item 之上
-    "data-[state=on]:text-primary-hover data-[state=on]:border-primary-hover data-[state=on]:z-10",
+    "data-[state=on]:text-primary data-[state=on]:border-primary data-[state=on]:z-10",
+    // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 拍板;Button pressed hover 家族
+    // + Ant active hover 同派;跟 Chip 一致,顯式宣告解掉 CSS 平手 source-order 脆弱性)
+    "data-[state=on]:hover:text-primary-hover data-[state=on]:hover:border-primary-hover",
+    // disabled × selected 疊加(2026-07-07 user 拍板統一;M24 disabled 全滅,同 Chip)
+    "data-[state=on]:disabled:border-border data-[state=on]:disabled:text-fg-disabled",
+    "data-[state=on]:disabled:hover:border-border data-[state=on]:disabled:hover:text-fg-disabled",
     // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊
     "first:rounded-l-md last:rounded-r-md",
     "[&:not(:first-child)]:-ml-px"
@@ -151,10 +161,13 @@ const segmentedControlMeta = {
     md: { fieldHeight: 32, typography: "body", iconSize: 16, purpose: "預設 — form field 對齊" },
     lg: { fieldHeight: 36, typography: "body-lg", iconSize: 20, purpose: "touch / prominent CTA" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊:cva 無 active(按下)專屬樣式,移除 'active'
+  // 'selected' = data-[state=on](2026-07-07 meta 詞彙統一補列:持續選中一律 'selected';cva 無按壓 active 樣式)
+  states: ["default", "hover", "selected", "focus-visible", "disabled"],
   tokens: {
     bg: ["bg-surface"],
-    fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground"],
+    fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"],
+    // selected 態 cva data-[state=on]:text-primary 實際消費(2026-07-06 選中改 base)
     ring: ["ring-ring"]
   },
   defaultSize: "md"

package/dist/components/SegmentedControl/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../src/components/SegmentedControl/segmented-control.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 ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize, useResolvedFieldDisabled } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * SegmentedControl — 互斥多選一的 value 選擇器\n *\n * 基於 Radix ToggleGroup（寫死 type=\"single\"），橋接設計系統 token。\n * 內部 item 結構鏡射 Button，但兩者型別獨立。\n *\n * ── 定位 ──\n *   切 value（不是切 view）。塞得進 Field，Tabs 不行。\n *   切 view → Tabs；單一 on/off → Button pressed；>5 個選項 → Select。\n *\n * ── Size（對齊 field-height / Button 系列）──\n *   xs   h-field-xs（24 固定）\n *   sm   h-field-sm（28/32）\n *   md   h-field-md（32/36）★ 預設（跟 Button / Input / 所有 field-height 系列一致）\n *   lg   h-field-lg（36/40）\n *\n * ── fullWidth ──\n *   false  ★ 預設，item 寬度由內容決定（hug content）\n *   true   SegmentedControl 撐滿父容器寬度，所有 item 等分\n *\n * ── Item 結構 ──\n *   [startIcon?] [<span px-1>label</span>] [<span gap-1>suffix?</span>]\n *   suffix 目前只支援 badge；endIcon 為保留 slot、未開放\n *\n * ── iconOnly（group-level）──\n *   整組同時 icon-only 或全帶 label，不可混搭。\n */\n\ntype SegmentedControlSize = 'xs' | 'sm' | 'md' | 'lg'\n\ninterface SegmentedControlContextValue {\n  size: SegmentedControlSize\n  fullWidth: boolean\n  iconOnly: boolean\n  disabled: boolean\n}\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue>({\n  size: 'md',\n  fullWidth: false,\n  iconOnly: false,\n  disabled: false,\n})\n\n// ── Root ──\nconst segmentedControlVariants = cva(\n  'flex items-stretch rounded-md',\n  {\n    variants: {\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-fit',\n      },\n    },\n    defaultVariants: {\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface SegmentedControlProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n      'type' | 'defaultValue' | 'value' | 'onValueChange'\n    > {\n  size?: SegmentedControlSize\n  /** 撐滿父容器寬度，所有 item 等分。預設 false（hug content） */\n  fullWidth?: boolean\n  iconOnly?: boolean\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nconst SegmentedControl = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlProps\n>(\n  (\n    {\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      iconOnly = false,\n      disabled,\n      children,\n      value,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Field 內自動讀 size + disabled,跟 Button 同機制(SSOT resolver hook)\n    const resolvedSize = useResolvedFieldSize<SegmentedControlSize>(sizeProp, 'md')  // SSOT:統一 size resolution(原散落 ?? fieldCtx?.size ?? 'md')\n    const resolvedDisabled = useResolvedFieldDisabled(disabled)\n\n    // Memoize provider value(2026-04-22 D3 perf audit):避免每次父 render 重建 4-field object\n    // 讓 children SegmentedControlItem 不必要 re-render\n    const ctxValue = React.useMemo(\n      () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),\n      [resolvedSize, fullWidth, iconOnly, resolvedDisabled],\n    )\n\n    return (\n      <SegmentedControlContext.Provider value={ctxValue}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          type=\"single\"\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={(v) => {\n            // Radix 的 single ToggleGroup 允許 deselect（返回空字串）\n            // SegmentedControl 是 radio 語意，不允許空值——忽略 deselect\n            if (v) onValueChange?.(v)\n          }}\n          disabled={resolvedDisabled}\n          className={cn(segmentedControlVariants({ fullWidth }), className)}\n          {...props}\n        >\n          {children}\n        </ToggleGroupPrimitive.Root>\n      </SegmentedControlContext.Provider>\n    )\n  }\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n// ── Item ──\n\n/**\n * Icon-only base — Polaris/Atlassian idiom:`aspect-square + p-0 + flex-center`。\n * 0 magic-number、0 公式、0 border-deduction;flex centering(已在 itemVariants base)\n * 自動將 SVG 視覺置中,任何 size / icon 都自然正方形。\n *\n * 對齊 `Button.tsx` 的 `ICON_ONLY_BASE`(2026-04-25 從 padding-formula 派改 padding-free)。\n * Rule-of-3:目前 2 處 consumer(Button + SegmentedControl),尚未抽 utility/token;\n * 第 3 個 host 加入時抽到 `packages/design-system/src/utils/`。\n *\n * 舊公式 `(field-height - icon)/2` 沒扣 border 2px,造成 SegmentedControl item 從\n * 設計 spec「自然正方形」漂移為 34×32 長方形(2026-04-25 audit 發現)。\n */\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\nconst itemVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'whitespace-nowrap font-medium',\n    'border border-border bg-surface text-fg-secondary',\n    'transition-colors duration-150',\n    'cursor-pointer select-none',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-20',\n    // disabled：cursor-not-allowed + 鎖住 hover 色（不用 pointer-events-none，否則 cursor 無法變）\n    // button[disabled] 本身擋 click，不需靠 pointer-events: none\n    'disabled:cursor-not-allowed disabled:text-fg-disabled',\n    'disabled:hover:text-fg-disabled disabled:hover:border-border',\n    // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover\n    'hover:text-foreground hover:border-border-hover hover:z-[5]',\n    // selected: 文字 + 邊框都用 primary-hover,底色維持 bg-surface 不變 (跟 Chip 一致)\n    //   ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則:\n    //      primary-hover 同時染文字和線條;底色不改 (不用 primary-subtle)。\n    //      Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary-hover)。\n    //   z-10 讓 border 浮在相鄰 item 之上\n    'data-[state=on]:text-primary-hover data-[state=on]:border-primary-hover data-[state=on]:z-10',\n    // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊\n    'first:rounded-l-md last:rounded-r-md',\n    '[&:not(:first-child)]:-ml-px',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n        sm: 'h-field-sm px-3 text-body leading-compact gap-1',\n        md: 'h-field-md px-3 text-body leading-compact gap-1',\n        lg: 'h-field-lg px-3 text-body-lg leading-compact gap-1',\n      },\n      fullWidth: {\n        true: 'flex-1 min-w-0',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n)\n\n// iconOnly 是 group-level 決策（由 <SegmentedControl iconOnly> 控制），\n// 不是 per-item 決策，所以 Item 型別不用 discriminated union 強制 iconOnly。\n// 但當 group iconOnly = true 時，每個 item 必須提供 startIcon + aria-label——\n// 這是語意契約，在 render 階段檢查並在 dev mode 發出警告（TS 層做不到這層檢查）。\nexport interface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  /** 左側 icon（LucideIcon）。group iconOnly = true 時必填。 */\n  startIcon?: LucideIcon\n  /** 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 */\n  badge?: React.ReactNode\n  /**\n   * 無障礙名稱。帶 label 時可選（label 已傳達語意），\n   * 但 group iconOnly = true 時必填——同時驅動 screen reader 和自動 tooltip。\n   */\n  'aria-label'?: string\n  children?: React.ReactNode\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ className, startIcon: StartIcon, badge, children, 'aria-label': ariaLabel, ...restProps }, ref) => {\n  const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext)\n  // 2026-05-18 改 per user 拍板「沒機械化導致偏移」+「做完」approval(對齊 Button xs / uiSize Icon Tier):\n  // 原 xs=14 跟 Button xs=16 不一致,xs/sm/md 統一 16 對齊 uiSize.spec.md(xs/sm/md→16, lg→20)。\n  // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  // 2026-05-31 #14:ICON_SIZE 只有 sm/md/lg key,size='xs' 會落 undefined → 對齊上方註解「xs/sm/md 統一 16」讓 xs 取 sm(16px)。\n  const iconSize = size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size as 'sm' | 'md' | 'lg']\n  const hasSuffix = badge != null\n\n  // Dev-mode 語意契約檢查：group iconOnly = true 時，item 必須有 startIcon + aria-label\n  if (import.meta.env?.DEV && groupIconOnly) {\n    if (!StartIcon) {\n      console.warn(\n        '[SegmentedControl] iconOnly 群組內的 item 必須提供 startIcon。'\n      )\n    }\n    if (!ariaLabel) {\n      console.warn(\n        '[SegmentedControl] iconOnly 群組內的 item 必須提供 aria-label（作為無障礙名稱與自動 tooltip 來源）。'\n      )\n    }\n  }\n\n  const effectiveIconOnly = groupIconOnly\n\n  const itemEl = (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemVariants({ size, fullWidth }),\n        effectiveIconOnly && ICON_ONLY_BASE,\n        className,\n      )}\n      aria-label={ariaLabel}\n      {...restProps}\n    >\n      {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n      {!effectiveIconOnly && children != null && <span className=\"px-1\">{children}</span>}\n      {/* suffix wrapper：即使目前只有 badge，wrapper 從第一天就存在，\n          未來若開放 endIcon，直接加入此 span 內 gap-1 自動生效 */}\n      {hasSuffix && !effectiveIconOnly && (\n        <span className=\"inline-flex items-center gap-1\">{badge}</span>\n      )}\n    </ToggleGroupPrimitive.Item>\n  )\n\n  // icon-only 自動包 Tooltip（與 Button icon-only 一致）\n  if (effectiveIconOnly && typeof ariaLabel === 'string') {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{itemEl}</TooltipTrigger>\n        <TooltipContent>{ariaLabel}</TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return itemEl\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Sizes 真實 cva keys = xs/sm/md/lg(itemVariants.size),映射 field-height-* token tier\n// SegmentedControl 無語意 variant(選中 vs 未選 是 state 不是 variant)— 與 Button.variant 刻意不同(spec「與 Button 的血緣」段)\nexport const segmentedControlMeta = {\n  component: 'SegmentedControl',\n  family: 3, // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42\n  variants: {},\n  sizes: {\n    xs: { fieldHeight: 24, typography: 'caption', iconSize: 16, purpose: 'row-embedded inline action / DataTable inline filter' },\n    sm: { fieldHeight: 28, typography: 'body', iconSize: 16, purpose: 'compact chrome bar / dense toolbar' },\n    md: { fieldHeight: 32, typography: 'body', iconSize: 16, purpose: '預設 — form field 對齊' },\n    lg: { fieldHeight: 36, typography: 'body-lg', iconSize: 20, purpose: 'touch / prominent CTA' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { SegmentedControl, SegmentedControlItem, segmentedControlVariants, itemVariants as segmentedControlItemVariants }\nexport type { SegmentedControlSize }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../src/components/SegmentedControl/segmented-control.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 ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize, useResolvedFieldDisabled } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * SegmentedControl — 互斥多選一的 value 選擇器\n *\n * 基於 Radix ToggleGroup（寫死 type=\"single\"），橋接設計系統 token。\n * 內部 item 結構鏡射 Button，但兩者型別獨立。\n *\n * ── 定位 ──\n *   切 value（不是切 view）。塞得進 Field，Tabs 不行。\n *   切 view → Tabs；單一 on/off → Button pressed；>5 個選項 → Select。\n *\n * ── Size（對齊 field-height / Button 系列）──\n *   xs   h-field-xs（24 固定）\n *   sm   h-field-sm（28/32）\n *   md   h-field-md（32/36）★ 預設（跟 Button / Input / 所有 field-height 系列一致）\n *   lg   h-field-lg（36/40）\n *\n * ── fullWidth ──\n *   false  ★ 預設，item 寬度由內容決定（hug content）\n *   true   SegmentedControl 撐滿父容器寬度，所有 item 等分\n *\n * ── Item 結構 ──\n *   [startIcon?] [<span px-1>label</span>] [<span gap-1>suffix?</span>]\n *   suffix 目前只支援 badge；endIcon 為保留 slot、未開放\n *\n * ── iconOnly（group-level）──\n *   整組同時 icon-only 或全帶 label，不可混搭。\n */\n\ntype SegmentedControlSize = 'xs' | 'sm' | 'md' | 'lg'\n\ninterface SegmentedControlContextValue {\n  size: SegmentedControlSize\n  fullWidth: boolean\n  iconOnly: boolean\n  disabled: boolean\n}\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue>({\n  size: 'md',\n  fullWidth: false,\n  iconOnly: false,\n  disabled: false,\n})\n\n// ── Root ──\nconst segmentedControlVariants = cva(\n  'flex items-stretch rounded-md',\n  {\n    variants: {\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-fit',\n      },\n    },\n    defaultVariants: {\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface SegmentedControlProps\n  extends Omit<\n      React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n      'type' | 'defaultValue' | 'value' | 'onValueChange'\n    > {\n  size?: SegmentedControlSize\n  /** 撐滿父容器寬度，所有 item 等分。預設 false（hug content） */\n  fullWidth?: boolean\n  iconOnly?: boolean\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nconst SegmentedControl = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlProps\n>(\n  (\n    {\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      iconOnly = false,\n      disabled,\n      children,\n      value,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Field 內自動讀 size + disabled,跟 Button 同機制(SSOT resolver hook)\n    const resolvedSize = useResolvedFieldSize<SegmentedControlSize>(sizeProp, 'md')  // SSOT:統一 size resolution(原散落 ?? fieldCtx?.size ?? 'md')\n    const resolvedDisabled = useResolvedFieldDisabled(disabled)\n\n    // 2026-07-04:恆 controlled mirror(見下方 onValueChange 註解)— uncontrolled consumer 的\n    // defaultValue 收進 internal state,Radix 永遠拿 controlled value → deselect 空值可攔。\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? '')  // '' = controlled 無選取(恆 controlled 從 mount 起,避免 un→controlled 切換)\n    const resolvedValue = value !== undefined ? value : internalValue\n\n    // Memoize provider value(2026-04-22 D3 perf audit):避免每次父 render 重建 4-field object\n    // 讓 children SegmentedControlItem 不必要 re-render\n    const ctxValue = React.useMemo(\n      () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),\n      [resolvedSize, fullWidth, iconOnly, resolvedDisabled],\n    )\n\n    return (\n      <SegmentedControlContext.Provider value={ctxValue}>\n        <ToggleGroupPrimitive.Root\n          ref={ref}\n          type=\"single\"\n          value={resolvedValue}\n          onValueChange={(v) => {\n            // Radix 的 single ToggleGroup 允許 deselect（返回空字串）\n            // SegmentedControl 是 radio 語意，不允許空值——忽略 deselect。\n            // 2026-07-04 修:原 uncontrolled(只傳 defaultValue)時 Radix 內部 state 直通,\n            // 點已選中項照樣 deselect 成空值(spec:236「恆有一值」失守)→ wrapper 恆 controlled\n            // (internalValue mirror),空字串一律不進 state 也不呼叫 consumer callback。\n            if (!v) return\n            if (value === undefined) setInternalValue(v)\n            onValueChange?.(v)\n          }}\n          disabled={resolvedDisabled}\n          className={cn(segmentedControlVariants({ fullWidth }), className)}\n          {...props}\n        >\n          {children}\n        </ToggleGroupPrimitive.Root>\n      </SegmentedControlContext.Provider>\n    )\n  }\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n// ── Item ──\n\n/**\n * Icon-only base — Polaris/Atlassian idiom:`aspect-square + p-0 + flex-center`。\n * 0 magic-number、0 公式、0 border-deduction;flex centering(已在 itemVariants base)\n * 自動將 SVG 視覺置中,任何 size / icon 都自然正方形。\n *\n * 對齊 `Button.tsx` 的 `ICON_ONLY_BASE`(2026-04-25 從 padding-formula 派改 padding-free)。\n * Rule-of-3:目前 2 處 consumer(Button + SegmentedControl),尚未抽 utility/token;\n * 第 3 個 host 加入時抽到 `packages/design-system/src/utils/`。\n *\n * 舊公式 `(field-height - icon)/2` 沒扣 border 2px,造成 SegmentedControl item 從\n * 設計 spec「自然正方形」漂移為 34×32 長方形(2026-04-25 audit 發現)。\n */\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\nconst itemVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'whitespace-nowrap font-medium',\n    'border border-border bg-surface text-fg-secondary',\n    'transition-colors duration-150',\n    'cursor-pointer select-none',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-20',\n    // disabled：cursor-not-allowed + 鎖住 hover 色（不用 pointer-events-none，否則 cursor 無法變）\n    // button[disabled] 本身擋 click，不需靠 pointer-events: none\n    'disabled:cursor-not-allowed disabled:text-fg-disabled',\n    'disabled:hover:text-fg-disabled disabled:hover:border-border',\n    // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover\n    'hover:text-foreground hover:border-border-hover hover:z-[5]',\n    // selected: 文字 + 邊框都用 primary base,底色維持 bg-surface 不變 (跟 Chip 一致)\n    //   ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則(SSOT = semantic.css「選中狀態」段):\n    //      primary base 同時染文字和線條;底色不改 (不用 primary-subtle)。\n    //      2026-07-06 user 拍板:持續選中 hover 階 → base(三家世界級「瞬時弱、持續強」實錘)。\n    //      Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary)。\n    //   z-10 讓 border 浮在相鄰 item 之上\n    'data-[state=on]:text-primary data-[state=on]:border-primary data-[state=on]:z-10',\n    // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 拍板;Button pressed hover 家族\n    // + Ant active hover 同派;跟 Chip 一致,顯式宣告解掉 CSS 平手 source-order 脆弱性)\n    'data-[state=on]:hover:text-primary-hover data-[state=on]:hover:border-primary-hover',\n    // disabled × selected 疊加(2026-07-07 user 拍板統一;M24 disabled 全滅,同 Chip)\n    'data-[state=on]:disabled:border-border data-[state=on]:disabled:text-fg-disabled',\n    'data-[state=on]:disabled:hover:border-border data-[state=on]:disabled:hover:text-fg-disabled',\n    // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊\n    'first:rounded-l-md last:rounded-r-md',\n    '[&:not(:first-child)]:-ml-px',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n        sm: 'h-field-sm px-3 text-body leading-compact gap-1',\n        md: 'h-field-md px-3 text-body leading-compact gap-1',\n        lg: 'h-field-lg px-3 text-body-lg leading-compact gap-1',\n      },\n      fullWidth: {\n        true: 'flex-1 min-w-0',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n)\n\n// iconOnly 是 group-level 決策（由 <SegmentedControl iconOnly> 控制），\n// 不是 per-item 決策，所以 Item 型別不用 discriminated union 強制 iconOnly。\n// 但當 group iconOnly = true 時，每個 item 必須提供 startIcon + aria-label——\n// 這是語意契約，在 render 階段檢查並在 dev mode 發出警告（TS 層做不到這層檢查）。\nexport interface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  /** 左側 icon（LucideIcon）。group iconOnly = true 時必填。 */\n  startIcon?: LucideIcon\n  /** 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 */\n  badge?: React.ReactNode\n  /**\n   * 無障礙名稱。帶 label 時可選（label 已傳達語意），\n   * 但 group iconOnly = true 時必填——同時驅動 screen reader 和自動 tooltip。\n   */\n  'aria-label'?: string\n  children?: React.ReactNode\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ className, startIcon: StartIcon, badge, children, 'aria-label': ariaLabel, ...restProps }, ref) => {\n  const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext)\n  // 2026-05-18 改 per user 拍板「沒機械化導致偏移」+「做完」approval(對齊 Button xs / uiSize Icon Tier):\n  // 原 xs=14 跟 Button xs=16 不一致,xs/sm/md 統一 16 對齊 uiSize.spec.md(xs/sm/md→16, lg→20)。\n  // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  // 2026-05-31 #14:ICON_SIZE 只有 sm/md/lg key,size='xs' 會落 undefined → 對齊上方註解「xs/sm/md 統一 16」讓 xs 取 sm(16px)。\n  const iconSize = size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size as 'sm' | 'md' | 'lg']\n  const hasSuffix = badge != null\n\n  // Dev-mode 語意契約檢查：group iconOnly = true 時，item 必須有 startIcon + aria-label\n  if (import.meta.env?.DEV && groupIconOnly) {\n    if (!StartIcon) {\n      console.warn(\n        '[SegmentedControl] iconOnly 群組內的 item 必須提供 startIcon。'\n      )\n    }\n    if (!ariaLabel) {\n      console.warn(\n        '[SegmentedControl] iconOnly 群組內的 item 必須提供 aria-label（作為無障礙名稱與自動 tooltip 來源）。'\n      )\n    }\n  }\n\n  const effectiveIconOnly = groupIconOnly\n\n  const itemEl = (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        itemVariants({ size, fullWidth }),\n        effectiveIconOnly && ICON_ONLY_BASE,\n        className,\n      )}\n      aria-label={ariaLabel}\n      {...restProps}\n    >\n      {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n      {!effectiveIconOnly && children != null && <span className=\"px-1\">{children}</span>}\n      {/* suffix wrapper：即使目前只有 badge，wrapper 從第一天就存在，\n          未來若開放 endIcon，直接加入此 span 內 gap-1 自動生效 */}\n      {hasSuffix && !effectiveIconOnly && (\n        <span className=\"inline-flex items-center gap-1\">{badge}</span>\n      )}\n    </ToggleGroupPrimitive.Item>\n  )\n\n  // icon-only 自動包 Tooltip（與 Button icon-only 一致）\n  if (effectiveIconOnly && typeof ariaLabel === 'string') {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{itemEl}</TooltipTrigger>\n        <TooltipContent>{ariaLabel}</TooltipContent>\n      </Tooltip>\n    )\n  }\n\n  return itemEl\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Sizes 真實 cva keys = xs/sm/md/lg(itemVariants.size),映射 field-height-* token tier\n// SegmentedControl 無語意 variant(選中 vs 未選 是 state 不是 variant)— 與 Button.variant 刻意不同(spec「與 Button 的血緣」段)\nexport const segmentedControlMeta = {\n  component: 'SegmentedControl',\n  family: 3, // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42\n  variants: {},\n  sizes: {\n    xs: { fieldHeight: 24, typography: 'caption', iconSize: 16, purpose: 'row-embedded inline action / DataTable inline filter' },\n    sm: { fieldHeight: 28, typography: 'body', iconSize: 16, purpose: 'compact chrome bar / dense toolbar' },\n    md: { fieldHeight: 32, typography: 'body', iconSize: 16, purpose: '預設 — form field 對齊' },\n    lg: { fieldHeight: 36, typography: 'body-lg', iconSize: 20, purpose: 'touch / prominent CTA' },\n  },\n  // 2026-07-04 audit 對齊:cva 無 active(按下)專屬樣式,移除 'active'\n  // 'selected' = data-[state=on](2026-07-07 meta 詞彙統一補列:持續選中一律 'selected';cva 無按壓 active 樣式)\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'], // selected 態 cva data-[state=on]:text-primary 實際消費(2026-07-06 選中改 base)\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { SegmentedControl, SegmentedControlItem, segmentedControlVariants, itemVariants as segmentedControlItemVariants }\nexport type { SegmentedControlSize }\n"],"names":[],"mappings":"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"}

package/dist/components/Select/select.d.ts

@@ -51,9 +51,10 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
     startIcon?: LucideIcon;
     /** 啟用搜尋（desktop 時 field 變 input，打字即篩選） */
     searchable?: boolean;
-    /** Loading state(2026-05-15 audit B fix per user verbatim「dropdown 隨時可開,讀取在 panel 中間 CircularProgress」)。
-     *  Forward 給 SelectMenu primitive SSOT;dropdown 開啟時取代 options 顯 CircularProgress + loadingText。
-     *  Trigger 不變(chevron 保留 user 隨時可點開)。對齊 Field family loading SSOT + Empty 元件 `<Empty icon={CircularProgress}/>` compose。*/
+    /** Loading state(2026-05-15 audit B fix;2026-07-04 Q3 拍板措辭修訂)。
+     *  Forward 給 SelectMenu primitive SSOT;spinner 只在**無可顯示選項時**佔 empty slot(cmdk CommandEmpty
+     *  機制)— 已有 stale options 時保留顯示不清空(對齊 MUI Autocomplete「only if there are no suggestions」)。
+     *  Trigger 不變(chevron 保留 user 隨時可點開)。*/
     loading?: boolean;
     /** Menu list 最小列數(空狀態 / 選項少時的視覺一致 reserve)。預設 3 — 選項 < 3 時顯式縮(如 And/Or 兩選項) */
     minRows?: number;
@@ -84,6 +85,11 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
      * (avatar + name)而非純文字 label。對齊 PeoplePicker = Select wrapper SSOT。
      */
     selectedItemRenderer?: (selectedOpt: SelectOption) => React.ReactNode;
+    /** 搜尋無結果提示(2026-07-04 Q4 拍板接線 — 原 spec 宣稱可覆寫但 prop 從未轉發)。
+     *  Forward 給 SelectMenu primitive SSOT(default 在 SelectMenu 層「沒有符合的選項」);
+     *  僅 Custom path(searchable dropdown)生效,Native path 無搜尋空狀態。
+     *  對齊 MUI noOptionsText / Ant notFoundContent / Polaris emptyState 三家公開覆寫點共識。 */
+    emptyText?: string;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement | HTMLSelectElement>>;
 export declare const selectMeta: {
@@ -91,7 +97,7 @@ export declare const selectMeta: {
     readonly family: 4;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];

package/dist/components/Select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAK3F,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,mDAAmD,CAAA;AAcrG;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,2CAA2C;AAC3C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAID,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC3G,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;;;kGAI8F;IAC9F,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;+HAE2H;IAC3H,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;0EAEsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;CACtE;AAohBD,QAAA,MAAM,MAAM,wGAUX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAK3F,OAAO,EAAwD,KAAK,gBAAgB,EAAE,MAAM,mDAAmD,CAAA;AAc/I;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,2CAA2C;AAC3C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAID,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC3G,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;;;kGAI8F;IAC9F,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;4CAGwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;0EAEsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;IACrE;;;qFAGiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwjBD,QAAA,MAAM,MAAM,wGAUX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;CAgBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Select/select.js

@@ -6,7 +6,7 @@ import { bareInputStyles, fieldWrapperStyles, EMPTY_DISPLAY, fieldDisplayTextCla
 import { Tag } from "../Tag/tag.js";
 import { ItemPrefix, ItemSuffix, ICON_SIZE, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldDisabled, useResolvedFieldSize, useResolvedFieldMode, useResolvedFieldVariant } from "../Field/field-context.js";
-import { SelectMenu } from "../SelectMenu/select-menu.js";
+import { useActiveDescendant, forwardKeyToListbox, SelectMenu } from "../SelectMenu/select-menu.js";
 import { useIsTouchDevice } from "../../hooks/use-is-touch-device.js";
 import { useControllable } from "../../hooks/use-controllable.js";
 const tagPadding = {
@@ -52,6 +52,9 @@ function CustomSelectTriggerContent({
   search,
   setSearch,
   inputRef,
+  activeDescendantId,
+  ariaLabel,
+  labelId,
   selectedItemRenderer
 }) {
   if (searchable && open) {
@@ -65,6 +68,9 @@ function CustomSelectTriggerContent({
           ref: inputRef,
           value: search,
           onChange: (e) => setSearch(e.target.value),
+          "aria-activedescendant": activeDescendantId,
+          "aria-label": ariaLabel ?? "搜尋選項",
+          "aria-labelledby": ariaLabel ? void 0 : labelId,
           placeholder: showSelectedOverlay ? "" : triggerEmptyPlaceholder,
           className: cn(bareInputStyles, "cursor-text"),
           autoFocus: true
@@ -166,7 +172,37 @@ function ReadonlyDisplay({
   ] });
 }
 const NativeSelect = React.forwardRef(
-  ({ mode, variant: variantProp, error: errorProp = false, size: sizeProp, options, value: valueProp, defaultValue, onChange, placeholder, className, disabled: disabledProp, clearable = false, display = "plain", startIcon: StartIcon, showDisplayEndIcon, id: idProp, "aria-describedby": ariaDescribedByProp, "aria-errormessage": ariaErrorMessageProp, ...props }, ref) => {
+  ({
+    mode,
+    variant: variantProp,
+    error: errorProp = false,
+    size: sizeProp,
+    options,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    placeholder,
+    className,
+    disabled: disabledProp,
+    clearable = false,
+    display = "plain",
+    startIcon: StartIcon,
+    showDisplayEndIcon,
+    id: idProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-errormessage": ariaErrorMessageProp,
+    // 2026-07-04:Custom-path-only props 顯式 destructure 丟棄(不 spread 到原生 <select> 消 React
+    // unknown-prop warning);各 prop docblock 已註「僅 Custom path 生效」語意
+    searchable: _searchable,
+    groups: _groups,
+    loading: _loading,
+    minRows: _minRows,
+    emptyText: _emptyText,
+    defaultOpen: _defaultOpen,
+    onOpenChange: _onOpenChange,
+    selectedItemRenderer: _selectedItemRenderer,
+    ...props
+  }, ref) => {
     const fieldCtx = useFieldContext();
     const error = useResolvedFieldInvalid(errorProp);
     const disabled = useResolvedFieldDisabled(disabledProp);
@@ -207,7 +243,7 @@ const NativeSelect = React.forwardRef(
         ...props,
         children: [
           placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
-          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
         ]
       }
     );
@@ -222,10 +258,9 @@ const NativeSelect = React.forwardRef(
         "div",
         {
           className: cn(
-            fieldWrapperStyles({ mode: "edit", variant, size }),
+            fieldWrapperStyles({ mode: "edit", variant, size, error }),
             value && tagPadding[size],
             "relative",
-            error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
             className
           ),
           style: { paddingRight: "var(--field-px)" },
@@ -245,8 +280,7 @@ const NativeSelect = React.forwardRef(
       "div",
       {
         className: cn(
-          fieldWrapperStyles({ mode: "edit", variant, size }),
-          error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
+          fieldWrapperStyles({ mode: "edit", variant, size, error }),
           className
         ),
         "data-field-mode": "edit",
@@ -264,7 +298,7 @@ const NativeSelect = React.forwardRef(
 );
 NativeSelect.displayName = "NativeSelect";
 const CustomSelect = React.forwardRef(
-  ({ mode, variant: variantProp, error: errorProp = false, size: sizeProp, options, groups, value: valueProp, defaultValue, onChange, placeholder, className, disabled: disabledProp, clearable = false, display = "plain", startIcon: StartIcon, searchable = false, loading, minRows, defaultOpen = false, onOpenChange, selectedItemRenderer, showDisplayEndIcon, id: idProp, "aria-describedby": ariaDescribedByProp, "aria-errormessage": ariaErrorMessageProp, "aria-label": ariaLabel }, ref) => {
+  ({ mode, variant: variantProp, error: errorProp = false, size: sizeProp, options, groups, value: valueProp, defaultValue, onChange, placeholder, className, disabled: disabledProp, clearable = false, display = "plain", startIcon: StartIcon, searchable = false, loading, minRows, emptyText, defaultOpen = false, onOpenChange, selectedItemRenderer, showDisplayEndIcon, id: idProp, "aria-describedby": ariaDescribedByProp, "aria-errormessage": ariaErrorMessageProp, "aria-label": ariaLabel }, ref) => {
     const fieldCtx = useFieldContext();
     const error = useResolvedFieldInvalid(errorProp);
     const disabled = useResolvedFieldDisabled(disabledProp);
@@ -282,6 +316,8 @@ const CustomSelect = React.forwardRef(
     const [open, setOpen] = React.useState(defaultOpen);
     const [search, setSearch] = React.useState("");
     const inputRef = React.useRef(null);
+    const listboxId = React.useId();
+    const activeOptionId = useActiveDescendant(listboxId, open);
     React.useEffect(() => {
       if (!open) setSearch("");
     }, [open]);
@@ -339,6 +375,9 @@ const CustomSelect = React.forwardRef(
         search,
         setSearch,
         inputRef,
+        activeDescendantId: activeOptionId,
+        ariaLabel,
+        labelId: fieldCtx == null ? void 0 : fieldCtx.labelId,
         selectedItemRenderer
       }
     );
@@ -350,20 +389,20 @@ const CustomSelect = React.forwardRef(
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
         "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabel ? void 0 : fieldCtx == null ? void 0 : fieldCtx.labelId,
         "aria-invalid": error || void 0,
         "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
         "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
         "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
         tabIndex: 0,
         className: cn(
-          fieldWrapperStyles({ mode: "edit", variant, size }),
+          fieldWrapperStyles({ mode: "edit", variant, size, error }),
           !isTextDisplay && value && !searchable && tagPadding[size],
           // 2026-05-06 v13.3 SSOT retire:per-control `open && 'border-primary'` 移除。Field default
-          // state machine `data-[state=open]:border-border-hover`(灰深)處理 open;若 trigger focused
-          // (Radix focus on open),focus-within:!border-primary 強制勝出顯藍。focus dominates everything
-          // 全 DS 一致(Material/Polaris/Ant 共識),改 Field default 一處全 control 自動跟動。
-          error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
+          // state machine `data-[state=open]:border-border-hover`(灰深)處理 open。
+          // 2026-07-04 Q1:error border 同樣收進 fieldWrapperStyles error variant(error 勝 focus 色)。
           "cursor-pointer",
           className
         ),
@@ -371,6 +410,7 @@ const CustomSelect = React.forwardRef(
         "data-field-mode": "edit",
         "data-error": error ? "" : void 0,
         onKeyDown: (e) => {
+          if (open && forwardKeyToListbox(listboxId, e)) return;
           if (e.key === "Enter" || e.key === " ") {
             if (!open) {
               e.preventDefault();
@@ -399,6 +439,7 @@ const CustomSelect = React.forwardRef(
         onValueChange: handleValueChange,
         searchable: false,
         loading,
+        emptyText,
         size,
         minRows,
         open,
@@ -406,6 +447,7 @@ const CustomSelect = React.forwardRef(
           setOpen(o);
           onOpenChange == null ? void 0 : onOpenChange(o);
         },
+        contentId: listboxId,
         renderLabel,
         onOpenAutoFocus: searchable ? (e) => {
           var _a;
@@ -433,7 +475,8 @@ const selectMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'active' 移除 — trigger 走 Field chrome、menu row 走 MenuItem(其 meta 無 active)(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
     bg: [],
     fg: ["text-fg-disabled", "text-fg-muted"],