@marianmeres/stuic 3.166.0 → 3.168.0

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,250 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { PagingCalcResult } from "@marianmeres/paging-store";
+	import type { TranslateFn } from "../../types.js";
+	import type { ButtonSize } from "../Button/Button.svelte";
+
+	export type PaginationVariant = "compact" | "numbers";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/**
+		 * Paging calculation result from `@marianmeres/paging-store` — the exact shape
+		 * `DataTable` consumes, so both can be fed from the same store or `calculatePaging`
+		 * call. Takes precedence over the `total`/`limit`/`offset` convenience props.
+		 */
+		paging?: PagingCalcResult;
+		/** Convenience alternative to `paging`: total number of items in the dataset. */
+		total?: number;
+		/** Convenience alternative to `paging`: items per page (default 10). */
+		limit?: number;
+		/** Convenience alternative to `paging`: current offset (default 0). */
+		offset?: number;
+		/**
+		 * Callback when the user navigates to a different page. First argument is the new
+		 * offset (`DataTable`'s `onPageChange` signature), second is the 1-based target page.
+		 */
+		onPageChange?: (offset: number, page: number) => void;
+		/**
+		 * `"compact"` (default): prev / "Page X of Y" / next — the `DataTable` pager.
+		 * `"numbers"`: windowed page-number buttons with ellipsis gaps.
+		 */
+		variant?: PaginationVariant;
+		/** Numbers variant: pages always shown around the current page (default 1). */
+		siblingCount?: number;
+		/** Numbers variant: pages always shown at the start and at the end (default 1). */
+		boundaryCount?: number;
+		/** Render first/last jump buttons (default false). */
+		showFirstLast?: boolean;
+		/**
+		 * Render the "Page X of Y" info. Defaults per variant: `true` for compact (between
+		 * prev/next), `false` for numbers (after the buttons when enabled).
+		 */
+		showInfo?: boolean;
+		/**
+		 * Render nothing when there is at most one page (default true — the `DataTable`
+		 * rule: one page of results needs no pager). Set `false` to keep it visible.
+		 */
+		hideSinglePage?: boolean;
+		/** Disable all controls (e.g. while a page of data is loading). */
+		disabled?: boolean;
+		/** Size preset passed to the inner Buttons (default "sm", as in `DataTable`). */
+		size?: ButtonSize;
+		/** i18n translate function (see `createPaginationT`). */
+		t?: TranslateFn;
+		/** Override the "Page X of Y" info content. */
+		renderInfo?: Snippet<[PagingCalcResult]>;
+		/** Skip all default styling (inner Buttons keep their own Button styling) */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for every inner button */
+		classButton?: string;
+		/** Extra class for the current-page button (numbers variant) */
+		classButtonCurrent?: string;
+		/** Class for the "Page X of Y" info */
+		classInfo?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { calculatePaging } from "@marianmeres/paging-store";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import { t_default } from "./i18n.js";
+	import { paginationRange } from "./pagination-range.js";
+
+	let {
+		paging,
+		total,
+		limit,
+		offset,
+		onPageChange,
+		variant = "compact",
+		siblingCount = 1,
+		boundaryCount = 1,
+		showFirstLast = false,
+		showInfo,
+		hideSinglePage = true,
+		disabled = false,
+		size = "sm",
+		t = t_default,
+		renderInfo,
+		unstyled = false,
+		class: classProp,
+		classButton: classButtonProp,
+		classButtonCurrent: classButtonCurrentProp,
+		classInfo: classInfoProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _paging: PagingCalcResult | undefined = $derived(
+		paging ??
+			(total != null || limit != null || offset != null
+				? calculatePaging({ total, limit, offset })
+				: undefined)
+	);
+
+	let _render = $derived(!!_paging && (_paging.pageCount > 1 || !hideSinglePage));
+	let _showInfo = $derived(showInfo ?? variant === "compact");
+
+	let _pages = $derived(
+		variant === "numbers" && _paging
+			? paginationRange(_paging.currentPage, _paging.pageCount, {
+					siblingCount,
+					boundaryCount,
+				})
+			: []
+	);
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-pagination", classProp));
+	let _classButton = $derived(
+		unstyled ? classButtonProp : twMerge("stuic-pagination-button", classButtonProp)
+	);
+	let _classInfo = $derived(
+		unstyled ? classInfoProp : twMerge("stuic-pagination-info", classInfoProp)
+	);
+
+	function goToPage(page: number) {
+		if (!_paging || disabled) return;
+		if (page < 1 || page > _paging.pageCount || page === _paging.currentPage) return;
+		onPageChange?.((page - 1) * _paging.limit, page);
+	}
+</script>
+
+{#if _paging && _render}
+	<nav
+		bind:this={el}
+		class={_class}
+		data-variant={!unstyled ? variant : undefined}
+		aria-label={t("pagination", null, "Pagination")}
+		{...rest}
+	>
+		{#if showFirstLast}
+			<Button
+				variant="ghost"
+				{size}
+				class={_classButton}
+				disabled={disabled || !_paging.hasPrevious}
+				onclick={() => goToPage(1)}
+				aria-label={t("first_page")}
+			>
+				&laquo;
+			</Button>
+		{/if}
+
+		<Button
+			variant="ghost"
+			{size}
+			class={_classButton}
+			disabled={disabled || !_paging.hasPrevious}
+			onclick={() => goToPage(_paging!.currentPage - 1)}
+			aria-label={t("previous_page")}
+		>
+			{#if variant === "compact"}
+				&lsaquo; {t("previous_page")}
+			{:else}
+				&lsaquo;
+			{/if}
+		</Button>
+
+		{#if variant === "numbers"}
+			{#each _pages as item, i (item === "ellipsis" ? `ellipsis-${i}` : item)}
+				{#if item === "ellipsis"}
+					<span
+						class={!unstyled ? "stuic-pagination-ellipsis" : undefined}
+						aria-hidden="true"
+					>
+						&hellip;
+					</span>
+				{:else}
+					{@const isCurrent = item === _paging.currentPage}
+					<Button
+						variant={isCurrent ? "solid" : "ghost"}
+						intent={isCurrent ? "primary" : undefined}
+						{size}
+						class={isCurrent
+							? twMerge(_classButton, classButtonCurrentProp)
+							: _classButton}
+						{disabled}
+						aria-label={t("go_to_page_x", { page: item })}
+						aria-current={isCurrent ? "page" : undefined}
+						data-current={isCurrent ? "true" : undefined}
+						onclick={() => goToPage(item)}
+					>
+						{item}
+					</Button>
+				{/if}
+			{/each}
+		{:else if _showInfo}
+			<span class={_classInfo}>
+				{#if renderInfo}
+					{@render renderInfo(_paging)}
+				{:else}
+					{t("page_x_of_y", { page: _paging.currentPage, pageCount: _paging.pageCount })}
+				{/if}
+			</span>
+		{/if}
+
+		<Button
+			variant="ghost"
+			{size}
+			class={_classButton}
+			disabled={disabled || !_paging.hasNext}
+			onclick={() => goToPage(_paging!.currentPage + 1)}
+			aria-label={t("next_page")}
+		>
+			{#if variant === "compact"}
+				{t("next_page")} &rsaquo;
+			{:else}
+				&rsaquo;
+			{/if}
+		</Button>
+
+		{#if showFirstLast}
+			<Button
+				variant="ghost"
+				{size}
+				class={_classButton}
+				disabled={disabled || !_paging.hasNext}
+				onclick={() => goToPage(_paging!.pageCount)}
+				aria-label={t("last_page")}
+			>
+				&raquo;
+			</Button>
+		{/if}
+
+		{#if variant === "numbers" && _showInfo}
+			<span class={_classInfo}>
+				{#if renderInfo}
+					{@render renderInfo(_paging)}
+				{:else}
+					{t("page_x_of_y", { page: _paging.currentPage, pageCount: _paging.pageCount })}
+				{/if}
+			</span>
+		{/if}
+	</nav>
+{/if}

package/dist/components/Pagination/Pagination.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { PagingCalcResult } from "@marianmeres/paging-store";
+import type { TranslateFn } from "../../types.js";
+import type { ButtonSize } from "../Button/Button.svelte";
+export type PaginationVariant = "compact" | "numbers";
+export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Paging calculation result from `@marianmeres/paging-store` — the exact shape
+     * `DataTable` consumes, so both can be fed from the same store or `calculatePaging`
+     * call. Takes precedence over the `total`/`limit`/`offset` convenience props.
+     */
+    paging?: PagingCalcResult;
+    /** Convenience alternative to `paging`: total number of items in the dataset. */
+    total?: number;
+    /** Convenience alternative to `paging`: items per page (default 10). */
+    limit?: number;
+    /** Convenience alternative to `paging`: current offset (default 0). */
+    offset?: number;
+    /**
+     * Callback when the user navigates to a different page. First argument is the new
+     * offset (`DataTable`'s `onPageChange` signature), second is the 1-based target page.
+     */
+    onPageChange?: (offset: number, page: number) => void;
+    /**
+     * `"compact"` (default): prev / "Page X of Y" / next — the `DataTable` pager.
+     * `"numbers"`: windowed page-number buttons with ellipsis gaps.
+     */
+    variant?: PaginationVariant;
+    /** Numbers variant: pages always shown around the current page (default 1). */
+    siblingCount?: number;
+    /** Numbers variant: pages always shown at the start and at the end (default 1). */
+    boundaryCount?: number;
+    /** Render first/last jump buttons (default false). */
+    showFirstLast?: boolean;
+    /**
+     * Render the "Page X of Y" info. Defaults per variant: `true` for compact (between
+     * prev/next), `false` for numbers (after the buttons when enabled).
+     */
+    showInfo?: boolean;
+    /**
+     * Render nothing when there is at most one page (default true — the `DataTable`
+     * rule: one page of results needs no pager). Set `false` to keep it visible.
+     */
+    hideSinglePage?: boolean;
+    /** Disable all controls (e.g. while a page of data is loading). */
+    disabled?: boolean;
+    /** Size preset passed to the inner Buttons (default "sm", as in `DataTable`). */
+    size?: ButtonSize;
+    /** i18n translate function (see `createPaginationT`). */
+    t?: TranslateFn;
+    /** Override the "Page X of Y" info content. */
+    renderInfo?: Snippet<[PagingCalcResult]>;
+    /** Skip all default styling (inner Buttons keep their own Button styling) */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for every inner button */
+    classButton?: string;
+    /** Extra class for the current-page button (numbers variant) */
+    classButtonCurrent?: string;
+    /** Class for the "Page X of Y" info */
+    classInfo?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "el">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Pagination/README.md

@@ -0,0 +1,152 @@
+# Pagination
+
+Standalone pagination control for lists, search results, and custom views. Two
+variants: `compact` — prev / "Page X of Y" / next, which _is_ the pager `DataTable`
+renders internally — and `numbers` — windowed page-number buttons with ellipsis gaps
+(the classic `1 … 4 5 6 … 20`).
+
+Consumes the same `PagingCalcResult` from
+[`@marianmeres/paging-store`](https://github.com/marianmeres/paging-store) that
+`DataTable` does, so one paging store (or one `calculatePaging` call) can feed both.
+For quick standalone use, `total`/`limit`/`offset` props compute the paging
+internally.
+
+## Props
+
+| Prop                 | Type                     | Default     | Description                                                                           |
+| -------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------- |
+| `paging`             | `PagingCalcResult`       | -           | Paging metadata (same shape `DataTable` consumes); wins over `total`/`limit`/`offset` |
+| `total`              | `number`                 | -           | Convenience alternative to `paging`: total item count                                 |
+| `limit`              | `number`                 | `10`        | Convenience alternative to `paging`: page size                                        |
+| `offset`             | `number`                 | `0`         | Convenience alternative to `paging`: current offset                                   |
+| `onPageChange`       | `(offset, page) => void` | -           | Navigation callback: new offset (`DataTable`-compatible first arg) + 1-based page     |
+| `variant`            | `"compact" \| "numbers"` | `"compact"` | Prev/info/next, or windowed page-number buttons                                       |
+| `siblingCount`       | `number`                 | `1`         | Numbers variant: pages always shown around the current page                           |
+| `boundaryCount`      | `number`                 | `1`         | Numbers variant: pages always shown at the start and end                              |
+| `showFirstLast`      | `boolean`                | `false`     | Render first/last jump buttons (« »)                                                  |
+| `showInfo`           | `boolean`                | per variant | "Page X of Y" info; defaults `true` for compact, `false` for numbers                  |
+| `hideSinglePage`     | `boolean`                | `true`      | Render nothing when there is at most one page (the `DataTable` rule)                  |
+| `disabled`           | `boolean`                | `false`     | Disable all controls (e.g. while loading)                                             |
+| `size`               | `ButtonSize`             | `"sm"`      | Size preset of the inner Buttons                                                      |
+| `t`                  | `TranslateFn`            | English     | i18n translate function (see below)                                                   |
+| `unstyled`           | `boolean`                | `false`     | Skip pagination styling (inner Buttons keep their own Button styling)                 |
+| `class`              | `string`                 | -           | Additional CSS classes (merged via twMerge)                                           |
+| `classButton`        | `string`                 | -           | Class for every inner button                                                          |
+| `classButtonCurrent` | `string`                 | -           | Extra class for the current-page button (numbers variant)                             |
+| `classInfo`          | `string`                 | -           | Class for the "Page X of Y" info                                                      |
+| `el`                 | `HTMLElement`            | -           | Element reference (bindable)                                                          |
+
+## Snippet Props
+
+| Snippet      | Description                                                              |
+| ------------ | ------------------------------------------------------------------------ |
+| `renderInfo` | Override the "Page X of Y" info content; receives the `PagingCalcResult` |
+
+## Usage
+
+### Basic (compact)
+
+```svelte
+<script lang="ts">
+	import { Pagination } from "@marianmeres/stuic";
+
+	let offset = $state(0);
+</script>
+
+<Pagination total={137} limit={10} {offset} onPageChange={(o) => (offset = o)} />
+```
+
+### With a paging store (shared with DataTable)
+
+The `paging` prop takes the exact object `DataTable` consumes — hide the table's
+built-in pager and drive both from one store:
+
+```svelte
+<script lang="ts">
+	import { DataTable, Pagination } from "@marianmeres/stuic";
+	import { createPagingStore } from "@marianmeres/paging-store";
+
+	const paging = createPagingStore({ total: 137, limit: 10, offset: 0 });
+	const onPageChange = (offset: number) => paging.update({ offset });
+</script>
+
+<DataTable {columns} {data} paging={$paging} showPager={false} />
+<Pagination paging={$paging} {onPageChange} variant="numbers" />
+```
+
+### Numbers variant
+
+```svelte
+<Pagination variant="numbers" total={200} {offset} onPageChange={(o) => (offset = o)} />
+
+<!-- wider window, first/last jumps -->
+<Pagination
+	variant="numbers"
+	siblingCount={2}
+	boundaryCount={2}
+	showFirstLast
+	total={200}
+	{offset}
+	onPageChange={(o) => (offset = o)}
+/>
+```
+
+### i18n
+
+Built-in English; bundled Slovak (`PAGINATION_MESSAGES_SK`) is opt-in. The
+`previous_page`, `next_page` and `page_x_of_y` keys are identical to `DataTable`'s,
+so one merged catalog (and one `t`) can serve both components.
+
+```svelte
+<script lang="ts">
+	import {
+		Pagination,
+		createPaginationT,
+		PAGINATION_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createPaginationT(PAGINATION_MESSAGES_SK);
+</script>
+
+<Pagination {paging} {onPageChange} {t} />
+```
+
+### Custom info
+
+```svelte
+<Pagination {paging} {onPageChange}>
+	{#snippet renderInfo(p)}
+		{p.offset + 1}–{Math.min(p.offset + p.limit, p.total)} of {p.total}
+	{/snippet}
+</Pagination>
+```
+
+### Single page
+
+By default nothing renders when there is at most one page (same rule as
+`DataTable`'s internal pager). Keep it visible with `hideSinglePage={false}`.
+
+## Accessibility
+
+- Renders a `<nav aria-label="Pagination">` landmark (label localized via `t`).
+- Every button carries a localized `aria-label`; the current page button (numbers
+  variant) is marked `aria-current="page"`.
+
+## Exports
+
+Besides the component: `paginationRange(currentPage, pageCount, { siblingCount, boundaryCount })`
+— the pure windowing helper behind the numbers variant, usable for fully custom pagers.
+
+## CSS Variables
+
+| Variable                              | Default                          | Description                                        |
+| ------------------------------------- | -------------------------------- | -------------------------------------------------- |
+| `--stuic-pagination-gap`              | `0.5rem`                         | Gap between controls                               |
+| `--stuic-pagination-button-min-width` | `--stuic-button-min-height-sm`   | Min button width (keeps number buttons square-ish) |
+| `--stuic-pagination-info-font-size`   | `--text-sm`                      | Info font size                                     |
+| `--stuic-pagination-info-text`        | `--stuic-color-muted-foreground` | Info color                                         |
+| `--stuic-pagination-ellipsis-text`    | `--stuic-color-muted-foreground` | Ellipsis color                                     |
+
+## Data Attributes
+
+- `data-variant` - `"compact" | "numbers"` (on the root `<nav>`)
+- `data-current` - `"true"` on the current-page button (numbers variant)

package/dist/components/Pagination/i18n-sk.d.ts

@@ -0,0 +1,17 @@
+import type { PaginationMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `Pagination`. Opt-in — English stays the built-in default,
+ * and this module is only pulled into a bundle when it is actually imported (the
+ * component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Pagination, createPaginationT, PAGINATION_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createPaginationT(PAGINATION_MESSAGES_SK);
+ * </script>
+ *
+ * <Pagination {paging} {onPageChange} {t} />
+ * ```
+ */
+export declare const PAGINATION_MESSAGES_SK: PaginationMessages;

package/dist/components/Pagination/i18n-sk.js

@@ -0,0 +1,24 @@
+/**
+ * Slovak message catalog for `Pagination`. Opt-in — English stays the built-in default,
+ * and this module is only pulled into a bundle when it is actually imported (the
+ * component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Pagination, createPaginationT, PAGINATION_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createPaginationT(PAGINATION_MESSAGES_SK);
+ * </script>
+ *
+ * <Pagination {paging} {onPageChange} {t} />
+ * ```
+ */
+export const PAGINATION_MESSAGES_SK = {
+    previous_page: "Späť",
+    next_page: "Ďalej",
+    first_page: "Prvá strana",
+    last_page: "Posledná strana",
+    page_x_of_y: "Strana {page} z {pageCount}",
+    go_to_page_x: "Prejsť na stranu {page}",
+    pagination: "Stránkovanie",
+};

package/dist/components/Pagination/i18n.d.ts

@@ -0,0 +1,41 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `Pagination`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * The `previous_page`, `next_page` and `page_x_of_y` keys are intentionally identical
+ * to `DataTable`'s, so one merged catalog (and one `t`) can serve both components.
+ *
+ * Placeholders are single-brace (`{page}`, `{pageCount}`, ...).
+ */
+export declare const PAGINATION_MESSAGES_EN: {
+    previous_page: string;
+    next_page: string;
+    first_page: string;
+    last_page: string;
+    page_x_of_y: string;
+    go_to_page_x: string;
+    pagination: string;
+};
+/** Every message key `Pagination` may look up. */
+export type PaginationMessageKey = keyof typeof PAGINATION_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type PaginationMessages = Record<PaginationMessageKey, string>;
+/**
+ * Builds the `t` prop of `Pagination` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Pagination, createPaginationT, PAGINATION_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createPaginationT(PAGINATION_MESSAGES_SK);
+ * </script>
+ *
+ * <Pagination {paging} {onPageChange} {t} />
+ * ```
+ */
+export declare function createPaginationT(messages: Partial<PaginationMessages> | Record<string, string>, fallbackMessages?: Partial<PaginationMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/Pagination/i18n.js

@@ -0,0 +1,49 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `Pagination`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * The `previous_page`, `next_page` and `page_x_of_y` keys are intentionally identical
+ * to `DataTable`'s, so one merged catalog (and one `t`) can serve both components.
+ *
+ * Placeholders are single-brace (`{page}`, `{pageCount}`, ...).
+ */
+export const PAGINATION_MESSAGES_EN = {
+    previous_page: "Prev",
+    next_page: "Next",
+    first_page: "First page",
+    last_page: "Last page",
+    page_x_of_y: "Page {page} of {pageCount}",
+    go_to_page_x: "Go to page {page}",
+    pagination: "Pagination",
+};
+/**
+ * Builds the `t` prop of `Pagination` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Pagination, createPaginationT, PAGINATION_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createPaginationT(PAGINATION_MESSAGES_SK);
+ * </script>
+ *
+ * <Pagination {paging} {onPageChange} {t} />
+ * ```
+ */
+export function createPaginationT(messages, fallbackMessages = PAGINATION_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createPaginationT(PAGINATION_MESSAGES_EN);

package/dist/components/Pagination/index.css

@@ -0,0 +1,50 @@
+/* ============================================================================
+   PAGINATION COMPONENT TOKENS
+   Override globally: :root { --stuic-pagination-gap: 1rem; }
+   Override locally:  <Pagination style="--stuic-pagination-button-min-width: 2rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-pagination-gap: 0.5rem;
+
+	/* Keeps single-character buttons («, ‹, page numbers) square-ish and aligned.
+	   Sized to the `size="sm"` Button height. Text buttons (Prev/Next) simply exceed it. */
+	--stuic-pagination-button-min-width: var(--stuic-button-min-height-sm, 2.75rem);
+
+	/* "Page X of Y" info */
+	--stuic-pagination-info-font-size: var(--text-sm);
+	--stuic-pagination-info-text: var(--stuic-color-muted-foreground);
+
+	/* Ellipsis gap (numbers variant) */
+	--stuic-pagination-ellipsis-text: var(--stuic-color-muted-foreground);
+}
+
+@layer components {
+	.stuic-pagination {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: var(--stuic-pagination-gap);
+	}
+
+	.stuic-pagination-button {
+		min-width: var(--stuic-pagination-button-min-width);
+	}
+
+	.stuic-pagination-info {
+		font-size: var(--stuic-pagination-info-font-size);
+		color: var(--stuic-pagination-info-text);
+		white-space: nowrap;
+	}
+
+	.stuic-pagination-ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--stuic-pagination-button-min-width);
+		color: var(--stuic-pagination-ellipsis-text);
+		user-select: none;
+	}
+}

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Pagination, type Props as PaginationProps, type PaginationVariant, } from "./Pagination.svelte";
+export { paginationRange, type PaginationRangeItem, type PaginationRangeOptions, } from "./pagination-range.js";
+export { createPaginationT, PAGINATION_MESSAGES_EN, type PaginationMessageKey, type PaginationMessages, } from "./i18n.js";
+export { PAGINATION_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/Pagination/index.js

@@ -0,0 +1,4 @@
+export { default as Pagination, } from "./Pagination.svelte";
+export { paginationRange, } from "./pagination-range.js";
+export { createPaginationT, PAGINATION_MESSAGES_EN, } from "./i18n.js";
+export { PAGINATION_MESSAGES_SK } from "./i18n-sk.js";