@sepale/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,21 @@
+/** What .mobile-frame is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "mobile-frame";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["screen"];
+/**
+     * A phone drawn around content — for showcases and screenshots, not an
+     * emulator. Its width is `--mobile-frame-width`; the height follows.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    /** What the screen shows. It scrolls. */
+    children?: Snippet;
+}
+declare const MobileFrame: import("svelte").Component<Props, {}, "">;
+type MobileFrame = ReturnType<typeof MobileFrame>;
+export default MobileFrame;

package/dist/components/Navbar.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">
+	/** What .navbar is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'navbar';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		sticky: 'Let the bar follow the page instead of scrolling away.'
+	} as const;
+	export const PARTS = ['start', 'center', 'end'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+		/** The three zones. start and end absorb the slack, so whatever is in
+		    center stays centred while either side grows. */
+		start?: Snippet;
+		center?: Snippet;
+		end?: Snippet;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		start,
+		center,
+		end,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<nav {...applied.rest} class={classes}>
+	{#if start}<div class="navbar-start">{@render start()}</div>{/if}
+	{#if center}<div class="navbar-center">{@render center()}</div>{/if}
+	{#if end}<div class="navbar-end">{@render end()}</div>{/if}
+	{@render children?.()}
+</nav>

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

@@ -0,0 +1,25 @@
+/** What .navbar is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "navbar";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly sticky: "Let the bar follow the page instead of scrolling away.";
+};
+export declare const PARTS: readonly ["start", "center", "end"];
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLElement> {
+    /** The three zones. start and end absorb the slack, so whatever is in
+        center stays centred while either side grows. */
+    start?: Snippet;
+    center?: Snippet;
+    end?: Snippet;
+    class?: string;
+    children?: Snippet;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/NumberInput.svelte

@@ -0,0 +1,255 @@
+<script module lang="ts">
+	/** What .number-input is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'number-input';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['dec', 'field', 'inc'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A number field, aligned to the end like a figure in a column.
+	 *
+	 * NOT an `<input type="number">`: that one follows the browser's locale, and
+	 * in French Firefox refuses `.` while Chrome takes it, so the same keystroke
+	 * gives a number in one and an empty, invalid field in the other. This is a
+	 * text field with a numeric keyboard (`inputmode`), and it reads `.` and `,`
+	 * alike as the decimal separator. What the native field did, it does:
+	 *
+	 *   - typing is filtered to what a number can be on its way (`-`, digits,
+	 *     one separator); a paste is cleaned of its spaces first;
+	 *   - ↑ / ↓ step by `step`, within `min` / `max`;
+	 *   - `min`, `max` and `step` set the field's validity, so `:invalid` and
+	 *     the validator behave as before; `required` is the native one;
+	 *   - with a `name`, a hidden input submits the value written with a `.`,
+	 *     whatever separator was typed.
+	 *
+	 * With `controls`, a − and a + frame it. The buttons are structure, not
+	 * paint, so they are a prop and not a variant: a family draws them when
+	 * they are there.
+	 *
+	 * `value` is bindable and always a number: what the field holds, parsed,
+	 * or `null` when it is empty or holds no finite number. Never a string.
+	 */
+	import { untrack, type Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'value' | 'type'> {
+		/** Colour the field by its own validity (`required`, `min`, `max`, `step`)
+		    and reveal `hint` once the browser marks it invalid. */
+		validator?: boolean;
+		/** Shown under the field when it is invalid. */
+		hint?: Snippet;
+		/** Bindable. Always a number, or `null` when the field is empty. */
+		value?: number | null;
+		/** Draw a − and a + around the field. Off: the field alone. */
+		controls?: boolean;
+		min?: number;
+		max?: number;
+		/** `any`: every value is valid, and the buttons move by 1. */
+		step?: number | 'any';
+		disabled?: boolean;
+		/** After every change, typed or stepped. */
+		onValue?: (value: number | null) => void;
+		decreaseLabel?: string;
+		increaseLabel?: string;
+		/** Submitted with the form, as a number written with a `.`. */
+		name?: string;
+		/** What the browser says when the field is invalid. */
+		messages?: Partial<{ nan: string; min: string; max: string; step: string }>;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		value = $bindable(null),
+		controls = false,
+		min,
+		max,
+		step = 1,
+		disabled = false,
+		onValue,
+		decreaseLabel = 'Decrease',
+		increaseLabel = 'Increase',
+		name,
+		messages = {},
+		/* The field needs these four itself: taken out of the rest, and the
+		   caller's own called after the field's (see the <input>). */
+		onbeforeinput: theirBeforeInput,
+		oninput: theirInput,
+		onblur: theirBlur,
+		onkeydown: theirKeydown,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, validator && 'validator', klass));
+
+	let field: HTMLInputElement | undefined = $state();
+
+	/* What a number can be while it is being typed: `-`, `12,`, `.5`. */
+	const PARTIAL = /^-?\d*(?:[.,]\d*)?$/;
+	/* Spaces a paste may carry: thousands, French narrow no-break included. */
+	const SPACES = /[\s  ]/g;
+
+	/** A number from text: `.` or `,` as the separator; null when there is none. */
+	function parse(text: string): number | null {
+		const s = text.trim().replace(',', '.');
+		if (!/\d/.test(s)) return null;
+		const n = Number(s);
+		return Number.isFinite(n) ? n : null;
+	}
+
+	const format = (n: number | null | undefined) => (n == null || !Number.isFinite(n) ? '' : String(n));
+
+	/* The text in the field, kept as typed (`12,5` stays `12,5`). It follows
+	   `value` only when `value` changes from outside. */
+	let text = $state(untrack(() => format(value)));
+	$effect(() => {
+		const outside = value ?? null;
+		if (untrack(() => parse(text)) !== outside) text = format(outside);
+	});
+
+	function commit(next: string) {
+		text = next;
+		value = parse(next);
+		onValue?.(value);
+	}
+
+	/* Keep out what no number can become; clean a paste of its spaces. */
+	function guard(e: InputEvent) {
+		if (!field || e.data == null) return;
+		const from = field.selectionStart ?? field.value.length;
+		const to = field.selectionEnd ?? from;
+		const data = e.data.replace(SPACES, '');
+		const next = field.value.slice(0, from) + data + field.value.slice(to);
+		if (!PARTIAL.test(next)) return e.preventDefault();
+		if (data !== e.data) {
+			e.preventDefault();
+			field.setRangeText(data, from, to, 'end');
+			commit(field.value);
+		}
+	}
+
+	/* The last word, for input that skipped beforeinput (some mobile IMEs). */
+	function sanitise() {
+		if (!field) return;
+		if (!PARTIAL.test(field.value)) field.value = text;
+		else commit(field.value);
+	}
+
+	/* `12,` or `-` left behind: tidied once the field is left. */
+	function tidy() {
+		if (text === '-' || /^-?[.,]$/.test(text)) commit('');
+		else if (/[.,]$/.test(text)) commit(text.slice(0, -1));
+	}
+
+	function arrows(e: KeyboardEvent) {
+		if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+		e.preventDefault();
+		stepBy(e.key === 'ArrowUp');
+	}
+
+	/** Digits after the point, to keep 0.1 + 0.2 from showing 0.30000000000000004. */
+	const decimals = (n: number | null | undefined) =>
+		n == null ? 0 : (String(n).split('.')[1]?.length ?? 0);
+
+	function stepBy(up: boolean) {
+		if (disabled) return;
+		const by = step === 'any' ? 1 : step;
+		const current = parse(text);
+		let next = current === null ? (min ?? 0) : current + (up ? by : -by);
+		/* On the grid `min + k × step`, as stepUp() / stepDown() do. */
+		if (current !== null && step !== 'any') {
+			const base = min ?? 0;
+			next = base + Math.round((next - base) / by) * by;
+		}
+		next = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, next));
+		next = Number(next.toFixed(Math.max(decimals(by), decimals(current), decimals(min))));
+		commit(format(next));
+		field?.dispatchEvent(new Event('change', { bubbles: true }));
+	}
+
+	/* The validity the native field had: min, max, step, and "not a number". */
+	let problem = $derived.by(() => {
+		const n = parse(text);
+		if (n === null) return text.trim() && !PARTIAL.test(text.trim()) ? (messages.nan ?? 'Enter a number.') : '';
+		if (min !== undefined && n < min) return messages.min ?? `Enter ${min} or more.`;
+		if (max !== undefined && n > max) return messages.max ?? `Enter ${max} or less.`;
+		if (step !== 'any' && step > 0) {
+			const k = (n - (min ?? 0)) / step;
+			if (Math.abs(k - Math.round(k)) > 1e-9) return messages.step ?? `Enter a multiple of ${step}.`;
+		}
+		return '';
+	});
+	$effect(() => field?.setCustomValidity(problem));
+
+	/* A minus on the phone's keyboard only where a negative is allowed: iOS's
+	   decimal pad has none. */
+	let mode = $derived<'decimal' | 'text'>(min !== undefined && min >= 0 ? 'decimal' : 'text');
+</script>
+
+<div class={classes}>
+	{#if controls}
+	<button
+		type="button"
+		class="number-input-dec"
+		tabindex="-1"
+		aria-label={decreaseLabel}
+		disabled={disabled || (min !== undefined && value !== null && value <= min)}
+		onclick={() => stepBy(false)}>−</button
+	>
+	{/if}
+	<input
+		{...applied.rest}
+		bind:this={field}
+		type="text"
+		inputmode={mode}
+		autocomplete="off"
+		role="spinbutton"
+		aria-valuenow={value ?? undefined}
+		aria-valuemin={min}
+		aria-valuemax={max}
+		class="number-input-field"
+		value={text}
+		{disabled}
+		onbeforeinput={(e) => {
+			guard(e);
+			theirBeforeInput?.(e);
+		}}
+		oninput={(e) => {
+			sanitise();
+			theirInput?.(e);
+		}}
+		onblur={(e) => {
+			tidy();
+			theirBlur?.(e);
+		}}
+		onkeydown={(e) => {
+			arrows(e);
+			theirKeydown?.(e);
+		}}
+	/>
+	{#if name}<input type="hidden" {name} value={format(value)} {disabled} />{/if}
+	{#if controls}
+	<button
+		type="button"
+		class="number-input-inc"
+		tabindex="-1"
+		aria-label={increaseLabel}
+		disabled={disabled || (max !== undefined && value !== null && value >= max)}
+		onclick={() => stepBy(true)}>+</button
+	>
+	{/if}
+</div>
+{#if hint}<p class="validator-hint">{@render hint()}</p>{/if}

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

@@ -0,0 +1,68 @@
+/** What .number-input is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "number-input";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["dec", "field", "inc"];
+/**
+     * A number field, aligned to the end like a figure in a column.
+     *
+     * NOT an `<input type="number">`: that one follows the browser's locale, and
+     * in French Firefox refuses `.` while Chrome takes it, so the same keystroke
+     * gives a number in one and an empty, invalid field in the other. This is a
+     * text field with a numeric keyboard (`inputmode`), and it reads `.` and `,`
+     * alike as the decimal separator. What the native field did, it does:
+     *
+     *   - typing is filtered to what a number can be on its way (`-`, digits,
+     *     one separator); a paste is cleaned of its spaces first;
+     *   - ↑ / ↓ step by `step`, within `min` / `max`;
+     *   - `min`, `max` and `step` set the field's validity, so `:invalid` and
+     *     the validator behave as before; `required` is the native one;
+     *   - with a `name`, a hidden input submits the value written with a `.`,
+     *     whatever separator was typed.
+     *
+     * With `controls`, a − and a + frame it. The buttons are structure, not
+     * paint, so they are a prop and not a variant: a family draws them when
+     * they are there.
+     *
+     * `value` is bindable and always a number: what the field holds, parsed,
+     * or `null` when it is empty or holds no finite number. Never a string.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'value' | 'type'> {
+    /** Colour the field by its own validity (`required`, `min`, `max`, `step`)
+        and reveal `hint` once the browser marks it invalid. */
+    validator?: boolean;
+    /** Shown under the field when it is invalid. */
+    hint?: Snippet;
+    /** Bindable. Always a number, or `null` when the field is empty. */
+    value?: number | null;
+    /** Draw a − and a + around the field. Off: the field alone. */
+    controls?: boolean;
+    min?: number;
+    max?: number;
+    /** `any`: every value is valid, and the buttons move by 1. */
+    step?: number | 'any';
+    disabled?: boolean;
+    /** After every change, typed or stepped. */
+    onValue?: (value: number | null) => void;
+    decreaseLabel?: string;
+    increaseLabel?: string;
+    /** Submitted with the form, as a number written with a `.`. */
+    name?: string;
+    /** What the browser says when the field is invalid. */
+    messages?: Partial<{
+        nan: string;
+        min: string;
+        max: string;
+        step: string;
+    }>;
+    class?: string;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/Pagination.svelte

@@ -0,0 +1,169 @@
+<script module lang="ts">
+	/** What .pagination is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The pagination draws its own pages: `.pagination-item`,
+	    `.pagination-gap` and `.pagination-text` are PARTS. The current page is marked by
+	    `aria-current="page"`, not by a class. */
+	export const PREFIX = 'pagination';
+
+	export const AXES = {
+		/* The fill of the current page. */
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* How the pages are drawn. All three keep the same parts and props
+		   (a different structure would be another component):
+		   dots — a dot per page instead of its number, as under a carousel;
+		   bars — a segment per page, stretched across the row;
+		   count — no pages at all, "3 / 8" between previous and next. */
+		variant: ['dots', 'bars', 'count']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['item', 'gap', 'text', 'number'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A row of pages to jump between. Pages are numbered from 1. Past a few
+	 * pages, the ones far from the current page fold into a gap: the first
+	 * and the last stay, and `siblings` pages on each side of the current one.
+	 * The dots and bars variants always show every page, and no previous /
+	 * next; the count variant shows no page, only "3 / 8" between them.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `color` is ours — the HTML attribute of the same name is long obsolete.
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+		/** How many pages there are. */
+		count: number;
+		/** The current page, from 1. Bindable. */
+		page?: number;
+		/** Pages kept on each side of the current one before a gap. Default 1. */
+		siblings?: number;
+		/** Keep the first and last pages, with a gap, around the window. Default no.
+		    Without: only the current page and its siblings — `< 6 >` with
+		    siblings 0, `< 5 6 7 >` with 1. */
+		edges?: boolean;
+		/** Draw previous / next. Default: yes, except in the dots and bars variants. */
+		controls?: boolean;
+		/** Called with the new page after every change. */
+		onPage?: (page: number) => void;
+		/** The accessible name of a page. Default `Page N`. */
+		pageLabel?: (page: number) => string;
+		/** The text of the count variant. Default `3 / 8`. */
+		countLabel?: (page: number, count: number) => string;
+		/** The accessible names of the controls. */
+		previousLabel?: string;
+		nextLabel?: string;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured — except `variant`, which
+	// also changes what is drawn. It is handed back to applyAxes below.
+	let {
+		count,
+		page = $bindable(1),
+		siblings = 1,
+		edges = false,
+		controls,
+		onPage,
+		pageLabel = (p: number) => `Page ${p}`,
+		countLabel = (p: number, n: number) => `${p} / ${n}`,
+		previousLabel = 'Previous page',
+		nextLabel = 'Next page',
+		variant,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, { ...axes, variant }));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	/** Every page drawn, none folded, no number shown. */
+	let marks = $derived(variant === 'dots' || variant === 'bars');
+	let showControls = $derived(controls ?? !marks);
+
+	/** The pages to draw, with `null` for a gap. */
+	let pages = $derived.by((): (number | null)[] => {
+		const all = Array.from({ length: Math.max(0, count) }, (_, i) => i + 1);
+		if (variant === 'count') return [];
+		if (marks) return all;
+		// No edges: a window of 2 * siblings + 1 pages, slid back inside the row at its ends.
+		if (!edges) {
+			const w = Math.min(count, 2 * siblings + 1);
+			const start = Math.min(Math.max(1, page - siblings), count - w + 1);
+			return all.slice(start - 1, start - 1 + w);
+		}
+		// first + last + current + siblings + two gaps: below that, folding saves nothing
+		if (count <= 2 * siblings + 5) return all;
+		// Always 2 * siblings + 5 slots, so the row keeps its width: near an
+		// end, the pages the missing gap would have taken are shown instead.
+		const edge = 2 * siblings + 3;
+		if (page <= siblings + 3) return [...all.slice(0, edge), null, count];
+		if (page >= count - siblings - 2) return [1, null, ...all.slice(count - edge)];
+		return [1, null, ...all.slice(page - siblings - 1, page + siblings), null, count];
+	});
+
+	/** Which way the last move went, for a family that animates the numbers.
+	    Unset until the first move, so nothing plays on load. */
+	let direction = $state<'next' | 'previous'>();
+
+	function go(p: number) {
+		const next = Math.min(Math.max(1, p), count);
+		if (next === page) return;
+		direction = next > page ? 'next' : 'previous';
+		page = next;
+		onPage?.(next);
+	}
+</script>
+
+<nav {...applied.rest} class={classes} data-direction={direction}>
+	{#if showControls}
+		<button
+			type="button"
+			class={`${PREFIX}-item`}
+			aria-label={previousLabel}
+			disabled={page <= 1}
+			onclick={() => go(page - 1)}
+		>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+		</button>
+	{/if}
+
+	{#if variant === 'count'}
+		<span class={`${PREFIX}-text`} aria-live="polite">{countLabel(page, count)}</span>
+	{/if}
+
+	<!-- Unkeyed: the slots stay put and only their numbers change, so the
+	     current page's fill moves between fixed buttons. -->
+	{#each pages as p}
+		{#if p === null}
+			<span class={`${PREFIX}-gap`} aria-hidden="true">…</span>
+		{:else}
+			<button
+				type="button"
+				class={`${PREFIX}-item`}
+				aria-label={pageLabel(p)}
+				aria-current={p === page ? 'page' : undefined}
+				onclick={() => go(p)}
+			>
+				<!-- Keyed: a new number is a new span, so its entrance can play. -->
+				{#key p}<span class={`${PREFIX}-number`}>{p}</span>{/key}
+			</button>
+		{/if}
+	{/each}
+
+	{#if showControls}
+		<button
+			type="button"
+			class={`${PREFIX}-item`}
+			aria-label={nextLabel}
+			disabled={page >= count}
+			onclick={() => go(page + 1)}
+		>
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg>
+		</button>
+	{/if}
+</nav>

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

@@ -0,0 +1,50 @@
+/** What .pagination is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The pagination draws its own pages: `.pagination-item`,
+    `.pagination-gap` and `.pagination-text` are PARTS. The current page is marked by
+    `aria-current="page"`, not by a class. */
+export declare const PREFIX = "pagination";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["dots", "bars", "count"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["item", "gap", "text", "number"];
+/**
+     * A row of pages to jump between. Pages are numbered from 1. Past a few
+     * pages, the ones far from the current page fold into a gap: the first
+     * and the last stay, and `siblings` pages on each side of the current one.
+     * The dots and bars variants always show every page, and no previous /
+     * next; the count variant shows no page, only "3 / 8" between them.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    /** How many pages there are. */
+    count: number;
+    /** The current page, from 1. Bindable. */
+    page?: number;
+    /** Pages kept on each side of the current one before a gap. Default 1. */
+    siblings?: number;
+    /** Keep the first and last pages, with a gap, around the window. Default no.
+        Without: only the current page and its siblings — `< 6 >` with
+        siblings 0, `< 5 6 7 >` with 1. */
+    edges?: boolean;
+    /** Draw previous / next. Default: yes, except in the dots and bars variants. */
+    controls?: boolean;
+    /** Called with the new page after every change. */
+    onPage?: (page: number) => void;
+    /** The accessible name of a page. Default `Page N`. */
+    pageLabel?: (page: number) => string;
+    /** The text of the count variant. Default `3 / 8`. */
+    countLabel?: (page: number, count: number) => string;
+    /** The accessible names of the controls. */
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;