@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/input/Input.svelte

@@ -1,505 +0,0 @@
-<!--
-  Input — see specs/components/input/Input.spec.md
-  Token-driven, a11y-correct (native <input>), controlled / uncontrolled.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { tick } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-
-  interface Props {
-    value?: string;
-    defaultValue?: string;
-    size?: Size;
-    disabled?: boolean;
-    readonly?: boolean;
-    placeholder?: string;
-    clearable?: boolean;
-    showCount?: boolean;
-    maxLength?: number;
-    status?: Status;
-    type?: 'text' | 'password';
-    prefix?: Snippet;
-    suffix?: Snippet;
-    /** 前置标签（在 input 框外左侧，如 "https://"）；传 Snippet 可自定义渲染 */
-    addonBefore?: Snippet | string;
-    /** 后置标签（在 input 框外右侧，如 ".com"）；传 Snippet 可自定义渲染 */
-    addonAfter?: Snippet | string;
-    /** 无边框模式 */
-    borderless?: boolean;
-    /** 自定义字符计数函数，替代默认 value.length（用于 showCount 展示和 maxLength 校验） */
-    getValueLength?: (value: string) => number;
-    /** 有值时隐藏 suffix（常用于清除按钮/搜索图标场景） */
-    hideSuffix?: boolean;
-    /** 调用 focus() 时传入 { preventScroll } 参数 */
-    preventScroll?: boolean;
-    /** 组件挂载时自动聚焦 */
-    autoFocus?: boolean;
-    name?: string;
-    id?: string;
-    ariaLabel?: string;
-    ariaDescribedby?: string;
-    /** 必填语义（Form.Field required 透传）：输出 aria-required="true"。 */
-    ariaRequired?: boolean;
-    onChange?: (v: string) => void;
-    onInput?: (v: string) => void;
-    onClear?: () => void;
-    /** 回车按下（spec §4 on:enterPress）。Enter 触发，composition 中不触发。 */
-    onEnterPress?: (e: KeyboardEvent) => void;
-    /** @deprecated 改用 onEnterPress（保留向后兼容）。 */
-    onEnter?: (e: KeyboardEvent) => void;
-    onFocus?: (e: FocusEvent) => void;
-    onBlur?: (e: FocusEvent) => void;
-  }
-
-  let {
-    value = $bindable(),
-    defaultValue = '',
-    size = 'default',
-    disabled = false,
-    readonly = false,
-    placeholder,
-    clearable = false,
-    showCount = false,
-    maxLength,
-    status = 'default',
-    type = 'text',
-    prefix,
-    suffix,
-    addonBefore,
-    addonAfter,
-    borderless = false,
-    getValueLength,
-    hideSuffix = false,
-    preventScroll = false,
-    autoFocus = false,
-    name,
-    id,
-    ariaLabel,
-    ariaDescribedby,
-    ariaRequired,
-    onChange,
-    onInput,
-    onClear,
-    onEnterPress,
-    onEnter,
-    onFocus,
-    onBlur,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  const isControlled = $derived(value !== undefined);
-  let inner = $state(getInitialValue());
-  const current = $derived(isControlled ? (value ?? '') : inner);
-
-  function getInitialValue(): string {
-    return defaultValue;
-  }
-
-  let composing = $state(false);
-  let revealed = $state(false);
-  const inputType = $derived(type === 'password' && !revealed ? 'password' : 'text');
-
-  const len = $derived(getValueLength ? getValueLength(current) : [...current].length);
-
-  function setValue(next: string) {
-    // Controlled (`value=` / `bind:value`): the parent owns `value`. We do NOT
-    // write the prop here — the change is propagated via `onChange` (callers
-    // always invoke it). Writing the prop AND firing `onChange` is what creates
-    // the value -> onChange -> value update loop (effect_update_depth_exceeded).
-    // Uncontrolled: keep our own state in sync.
-    if (!isControlled) inner = next;
-  }
-
-  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    const next = e.currentTarget.value;
-    setValue(next);
-    onInput?.(next);
-    if (!composing) onChange?.(next);
-  }
-
-  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
-    if (composing) return;
-    onChange?.(e.currentTarget.value);
-  }
-
-  function handleCompositionStart() {
-    composing = true;
-  }
-
-  function handleCompositionEnd(e: Event & { currentTarget: HTMLInputElement }) {
-    composing = false;
-    const next = e.currentTarget.value;
-    setValue(next);
-    onChange?.(next);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !composing) {
-      onEnterPress?.(e);
-      onEnter?.(e);
-    }
-  }
-
-  function clear() {
-    setValue('');
-    onClear?.();
-    onChange?.('');
-  }
-
-  function toggleReveal() {
-    revealed = !revealed;
-  }
-
-  const showClear = $derived(clearable && !disabled && !readonly && current.length > 0);
-
-  // suffix 显示条件：hideSuffix 为 true 且有值时隐藏
-  const showSuffix = $derived(suffix && !(hideSuffix && current.length > 0));
-
-  // addonBefore/addonAfter 的 Snippet 判断
-  const addonBeforeSnippet = $derived(typeof addonBefore === 'function' ? (addonBefore as Snippet) : undefined);
-  const addonAfterSnippet = $derived(typeof addonAfter === 'function' ? (addonAfter as Snippet) : undefined);
-
-  const cls = $derived(
-    [
-      'cd-input',
-      `cd-input--${size}`,
-      `cd-input--${status}`,
-      disabled && 'cd-input--disabled',
-      borderless && 'cd-input--borderless',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  // --- autoFocus 命令式（红线 #3）---
-  let inputEl: HTMLInputElement | undefined;
-
-  $effect(() => {
-    if (!autoFocus || !inputEl) return;
-    const el = inputEl;
-    let raf: number;
-    tick().then(() => {
-      raf = requestAnimationFrame(() => el.focus({ preventScroll }));
-    });
-    return () => {
-      if (raf !== undefined) cancelAnimationFrame(raf);
-    };
-  });
-</script>
-
-{#if addonBefore != null || addonAfter != null}
-  <div class="cd-input-group">
-    {#if addonBefore != null}
-      <span class="cd-input__addon cd-input__addon--before">
-        {#if addonBeforeSnippet}{@render addonBeforeSnippet()}{:else}{addonBefore}{/if}
-      </span>
-    {/if}
-
-    <div class={cls} aria-invalid={status === 'error' || undefined}>
-      {#if prefix}<span class="cd-input__affix cd-input__prefix">{@render prefix()}</span>{/if}
-
-      <input
-        bind:this={inputEl}
-        class="cd-input__native"
-        type={inputType}
-        {name}
-        {id}
-        {disabled}
-        {readonly}
-        {placeholder}
-        maxlength={maxLength}
-        value={current}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedby}
-        aria-required={ariaRequired || undefined}
-        aria-invalid={status === 'error' || undefined}
-        oninput={handleInput}
-        onchange={handleChange}
-        onkeydown={handleKeydown}
-        oncompositionstart={handleCompositionStart}
-        oncompositionend={handleCompositionEnd}
-        onfocus={onFocus}
-        onblur={onBlur}
-      />
-
-      {#if showClear}
-        <button
-          type="button"
-          class="cd-input__action cd-input__clear"
-          aria-label={loc().t('Input.clear')}
-          onclick={clear}
-        >
-          <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>
-        </button>
-      {/if}
-
-      {#if type === 'password'}
-        <button
-          type="button"
-          class="cd-input__action cd-input__reveal"
-          aria-label={revealed ? loc().t('Input.hidePassword') : loc().t('Input.showPassword')}
-          aria-pressed={revealed}
-          onclick={toggleReveal}
-        >
-          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-            {#if revealed}
-              <path
-                fill="currentColor"
-                d="M8 3C4.5 3 1.7 5.1.5 8c1.2 2.9 4 5 7.5 5s6.3-2.1 7.5-5C14.3 5.1 11.5 3 8 3Zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
-              />
-            {:else}
-              <path
-                fill="currentColor"
-                d="M2.1 1.4 1 2.5l2.3 2.3C2 5.6 1 6.7.5 8c1.2 2.9 4 5 7.5 5 1.3 0 2.6-.3 3.7-.8l2.3 2.3 1.1-1.1L2.1 1.4ZM8 11a3 3 0 0 1-2.8-4.1l1.3 1.3a1.5 1.5 0 0 0 2.3 2.3l1.3 1.3c-.6.2-1.3.2-2.1.2Zm0-8c3.5 0 6.3 2.1 7.5 5-.5 1.1-1.2 2.1-2.1 2.8l-2-2A3 3 0 0 0 8 5h-.4L6.1 3.5C6.7 3.2 7.3 3 8 3Z"
-              />
-            {/if}
-          </svg>
-        </button>
-      {/if}
-
-      {#if showCount}
-        <span class="cd-input__count">
-          {len}{#if maxLength !== undefined}/{maxLength}{/if}
-        </span>
-      {/if}
-
-      {#if showSuffix}<span class="cd-input__affix cd-input__suffix">{@render suffix!()}</span>{/if}
-    </div>
-
-    {#if addonAfter != null}
-      <span class="cd-input__addon cd-input__addon--after">
-        {#if addonAfterSnippet}{@render addonAfterSnippet()}{:else}{addonAfter}{/if}
-      </span>
-    {/if}
-  </div>
-{:else}
-  <div class={cls} aria-invalid={status === 'error' || undefined}>
-    {#if prefix}<span class="cd-input__affix cd-input__prefix">{@render prefix()}</span>{/if}
-
-    <input
-      bind:this={inputEl}
-      class="cd-input__native"
-      type={inputType}
-      {name}
-      {id}
-      {disabled}
-      {readonly}
-      {placeholder}
-      maxlength={maxLength}
-      value={current}
-      aria-label={ariaLabel}
-      aria-describedby={ariaDescribedby}
-      aria-required={ariaRequired || undefined}
-      aria-invalid={status === 'error' || undefined}
-      oninput={handleInput}
-      onchange={handleChange}
-      onkeydown={handleKeydown}
-      oncompositionstart={handleCompositionStart}
-      oncompositionend={handleCompositionEnd}
-      onfocus={onFocus}
-      onblur={onBlur}
-    />
-
-    {#if showClear}
-      <button
-        type="button"
-        class="cd-input__action cd-input__clear"
-        aria-label={loc().t('Input.clear')}
-        onclick={clear}
-      >
-        <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>
-      </button>
-    {/if}
-
-    {#if type === 'password'}
-      <button
-        type="button"
-        class="cd-input__action cd-input__reveal"
-        aria-label={revealed ? loc().t('Input.hidePassword') : loc().t('Input.showPassword')}
-        aria-pressed={revealed}
-        onclick={toggleReveal}
-      >
-        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-          {#if revealed}
-            <path
-              fill="currentColor"
-              d="M8 3C4.5 3 1.7 5.1.5 8c1.2 2.9 4 5 7.5 5s6.3-2.1 7.5-5C14.3 5.1 11.5 3 8 3Zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0-4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
-            />
-          {:else}
-            <path
-              fill="currentColor"
-              d="M2.1 1.4 1 2.5l2.3 2.3C2 5.6 1 6.7.5 8c1.2 2.9 4 5 7.5 5 1.3 0 2.6-.3 3.7-.8l2.3 2.3 1.1-1.1L2.1 1.4ZM8 11a3 3 0 0 1-2.8-4.1l1.3 1.3a1.5 1.5 0 0 0 2.3 2.3l1.3 1.3c-.6.2-1.3.2-2.1.2Zm0-8c3.5 0 6.3 2.1 7.5 5-.5 1.1-1.2 2.1-2.1 2.8l-2-2A3 3 0 0 0 8 5h-.4L6.1 3.5C6.7 3.2 7.3 3 8 3Z"
-            />
-          {/if}
-        </svg>
-      </button>
-    {/if}
-
-    {#if showCount}
-      <span class="cd-input__count">
-        {len}{#if maxLength !== undefined}/{maxLength}{/if}
-      </span>
-    {/if}
-
-    {#if showSuffix}<span class="cd-input__affix cd-input__suffix">{@render suffix!()}</span>{/if}
-  </div>
-{/if}
-
-<style>
-  .cd-input-group {
-    display: inline-flex;
-    align-items: stretch;
-    inline-size: 100%;
-  }
-  .cd-input__addon {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-    padding-inline: var(--cd-input-padding-x);
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-2);
-    border: 1px solid var(--cd-input-border);
-    font-size: var(--cd-input-font-size);
-    white-space: nowrap;
-    user-select: none;
-  }
-  .cd-input__addon--before {
-    border-inline-end: none;
-    border-start-start-radius: var(--cd-input-radius);
-    border-end-start-radius: var(--cd-input-radius);
-  }
-  .cd-input__addon--after {
-    border-inline-start: none;
-    border-start-end-radius: var(--cd-input-radius);
-    border-end-end-radius: var(--cd-input-radius);
-  }
-  /* 有 addon 时，input wrapper 的圆角需要调整 */
-  .cd-input-group .cd-input {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-  }
-  .cd-input-group .cd-input:not(:first-child) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-  .cd-input-group .cd-input:not(:last-child) {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-  .cd-input {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-2);
-    inline-size: 100%;
-    block-size: var(--cd-input-height-default);
-    padding-inline: var(--cd-input-padding-x);
-    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);
-    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-input--small {
-    block-size: var(--cd-input-height-small);
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-input--large {
-    block-size: var(--cd-input-height-large);
-    font-size: var(--cd-font-size-3);
-  }
-  .cd-input:focus-within {
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-input--warning {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-input--error {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-input--disabled {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-input--borderless {
-    border-color: transparent;
-    background: transparent;
-    box-shadow: none;
-  }
-  .cd-input--borderless:focus-within {
-    border-color: transparent;
-    box-shadow: none;
-  }
-  .cd-input__native {
-    flex: 1 1 auto;
-    inline-size: 100%;
-    min-inline-size: 0;
-    block-size: 100%;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    outline: none;
-  }
-  .cd-input__native::placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-input__native:disabled {
-    cursor: not-allowed;
-  }
-  .cd-input__affix {
-    display: inline-flex;
-    align-items: center;
-    color: var(--cd-color-text-2);
-    flex: 0 0 auto;
-  }
-  .cd-input__action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-input__action:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-input__action:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-input__count {
-    flex: 0 0 auto;
-    color: var(--cd-color-text-3);
-    font-size: var(--cd-font-size-1);
-    white-space: nowrap;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-input {
-      transition: none;
-    }
-  }
-</style>

package/src/input/index.ts

@@ -1,2 +0,0 @@
-export { default as Input } from './Input.svelte';
-export { meta as inputMeta } from './meta.js';

package/src/input/meta.ts

@@ -1,40 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Input',
-  category: 'input',
-  description: '单行文本录入框，支持前后缀、清除、计数、密码显隐与 IME。',
-  props: [
-    { name: 'value', type: 'string', default: 'undefined', desc: '受控值；提供则为受控' },
-    { name: 'defaultValue', type: 'string', default: "''", desc: '非受控初始值' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    { name: 'disabled', type: 'boolean', default: 'false' },
-    { name: 'readonly', type: 'boolean', default: 'false' },
-    { name: 'placeholder', type: 'string', default: 'undefined' },
-    { name: 'clearable', type: 'boolean', default: 'false' },
-    { name: 'showCount', type: 'boolean', default: 'false' },
-    { name: 'maxLength', type: 'number', default: 'undefined' },
-    { name: 'status', type: "'default'|'warning'|'error'", default: 'default' },
-    { name: 'type', type: "'text'|'password'", default: 'text' },
-    { name: 'prefix', type: 'Snippet', default: 'undefined' },
-    { name: 'suffix', type: 'Snippet', default: 'undefined' },
-    { name: 'name', type: 'string', default: 'undefined' },
-    { name: 'id', type: 'string', default: 'undefined', desc: '透传到原生 <input id>，供 <label for> 精确关联' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined' },
-    { name: 'ariaDescribedby', type: 'string', default: 'undefined', desc: '透传到 aria-describedby，关联说明/错误文本' },
-    { name: 'onChange', type: '(v: string) => void', default: 'undefined' },
-    { name: 'onInput', type: '(v: string) => void', default: 'undefined' },
-    { name: 'onClear', type: '() => void', default: 'undefined' },
-    { name: 'onEnterPress', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: '回车按下（spec on:enterPress）' },
-    { name: 'onEnter', type: '(e: KeyboardEvent) => void', default: 'undefined', desc: '已废弃，改用 onEnterPress' },
-    { name: 'onFocus', type: '(e: FocusEvent) => void', default: 'undefined' },
-    { name: 'onBlur', type: '(e: FocusEvent) => void', default: 'undefined' },
-  ],
-  a11y: {
-    role: 'textbox',
-    notes: ['原生 input', 'error 时 aria-invalid', '密码切换 aria-pressed', '清除按钮 aria-label'],
-  },
-  tokens: ['--cd-input-*', '--cd-focus-ring', '--cd-motion-*'],
-} as const;

package/src/input-number/InputNumber.a11y.test.ts

@@ -1,43 +0,0 @@
-// InputNumber a11y：role=spinbutton + aria-valuenow/min/max；步进按钮 locale 可访问名。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import InputNumber from './InputNumber.svelte';
-
-describe('InputNumber a11y', () => {
-  it('默认渲染：role=spinbutton + aria-valuenow/min/max，ariaLabel 提供可访问名', async () => {
-    const { container } = renderWithLocale(InputNumber, {
-      props: { ariaLabel: 'Quantity', defaultValue: 5, min: 0, max: 10 },
-    });
-    const spin = container.querySelector('[role="spinbutton"]');
-    expect(spin).not.toBeNull();
-    expect(spin?.getAttribute('aria-label')).toBe('Quantity');
-    expect(spin?.getAttribute('aria-valuenow')).toBe('5');
-    expect(spin?.getAttribute('aria-valuemin')).toBe('0');
-    expect(spin?.getAttribute('aria-valuemax')).toBe('10');
-    // 步进按钮可访问名来自 en_US locale（InputNumber.increase / decrease）。
-    const inc = container.querySelector('.cd-input-number__increment');
-    const dec = container.querySelector('.cd-input-number__decrement');
-    expect(inc?.getAttribute('aria-label')).toBeTruthy();
-    expect(inc?.getAttribute('aria-label')).not.toBe('InputNumber.increase');
-    expect(dec?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-
-  it('error 状态：aria-invalid=true', async () => {
-    const { container } = renderWithLocale(InputNumber, {
-      props: { ariaLabel: 'Amount', status: 'error' },
-    });
-    const spin = container.querySelector('[role="spinbutton"]');
-    expect(spin?.getAttribute('aria-invalid')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-
-  it('readonly + 无 controls：aria-readonly，无 axe violations', async () => {
-    const { container } = renderWithLocale(InputNumber, {
-      props: { ariaLabel: 'Score', defaultValue: 7, readonly: true, controls: false },
-    });
-    const spin = container.querySelector('[role="spinbutton"]');
-    expect(spin?.getAttribute('aria-readonly')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/input-number/InputNumber.kbd.test.ts

@@ -1,41 +0,0 @@
-// InputNumber 键盘 e2e（browser project / 真实 chromium）。
-// 焦点落在原生 <input role="spinbutton">：↑ 步进 +step、↓ -step，
-// PageUp/PageDown 大步进（shiftStep，默认 step*10），aria-valuenow 真实变化，
-// 钳到 min/max。jsdom 焦点/方向键步进合成不可靠，故在真浏览器里测。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import InputNumberKbdFixture from './InputNumberKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('InputNumber 键盘 e2e（role=spinbutton ↑↓ 步进）', () => {
-  it('Tab 聚焦 + ↑↓ 步进 + PageUp/PageDown 大步进 + 钳到 max', async () => {
-    const { baseElement } = renderKbdFixture(InputNumberKbdFixture);
-
-    const spin = baseElement.querySelector('[role="spinbutton"]') as HTMLElement;
-    expect(spin).not.toBeNull();
-    expect(spin.getAttribute('aria-valuenow')).toBe('5');
-
-    // Tab 从 before 进入，焦点落在 spinbutton。
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(spin)).toHaveFocus();
-
-    // ↑ +1（6），↓ -1（5）。
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(spin)).toHaveAttribute('aria-valuenow', '6');
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(spin)).toHaveAttribute('aria-valuenow', '5');
-
-    // PageUp 大步进 +10（15），PageDown -10（5）。
-    await userEvent.keyboard('{PageUp}');
-    await expect.element(loc(spin)).toHaveAttribute('aria-valuenow', '15');
-    await userEvent.keyboard('{PageDown}');
-    await expect.element(loc(spin)).toHaveAttribute('aria-valuenow', '5');
-  });
-});