@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/input-number/InputNumber.svelte

@@ -1,28 +1,32 @@
 <!--
-  InputNumber — see specs/components/input/InputNumber.spec.md
-  Constrained numeric input: native <input inputmode="decimal"> + stacked steppers.
-  Controlled / uncontrolled (same pattern as Input). Variation only via onChange.
-  长按连续增减：按钮 mousedown 首延迟 400ms 后以 60ms 间隔重复，up/leave/卸载清理。
+  InputNumber — 严格对齐 Semi Design inputNumber（复用已对齐的 Input，对齐 Semi InputNumber extends InputProps）。
+  受约束的数值录入：内部复用 <Input>，经 rest 透传 role=spinbutton + aria-valuenow/min/max/valuetext
+  落到原生 <input>，右侧 stacked 步进器（正常态外置 sibling、innerButtons 态作 Input suffix）。
+  受控 / 非受控（value 显式提供即受控，只回调不回写）。
+  DOM/class 对齐 Semi 连字符体系：
+    外层容器 .cd-input-number（透明 flex，含 -size-{size}），边框/底色由 Input 承担
+    步进器 .cd-input-number-suffix-btns（innerButtons → -inner）
+    按钮 .cd-input-number-button + -button-up/-down（+ -not-allowed / -disabled）
+  长按连续增减：按钮 mousedown 首延迟 pressTimeout 后以 pressInterval 间隔重复，up/leave/卸载清理。
   formatter/parser：自定义显示/解析（formatter 仅作用于非编辑态显示）。
-  mouseWheel/selectOnFocus/autofocus 命令式监听挂在 action 上并 cleanup（红线 #3）。
+  货币 / 科学计数法：仅失焦显示态套用；current/onChange/onNumberChange 的值始终是完整 number。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import {
     useId,
-    clampWithMode,
-    boundaryHitOf,
     roundToPrecision,
     addNumberStep,
     formatWithLocale,
     useLiveAnnouncer,
-    type BoundaryMode,
   } from '@chenzy-design/core';
+  import { IconChevronUp, IconChevronDown } from '@chenzy-design/icons';
   import { useLocale } from '../locale-provider/index.js';
+  import Input from '../input/Input.svelte';
+  import { getInputGroupContext } from '../input/context.js';
 
   type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type ControlsPosition = 'right' | 'sides';
+  type ValidateStatus = 'default' | 'error' | 'warning' | 'success';
 
   interface Props {
     value?: number | null;
@@ -32,64 +36,92 @@
     step?: number;
     shiftStep?: number;
     precision?: number;
-    /** 越界处理：clamp 钳制 / strict 拒绝回滚 */
-    boundaryMode?: BoundaryMode;
     size?: Size;
     disabled?: boolean;
     readonly?: boolean;
-    status?: Status;
-    controls?: boolean;
-    /** 步进按钮布局：right 右侧 stacked / sides 两侧 */
-    controlsPosition?: ControlsPosition;
-    /** 步进按钮内嵌悬浮（hover/focus 显形） */
+    /** 校验状态（对齐 Semi InputProps validateStatus，含 success）。 */
+    validateStatus?: ValidateStatus;
+    /** 步进按钮内嵌悬浮（hover/focus 显形，对齐 Semi innerButtons）。 */
     innerButtons?: boolean;
-    keyboard?: boolean;
-    /** 聚焦时滚轮步进 */
-    mouseWheel?: boolean;
+    /** 彻底隐藏步进按钮（对齐 Semi hideButtons）。 */
+    hideButtons?: boolean;
     placeholder?: string;
-    /** 输入框前置内容（如货币符号 ¥、单位）；传 Snippet 可自定义渲染 */
+    /** 输入框前置内容（如货币符号 ¥、单位）；传 Snippet 可自定义渲染。 */
     prefix?: string | Snippet;
-    /** 输入框后置内容（如单位 %、kg）；传 Snippet 可自定义渲染 */
+    /** 内嵌标签（渲染在输入框内左侧，与 prefix 同槽，对齐 Semi insetLabel）。 */
+    insetLabel?: Snippet | string;
+    /** 内嵌标签容器 id（关联 aria，对齐 Semi insetLabelId）。 */
+    insetLabelId?: string;
+    /** 输入框后置内容（如单位 %、kg）；传 Snippet 可自定义渲染。 */
     suffix?: string | Snippet;
     name?: string;
-    /** input 元素 id，关联外部 label；不传自动生成 */
+    /** input 元素 id，关联外部 label；不传自动生成。 */
     id?: string;
     ariaLabel?: string;
-    /** 挂载自动聚焦 */
+    /** aria-labelledby：关联外部 label 元素（Form.Field 透传 labelId，对齐 Semi）。 */
+    ariaLabelledby?: string;
+    /** aria-describedby：关联 helpText / extraText（Form.Field 透传）。 */
+    ariaDescribedby?: string;
+    /** aria-errormessage：error 态关联错误信息容器（Form.Field 透传）。 */
+    ariaErrormessage?: string;
+    /** aria-required：必填语义（Form.Field required 透传）。 */
+    ariaRequired?: boolean;
+    /** 挂载自动聚焦（对齐 Semi autofocus）。 */
     autofocus?: boolean;
-    /** 聚焦时全选文本 */
-    selectOnFocus?: boolean;
-    /** 数字格式化 locale，传给内部 Intl（仅未提供 formatter 时生效） */
+    /** 数字格式化 locale，传给内部 Intl（仅未提供 formatter 时生效）。 */
     locale?: string;
-    /** 自定义显示格式化（仅非编辑态） */
+    /** 自定义显示格式化（仅非编辑态；对齐 Semi formatter）。 */
     formatter?: (n: number) => string;
-    /** 自定义解析（与 formatter 对应） */
+    /** 自定义解析（与 formatter 对应；对齐 Semi parser）。 */
     parser?: (s: string) => number;
-    onChange?: (v: number | null) => void;
-    /** 触达/试图越过边界 */
-    onBoundaryHit?: (e: { boundary: 'min' | 'max'; value: number }) => void;
-    /** 任一步进动作完成（按钮 / 键盘 / 滚轮） */
-    onStep?: (e: {
-      value: number;
-      direction: 'up' | 'down';
-      source: 'button' | 'keyboard' | 'wheel';
-    }) => void;
-    /** 聚焦 */
+    /**
+     * 值变化（对齐 Semi onChange）。货币/formatter 模式回显示字符串，其余回 number；
+     * 空值回 null。携带原生 event（step/键盘/滚轮触发时为 undefined）。
+     */
+    onChange?: (value: number | string | null, e?: Event) => void;
+    /** 携带 number 类型的变化回调（对齐 Semi onNumberChange，带 event）。 */
+    onNumberChange?: (value: number | null, e?: Event) => void;
+    /** 聚焦（对齐 Semi onFocus）。 */
     onFocus?: (e: FocusEvent) => void;
-    /** 失焦（已完成 commit 归一化） */
+    /** 失焦（已完成 commit 归一化；对齐 Semi onBlur）。 */
     onBlur?: (e: FocusEvent) => void;
-    /** 透传原生 keydown（便于扩展，如 Enter 提交表单） */
-    onKeydown?: (e: KeyboardEvent) => void;
-    /** 无边框模式 */
+    /** 透传原生 keydown（对齐 Semi onKeyDown）。 */
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /** 点击「+」按钮回调（对齐 Semi onUpClick，携带步进后值与鼠标事件）。 */
+    onUpClick?: (value: number | null, e: MouseEvent) => void;
+    /** 点击「-」按钮回调（对齐 Semi onDownClick，携带步进后值与鼠标事件）。 */
+    onDownClick?: (value: number | null, e: MouseEvent) => void;
+    /** 无边框模式（对齐 Semi InputProps borderless）。 */
     borderless?: boolean;
-    /** 显示清除按钮（有值时出现 ×） */
+    /** 显示清除按钮（有值时出现 ×；对齐 Semi InputProps showClear）。 */
     showClear?: boolean;
-    /** 自定义清除图标 */
+    /** 自定义清除图标（对齐 Semi clearIcon）。 */
     clearIcon?: Snippet;
-    /** 点击 +/- 按钮后保持输入框聚焦（默认 false） */
+    /** 点击 +/- 按钮后保持输入框聚焦（对齐 Semi keepFocus，默认 false）。 */
     keepFocus?: boolean;
-    /** 携带 number 类型的变化回调（区别于 onChange 返回 number | null） */
-    onNumberChange?: (value: number | null) => void;
+    /** focus() 命令式聚焦时是否阻止滚动（对齐 Semi preventScroll，默认 false）。 */
+    preventScroll?: boolean;
+    /** 长按后延迟多久开始连续触发（ms，对齐 Semi pressTimeout，默认 250）。 */
+    pressTimeout?: number;
+    /** 连续触发间隔（ms，对齐 Semi pressInterval，默认 250）。 */
+    pressInterval?: number;
+    /**
+     * 失焦时大数值以科学计数法显示（对齐 Semi scientificNotation；聚焦编辑仍为完整数字）。
+     * 传对象可自定义有效位阈值 threshold（默认 15）。
+     */
+    scientificNotation?: boolean | { threshold?: number };
+    /** 货币展示（对齐 Semi currency）：true 按 localeCode 自动推断币种；字符串（'CNY'/'USD'）显式指定 ISO 4217 币种码。 */
+    currency?: boolean | string;
+    /** 货币显示形式：symbol（￥）/ code（CNY）/ name（人民币），默认 symbol（对齐 Semi currencyDisplay）。 */
+    currencyDisplay?: 'symbol' | 'code' | 'name';
+    /** 货币格式化 BCP-47 locale（'zh-CN'/'de-DE'）；未传回退 locale，再回退 'zh-CN'（对齐 Semi localeCode）。 */
+    localeCode?: string;
+    /** 是否显示货币符号/代码/名称；false 时仅千分位（style:'decimal'），供 prefix/suffix 自定义（对齐 Semi showCurrencySymbol，默认 true）。 */
+    showCurrencySymbol?: boolean;
+    /** 根元素自定义类名（对齐 Semi className）。 */
+    class?: string;
+    /** 根元素自定义内联样式（对齐 Semi style）。 */
+    style?: string;
   }
 
   let {
@@ -98,48 +130,66 @@
     min = -Infinity,
     max = Infinity,
     step = 1,
-    shiftStep,
+    shiftStep = 10,
     precision,
-    boundaryMode = 'clamp',
-    size = 'default',
-    disabled = false,
+    size: sizeProp,
+    disabled: disabledProp,
     readonly = false,
-    status = 'default',
-    controls = true,
-    controlsPosition = 'right',
+    validateStatus = 'default',
     innerButtons = false,
-    keyboard = true,
-    mouseWheel = false,
+    hideButtons = false,
     placeholder,
     prefix,
+    insetLabel,
+    insetLabelId,
     suffix,
     name,
     id,
     ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaErrormessage,
+    ariaRequired,
     autofocus = false,
-    selectOnFocus = false,
     locale,
     formatter,
     parser,
     onChange,
-    onBoundaryHit,
-    onStep,
+    onNumberChange,
     onFocus,
     onBlur,
-    onKeydown,
+    onKeyDown,
+    onUpClick,
+    onDownClick,
     borderless = false,
     showClear = false,
     clearIcon,
     keepFocus = false,
-    onNumberChange,
+    preventScroll = false,
+    pressTimeout = 250,
+    pressInterval = 250,
+    scientificNotation = false,
+    currency = false,
+    currencyDisplay = 'symbol',
+    localeCode,
+    showCurrencySymbol = true,
+    class: className,
+    style,
   }: Props = $props();
 
+  // InputGroup 组级默认（size/disabled）：显式 prop 始终优先，否则回退组级，再回退组件默认。
+  const group = getInputGroupContext();
+  const size = $derived<Size>(sizeProp ?? group?.size ?? 'default');
+  const disabled = $derived<boolean>(disabledProp ?? group?.disabled ?? false);
+
   const loc = useLocale();
-  // 单例 live region（polite）：值被 min/max 钳制（越界回弹）时播报实际生效值（红线 #3：命令式）。
+  // 单例 live region（polite）：值被 min/max 钳制（越界回弹）时播报实际生效值。
   const announcer = useLiveAnnouncer();
-  // prefix/suffix 可传 string 或 Snippet；函数即视为 Snippet。
+  // prefix 可传 string 或 Snippet；函数即视为 Snippet，字符串走内置 span 渲染。
   const prefixSnippet = $derived(typeof prefix === 'function' ? (prefix as Snippet) : undefined);
+  const prefixText = $derived(typeof prefix === 'string' ? prefix : undefined);
   const suffixSnippet = $derived(typeof suffix === 'function' ? (suffix as Snippet) : undefined);
+  const suffixText = $derived(typeof suffix === 'string' ? suffix : undefined);
   // 生成一次稳定回退 id（在 $derived 里调 useId 会每次产生新 id）。
   const autoId = useId('cd-input-number');
   const inputId = $derived(id ?? autoId);
@@ -152,25 +202,79 @@
 
   // While editing, `editingText` holds the raw string the user typed (kept loose
   // so intermediate forms like "-" / "1." survive). When `null`, the field shows
-  // the formatted `current` — no $effect needed, so external value changes flow
-  // straight through the derived display.
+  // the formatted `current`.
   let editingText = $state<string | null>(null);
+  // 是否聚焦（编辑态）：科学计数法/货币仅在失焦显示态生效，聚焦时展示完整数字。
+  let focused = $state(false);
+  // 悬浮态：innerButtons 步进器仅在 hover/focus 时出现在 Input suffix（对齐 Semi renderSuffix）。
+  let hovering = $state(false);
   const text = $derived(editingText ?? formatDisplay(current));
 
-  const effectiveShiftStep = $derived(shiftStep ?? step * 10);
+  // 科学计数法：启用与阈值派生（对象可自定义 threshold，默认 15）。
+  const sciEnabled = $derived(!!scientificNotation);
+  const sciThreshold = $derived(
+    typeof scientificNotation === 'object' ? (scientificNotation.threshold ?? 15) : 15,
+  );
+
+  // --- 货币展示（对齐 Semi currency）---
+  const currencyEnabled = $derived(currency !== false && currency !== undefined);
+  const resolvedLocaleCode = $derived(localeCode ?? locale ?? 'zh-CN');
+  const resolvedCurrencyCode = $derived.by(() => {
+    if (typeof currency === 'string') return currency;
+    return localeToCurrency(resolvedLocaleCode);
+  });
 
   function getInitialValue(): number | null {
     return defaultValue ?? null;
   }
 
+  // locale → ISO 4217 币种码映射（currency===true 时按 localeCode 推断）。
+  function localeToCurrency(code: string): string {
+    const lc = code.toLowerCase();
+    const exact: Record<string, string> = {
+      'zh-cn': 'CNY',
+      'zh-tw': 'TWD',
+      'en-us': 'USD',
+      'en-gb': 'GBP',
+      'ja-jp': 'JPY',
+      'ko-kr': 'KRW',
+      'vi-vn': 'VND',
+      'ru-ru': 'RUB',
+      'id-id': 'IDR',
+      'ms-my': 'MYR',
+      'th-th': 'THB',
+      'tr-tr': 'TRY',
+      'pt-br': 'BRL',
+      'sv-se': 'SEK',
+      'pl-pl': 'PLN',
+    };
+    if (exact[lc]) return exact[lc];
+    const lang = lc.split('-')[0] ?? lc;
+    const byLang: Record<string, string> = {
+      de: 'EUR',
+      fr: 'EUR',
+      it: 'EUR',
+      es: 'EUR',
+      nl: 'EUR',
+      ar: 'SAR',
+      ro: 'RON',
+      zh: 'CNY',
+      ja: 'JPY',
+      ko: 'KRW',
+      ru: 'RUB',
+      vi: 'VND',
+    };
+    return byLang[lang] ?? 'USD';
+  }
+
   const atMin = $derived(current !== null && current <= min);
   const atMax = $derived(current !== null && current >= max);
 
-  // aria-valuetext：当存在 formatter / locale 使显示值不同于裸数字时，向屏幕阅读器
-  // 播报格式化后的可读文本（如「1,234」「¥1,200」）。无格式化时省略，让 AT 直接读 valuenow。
+  // aria-valuetext：存在 formatter / locale / currency 使显示值不同于裸数字时，向屏幕阅读器
+  // 播报格式化后的可读文本。无格式化时省略，让 AT 直接读 valuenow。
   const ariaValueText = $derived.by<string | undefined>(() => {
     if (current === null) return undefined;
-    if (!formatter && !locale) return undefined;
+    if (!formatter && !locale && !currencyEnabled) return undefined;
     const display = formatDisplay(current);
     if (display === '' || display === String(current)) return undefined;
     return display;
@@ -178,8 +282,20 @@
 
   function formatDisplay(n: number | null): string {
     if (n === null || Number.isNaN(n)) return '';
+    // 货币展示：仅失焦显示态套用（聚焦编辑态展示纯数字，便于解析）。
+    // currency 优先于科学计数法（对齐 Semi「currency 不支持 sci」）。
+    if (currencyEnabled && !focused) {
+      return new Intl.NumberFormat(resolvedLocaleCode, {
+        style: showCurrencySymbol ? 'currency' : 'decimal',
+        currency: resolvedCurrencyCode,
+        currencyDisplay,
+      }).format(n);
+    }
+    // 科学计数法：仅失焦显示态、且数量级达阈值时套用。
+    if (sciEnabled && !focused && Math.abs(n) >= 10 ** sciThreshold) {
+      return n.toExponential();
+    }
     if (formatter) return formatter(n);
-    // 未提供 formatter 时：仅当显式传入 locale 才走 Intl，否则保持现状 String(n)。
     if (locale) return formatWithLocale(n, locale);
     return String(n);
   }
@@ -187,7 +303,17 @@
   function parseText(t: string): number | null {
     const trimmed = t.trim();
     if (trimmed === '') return null;
-    const n = parser ? parser(t) : Number(trimmed);
+    if (parser) {
+      const n = parser(t);
+      return Number.isNaN(n) ? null : n;
+    }
+    // 货币模式：剥离货币符号/代码/名称/千分位分隔符，仅保留数字、小数点、负号。
+    if (currencyEnabled) {
+      const cleaned = trimmed.replace(/[^\d.-]/g, '');
+      const n = Number(cleaned);
+      return Number.isNaN(n) ? null : n;
+    }
+    const n = Number(trimmed);
     return Number.isNaN(n) ? null : n;
   }
 
@@ -195,78 +321,83 @@
     return roundToPrecision(n, precision);
   }
 
-  // 归一化：round → clamp/strict。strict 越界返回 null（表示拒绝，调用方回滚）。
-  // 同时上报 boundaryHit。
-  function normalize(n: number): number | null {
+  // 归一化：round → clamp 到 [min,max]（对齐 Semi：恒 clamp，无 strict 模式）。
+  function normalize(n: number): number {
     const rounded = applyPrecision(n);
-    const hit = boundaryHitOf(rounded, min, max);
-    if (hit) onBoundaryHit?.({ boundary: hit, value: rounded });
-    const clamped = clampWithMode(rounded, min, max, boundaryMode);
-    // clamp 模式越界回弹：实际生效值与输入不同 → polite 播报生效值（strict 模式返回 null 拒绝，不播）。
-    if (hit && clamped !== null && clamped !== rounded) {
+    const clamped = Math.min(max, Math.max(min, rounded));
+    // 越界回弹：实际生效值与输入不同 → polite 播报生效值。
+    if (clamped !== rounded && Number.isFinite(clamped)) {
       announcer.announce(loc().t('InputNumber.clampedAnnounce', { value: formatDisplay(clamped) }));
     }
     return clamped;
   }
 
-  function commitValue(next: number | null) {
-    // Controlled: never write the prop here; propagate only via onChange.
-    // Uncontrolled: keep local state in sync. (Avoids the value->onChange->value loop.)
-    if (!isControlled) inner = next;
-    onChange?.(next);
-    onNumberChange?.(next);
+  // onChange 值：货币/formatter 模式回显示字符串，其余回 number（对齐 Semi onChange 值语义）。
+  function changeValueOf(n: number | null): number | string | null {
+    if (n === null) return null;
+    if (currencyEnabled || formatter) return formatDisplay(n);
+    return n;
   }
 
-  function clearValue() {
-    commitValue(null);
-    editingText = null;
-    inputEl?.focus({ preventScroll: true });
+  function commitValue(next: number | null, e?: Event) {
+    // Controlled: never write the prop here; propagate only via callbacks.
+    // Uncontrolled: keep local state in sync.
+    if (!isControlled) inner = next;
+    onChange?.(changeValueOf(next), e);
+    onNumberChange?.(next, e);
   }
 
   const canClear = $derived(showClear && !disabled && !readonly && current !== null);
 
-  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    editingText = e.currentTarget.value;
+  // Input onChange 回 string：编辑态仅缓存原始文本，parse/clamp/commit 延后到失焦/Enter。
+  function handleInputChange(v: string) {
+    editingText = v;
+  }
+
+  // Input showClear 清除：直接 commit null 并复位编辑态（对齐 Semi 内置清除）。
+  function handleClear() {
+    commitValue(null);
+    editingText = null;
+    inputRef?.focus();
   }
 
-  function commitFromText() {
+  function commitFromText(e?: Event) {
     const raw = editingText ?? formatDisplay(current);
     editingText = null;
     const parsed = parseText(raw);
     if (parsed === null) {
-      if (current !== null) commitValue(null);
+      if (current !== null) commitValue(null, e);
       return;
     }
     const normalized = normalize(parsed);
-    // strict 越界：normalize 返回 null → 拒绝写入，回滚到 current 显示。
-    // 受控值未变（不会触发重渲染回填 input），故命令式把 DOM 值还原为当前显示串。
-    if (normalized === null) {
-      restoreDisplay();
-      return;
-    }
-    if (normalized !== current) commitValue(normalized);
+    if (normalized !== current) commitValue(normalized, e);
+  }
+
+  function handleFocus(e: FocusEvent) {
+    // 进入编辑态：科学计数法/货币退回完整数字显示（text 派生重算）。
+    focused = true;
+    onFocus?.(e);
   }
 
   function handleBlur(e: FocusEvent) {
-    commitFromText();
-    // commit 归一化后再上报失焦（spec：blur 时已完成 commit）。
+    // 先清 focused：commitFromText 后 text 派生走显示态，失焦时才套科学计数法/货币。
+    focused = false;
+    commitFromText(e);
     onBlur?.(e);
   }
 
-  function stepBy(dir: 1 | -1, large: boolean, source: 'button' | 'keyboard' | 'wheel') {
-    if (disabled || readonly) return;
-    const delta = (large ? effectiveShiftStep : step) * dir;
+  // 步进：dir=±1，large 用 shiftStep。可选携带触发事件用于 up/down click 回调。
+  function stepBy(dir: 1 | -1, large: boolean): number | null {
+    if (disabled || readonly) return current;
+    const delta = (large ? shiftStep : step) * dir;
     const base = current ?? (Number.isFinite(min) ? min : 0);
     const next = normalize(addNumberStep(base, delta));
     editingText = null;
-    // strict 越界回滚：保持 current。
-    if (next === null) return;
     if (next !== current) commitValue(next);
-    // 步进动作完成上报（即便钳制后值未变也算一次步进尝试，但仅在落到有效值时触发）。
-    onStep?.({ value: next, direction: dir === 1 ? 'up' : 'down', source });
+    return next;
   }
 
-  // --- 长按连续增减：首延迟 400ms 后以 60ms 间隔重复，cleanup 清理（红线 #3）---
+  // --- 长按连续增减：首延迟 pressTimeout 后以 pressInterval 间隔重复，cleanup 清理 ---
   let holdTimer: ReturnType<typeof setTimeout> | undefined;
   let holdInterval: ReturnType<typeof setInterval> | undefined;
 
@@ -284,35 +415,37 @@
   function startHold(dir: 1 | -1, e: MouseEvent) {
     // 始终阻止 mousedown 失焦（现有行为），keepFocus 进一步确保聚焦保持。
     preventBlurSteal(e);
-    if (keepFocus && inputEl) inputEl.focus({ preventScroll: true });
+    if (keepFocus) inputRef?.focus();
     if (disabled || readonly) return;
-    stepBy(dir, false, 'button');
+    const next = stepBy(dir, false);
+    if (dir === 1) onUpClick?.(next, e);
+    else onDownClick?.(next, e);
     holdTimer = setTimeout(() => {
-      holdInterval = setInterval(() => stepBy(dir, false, 'button'), 60);
-    }, 400);
+      holdInterval = setInterval(() => stepBy(dir, false), pressInterval);
+    }, pressTimeout);
   }
 
   // 组件卸载兜底清理定时器。
   $effect(() => stopHold);
 
   function handleKeydown(e: KeyboardEvent) {
-    // 始终透传原生 keydown（即便 keyboard 关闭/禁用，便于使用方扩展，如 Enter 提交表单）。
-    onKeydown?.(e);
-    if (!keyboard || disabled || readonly) return;
+    // 始终透传原生 keydown（便于扩展，如 Enter 提交表单）。
+    onKeyDown?.(e);
+    if (disabled || readonly) return;
     if (e.key === 'ArrowUp') {
       e.preventDefault();
-      stepBy(1, e.shiftKey, 'keyboard');
+      stepBy(1, e.shiftKey);
     } else if (e.key === 'ArrowDown') {
       e.preventDefault();
-      stepBy(-1, e.shiftKey, 'keyboard');
+      stepBy(-1, e.shiftKey);
     } else if (e.key === 'PageUp') {
       e.preventDefault();
-      stepBy(1, true, 'keyboard');
+      stepBy(1, true);
     } else if (e.key === 'PageDown') {
       e.preventDefault();
-      stepBy(-1, true, 'keyboard');
+      stepBy(-1, true);
     } else if (e.key === 'Enter') {
-      commitFromText();
+      commitFromText(e);
     }
   }
 
@@ -321,247 +454,176 @@
     e.preventDefault();
   }
 
-  // --- 命令式监听：autofocus / selectOnFocus / mouseWheel + cleanup（红线 #3）---
-  let inputEl: HTMLInputElement | undefined;
-
-  // 受控值未变时（如 strict 越界拒绝），Svelte 不会重渲染 input.value，需命令式还原。
-  function restoreDisplay() {
-    if (inputEl) inputEl.value = formatDisplay(current);
-  }
-
-  function inputActions(node: HTMLInputElement) {
-    inputEl = node;
-    if (autofocus && !disabled) {
-      // 推迟到下一帧，确保挂载后 DOM 已就绪、避免抢占 SSR hydration。
-      requestAnimationFrame(() => node.focus());
-    }
-
-    function handleFocus(e: FocusEvent) {
-      onFocus?.(e);
-      // 推迟到下一帧：浏览器在 focus 后才放置默认光标，立即 select 会被覆盖。
-      if (selectOnFocus) requestAnimationFrame(() => node.select());
-    }
-
-    // 滚轮步进：仅聚焦时响应，passive=false 以便 preventDefault 阻止页面滚动。
-    function onWheel(e: WheelEvent) {
-      if (!mouseWheel || disabled || readonly) return;
-      if (document.activeElement !== node) return;
-      e.preventDefault();
-      stepBy(e.deltaY < 0 ? 1 : -1, e.shiftKey, 'wheel');
-    }
-
-    node.addEventListener('focus', handleFocus);
-    node.addEventListener('wheel', onWheel, { passive: false });
-
-    return {
-      destroy() {
-        node.removeEventListener('focus', handleFocus);
-        node.removeEventListener('wheel', onWheel);
-        if (inputEl === node) inputEl = undefined;
-      },
-    };
-  }
+  // 内部 Input 组件实例引用（复用其命令式 focus/blur 方法）。
+  let inputRef = $state<Input | undefined>(undefined);
+
+  // 命令式 Methods（对齐 Semi）：委托内部 Input（其 focus 尊重自身 preventScroll）。
+  export function focus(): void {
+    inputRef?.focus();
+  }
+  export function blur(): void {
+    inputRef?.blur();
+  }
+
+  // 步进器隐藏：hideButtons 或 innerButtons（innerButtons 靠 hover/focus 显形）。
+  const showButtons = $derived(!hideButtons);
+  // 正常态（非 inner、非 hidden）步进器外置为 Input 的兄弟节点；innerButtons 态作 Input 的 suffix。
+  const showOuterButtons = $derived(showButtons && !innerButtons);
+  // innerButtons 态：hover/focus 时步进器占据 Input suffix 槽。
+  const showInnerButtons = $derived(innerButtons && showButtons && (hovering || focused));
+  // 传给 Input 的 suffix：有内容（内嵌步进器 / 用户 suffix）才传 snippet，否则 undefined（不渲染空槽）。
+  const passSuffix = $derived(showInnerButtons || suffix != null);
+  // 传给 Input 的 prefix：仅在有值时传 snippet。
+  const passPrefix = $derived(prefix != null);
+
+  // 可选字符串属性经此聚合展开：值为 undefined 时键不出现，满足 Input 在 exactOptionalPropertyTypes
+  // 下 `?: string`（不含 undefined）的严格约束。clearIcon 同理（Snippet | undefined）。
+  const optionalAttrs = $derived({
+    ...(placeholder !== undefined && { placeholder }),
+    ...(name !== undefined && { name }),
+    ...(ariaLabel !== undefined && { ariaLabel }),
+    ...(ariaLabelledby !== undefined && { ariaLabelledby }),
+    ...(ariaDescribedby !== undefined && { ariaDescribedby }),
+    ...(ariaErrormessage !== undefined && { ariaErrormessage }),
+    ...(ariaRequired !== undefined && { ariaRequired }),
+    id: inputId,
+  });
 
   const cls = $derived(
     [
       'cd-input-number',
-      `cd-input-number--${size}`,
-      `cd-input-number--${status}`,
-      `cd-input-number--controls-${controlsPosition}`,
-      innerButtons && 'cd-input-number--inner',
-      prefix != null && 'cd-input-number--has-prefix',
-      suffix != null && 'cd-input-number--has-suffix',
-      disabled && 'cd-input-number--disabled',
-      borderless && 'cd-input-number--borderless',
+      `cd-input-number-size-${size}`,
+      validateStatus !== 'default' && `cd-input-number-${validateStatus}`,
+      innerButtons && 'cd-input-number-inner',
+      disabled && 'cd-input-number-disabled',
+      className,
     ]
       .filter(Boolean)
       .join(' '),
   );
 </script>
 
-<div class={cls} aria-invalid={status === 'error' || undefined}>
-  {#if prefix != null}
-    <span class="cd-input-number__affix cd-input-number__prefix">
-      {#if prefixSnippet}{@render prefixSnippet()}{:else}{prefix}{/if}
-    </span>
-  {/if}
-
-  <input
-    use:inputActions
-    class="cd-input-number__native"
-    type="text"
-    inputmode="decimal"
+<div
+  class={cls}
+  {style}
+  onmouseenter={() => (hovering = true)}
+  onmouseleave={() => (hovering = false)}
+  role="presentation"
+>
+  <Input
+    bind:this={inputRef}
     role="spinbutton"
-    id={inputId}
-    {name}
-    {disabled}
-    {readonly}
-    {placeholder}
-    value={text}
-    aria-label={ariaLabel}
+    inputmode="decimal"
+    type="text"
+    step={Number.isFinite(step) ? step : undefined}
     aria-valuenow={current ?? undefined}
     aria-valuetext={ariaValueText}
     aria-valuemin={Number.isFinite(min) ? min : undefined}
     aria-valuemax={Number.isFinite(max) ? max : undefined}
-    aria-invalid={status === 'error' || undefined}
-    aria-disabled={disabled || undefined}
     aria-readonly={readonly || undefined}
-    oninput={handleInput}
-    onblur={handleBlur}
-    onkeydown={handleKeydown}
+    aria-disabled={disabled || undefined}
+    {size}
+    {disabled}
+    {readonly}
+    {...optionalAttrs}
+    {validateStatus}
+    {borderless}
+    autoFocus={autofocus}
+    {preventScroll}
+    value={text}
+    showClear={canClear}
+    {...clearIcon !== undefined ? { clearIcon } : {}}
+    onChange={handleInputChange}
+    onClear={handleClear}
+    onKeyDown={handleKeydown}
+    onFocus={handleFocus}
+    onBlur={handleBlur}
+    {...passPrefix ? { prefix: prefixNode } : {}}
+    {...passSuffix ? { suffix: suffixNode } : {}}
+    {...insetLabel !== undefined ? { insetLabel } : {}}
+    {...insetLabelId !== undefined ? { insetLabelId } : {}}
   />
 
-  {#if suffix != null}
-    <span class="cd-input-number__affix cd-input-number__suffix">
-      {#if suffixSnippet}{@render suffixSnippet()}{:else}{suffix}{/if}
-    </span>
+  {#if showOuterButtons}
+    <div class="cd-input-number-suffix-btns">
+      {@render stepperButtons()}
+    </div>
   {/if}
+</div>
 
-  {#if canClear}
-    <button
-      type="button"
-      class="cd-input-number__clear"
-      tabindex="-1"
-      aria-label={loc().t('InputNumber.clear')}
-      onmousedown={(e) => e.preventDefault()}
-      onclick={clearValue}
-    >
-      {#if clearIcon}
-        {@render clearIcon()}
-      {:else}
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          <path
-            fill="currentColor"
-            d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm2.5 9.1-1.4 1.4L8 9.4 6.5 11l-1.4-1.4L6.6 8 5.1 6.5 6.5 5.1 8 6.6 9.5 5.1l1.4 1.4L9.4 8l1.1 1.1Z"
-          />
-        </svg>
-      {/if}
-    </button>
+<!-- prefix：Snippet 直渲，字符串包 span（对齐 Semi renderPrefix 同槽）。 -->
+{#snippet prefixNode()}
+  {#if prefixSnippet}
+    {@render prefixSnippet()}
+  {:else if prefixText != null}
+    <span class="cd-input-number-affix cd-input-number-prefix">{prefixText}</span>
   {/if}
+{/snippet}
 
-  {#if controls}
-    <span class="cd-input-number__actions">
-      <button
-        type="button"
-        class="cd-input-number__action cd-input-number__increment"
-        tabindex="-1"
-        aria-label={loc().t('InputNumber.increase')}
-        disabled={disabled || readonly || atMax}
-        onmousedown={(e) => startHold(1, e)}
-        onmouseup={stopHold}
-        onmouseleave={stopHold}
-      >
-        <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" focusable="false">
-          <path fill="currentColor" d="M8 4 3 10h10L8 4Z" />
-        </svg>
-      </button>
-      <button
-        type="button"
-        class="cd-input-number__action cd-input-number__decrement"
-        tabindex="-1"
-        aria-label={loc().t('InputNumber.decrease')}
-        disabled={disabled || readonly || atMin}
-        onmousedown={(e) => startHold(-1, e)}
-        onmouseup={stopHold}
-        onmouseleave={stopHold}
-      >
-        <svg viewBox="0 0 16 16" width="10" height="10" aria-hidden="true" focusable="false">
-          <path fill="currentColor" d="M3 6h10L8 12 3 6Z" />
-        </svg>
-      </button>
-    </span>
+<!--
+  Input suffix（对齐 Semi renderSuffix）：innerButtons 态渲染步进器；
+  否则渲染用户 suffix（string 包 span，Snippet 直渲）。正常态步进器不在此，见外置 sibling。
+-->
+{#snippet suffixNode()}
+  {#if showInnerButtons}
+    <div class="cd-input-number-suffix-btns cd-input-number-suffix-btns-inner">
+      {@render stepperButtons()}
+    </div>
+  {:else if suffixSnippet}
+    {@render suffixSnippet()}
+  {:else if suffixText != null}
+    <span class="cd-input-number-affix cd-input-number-suffix">{suffixText}</span>
   {/if}
-</div>
+{/snippet}
+
+<!-- 步进上/下按钮（对齐 Semi renderButtons）：正常态外置、innerButtons 态作 Input suffix。 -->
+{#snippet stepperButtons()}
+  <span
+    class="cd-input-number-button cd-input-number-button-up"
+    class:cd-input-number-button-up-not-allowed={disabled || readonly || atMax}
+    class:cd-input-number-button-up-disabled={disabled}
+    role="button"
+    tabindex="-1"
+    aria-label={loc().t('InputNumber.increase')}
+    aria-disabled={disabled || readonly || atMax || undefined}
+    onmousedown={(e) => startHold(1, e)}
+    onmouseup={stopHold}
+    onmouseleave={stopHold}
+  >
+    <IconChevronUp size="extra-small" />
+  </span>
+  <span
+    class="cd-input-number-button cd-input-number-button-down"
+    class:cd-input-number-button-down-not-allowed={disabled || readonly || atMin}
+    class:cd-input-number-button-down-disabled={disabled}
+    role="button"
+    tabindex="-1"
+    aria-label={loc().t('InputNumber.decrease')}
+    aria-disabled={disabled || readonly || atMin || undefined}
+    onmousedown={(e) => startHold(-1, e)}
+    onmouseup={stopHold}
+    onmouseleave={stopHold}
+  >
+    <IconChevronDown size="extra-small" />
+  </span>
+{/snippet}
 
 <style>
+  /* 外层容器 —— 对齐 Semi .semi-input-number：透明 inline-flex，边框/底色由内部 Input 承担。 */
   .cd-input-number {
-    display: inline-flex;
-    align-items: stretch;
-    inline-size: 100%;
-    block-size: var(--cd-input-height-default);
-    background: var(--cd-input-color-bg);
-    color: var(--cd-input-color-text);
-    border: 1px solid var(--cd-input-border);
-    border-radius: var(--cd-input-radius);
-    font-size: var(--cd-input-font-size);
-    overflow: hidden;
-    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-input-number--small {
-    block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-small);
-  }
-  .cd-input-number--large {
-    block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-header-6);
-  }
-  .cd-input-number:focus-within {
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-input-number--warning {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-input-number--error {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-input-number--disabled {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-input-number--borderless {
-    border-color: transparent;
-    background: transparent;
-    box-shadow: none;
-  }
-  .cd-input-number--borderless:focus-within {
-    border-color: transparent;
-    box-shadow: none;
-  }
-  .cd-input-number__clear {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    padding: 0;
-    padding-inline-end: var(--cd-spacing-extra-tight);
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    border-radius: var(--cd-border-radius-small);
-  }
-  .cd-input-number__clear:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-input-number__clear:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-input-number__native {
-    flex: 1 1 auto;
+    box-sizing: border-box;
     inline-size: 100%;
-    min-inline-size: 0;
-    margin: 0;
-    padding-inline: var(--cd-input-padding-x);
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    outline: none;
-  }
-  /* 有前/后缀时，由 affix 承担该侧边距，避免双重留白。 */
-  .cd-input-number--has-prefix .cd-input-number__native {
-    padding-inline-start: var(--cd-spacing-extra-tight);
-  }
-  .cd-input-number--has-suffix .cd-input-number__native {
-    padding-inline-end: var(--cd-spacing-extra-tight);
+    position: relative;
   }
-  .cd-input-number__native::placeholder {
-    color: var(--cd-input-color-placeholder);
+  /* innerButtons：步进器绝对定位于内嵌右内侧，需容器建立定位上下文。 */
+  .cd-input-number-inner {
+    position: relative;
   }
-  .cd-input-number__affix {
+
+  /* prefix/suffix affix（字符串态）—— 对齐 Semi：text-2，nowrap，不换行。 */
+  .cd-input-number-affix {
     display: inline-flex;
     align-items: center;
     flex: 0 0 auto;
@@ -569,112 +631,69 @@
     white-space: nowrap;
     user-select: none;
   }
-  .cd-input-number__prefix {
-    padding-inline-start: var(--cd-input-padding-x);
-  }
-  .cd-input-number__suffix {
-    padding-inline-end: var(--cd-input-padding-x);
-  }
-  .cd-input-number__native:disabled {
-    cursor: not-allowed;
-  }
-  /* 步进器：对齐 Semi inputNumber，实底 bg-2 按钮 + 描边 + small 圆角，按钮间留 1px 缝 */
-  .cd-input-number__actions {
-    display: flex;
+
+  /* --- 步进器：对齐 Semi inputNumber-suffix-btns（列布局，外框描边，两按钮各占 50%） --- */
+  .cd-input-number-suffix-btns {
+    display: inline-flex;
     flex-direction: column;
     flex: 0 0 auto;
-    inline-size: var(--cd-input-number-step-width);
-    gap: 1px;
-    margin-inline-start: 4px; /* Semi button-marginLeft */
-  }
-  .cd-input-number__action {
+    box-sizing: border-box;
+    block-size: var(--cd-height-input-number-button-default);
+    margin-inline-start: var(--cd-spacing-input-number-button-marginleft);
+    border: var(--cd-width-input-number-button-border) solid
+      var(--cd-color-input-number-button-border-default);
+    border-radius: var(--cd-radius-input-number);
+    background: var(--cd-color-input-number-button-bg-default);
+  }
+  .cd-input-number-size-small .cd-input-number-suffix-btns {
+    block-size: var(--cd-height-input-number-button-small);
+  }
+  .cd-input-number-size-large .cd-input-number-suffix-btns {
+    block-size: var(--cd-height-input-number-button-large);
+  }
+  .cd-input-number-button {
+    block-size: 50%;
+    inline-size: var(--cd-width-input-number-button);
+    padding: 0;
+    margin: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    flex: 1 1 50%;
-    min-block-size: 0;
-    padding: 0;
-    border: 1px solid var(--cd-input-number-step-border);
-    border-radius: var(--cd-input-number-step-radius);
-    background: var(--cd-input-number-step-bg);
-    color: var(--cd-input-number-step-color);
+    user-select: none;
+    border-radius: 0;
+    color: var(--cd-color-input-number-button-text-default);
+  }
+  .cd-input-number-button-up:not(.cd-input-number-button-up-not-allowed):hover,
+  .cd-input-number-button-down:not(.cd-input-number-button-down-not-allowed):hover {
     cursor: pointer;
-    transition:
-      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+    background: var(--cd-color-input-number-button-bg-hover);
   }
-  .cd-input-number__action:hover:not(:disabled) {
-    background: var(--cd-input-number-step-bg-hover);
-    border-color: var(--cd-color-fill-2);
+  .cd-input-number-button-up:not(.cd-input-number-button-up-not-allowed):active,
+  .cd-input-number-button-down:not(.cd-input-number-button-down-not-allowed):active {
+    cursor: pointer;
+    background: var(--cd-color-input-number-button-bg-active);
   }
-  .cd-input-number__action:active:not(:disabled) {
-    background: var(--cd-input-number-step-bg-active);
+  .cd-input-number-button-up.cd-input-number-button-up-disabled,
+  .cd-input-number-button-down.cd-input-number-button-down-disabled {
+    background: var(--cd-color-input-number-button-bg-disabled);
+    color: var(--cd-color-input-number-button-text-disabled);
   }
-  .cd-input-number__action:disabled {
-    color: var(--cd-input-number-step-color-disabled);
-    background: var(--cd-input-number-step-bg-disabled);
+  .cd-input-number-button-up.cd-input-number-button-up-not-allowed,
+  .cd-input-number-button-down.cd-input-number-button-down-not-allowed {
     cursor: not-allowed;
   }
-  /* --- controlsPosition="sides"：减/输入/加 横向排布，按钮分居两侧 --- */
-  .cd-input-number--controls-sides {
-    position: relative;
-  }
-  .cd-input-number--controls-sides .cd-input-number__actions {
-    flex-direction: row;
-    inline-size: auto;
-    border-inline-start: none;
-    order: 2;
-  }
-  .cd-input-number--controls-sides .cd-input-number__decrement {
-    order: 0;
-    border-block-end: none;
-    border-inline-end: 1px solid var(--cd-input-border);
-  }
-  .cd-input-number--controls-sides .cd-input-number__increment {
-    order: 3;
-    border-block-end: none;
-    border-inline-start: 1px solid var(--cd-input-border);
-  }
-  .cd-input-number--controls-sides .cd-input-number__native {
-    order: 1;
-    text-align: center;
-  }
-  .cd-input-number--controls-sides .cd-input-number__action {
-    inline-size: var(--cd-spacing-loose, 28px);
-  }
-  /* sides 布局：前缀紧贴减号右、后缀紧贴加号左，包裹中央输入。 */
-  .cd-input-number--controls-sides .cd-input-number__prefix {
-    order: 1;
-  }
-  .cd-input-number--controls-sides .cd-input-number__suffix {
-    order: 1;
-  }
 
-  /* --- innerButtons：按钮悬浮于右内侧，hover/focus 显形 --- */
-  .cd-input-number--inner {
-    position: relative;
+  /* --- innerButtons：步进器内嵌 Input suffix 槽，hover/focus 时条件渲染（对齐 Semi suffix-btns-inner） --- */
+  .cd-input-number-suffix-btns-inner {
+    margin-inline-start: var(--cd-spacing-input-number-button-inner-marginleft);
+    border-radius: var(--cd-radius-input-number-inner);
+    overflow: hidden;
+    block-size: var(--cd-height-input-number-button-inner-default);
   }
-  .cd-input-number--inner .cd-input-number__actions {
-    position: absolute;
-    inset-block: 1px;
-    inset-inline-end: 1px;
-    border-inline-start: none;
-    background: var(--cd-input-color-bg);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-input-number--inner:hover .cd-input-number__actions,
-  .cd-input-number--inner:focus-within .cd-input-number__actions {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-input-number,
-    .cd-input-number__action,
-    .cd-input-number--inner .cd-input-number__actions {
-      transition: none;
-    }
+  .cd-input-number-size-small .cd-input-number-suffix-btns-inner {
+    block-size: var(--cd-height-input-number-button-inner-small);
+  }
+  .cd-input-number-size-large .cd-input-number-suffix-btns-inner {
+    block-size: var(--cd-height-input-number-button-inner-large);
   }
 </style>