@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/textarea/TextArea.svelte

@@ -1,420 +0,0 @@
-<!--
-  TextArea — see specs/components/input/Textarea.spec.md
-  原生 <textarea>，受控/非受控，size/status，showCount/maxCount/maxLength，IME 安全。
-  autosize：随内容自适应高度（minRows/maxRows），$effect 内命令式测量 scrollHeight
-  调 core computeAutosizeHeight 设高度 + cleanup（红线 #3）。
-  计数走 core countCharacters（length / Intl.Segmenter 字素），纯函数派生（红线 #2）。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { computeAutosizeHeight, countCharacters } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type Resize = 'none' | 'vertical' | 'both';
-  type Autosize = boolean | { minRows?: number; maxRows?: number };
-
-  interface Props {
-    value?: string;
-    defaultValue?: string;
-    size?: Size;
-    disabled?: boolean;
-    readonly?: boolean;
-    placeholder?: string;
-    showCount?: boolean;
-    maxLength?: number;
-    /** 计数上限：用于计数展示与超限提示（不硬截断，截断用 maxLength） */
-    maxCount?: number;
-    /** 按视觉字符（Intl.Segmenter 字素）计数而非 UTF-16/code point */
-    countGraphemes?: boolean;
-    /** 显示清除按钮（非空且非禁用/只读时） */
-    showClear?: boolean;
-    /** 挂载后自动聚焦（命令式 + cleanup） */
-    autoFocus?: boolean;
-    status?: Status;
-    /** Form 注入别名：等价 status，仅当未显式传 status 时生效（兼容） */
-    validateStatus?: Status;
-    rows?: number;
-    /** 自适应高度：true 或 { minRows, maxRows } */
-    autosize?: Autosize;
-    /** 原生手动调整把手（autosize 时建议 none） */
-    resize?: Resize;
-    name?: string;
-    id?: string;
-    class?: string;
-    ariaLabel?: string;
-    ariaDescribedby?: string;
-    /** 自定义计数器渲染（覆盖内建） */
-    count?: Snippet<[{ count: number; maxCount: number | undefined; overLimit: boolean }]>;
-    /** 自定义清除图标 */
-    clearIcon?: Snippet;
-    onChange?: (v: string) => void;
-    onInput?: (v: string) => void;
-    onClear?: () => void;
-    onFocus?: (e: FocusEvent) => void;
-    onBlur?: (e: FocusEvent) => void;
-    /** 按下 Enter（含修饰键信息，供「Ctrl+Enter 提交」场景）。composition 中不触发。 */
-    onEnterPress?: (payload: { value: string; event: KeyboardEvent }) => void;
-    /** autosize 高度变化（命令式重测后触发，高度无变化不触发）。 */
-    onResize?: (payload: { height: number }) => void;
-    onCompositionStart?: (e: CompositionEvent) => void;
-    onCompositionEnd?: (e: CompositionEvent) => void;
-    /** 无边框模式 */
-    borderless?: boolean;
-  }
-
-  let {
-    value = $bindable(),
-    defaultValue = '',
-    size = 'default',
-    disabled = false,
-    readonly = false,
-    placeholder,
-    showCount = false,
-    maxLength,
-    maxCount,
-    countGraphemes = false,
-    showClear = false,
-    autoFocus = false,
-    status,
-    validateStatus,
-    rows = 3,
-    autosize = false,
-    resize = 'none',
-    name,
-    id,
-    class: className = '',
-    ariaLabel,
-    ariaDescribedby,
-    count: countSnippet,
-    clearIcon,
-    onChange,
-    onInput,
-    onClear,
-    onFocus,
-    onBlur,
-    onEnterPress,
-    onResize,
-    onCompositionStart,
-    onCompositionEnd,
-    borderless = false,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  // status 优先；未显式传 status 时用 validateStatus（Form 注入别名）；都无则 default。
-  const effectiveStatus = $derived<Status>(status ?? validateStatus ?? 'default');
-
-  const isControlled = $derived(value !== undefined);
-  let inner = $state(getInitialValue());
-  const current = $derived(isControlled ? (value ?? '') : inner);
-
-  function getInitialValue(): string {
-    return defaultValue;
-  }
-
-  let composing = $state(false);
-
-  // 计数：纯函数派生（红线 #2）。composition 中也照常显示，不裁剪。
-  const count = $derived(
-    countCharacters(current, countGraphemes ? { graphemes: true } : undefined),
-  );
-  const overLimit = $derived(maxCount !== undefined && count > maxCount);
-  const over = $derived(overLimit ? count - (maxCount as number) : 0);
-
-  function setValue(next: string) {
-    // 受控时不回写 prop，仅经 onChange 上报（避免 value→onChange→value 死循环，红线 #1）。
-    if (!isControlled) inner = next;
-  }
-
-  function handleInput(e: Event & { currentTarget: HTMLTextAreaElement }) {
-    const next = e.currentTarget.value;
-    setValue(next);
-    onInput?.(next);
-    if (!composing) onChange?.(next);
-  }
-
-  function handleCompositionStart(e: CompositionEvent) {
-    composing = true;
-    onCompositionStart?.(e);
-  }
-  function handleCompositionEnd(
-    e: CompositionEvent & { currentTarget: HTMLTextAreaElement },
-  ) {
-    composing = false;
-    const next = e.currentTarget.value;
-    setValue(next);
-    onChange?.(next);
-    onCompositionEnd?.(e);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    // Textarea 的 Enter 默认换行；onEnterPress 透传事件，由调用方判断修饰键
-    // （Ctrl/Cmd+Enter 提交等）。composition 中（IME 选词回车）不触发。
-    if (e.key === 'Enter' && !composing) onEnterPress?.({ value: current, event: e });
-  }
-
-  function clear() {
-    setValue('');
-    onClear?.();
-    onChange?.('');
-    taEl?.focus();
-  }
-
-  const canClear = $derived(showClear && !disabled && !readonly && current.length > 0);
-
-  const autosizeOn = $derived(autosize !== false);
-  const minRows = $derived(
-    typeof autosize === 'object' ? (autosize.minRows ?? rows) : rows,
-  );
-  const maxRows = $derived(
-    typeof autosize === 'object' ? autosize.maxRows : undefined,
-  );
-
-  // autosize 时强制 resize none（把手与自适应冲突）。
-  const effectiveResize = $derived<Resize>(autosizeOn ? 'none' : resize);
-
-  // --- autosize 命令式测量 (红线 #3)：current 变化时测 scrollHeight 设高度 ---
-  let taEl = $state<HTMLTextAreaElement | null>(null);
-  // 上一次上报的 autosize 高度；仅在高度真正变化时触发 onResize（避免重复）。
-  let lastReportedHeight = -1;
-
-  $effect(() => {
-    if (!autosizeOn || !taEl) return;
-    const el = taEl;
-    // 读 current 建立依赖：内容变化触发重测。
-    void current;
-
-    const cs = getComputedStyle(el);
-    const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
-    const verticalPadding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-    const verticalBorder = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-
-    // 先重置 height 再读 scrollHeight，得到内容自然高度。
-    const prevHeight = el.style.height;
-    el.style.height = 'auto';
-    const scrollHeight = el.scrollHeight + verticalBorder; // scrollHeight 不含 border
-    const result = computeAutosizeHeight({
-      scrollHeight,
-      lineHeight,
-      verticalPadding,
-      verticalBorder,
-      minRows,
-      ...(maxRows !== undefined ? { maxRows } : {}),
-    });
-    el.style.height = `${result.height}px`;
-    el.style.overflowY = result.overflow ? 'auto' : 'hidden';
-
-    // 高度变化时上报（{height}），首次测量也上报一次。
-    if (result.height !== lastReportedHeight) {
-      lastReportedHeight = result.height;
-      onResize?.({ height: result.height });
-    }
-
-    return () => {
-      el.style.height = prevHeight;
-    };
-  });
-
-  // --- autoFocus 命令式 + cleanup (红线 #3) ---
-  $effect(() => {
-    if (!autoFocus || !taEl) return;
-    const el = taEl;
-    const raf = requestAnimationFrame(() => el.focus());
-    return () => cancelAnimationFrame(raf);
-  });
-
-  const cls = $derived(
-    [
-      'cd-textarea',
-      `cd-textarea--${size}`,
-      `cd-textarea--${effectiveStatus}`,
-      disabled && 'cd-textarea--disabled',
-      readonly && 'cd-textarea--readonly',
-      autosizeOn && 'cd-textarea--autosize',
-      overLimit && 'cd-textarea--over-limit',
-      borderless && 'cd-textarea--borderless',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-<div class={cls} aria-invalid={effectiveStatus === 'error' || undefined}>
-  <textarea
-    class="cd-textarea__native"
-    class:cd-textarea__native--autosize={autosizeOn}
-    bind:this={taEl}
-    {name}
-    {id}
-    {disabled}
-    {readonly}
-    {placeholder}
-    {rows}
-    style:resize={effectiveResize}
-    maxlength={maxLength}
-    value={current}
-    aria-label={ariaLabel}
-    aria-describedby={ariaDescribedby}
-    aria-invalid={effectiveStatus === 'error' || undefined}
-    oninput={handleInput}
-    onkeydown={handleKeydown}
-    oncompositionstart={handleCompositionStart}
-    oncompositionend={handleCompositionEnd}
-    onfocus={onFocus}
-    onblur={onBlur}
-  ></textarea>
-
-  {#if canClear}
-    <button
-      type="button"
-      class="cd-textarea__clear"
-      aria-label={loc().t('Textarea.clear')}
-      onclick={clear}
-    >
-      {#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>
-  {/if}
-
-  {#if showCount}
-    {#if countSnippet}
-      {@render countSnippet({ count, maxCount, overLimit })}
-    {:else}
-      <span class="cd-textarea__count" class:cd-textarea__count--over={overLimit}>
-        {#if maxCount !== undefined}
-          {loc().t('Textarea.countFormat', {
-            count: loc().formatNumber(count),
-            maxCount: loc().formatNumber(maxCount),
-          })}
-        {:else if maxLength !== undefined}
-          {loc().formatNumber(count)}/{loc().formatNumber(maxLength)}
-        {:else}
-          {loc().t('Textarea.countOnly', { count: loc().formatNumber(count) })}
-        {/if}
-      </span>
-    {/if}
-  {/if}
-
-  {#if overLimit}
-    <span class="cd-sr-only" aria-live="polite">
-      {loc().t('Textarea.overLimitAnnounce', { over: loc().formatNumber(over) })}
-    </span>
-  {/if}
-</div>
-
-<style>
-  .cd-textarea {
-    position: relative;
-    display: inline-flex;
-    inline-size: 100%;
-    padding: 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-textarea--small {
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-textarea--large {
-    font-size: var(--cd-font-size-3);
-  }
-  .cd-textarea:focus-within {
-    border-color: var(--cd-input-border-active);
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-textarea--warning {
-    border-color: var(--cd-input-border-warning);
-  }
-  .cd-textarea--error {
-    border-color: var(--cd-input-border-error);
-  }
-  .cd-textarea--disabled {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-3);
-    cursor: not-allowed;
-  }
-  .cd-textarea--borderless {
-    border-color: transparent;
-    background: transparent;
-    box-shadow: none;
-  }
-  .cd-textarea--borderless:focus-within {
-    border-color: transparent;
-    box-shadow: none;
-  }
-  .cd-textarea__native {
-    inline-size: 100%;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    line-height: 1.5;
-    resize: vertical;
-    outline: none;
-  }
-  .cd-textarea__native--autosize {
-    resize: none;
-    overflow-y: hidden;
-  }
-  .cd-textarea__native::placeholder {
-    color: var(--cd-input-color-placeholder);
-  }
-  .cd-textarea__native:disabled {
-    cursor: not-allowed;
-  }
-  .cd-textarea__clear {
-    position: absolute;
-    inset-block-start: var(--cd-spacing-1);
-    inset-inline-end: var(--cd-spacing-1);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-color-text-2);
-    cursor: pointer;
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-textarea__clear:hover {
-    color: var(--cd-color-text-0);
-  }
-  .cd-textarea__clear:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-textarea__count {
-    position: absolute;
-    inset-block-end: var(--cd-spacing-1);
-    inset-inline-end: var(--cd-spacing-2);
-    color: var(--cd-color-text-3);
-    font-size: var(--cd-font-size-1);
-    white-space: nowrap;
-    pointer-events: none;
-  }
-  .cd-textarea__count--over {
-    color: var(--cd-input-border-error);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-textarea {
-      transition: none;
-    }
-  }
-</style>

package/src/textarea/index.ts

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

package/src/textarea/meta.ts

@@ -1,104 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'TextArea',
-  category: 'input',
-  description: '多行文本录入框，支持计数（maxCount/字素）、清除、校验态、IME 与 autosize 自适应高度（minRows/maxRows）。',
-  capabilities: ['multiline', 'autosize', 'char-count', 'clearable', 'validation-status'],
-  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: 'showCount', type: 'boolean', default: 'false', desc: '显示字符计数' },
-    { name: 'maxLength', type: 'number', default: 'undefined', desc: '原生硬性长度限制（截断输入）' },
-    { name: 'maxCount', type: 'number', default: 'undefined', desc: '计数上限（计数展示与超限提示，不截断）' },
-    {
-      name: 'countGraphemes',
-      type: 'boolean',
-      default: 'false',
-      desc: '按视觉字符（Intl.Segmenter 字素）计数而非 code point，正确处理 emoji/组合字符',
-    },
-    { name: 'showClear', type: 'boolean', default: 'false', desc: '显示清除按钮（非空且非禁用/只读）' },
-    { name: 'autoFocus', type: 'boolean', default: 'false', desc: '挂载后自动聚焦' },
-    { name: 'status', type: "'default'|'warning'|'error'", default: 'default', desc: '校验态' },
-    {
-      name: 'validateStatus',
-      type: "'default'|'warning'|'error'",
-      default: 'undefined',
-      desc: 'Form 注入别名，等价 status（仅当未显式传 status 时生效）',
-    },
-    { name: 'rows', type: 'number', default: '3' },
-    {
-      name: 'autosize',
-      type: 'boolean | { minRows?: number; maxRows?: number }',
-      default: 'false',
-      desc: '随内容自适应高度',
-    },
-    {
-      name: 'resize',
-      type: "'none'|'vertical'|'both'",
-      default: "'none'",
-      desc: '原生手动调整把手（autosize 时强制 none）',
-    },
-    { name: 'name', type: 'string', default: 'undefined' },
-    { name: 'id', type: 'string', default: 'undefined' },
-    { name: 'class', type: 'string', default: "''", desc: '透传根类名' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined' },
-    { name: 'ariaDescribedby', type: 'string', default: 'undefined' },
-    { name: 'onChange', type: '(v: string) => void', default: 'undefined' },
-    { name: 'onInput', type: '(v: string) => void', default: 'undefined' },
-    { name: 'onClear', type: '() => void', default: 'undefined', desc: '点击清除按钮' },
-    { name: 'onFocus', type: '(e: FocusEvent) => void', default: 'undefined', desc: '获得焦点' },
-    { name: 'onBlur', type: '(e: FocusEvent) => void', default: 'undefined', desc: '失去焦点' },
-    {
-      name: 'onEnterPress',
-      type: '(p: { value: string; event: KeyboardEvent }) => void',
-      default: 'undefined',
-      desc: '按下 Enter（含修饰键信息，供 Ctrl+Enter 提交）',
-    },
-    {
-      name: 'onResize',
-      type: '(p: { height: number }) => void',
-      default: 'undefined',
-      desc: 'autosize 高度变化',
-    },
-    {
-      name: 'onCompositionStart',
-      type: '(e: CompositionEvent) => void',
-      default: 'undefined',
-      desc: 'IME 开始',
-    },
-    {
-      name: 'onCompositionEnd',
-      type: '(e: CompositionEvent) => void',
-      default: 'undefined',
-      desc: 'IME 结束',
-    },
-  ],
-  slots: [
-    { name: 'count', scope: '{ count, maxCount, overLimit }', desc: '自定义计数器渲染（覆盖内建）' },
-    { name: 'clearIcon', desc: '自定义清除图标' },
-  ],
-  a11y: {
-    role: 'textbox',
-    notes: [
-      '原生 textarea',
-      'error 时 aria-invalid',
-      'IME composition 安全',
-      '超限经 aria-live=polite 播报',
-      '清除按钮可 Tab 到达，aria-label 来自 i18n',
-    ],
-  },
-  i18nKeys: [
-    'Textarea.clear',
-    'Textarea.countFormat',
-    'Textarea.countOnly',
-    'Textarea.overLimitAnnounce',
-  ],
-  tokens: ['--cd-input-*', '--cd-focus-ring', '--cd-motion-*'],
-} as const;

package/src/time-picker/TimePicker.a11y.test.ts

@@ -1,45 +0,0 @@
-// TimePicker a11y：触发器（button）+ role=dialog 面板 + 时/分 role=listbox/option 列。
-// 只断言静态 ARIA + axe 0 violations，不测真实键盘/焦点（jsdom 限制）。
-// 打开态面板 portal 到 document.body，故扫描 document.body。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import TimePicker from './TimePicker.svelte';
-
-describe('TimePicker a11y', () => {
-  it('关闭态：触发器 aria-haspopup=dialog / aria-expanded=false，无 axe violations', async () => {
-    const { container } = renderWithLocale(TimePicker, {
-      props: { ariaLabel: 'Meeting time' },
-    });
-    const trigger = container.querySelector('.cd-time-picker__trigger');
-    expect(trigger).not.toBeNull();
-    expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    expect(trigger?.getAttribute('aria-label')).toBe('Meeting time');
-    await expectNoAxeViolations(container);
-  });
-
-  it('打开态：role=dialog 面板 + listbox/option 列（portal 到 body），无 axe violations', async () => {
-    renderWithLocale(TimePicker, {
-      props: { defaultOpen: true, ariaLabel: 'Meeting time' },
-    });
-    const dialog = document.querySelector('[role="dialog"]');
-    expect(dialog).not.toBeNull();
-    expect(dialog?.getAttribute('aria-label')).toBeTruthy();
-    const listboxes = document.querySelectorAll('[role="listbox"]');
-    expect(listboxes.length).toBeGreaterThan(0);
-    const options = document.querySelectorAll('[role="option"]');
-    expect(options.length).toBeGreaterThan(0);
-    await expectNoAxeViolations(document.body);
-  });
-
-  it('已选值：选中 option aria-selected=true + 触发器 aria-expanded=true', async () => {
-    renderWithLocale(TimePicker, {
-      props: { defaultOpen: true, defaultValue: '09:30:00', ariaLabel: 'Meeting time' },
-    });
-    const trigger = document.querySelector('.cd-time-picker__trigger');
-    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
-    const selected = document.querySelector('[role="option"][aria-selected="true"]');
-    expect(selected).not.toBeNull();
-    await expectNoAxeViolations(document.body);
-  });
-});

package/src/time-picker/TimePicker.kbd.test.ts

@@ -1,70 +0,0 @@
-// TimePicker 键盘 e2e（browser project / 真实 chromium）。
-// 时间列用真实焦点 roving（APG listbox）：每列单一 Tab 停靠点（选中项 tabindex=0，
-// 其余 -1），列内 ↑↓ 命令式移动 DOM 焦点（循环）、Home/End 跳首末，列间用 Tab。
-// 故断言真实 .toHaveFocus()（先读源码 onColKeydown 确认是命令式 focus，非 activedescendant）。
-//   1. 打开后焦点落进小时列选中项（value=08:30:45 → 小时 08）。
-//   2. 列内 ↓↑ 移动焦点（相邻项），Home/End 跳首末项。
-//   3. Tab 进入下一列（分钟列）的停靠点（选中项 30）。
-//   4. Esc 关闭面板。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import TimePickerKbdFixture from './TimePickerKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('TimePicker 键盘 e2e（列内 roving 真实焦点）', () => {
-  it('小时列 ↓↑ + Home/End 移动焦点；Tab 进分钟列；Esc 关闭', async () => {
-    const { baseElement } = renderKbdFixture(TimePickerKbdFixture);
-
-    const trigger = baseElement.querySelector('[data-testid="before"]') as HTMLButtonElement;
-    expect(trigger).not.toBeNull();
-    await userEvent.click(trigger);
-
-    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
-    expect(dialog).not.toBeNull();
-    const cols = Array.from(dialog.querySelectorAll<HTMLElement>('[role="listbox"]'));
-    expect(cols.length).toBe(3); // 时/分/秒
-    const [hourCol, minuteCol] = cols as [HTMLElement, HTMLElement, HTMLElement];
-
-    const hourOptions = Array.from(hourCol.querySelectorAll<HTMLElement>('[role="option"]'));
-    // value=08:30:45 → 小时列选中项 08（文本 '08'）。
-    const hour08 = hourOptions.find((el) => el.textContent?.trim() === '08')!;
-    const hour09 = hourOptions.find((el) => el.textContent?.trim() === '09')!;
-    const hour07 = hourOptions.find((el) => el.textContent?.trim() === '07')!;
-
-    // 1. 打开后焦点落进小时列选中项（08）。
-    await expect.element(loc(hour08)).toHaveFocus();
-    expect(hour08.tabIndex).toBe(0);
-
-    // 2a. ↓ → 下一项（09），真实焦点跟随、停靠点收敛。
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(hour09)).toHaveFocus();
-    expect(hour09.tabIndex).toBe(0);
-    expect(hour08.tabIndex).toBe(-1);
-
-    // 2b. ↑↑ → 回到 08 再到 07。
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(hour08)).toHaveFocus();
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(hour07)).toHaveFocus();
-
-    // 2c. Home/End → 列首（00）/列末（23）。
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(hourOptions[0]!)).toHaveFocus();
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(hourOptions[hourOptions.length - 1]!)).toHaveFocus();
-
-    // 3. Tab → 进入分钟列的停靠点（选中项 30）。
-    const minuteOptions = Array.from(minuteCol.querySelectorAll<HTMLElement>('[role="option"]'));
-    const minute30 = minuteOptions.find((el) => el.textContent?.trim() === '30')!;
-    await userEvent.tab();
-    await expect.element(loc(minute30)).toHaveFocus();
-
-    // 4. Esc 关闭面板（useDismiss escape）。
-    await userEvent.keyboard('{Escape}');
-    await expect.poll(() => document.querySelector('[role="dialog"]')).toBeNull();
-  });
-});