@chenzy-design/svelte 0.1.0

package/src/overflow-list/meta.ts

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

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

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

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