@chenzy-design/svelte 0.1.0

package/src/anchor/Anchor.svelte

@@ -0,0 +1,359 @@
+<!--
+  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

@@ -0,0 +1,24 @@
+<!--
+  仅供 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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,70 @@
+/**
+ * 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

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

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

@@ -0,0 +1,49 @@
+// 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

@@ -0,0 +1,69 @@
+// 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();
+    });
+  });
+});