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

package/dist/components/Rating/rating.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Star } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
 const SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 };
 const CONTAINER_HEIGHT = {
   xs: "h-field-xs",
@@ -18,16 +18,22 @@ const Rating = React.forwardRef(
     max = 5,
     size: sizeProp,
     precision = "full",
-    readOnly = false,
-    disabled = false,
+    readOnly: readOnlyProp = false,
+    disabled: disabledProp,
     loading = false,
     icon: Icon = Star,
     className,
     ...props
   }, ref) => {
+    var _a;
+    if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production" && (max > 7 || max < 1 || Math.round(max) !== max)) {
+      console.warn(`[DS] Rating max ${max} 超出 canonical 範圍 1-7(或非整數)。建議 ≤7 顆星(對齊世界級 review-stars)。`);
+    }
     const fieldCtx = useFieldContext();
-    const fieldSize = fieldCtx == null ? void 0 : fieldCtx.size;
-    const size = sizeProp ?? fieldSize ?? "xs";
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode: void 0, disabled, readOnly: readOnlyProp });
+    const readOnly = readOnlyProp || resolvedMode === "readonly";
+    const size = useResolvedFieldSize(sizeProp, "xs");
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [hoverValue, setHoverValue] = React.useState(null);
     const isControlled = value !== void 0;
@@ -61,12 +67,12 @@ const Rating = React.forwardRef(
       {
         ref,
         role: isInteractive ? "slider" : "img",
+        "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
         "aria-valuenow": isInteractive ? currentValue : void 0,
         "aria-valuemin": isInteractive ? 0 : void 0,
         "aria-valuemax": isInteractive ? max : void 0,
         "aria-valuetext": isInteractive ? `${currentValue} of ${max} stars` : void 0,
         "aria-disabled": disabled || void 0,
-        "aria-readonly": isInteractive && readOnly ? true : void 0,
         "aria-busy": loading || void 0,
         tabIndex: isInteractive ? 0 : void 0,
         onKeyDown: handleKeyDown,
@@ -133,9 +139,9 @@ function StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onCli
       }
     );
   }
-  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", style: { width: sizePx, height: sizePx }, children: [
-    /* @__PURE__ */ jsx(Icon, { size: sizePx, fill: FILL_EMPTY, stroke: "none", className: "absolute inset-0", style: { color: FILL_EMPTY } }),
-    /* @__PURE__ */ jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: sizePx * fillRatio }, children: /* @__PURE__ */ jsx(Icon, { size: sizePx, fill: FILL_FILLED, stroke: "none", style: { color: FILL_FILLED } }) }),
+  return /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative inline-flex", style: { width: sizePx, height: sizePx }, children: [
+    /* @__PURE__ */ jsx(Icon, { size: sizePx, fill: FILL_EMPTY, stroke: "none", "aria-hidden": true, className: "absolute inset-0", style: { color: FILL_EMPTY } }),
+    /* @__PURE__ */ jsx("span", { className: "absolute inset-0 overflow-hidden", style: { width: sizePx * fillRatio }, children: /* @__PURE__ */ jsx(Icon, { size: sizePx, fill: FILL_FILLED, stroke: "none", "aria-hidden": true, style: { color: FILL_FILLED } }) }),
     interactive && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "span",
@@ -162,7 +168,8 @@ function StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onCli
 }
 const ratingMeta = {
   component: "Rating",
-  family: 4,
+  family: null,
+  // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)
   variants: {},
   sizes: {},
   states: ["default", "hover", "active", "focus-visible", "disabled"],

package/dist/components/Rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.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 { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\n\n/**\n * Rating — 星星評分元件\n *\n * 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n *\n * ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - display:已提交評分的唯讀呈現(商品清單星等)\n *\n * ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--color-neutral-4)`(灰色;與 disabled/empty 同級)。\n *\n * ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n *\n * ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n */\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 **Avatar / identity icon**,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 **item-anatomy inline Avatar sizes**:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-*`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - **Standalone**(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n//   對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - **Field 內**(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' | 'sm' | 'md' | 'lg', string> = {\n  xs: 'h-field-xs',\n  sm: 'h-field-sm',\n  md: 'h-field-md',\n  lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** 當前評分(0 ~ max) */\n  value?: number\n  /** 預設值(uncontrolled) */\n  defaultValue?: number\n  /** 評分改變 callback */\n  onChange?: (value: number) => void\n  /** 滿分(預設 5) */\n  max?: number\n  /** 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg */\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  /** 精度:full = 整星,half = 半星 */\n  precision?: 'full' | 'half'\n  /** 唯讀(無 hover / click 響應) */\n  readOnly?: boolean\n  /** 完全停用 */\n  disabled?: boolean\n  /**\n   * Loading 狀態 — 正在取得既有評分 / 正在儲存。\n   * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n   * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n   * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n   */\n  loading?: boolean\n  /** 自訂 icon(預設 Star);傳 LucideIcon */\n  icon?: LucideIcon\n  /** a11y label(readOnly 時必填,interactive 時建議填) */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onChange,\n      max = 5,\n      size: sizeProp,\n      precision = 'full',\n      readOnly = false,\n      disabled = false,\n      loading = false,\n      icon: Icon = Star,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Context-aware default size(AR31 canonical):\n    //   - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n    //   - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n    // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n    // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n    const fieldCtx = useFieldContext()\n    const fieldSize = fieldCtx?.size as ('sm' | 'md' | 'lg' | undefined)\n    const size: 'xs' | 'sm' | 'md' | 'lg' =\n      sizeProp ?? fieldSize ?? 'xs'\n    const [internalValue, setInternalValue] = React.useState(defaultValue)\n    const [hoverValue, setHoverValue] = React.useState<number | null>(null)\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? value : internalValue\n    const displayValue = hoverValue ?? currentValue\n    const iconPx = SIZE_PX[size]\n    const isInteractive = !readOnly && !disabled && !loading\n\n    const setValue = (v: number) => {\n      if (!isControlled) setInternalValue(v)\n      onChange?.(v)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!isInteractive) return\n      const step = precision === 'half' ? 0.5 : 1\n      // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setValue(Math.min(max, currentValue + step))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setValue(Math.max(0, currentValue - step))\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        setValue(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        setValue(max)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={isInteractive ? 'slider' : 'img'}\n        aria-valuenow={isInteractive ? currentValue : undefined}\n        aria-valuemin={isInteractive ? 0 : undefined}\n        aria-valuemax={isInteractive ? max : undefined}\n        aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n        aria-disabled={disabled || undefined}\n        // a11y: aria-readonly 只允許於 slider role(非 img)— axe aria-allowed-attr 2026-04-25\n        aria-readonly={isInteractive && readOnly ? true : undefined}\n        aria-busy={loading || undefined}\n        tabIndex={isInteractive ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        onMouseLeave={() => setHoverValue(null)}\n        className={cn(\n          'inline-flex items-center gap-1',\n          // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n          CONTAINER_HEIGHT[size],\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n          // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n          (disabled || loading) && 'opacity-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        {Array.from({ length: max }, (_, i) => {\n          const starValue = i + 1\n          const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n          const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n          return (\n            <StarIcon\n              key={i}\n              Icon={Icon}\n              sizePx={iconPx}\n              fillRatio={fillRatio}\n              isHalf={isHalf}\n              interactive={isInteractive}\n              onHover={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setHoverValue(v)\n              }}\n              onClick={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setValue(v)\n              }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n  Icon: LucideIcon\n  sizePx: number\n  fillRatio: number // 0..1\n  isHalf: boolean\n  interactive: boolean\n  onHover: (halfFirst: boolean) => void\n  onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n  // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n  // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n  // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n  if (!isHalf) {\n    // Full: 一整顆 fill(filled 或 empty)\n    const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n    return (\n      <span\n        role=\"presentation\"\n        onMouseEnter={interactive ? () => onHover(false) : undefined}\n        onClick={interactive ? () => onClick(false) : undefined}\n        className={cn(\n          'inline-flex',\n          interactive ? 'cursor-pointer' : 'cursor-default',\n        )}\n        style={{ color: fill }}\n        aria-hidden\n      >\n        {/* stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(1.5px 黑線),\n            讓星星是純 fill-only 的 shape——fill 與 outline 同色視覺上仍有亮度差。\n            世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。*/}\n        <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n      </span>\n    )\n  }\n\n  // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n  return (\n    <span className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n      <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n      <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx * fillRatio }}>\n        <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" style={{ color: FILL_FILLED }} />\n      </span>\n      {interactive && (\n        <>\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(true)}\n            onClick={() => onClick(true)}\n            className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(false)}\n            onClick={() => onClick(false)}\n            className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n        </>\n      )}\n    </span>\n  )\n}\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 ratingMeta = {\n  component: 'Rating',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-transparent'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.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 { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/**\n * Rating — 星星評分元件\n *\n * 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n *\n * ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - view:已提交評分的唯讀呈現(商品清單星等)\n *\n * ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--divider)`(neutral-4 借 divider semantic alias;灰色;與 disabled/empty 同級)。\n *\n * ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n *\n * ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n */\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 **Avatar / identity icon**,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 **item-anatomy inline Avatar sizes**:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-*`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - **Standalone**(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n//   對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - **Field 內**(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' | 'sm' | 'md' | 'lg', string> = {\n  xs: 'h-field-xs',\n  sm: 'h-field-sm',\n  md: 'h-field-md',\n  lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** 當前評分(0 ~ max) */\n  value?: number\n  /** 預設值(uncontrolled) */\n  defaultValue?: number\n  /** 評分改變 callback */\n  onChange?: (value: number) => void\n  /** 滿分(預設 5) */\n  max?: number\n  /** 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg */\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  /** 精度:full = 整星,half = 半星 */\n  precision?: 'full' | 'half'\n  /** 唯讀(無 hover / click 響應) */\n  readOnly?: boolean\n  /** 完全停用 */\n  disabled?: boolean\n  /**\n   * Loading 狀態 — 正在取得既有評分 / 正在儲存。\n   * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n   * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n   * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n   */\n  loading?: boolean\n  /** 自訂 icon(預設 Star);傳 LucideIcon */\n  icon?: LucideIcon\n  /**\n   * a11y label。readOnly(role=img)時必填。\n   * interactive(role=slider)時:在 Field 內免填(自動 aria-labelledby 指向 FieldLabel);\n   * standalone(無 Field)時必填——role=slider 依 WAI-ARIA APG 必有 accessible name。\n   */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onChange,\n      max = 5,\n      size: sizeProp,\n      precision = 'full',\n      readOnly: readOnlyProp = false,\n      disabled: disabledProp,\n      loading = false,\n      icon: Icon = Star,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Context-aware default size(AR31 canonical):\n    //   - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n    //   - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n    // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n    // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n    // 2026-07-18 決策4:max dev-warn(spec canonical ≤7;維持 number 型別不收窄,對齊 MUI Rating.max)。\n    if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production' && (max > 7 || max < 1 || Math.round(max) !== max)) {\n      console.warn(`[DS] Rating max ${max} 超出 canonical 範圍 1-7(或非整數)。建議 ≤7 顆星(對齊世界級 review-stars)。`)\n    }\n    const fieldCtx = useFieldContext()  // 保留:aria-labelledby 用 fieldCtx.labelId\n    // 2026-06-08 SSOT:<Field disabled> cascade(原 isInteractive 只看 local disabled prop)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // <Field mode=\"readonly\"> cascade(2026-06-12 補):Rating 的 readonly 呈現 = 星星本身\n    // (星星即值語言,role=img,全業界 review-stars canonical)——不包灰框,只鎖互動。\n    const resolvedMode = useResolvedFieldMode({ mode: undefined, disabled, readOnly: readOnlyProp })\n    const readOnly = readOnlyProp || resolvedMode === 'readonly'\n    const size = useResolvedFieldSize<'xs' | 'sm' | 'md' | 'lg'>(sizeProp, 'xs')  // SSOT:統一 size resolution(Rating default 'xs')\n    const [internalValue, setInternalValue] = React.useState(defaultValue)\n    const [hoverValue, setHoverValue] = React.useState<number | null>(null)\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? value : internalValue\n    const displayValue = hoverValue ?? currentValue\n    const iconPx = SIZE_PX[size]\n    const isInteractive = !readOnly && !disabled && !loading\n\n    const setValue = (v: number) => {\n      if (!isControlled) setInternalValue(v)\n      onChange?.(v)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!isInteractive) return\n      const step = precision === 'half' ? 0.5 : 1\n      // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setValue(Math.min(max, currentValue + step))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setValue(Math.max(0, currentValue - step))\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        setValue(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        setValue(max)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={isInteractive ? 'slider' : 'img'}\n        // a11y(#30):role=slider 必有 accessible name(WAI-ARIA APG slider pattern)。\n        //   Field 內 → 自動 aria-labelledby 指向 FieldLabel 的 id(fieldCtx.labelId,免填);\n        //   Standalone → 仍需 consumer 傳 aria-label。對齊 TimePicker / DatePicker 同 canonical\n        //   (time-picker.tsx:313 / date-picker.tsx:514:aria-labelledby={fieldCtx?.labelId})。\n        //   置於 {...props} 前,consumer 顯式傳的 aria-labelledby 仍可覆寫。\n        aria-labelledby={fieldCtx?.labelId}  // 2026-06-12 修:readonly/disabled(role=img)也需 accessible name,labelledby 對 img 合法\n        aria-valuenow={isInteractive ? currentValue : undefined}\n        aria-valuemin={isInteractive ? 0 : undefined}\n        aria-valuemax={isInteractive ? max : undefined}\n        aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n        aria-disabled={disabled || undefined}\n        // a11y: 刻意不設 aria-readonly — readOnly 時 role=img(axe aria-allowed-attr 禁 img 用 aria-readonly,2026-04-25);\n        //       interactive 時 role=slider 但必非 readOnly(isInteractive = !readOnly)。兩 state 皆不該有此屬性,故省略。\n        aria-busy={loading || undefined}\n        tabIndex={isInteractive ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        onMouseLeave={() => setHoverValue(null)}\n        className={cn(\n          'inline-flex items-center gap-1',\n          // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n          CONTAINER_HEIGHT[size],\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n          // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n          (disabled || loading) && 'opacity-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        {Array.from({ length: max }, (_, i) => {\n          const starValue = i + 1\n          const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n          const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n          return (\n            <StarIcon\n              key={i}\n              Icon={Icon}\n              sizePx={iconPx}\n              fillRatio={fillRatio}\n              isHalf={isHalf}\n              interactive={isInteractive}\n              onHover={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setHoverValue(v)\n              }}\n              onClick={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setValue(v)\n              }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n  Icon: LucideIcon\n  sizePx: number\n  fillRatio: number // 0..1\n  isHalf: boolean\n  interactive: boolean\n  onHover: (halfFirst: boolean) => void\n  onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n  // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n  // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n  // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n  if (!isHalf) {\n    // Full: 一整顆 fill(filled 或 empty)\n    const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n    return (\n      <span\n        role=\"presentation\"\n        onMouseEnter={interactive ? () => onHover(false) : undefined}\n        onClick={interactive ? () => onClick(false) : undefined}\n        className={cn(\n          'inline-flex',\n          interactive ? 'cursor-pointer' : 'cursor-default',\n        )}\n        style={{ color: fill }}\n        aria-hidden\n      >\n        {/* stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(lucide defaultAttributes\n            strokeWidth=2 + stroke=currentColor 會畫輪廓),讓星星是純 fill-only 的 shape——\n            fill 與 outline 同色視覺上仍有亮度差。\n            世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。*/}\n        <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n      </span>\n    )\n  }\n\n  // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n  return (\n    <span aria-hidden className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n      <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" aria-hidden className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n      <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx * fillRatio }}>\n        <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" aria-hidden style={{ color: FILL_FILLED }} />\n      </span>\n      {interactive && (\n        <>\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(true)}\n            onClick={() => onClick(true)}\n            className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(false)}\n            onClick={() => onClick(false)}\n            className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n        </>\n      )}\n    </span>\n  )\n}\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 ratingMeta = {\n  component: 'Rating',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-transparent'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,7 @@
+import { ScrollArea, ScrollBar, scrollAreaMeta } from "./scroll-area.js";
+export {
+  ScrollArea,
+  ScrollBar,
+  scrollAreaMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ScrollArea/scroll-area.d.ts

@@ -17,7 +17,8 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
  * 捲動時浮現(hover / scroll 自動顯示)。
  *
  * ── 何時用 ──
- * - DataTable 橫向捲動(水平跑版最明顯場景)
+ * - 寬內容橫向捲動(寬表格類 demo / 程式碼區塊;例外:DataTable 中央捲動區走 native
+ *   overflow-x-auto + scrollLeft 同步,不用 ScrollArea — 見 scroll-area.spec.md「何時用」)
  * - Sheet / Dialog 垂直內容捲動(body 太長)
  * - Sidebar nav 長列表
  * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景
@@ -27,14 +28,25 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
  * - 單行 truncate(用 text-overflow:ellipsis 就夠)
  * - 極短內容(不會捲動 → 不需 wrapper)
  */
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+    /** 2026-07-08(WM 戰役 R2):Radix Viewport 內建 wrapper `display:table; min-width:100%`
+     *  讓垂直捲動容器內的 flex 多欄佈局以 max-content 佈局、突破 100% 寬(WM 兩欄 dialog
+     *  右欄被裁 33px 實證)。垂直捲動場景 opt-in 此 prop 中和為 block/w-full(水平捲動
+     *  場景勿開 — table wrapper 是其 min-content 溢出機制)。 */
+    fillX?: boolean;
+    /** Viewport tabIndex(預設 0 = axe scrollable-region-focusable fix)。內容已有自帶
+     *  focusable 元素(如 TimePicker role=listbox tabIndex=0)時傳 -1 消除雙 tab stop。
+     *  當 ScrollArea 是 ARIA composite(role=menu 等)的純結構 wrapper 時傳 null,完全省略
+     *  tabindex,避免在 composite 直屬樹插入不合法的可聚焦 generic div。 */
+    viewportTabIndex?: 0 | -1 | null;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const scrollAreaMeta: {
     readonly component: "ScrollArea";
-    readonly family: null;
+    readonly family: "self-contained";
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

package/dist/components/ScrollArea/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAGlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,QAAA,MAAM,UAAU,+JA2Bd,CAAA;AAGF,QAAA,MAAM,SAAS,wKAwBb,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAGlE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,QAAA,MAAM,UAAU;IAKZ;;;qDAGiD;YACzC,OAAO;IACf;;;2DAGuD;uBACpC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;wCA6BlC,CAAA;AAGF,QAAA,MAAM,SAAS,wKAwBb,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+const ScrollArea = React.forwardRef(({ className, children, fillX, viewportTabIndex = 0, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -12,8 +12,11 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
       /* @__PURE__ */ jsx(
         ScrollAreaPrimitive.Viewport,
         {
-          tabIndex: 0,
-          className: "flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary",
+          tabIndex: viewportTabIndex ?? void 0,
+          className: cn(
+            "flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
+            fillX && "[&>div]:!block [&>div]:!w-full [&>div]:!min-w-0"
+          ),
           children
         }
       ),
@@ -46,11 +49,11 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 const scrollAreaMeta = {
   component: "ScrollArea",
-  family: null,
-  // non-family composite / overlay / layout
+  family: "self-contained",
+  // 對齊 scroll-area.spec.md frontmatter(SSOT;同 Separator/OverflowIndicator meta 寫法)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
   tokens: {
     bg: [],
     fg: [],

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-primary\"\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', 'hover', 'active', 'focus-visible', 'disabled'],\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,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,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 * - 寬內容橫向捲動(寬表格類 demo / 程式碼區塊;例外:DataTable 中央捲動區走 native\n *   overflow-x-auto + scrollLeft 同步,不用 ScrollArea — 見 scroll-area.spec.md「何時用」)\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  // asChild Omit(2026-07-18 決策2):Root 恆渲染固定三子節點(Viewport + ScrollBar + Corner)\n  // → <Root asChild> Radix Slot React.Children.only crash。children 保留(路由進固定 Viewport)。\n  Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, 'asChild'> & {\n    /** 2026-07-08(WM 戰役 R2):Radix Viewport 內建 wrapper `display:table; min-width:100%`\n     *  讓垂直捲動容器內的 flex 多欄佈局以 max-content 佈局、突破 100% 寬(WM 兩欄 dialog\n     *  右欄被裁 33px 實證)。垂直捲動場景 opt-in 此 prop 中和為 block/w-full(水平捲動\n     *  場景勿開 — table wrapper 是其 min-content 溢出機制)。 */\n    fillX?: boolean\n    /** Viewport tabIndex(預設 0 = axe scrollable-region-focusable fix)。內容已有自帶\n     *  focusable 元素(如 TimePicker role=listbox tabIndex=0)時傳 -1 消除雙 tab stop。\n     *  當 ScrollArea 是 ARIA composite(role=menu 等)的純結構 wrapper 時傳 null,完全省略\n     *  tabindex,避免在 composite 直屬樹插入不合法的可聚焦 generic div。 */\n    viewportTabIndex?: 0 | -1 | null\n  }\n>(({ className, children, fillX, viewportTabIndex = 0, ...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={viewportTabIndex ?? undefined}\n      className={cn(\n        'flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n        fillX && '[&>div]:!block [&>div]:!w-full [&>div]:!min-w-0',\n      )}\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":";;;;AAkCA,MAAM,aAAa,MAAM,WAgBvB,CAAC,EAAE,WAAW,UAAU,OAAO,mBAAmB,GAAG,GAAG,MAAA,GAAS,QACjE;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,oBAAoB;AAAA,UAC9B,WAAW;AAAA,YACT;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,UAGV;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/index.d.ts

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

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

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

package/dist/components/SegmentedControl/index.js

@@ -0,0 +1,9 @@
+import { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlMeta, segmentedControlVariants } from "./segmented-control.js";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlMeta,
+  segmentedControlVariants
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -8,8 +8,9 @@ import type { LucideIcon } from 'lucide-react';
  * 內部 item 結構鏡射 Button，但兩者型別獨立。
  *
  * ── 定位 ──
- *   切 value（不是切 view）。塞得進 Field，Tabs 不行。
- *   切 view → Tabs；單一 on/off → Button pressed；>5 個選項 → Select。
+ *   互斥多選一的 compact control；選值可驅動下方內容變化（ViewSwitcher 合法——
+ *   「切 value 不能切 view」是錯的二分法，spec「定位」段）。塞得進 Field，Tabs 不行。
+ *   與 Tabs 分界看規模 / 結構角色（spec「與 Tabs 的分界」段）；單一 on/off → Button pressed；>5 個選項 → Select。
  *
  * ── Size（對齊 field-height / Button 系列）──
  *   xs   h-field-xs（24 固定）
@@ -46,7 +47,7 @@ declare const itemVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {
+export interface SegmentedControlItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'asChild'> {
     /** 左側 icon（LucideIcon）。group iconOnly = true 時必填。 */
     startIcon?: LucideIcon;
     /** 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 */
@@ -61,13 +62,13 @@ export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRe
 declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const segmentedControlMeta: {
     readonly component: "SegmentedControl";
-    readonly family: null;
+    readonly family: 3;
     readonly variants: {};
     readonly sizes: {
         readonly xs: {
             readonly fieldHeight: 24;
             readonly typography: "caption";
-            readonly iconSize: 14;
+            readonly iconSize: 16;
             readonly purpose: "row-embedded inline action / DataTable inline filter";
         };
         readonly sm: {
@@ -89,10 +90,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,8FAqDrB,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,qGA2DxB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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,yBAGf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IACzF,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

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useResolvedFieldSize, useResolvedFieldDisabled } from "../Field/field-context.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
 import { ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
 const SegmentedControlContext = React.createContext({
@@ -32,17 +32,17 @@ const SegmentedControl = React.forwardRef(
     size: sizeProp,
     fullWidth = false,
     iconOnly = false,
-    disabled = false,
+    disabled,
     children,
     value,
     defaultValue,
     onValueChange,
     ...props
   }, ref) => {
-    var _a;
-    const fieldCtx = (_a = useFieldContext) == null ? void 0 : _a();
-    const resolvedSize = sizeProp ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
-    const resolvedDisabled = disabled || !!(fieldCtx == null ? void 0 : fieldCtx.disabled);
+    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]
@@ -52,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),
@@ -81,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"
@@ -112,7 +120,7 @@ const itemVariants = cva(
 );
 const SegmentedControlItem = React.forwardRef(({ className, startIcon: StartIcon, badge, children, "aria-label": ariaLabel, ...restProps }, ref) => {
   const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext);
-  const iconSize = ICON_SIZE[size];
+  const iconSize = size === "xs" ? ICON_SIZE.sm : ICON_SIZE[size];
   const hasSuffix = badge != null;
   const effectiveIconOnly = groupIconOnly;
   const itemEl = /* @__PURE__ */ jsxs(
@@ -144,19 +152,22 @@ const SegmentedControlItem = React.forwardRef(({ className, startIcon: StartIcon
 SegmentedControlItem.displayName = "SegmentedControlItem";
 const segmentedControlMeta = {
   component: "SegmentedControl",
-  family: null,
-  // non-family composite / overlay / layout
+  family: 3,
+  // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42
   variants: {},
   sizes: {
-    xs: { fieldHeight: 24, typography: "caption", iconSize: 14, purpose: "row-embedded inline action / DataTable inline filter" },
+    xs: { fieldHeight: 24, typography: "caption", iconSize: 16, purpose: "row-embedded inline action / DataTable inline filter" },
     sm: { fieldHeight: 28, typography: "body", iconSize: 16, purpose: "compact chrome bar / dense toolbar" },
     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 { useFieldContext } 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 = false,\n      children,\n      value,\n      defaultValue,\n      onValueChange,\n      ...props\n    },\n    ref\n  ) => {\n    // Field 內自動讀 size，跟 Button 同機制\n    const fieldCtx = useFieldContext?.()\n    const resolvedSize: SegmentedControlSize =\n      sizeProp ?? (fieldCtx?.size as SegmentedControlSize) ?? 'md'\n    const resolvedDisabled = disabled || !!fieldCtx?.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  const iconSize = 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: null, // non-family composite / overlay / layout\n  variants: {},\n  sizes: {\n    xs: { fieldHeight: 24, typography: 'caption', iconSize: 14, 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 *   互斥多選一的 compact control；選值可驅動下方內容變化（ViewSwitcher 合法——\n *   「切 value 不能切 view」是錯的二分法，spec「定位」段）。塞得進 Field，Tabs 不行。\n *   與 Tabs 分界看規模 / 結構角色（spec「與 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  // asChild Omit(2026-07-18 決策2):item 固定渲染 [startIcon?, <span>{children}</span>, badge?]\n  // 多節點陣列 → Radix Slot React.Children.only 恆 crash。children(label)保留合法。對齊 Chip 收窄。\n  extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'asChild'> {\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":";;;;;;;;AAgDA,MAAM,0BAA0B,MAAM,cAA4C;AAAA,EAChF,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAGD,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAgBA,MAAM,mBAAmB,MAAM;AAAA,EAI7B,CACE;AAAA,IACE;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AAEH,UAAM,eAAe,qBAA2C,UAAU,IAAI;AAC9E,UAAM,mBAAmB,yBAAyB,QAAQ;AAI1D,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,EAAE;AAC3E,UAAM,gBAAgB,UAAU,SAAY,QAAQ;AAIpD,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO,EAAE,MAAM,cAAc,WAAW,UAAU,UAAU;MAC5D,CAAC,cAAc,WAAW,UAAU,gBAAgB;AAAA,IAAA;AAGtD,+BACG,wBAAwB,UAAxB,EAAiC,OAAO,UACvC,UAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,OAAO;AAAA,QACP,eAAe,CAAC,MAAM;AAMpB,cAAI,CAAC,EAAG;AACR,cAAI,UAAU,OAAW,kBAAiB,CAAC;AAC3C,yDAAgB;AAAA,QAClB;AAAA,QACA,UAAU;AAAA,QACV,WAAW,GAAG,yBAAyB,EAAE,UAAA,CAAW,GAAG,SAAS;AAAA,QAC/D,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAgB/B,MAAM,iBAAiB;AAEvB,MAAM,eAAe;AAAA,EACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAsBA,MAAM,uBAAuB,MAAM,WAGjC,CAAC,EAAE,WAAW,WAAW,WAAW,OAAO,UAAU,cAAc,WAAW,GAAG,UAAA,GAAa,QAAQ;AACtG,QAAM,EAAE,MAAM,WAAW,UAAU,kBAAkB,MAAM,WAAW,uBAAuB;AAK7F,QAAM,WAAW,SAAS,OAAO,UAAU,KAAK,UAAU,IAA0B;AACpF,QAAM,YAAY,SAAS;AAgB3B,QAAM,oBAAoB;AAE1B,QAAM,SACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,aAAa,EAAE,MAAM,WAAW;AAAA,QAChC,qBAAqB;AAAA,QACrB;AAAA,MAAA;AAAA,MAEF,cAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCAAc,WAAA,EAAU,MAAM,UAAU,eAAW,MAAC;AAAA,QACpD,CAAC,qBAAqB,YAAY,4BAAS,QAAA,EAAK,WAAU,QAAQ,UAAS;AAAA,QAG3E,aAAa,CAAC,yCACZ,QAAA,EAAK,WAAU,kCAAkC,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAM9D,MAAI,qBAAqB,OAAO,cAAc,UAAU;AACtD,gCACG,SAAA,EACC,UAAA;AAAA,0BAAC,gBAAA,EAAe,SAAO,MAAE,UAAA,QAAO;AAAA,MAChC,oBAAC,kBAAgB,UAAA,WAAU;AAAA,IAAA,GAC7B;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;AACD,qBAAqB,cAAc;AAK5B,MAAM,uBAAuB;AAAA,EAClC,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,YAAY,WAAW,UAAU,IAAI,SAAS,uDAAA;AAAA,IACrE,IAAI,EAAE,aAAa,IAAI,YAAY,QAAQ,UAAU,IAAI,SAAS,qCAAA;AAAA,IAClE,IAAI,EAAE,aAAa,IAAI,YAAY,QAAQ,UAAU,IAAI,SAAS,qBAAA;AAAA,IAClE,IAAI,EAAE,aAAa,IAAI,YAAY,WAAW,UAAU,IAAI,SAAS,wBAAA;AAAA,EAAwB;AAAA;AAAA;AAAA,EAI/F,QAAQ,CAAC,WAAW,SAAS,YAAY,iBAAiB,UAAU;AAAA,EACpE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY;AAAA,IACjB,IAAI,CAAC,oBAAoB,qBAAqB,mBAAmB,cAAc;AAAA;AAAA,IAC/E,MAAM,CAAC,WAAW;AAAA,EAAA;AAAA,EAEpB,aAAa;AACf;"}

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

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

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

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

package/dist/components/Select/index.js

@@ -0,0 +1,6 @@
+import { Select, selectMeta } from "./select.js";
+export {
+  Select,
+  selectMeta
+};
+//# sourceMappingURL=index.js.map

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

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