@chenzy-design/svelte 0.1.0

package/dist/progress/meta.js

@@ -0,0 +1,131 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Progress — see specs/components/feedback/Progress.spec.md
+ */
+export const meta = {
+    name: 'Progress',
+    category: 'feedback',
+    description: '进度条：line/circle/dashboard 三形态，normal/success/error/warning 四态；percent 钳制到 0..100，showInfo/format 控制信息区，success 环形显示对勾（非颜色冗余信号），indeterminate 不确定进度循环动画；role=progressbar，受控 percent 不回写，仅 onComplete/onChange 通知。',
+    exports: ['Progress'],
+    props: [
+        { name: 'percent', type: 'number', default: '0', desc: '受控进度，钳制到 0..100' },
+        {
+            name: 'type',
+            type: "'line'|'circle'|'dashboard'",
+            default: "'line'",
+            desc: '形态',
+        },
+        {
+            name: 'status',
+            type: "'normal'|'success'|'error'|'warning'",
+            default: "'normal'",
+            desc: '语义状态',
+        },
+        { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
+        {
+            name: 'width',
+            type: 'number',
+            default: 'undefined',
+            desc: 'circle/dashboard 直径 px，覆写 size',
+        },
+        { name: 'strokeWidth', type: 'number', default: 'undefined', desc: '笔触/条高 px 覆写' },
+        {
+            name: 'strokeLinecap',
+            type: "'round'|'butt'|'square'",
+            default: "'round'",
+            desc: 'circle 端点形状',
+        },
+        { name: 'showInfo', type: 'boolean', default: 'true', desc: '是否显示信息区' },
+        {
+            name: 'format',
+            type: '(percent: number, status: ProgressStatus) => string | null',
+            default: 'undefined',
+            desc: '自定义信息文本；返回 null 隐藏',
+        },
+        {
+            name: 'indeterminate',
+            type: 'boolean',
+            default: 'false',
+            desc: '不确定进度循环动画（纯 CSS）',
+        },
+        {
+            name: 'gapDegree',
+            type: 'number',
+            default: 'dashboard 时 75，否则 0',
+            desc: 'dashboard 开口角度',
+        },
+        {
+            name: 'gapPosition',
+            type: "'top'|'bottom'|'left'|'right'",
+            default: "'bottom'",
+            desc: '开口位置',
+        },
+        {
+            name: 'successWhenFull',
+            type: 'boolean',
+            default: 'false',
+            desc: '满 100 且 status=normal 时转 success',
+        },
+        {
+            name: 'motion',
+            type: 'boolean',
+            default: 'true',
+            desc: '过渡/循环动画，被 reduced-motion 覆盖',
+        },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无障碍标签' },
+        {
+            name: 'formatSnippet',
+            type: 'Snippet<[{ percent: number; status: ProgressStatus }]>',
+            default: 'undefined',
+            desc: '信息区 snippet，优先于 format prop',
+        },
+        {
+            name: 'onComplete',
+            type: '(info: { percent: number }) => void',
+            default: 'undefined',
+            desc: 'percent 首达 100 触发一次',
+        },
+        {
+            name: 'onChange',
+            type: '(info: { percent: number }) => void',
+            default: 'undefined',
+            desc: 'percent 变更回调',
+        },
+    ],
+    events: [
+        { name: 'onComplete', desc: 'percent 首次到达 100' },
+        { name: 'onChange', desc: 'percent 变化' },
+    ],
+    slots: [{ name: 'formatSnippet', desc: '自定义信息区内容（优先于 format prop）' }],
+    a11y: {
+        hasRole: true,
+        focusable: false,
+        note: 'role=progressbar + aria-valuemin/max=0/100 与 aria-valuenow/aria-valuetext；indeterminate 时省略 aria-valuenow 并设 aria-busy；circle success 显示对勾图标作为非颜色冗余信号（aria-hidden）；不可聚焦不设 tabindex；reduced-motion 禁用过渡与循环动画。',
+    },
+    tokens: [
+        '--cd-progress-track-color',
+        '--cd-progress-stroke-normal',
+        '--cd-progress-stroke-success',
+        '--cd-progress-stroke-error',
+        '--cd-progress-stroke-warning',
+        '--cd-progress-info-color',
+        '--cd-progress-info-success-color',
+        '--cd-progress-height-small',
+        '--cd-progress-height-default',
+        '--cd-progress-height-large',
+        '--cd-progress-circle-size-small',
+        '--cd-progress-circle-size-default',
+        '--cd-progress-circle-size-large',
+        '--cd-progress-transition',
+    ],
+    responsive: false,
+    examples: [
+        { title: 'line 受控', code: '<Progress percent={percent} />' },
+        { title: 'circle 带百分比', code: '<Progress type="circle" percent={75} />' },
+        {
+            title: 'dashboard',
+            code: '<Progress type="dashboard" percent={60} status="warning" />',
+        },
+        { title: 'indeterminate', code: '<Progress indeterminate ariaLabel="加载中" />' },
+    ],
+};

package/dist/radio/Radio.svelte

@@ -0,0 +1,330 @@
+<!--
+  Radio — see specs/components/input/Radio.spec.md
+  Inside RadioGroup: role=radio via native input, roving tabindex.
+  Standalone: self controlled / uncontrolled.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useId } from '@chenzy-design/core';
+  import {
+    getRadioGroupContext,
+    type RadioValue,
+    type RadioSize,
+    type RadioStatus,
+    type RadioType,
+  } from './context.js';
+
+  interface Props {
+    value: RadioValue;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    size?: RadioSize;
+    status?: RadioStatus;
+    type?: RadioType;
+    name?: string;
+    extra?: string | undefined;
+    children?: Snippet;
+    onChange?: (checked: boolean) => void;
+  }
+
+  let {
+    value,
+    checked = $bindable(),
+    defaultChecked = false,
+    disabled = false,
+    size = 'default',
+    status = 'default',
+    type,
+    name,
+    extra,
+    children,
+    onChange,
+  }: Props = $props();
+
+  const group = getRadioGroupContext();
+
+  const fieldId = useId('cd-radio-item');
+  const extraId = $derived(extra ? `${fieldId}-extra` : undefined);
+
+  const isControlled = $derived(checked !== undefined);
+  let inner = $state(getInitialChecked());
+
+  function getInitialChecked(): boolean {
+    return defaultChecked;
+  }
+
+  const resolvedDisabled = $derived(disabled || (group ? group.getDisabled() : false));
+  const resolvedSize = $derived(group ? group.getSize() : size);
+  // Group transparently provides `status`; a per-item non-default `status` overrides it.
+  const resolvedStatus = $derived(status !== 'default' ? status : (group?.getStatus() ?? 'default'));
+  const resolvedName = $derived(group ? group.name : name);
+  // type 优先取本项显式值，否则继承 Group，再退 default。
+  const resolvedType = $derived<RadioType>(type ?? group?.getType() ?? 'default');
+  // button/card/pureCard 用 role=radio 容器（非原生 input），其余用隐藏 input。
+  const isFancy = $derived(resolvedType !== 'default');
+
+  const isChecked = $derived(
+    group ? group.getSelected() === value : isControlled ? !!checked : inner,
+  );
+
+  // roving tabindex: in a group only the tab stop is 0, else -1; standalone always 0
+  const tabindex = $derived(group ? (group.isTabStop(value, resolvedDisabled) ? 0 : -1) : 0);
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    const next = e.currentTarget.checked;
+    if (group) {
+      group.select(value);
+      onChange?.(true);
+      return;
+    }
+    // Controlled (`checked=` / `bind:checked`): parent owns `checked`; propagate
+    // only via `onChange`. Writing the prop AND firing `onChange` loops.
+    // Uncontrolled: keep our own state in sync.
+    if (!isControlled) inner = next;
+    onChange?.(next);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    group?.onKeydown(e, value);
+  }
+
+  // role=radio 容器（button/card 型）：方向键交给 group，Space/Enter 选中本项。
+  function handleFancyKeydown(e: KeyboardEvent) {
+    if (resolvedDisabled) return;
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      activate();
+      return;
+    }
+    group?.onKeydown(e, value);
+  }
+
+  function handleFancyClick() {
+    if (resolvedDisabled) return;
+    activate();
+  }
+
+  // 选中本项（用于 role=radio 容器的点击/键盘），同 handleChange 的提交逻辑。
+  function activate() {
+    if (group) {
+      group.select(value);
+      onChange?.(true);
+      return;
+    }
+    if (!isControlled) inner = true;
+    onChange?.(true);
+  }
+
+  /** Register this radio's focusable element with the group for roving focus management. */
+  function registerAttach(node: HTMLElement) {
+    if (!group) return;
+    // read deps so registration metadata stays current
+    return group.register({ value, disabled: resolvedDisabled, el: node });
+  }
+
+  const cls = $derived(
+    [
+      'cd-radio',
+      `cd-radio--${resolvedSize}`,
+      `cd-radio--${resolvedType}`,
+      resolvedStatus !== 'default' && `cd-radio--${resolvedStatus}`,
+      isChecked && 'cd-radio--checked',
+      resolvedDisabled && 'cd-radio--disabled',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+</script>
+
+{#if isFancy}
+  <!-- button/card/pureCard 型：role=radio 容器承载 aria-checked，参与 roving。 -->
+  <div
+    {@attach registerAttach}
+    class={cls}
+    role="radio"
+    aria-checked={isChecked}
+    aria-disabled={resolvedDisabled ? 'true' : undefined}
+    aria-describedby={extraId}
+    {tabindex}
+    onclick={handleFancyClick}
+    onkeydown={handleFancyKeydown}
+  >
+    {#if resolvedType !== 'pureCard'}
+      <span class="cd-radio__circle" aria-hidden="true"></span>
+    {/if}
+    {#if children || extra}
+      <span class="cd-radio__content">
+        {#if children}<span class="cd-radio__label">{@render children()}</span>{/if}
+        {#if extra}<span class="cd-radio__extra" id={extraId}>{extra}</span>{/if}
+      </span>
+    {/if}
+  </div>
+{:else}
+  <label class={cls} for={fieldId}>
+    <input
+      {@attach registerAttach}
+      id={fieldId}
+      class="cd-radio__input"
+      type="radio"
+      name={resolvedName}
+      value={String(value)}
+      checked={isChecked}
+      disabled={resolvedDisabled}
+      {tabindex}
+      aria-describedby={extraId}
+      onchange={handleChange}
+      onkeydown={handleKeydown}
+    />
+    <span class="cd-radio__circle" aria-hidden="true"></span>
+    {#if children || extra}
+      <span class="cd-radio__content">
+        {#if children}<span class="cd-radio__label">{@render children()}</span>{/if}
+        {#if extra}<span class="cd-radio__extra" id={extraId}>{extra}</span>{/if}
+      </span>
+    {/if}
+  </label>
+{/if}
+
+<style>
+  .cd-radio {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--cd-radio-label-gap);
+    color: var(--cd-color-text-0);
+    cursor: pointer;
+    line-height: 1.4;
+  }
+  .cd-radio--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cd-radio__input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .cd-radio__circle {
+    position: relative;
+    flex: 0 0 auto;
+    inline-size: var(--cd-radio-size-default);
+    block-size: var(--cd-radio-size-default);
+    background: var(--cd-radio-bg);
+    border: 1px solid var(--cd-radio-border);
+    border-radius: var(--cd-radius-full);
+    transition:
+      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  .cd-radio--small .cd-radio__circle {
+    inline-size: var(--cd-radio-size-small);
+    block-size: var(--cd-radio-size-small);
+  }
+  .cd-radio--large .cd-radio__circle {
+    inline-size: var(--cd-radio-size-large);
+    block-size: var(--cd-radio-size-large);
+  }
+  .cd-radio--checked .cd-radio__circle {
+    border-color: var(--cd-radio-color-checked);
+  }
+  .cd-radio--checked .cd-radio__circle::after {
+    content: '';
+    position: absolute;
+    inset: 50%;
+    inline-size: 50%;
+    block-size: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--cd-radio-dot-color);
+    border-radius: var(--cd-radius-full);
+  }
+  /* 校验态：边框改用 warning/error，覆盖默认与 checked 描边（token 驱动） */
+  .cd-radio--warning .cd-radio__circle {
+    border-color: var(--cd-radio-color-warning);
+  }
+  .cd-radio--error .cd-radio__circle {
+    border-color: var(--cd-radio-color-error);
+  }
+  .cd-radio__input:focus-visible + .cd-radio__circle {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
+  }
+  .cd-radio__content {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--cd-spacing-1);
+  }
+  .cd-radio__extra {
+    color: var(--cd-color-text-2);
+    font-size: var(--cd-font-size-1);
+  }
+  /* ---- button / card / pureCard 型：role=radio 容器 ---- */
+  .cd-radio--button,
+  .cd-radio--card,
+  .cd-radio--pureCard {
+    box-sizing: border-box;
+    outline: none;
+  }
+  .cd-radio--button:focus-visible,
+  .cd-radio--card:focus-visible,
+  .cd-radio--pureCard:focus-visible {
+    box-shadow: var(--cd-focus-ring);
+  }
+  /* button 型：矩形分段按钮，隐藏圆点 indicator */
+  .cd-radio--button {
+    gap: 0;
+    block-size: var(--cd-radio-button-height);
+    padding-inline: var(--cd-spacing-3);
+    align-items: center;
+    justify-content: center;
+    color: var(--cd-color-text-0);
+    background: var(--cd-radio-bg);
+    border: 1px solid var(--cd-radio-border);
+    border-radius: var(--cd-radius-2);
+  }
+  .cd-radio--button.cd-radio--small {
+    block-size: var(--cd-radio-button-height-small);
+  }
+  .cd-radio--button.cd-radio--large {
+    block-size: var(--cd-radio-button-height-large);
+  }
+  .cd-radio--button .cd-radio__circle {
+    display: none;
+  }
+  .cd-radio--button.cd-radio--checked {
+    color: var(--cd-radio-color-checked);
+    border-color: var(--cd-radio-color-checked);
+  }
+  /* card / pureCard 型：带边框卡片，选中高亮边框 */
+  .cd-radio--card,
+  .cd-radio--pureCard {
+    padding: var(--cd-spacing-3);
+    background: var(--cd-radio-bg);
+    border: 1px solid var(--cd-radio-border);
+    border-radius: var(--cd-radio-card-radius);
+  }
+  .cd-radio--card.cd-radio--checked,
+  .cd-radio--pureCard.cd-radio--checked {
+    border-color: var(--cd-radio-card-border-checked);
+  }
+  .cd-radio--card.cd-radio--warning,
+  .cd-radio--pureCard.cd-radio--warning,
+  .cd-radio--button.cd-radio--warning {
+    border-color: var(--cd-radio-color-warning);
+  }
+  .cd-radio--card.cd-radio--error,
+  .cd-radio--pureCard.cd-radio--error,
+  .cd-radio--button.cd-radio--error {
+    border-color: var(--cd-radio-color-error);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cd-radio__circle {
+      transition: none;
+    }
+  }
+</style>

package/dist/radio/Radio.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type RadioValue, type RadioSize, type RadioStatus, type RadioType } from './context.js';
+interface Props {
+    value: RadioValue;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    size?: RadioSize;
+    status?: RadioStatus;
+    type?: RadioType;
+    name?: string;
+    extra?: string | undefined;
+    children?: Snippet;
+    onChange?: (checked: boolean) => void;
+}
+declare const Radio: import("svelte").Component<Props, {}, "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;
+//# sourceMappingURL=Radio.svelte.d.ts.map

package/dist/radio/Radio.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../src/radio/Radio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAEH,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAmJH,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/radio/RadioGroup.a11y.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.a11y.test.d.ts.map

package/dist/radio/RadioGroup.a11y.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.a11y.test.d.ts","sourceRoot":"","sources":["../../src/radio/RadioGroup.a11y.test.ts"],"names":[],"mappings":""}

package/dist/radio/RadioGroup.a11y.test.js

@@ -0,0 +1,38 @@
+// RadioGroup a11y：role="radiogroup" 容器 + 多个 radio 选项（原生 input）。
+// 只断言静态 ARIA + axe 0 violations，不测方向键 roving（jsdom 限制）。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import RadioGroup from './RadioGroup.svelte';
+const OPTIONS = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry', disabled: true },
+];
+describe('RadioGroup a11y', () => {
+    it('默认：role=radiogroup + ariaLabel + 多选项渲染，无 axe violations', async () => {
+        const { container } = renderWithLocale(RadioGroup, {
+            props: { ariaLabel: 'Fruit', options: OPTIONS },
+        });
+        const group = container.querySelector('[role="radiogroup"]');
+        expect(group?.getAttribute('aria-label')).toBe('Fruit');
+        const radios = container.querySelectorAll('input[type="radio"]');
+        expect(radios.length).toBe(3);
+        await expectNoAxeViolations(container);
+    });
+    it('选中态：value 命中的 radio 为 checked', async () => {
+        const { container } = renderWithLocale(RadioGroup, {
+            props: { ariaLabel: 'Fruit', options: OPTIONS, value: 'banana' },
+        });
+        const checked = container.querySelector('input[type="radio"]:checked');
+        expect(checked?.value).toBe('banana');
+        await expectNoAxeViolations(container);
+    });
+    it('禁用项：对应 radio 为 disabled', async () => {
+        const { container } = renderWithLocale(RadioGroup, {
+            props: { ariaLabel: 'Fruit', options: OPTIONS },
+        });
+        const disabled = container.querySelectorAll('input[type="radio"]:disabled');
+        expect(disabled.length).toBe(1);
+        await expectNoAxeViolations(container);
+    });
+});

package/dist/radio/RadioGroup.kbd.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.kbd.test.d.ts.map

package/dist/radio/RadioGroup.kbd.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.kbd.test.d.ts","sourceRoot":"","sources":["../../src/radio/RadioGroup.kbd.test.ts"],"names":[],"mappings":""}

package/dist/radio/RadioGroup.kbd.test.js

@@ -0,0 +1,59 @@
+// RadioGroup 键盘 e2e（browser project / 真实 chromium）。
+// WAI-ARIA radiogroup：roving tabindex + 方向键导航即选中（真实焦点）。
+// 测真实焦点移动 + 焦点即选中——jsdom 测不了（命令式 focus() 不可靠）：
+//   1. roving 单停靠点：选中项 tabindex=0，其余 -1（默认 defaultValue=apple）。
+//   2. ↓→ 真实移动焦点到下一项，同时选中（checked + 停靠点同步）。
+//   3. wrap：末项再 → 回到首项（源码 moveTo 用模运算 wrap）。
+//   4. Home/End 跳首/末并选中。
+//
+// 真实焦点断言用 page locator 的 .toHaveFocus()。
+import { describe, it, expect } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
+import RadioGroupKbdFixture from './RadioGroupKbdFixture.svelte';
+function loc(el) {
+    return page.elementLocator(el);
+}
+describe('RadioGroup 键盘 e2e（radiogroup roving，焦点即选中）', () => {
+    it('roving 单停靠点 + 方向键移动焦点即选中（wrap）+ Home/End', async () => {
+        const { baseElement } = renderKbdFixture(RadioGroupKbdFixture);
+        const radios = Array.from(baseElement.querySelectorAll('input[type="radio"]'));
+        expect(radios.length).toBe(3);
+        const [apple, banana, cherry] = radios;
+        // 1. roving 单停靠点：选中项（apple）tabindex=0，其余 -1。
+        expect(radios.filter((el) => el.tabIndex === 0).length).toBe(1);
+        expect(apple.tabIndex).toBe(0);
+        expect(apple.checked).toBe(true);
+        const before = baseElement.querySelector('[data-testid="before"]');
+        before.focus();
+        await expect.element(loc(before)).toHaveFocus();
+        await userEvent.tab();
+        await expect.element(loc(apple)).toHaveFocus();
+        // 2. → 移动焦点到下一项，焦点即选中（checked + 停靠点同步）。
+        await userEvent.keyboard('{ArrowRight}');
+        await expect.element(loc(banana)).toHaveFocus();
+        expect(banana.checked).toBe(true);
+        expect(banana.tabIndex).toBe(0);
+        expect(apple.tabIndex).toBe(-1);
+        expect(apple.checked).toBe(false);
+        // ↓ 同义于 →（垂直/水平统一）。
+        await userEvent.keyboard('{ArrowDown}');
+        await expect.element(loc(cherry)).toHaveFocus();
+        expect(cherry.checked).toBe(true);
+        // 3. wrap：末项再 → 回到首项并选中。
+        await userEvent.keyboard('{ArrowRight}');
+        await expect.element(loc(apple)).toHaveFocus();
+        expect(apple.checked).toBe(true);
+        // ← wrap 到末项。
+        await userEvent.keyboard('{ArrowLeft}');
+        await expect.element(loc(cherry)).toHaveFocus();
+        expect(cherry.checked).toBe(true);
+        // 4. Home/End 跳首/末并选中。
+        await userEvent.keyboard('{Home}');
+        await expect.element(loc(apple)).toHaveFocus();
+        expect(apple.checked).toBe(true);
+        await userEvent.keyboard('{End}');
+        await expect.element(loc(cherry)).toHaveFocus();
+        expect(cherry.checked).toBe(true);
+    });
+});