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

package/dist/components/Slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/components/Slider/slider.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n/**\n * Slider — 數值範圍選取器\n *\n * 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。\n *\n * ── 核心設計 ──\n * 1. **視覺單一**:track 厚度、thumb 直徑、ring 尺寸都是固定值,不隨 `size` 變\n * 2. **`size` 只控容器外高**:對齊 Field family 的 `h-field-*` tier,讓 Slider 能跟\n *    Input / NumberInput / Select 在 Field 內並排對齊\n * 3. **Range mode 免費**:Radix 原生支援 `value: number[]`,傳多值自動多 thumb\n * 4. **Hover / active 用 elevation 陰影**:不用色變,避免暗示「這是 button」\n */\n\nconst sliderRootVariants = cva(\n  // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)\n  // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中\n  //\n  // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──\n  // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled\n  // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色\n  // 沒有資訊損失。\n  //\n  // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須\n  // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,\n  // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。\n  //\n  // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。\n  [\n    'relative flex items-center w-full min-w-0 touch-none select-none',\n    'data-[disabled]:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-field-sm',\n        md: 'h-field-md',\n        lg: 'h-field-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children'>,\n    VariantProps<typeof sliderRootVariants> {}\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size, value, defaultValue, 'aria-label': ariaLabel, ...props }, ref) => {\n  // 推導要渲染幾個 thumb:controlled 用 value,uncontrolled 用 defaultValue,\n  // 都沒有時 fallback 單 thumb(Radix 預設行為)\n  const thumbCount =\n    (Array.isArray(value) && value.length) ||\n    (Array.isArray(defaultValue) && defaultValue.length) ||\n    1\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      className={cn(sliderRootVariants({ size }), className)}\n      {...props}\n    >\n      {/*\n        Track — rest 用 bg-secondary(n-3,「微淡可辨」),disabled 用 bg-muted(n-2,退化)。\n        跟 Tag neutral / Badge low 同家族。\n      */}\n      <SliderPrimitive.Track className={cn(\n        'relative grow overflow-hidden rounded-full h-1',\n        // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)\n        // Disabled:bg-muted(n-2,「disabled-like 退化」底色)\n        'bg-secondary data-[disabled]:bg-muted',\n      )}>\n        {/*\n          Range — 填滿段。\n\n          ── Range 色 = Thumb border 色(語意一致) ──\n          Rest 兩者都是 `primary`,disabled 兩者都是 `border`(n-5)。為什麼要一致?\n          Range 是「填充視覺」,Thumb border 是「thumb 的輪廓線」——視覺上 thumb\n          的 border 剛好是 range 的延續(thumb 坐落在 range 的端點上,border 跟\n          range 在色彩上融為一體,看起來像「range 包住 thumb」而不是「thumb 浮在\n          range 上」)。兩個 token 綁在一起,不論什麼 state 都一致。\n        */}\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute h-full bg-primary',\n            'data-[disabled]:bg-border',\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {/*\n        Thumb — N 個(由 thumbCount 決定)。\n        白底 + 2px 邊框,邊框色 = Range 色(**一致綁定**):\n          - Rest: `border-primary` ↔ Range `bg-primary`\n          - Disabled: `border-border` ↔ Range `bg-border`\n        這個一致性讓 thumb border 跟 range 融為一體,看起來像「range 包住 thumb」\n        的連續視覺。thumb 的白底則是「被 range 圍住的空心洞」,讓 thumb 的位置\n        清楚浮出。不論 state,thumb border 跟 range 永遠同色。\n\n        **為什麼 thumb bg 不能改**:`bg-surface`(白)必須在 rest / disabled 都維持,\n        否則會融入 track 的 `bg-muted` 裡消失。這是之前踩過的同色融色 bug\n        (曾經寫成 `data-[disabled]:bg-muted` 讓 thumb 跟 track 完全融合)。\n      */}\n      {Array.from({ length: thumbCount }).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          className={cn(\n            'block h-4 w-4 shrink-0 rounded-full cursor-grab',\n            'bg-surface border-2 border-primary',\n            'transition-all duration-150',\n            // Hover:border 加深到 primary-hover + elevation 陰影\n            'hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]',\n            'active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]',\n            // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo\n            'outline-none focus-visible:border-primary-hover',\n            // Disabled:border 跟 Range 一起退成 border(n-5),bg 保留 bg-surface\n            'data-[disabled]:cursor-not-allowed data-[disabled]:border-border',\n            'data-[disabled]:hover:[box-shadow:none]',\n          )}\n          aria-label={ariaLabel ? (thumbCount > 1 ? `${ariaLabel} (${i + 1})` : ariaLabel) : (thumbCount > 1 ? `Thumb ${i + 1}` : undefined)}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = 'Slider'\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 sliderMeta = {\n  component: 'Slider',\n  family: 4,\n  variants: {},\n  sizes: {\n    sm: { px: 28, when: 'Toolbar / inline 編輯' },\n    md: { px: 36, when: '預設 — Form / cell inline edit' },\n    lg: { px: 44, when: 'Marketing / 高 touch 區' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-muted', 'bg-primary', 'bg-secondary', 'bg-surface'],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Slider, sliderRootVariants }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczB;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAMA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGtF,QAAM,aACH,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC9B,MAAM,QAAQ,YAAY,KAAK,aAAa,UAC7C;AAEF,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MACpD,GAAG;AAAA,MAMJ,UAAA;AAAA,QAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW;AAAA,UAChC;AAAA;AAAA;AAAA,UAGA;AAAA,QAAA,GAYA,UAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QAeC,MAAM,KAAK,EAAE,QAAQ,WAAA,CAAY,EAAE,IAAI,CAAC,GAAG,MAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAY,YAAa,aAAa,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC,MAAM,YAAc,aAAa,IAAI,SAAS,IAAI,CAAC,KAAK;AAAA,UAAA;AAAA,UAdnH;AAAA,QAAA,CAgBR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,OAAO,cAAc;AAId,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,IAAI,IAAI,MAAM,sBAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,+BAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,wBAAA;AAAA,EAAwB;AAAA,EAE9C,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,YAAY;AAAA,IAC3D,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"slider.js","sources":["../../../src/components/Slider/slider.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/**\n * Slider — 數值範圍選取器\n *\n * 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。\n *\n * ── 核心設計 ──\n * 1. **視覺單一**:track 厚度、thumb 直徑、thumb 邊框都是固定值,不隨 `size` 變\n * 2. **`size` 只控容器外高**:對齊 Field family 的 `h-field-*` tier,讓 Slider 能跟\n *    Input / NumberInput / Select 在 Field 內並排對齊\n * 3. **Range mode 免費**:Radix 原生支援 `value: number[]`,傳多值自動多 thumb\n * 4. **Hover / active 用 elevation 陰影**:不用色變,避免暗示「這是 button」\n */\n\nconst sliderRootVariants = cva(\n  // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)\n  // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中\n  //\n  // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──\n  // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled\n  // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色\n  // 沒有資訊損失。\n  //\n  // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須\n  // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,\n  // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。\n  //\n  // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。\n  [\n    'relative flex items-center w-full min-w-0 touch-none select-none',\n    'data-[disabled]:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-field-sm',\n        md: 'h-field-md',\n        lg: 'h-field-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children'>,\n    VariantProps<typeof sliderRootVariants> {}\n\n// code-quality-allow: long-function — foundational composite(thumb-count 推導 + Field disabled 整合 + multi-mode render)\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, size, value, defaultValue, 'aria-label': ariaLabel, ...props }, ref) => {\n  // Field 家族整合:被 <Field mode=\"disabled\"> 包裹時自動 disabled(per slider.spec.md「Slider 作為 Field\n  // 家族整合時繼承其 canonical」)。Slider 已有完整 data-[disabled] 視覺,故只需把 fieldCtx disabled 接上。\n  // 2026-06-08 SSOT:讀 useResolvedFieldDisabled()(fieldCtx.disabled)→ <Field disabled> 與 <Field mode=\"disabled\"> 都生效\n  // 2026-06-12 補:<Field mode=\"readonly\"> → 鎖互動保留視覺(readonly ≠ disabled,不降色)\n  const fieldDisabled = useResolvedFieldDisabled()\n  const fieldMode = useResolvedFieldMode({ mode: undefined, disabled: undefined, readOnly: undefined })\n  const fieldReadonly = fieldMode === 'readonly'\n  // 2026-06-10 a11y:Field 內 Slider thumb(role=slider)無 accessible name(deep-audit axe 抓 aria-input-field-name)\n  // → 預設接 FieldLabel(aria-labelledby),consumer ariaLabel 優先。對齊 rating/time-picker labelId 接線。\n  const fieldLabelId = useFieldContext()?.labelId\n  // 推導要渲染幾個 thumb:controlled 用 value,uncontrolled 用 defaultValue,\n  // 都沒有時 fallback 單 thumb(Radix 預設行為)\n  const thumbCount =\n    (Array.isArray(value) && value.length) ||\n    (Array.isArray(defaultValue) && defaultValue.length) ||\n    1\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      className={cn(sliderRootVariants({ size }), fieldReadonly && 'pointer-events-none', className)}\n      {...props}\n      disabled={(props as { disabled?: boolean }).disabled || fieldDisabled}\n      // <Field mode=\"readonly\"> cascade(2026-06-12 補):鎖互動、保留正常視覺(readonly\n      // 不降色;值仍可讀)。pointer-events-none 擋滑鼠,thumb tabIndex=-1 擋鍵盤。\n      data-readonly={fieldReadonly || undefined}\n    >\n      {/*\n        Track — rest 用 bg-secondary(n-3,「微淡可辨」),disabled 用 bg-muted(n-2,退化)。\n        跟 Tag neutral / Badge low 同家族。\n      */}\n      <SliderPrimitive.Track className={cn(\n        'relative grow overflow-hidden rounded-full h-1',\n        // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)\n        // Disabled:bg-muted(n-2,「disabled-like 退化」底色)\n        'bg-secondary data-[disabled]:bg-muted',\n      )}>\n        {/*\n          Range — 填滿段。\n\n          ── Range 色 = Thumb border 色(語意一致) ──\n          Rest 兩者都是 `primary`,disabled 兩者都是 `border`(n-5)。為什麼要一致?\n          Range 是「填充視覺」,Thumb border 是「thumb 的輪廓線」——視覺上 thumb\n          的 border 剛好是 range 的延續(thumb 坐落在 range 的端點上,border 跟\n          range 在色彩上融為一體,看起來像「range 包住 thumb」而不是「thumb 浮在\n          range 上」)。兩個 token 綁在一起,不論什麼 state 都一致。\n        */}\n        <SliderPrimitive.Range\n          className={cn(\n            'absolute h-full bg-primary',\n            'data-[disabled]:bg-border',\n          )}\n        />\n      </SliderPrimitive.Track>\n\n      {/*\n        Thumb — N 個(由 thumbCount 決定)。\n        白底 + 2px 邊框,邊框色 = Range 色(**一致綁定**):\n          - Rest: `border-primary` ↔ Range `bg-primary`\n          - Disabled: `border-border` ↔ Range `bg-border`\n        這個一致性讓 thumb border 跟 range 融為一體,看起來像「range 包住 thumb」\n        的連續視覺。不論 state,thumb border 跟 range 永遠同色。\n\n        **Thumb bg 兩態(2026-06-12 user 拍板,深色模式破洞修正)**:\n          - Rest/hover/active:`bg-on-emphasis`(固定白、深淺主題不反轉)— 對齊自家\n            Switch thumb(switch.tsx bg-on-emphasis)+ Radix Themes(thumb 字面 white\n            無 dark override)+ Apple iOS(深色模式旋鈕仍白)。原 `bg-surface` 在深色\n            = 8% 白半透明 → thumb 變深色破洞且 track 穿透。\n          - Disabled:`bg-canvas`(不透明頁面背景色)— 沉回背景表達「不可動」,\n            = Radix disabled thumb 用 gray-1(app background)同款;不透明故 track\n            不穿透。不可用 bg-muted(曾踩 thumb 跟 track 同色融合 bug;canvas 與\n            track 的 muted 隔 n-5 邊框 + 不同值,不融)。\n      */}\n      {Array.from({ length: thumbCount }).map((_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          tabIndex={fieldReadonly ? -1 : undefined}\n          aria-readonly={fieldReadonly || undefined}\n          className={cn(\n            'block h-4 w-4 shrink-0 rounded-full cursor-grab',\n            'bg-on-emphasis border-2 border-primary',\n            'transition-all duration-150',\n            // Hover:border 加深到 primary-hover + elevation 陰影\n            'hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]',\n            'active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]',\n            // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo\n            'outline-none focus-visible:border-primary-hover',\n            // Disabled:border 跟 Range 一起退成 border(n-5),bg 沉回 canvas(不透明背景色)\n            'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-canvas',\n            'data-[disabled]:hover:[box-shadow:none]',\n          )}\n          // aria-label 策略(對齊 WAI-ARIA APG multi-thumb slider + Radix 原生語意標籤):\n          //   - consumer 傳 ariaLabel:單 thumb → 原樣;多 thumb → `{label} (N)` 區分\n          //   - 沒傳 ariaLabel:回傳 undefined,讓 Radix getLabel 提供語意標籤\n          //     (2 thumb → Minimum/Maximum;>2 thumb → Value N of M;單 thumb → 無)\n          //     比硬寫 `Thumb N` 更語意化,且讓「繼承 Radix a11y 預設」名實相符\n          aria-label={\n            ariaLabel\n              ? thumbCount > 1\n                ? `${ariaLabel} (${i + 1})`\n                : ariaLabel\n              : undefined\n          }\n          aria-labelledby={!ariaLabel && fieldLabelId ? fieldLabelId : undefined}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = 'Slider'\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 sliderMeta = {\n  component: 'Slider',\n  family: null, // self-contained(對齊 spec;同 rating.tsx 慣例),\n  variants: {},\n  // size 只控容器外高,對齊 Field family h-field-*(md density:28/32/36px,uiSize.css)。\n  // track 厚度 / thumb 直徑固定不隨 size 變,故無 iconSize / typography。\n  // fieldHeight key 對齊 compile-stories.mjs 消費 schema(同 Button/Checkbox/Switch)。\n  sizes: {\n    sm: { fieldHeight: 28, when: 'Toolbar / inline 編輯' },\n    md: { fieldHeight: 32, when: '預設 — Form / cell inline edit' },\n    lg: { fieldHeight: 36, when: 'Marketing / 高 touch 區' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-muted', 'bg-primary', 'bg-secondary', 'bg-on-emphasis', 'bg-canvas'],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { Slider, sliderRootVariants }\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczB;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAOA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;;AAKtF,QAAM,gBAAgB,yBAAA;AACtB,QAAM,YAAY,qBAAqB,EAAE,MAAM,QAAW,UAAU,QAAW,UAAU,QAAW;AACpG,QAAM,gBAAgB,cAAc;AAGpC,QAAM,gBAAe,2BAAA,mBAAmB;AAGxC,QAAM,aACH,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC9B,MAAM,QAAQ,YAAY,KAAK,aAAa,UAC7C;AAEF,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,EAAE,MAAM,GAAG,iBAAiB,uBAAuB,SAAS;AAAA,MAC5F,GAAG;AAAA,MACJ,UAAW,MAAiC,YAAY;AAAA,MAGxD,iBAAe,iBAAiB;AAAA,MAMhC,UAAA;AAAA,QAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW;AAAA,UAChC;AAAA;AAAA;AAAA,UAGA;AAAA,QAAA,GAYA,UAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QAoBC,MAAM,KAAK,EAAE,QAAQ,WAAA,CAAY,EAAE,IAAI,CAAC,GAAG,MAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,UAAU,gBAAgB,KAAK;AAAA,YAC/B,iBAAe,iBAAiB;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,YAAA;AAAA,YAOF,cACE,YACI,aAAa,IACX,GAAG,SAAS,KAAK,IAAI,CAAC,MACtB,YACF;AAAA,YAEN,mBAAiB,CAAC,aAAa,eAAe,eAAe;AAAA,UAAA;AAAA,UA5BxD;AAAA,QAAA,CA8BR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,OAAO,cAAc;AAId,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,MAAM,sBAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,+BAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,wBAAA;AAAA,EAAwB;AAAA,EAEvD,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,kBAAkB,WAAW;AAAA,IAC5E,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/Steps/index.js

@@ -0,0 +1,12 @@
+import { StepContent, StepDescription, StepItem, StepLabel, Steps, stepItemVariants, stepsMeta, stepsRootVariants } from "./steps.js";
+export {
+  StepContent,
+  StepDescription,
+  StepItem,
+  StepLabel,
+  Steps,
+  stepItemVariants,
+  stepsMeta,
+  stepsRootVariants
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Steps/steps.d.ts

@@ -60,9 +60,9 @@ export declare const stepsMeta: {
             readonly when: "Marketing 流程展示 / 重要 onboarding;indicator 32px circle";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["upcoming", "reachable", "current", "completed", "error"];
     readonly tokens: {
-        readonly bg: readonly ["bg-primary"];
+        readonly bg: readonly ["bg-info"];
         readonly fg: readonly ["--fg-disabled", "--foreground", "--on-emphasis", "text-error-text", "text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];
         readonly ring: readonly [];
     };

package/dist/components/Steps/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AA2I3F,QAAA,MAAM,iBAAiB;;8EAQrB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAC/E,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,eAAe,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5C;AAGD,QAAA,MAAM,KAAK,qFAsHV,CAAA;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EACxD,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAA;AAGF,QAAA,MAAM,QAAQ,qFA8Db,CAAA;AA2VD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAGhF,QAAA,MAAM,SAAS,wFA0Bd,CAAA;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEtF,QAAA,MAAM,eAAe,8FA2BpB,CAAA;AAKD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAchB,CAAA;AAOD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AA4I3F,QAAA,MAAM,iBAAiB;;8EAQrB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAC/E,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,eAAe,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5C;AAGD,QAAA,MAAM,KAAK,qFAyHV,CAAA;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EACxD,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAA;AAGF,QAAA,MAAM,QAAQ,qFA8Db,CAAA;AAkXD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAGhF,QAAA,MAAM,SAAS,wFA4Bd,CAAA;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEtF,QAAA,MAAM,eAAe,8FA2BpB,CAAA;AAKD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAchB,CAAA;AAOD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Steps/steps.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ChevronDown, Check, X } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
+import { ItemPrefix, ItemSuffix } from "../../patterns/element-anatomy/item-anatomy.js";
 const INDICATOR_SIZE = {
   sm: 8,
   md: 24,
@@ -27,7 +28,7 @@ function getOuterRingShadow(ringColor) {
 function resolveRingColor(state, linear) {
   if (state === "error") return "var(--error-hover)";
   if (state === "current" && !linear) return "var(--border-hover)";
-  return "var(--primary-hover)";
+  return "var(--info-hover)";
 }
 const StepsContext = React.createContext(null);
 function useStepsContext() {
@@ -130,6 +131,7 @@ const Steps = React.forwardRef(
         return next;
       });
     }, []);
+    const stepCount = React.Children.count(children);
     const ctxValue = React.useMemo(
       () => ({
         value,
@@ -142,11 +144,12 @@ const Steps = React.forwardRef(
         expansion,
         expandedSet,
         setValue,
-        toggleExpanded
+        toggleExpanded,
+        total: stepCount
       }),
-      [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded]
+      [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded, stepCount]
     );
-    const count = React.Children.count(children);
+    const count = stepCount;
     const itemsWithIndex = [];
     React.Children.forEach(children, (child, index) => {
       if (!React.isValidElement(child)) {
@@ -266,8 +269,17 @@ function StepItemLayout({ children }) {
   }
   return /* @__PURE__ */ jsx(VerticalLayout, { label: labelNode, description: descNode, content: contentNode, isLast: item.isLast });
 }
+const STEP_STATUS_TEXT = {
+  completed: "已完成",
+  current: "進行中",
+  error: "錯誤",
+  reachable: "未開始",
+  upcoming: "未開始"
+};
 function StepItemHeader({ children, className, style }) {
   const item = useStepItemContext();
+  const steps = useStepsContext();
+  const index = React.useContext(StepIndexContext);
   const onKeyDown = (e) => {
     if (!item.clickable) return;
     if (e.key === "Enter" || e.key === " ") {
@@ -275,7 +287,7 @@ function StepItemHeader({ children, className, style }) {
       item.activate();
     }
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: item.clickable ? "button" : void 0,
@@ -284,12 +296,19 @@ function StepItemHeader({ children, className, style }) {
       onKeyDown: item.clickable ? onKeyDown : void 0,
       "aria-disabled": item.disabled || void 0,
       className: cn(
-        "outline-none",
+        // leading-compact:scanning-family header 行高 = 1.3(item-anatomy.spec.md:776 掃描模式 label 行高)。
+        // 設在 header 而非 li 根 → prefix h-[1lh] + 水平 connector h-[1lh] + label(StepLabel 亦 leading-compact)
+        // 全用 1.3 對齊;li 根 text-body(1.5,steps.tsx:329-331)留給展開 content 的 reading 行高,不被
+        // scanning 波及(避免 改A壞B)。對齊 MenuItem 把 leading-compact 放 row 容器之原則(item-anatomy.tsx:144-146)。
+        "outline-none leading-compact",
         item.clickable ? "cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring" : "cursor-not-allowed",
         className
       ),
       style,
-      children
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: `第 ${index} 步,共 ${steps.total} 步,${STEP_STATUS_TEXT[item.state]}` }),
+        children
+      ]
     }
   );
 }
@@ -305,13 +324,13 @@ function VerticalLayout({
   const indicatorBox = INDICATOR_BOX_WIDTH[steps.size];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(StepItemHeader, { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: indicatorBox }, children: /* @__PURE__ */ jsx("div", { className: "h-[1lh] flex items-center justify-center", children: /* @__PURE__ */ jsx(StepIndicator, {}) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-start", children: [
+      /* @__PURE__ */ jsx(ItemPrefix, { style: { width: indicatorBox }, children: /* @__PURE__ */ jsx(StepIndicator, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-start gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [
           label,
           description
         ] }),
-        steps.expansion === "multiple" && !!content && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-[1lh] flex items-center shrink-0 ml-2", children: /* @__PURE__ */ jsx(
+        steps.expansion === "multiple" && !!content && /* @__PURE__ */ jsx(ItemSuffix, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
           ChevronDown,
           {
             size: 16,
@@ -341,8 +360,10 @@ function VerticalConnectorLine() {
     {
       "aria-hidden": true,
       className: cn(
-        "absolute w-px",
-        isBlue ? "bg-primary" : "bg-border"
+        // leading-compact:connector 的 0.5lh 須跟 scanning label 同行高(1.3)→ 起點對齊 circle 中心
+        // (circle 對齊 label 第一行;label 已 leading-compact)。否則 connector 繼承 li 根 1.5 → 0.5lh 偏大 → 起點偏低。
+        "absolute w-px leading-compact",
+        isBlue ? "bg-info" : "bg-border"
       ),
       style: {
         left: INDICATOR_BOX_WIDTH[steps.size] / 2,
@@ -362,9 +383,9 @@ function HorizontalLayout({
   const indicatorBox = INDICATOR_BOX_WIDTH[steps.size];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(StepItemHeader, { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-[1lh] flex items-center shrink-0", children: /* @__PURE__ */ jsx(StepIndicator, {}) }),
+      /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(StepIndicator, {}) }),
       /* @__PURE__ */ jsx("div", { className: "shrink-0 min-w-0", children: label }),
-      !item.isLast && /* @__PURE__ */ jsx("div", { className: "h-[1lh] flex-1 flex items-center min-w-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: cn("h-px w-full", isBlue ? "bg-primary" : "bg-border") }) })
+      !item.isLast && /* @__PURE__ */ jsx("div", { className: "h-[1lh] flex-1 flex items-center min-w-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: cn("h-px w-full", isBlue ? "bg-info" : "bg-border") }) })
     ] }),
     description && /* @__PURE__ */ jsx("div", { className: "min-w-0", style: { paddingLeft: indicatorBox + 12 }, children: description })
   ] });
@@ -390,11 +411,11 @@ function SmIndicator({
       width: INDICATOR_SIZE.sm,
       height: INDICATOR_SIZE.sm,
       background: "transparent",
-      border: "2px solid var(--primary-hover)",
+      border: "2px solid var(--info-hover)",
       boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : void 0
     };
   } else {
-    const dotBg = state === "completed" ? "var(--primary)" : state === "error" ? "var(--error)" : state === "current" && !linear ? "var(--fg-disabled)" : "var(--fg-disabled)";
+    const dotBg = state === "completed" ? "var(--info)" : state === "error" ? "var(--error)" : state === "current" && !linear ? "var(--fg-disabled)" : "var(--fg-disabled)";
     dotStyle = {
       width: INDICATOR_SIZE.sm,
       height: INDICATOR_SIZE.sm,
@@ -435,12 +456,12 @@ function MdLgIndicator({
       contentColor = "var(--on-emphasis)";
       break;
     case "completed":
-      fillBg = "var(--primary)";
+      fillBg = "var(--info)";
       contentColor = "var(--on-emphasis)";
       break;
     case "current":
       if (linear) {
-        fillBg = "var(--primary)";
+        fillBg = "var(--info)";
         contentColor = "var(--on-emphasis)";
       } else {
         fillBg = "var(--secondary)";
@@ -448,7 +469,7 @@ function MdLgIndicator({
       }
       break;
     case "reachable":
-      fillBg = "var(--primary)";
+      fillBg = "var(--info)";
       contentColor = "var(--on-emphasis)";
       break;
     default:
@@ -475,7 +496,8 @@ function MdLgIndicator({
         height: diameter,
         background: fillBg,
         color: contentColor,
-        fontSize: size === "lg" ? "var(--font-body-size)" : "var(--font-caption-size)",
+        // 2026-06-11 R2:對齊 spec canonical「indicator 數字與 label 同級」(steps.spec.md 狀態表 md=14/lg=16;spec 明文「之前寫小一號(md=12,lg=14)是錯的」)
+        fontSize: size === "lg" ? "var(--font-body-lg-size)" : "var(--font-body-size)",
         boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : void 0
       },
       children: /* @__PURE__ */ jsx(IndicatorContent, { state, iconPx })
@@ -500,7 +522,9 @@ const StepLabel = React.forwardRef(
       {
         ref,
         className: cn(
-          "font-medium break-words",
+          // leading-compact:scanning-family label 行高 = 1.3(item-anatomy.spec.md:776);text-body utility
+          // 自帶 lh:1.5,須顯式 leading-compact 蓋回 1.3,跟 MenuItem label(實測 14px/18px=1.3)一致。
+          "font-medium break-words leading-compact",
           size === "lg" ? "text-body-lg" : "text-body",
           disabled ? "text-fg-disabled" : state === "error" ? "text-error-text" : focused ? "text-foreground" : "text-fg-secondary",
           className
@@ -563,9 +587,10 @@ const stepsMeta = {
     md: { px: 24, when: "預設 — wizard / checkout / 註冊主流程;indicator 24px circle" },
     lg: { px: 32, when: "Marketing 流程展示 / 重要 onboarding;indicator 32px circle" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["upcoming", "reachable", "current", "completed", "error"],
+  // 2026-06-11 R2:content-state 模型(spec 狀態表),非 Phase-1 boilerplate 互動 states,
   tokens: {
-    bg: ["bg-primary"],
+    bg: ["bg-info"],
     fg: ["--fg-disabled", "--foreground", "--on-emphasis", "text-error-text", "text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"],
     ring: []
   }

package/dist/components/Steps/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","sources":["../../../src/components/Steps/steps.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.\n// code-quality-allow: file-size — foundational composite(Steps + StepItem + orientation/state/connector 邏輯緊密耦合,拆檔會讓 props drilling 複雜化超過可讀 gain)\nimport * as React from 'react'\nimport { Check, ChevronDown, X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport type StepsSize = 'sm' | 'md' | 'lg'\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type StepsOrientation = 'vertical' | 'horizontal'\nexport type StepsExpansion = 'follow-active' | 'multiple'\nexport type StepContentState = 'upcoming' | 'reachable' | 'current' | 'completed' | 'error'\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\nconst INDICATOR_SIZE: Record<StepsSize, number> = {\n  sm: 8,\n  md: 24,\n  lg: 32,\n}\n\nconst INDICATOR_ICON_SIZE: Record<StepsSize, number> = {\n  sm: 0,\n  md: 16,\n  lg: 20,\n}\n\nconst SM_HIT_AREA = 24\n\nconst INDICATOR_BOX_WIDTH: Record<StepsSize, number> = {\n  sm: SM_HIT_AREA,\n  md: INDICATOR_SIZE.md,\n  lg: INDICATOR_SIZE.lg,\n}\n\n// ── Outer ring (box-shadow, zero layout impact) ───────────────────────────\n\nconst RING_GAP_PX = 2\nconst RING_WIDTH_PX = 2\n\nfunction getOuterRingShadow(ringColor: string): string {\n  return `0 0 0 ${RING_GAP_PX}px var(--surface), 0 0 0 ${RING_GAP_PX + RING_WIDTH_PX}px ${ringColor}`\n}\n\nfunction resolveRingColor(state: StepContentState, linear: boolean): string {\n  if (state === 'error') return 'var(--error-hover)'\n  if (state === 'current' && !linear) return 'var(--border-hover)'\n  return 'var(--primary-hover)'\n}\n\n// ── Contexts ──────────────────────────────────────────────────────────────\n\ninterface StepsContextValue {\n  value: string | undefined\n  completedValues: Set<string>\n  errorValues: Set<string>\n  reachableValues: Set<string>\n  linear: boolean\n  size: StepsSize\n  orientation: StepsOrientation\n  expansion: StepsExpansion\n  expandedSet: Set<string>\n  setValue: (value: string) => void\n  toggleExpanded: (value: string) => void\n}\n\nconst StepsContext = React.createContext<StepsContextValue | null>(null)\n\nfunction useStepsContext(): StepsContextValue {\n  const ctx = React.useContext(StepsContext)\n  if (!ctx) throw new Error('Steps compound components must be rendered inside <Steps>')\n  return ctx\n}\n\ninterface StepItemContextValue {\n  value: string\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  clickable: boolean\n  expanded: boolean\n  isLast: boolean\n  activate: () => void\n}\n\nconst StepItemContext = React.createContext<StepItemContextValue | null>(null)\n\nfunction useStepItemContext(): StepItemContextValue {\n  const ctx = React.useContext(StepItemContext)\n  if (!ctx) throw new Error('StepLabel / StepDescription / StepContent must be inside <StepItem>')\n  return ctx\n}\n\nconst StepIndexContext = React.createContext<number>(0)\n\n// ── Pure helpers ──────────────────────────────────────────────────────────\n\nfunction computeState(\n  itemValue: string,\n  value: string | undefined,\n  completedValues: Set<string>,\n  errorValues: Set<string>,\n  reachableValues: Set<string>,\n  linear: boolean,\n  override: StepContentState | undefined,\n): StepContentState {\n  if (override) return override\n  if (errorValues.has(itemValue)) return 'error'\n  if (completedValues.has(itemValue)) return 'completed'\n  if (itemValue === value) return 'current'\n  if (linear && reachableValues.has(itemValue)) return 'reachable'\n  return 'upcoming'\n}\n\nfunction isClickable(\n  state: StepContentState,\n  linear: boolean,\n  disabled: boolean,\n): boolean {\n  if (disabled) return false\n  if (!linear) return true\n  return state !== 'upcoming'\n}\n\nfunction normalizeExpanded(\n  defaultExpanded: 'all' | 'none' | string[] | undefined,\n  allValues: string[],\n): Set<string> {\n  if (defaultExpanded === 'all') return new Set(allValues)\n  if (!defaultExpanded || defaultExpanded === 'none') return new Set()\n  return new Set(defaultExpanded)\n}\n\nfunction computeReachableValues(\n  childValues: string[],\n  completedValues: string[],\n): Set<string> {\n  const completed = new Set(completedValues)\n  const reachable = new Set(completed)\n  for (const v of childValues) {\n    if (!completed.has(v)) {\n      reachable.add(v)\n      break\n    }\n  }\n  return reachable\n}\n\n// ── Steps root ────────────────────────────────────────────────────────────\n\nconst stepsRootVariants = cva('list-none p-0 m-0', {\n  variants: {\n    orientation: {\n      vertical: 'flex flex-col',\n      horizontal: 'flex flex-row items-start gap-3',\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport interface StepsProps\n  extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange' | 'defaultValue'>,\n    VariantProps<typeof stepsRootVariants> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  completedValues?: string[]\n  errorValues?: string[]\n  linear?: boolean\n  size?: StepsSize\n  orientation?: StepsOrientation\n  expansion?: StepsExpansion\n  defaultExpanded?: 'all' | 'none' | string[]\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Steps = React.forwardRef<HTMLOListElement, StepsProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      completedValues = [],\n      errorValues = [],\n      linear = true,\n      size = 'md',\n      orientation = 'vertical',\n      expansion = 'follow-active',\n      defaultExpanded,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalValue, setInternalValue] = React.useState<string | undefined>(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const setValue = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const childValues = React.useMemo(() => {\n      const vals: string[] = []\n      React.Children.forEach(children, child => {\n        if (\n          React.isValidElement(child) &&\n          typeof child.props === 'object' &&\n          child.props &&\n          'value' in child.props\n        ) {\n          vals.push(String((child.props as { value: string }).value))\n        }\n      })\n      return vals\n    }, [children])\n\n    const reachableValues = React.useMemo(\n      () => computeReachableValues(childValues, completedValues),\n      [childValues, completedValues],\n    )\n\n    const [expandedSet, setExpandedSet] = React.useState<Set<string>>(() =>\n      normalizeExpanded(defaultExpanded, childValues),\n    )\n\n    const toggleExpanded = React.useCallback((itemValue: string) => {\n      setExpandedSet(prev => {\n        const next = new Set(prev)\n        if (next.has(itemValue)) next.delete(itemValue)\n        else next.add(itemValue)\n        return next\n      })\n    }, [])\n\n    const ctxValue = React.useMemo<StepsContextValue>(\n      () => ({\n        value,\n        completedValues: new Set(completedValues),\n        errorValues: new Set(errorValues),\n        reachableValues,\n        linear,\n        size,\n        orientation,\n        expansion,\n        expandedSet,\n        setValue,\n        toggleExpanded,\n      }),\n      [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded],\n    )\n\n    // Interleave horizontal connectors between items\n    const count = React.Children.count(children)\n    const itemsWithIndex: React.ReactNode[] = []\n\n    React.Children.forEach(children, (child, index) => {\n      if (!React.isValidElement(child)) {\n        itemsWithIndex.push(child)\n        return\n      }\n      const isLast = index === count - 1\n      const cloned = React.cloneElement(\n        child as React.ReactElement<StepItemInjectedProps>,\n        { __isLast: isLast },\n      )\n      itemsWithIndex.push(\n        <StepIndexContext.Provider key={`item-${index}`} value={index + 1}>\n          {cloned}\n        </StepIndexContext.Provider>,\n      )\n      // Horizontal connectors are now INSIDE each StepItem (Ant Design pattern),\n      // not between items. No interleaving needed.\n    })\n\n    return (\n      <StepsContext.Provider value={ctxValue}>\n        <ol\n          ref={ref}\n          data-orientation={orientation}\n          data-size={size}\n          className={cn(stepsRootVariants({ orientation }), className)}\n          {...props}\n        >\n          {itemsWithIndex}\n        </ol>\n      </StepsContext.Provider>\n    )\n  },\n)\nSteps.displayName = 'Steps'\n\n// ── StepItem ──────────────────────────────────────────────────────────────\n\ninterface StepItemInjectedProps {\n  __isLast?: boolean\n}\n\nexport interface StepItemProps\n  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>,\n    StepItemInjectedProps {\n  value: string\n  state?: 'error'\n  disabled?: boolean\n}\n\nconst stepItemVariants = cva('group/step-item outline-none', {\n  variants: {\n    orientation: {\n      // pb-6 on li provides spacing for next item; connector is absolute within li\n      vertical: 'relative flex flex-col',\n      // Ant Design pattern:flex-1 等寬(最後一步用 last: 覆蓋成自然寬度)。\n      // Connector 在 item 內部(不是 items 之間的獨立元素)。\n      horizontal: 'flex-1 min-w-0 last:flex-none last:shrink-0',\n    },\n    size: {\n      sm: 'text-body',\n      md: 'text-body',\n      lg: 'text-body-lg',\n    },\n  },\n  defaultVariants: { orientation: 'vertical', size: 'md' },\n})\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepItem = React.forwardRef<HTMLLIElement, StepItemProps>(\n  ({ value, state: stateOverride, disabled = false, children, className, __isLast = false, ...props }, ref) => {\n    const steps = useStepsContext()\n    const state = computeState(\n      value,\n      steps.value,\n      steps.completedValues,\n      steps.errorValues,\n      steps.reachableValues,\n      steps.linear,\n      stateOverride,\n    )\n    const focused = value === steps.value\n    const clickable = isClickable(state, steps.linear, disabled)\n    const expanded =\n      steps.expansion === 'follow-active' ? focused : steps.expandedSet.has(value)\n\n    const activate = React.useCallback(() => {\n      if (!clickable) return\n      // 永遠更新 focus(value),multiple 模式額外 toggle 展開\n      steps.setValue(value)\n      if (steps.expansion === 'multiple') {\n        steps.toggleExpanded(value)\n      }\n    }, [clickable, steps, value])\n\n    const itemCtx = React.useMemo<StepItemContextValue>(() => ({\n      value,\n      state,\n      focused,\n      disabled,\n      clickable,\n      expanded,\n      isLast: __isLast,\n      activate,\n    }), [value, state, focused, disabled, clickable, expanded, __isLast, activate])\n\n    const isVertical = steps.orientation === 'vertical'\n\n    return (\n      <StepItemContext.Provider value={itemCtx}>\n        <li\n          ref={ref}\n          data-state={state}\n          data-focused={focused || undefined}\n          data-disabled={disabled || undefined}\n          data-clickable={clickable || undefined}\n          aria-current={focused ? 'step' : undefined}\n          aria-disabled={disabled || undefined}\n          className={cn(\n            stepItemVariants({ orientation: steps.orientation, size: steps.size }),\n            isVertical && !__isLast && 'pb-6',\n            !clickable && 'cursor-not-allowed',\n            className,\n          )}\n          {...props}\n        >\n          <StepItemLayout>{children}</StepItemLayout>\n        </li>\n      </StepItemContext.Provider>\n    )\n  },\n)\nStepItem.displayName = 'StepItem'\n\n// ── StepItem internal layout ─────────────────────────────────────────────\n\nfunction StepItemLayout({ children }: { children: React.ReactNode }) {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n\n  let labelNode: React.ReactNode = null\n  let descNode: React.ReactNode = null\n  let contentNode: React.ReactNode = null\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return\n    if (child.type === StepLabel) labelNode = child\n    else if (child.type === StepDescription) descNode = child\n    else if (child.type === StepContent) contentNode = child\n  })\n\n  if (steps.orientation === 'horizontal') {\n    return <HorizontalLayout label={labelNode} description={descNode} />\n  }\n  return (\n    <VerticalLayout label={labelNode} description={descNode} content={contentNode} isLast={item.isLast} />\n  )\n}\n\n// ── Clickable header ─────────────────────────────────────────────────────\n\nfunction StepItemHeader({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {\n  const item = useStepItemContext()\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!item.clickable) return\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      item.activate()\n    }\n  }\n  return (\n    <div\n      role={item.clickable ? 'button' : undefined}\n      tabIndex={item.clickable ? 0 : undefined}\n      onClick={item.clickable ? item.activate : undefined}\n      onKeyDown={item.clickable ? onKeyDown : undefined}\n      aria-disabled={item.disabled || undefined}\n      className={cn(\n        'outline-none',\n        item.clickable\n          ? 'cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'\n          : 'cursor-not-allowed',\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  )\n}\n\n// ── Vertical layout ──────────────────────────────────────────────────────\n\nfunction VerticalLayout({\n  label,\n  description,\n  content,\n  isLast,\n}: {\n  label: React.ReactNode\n  description: React.ReactNode\n  content: React.ReactNode\n  isLast: boolean\n}) {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const showContent = !!content && item.expanded\n  const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n  return (\n    <>\n      <StepItemHeader className=\"flex items-start gap-3\">\n        <div className=\"shrink-0\" style={{ width: indicatorBox }}>\n          <div className=\"h-[1lh] flex items-center justify-center\">\n            <StepIndicator />\n          </div>\n        </div>\n        <div className=\"flex-1 min-w-0 flex items-start\">\n          <div className=\"flex-1 min-w-0 flex flex-col\">\n            {label}\n            {description}\n          </div>\n          {steps.expansion === 'multiple' && !!content && (\n            <span aria-hidden className=\"h-[1lh] flex items-center shrink-0 ml-2\">\n              <ChevronDown\n                size={16}\n                className={cn(\n                  'text-fg-muted transition-transform duration-150',\n                  item.expanded && 'rotate-180',\n                )}\n              />\n            </span>\n          )}\n        </div>\n      </StepItemHeader>\n      {showContent && (\n        <div className=\"flex items-start gap-3 mt-3\">\n          <div className=\"shrink-0\" style={{ width: indicatorBox }} />\n          <div className=\"flex-1 min-w-0\">{content}</div>\n        </div>\n      )}\n      {!isLast && <VerticalConnectorLine />}\n    </>\n  )\n}\n\n// ── Vertical connector ───────────────────────────────────────────────────\n\nfunction VerticalConnectorLine() {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const isBlue = item.state === 'completed'\n  const radius = INDICATOR_SIZE[steps.size] / 2\n  const gap = 8\n\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        'absolute w-px',\n        isBlue ? 'bg-primary' : 'bg-border',\n      )}\n      style={{\n        left: INDICATOR_BOX_WIDTH[steps.size] / 2,\n        top: `calc(0.5lh + ${radius}px + ${gap}px)`,\n        bottom: `calc(${radius}px - 0.5lh + ${gap}px)`,\n      }}\n    />\n  )\n}\n\n// ── Horizontal layout (Ant Design pattern) ──────────────────────────────\n//\n// Connector 在 **item 內部**(不是 items 之間的獨立元素):\n//   Step (flex-1): [indicator][gap][label][gap][──connector──]\n//   Last step:     [indicator][gap][label]  (無 connector)\n//\n// Root: flex-row gap-3 → gap 只在 step items 之間\n// Step items: flex-1 等寬(最後一步 flex-none 自然寬度)\n//\n// 等距保證:\n//   label→connector gap = item 內 flex gap-3 = 12px\n//   connector→next circle = root gap-3 = 12px\n//   兩邊都是 12px ✓\n//\n// Description 在 step item 內(connector 下方),wrap 到 item 寬度 = 最長到連結線尾段 ✓\n\nfunction HorizontalLayout({\n  label,\n  description,\n}: {\n  label: React.ReactNode\n  description: React.ReactNode\n}) {\n  const item = useStepItemContext()\n  const steps = useStepsContext()\n  const isBlue = item.state === 'completed'\n  const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n  return (\n    <>\n      {/* Row 1: indicator + label + connector(在同一個 flex row) */}\n      <StepItemHeader className=\"flex items-start gap-3\">\n        <div className=\"h-[1lh] flex items-center shrink-0\">\n          <StepIndicator />\n        </div>\n        <div className=\"shrink-0 min-w-0\">{label}</div>\n        {/* Connector 在 item 內部,flex-1 填滿剩餘寬度 */}\n        {!item.isLast && (\n          <div className=\"h-[1lh] flex-1 flex items-center min-w-4\" aria-hidden>\n            <div className={cn('h-px w-full', isBlue ? 'bg-primary' : 'bg-border')} />\n          </div>\n        )}\n      </StepItemHeader>\n      {/* Row 2: description — 在 item 寬度內 wrap(含 connector 佔的空間) */}\n      {description && (\n        <div className=\"min-w-0\" style={{ paddingLeft: indicatorBox + 12 }}>\n          {description}\n        </div>\n      )}\n    </>\n  )\n}\n\n// ── StepIndicator ────────────────────────────────────────────────────────\n\nfunction StepIndicator() {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const { size, linear } = steps\n  const { state, focused, disabled } = item\n\n  if (size === 'sm') return <SmIndicator state={state} focused={focused} disabled={disabled} linear={linear} />\n  return <MdLgIndicator size={size} state={state} focused={focused} disabled={disabled} linear={linear} />\n}\n\n// ── sm indicator: 8px dot in 24px hit area ───────────────────────────────\n\nfunction SmIndicator({\n  state,\n  focused,\n  disabled,\n  linear,\n}: {\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  linear: boolean\n}) {\n  // sm current (linear) and reachable: hollow ring\n  const isHollow = (state === 'current' && linear) || state === 'reachable'\n\n  let dotStyle: React.CSSProperties\n  if (isHollow) {\n    dotStyle = {\n      width: INDICATOR_SIZE.sm,\n      height: INDICATOR_SIZE.sm,\n      background: 'transparent',\n      border: '2px solid var(--primary-hover)',\n      boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n    }\n  } else {\n    const dotBg =\n      state === 'completed' ? 'var(--primary)'\n        : state === 'error' ? 'var(--error)'\n          : state === 'current' && !linear ? 'var(--fg-disabled)'\n            : 'var(--fg-disabled)' // upcoming + non-linear fallback\n\n    dotStyle = {\n      width: INDICATOR_SIZE.sm,\n      height: INDICATOR_SIZE.sm,\n      background: dotBg,\n      boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n    }\n  }\n\n  return (\n    <span\n      aria-hidden\n      className=\"relative inline-flex items-center justify-center shrink-0\"\n      style={{ width: SM_HIT_AREA, height: SM_HIT_AREA }}\n    >\n      <span\n        className={cn('block rounded-full', disabled && 'opacity-disabled')}\n        style={dotStyle}\n      />\n    </span>\n  )\n}\n\n// ── md/lg indicator: filled circle with number/icon ──────────────────────\n\nfunction MdLgIndicator({\n  size,\n  state,\n  focused,\n  disabled,\n  linear,\n}: {\n  size: StepsSize\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  linear: boolean\n}) {\n  const diameter = INDICATOR_SIZE[size]\n  const iconPx = INDICATOR_ICON_SIZE[size]\n\n  let fillBg: string\n  let contentColor: string\n\n  switch (state) {\n    case 'error':\n      fillBg = 'var(--error)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    case 'completed':\n      fillBg = 'var(--primary)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    case 'current':\n      if (linear) {\n        fillBg = 'var(--primary)'\n        contentColor = 'var(--on-emphasis)'\n      } else {\n        fillBg = 'var(--secondary)'\n        contentColor = 'var(--foreground)'\n      }\n      break\n    case 'reachable':\n      fillBg = 'var(--primary)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    default: // upcoming\n      if (linear) {\n        fillBg = 'var(--muted)'\n        contentColor = 'var(--fg-disabled)'\n      } else {\n        fillBg = 'var(--secondary)'\n        contentColor = 'var(--foreground)'\n      }\n      break\n  }\n\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        'relative inline-flex items-center justify-center shrink-0 rounded-full',\n        'font-medium leading-none transition-colors',\n        disabled && 'opacity-disabled',\n      )}\n      style={{\n        width: diameter,\n        height: diameter,\n        background: fillBg,\n        color: contentColor,\n        fontSize: size === 'lg' ? 'var(--font-body-size)' : 'var(--font-caption-size)',\n        boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n      }}\n    >\n      <IndicatorContent state={state} iconPx={iconPx} />\n    </span>\n  )\n}\n\nfunction IndicatorContent({ state, iconPx }: { state: StepContentState; iconPx: number }) {\n  if (state === 'completed') return <Check size={iconPx} strokeWidth={2.5} />\n  if (state === 'error') return <X size={iconPx} strokeWidth={2.5} />\n  return <StepNumber />\n}\n\nfunction StepNumber() {\n  const index = React.useContext(StepIndexContext)\n  return <span>{index}</span>\n}\n\n// ── StepLabel ────────────────────────────────────────────────────────────\n\nexport interface StepLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepLabel = React.forwardRef<HTMLSpanElement, StepLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size } = useStepsContext()\n    const { state, focused, disabled } = useStepItemContext()\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          'font-medium break-words',\n          size === 'lg' ? 'text-body-lg' : 'text-body',\n          disabled\n            ? 'text-fg-disabled'\n            : state === 'error'\n              ? 'text-error-text'\n              : focused\n                ? 'text-foreground'\n                : 'text-fg-secondary',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\nStepLabel.displayName = 'StepLabel'\n\n// ── StepDescription ──────────────────────────────────────────────────────\n\nexport interface StepDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst StepDescription = React.forwardRef<HTMLSpanElement, StepDescriptionProps>(\n  ({ className, children, style, ...props }, ref) => {\n    const { size } = useStepsContext()\n    const { disabled } = useStepItemContext()\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          // Steps 跟 MenuItem 同 scanning-family:sm/md = scanning(body+caption),lg = scanning-lg(body-lg+body-compact)\n          size === 'lg'\n            ? 'mt-[var(--item-gap-label-desc-scanning-lg)]'\n            : 'mt-[var(--item-gap-label-desc-scanning)]',\n          'leading-compact break-words',\n          disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          className,\n        )}\n        style={{\n          fontSize: size === 'lg' ? 'var(--font-body-size)' : 'var(--font-caption-size)',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\nStepDescription.displayName = 'StepDescription'\n\n// ── StepContent ──────────────────────────────────────────────────────────\n\nexport interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst StepContent = React.forwardRef<HTMLDivElement, StepContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { orientation } = useStepsContext()\n    if (orientation === 'horizontal') return null\n    return (\n      <div\n        ref={ref}\n        className={cn('text-body text-foreground min-w-0', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\nStepContent.displayName = 'StepContent'\n\n// ── Exports ──────────────────────────────────────────────────────────────\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 stepsMeta = {\n  component: 'Steps',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: { px: 8, when: 'Sidebar / 緊湊 onboarding;indicator 8px dot' },\n    md: { px: 24, when: '預設 — wizard / checkout / 註冊主流程;indicator 24px circle' },\n    lg: { px: 32, when: 'Marketing 流程展示 / 重要 onboarding;indicator 32px circle' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-primary'],\n    fg: ['--fg-disabled', '--foreground', '--on-emphasis', 'text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Steps, StepItem, StepLabel, StepDescription, StepContent, stepsRootVariants, stepItemVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"steps.js","sources":["../../../src/components/Steps/steps.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.\n// code-quality-allow: file-size — foundational composite(Steps + StepItem + orientation/state/connector 邏輯緊密耦合,拆檔會讓 props drilling 複雜化超過可讀 gain)\nimport * as React from 'react'\nimport { Check, ChevronDown, X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport type StepsSize = 'sm' | 'md' | 'lg'\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type StepsOrientation = 'vertical' | 'horizontal'\nexport type StepsExpansion = 'follow-active' | 'multiple'\nexport type StepContentState = 'upcoming' | 'reachable' | 'current' | 'completed' | 'error'\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\nconst INDICATOR_SIZE: Record<StepsSize, number> = {\n  sm: 8,\n  md: 24,\n  lg: 32,\n}\n\nconst INDICATOR_ICON_SIZE: Record<StepsSize, number> = {\n  sm: 0,\n  md: 16,\n  lg: 20,\n}\n\nconst SM_HIT_AREA = 24\n\nconst INDICATOR_BOX_WIDTH: Record<StepsSize, number> = {\n  sm: SM_HIT_AREA,\n  md: INDICATOR_SIZE.md,\n  lg: INDICATOR_SIZE.lg,\n}\n\n// ── Outer ring (box-shadow, zero layout impact) ───────────────────────────\n\nconst RING_GAP_PX = 2\nconst RING_WIDTH_PX = 2\n\nfunction getOuterRingShadow(ringColor: string): string {\n  return `0 0 0 ${RING_GAP_PX}px var(--surface), 0 0 0 ${RING_GAP_PX + RING_WIDTH_PX}px ${ringColor}`\n}\n\nfunction resolveRingColor(state: StepContentState, linear: boolean): string {\n  if (state === 'error') return 'var(--error-hover)'\n  if (state === 'current' && !linear) return 'var(--border-hover)'\n  return 'var(--info-hover)'\n}\n\n// ── Contexts ──────────────────────────────────────────────────────────────\n\ninterface StepsContextValue {\n  value: string | undefined\n  completedValues: Set<string>\n  errorValues: Set<string>\n  reachableValues: Set<string>\n  linear: boolean\n  size: StepsSize\n  orientation: StepsOrientation\n  expansion: StepsExpansion\n  expandedSet: Set<string>\n  setValue: (value: string) => void\n  toggleExpanded: (value: string) => void\n  total: number\n}\n\nconst StepsContext = React.createContext<StepsContextValue | null>(null)\n\nfunction useStepsContext(): StepsContextValue {\n  const ctx = React.useContext(StepsContext)\n  if (!ctx) throw new Error('Steps compound components must be rendered inside <Steps>')\n  return ctx\n}\n\ninterface StepItemContextValue {\n  value: string\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  clickable: boolean\n  expanded: boolean\n  isLast: boolean\n  activate: () => void\n}\n\nconst StepItemContext = React.createContext<StepItemContextValue | null>(null)\n\nfunction useStepItemContext(): StepItemContextValue {\n  const ctx = React.useContext(StepItemContext)\n  if (!ctx) throw new Error('StepLabel / StepDescription / StepContent must be inside <StepItem>')\n  return ctx\n}\n\nconst StepIndexContext = React.createContext<number>(0)\n\n// ── Pure helpers ──────────────────────────────────────────────────────────\n\nfunction computeState(\n  itemValue: string,\n  value: string | undefined,\n  completedValues: Set<string>,\n  errorValues: Set<string>,\n  reachableValues: Set<string>,\n  linear: boolean,\n  override: StepContentState | undefined,\n): StepContentState {\n  if (override) return override\n  if (errorValues.has(itemValue)) return 'error'\n  if (completedValues.has(itemValue)) return 'completed'\n  if (itemValue === value) return 'current'\n  if (linear && reachableValues.has(itemValue)) return 'reachable'\n  return 'upcoming'\n}\n\nfunction isClickable(\n  state: StepContentState,\n  linear: boolean,\n  disabled: boolean,\n): boolean {\n  if (disabled) return false\n  if (!linear) return true\n  return state !== 'upcoming'\n}\n\nfunction normalizeExpanded(\n  defaultExpanded: 'all' | 'none' | string[] | undefined,\n  allValues: string[],\n): Set<string> {\n  if (defaultExpanded === 'all') return new Set(allValues)\n  if (!defaultExpanded || defaultExpanded === 'none') return new Set()\n  return new Set(defaultExpanded)\n}\n\nfunction computeReachableValues(\n  childValues: string[],\n  completedValues: string[],\n): Set<string> {\n  const completed = new Set(completedValues)\n  const reachable = new Set(completed)\n  for (const v of childValues) {\n    if (!completed.has(v)) {\n      reachable.add(v)\n      break\n    }\n  }\n  return reachable\n}\n\n// ── Steps root ────────────────────────────────────────────────────────────\n\nconst stepsRootVariants = cva('list-none p-0 m-0', {\n  variants: {\n    orientation: {\n      vertical: 'flex flex-col',\n      horizontal: 'flex flex-row items-start gap-3',\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport interface StepsProps\n  extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange' | 'defaultValue'>,\n    VariantProps<typeof stepsRootVariants> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  completedValues?: string[]\n  errorValues?: string[]\n  linear?: boolean\n  size?: StepsSize\n  orientation?: StepsOrientation\n  expansion?: StepsExpansion\n  defaultExpanded?: 'all' | 'none' | string[]\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Steps = React.forwardRef<HTMLOListElement, StepsProps>(\n  (\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      completedValues = [],\n      errorValues = [],\n      linear = true,\n      size = 'md',\n      orientation = 'vertical',\n      expansion = 'follow-active',\n      defaultExpanded,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [internalValue, setInternalValue] = React.useState<string | undefined>(defaultValue)\n    const isControlled = valueProp !== undefined\n    const value = isControlled ? valueProp : internalValue\n\n    const setValue = React.useCallback(\n      (next: string) => {\n        if (!isControlled) setInternalValue(next)\n        onValueChange?.(next)\n      },\n      [isControlled, onValueChange],\n    )\n\n    const childValues = React.useMemo(() => {\n      const vals: string[] = []\n      React.Children.forEach(children, child => {\n        if (\n          React.isValidElement(child) &&\n          typeof child.props === 'object' &&\n          child.props &&\n          'value' in child.props\n        ) {\n          vals.push(String((child.props as { value: string }).value))\n        }\n      })\n      return vals\n    }, [children])\n\n    const reachableValues = React.useMemo(\n      () => computeReachableValues(childValues, completedValues),\n      [childValues, completedValues],\n    )\n\n    const [expandedSet, setExpandedSet] = React.useState<Set<string>>(() =>\n      normalizeExpanded(defaultExpanded, childValues),\n    )\n\n    const toggleExpanded = React.useCallback((itemValue: string) => {\n      setExpandedSet(prev => {\n        const next = new Set(prev)\n        if (next.has(itemValue)) next.delete(itemValue)\n        else next.add(itemValue)\n        return next\n      })\n    }, [])\n\n    const stepCount = React.Children.count(children)\n\n    const ctxValue = React.useMemo<StepsContextValue>(\n      () => ({\n        value,\n        completedValues: new Set(completedValues),\n        errorValues: new Set(errorValues),\n        reachableValues,\n        linear,\n        size,\n        orientation,\n        expansion,\n        expandedSet,\n        setValue,\n        toggleExpanded,\n        total: stepCount,\n      }),\n      [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded, stepCount],\n    )\n\n    // Interleave horizontal connectors between items\n    const count = stepCount\n    const itemsWithIndex: React.ReactNode[] = []\n\n    React.Children.forEach(children, (child, index) => {\n      if (!React.isValidElement(child)) {\n        itemsWithIndex.push(child)\n        return\n      }\n      const isLast = index === count - 1\n      const cloned = React.cloneElement(\n        child as React.ReactElement<StepItemInjectedProps>,\n        { __isLast: isLast },\n      )\n      itemsWithIndex.push(\n        <StepIndexContext.Provider key={`item-${index}`} value={index + 1}>\n          {cloned}\n        </StepIndexContext.Provider>,\n      )\n      // Horizontal connectors are now INSIDE each StepItem (Ant Design pattern),\n      // not between items. No interleaving needed.\n    })\n\n    return (\n      <StepsContext.Provider value={ctxValue}>\n        <ol\n          ref={ref}\n          data-orientation={orientation}\n          data-size={size}\n          className={cn(stepsRootVariants({ orientation }), className)}\n          {...props}\n        >\n          {itemsWithIndex}\n        </ol>\n      </StepsContext.Provider>\n    )\n  },\n)\nSteps.displayName = 'Steps'\n\n// ── StepItem ──────────────────────────────────────────────────────────────\n\ninterface StepItemInjectedProps {\n  __isLast?: boolean\n}\n\nexport interface StepItemProps\n  extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>,\n    StepItemInjectedProps {\n  value: string\n  state?: 'error'\n  disabled?: boolean\n}\n\nconst stepItemVariants = cva('group/step-item outline-none', {\n  variants: {\n    orientation: {\n      // pb-6 on li provides spacing for next item; connector is absolute within li\n      vertical: 'relative flex flex-col',\n      // Ant Design pattern:flex-1 等寬(最後一步用 last: 覆蓋成自然寬度)。\n      // Connector 在 item 內部(不是 items 之間的獨立元素)。\n      horizontal: 'flex-1 min-w-0 last:flex-none last:shrink-0',\n    },\n    size: {\n      sm: 'text-body',\n      md: 'text-body',\n      lg: 'text-body-lg',\n    },\n  },\n  defaultVariants: { orientation: 'vertical', size: 'md' },\n})\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepItem = React.forwardRef<HTMLLIElement, StepItemProps>(\n  ({ value, state: stateOverride, disabled = false, children, className, __isLast = false, ...props }, ref) => {\n    const steps = useStepsContext()\n    const state = computeState(\n      value,\n      steps.value,\n      steps.completedValues,\n      steps.errorValues,\n      steps.reachableValues,\n      steps.linear,\n      stateOverride,\n    )\n    const focused = value === steps.value\n    const clickable = isClickable(state, steps.linear, disabled)\n    const expanded =\n      steps.expansion === 'follow-active' ? focused : steps.expandedSet.has(value)\n\n    const activate = React.useCallback(() => {\n      if (!clickable) return\n      // 永遠更新 focus(value),multiple 模式額外 toggle 展開\n      steps.setValue(value)\n      if (steps.expansion === 'multiple') {\n        steps.toggleExpanded(value)\n      }\n    }, [clickable, steps, value])\n\n    const itemCtx = React.useMemo<StepItemContextValue>(() => ({\n      value,\n      state,\n      focused,\n      disabled,\n      clickable,\n      expanded,\n      isLast: __isLast,\n      activate,\n    }), [value, state, focused, disabled, clickable, expanded, __isLast, activate])\n\n    const isVertical = steps.orientation === 'vertical'\n\n    return (\n      <StepItemContext.Provider value={itemCtx}>\n        <li\n          ref={ref}\n          data-state={state}\n          data-focused={focused || undefined}\n          data-disabled={disabled || undefined}\n          data-clickable={clickable || undefined}\n          aria-current={focused ? 'step' : undefined}\n          aria-disabled={disabled || undefined}\n          className={cn(\n            stepItemVariants({ orientation: steps.orientation, size: steps.size }),\n            isVertical && !__isLast && 'pb-6',\n            !clickable && 'cursor-not-allowed',\n            className,\n          )}\n          {...props}\n        >\n          <StepItemLayout>{children}</StepItemLayout>\n        </li>\n      </StepItemContext.Provider>\n    )\n  },\n)\nStepItem.displayName = 'StepItem'\n\n// ── StepItem internal layout ─────────────────────────────────────────────\n\nfunction StepItemLayout({ children }: { children: React.ReactNode }) {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n\n  let labelNode: React.ReactNode = null\n  let descNode: React.ReactNode = null\n  let contentNode: React.ReactNode = null\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return\n    if (child.type === StepLabel) labelNode = child\n    else if (child.type === StepDescription) descNode = child\n    else if (child.type === StepContent) contentNode = child\n  })\n\n  if (steps.orientation === 'horizontal') {\n    return <HorizontalLayout label={labelNode} description={descNode} />\n  }\n  return (\n    <VerticalLayout label={labelNode} description={descNode} content={contentNode} isLast={item.isLast} />\n  )\n}\n\n// ── Clickable header ─────────────────────────────────────────────────────\n\n// SR-only 狀態文字 map(2026-06-01 #25 a11y:indicator 是 aria-hidden 純視覺,故「第 N 步/共 M 步/狀態」\n// 需經 sr-only span 給螢幕報讀器。對齊 Carbon ProgressIndicator `--assistive-text`(已完成/進行中/未開始)慣例)\nconst STEP_STATUS_TEXT: Record<StepContentState, string> = {\n  completed: '已完成',\n  current: '進行中',\n  error: '錯誤',\n  reachable: '未開始',\n  upcoming: '未開始',\n}\n\nfunction StepItemHeader({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {\n  const item = useStepItemContext()\n  const steps = useStepsContext()\n  const index = React.useContext(StepIndexContext)\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!item.clickable) return\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      item.activate()\n    }\n  }\n  return (\n    <div\n      role={item.clickable ? 'button' : undefined}\n      tabIndex={item.clickable ? 0 : undefined}\n      onClick={item.clickable ? item.activate : undefined}\n      onKeyDown={item.clickable ? onKeyDown : undefined}\n      aria-disabled={item.disabled || undefined}\n      className={cn(\n        // leading-compact:scanning-family header 行高 = 1.3(item-anatomy.spec.md:776 掃描模式 label 行高)。\n        // 設在 header 而非 li 根 → prefix h-[1lh] + 水平 connector h-[1lh] + label(StepLabel 亦 leading-compact)\n        // 全用 1.3 對齊;li 根 text-body(1.5,steps.tsx:329-331)留給展開 content 的 reading 行高,不被\n        // scanning 波及(避免 改A壞B)。對齊 MenuItem 把 leading-compact 放 row 容器之原則(item-anatomy.tsx:144-146)。\n        'outline-none leading-compact',\n        item.clickable\n          ? 'cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'\n          : 'cursor-not-allowed',\n        className,\n      )}\n      style={style}\n    >\n      <span className=\"sr-only\">{`第 ${index} 步,共 ${steps.total} 步,${STEP_STATUS_TEXT[item.state]}`}</span>\n      {children}\n    </div>\n  )\n}\n\n// ── Vertical layout ──────────────────────────────────────────────────────\n\nfunction VerticalLayout({\n  label,\n  description,\n  content,\n  isLast,\n}: {\n  label: React.ReactNode\n  description: React.ReactNode\n  content: React.ReactNode\n  isLast: boolean\n}) {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const showContent = !!content && item.expanded\n  const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n  return (\n    <>\n      <StepItemHeader className=\"flex items-start gap-3\">\n        {/* Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT);\n            width = INDICATOR_BOX_WIDTH 固定欄寬,base justify-center 讓 sm dot 在欄內置中 */}\n        <ItemPrefix style={{ width: indicatorBox }}>\n          <StepIndicator />\n        </ItemPrefix>\n        <div className=\"flex-1 min-w-0 flex items-start gap-2\">\n          <div className=\"flex-1 min-w-0 flex flex-col\">\n            {label}\n            {description}\n          </div>\n          {/* Row suffix slot — 消費 item-anatomy <ItemSuffix>(h-[1lh] 對齊 label 第一行);\n              text col 是 flex-1 → base ml-auto 惰性,8px 間距由父層 gap-2 提供(= MenuItem 父層 gap idiom)*/}\n          {steps.expansion === 'multiple' && !!content && (\n            <ItemSuffix aria-hidden>\n              <ChevronDown\n                size={16}\n                className={cn(\n                  'text-fg-muted transition-transform duration-150',\n                  item.expanded && 'rotate-180',\n                )}\n              />\n            </ItemSuffix>\n          )}\n        </div>\n      </StepItemHeader>\n      {showContent && (\n        <div className=\"flex items-start gap-3 mt-3\">\n          <div className=\"shrink-0\" style={{ width: indicatorBox }} />\n          <div className=\"flex-1 min-w-0\">{content}</div>\n        </div>\n      )}\n      {!isLast && <VerticalConnectorLine />}\n    </>\n  )\n}\n\n// ── Vertical connector ───────────────────────────────────────────────────\n\nfunction VerticalConnectorLine() {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const isBlue = item.state === 'completed'\n  const radius = INDICATOR_SIZE[steps.size] / 2\n  const gap = 8\n\n  return (\n    <div\n      aria-hidden\n      className={cn(\n        // leading-compact:connector 的 0.5lh 須跟 scanning label 同行高(1.3)→ 起點對齊 circle 中心\n        // (circle 對齊 label 第一行;label 已 leading-compact)。否則 connector 繼承 li 根 1.5 → 0.5lh 偏大 → 起點偏低。\n        'absolute w-px leading-compact',\n        isBlue ? 'bg-info' : 'bg-border',\n      )}\n      style={{\n        left: INDICATOR_BOX_WIDTH[steps.size] / 2,\n        top: `calc(0.5lh + ${radius}px + ${gap}px)`,\n        bottom: `calc(${radius}px - 0.5lh + ${gap}px)`,\n      }}\n    />\n  )\n}\n\n// ── Horizontal layout (Ant Design pattern) ──────────────────────────────\n//\n// Connector 在 **item 內部**(不是 items 之間的獨立元素):\n//   Step (flex-1): [indicator][gap][label][gap][──connector──]\n//   Last step:     [indicator][gap][label]  (無 connector)\n//\n// Root: flex-row gap-3 → gap 只在 step items 之間\n// Step items: flex-1 等寬(最後一步 flex-none 自然寬度)\n//\n// 等距保證:\n//   label→connector gap = item 內 flex gap-3 = 12px\n//   connector→next circle = root gap-3 = 12px\n//   兩邊都是 12px ✓\n//\n// Description 在 step item 內(connector 下方),wrap 到 item 寬度 = 最長到連結線尾段 ✓\n\nfunction HorizontalLayout({\n  label,\n  description,\n}: {\n  label: React.ReactNode\n  description: React.ReactNode\n}) {\n  const item = useStepItemContext()\n  const steps = useStepsContext()\n  const isBlue = item.state === 'completed'\n  const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n  return (\n    <>\n      {/* Row 1: indicator + label + connector(在同一個 flex row) */}\n      <StepItemHeader className=\"flex items-start gap-3\">\n        {/* Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT)*/}\n        <ItemPrefix>\n          <StepIndicator />\n        </ItemPrefix>\n        <div className=\"shrink-0 min-w-0\">{label}</div>\n        {/* Connector 在 item 內部,flex-1 填滿剩餘寬度 */}\n        {!item.isLast && (\n          <div className=\"h-[1lh] flex-1 flex items-center min-w-4\" aria-hidden>\n            <div className={cn('h-px w-full', isBlue ? 'bg-info' : 'bg-border')} />\n          </div>\n        )}\n      </StepItemHeader>\n      {/* Row 2: description — 在 item 寬度內 wrap(含 connector 佔的空間) */}\n      {description && (\n        <div className=\"min-w-0\" style={{ paddingLeft: indicatorBox + 12 }}>\n          {description}\n        </div>\n      )}\n    </>\n  )\n}\n\n// ── StepIndicator ────────────────────────────────────────────────────────\n\nfunction StepIndicator() {\n  const steps = useStepsContext()\n  const item = useStepItemContext()\n  const { size, linear } = steps\n  const { state, focused, disabled } = item\n\n  if (size === 'sm') return <SmIndicator state={state} focused={focused} disabled={disabled} linear={linear} />\n  return <MdLgIndicator size={size} state={state} focused={focused} disabled={disabled} linear={linear} />\n}\n\n// ── sm indicator: 8px dot in 24px hit area ───────────────────────────────\n\nfunction SmIndicator({\n  state,\n  focused,\n  disabled,\n  linear,\n}: {\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  linear: boolean\n}) {\n  // sm current (linear) and reachable: hollow ring\n  const isHollow = (state === 'current' && linear) || state === 'reachable'\n\n  let dotStyle: React.CSSProperties\n  if (isHollow) {\n    dotStyle = {\n      width: INDICATOR_SIZE.sm,\n      height: INDICATOR_SIZE.sm,\n      background: 'transparent',\n      border: '2px solid var(--info-hover)',\n      boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n    }\n  } else {\n    const dotBg =\n      state === 'completed' ? 'var(--info)'\n        : state === 'error' ? 'var(--error)'\n          : state === 'current' && !linear ? 'var(--fg-disabled)'\n            : 'var(--fg-disabled)' // upcoming + non-linear fallback\n\n    dotStyle = {\n      width: INDICATOR_SIZE.sm,\n      height: INDICATOR_SIZE.sm,\n      background: dotBg,\n      boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n    }\n  }\n\n  return (\n    <span\n      aria-hidden\n      className=\"relative inline-flex items-center justify-center shrink-0\"\n      style={{ width: SM_HIT_AREA, height: SM_HIT_AREA }}\n    >\n      <span\n        className={cn('block rounded-full', disabled && 'opacity-disabled')}\n        style={dotStyle}\n      />\n    </span>\n  )\n}\n\n// ── md/lg indicator: filled circle with number/icon ──────────────────────\n\nfunction MdLgIndicator({\n  size,\n  state,\n  focused,\n  disabled,\n  linear,\n}: {\n  size: StepsSize\n  state: StepContentState\n  focused: boolean\n  disabled: boolean\n  linear: boolean\n}) {\n  const diameter = INDICATOR_SIZE[size]\n  const iconPx = INDICATOR_ICON_SIZE[size]\n\n  let fillBg: string\n  let contentColor: string\n\n  switch (state) {\n    case 'error':\n      fillBg = 'var(--error)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    case 'completed':\n      fillBg = 'var(--info)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    case 'current':\n      if (linear) {\n        fillBg = 'var(--info)'\n        contentColor = 'var(--on-emphasis)'\n      } else {\n        fillBg = 'var(--secondary)'\n        contentColor = 'var(--foreground)'\n      }\n      break\n    case 'reachable':\n      fillBg = 'var(--info)'\n      contentColor = 'var(--on-emphasis)'\n      break\n    default: // upcoming\n      if (linear) {\n        fillBg = 'var(--muted)'\n        contentColor = 'var(--fg-disabled)'\n      } else {\n        fillBg = 'var(--secondary)'\n        contentColor = 'var(--foreground)'\n      }\n      break\n  }\n\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        'relative inline-flex items-center justify-center shrink-0 rounded-full',\n        'font-medium leading-none transition-colors',\n        disabled && 'opacity-disabled',\n      )}\n      style={{\n        width: diameter,\n        height: diameter,\n        background: fillBg,\n        color: contentColor,\n        // 2026-06-11 R2:對齊 spec canonical「indicator 數字與 label 同級」(steps.spec.md 狀態表 md=14/lg=16;spec 明文「之前寫小一號(md=12,lg=14)是錯的」)\n        fontSize: size === 'lg' ? 'var(--font-body-lg-size)' : 'var(--font-body-size)',\n        boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n      }}\n    >\n      <IndicatorContent state={state} iconPx={iconPx} />\n    </span>\n  )\n}\n\nfunction IndicatorContent({ state, iconPx }: { state: StepContentState; iconPx: number }) {\n  if (state === 'completed') return <Check size={iconPx} strokeWidth={2.5} />\n  if (state === 'error') return <X size={iconPx} strokeWidth={2.5} />\n  return <StepNumber />\n}\n\nfunction StepNumber() {\n  const index = React.useContext(StepIndexContext)\n  return <span>{index}</span>\n}\n\n// ── StepLabel ────────────────────────────────────────────────────────────\n\nexport interface StepLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepLabel = React.forwardRef<HTMLSpanElement, StepLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    const { size } = useStepsContext()\n    const { state, focused, disabled } = useStepItemContext()\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          // leading-compact:scanning-family label 行高 = 1.3(item-anatomy.spec.md:776);text-body utility\n          // 自帶 lh:1.5,須顯式 leading-compact 蓋回 1.3,跟 MenuItem label(實測 14px/18px=1.3)一致。\n          'font-medium break-words leading-compact',\n          size === 'lg' ? 'text-body-lg' : 'text-body',\n          disabled\n            ? 'text-fg-disabled'\n            : state === 'error'\n              ? 'text-error-text'\n              : focused\n                ? 'text-foreground'\n                : 'text-fg-secondary',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\nStepLabel.displayName = 'StepLabel'\n\n// ── StepDescription ──────────────────────────────────────────────────────\n\nexport interface StepDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst StepDescription = React.forwardRef<HTMLSpanElement, StepDescriptionProps>(\n  ({ className, children, style, ...props }, ref) => {\n    const { size } = useStepsContext()\n    const { disabled } = useStepItemContext()\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          // Steps 跟 MenuItem 同 scanning-family:sm/md = scanning(body+caption),lg = scanning-lg(body-lg+body-compact)\n          size === 'lg'\n            ? 'mt-[var(--item-gap-label-desc-scanning-lg)]'\n            : 'mt-[var(--item-gap-label-desc-scanning)]',\n          'leading-compact break-words',\n          disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n          className,\n        )}\n        style={{\n          fontSize: size === 'lg' ? 'var(--font-body-size)' : 'var(--font-caption-size)',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\nStepDescription.displayName = 'StepDescription'\n\n// ── StepContent ──────────────────────────────────────────────────────────\n\nexport interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst StepContent = React.forwardRef<HTMLDivElement, StepContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { orientation } = useStepsContext()\n    if (orientation === 'horizontal') return null\n    return (\n      <div\n        ref={ref}\n        className={cn('text-body text-foreground min-w-0', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\nStepContent.displayName = 'StepContent'\n\n// ── Exports ──────────────────────────────────────────────────────────────\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 stepsMeta = {\n  component: 'Steps',\n  family: 2,\n  variants: {},\n  sizes: {\n    sm: { px: 8, when: 'Sidebar / 緊湊 onboarding;indicator 8px dot' },\n    md: { px: 24, when: '預設 — wizard / checkout / 註冊主流程;indicator 24px circle' },\n    lg: { px: 32, when: 'Marketing 流程展示 / 重要 onboarding;indicator 32px circle' },\n  },\n  states: ['upcoming', 'reachable', 'current', 'completed', 'error'], // 2026-06-11 R2:content-state 模型(spec 狀態表),非 Phase-1 boilerplate 互動 states,\n  tokens: {\n    bg: ['bg-info'],\n    fg: ['--fg-disabled', '--foreground', '--on-emphasis', 'text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Steps, StepItem, StepLabel, StepDescription, StepContent, stepsRootVariants, stepItemVariants }\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAc;AAEpB,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI,eAAe;AAAA,EACnB,IAAI,eAAe;AACrB;AAIA,MAAM,cAAc;AACpB,MAAM,gBAAgB;AAEtB,SAAS,mBAAmB,WAA2B;AACrD,SAAO,SAAS,WAAW,4BAA4B,cAAc,aAAa,MAAM,SAAS;AACnG;AAEA,SAAS,iBAAiB,OAAyB,QAAyB;AAC1E,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,UAAU,aAAa,CAAC,OAAQ,QAAO;AAC3C,SAAO;AACT;AAmBA,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAqC;AAC5C,QAAM,MAAM,MAAM,WAAW,YAAY;AACzC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,SAAO;AACT;AAaA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,qBAA2C;AAClD,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qEAAqE;AAC/F,SAAO;AACT;AAEA,MAAM,mBAAmB,MAAM,cAAsB,CAAC;AAItD,SAAS,aACP,WACA,OACA,iBACA,aACA,iBACA,QACA,UACkB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,YAAY,IAAI,SAAS,EAAG,QAAO;AACvC,MAAI,gBAAgB,IAAI,SAAS,EAAG,QAAO;AAC3C,MAAI,cAAc,MAAO,QAAO;AAChC,MAAI,UAAU,gBAAgB,IAAI,SAAS,EAAG,QAAO;AACrD,SAAO;AACT;AAEA,SAAS,YACP,OACA,QACA,UACS;AACT,MAAI,SAAU,QAAO;AACrB,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,UAAU;AACnB;AAEA,SAAS,kBACP,iBACA,WACa;AACb,MAAI,oBAAoB,MAAO,QAAO,IAAI,IAAI,SAAS;AACvD,MAAI,CAAC,mBAAmB,oBAAoB,OAAQ,4BAAW,IAAA;AAC/D,SAAO,IAAI,IAAI,eAAe;AAChC;AAEA,SAAS,uBACP,aACA,iBACa;AACb,QAAM,YAAY,IAAI,IAAI,eAAe;AACzC,QAAM,YAAY,IAAI,IAAI,SAAS;AACnC,aAAW,KAAK,aAAa;AAC3B,QAAI,CAAC,UAAU,IAAI,CAAC,GAAG;AACrB,gBAAU,IAAI,CAAC;AACf;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAIA,MAAM,oBAAoB,IAAI,qBAAqB;AAAA,EACjD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,iBAAiB,EAAE,aAAa,WAAA;AAClC,CAAC;AAkBD,MAAM,QAAQ,MAAM;AAAA,EAClB,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB,CAAA;AAAA,IAClB,cAAc,CAAA;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA6B,YAAY;AACzF,UAAM,eAAe,cAAc;AACnC,UAAM,QAAQ,eAAe,YAAY;AAEzC,UAAM,WAAW,MAAM;AAAA,MACrB,CAAC,SAAiB;AAChB,YAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,uDAAgB;AAAA,MAClB;AAAA,MACA,CAAC,cAAc,aAAa;AAAA,IAAA;AAG9B,UAAM,cAAc,MAAM,QAAQ,MAAM;AACtC,YAAM,OAAiB,CAAA;AACvB,YAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,YACE,MAAM,eAAe,KAAK,KAC1B,OAAO,MAAM,UAAU,YACvB,MAAM,SACN,WAAW,MAAM,OACjB;AACA,eAAK,KAAK,OAAQ,MAAM,MAA4B,KAAK,CAAC;AAAA,QAC5D;AAAA,MACF,CAAC;AACD,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,kBAAkB,MAAM;AAAA,MAC5B,MAAM,uBAAuB,aAAa,eAAe;AAAA,MACzD,CAAC,aAAa,eAAe;AAAA,IAAA;AAG/B,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM;AAAA,MAAsB,MAChE,kBAAkB,iBAAiB,WAAW;AAAA,IAAA;AAGhD,UAAM,iBAAiB,MAAM,YAAY,CAAC,cAAsB;AAC9D,qBAAe,CAAA,SAAQ;AACrB,cAAM,OAAO,IAAI,IAAI,IAAI;AACzB,YAAI,KAAK,IAAI,SAAS,EAAG,MAAK,OAAO,SAAS;AAAA,YACzC,MAAK,IAAI,SAAS;AACvB,eAAO;AAAA,MACT,CAAC;AAAA,IACH,GAAG,CAAA,CAAE;AAEL,UAAM,YAAY,MAAM,SAAS,MAAM,QAAQ;AAE/C,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO;AAAA,QACL;AAAA,QACA,iBAAiB,IAAI,IAAI,eAAe;AAAA,QACxC,aAAa,IAAI,IAAI,WAAW;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MAAA;AAAA,MAET,CAAC,OAAO,iBAAiB,aAAa,iBAAiB,QAAQ,MAAM,aAAa,WAAW,aAAa,UAAU,gBAAgB,SAAS;AAAA,IAAA;AAI/I,UAAM,QAAQ;AACd,UAAM,iBAAoC,CAAA;AAE1C,UAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AACjD,UAAI,CAAC,MAAM,eAAe,KAAK,GAAG;AAChC,uBAAe,KAAK,KAAK;AACzB;AAAA,MACF;AACA,YAAM,SAAS,UAAU,QAAQ;AACjC,YAAM,SAAS,MAAM;AAAA,QACnB;AAAA,QACA,EAAE,UAAU,OAAA;AAAA,MAAO;AAErB,qBAAe;AAAA,QACb,oBAAC,iBAAiB,UAAjB,EAAgD,OAAO,QAAQ,GAC7D,UAAA,OAAA,GAD6B,QAAQ,KAAK,EAE7C;AAAA,MAAA;AAAA,IAIJ,CAAC;AAED,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,UAC5B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,oBAAkB;AAAA,QAClB,aAAW;AAAA,QACX,WAAW,GAAG,kBAAkB,EAAE,YAAA,CAAa,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAgBpB,MAAM,mBAAmB,IAAI,gCAAgC;AAAA,EAC3D,UAAU;AAAA,IACR,aAAa;AAAA;AAAA,MAEX,UAAU;AAAA;AAAA;AAAA,MAGV,YAAY;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,aAAa,YAAY,MAAM,KAAA;AACpD,CAAC;AAGD,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC,EAAE,OAAO,OAAO,eAAe,WAAW,OAAO,UAAU,WAAW,WAAW,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC3G,UAAM,QAAQ,gBAAA;AACd,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IAAA;AAEF,UAAM,UAAU,UAAU,MAAM;AAChC,UAAM,YAAY,YAAY,OAAO,MAAM,QAAQ,QAAQ;AAC3D,UAAM,WACJ,MAAM,cAAc,kBAAkB,UAAU,MAAM,YAAY,IAAI,KAAK;AAE7E,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,UAAW;AAEhB,YAAM,SAAS,KAAK;AACpB,UAAI,MAAM,cAAc,YAAY;AAClC,cAAM,eAAe,KAAK;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,WAAW,OAAO,KAAK,CAAC;AAE5B,UAAM,UAAU,MAAM,QAA8B,OAAO;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IAAA,IACE,CAAC,OAAO,OAAO,SAAS,UAAU,WAAW,UAAU,UAAU,QAAQ,CAAC;AAE9E,UAAM,aAAa,MAAM,gBAAgB;AAEzC,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc,WAAW;AAAA,QACzB,iBAAe,YAAY;AAAA,QAC3B,kBAAgB,aAAa;AAAA,QAC7B,gBAAc,UAAU,SAAS;AAAA,QACjC,iBAAe,YAAY;AAAA,QAC3B,WAAW;AAAA,UACT,iBAAiB,EAAE,aAAa,MAAM,aAAa,MAAM,MAAM,MAAM;AAAA,UACrE,cAAc,CAAC,YAAY;AAAA,UAC3B,CAAC,aAAa;AAAA,UACd;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA,oBAAC,kBAAgB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,GAE9B;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAIvB,SAAS,eAAe,EAAE,YAA2C;AACnE,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AAEb,MAAI,YAA6B;AACjC,MAAI,WAA4B;AAChC,MAAI,cAA+B;AACnC,QAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,QAAI,MAAM,SAAS,UAAW,aAAY;AAAA,aACjC,MAAM,SAAS,gBAAiB,YAAW;AAAA,aAC3C,MAAM,SAAS,YAAa,eAAc;AAAA,EACrD,CAAC;AAED,MAAI,MAAM,gBAAgB,cAAc;AACtC,WAAO,oBAAC,kBAAA,EAAiB,OAAO,WAAW,aAAa,UAAU;AAAA,EACpE;AACA,SACE,oBAAC,gBAAA,EAAe,OAAO,WAAW,aAAa,UAAU,SAAS,aAAa,QAAQ,KAAK,OAAA,CAAQ;AAExG;AAMA,MAAM,mBAAqD;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,SAAyF;AACtI,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,QAAM,YAAY,CAAC,MAA2C;AAC5D,QAAI,CAAC,KAAK,UAAW;AACrB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,WAAK,SAAA;AAAA,IACP;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK,YAAY,WAAW;AAAA,MAClC,UAAU,KAAK,YAAY,IAAI;AAAA,MAC/B,SAAS,KAAK,YAAY,KAAK,WAAW;AAAA,MAC1C,WAAW,KAAK,YAAY,YAAY;AAAA,MACxC,iBAAe,KAAK,YAAY;AAAA,MAChC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA,KAAK,YACD,gHACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,KAAK,KAAK,QAAQ,MAAM,KAAK,MAAM,iBAAiB,KAAK,KAAK,CAAC,IAAG;AAAA,QAC5F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAIA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,cAAc,CAAC,CAAC,WAAW,KAAK;AACtC,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,0BAGxB,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,OAAO,EAAE,OAAO,gBAC1B,UAAA,oBAAC,iBAAc,EAAA,CACjB;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,QAAA,GACH;AAAA,QAGC,MAAM,cAAc,cAAc,CAAC,CAAC,WACnC,oBAAC,YAAA,EAAW,eAAW,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW;AAAA,cACT;AAAA,cACA,KAAK,YAAY;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,EACF,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACC,eACC,qBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,OAAO,gBAAgB;AAAA,MAC1D,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,QAAA,CAAQ;AAAA,IAAA,GAC3C;AAAA,IAED,CAAC,UAAU,oBAAC,uBAAA,CAAA,CAAsB;AAAA,EAAA,GACrC;AAEJ;AAIA,SAAS,wBAAwB;AAC/B,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,SAAS,eAAe,MAAM,IAAI,IAAI;AAC5C,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA,SAAS,YAAY;AAAA,MAAA;AAAA,MAEvB,OAAO;AAAA,QACL,MAAM,oBAAoB,MAAM,IAAI,IAAI;AAAA,QACxC,KAAK,gBAAgB,MAAM,QAAQ,GAAG;AAAA,QACtC,QAAQ,QAAQ,MAAM,gBAAgB,GAAG;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGN;AAkBA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,0BAExB,UAAA;AAAA,MAAA,oBAAC,YAAA,EACC,UAAA,oBAAC,eAAA,CAAA,CAAc,GACjB;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA,OAAM;AAAA,MAExC,CAAC,KAAK,8BACJ,OAAA,EAAI,WAAU,4CAA2C,eAAW,MACnE,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,YAAY,WAAW,GAAG,EAAA,CACvE;AAAA,IAAA,GAEJ;AAAA,IAEC,eACC,oBAAC,OAAA,EAAI,WAAU,WAAU,OAAO,EAAE,aAAa,eAAe,MAC3D,UAAA,YAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAIA,SAAS,gBAAgB;AACvB,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,EAAE,MAAM,OAAA,IAAW;AACzB,QAAM,EAAE,OAAO,SAAS,SAAA,IAAa;AAErC,MAAI,SAAS,KAAM,QAAO,oBAAC,eAAY,OAAc,SAAkB,UAAoB,QAAgB;AAC3G,6BAAQ,eAAA,EAAc,MAAY,OAAc,SAAkB,UAAoB,QAAgB;AACxG;AAIA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAED,QAAM,WAAY,UAAU,aAAa,UAAW,UAAU;AAE9D,MAAI;AACJ,MAAI,UAAU;AACZ,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E,OAAO;AACL,UAAM,QACJ,UAAU,cAAc,gBACpB,UAAU,UAAU,iBAClB,UAAU,aAAa,CAAC,SAAS,uBAC/B;AAEV,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,aAAa,QAAQ,YAAA;AAAA,MAErC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,sBAAsB,YAAY,kBAAkB;AAAA,UAClE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;AAIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,WAAW,eAAe,IAAI;AACpC,QAAM,SAAS,oBAAoB,IAAI;AAEvC,MAAI;AACJ,MAAI;AAEJ,UAAQ,OAAA;AAAA,IACN,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF;AACE,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,EAAA;AAGJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO;AAAA;AAAA,QAEP,UAAU,SAAS,OAAO,6BAA6B;AAAA,QACvD,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,MAAA;AAAA,MAG7E,UAAA,oBAAC,kBAAA,EAAiB,OAAc,OAAA,CAAgB;AAAA,IAAA;AAAA,EAAA;AAGtD;AAEA,SAAS,iBAAiB,EAAE,OAAO,UAAuD;AACxF,MAAI,UAAU,YAAa,QAAO,oBAAC,SAAM,MAAM,QAAQ,aAAa,KAAK;AACzE,MAAI,UAAU,QAAS,QAAO,oBAAC,KAAE,MAAM,QAAQ,aAAa,KAAK;AACjE,6BAAQ,YAAA,EAAW;AACrB;AAEA,SAAS,aAAa;AACpB,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,SAAO,oBAAC,UAAM,UAAA,MAAA,CAAM;AACtB;AAOA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,OAAO,SAAS,SAAA,IAAa,mBAAA;AAErC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA;AAAA,UAGT;AAAA,UACA,SAAS,OAAO,iBAAiB;AAAA,UACjC,WACI,qBACA,UAAU,UACR,oBACA,UACE,oBACA;AAAA,UACR;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAMxB,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,SAAA,IAAa,mBAAA;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET,SAAS,OACL,gDACA;AAAA,UACJ;AAAA,UACA,WAAW,qBAAqB;AAAA,UAChC;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,UAAU,SAAS,OAAO,0BAA0B;AAAA,UACpD,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,YAAA,IAAgB,gBAAA;AACxB,QAAI,gBAAgB,aAAc,QAAO;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qCAAqC,SAAS;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,YAAY,cAAc;AAMnB,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,IAAI,GAAG,MAAM,4CAAA;AAAA,IACnB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,EAAuD;AAAA,EAE7E,QAAQ,CAAC,YAAY,aAAa,WAAW,aAAa,OAAO;AAAA;AAAA,EACjE,QAAQ;AAAA,IACN,IAAI,CAAC,SAAS;AAAA,IACd,IAAI,CAAC,iBAAiB,gBAAgB,iBAAiB,mBAAmB,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IACrJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/Switch/index.js

@@ -0,0 +1,7 @@
+import { Switch, switchMeta, switchVariants } from "./switch.js";
+export {
+  Switch,
+  switchMeta,
+  switchVariants
+};
+//# sourceMappingURL=index.js.map

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

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

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

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