@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/anchor/Anchor.svelte

@@ -1,359 +0,0 @@
-<!--
-  Anchor — see specs/components/navigation/Anchor.spec.md
-  基础子集: vertical 链接列表、scroll-spy 激活高亮、点击平滑滚动、ink 滑块。
-  受控/非受控 (红线 #1: 不回写 value, 仅 onChange)。
-  scroll-spy (红线 #3): $effect 内命令式 addEventListener('scroll')，rAF 节流，
-  在事件回调里读 getBoundingClientRect (非 render 期)，cleanup 移除监听 + 取消 rAF。
-  ink 用激活链接的 CSS 左边框 (border-inline-start)，不 JS 测 DOM 定位。
-  affix: position:sticky 吸顶（inset-block-start = offsetTop）。
-  updateHash: 激活变更时写 location.hash（replaceState，不触发额外滚动/历史堆栈）。
-  targetOffset: 点击滚动的独立偏移，缺省继承 offsetTop。
-  getContainer: 自定义滚动容器（缺省 window）。提供时监听该容器 scroll，
-    几何按容器视口换算（target.top - container.top），点击滚动该容器（红线 #3）。
-  horizontal: 水平模式，链接横排，ink 走底部下划线（border-block-end）。
-  多级嵌套: link.children 形成树形。渲染用递归 snippet（renderList），每深一层
-    的子列表向内缩进一级（--cd-anchor-indent，逐层累加），rail 只在顶层一条。
-    scroll-spy 命令式遍历扁平化树（flatten 纯函数派生 flatLinks），父子链接皆可
-    点击跳转 + 滚动高亮。无 children 时行为与平铺链接完全一致（向后兼容）。
--->
-<script lang="ts">
-  import type { AnchorLink } from './types.js';
-  import { nextRovingIndex, rovingKeyFromEvent } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  interface Props {
-    links?: AnchorLink[];
-    value?: string;
-    defaultValue?: string;
-    offsetTop?: number;
-    bounds?: number;
-    showInk?: boolean;
-    scrollMotion?: boolean;
-    /** position:sticky 吸顶 */
-    affix?: boolean;
-    /** 激活变更时写 location.hash */
-    updateHash?: boolean;
-    /** 点击滚动的独立偏移（缺省继承 offsetTop） */
-    targetOffset?: number;
-    /** 自定义滚动容器；缺省监听/滚动 window */
-    getContainer?: () => HTMLElement | null;
-    /** 水平模式：链接横排，ink 走底部下划线 */
-    horizontal?: boolean;
-    onChange?: (key: string) => void;
-    ariaLabel?: string;
-  }
-
-  let {
-    links = [],
-    value,
-    defaultValue,
-    offsetTop = 0,
-    bounds = 5,
-    showInk = true,
-    scrollMotion = true,
-    affix = false,
-    updateHash = false,
-    targetOffset,
-    getContainer,
-    horizontal = false,
-    onChange,
-    ariaLabel,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  // 深度优先扁平化嵌套链接树（纯函数，红线 #2）。scroll-spy 与初始激活
-  // 计算只关心全部叶/枝链接的线性集合，与渲染的树形结构解耦。
-  function flatten(items: AnchorLink[]): AnchorLink[] {
-    const out: AnchorLink[] = [];
-    for (const item of items) {
-      out.push(item);
-      if (item.children?.length) out.push(...flatten(item.children));
-    }
-    return out;
-  }
-  const flatLinks = $derived<AnchorLink[]>(flatten(links));
-
-  function getInitialActive(): string {
-    return defaultValue ?? flatten(links)[0]?.key ?? '';
-  }
-
-  // --- 受控 value (红线 #1): 不回写 value, 仅 onChange ---
-  const isControlled = $derived(value !== undefined);
-  let innerActive = $state<string>(getInitialActive());
-  const activeKey = $derived<string>(isControlled ? (value ?? '') : innerActive);
-
-  function setActive(key: string) {
-    if (key === activeKey) return;
-    if (!isControlled) innerActive = key;
-    onChange?.(key);
-  }
-
-  // updateHash：把激活链接的 href（#id）写入 location.hash。
-  // 用 replaceState 避免污染历史堆栈与触发浏览器原生跳转滚动。
-  function writeHash(href: string) {
-    if (!updateHash || typeof window === 'undefined') return;
-    if (!href.startsWith('#')) return;
-    history.replaceState(null, '', href);
-  }
-
-  // getContainer 提供时几何以容器视口为参照系（target.top - container.top），
-  // 缺省时参照系为浏览器视口顶部（0），即原 window 行为。命令式读取，非 render 期。
-  function getReferenceTop(): number {
-    const container = getContainer?.();
-    return container ? container.getBoundingClientRect().top : 0;
-  }
-
-  // 命令式读取目标元素并算出当前激活 key（在事件回调里调用，非 render 期）。
-  function computeActiveKey(): string {
-    const refTop = getReferenceTop();
-    let best = '';
-    let bestTop = -Infinity;
-    // 遍历扁平化后的全部链接（含嵌套子链接），父子皆参与 scroll-spy。
-    for (const link of flatLinks) {
-      const el = document.querySelector(link.href);
-      if (!el) continue;
-      // 相对滚动容器视口顶部的偏移。
-      const top = el.getBoundingClientRect().top - refTop;
-      // 已滚过顶部阈值的 section 里取最接近阈值的那个。
-      if (top <= offsetTop + bounds && top > bestTop) {
-        bestTop = top;
-        best = link.key;
-      }
-    }
-    // 没有任何 section 越过阈值时，回退到第一个链接。
-    if (best === '') best = flatLinks[0]?.key ?? '';
-    return best;
-  }
-
-  function prefersReducedMotion(): boolean {
-    return (
-      typeof window !== 'undefined' &&
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    );
-  }
-
-  // --- scroll-spy (红线 #3): $effect 内命令式监听 + rAF 节流 ---
-  // 监听目标：getContainer() 返回的元素（缺省 window）。读取 getContainer 使其
-  // 变更时 effect 重订阅。
-  $effect(() => {
-    if (typeof window === 'undefined') return;
-    const target: HTMLElement | Window = getContainer?.() ?? window;
-    let frame = 0;
-
-    function onScroll() {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        setActive(computeActiveKey());
-      });
-    }
-
-    target.addEventListener('scroll', onScroll, { passive: true });
-    // 初始算一次。
-    onScroll();
-
-    return () => {
-      target.removeEventListener('scroll', onScroll);
-      if (frame) cancelAnimationFrame(frame);
-    };
-  });
-
-  function handleClick(e: MouseEvent, link: AnchorLink) {
-    e.preventDefault();
-    activateLink(link);
-  }
-
-  // 滚动 + setActive + writeHash 主体（与 handleClick 解耦，供 Space 键复用，无 event）。
-  function activateLink(link: AnchorLink) {
-    const el = document.querySelector(link.href);
-    if (el) {
-      const smooth = scrollMotion && !prefersReducedMotion();
-      const offset = targetOffset ?? offsetTop;
-      const container = getContainer?.();
-      if (container) {
-        // 滚动量 = 目标相对容器视口顶部的偏移 - offset，叠加容器当前滚动位置。
-        const delta =
-          el.getBoundingClientRect().top -
-          container.getBoundingClientRect().top -
-          offset;
-        container.scrollTo({
-          top: container.scrollTop + delta,
-          behavior: smooth ? 'smooth' : 'auto',
-        });
-      } else {
-        const top = el.getBoundingClientRect().top + window.scrollY - offset;
-        window.scrollTo({ top, behavior: smooth ? 'smooth' : 'auto' });
-      }
-    }
-    setActive(link.key);
-    writeHash(link.href);
-  }
-
-  // --- roving tabindex（a11y §6）：链接列表为单一 Tab 停靠点。 ---
-  // rootEl 普通引用，命令式 focus() 用（非 render 期）。
-  let rootEl = $state<HTMLElement | null>(null);
-  // 当前焦点链接 key；null = 尚无焦点 -> 首链接作为 Tab 停靠点。
-  let focusedKey = $state<string | null>(null);
-
-  // 纯派生 tabindex：焦点链接（或无焦点时的首链接）为 0，其余 -1。
-  // 不在 render 期写 $state（红线 #2）。
-  function linkTabindex(key: string): 0 | -1 {
-    return (focusedKey ?? flatLinks[0]?.key) === key ? 0 : -1;
-  }
-
-  // 链接 keydown：方向键 roving（纯函数 nextRovingIndex 派生）、Home/End 跳首尾、
-  // Space 显式激活（原生 <a> 不响应 Space）。Enter 交给原生 <a> 点击（向后兼容）。
-  function onLinkKeydown(e: KeyboardEvent, link: AnchorLink) {
-    const intent = rovingKeyFromEvent(e.key);
-    if (intent) {
-      e.preventDefault();
-      const idx = flatLinks.findIndex((l) => l.key === link.key);
-      const next = nextRovingIndex(idx, flatLinks.length, intent, false);
-      const nextKey = flatLinks[next]?.key;
-      if (nextKey != null) {
-        focusedKey = nextKey;
-        rootEl
-          ?.querySelector<HTMLElement>(`[data-anchor-key="${CSS.escape(nextKey)}"]`)
-          ?.focus();
-      }
-      return;
-    }
-    if (e.key === 'Home' || e.key === 'End') {
-      e.preventDefault();
-      const nextKey = (e.key === 'Home' ? flatLinks[0] : flatLinks[flatLinks.length - 1])
-        ?.key;
-      if (nextKey != null) {
-        focusedKey = nextKey;
-        rootEl
-          ?.querySelector<HTMLElement>(`[data-anchor-key="${CSS.escape(nextKey)}"]`)
-          ?.focus();
-      }
-      return;
-    }
-    if (e.key === ' ') {
-      e.preventDefault();
-      activateLink(link);
-    }
-  }
-</script>
-
-<nav
-  bind:this={rootEl}
-  class="cd-anchor"
-  class:cd-anchor--no-ink={!showInk}
-  class:cd-anchor--affix={affix}
-  class:cd-anchor--horizontal={horizontal}
-  style={affix ? `inset-block-start:${offsetTop}px` : undefined}
-  aria-label={ariaLabel ?? loc().t('Anchor.ariaLabel')}
->
-  {@render renderList(links, 0)}
-</nav>
-
-{#snippet renderList(items: AnchorLink[], level: number)}
-  <ul class="cd-anchor__list">
-    {#each items as link (link.key)}
-      {@const active = link.key === activeKey}
-      <li class="cd-anchor__item">
-        <a
-          class="cd-anchor__link cd-anchor__link--level-{level}"
-          class:cd-anchor__link--active={active}
-          href={link.href}
-          aria-current={active ? 'location' : undefined}
-          tabindex={linkTabindex(link.key)}
-          data-anchor-key={link.key}
-          onclick={(e) => handleClick(e, link)}
-          onkeydown={(e) => onLinkKeydown(e, link)}
-          onfocus={() => {
-            focusedKey = link.key;
-          }}
-        >
-          {link.title}
-        </a>
-        {#if link.children?.length}
-          {@render renderList(link.children, level + 1)}
-        {/if}
-      </li>
-    {/each}
-  </ul>
-{/snippet}
-
-<style>
-  .cd-anchor {
-    display: block;
-  }
-  .cd-anchor--affix {
-    position: sticky;
-    inset-block-start: 0;
-  }
-  .cd-anchor__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    border-inline-start: 1px solid var(--cd-anchor-rail-color);
-  }
-  /* 嵌套子列表：不重复绘制滑轨（rail 只在顶层一条），整体向内缩进一级，
-     使每深一层的链接累加缩进。level-0 顶层链接样式完全不受影响（向后兼容）。 */
-  .cd-anchor__list .cd-anchor__list {
-    border-inline-start: none;
-    margin-inline-start: var(--cd-anchor-indent, 16px);
-  }
-  .cd-anchor__item {
-    margin: 0;
-    padding: 0;
-  }
-  .cd-anchor__link {
-    display: block;
-    padding: var(--cd-anchor-link-padding);
-    border-inline-start: var(--cd-anchor-ink-width) solid transparent;
-    margin-inline-start: calc(-1 * var(--cd-anchor-ink-width));
-    color: var(--cd-anchor-link-color);
-    text-decoration: none;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    transition: color var(--cd-motion-duration-fast)
-      var(--cd-motion-ease-standard);
-  }
-  .cd-anchor__link:hover {
-    color: var(--cd-anchor-link-color-active);
-  }
-  .cd-anchor__link:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-anchor__link--active {
-    color: var(--cd-anchor-link-color-active);
-    border-inline-start-color: var(--cd-anchor-ink-color);
-  }
-  .cd-anchor--no-ink .cd-anchor__link--active {
-    border-inline-start-color: transparent;
-  }
-
-  /* --- horizontal 水平模式：链接横排，ink 走底部下划线 --- */
-  .cd-anchor--horizontal .cd-anchor__list {
-    display: flex;
-    flex-wrap: nowrap;
-    border-inline-start: none;
-    border-block-end: 1px solid var(--cd-anchor-rail-color);
-  }
-  .cd-anchor--horizontal .cd-anchor__link {
-    border-inline-start: none;
-    margin-inline-start: 0;
-    border-block-end: var(--cd-anchor-ink-width) solid transparent;
-    margin-block-end: calc(-1 * var(--cd-anchor-ink-width));
-  }
-  .cd-anchor--horizontal .cd-anchor__link--active {
-    border-inline-start-color: transparent;
-    border-block-end-color: var(--cd-anchor-ink-color);
-  }
-  .cd-anchor--horizontal.cd-anchor--no-ink .cd-anchor__link--active {
-    border-block-end-color: transparent;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-anchor__link {
-      transition: none;
-    }
-  }
-</style>

package/src/anchor/AnchorKbdFixture.svelte

@@ -1,24 +0,0 @@
-<!--
-  仅供 Anchor.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
-  链接列表为单一 Tab 停靠点（roving，真实焦点）。带对应 section 目标。
-  前后各放按钮验证 Tab 进入只停靠单个链接、Tab 出去落到 after。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Anchor from './Anchor.svelte';
-
-  const links = [
-    { key: 'one', href: '#sec-one', title: 'Section One' },
-    { key: 'two', href: '#sec-two', title: 'Section Two' },
-    { key: 'three', href: '#sec-three', title: 'Section Three' },
-  ];
-</script>
-
-<LocaleProvider locale="en_US">
-  <button type="button" data-testid="before">before</button>
-  <Anchor {links} ariaLabel="On this page" />
-  <button type="button" data-testid="after">after</button>
-  <section id="sec-one">one</section>
-  <section id="sec-two">two</section>
-  <section id="sec-three">three</section>
-</LocaleProvider>

package/src/anchor/index.ts

@@ -1,3 +0,0 @@
-export { default as Anchor } from './Anchor.svelte';
-export { meta as anchorMeta } from './meta.js';
-export type { AnchorLink } from './types.js';

package/src/anchor/meta.ts

@@ -1,70 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Anchor',
-  category: 'navigation',
-  description:
-    '锚点导航，垂直/水平链接列表。支持 scroll-spy 激活高亮、点击平滑滚动、ink 边框指示、自定义滚动容器、多级嵌套链接树，受控/非受控。',
-  props: [
-    {
-      name: 'links',
-      type: 'AnchorLink[]',
-      default: '[]',
-      desc: '锚点链接数据；link.children 形成多级嵌套树，渲染逐级缩进，父子皆参与滚动高亮（无 children 即平铺）',
-    },
-    {
-      name: 'value',
-      type: 'string',
-      default: 'undefined',
-      desc: '受控当前激活 key',
-    },
-    { name: 'defaultValue', type: 'string', default: 'undefined' },
-    { name: 'offsetTop', type: 'number', default: '0', desc: '滚动判定/定位偏移' },
-    { name: 'bounds', type: 'number', default: '5', desc: '激活判定边界容差' },
-    { name: 'showInk', type: 'boolean', default: 'true', desc: '是否显示 ink 边框' },
-    {
-      name: 'scrollMotion',
-      type: 'boolean',
-      default: 'true',
-      desc: '点击是否平滑滚动（reduced-motion 下强制即时）',
-    },
-    { name: 'affix', type: 'boolean', default: 'false', desc: 'position:sticky 吸顶' },
-    { name: 'updateHash', type: 'boolean', default: 'false', desc: '激活变更时写 location.hash' },
-    { name: 'targetOffset', type: 'number', default: 'offsetTop', desc: '点击滚动独立偏移' },
-    {
-      name: 'getContainer',
-      type: '() => HTMLElement | null',
-      default: 'undefined',
-      desc: '自定义滚动容器（缺省 window）',
-    },
-    { name: 'horizontal', type: 'boolean', default: 'false', desc: '水平模式，ink 走底部下划线' },
-    { name: 'onChange', type: '(key: string) => void', default: 'undefined' },
-    { name: 'ariaLabel', type: 'string', default: 'undefined' },
-  ],
-  a11y: {
-    role: 'navigation',
-    keyboard: ['Tab', 'Enter'],
-    notes: [
-      'nav[aria-label] 包裹原生 a 链接列表',
-      '激活链接 aria-current=true',
-      '键盘交互为原生锚链接行为',
-      'scroll-spy 命令式监听 scroll（getContainer 时监听容器），rAF 节流，reduced-motion 下点击即时定位',
-      'horizontal 水平模式仅改布局/ink 方向，激活态与键盘交互不变',
-      '多级嵌套用嵌套 ul/li 表达层级树，子链接逐级缩进；扁平化树参与 scroll-spy，父子链接均可聚焦/跳转/高亮',
-    ],
-  },
-  tokens: [
-    '--cd-anchor-link-color',
-    '--cd-anchor-link-color-active',
-    '--cd-anchor-link-padding',
-    '--cd-anchor-indent',
-    '--cd-anchor-rail-color',
-    '--cd-anchor-ink-color',
-    '--cd-anchor-ink-width',
-    '--cd-focus-ring',
-    '--cd-radius-1',
-    '--cd-motion-*',
-  ],
-} as const;

package/src/anchor/types.ts

@@ -1,8 +0,0 @@
-/** Anchor 链接项；href 形如 '#section-1'，key 唯一标识。 */
-export interface AnchorLink {
-  key: string;
-  href: string;
-  title: string;
-  /** 子链接，形成多级嵌套树；缺省即平铺链接（向后兼容）。 */
-  children?: AnchorLink[];
-}

package/src/autocomplete/AutoComplete.a11y.test.ts

@@ -1,49 +0,0 @@
-// AutoComplete a11y：combobox 文本输入 + 内联 listbox/option 下拉（非 portal）。
-// 只断言静态 ARIA + axe，不测真实键盘/焦点（jsdom 限制）。下拉内联在 root 子树，扫 container。
-//
-// 修复记录：input role="combobox" 现经 ariaLabel/ariaLabelledby prop 或
-//   placeholder(非空) / locale AutoComplete.ariaLabel 回退获可访问名，
-//   打开态 axe aria-input-field-name 消除。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import AutoComplete from './AutoComplete.svelte';
-
-const data = [
-  { label: 'alpha', value: 'alpha' },
-  { label: 'alphabet', value: 'alphabet' },
-  { label: 'beta', value: 'beta' },
-];
-
-describe('AutoComplete a11y', () => {
-  it('关闭态：input role=combobox / aria-autocomplete=list，无 axe violations', async () => {
-    const { container } = renderWithLocale(AutoComplete, {
-      props: { data, placeholder: 'Type to search' },
-    });
-    const combobox = container.querySelector('[role="combobox"]');
-    expect(combobox).not.toBeNull();
-    expect(combobox?.getAttribute('aria-autocomplete')).toBe('list');
-    expect(combobox?.getAttribute('aria-expanded')).toBe('false');
-    await expectNoAxeViolations(container);
-  });
-
-  it('打开态：listbox + option 内联渲染 + aria-controls 指向 listbox（结构断言）', () => {
-    const { container } = renderWithLocale(AutoComplete, {
-      props: { data, defaultOpen: true, defaultValue: 'a' },
-    });
-    const combobox = container.querySelector('[role="combobox"]');
-    const listbox = container.querySelector('[role="listbox"]');
-    expect(listbox).not.toBeNull();
-    expect(container.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
-    expect(combobox?.getAttribute('aria-expanded')).toBe('true');
-    expect(combobox?.getAttribute('aria-controls')).toBe(listbox?.getAttribute('id'));
-  });
-
-  // combobox input 可访问名缺省走 locale AutoComplete.ariaLabel（placeholder 此处为空）。
-  it('打开态：axe 0 violations（combobox input 经 locale 获可访问名）', async () => {
-    const { container } = renderWithLocale(AutoComplete, {
-      props: { data, defaultOpen: true, defaultValue: 'a' },
-    });
-    expect(container.querySelector('[role="combobox"]')?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-});

package/src/autocomplete/AutoComplete.kbd.test.ts

@@ -1,69 +0,0 @@
-// AutoComplete 键盘 e2e（browser project / 真实 chromium）。
-// 输入框 role=combobox，焦点始终留在 input 上；高亮走 aria-activedescendant
-// 指向当前 option id（options tabindex=-1，从不真实聚焦）——故断言
-// activedescendant 变化，而非 toHaveFocus。
-//   1. 输入后浮层打开（aria-expanded=true），defaultActiveFirstOption 高亮首项。
-//   2. ↓ 移高亮到下一项，↑ 回上一项（activedescendant 变化）。
-//   3. Enter 选中当前高亮项（onSelect 写入夹具 output），浮层关闭。
-//   4. Esc 关闭浮层。
-import { describe, it, expect, vi } from 'vitest';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import AutoCompleteKbdFixture from './AutoCompleteKbdFixture.svelte';
-
-describe('AutoComplete 键盘 e2e（combobox aria-activedescendant 浮层导航）', () => {
-  it('输入打开 + ↑↓ 移高亮 + Enter 选中 + Esc 关闭', async () => {
-    renderKbdFixture(AutoCompleteKbdFixture);
-
-    const combobox = document.querySelector('[role="combobox"]') as HTMLInputElement;
-    expect(combobox).not.toBeNull();
-    expect(combobox.getAttribute('aria-expanded')).toBe('false');
-
-    // 1. 聚焦后输入 "Ap"，过滤到 Apple / Apricot，浮层打开并高亮首项。
-    combobox.focus();
-    await userEvent.keyboard('Ap');
-
-    // 浮层经 Svelte 响应式渲染，poll 等其出现（aria-expanded → true）。
-    await vi.waitFor(() => {
-      expect(document.querySelector('[role="listbox"]')).not.toBeNull();
-    });
-    const listbox = document.querySelector('[role="listbox"]') as HTMLElement;
-    const listId = listbox.id;
-    expect(listId).toBeTruthy();
-    expect(combobox.getAttribute('aria-expanded')).toBe('true');
-
-    const options = Array.from(listbox.querySelectorAll<HTMLElement>('[role="option"]'));
-    expect(options.length).toBe(2);
-    // option 不可真实聚焦（tabindex=-1）。
-    expect(options.every((o) => o.tabIndex === -1)).toBe(true);
-
-    // defaultActiveFirstOption：高亮落在首项（opt-0）。
-    expect(combobox.getAttribute('aria-activedescendant')).toBe(`${listId}-opt-0`);
-
-    // 2. ↓ 移到 opt-1，↑ 回 opt-0。
-    await userEvent.keyboard('{ArrowDown}');
-    expect(combobox.getAttribute('aria-activedescendant')).toBe(`${listId}-opt-1`);
-    await userEvent.keyboard('{ArrowUp}');
-    expect(combobox.getAttribute('aria-activedescendant')).toBe(`${listId}-opt-0`);
-
-    // 3. Enter 选中当前高亮（opt-0 = Apple），onSelect 写入夹具；浮层关闭。
-    await userEvent.keyboard('{Enter}');
-    const out = document.querySelector('[data-testid="selected"]') as HTMLElement;
-    expect(out.textContent).toBe(JSON.stringify('Apple'));
-    await vi.waitFor(() => {
-      expect(document.querySelector('[role="listbox"]')).toBeNull();
-    });
-    expect(combobox.getAttribute('aria-expanded')).toBe('false');
-
-    // 4. 清空后重新输入打开浮层，再 Esc 关闭。
-    // 选中后 value="Apple"（5 字符），全选删除再输入 "Ba" 过滤到 Banana。
-    await userEvent.keyboard('{Backspace}{Backspace}{Backspace}{Backspace}{Backspace}');
-    await userEvent.keyboard('Ba');
-    await vi.waitFor(() => {
-      expect(document.querySelector('[role="listbox"]')).not.toBeNull();
-    });
-    await userEvent.keyboard('{Escape}');
-    await vi.waitFor(() => {
-      expect(document.querySelector('[role="listbox"]')).toBeNull();
-    });
-  });
-});