@synergy-design-system/react/dist/components/pagination.d.ts

React wrappers for the Synergy Design System

import Component from '@synergy-design-system/components/components/pagination/pagination.component.js';
import { type EventName } from '@lit/react';
import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
/**
 * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
 * @status stable
 * @since 3.12.0
 *
 * @event syn-pagination-page-changed - Emitted when the current page changes
 * @event syn-pagination-page-size-changed - Emitted when the page size changes
 *
 * @csspart base - The component's base wrapper.
 * @csspart divider - The divider element displayed at the top of the pagination component.
 * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
 * @csspart page-size-select - The page size select element.
 * @csspart page-item-summary - The text element displaying the current page item range and total items.
 * @csspart page-input-section - The section containing the page number input and total pages display.
 * @csspart page-input - The page number input element.
 * @csspart navigation - The pagination navigation element.
 * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
 *
 * @accessibility
 * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
 * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
 * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
 */
export declare const SynPagination: import("@lit/react").ReactWebComponent<Component, {
    onSynPaginationPageChanged: EventName<SynPaginationPageChangedEvent>;
    onSynPaginationPageSizeChanged: EventName<SynPaginationPageSizeChangedEvent>;
}>;
export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';