@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/overflow-list/meta.ts

@@ -1,138 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * OverflowList — see specs/components/show/OverflowList.spec.md
- */
-export const meta = {
-  name: 'OverflowList',
-  category: 'show',
-  description:
-    '溢出列表：collapse 折叠模式把溢出项收纳进 +N 折叠节点（collapseFrom 决定从尾 end / 头 start 折叠），或 scroll 滚动模式不折叠改为可滚动容器；direction 支持 horizontal 横向 / vertical 纵向。ResizeObserver 命令式测量 + requestAnimationFrame 合批 + hysteresis 滞后防抖动，复用 @chenzy-design/core 收纳算法（computeOverflowPartition）。命令式方法（bind:this 暴露）：forceMeasure() 强制立即重测重算（容器尺寸变化未被 RO 捕获时手动触发）；scrollTo(index, opts?) scroll 模式滚动到指定项（opts.align start/center/end）。',
-  exports: ['OverflowList'],
-  props: [
-    { name: 'items', type: 'T[]', default: '[]', desc: '数据驱动的列表项' },
-    {
-      name: 'size',
-      type: "'small'|'default'|'large'",
-      default: "'default'",
-      desc: '影响 gap（small 4 / default 8 / large 12 px）',
-    },
-    {
-      name: 'mode',
-      type: "'collapse'|'scroll'",
-      default: "'collapse'",
-      desc: 'collapse 折叠溢出项为 +N（默认）；scroll 不折叠，可见层沿主轴可滚动',
-    },
-    {
-      name: 'direction',
-      type: "'horizontal'|'vertical'",
-      default: "'horizontal'",
-      desc: '主轴方向：横向（测项宽 + clientWidth）/ 纵向（测项高 + clientHeight，根容器需有高度约束）',
-    },
-    {
-      name: 'collapseFrom',
-      type: "'end'|'start'",
-      default: "'end'",
-      desc: 'collapse 模式下从尾部（end）还是头部（start）折叠；start 时折叠节点渲染在头部，尾部项保持可见',
-    },
-    { name: 'gap', type: 'number', default: 'undefined', desc: '显式覆盖项间距（px）' },
-    {
-      name: 'minVisibleItems',
-      type: 'number',
-      default: '0',
-      desc: '永不折叠到少于该数量的可见项',
-    },
-    {
-      name: 'alwaysVisibleIndexes',
-      type: 'number[]',
-      default: '[]',
-      desc: '永不被折叠的项索引',
-    },
-    {
-      name: 'threshold',
-      type: 'number',
-      default: '8',
-      desc: 'hysteresis 滞后阈值（px），抑制边界宽度抖动',
-    },
-    {
-      name: 'item',
-      type: 'Snippet<[{ item: T; index: number }]>',
-      default: 'undefined',
-      desc: '渲染单个可见项',
-    },
-    {
-      name: 'overflow',
-      type: 'Snippet<[{ overflowItems: T[]; overflowCount: number }]>',
-      default: 'undefined',
-      desc: '自定义折叠节点；缺省渲染 +N 按钮',
-    },
-    {
-      name: 'onOverflowChange',
-      type: '(info: { overflowCount: number; visibleCount: number; overflowItems: T[] }) => void',
-      default: 'undefined',
-      desc: '收纳结果变化时通知（去重，仅真实变化触发）',
-    },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '容器无障碍标签' },
-    { name: 'class', type: 'string', default: "''", desc: '附加根类名' },
-  ],
-  events: [
-    {
-      name: 'onOverflowChange',
-      desc: '可见数 / 溢出数变化时回调，携带 overflowItems',
-    },
-  ],
-  methods: [
-    {
-      name: 'forceMeasure',
-      type: '() => void',
-      desc: '命令式强制立即重新测量 + 重算可见/溢出划分（bind:this 后调用）。用于容器尺寸变化未被 ResizeObserver 捕获的场景：父级 display 切回、字体加载、缩放等。同步执行，去重 onOverflowChange 同样生效。',
-    },
-    {
-      name: 'scrollTo',
-      type: "(index: number, opts?: { align?: 'start' | 'center' | 'end' }) => void",
-      desc: 'scroll 模式下命令式滚动到指定项（bind:this 后调用）。align 默认 start；vertical 写 scrollTop，horizontal 写 scrollLeft；index 自动 clamp。collapse 模式为 no-op。',
-    },
-  ],
-  slots: [
-    { name: 'item', desc: '单个可见项渲染模板' },
-    { name: 'overflow', desc: '自定义 +N 折叠节点' },
-  ],
-  a11y: {
-    hasRole: false,
-    focusable: false,
-    note: '根容器 role=group 透明保留子项语义；折叠节点为 button + aria-label「显示其余 N 项」；离屏测量层 aria-hidden 且不进 Tab 序（tabindex=-1）；被折叠项随之移出 Tab 序。',
-  },
-  tokens: [
-    '--cd-overflow-list-gap',
-    '--cd-overflow-list-gap-small',
-    '--cd-overflow-list-gap-large',
-    '--cd-overflow-list-overflow-color',
-    '--cd-overflow-list-overflow-color-hover',
-    '--cd-overflow-list-overflow-bg',
-    '--cd-overflow-list-overflow-bg-hover',
-    '--cd-overflow-list-overflow-radius',
-    '--cd-overflow-list-focus-ring',
-  ],
-  responsive: true,
-  examples: [
-    {
-      title: '基础工具栏收纳',
-      code: '<OverflowList items={tags}>{#snippet item({ item })}<Tag>{item}</Tag>{/snippet}</OverflowList>',
-    },
-    {
-      title: '自定义折叠节点',
-      code: '<OverflowList {items}>\n  {#snippet item({ item })}<Tag>{item}</Tag>{/snippet}\n  {#snippet overflow({ overflowCount })}<Dropdown>更多 {overflowCount}</Dropdown>{/snippet}\n</OverflowList>',
-    },
-    {
-      title: 'start 头部折叠（保留尾部最新项）',
-      code: '<OverflowList {items} collapseFrom="start">{#snippet item({ item })}<Tag>{item}</Tag>{/snippet}</OverflowList>',
-    },
-    {
-      title: 'scroll 滚动模式（不折叠）',
-      code: '<OverflowList {items} mode="scroll">{#snippet item({ item })}<Tag>{item}</Tag>{/snippet}</OverflowList>',
-    },
-    {
-      title: 'vertical 纵向（容器需有高度）',
-      code: '<div style="height:200px"><OverflowList {items} direction="vertical">{#snippet item({ item })}<Tag>{item}</Tag>{/snippet}</OverflowList></div>',
-    },
-  ],
-} as const;

package/src/pagination/Pagination.a11y.test.ts

@@ -1,62 +0,0 @@
-// Pagination a11y：分页器。
-// nav[aria-label] 包裹，页码为原生 button，当前页 aria-current=page。
-//
-// 修复记录：
-//   1. showSizeChanger 内置 Select 现经 ariaLabel=Pagination.itemsPerPage 获可访问名。
-//   2. showQuickJumper 跳页 Input 现经 ariaLabel=Pagination.jumpTo 获可访问名。
-//   两处 axe aria-input-field-name / label 均消除。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Pagination from './Pagination.svelte';
-
-describe('Pagination a11y', () => {
-  it('默认渲染：nav landmark + 可访问名，无 axe violations', async () => {
-    const { container } = renderWithLocale(Pagination, {
-      props: { total: 100, defaultPageSize: 10 },
-    });
-    const nav = container.querySelector('nav');
-    expect(nav).not.toBeNull();
-    // ariaLabel 缺省时来自 locale，应非空
-    expect(nav?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-
-  it('当前页 aria-current=page，无 axe violations', async () => {
-    const { container } = renderWithLocale(Pagination, {
-      props: { total: 100, defaultPageSize: 10, defaultCurrentPage: 3 },
-    });
-    const current = container.querySelector('[aria-current="page"]');
-    expect(current).not.toBeNull();
-    expect(current?.textContent?.trim()).toContain('3');
-    await expectNoAxeViolations(container);
-  });
-
-  it('自定义 ariaLabel + showTotal，无 axe violations', async () => {
-    const { container } = renderWithLocale(Pagination, {
-      props: {
-        total: 200,
-        defaultPageSize: 20,
-        ariaLabel: 'Results pagination',
-        showTotal: true,
-      },
-    });
-    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe('Results pagination');
-    await expectNoAxeViolations(container);
-  });
-
-  // 内置 Select 经 ariaLabel=Pagination.itemsPerPage 获可访问名。
-  it('showSizeChanger axe 0 violations（内置 Select 有 aria-label）', async () => {
-    const { container } = renderWithLocale(Pagination, {
-      props: { total: 200, defaultPageSize: 20, showSizeChanger: true },
-    });
-    await expectNoAxeViolations(container);
-  });
-
-  // 跳页 input 经 ariaLabel=Pagination.jumpTo 获可访问名。
-  it('showQuickJumper axe 0 violations（跳页 input 有 aria-label）', async () => {
-    const { container } = renderWithLocale(Pagination, {
-      props: { total: 200, defaultPageSize: 20, showQuickJumper: true },
-    });
-    await expectNoAxeViolations(container);
-  });
-});

package/src/pagination/Pagination.kbd.test.ts

@@ -1,66 +0,0 @@
-// Pagination 键盘 e2e（browser project / 真实 chromium）。
-// 页码按钮组 roving（真实焦点）：方向键移动焦点但不切页（切页交给 Enter/Space → click）。
-// 测真实焦点移动——jsdom 测不了（命令式 focus() 不可靠）：
-//   1. roving 单停靠点：页码组只有当前页 tabindex=0（默认 current=1），其余 -1。
-//   2. ←→/↑↓ 真实移动焦点到相邻页码，但 current/aria-current 不变（仅移动焦点）。
-//   3. 无 wrap：末页再 → clamp 在末页；首页再 ← clamp 在首页。
-//
-// 真实焦点断言用 page locator 的 .toHaveFocus()。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import PaginationKbdFixture from './PaginationKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Pagination 键盘 e2e（页码 roving，真实焦点，移动≠切页）', () => {
-  it('roving 单停靠点 + 方向键移动焦点不切页（clamp）', async () => {
-    const { baseElement } = renderKbdFixture(PaginationKbdFixture);
-
-    const pages = Array.from(
-      baseElement.querySelectorAll<HTMLElement>('.cd-pagination__page[data-page]'),
-    );
-    expect(pages.length).toBe(3);
-    const [p1, p2, p3] = pages as [HTMLElement, HTMLElement, HTMLElement];
-
-    // 1. roving 单停靠点：当前页（1）tabindex=0，其余 -1。
-    expect(pages.filter((el) => el.tabIndex === 0).length).toBe(1);
-    expect(p1.tabIndex).toBe(0);
-    expect(p1.getAttribute('aria-current')).toBe('page');
-
-    p1.focus();
-    await expect.element(loc(p1)).toHaveFocus();
-
-    // 2. → 移动焦点到下一页码，但不切页（aria-current 仍在第 1 页）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(p2)).toHaveFocus();
-    expect(p2.tabIndex).toBe(0);
-    expect(p1.tabIndex).toBe(-1);
-    // 移动焦点 ≠ 切页：current 仍为 1。
-    expect(p1.getAttribute('aria-current')).toBe('page');
-    expect(p2.getAttribute('aria-current')).toBe(null);
-
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(p3)).toHaveFocus();
-
-    // 无 wrap：末页再 → 停在末页（clamp）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(p3)).toHaveFocus();
-
-    // ← 回退；首页再 ← 停在首页（clamp）。
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(p2)).toHaveFocus();
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(p1)).toHaveFocus();
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(p1)).toHaveFocus();
-
-    // Home/End 跳首/末页码。
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(p3)).toHaveFocus();
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(p1)).toHaveFocus();
-  });
-});

package/src/pagination/Pagination.svelte

@@ -1,428 +0,0 @@
-<!--
-  Pagination — see specs/components/navigation/Pagination.spec.md
-  Base subset: default + simple modes, prev/next, page buttons with ellipsis,
-  showTotal text, showSizeChanger (reuses Select), showQuickJumper (reuses Input).
-  Numbers localized via Intl.NumberFormat; text via locale package.
-  Boundary validation/clamping via @chenzy-design/core (pure functions):
-  out-of-range current/pageSize and quick-jumper input are clamped to a valid
-  page. Controlled props are never written back (red line #1): the clamped page
-  is only surfaced through onChange.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import {
-    paginationPageCount as computePageCount,
-    clampPage,
-    clampPageSize,
-    parseJumpInput,
-    pageRange,
-    useLiveAnnouncer,
-    nextRovingIndex,
-    rovingKeyFromEvent,
-    type PageCell as CorePageCell,
-  } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-  import { Select } from '../select/index.js';
-  import { Input } from '../input/index.js';
-
-  type PaginationSize = 'small' | 'default' | 'large';
-  type PaginationMode = 'default' | 'simple';
-  type PaginationStatus = 'default' | 'warning' | 'error';
-  type PopoverPosition = 'top' | 'bottom';
-
-  interface Props {
-    total?: number;
-    currentPage?: number;
-    defaultCurrentPage?: number;
-    /** controlled page size; omit for uncontrolled (defaultPageSize) */
-    pageSize?: number;
-    defaultPageSize?: number;
-    /** options for the size changer */
-    pageSizeOptions?: number[];
-    size?: PaginationSize;
-    mode?: PaginationMode;
-    /** quick-jumper validation state (透传 Input) */
-    status?: PaginationStatus;
-    showTotal?: boolean | ((total: number, range: [number, number]) => string);
-    /** show the page-size selector (reuses Select) */
-    showSizeChanger?: boolean;
-    /** show the quick-jump input (reuses Input) */
-    showQuickJumper?: boolean;
-    /** hide the whole pager when there is only one page */
-    hideOnSinglePage?: boolean;
-    /** pages kept on each side of the current page */
-    siblingCount?: number;
-    /** pages kept fixed at each boundary (head/tail) */
-    boundaryCount?: number;
-    /** size-changer dropdown placement (透传 Select) */
-    popoverPosition?: PopoverPosition;
-    disabled?: boolean;
-    locale?: string;
-    /** fires on page OR page-size change; receives the resolved (page, pageSize) */
-    onChange?: (page: number, pageSize: number) => void;
-    onPageSizeChange?: (pageSize: number) => void;
-    ariaLabel?: string;
-    /** 自定义页码按钮内容，接收 { page, isCurrent } */
-    renderPage?: Snippet<[{ page: number; isCurrent: boolean }]>;
-    /** size-changer 浮层层叠顺序（透传 CSS 变量 --cd-select-dropdown-z） */
-    popoverZIndex?: number;
-    /** 上一页按钮内容，可为字符串或 Snippet */
-    prevText?: string | Snippet;
-    /** 下一页按钮内容，可为字符串或 Snippet */
-    nextText?: string | Snippet;
-  }
-
-  let {
-    total = 0,
-    currentPage,
-    defaultCurrentPage = 1,
-    pageSize,
-    defaultPageSize = 10,
-    pageSizeOptions = [10, 20, 50, 100],
-    size = 'default',
-    mode = 'default',
-    status = 'default',
-    showTotal = false,
-    showSizeChanger = false,
-    showQuickJumper = false,
-    hideOnSinglePage = false,
-    siblingCount = 1,
-    boundaryCount = 1,
-    popoverPosition = 'bottom',
-    disabled = false,
-    locale = 'zh-CN',
-    onChange,
-    onPageSizeChange,
-    ariaLabel,
-    renderPage,
-    popoverZIndex,
-    prevText,
-    nextText,
-  }: Props = $props();
-
-  const loc = useLocale();
-  // 单例 live region（polite）：翻页 / pageSize 变更播报给屏幕阅读器。
-  // 命令式写入在事件回调里（非 render 期），符合红线 #3。
-  const announcer = useLiveAnnouncer();
-
-  // --- pageSize 受控/非受控 (红线 #1)：不回写 prop ---
-  const isSizeControlled = $derived(pageSize !== undefined);
-  let innerSize = $state(getInitialSize());
-  // 钳制：非法/不在选项内的 pageSize 回退默认值（不回写受控 prop）。
-  const currentSize = $derived(
-    clampPageSize(isSizeControlled ? (pageSize as number) : innerSize, pageSizeOptions, defaultPageSize),
-  );
-
-  function getInitialSize(): number {
-    return clampPageSize(defaultPageSize, pageSizeOptions, 10);
-  }
-
-  const pageCount = $derived(computePageCount(total, currentSize));
-
-  // Controlled / uncontrolled (red line #1): never write back the prop.
-  const isControlled = $derived(currentPage !== undefined);
-  let inner = $state(getInitialPage());
-  // 钳制：显示的 current 始终落在 [1, pageCount]，越界时显示钳后值（不回写受控 prop）。
-  const current = $derived(
-    clampPage(isControlled ? (currentPage as number) : inner, total, currentSize),
-  );
-
-  function getInitialPage(): number {
-    return defaultCurrentPage;
-  }
-
-  // size-changer options for Select
-  const sizeOptions = $derived(
-    pageSizeOptions.map((n) => ({
-      label: loc().t('Pagination.pageSize', { size: n }),
-      value: n,
-    })),
-  );
-
-  // 改变每页条数：保持当前页，超出新总页数则钳到末页（onChange 上报 page+size）。
-  function changePageSize(nextSize: number) {
-    if (disabled || nextSize === currentSize) return;
-    if (!isSizeControlled) innerSize = nextSize;
-    const nextPage = clampPage(current, total, nextSize);
-    if (!isControlled && nextPage !== inner) inner = nextPage;
-    onPageSizeChange?.(nextSize);
-    onChange?.(nextPage, nextSize);
-    announcer.announce(
-      loc().t('Pagination.pageSizeChangeAnnounce', { size: nextSize, page: nextPage }),
-    );
-  }
-
-  // 快速跳页：解析输入，越界静默钳入 [1, pageCount]；非数字/空输入忽略。
-  let jumpValue = $state('');
-  function jump() {
-    const next = parseJumpInput(jumpValue, total, currentSize);
-    jumpValue = '';
-    if (next === null) return;
-    goto(next);
-  }
-
-  const nf = $derived(new Intl.NumberFormat(locale));
-
-  // Page list with ellipsis folding via core pure function (red line #2):
-  // boundaryCount pages kept at each end, siblingCount around current, gaps
-  // collapse into '…'. Cell count is bounded → million pages stay O(1) DOM.
-  const pages = $derived<CorePageCell[]>(
-    pageRange(current, pageCount, siblingCount, boundaryCount),
-  );
-
-  // hideOnSinglePage: collapse the whole pager when there is only one page.
-  const hidden = $derived(hideOnSinglePage && pageCount <= 1);
-
-  // map popoverPosition → Select placement
-  const sizeChangerPlacement = $derived(
-    popoverPosition === 'top' ? ('topStart' as const) : ('bottomStart' as const),
-  );
-
-  const isFirst = $derived(current <= 1);
-  const isLast = $derived(current >= pageCount);
-
-  const cls = $derived(`cd-pagination cd-pagination--${size} cd-pagination--${mode}`);
-
-  function goto(page: number) {
-    if (disabled) return;
-    const next = clampPage(page, total, currentSize);
-    if (next === current) return;
-    if (!isControlled) inner = next;
-    onChange?.(next, currentSize);
-    // 用「即将生效」的 next/pageCount 播报（$derived 在同步回调内尚未重算；受控时本就不回写）。
-    announcer.announce(
-      loc().t('Pagination.pageChangeAnnounce', { page: next, count: pageCount }),
-    );
-  }
-
-  const totalText = $derived(loc().t('Pagination.total', { total: nf.format(total) }));
-
-  // --- roving tabindex（页码按钮，红线 #2/#3）---
-  // 仅 `type === 'page'` 的单元格参与漫游；省略号/prev/next 不在序列内。
-  const pageValues = $derived(pages.filter((c) => c.type === 'page').map((c) => c.value));
-  let listEl = $state<HTMLElement | null>(null);
-  // focusedPage 为 null 时，tab 落点回退到当前激活页（current）。
-  let focusedPage = $state<number | null>(null);
-
-  // 纯函数 tabindex：焦点项 0，其余 -1（无焦点项时 current 接收 Tab）。
-  function pageTabindex(value: number): 0 | -1 {
-    const stop = focusedPage ?? current;
-    return value === stop ? 0 : -1;
-  }
-
-  // 方向键漫游：移动焦点，不切页；Enter/Space 交给原生 button click → goto。
-  function onPageKeydown(e: KeyboardEvent, value: number) {
-    const intent = rovingKeyFromEvent(e.key);
-    if (!intent) return;
-    e.preventDefault();
-    const vals = pageValues;
-    const idx = vals.indexOf(value);
-    const nextIdx = nextRovingIndex(idx, vals.length, intent, false);
-    const nextVal = vals[nextIdx];
-    if (nextVal !== undefined) {
-      focusedPage = nextVal;
-      listEl?.querySelector<HTMLElement>(`[data-page="${nextVal}"]`)?.focus();
-    }
-  }
-</script>
-
-{#if !hidden}
-<nav class={cls} aria-label={ariaLabel ?? loc().t('Pagination.ariaLabel')}>
-  {#if showTotal}
-    <span class="cd-pagination__total">
-      {#if typeof showTotal === 'function'}
-        {showTotal(total, [(current - 1) * currentSize + 1, Math.min(current * currentSize, total)])}
-      {:else}
-        {totalText}
-      {/if}
-    </span>
-  {/if}
-
-  <button
-    type="button"
-    class="cd-pagination__prev"
-    disabled={disabled || isFirst}
-    aria-label={loc().t('Pagination.prevPage')}
-    onclick={() => goto(current - 1)}
-  >{#if prevText}{#if typeof prevText === 'function'}{@render prevText()}{:else}{prevText}{/if}{:else}‹{/if}</button
-  >
-
-  {#if mode === 'simple'}
-    <span class="cd-pagination__simple">
-      <span class="cd-pagination__simple-current">{nf.format(current)}</span>
-      <span class="cd-pagination__simple-sep" aria-hidden="true">/</span>
-      <span class="cd-pagination__simple-total">{nf.format(pageCount)}</span>
-    </span>
-  {:else}
-    <ul class="cd-pagination__list" bind:this={listEl}>
-      {#each pages as cell (cell.type === 'page' ? `p-${cell.value}` : `e-${cell.position}`)}
-        <li class="cd-pagination__item">
-          {#if cell.type === 'ellipsis'}
-            <span class="cd-pagination__ellipsis" aria-hidden="true">…</span>
-          {:else}
-            <button
-              type="button"
-              class="cd-pagination__page"
-              class:cd-pagination__page--active={cell.value === current}
-              aria-current={cell.value === current ? 'page' : undefined}
-              aria-label={loc().t('Pagination.pageLabel', { page: cell.value })}
-              data-page={cell.value}
-              tabindex={pageTabindex(cell.value)}
-              {disabled}
-              onclick={() => goto(cell.value)}
-              onfocus={() => (focusedPage = cell.value)}
-              onkeydown={(e) => onPageKeydown(e, cell.value)}
-              >{#if renderPage}{@render renderPage({ page: cell.value, isCurrent: cell.value === current })}{:else}{nf.format(cell.value)}{/if}</button
-            >
-          {/if}
-        </li>
-      {/each}
-    </ul>
-  {/if}
-
-  <button
-    type="button"
-    class="cd-pagination__next"
-    disabled={disabled || isLast}
-    aria-label={loc().t('Pagination.nextPage')}
-    onclick={() => goto(current + 1)}
-  >{#if nextText}{#if typeof nextText === 'function'}{@render nextText()}{:else}{nextText}{/if}{:else}›{/if}</button
-  >
-
-  {#if showSizeChanger}
-    <span class="cd-pagination__size-changer" style={popoverZIndex != null ? `--cd-select-dropdown-z:${popoverZIndex}` : undefined}>
-      <Select
-        {size}
-        {disabled}
-        ariaLabel={loc().t('Pagination.itemsPerPage')}
-        placement={sizeChangerPlacement}
-        options={sizeOptions}
-        value={currentSize}
-        onChange={(v) => changePageSize(Number(v))}
-      />
-    </span>
-  {/if}
-
-  {#if showQuickJumper}
-    <span class="cd-pagination__jumper">
-      <span class="cd-pagination__jumper-label">{loc().t('Pagination.jumpTo')}</span>
-      <span class="cd-pagination__jumper-input">
-        <Input
-          {size}
-          {status}
-          {disabled}
-          ariaLabel={loc().t('Pagination.jumpTo')}
-          value={jumpValue}
-          onInput={(v) => (jumpValue = v)}
-          onEnter={jump}
-        />
-      </span>
-      {#if loc().t('Pagination.jumpToSuffix')}
-        <span class="cd-pagination__jumper-suffix">{loc().t('Pagination.jumpToSuffix')}</span>
-      {/if}
-    </span>
-  {/if}
-</nav>
-{/if}
-
-<style>
-  .cd-pagination {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-pagination-gap);
-    color: var(--cd-color-text-0);
-  }
-  .cd-pagination__list {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-pagination-gap);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .cd-pagination__item {
-    display: inline-flex;
-  }
-  .cd-pagination__page,
-  .cd-pagination__prev,
-  .cd-pagination__next {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-inline-size: var(--cd-pagination-item-size);
-    block-size: var(--cd-pagination-item-size);
-    padding-inline: var(--cd-spacing-2);
-    border: var(--cd-pagination-item-border);
-    border-radius: var(--cd-pagination-item-radius);
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    transition: background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-pagination__page:hover:not(:disabled):not(.cd-pagination__page--active),
-  .cd-pagination__prev:hover:not(:disabled),
-  .cd-pagination__next:hover:not(:disabled) {
-    background: var(--cd-pagination-item-bg-hover);
-  }
-  .cd-pagination__page--active {
-    background: var(--cd-pagination-item-bg-active);
-    color: var(--cd-pagination-item-color-active);
-  }
-  .cd-pagination__page:focus-visible,
-  .cd-pagination__prev:focus-visible,
-  .cd-pagination__next:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-pagination__page:disabled,
-  .cd-pagination__prev:disabled,
-  .cd-pagination__next:disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-  .cd-pagination__ellipsis {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-inline-size: var(--cd-pagination-item-size);
-    block-size: var(--cd-pagination-item-size);
-    user-select: none;
-  }
-  .cd-pagination__simple {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-1);
-  }
-  .cd-pagination__size-changer {
-    display: inline-flex;
-    inline-size: var(--cd-pagination-size-changer-width, 7.5rem);
-  }
-  .cd-pagination__jumper {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-spacing-1);
-  }
-  .cd-pagination__jumper-input {
-    inline-size: var(--cd-pagination-jumper-width, 3.5rem);
-  }
-  .cd-pagination--small .cd-pagination__page,
-  .cd-pagination--small .cd-pagination__prev,
-  .cd-pagination--small .cd-pagination__next,
-  .cd-pagination--small .cd-pagination__ellipsis {
-    font-size: var(--cd-font-size-1);
-  }
-  .cd-pagination--large .cd-pagination__page,
-  .cd-pagination--large .cd-pagination__prev,
-  .cd-pagination--large .cd-pagination__next,
-  .cd-pagination--large .cd-pagination__ellipsis {
-    font-size: var(--cd-font-size-3);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-pagination__page,
-    .cd-pagination__prev,
-    .cd-pagination__next {
-      transition: none;
-    }
-  }
-</style>