@jelinek/ui 0.9.0 → 0.9.1

package/dist/components/commerce/Drawer.svelte

@@ -1,55 +1,68 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
-	import { portal, lockScroll } from './overlay.js';
+	import { portal, lockScroll, trapFocus, rememberFocus } from './overlay.js';
 
 	interface Props {
 		open: boolean;
 		onclose: () => void;
 		side?: 'left' | 'right';
 		labelledby?: string;
-		/** Accessible label of the backdrop close button. */
-		closeLabel?: string;
 		class?: string;
 		children: Snippet;
 	}
 
-	let {
-		open,
-		onclose,
-		side = 'right',
-		labelledby,
-		closeLabel = 'Zavřít',
-		class: className = '',
-		children
-	}: Props = $props();
+	// closeLabel zanikl s přestavbou pozadí na nefokusovatelnou vrstvu
+	// (přístupnost EAA) — zavírá Escape, klik vedle, nebo viditelné tlačítko
+	// v obsahu (CartDrawer ho nese). Poslaný prop se neškodně ignoruje.
+	let { open, onclose, side = 'right', labelledby, class: className = '', children }: Props =
+		$props();
 
 	let panel: HTMLElement | undefined = $state();
 
 	$effect(() => {
 		if (!open) return;
+		// Přístupnost překryvu (EAA): fokus se po zavření vrací na prvek,
+		// který drawer otevřel, a Tab cyklí uvnitř panelu (trapFocus).
+		const restore = rememberFocus();
 		const unlock = lockScroll();
 		panel?.focus();
+		const untrap = panel ? trapFocus(panel) : () => {};
 		const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onclose();
 		window.addEventListener('keydown', onKey);
 		return () => {
 			unlock();
+			untrap();
 			window.removeEventListener('keydown', onKey);
+			restore();
 		};
 	});
 </script>
 
 {#if open}
-	<!-- z-scale contract: site header sits at z-1100; overlay primitives (this,
-	     Modal) go above it at z-[1200]; Toaster tops everything at z-[1500]. -->
-	<div use:portal class="fixed inset-0 z-[1200]">
-		<button
-			type="button"
-			aria-label={closeLabel}
-			class="absolute inset-0 bg-black/40"
-			transition:fade={{ duration: 150 }}
+	<!-- Škála vrstev (jelinek.css :root): hlavička --z-header (50); překryvy
+	     (tento, Modal) nad ní na --z-overlay (1200); toasty --z-toast (1500)
+	     úplně nahoře. -->
+	<!-- CHOVÁNÍ SJEDNOCENÉ S MOBILNÍM MENU (majitel, 14. 8. 2026): vyjetí
+	     zprava na tokenu --dur-slow (0,2 s), zavření Esc i klepnutím vedle,
+	     zamčený scroll, šířka min(84vw, 448px) nechává vidět proužek stránky
+	     i na telefonu. MATERIÁL je ale kvůli čitelnosti obsahu (ceny, řádky
+	     košíku) neprůhledný panel — majitel 14. 8. 2026 sklo vrátil: bílá
+	     plocha (--bg-white, v tmavém režimu tmavá), jemná hrana
+	     border-subtle a silnější ztmavení stránky o 50 %. -->
+	<div use:portal class="fixed inset-0 z-(--z-overlay)">
+		<!-- Pozadí je čistě myší zkratka pro zavření — NENÍ v tab pořadí
+		     (dřív to byl <button> a neviditelné celoobrazovkové tlačítko bylo
+		     první zastávkou tabulátoru). Klávesnice zavírá Escapem, čtečky
+		     mají viditelné zavírací tlačítko v obsahu (CartDrawer ho nese). -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div
+			data-overlay-backdrop
+			aria-hidden="true"
+			class="absolute inset-0 bg-[var(--overlay-scrim)] [-webkit-backdrop-filter:var(--overlay-filter)] [backdrop-filter:var(--overlay-filter)]"
+			transition:fade={{ duration: 200 }}
 			onclick={onclose}
-		></button>
+		></div>
 		<div
 			bind:this={panel}
 			tabindex="-1"
@@ -57,9 +70,10 @@
 			aria-modal="true"
 			aria-labelledby={labelledby}
 			class="absolute inset-y-0 {side === 'right'
-				? 'right-0'
-				: 'left-0'} bg-surface shadow-interactive flex w-full max-w-md flex-col outline-none {className}"
-			transition:fly={{ x: side === 'right' ? 400 : -400, duration: 250 }}
+				? 'right-0 border-l'
+				: 'left-0 border-r'} border-border-subtle bg-surface
+				shadow-resting flex w-[min(84vw,448px)] flex-col font-secondary font-light outline-none {className}"
+			transition:fly={{ x: side === 'right' ? 400 : -400, duration: 200 }}
 		>
 			{@render children()}
 		</div>

package/dist/components/commerce/Drawer.svelte.d.ts

@@ -4,8 +4,6 @@ interface Props {
     onclose: () => void;
     side?: 'left' | 'right';
     labelledby?: string;
-    /** Accessible label of the backdrop close button. */
-    closeLabel?: string;
     class?: string;
     children: Snippet;
 }

package/dist/components/commerce/EmptyState.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Titulek prázdného stavu. */
+		heading?: string;
+		/** Vysvětlení a rada, co zkusit jinak. */
+		children?: Snippet;
+		/** Akce pod textem — typicky tlačítko „Zrušit filtry“. */
+		action?: Snippet;
+		class?: string;
+	}
+
+	let {
+		heading = 'Nic jsme nenašli',
+		children,
+		action,
+		class: className
+	}: Props = $props();
+
+	// A quiet gray panel, no illustration (the kit ships no icon set) and no
+	// colour — an empty result is a normal state, not an error. Centered so it
+	// visibly replaces the product grid it stands in for.
+</script>
+
+<div class={cn('rounded-card bg-surface-gray px-6 py-14 text-center', className)}>
+	<h3 class="font-primary text-step1 font-bold text-fg">{heading}</h3>
+	{#if children}
+		<p class="mx-auto mt-2 max-w-[480px] font-secondary font-light text-step-down1 text-fg-muted1">
+			{@render children()}
+		</p>
+	{/if}
+	{#if action}
+		<div class="mt-5 flex justify-center gap-3">{@render action()}</div>
+	{/if}
+</div>

package/dist/components/commerce/EmptyState.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Titulek prázdného stavu. */
+    heading?: string;
+    /** Vysvětlení a rada, co zkusit jinak. */
+    children?: Snippet;
+    /** Akce pod textem — typicky tlačítko „Zrušit filtry“. */
+    action?: Snippet;
+    class?: string;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/commerce/FilterChip.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Text nasazeného filtru, např. „Výška: 22 cm“. */
+		label: string;
+		/** Zavolá se po kliknutí — odebrání filtru řeší aplikace. */
+		onremove?: () => void;
+		class?: string;
+	}
+
+	let { label, onremove, class: className }: Props = $props();
+
+	// The whole chip is one button whose action is REMOVAL — the × is just the
+	// visual hint, the accessible name says what the click does. Neutral
+	// emphasis (forms rule): resting border-fg-muted2 like an input, black on
+	// hover like a tile; colour stays reserved for errors.
+	const CHIP =
+		'inline-flex cursor-pointer items-center gap-1.5 rounded-pill border border-fg-muted2 ' +
+		'bg-surface py-[5px] pr-2.5 pl-3 font-secondary text-step-down1 text-fg ' +
+		'transition-colors duration-[var(--dur-base)] ease-[var(--ease)] hover:border-jelinek-black';
+</script>
+
+<button type="button" aria-label="Zrušit filtr: {label}" class={cn(CHIP, className)} onclick={onremove}>
+	{label}
+	<svg
+		viewBox="0 0 24 24"
+		class="size-3.5 text-fg-muted1"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg
+	>
+</button>

package/dist/components/commerce/FilterChip.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /** Text nasazeného filtru, např. „Výška: 22 cm“. */
+    label: string;
+    /** Zavolá se po kliknutí — odebrání filtru řeší aplikace. */
+    onremove?: () => void;
+    class?: string;
+}
+declare const FilterChip: import("svelte").Component<Props, {}, "">;
+type FilterChip = ReturnType<typeof FilterChip>;
+export default FilterChip;

package/dist/components/commerce/FreeShippingBar.svelte

@@ -28,7 +28,7 @@
 	);
 </script>
 
-<div class="rounded-card border-border-subtle border p-3">
+<div class="rounded-card border-border-subtle border p-3 font-secondary font-light">
 	<p class="flex items-center gap-1.5 text-(length:--step-down1) font-medium text-fg mb-2">
 		<svg
 			viewBox="0 0 24 24"

package/dist/components/commerce/Gallery.svelte

@@ -118,7 +118,7 @@
 				>
 					<img src={image.src} alt={image.alt} loading="lazy" class="h-full w-full object-cover" />
 					<div
-						class="text-step1 absolute inset-0 flex items-center justify-center bg-(--glass-fill) font-medium text-fg backdrop-blur-[25px]"
+						class="text-step1 absolute inset-0 flex items-center justify-center bg-(--glass-fill) font-secondary font-medium text-fg backdrop-blur-[25px]"
 					>
 						{moreLabel(hiddenCount)}
 					</div>
@@ -142,7 +142,9 @@
 	</div>
 {/if}
 
-<Modal open={lightboxOpen} onclose={closeLightbox} {closeLabel}>
+<!-- closeLabel Modal opustil (EAA přestavba pozadí) — lightbox má vlastní
+     viditelné zavírací tlačítko, které label používá dál. -->
+<Modal open={lightboxOpen} onclose={closeLightbox}>
 	<div
 		class="relative flex max-h-[calc(90dvh-2rem)] w-[86vw] max-w-3xl flex-col items-center gap-3 p-4"
 		role="group"

package/dist/components/commerce/ListingToolbar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+	import Button from '../Button.svelte';
+
+	interface Props {
+		/** Počet nalezených produktů. Bez hodnoty se počet nevypíše. */
+		count?: number;
+		/** Tvary slova pro 1 / 2–4 / 5+ — výchozí „produkt/produkty/produktů“. */
+		unit?: [string, string, string];
+		/** Zavolá se po kliknutí na tlačítko Filtrování (otevření modalu/draweru). */
+		onfilter?: () => void;
+		/** Počet nasazených filtrů — ukáže se v závorce na tlačítku. */
+		filterCount?: number;
+		/** Nasazené filtry (FilterChip) — vykreslí se v řádku pod lištou. */
+		chips?: Snippet;
+		/** Pravá strana lišty, typicky Select s řazením. */
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		count,
+		unit = ['produkt', 'produkty', 'produktů'],
+		onfilter,
+		filterCount = 0,
+		chips,
+		children,
+		class: className
+	}: Props = $props();
+
+	// Czech plural: 1 / 2–4 / everything else (0, 5+, fractions don't occur
+	// for a result count).
+	const plural = (n: number) => (n === 1 ? unit[0] : n >= 2 && n <= 4 ? unit[1] : unit[2]);
+
+	// Layout follows the worked listing in the demo category page
+	// (demo/ortopedicke-lamelove-matrace): filter button left, sort right,
+	// wrapping on narrow screens. The count is aria-live so a screen-reader
+	// user hears the new total when filters change the listing under them.
+</script>
+
+<div class={cn('flex flex-wrap items-end justify-between gap-4', className)}>
+	<div class="flex flex-wrap items-center gap-4">
+		{#if onfilter}
+			<Button variant="secondary" color="black" onclick={onfilter}>
+				Filtrování{filterCount > 0 ? ` (${filterCount})` : ''}
+			</Button>
+		{/if}
+		{#if count !== undefined}
+			<p aria-live="polite" class="font-secondary font-light text-step-down1 text-fg-muted1">
+				<strong class="font-medium text-fg [font-variant-numeric:tabular-nums]">{count}</strong>
+				{plural(count)}
+			</p>
+		{/if}
+	</div>
+	{#if children}
+		<div class="flex items-end gap-3">{@render children()}</div>
+	{/if}
+</div>
+{#if chips}
+	<div class="mt-3 flex flex-wrap gap-2">{@render chips()}</div>
+{/if}

package/dist/components/commerce/ListingToolbar.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Počet nalezených produktů. Bez hodnoty se počet nevypíše. */
+    count?: number;
+    /** Tvary slova pro 1 / 2–4 / 5+ — výchozí „produkt/produkty/produktů“. */
+    unit?: [string, string, string];
+    /** Zavolá se po kliknutí na tlačítko Filtrování (otevření modalu/draweru). */
+    onfilter?: () => void;
+    /** Počet nasazených filtrů — ukáže se v závorce na tlačítku. */
+    filterCount?: number;
+    /** Nasazené filtry (FilterChip) — vykreslí se v řádku pod lištou. */
+    chips?: Snippet;
+    /** Pravá strana lišty, typicky Select s řazením. */
+    children?: Snippet;
+    class?: string;
+}
+declare const ListingToolbar: import("svelte").Component<Props, {}, "">;
+type ListingToolbar = ReturnType<typeof ListingToolbar>;
+export default ListingToolbar;

package/dist/components/commerce/Modal.svelte

@@ -1,60 +1,70 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
-	import { portal, lockScroll } from './overlay.js';
+	import { portal, lockScroll, trapFocus, rememberFocus } from './overlay.js';
 
 	interface Props {
 		open: boolean;
 		onclose: () => void;
 		labelledby?: string;
-		/** Accessible label of the backdrop close button. */
-		closeLabel?: string;
 		class?: string;
 		children: Snippet;
 	}
 
-	let {
-		open,
-		onclose,
-		labelledby,
-		closeLabel = 'Zavřít',
-		class: className = '',
-		children
-	}: Props = $props();
+	// closeLabel zanikl s přestavbou pozadí na nefokusovatelnou vrstvu
+	// (přístupnost EAA) — zavírá Escape, klik vedle, nebo viditelné tlačítko
+	// v obsahu. Konzument, který prop dál posílá, nic nerozbije (ignoruje se).
+	let { open, onclose, labelledby, class: className = '', children }: Props = $props();
 
 	let panel: HTMLElement | undefined = $state();
 
 	$effect(() => {
 		if (!open) return;
+		// Přístupnost překryvu (EAA): fokus se po zavření vrací na prvek,
+		// který overlay otevřel, a Tab cyklí uvnitř panelu (trapFocus).
+		const restore = rememberFocus();
 		const unlock = lockScroll();
 		panel?.focus();
+		const untrap = panel ? trapFocus(panel) : () => {};
 		const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onclose();
 		window.addEventListener('keydown', onKey);
 		return () => {
 			unlock();
+			untrap();
 			window.removeEventListener('keydown', onKey);
+			restore();
 		};
 	});
 </script>
 
 {#if open}
-	<!-- z-scale contract: site header sits at z-1100; overlay primitives (this,
-	     Drawer) go above it at z-[1200]; Toaster tops everything at z-[1500]. -->
-	<div use:portal class="fixed inset-0 z-[1200]">
-		<button
-			type="button"
-			aria-label={closeLabel}
-			class="absolute inset-0 bg-black/40"
-			transition:fade={{ duration: 150 }}
+	<!-- Škála vrstev (jelinek.css :root): hlavička --z-header (50); překryvy
+	     (tento, Drawer) nad ní na --z-overlay (1200); toasty --z-toast (1500)
+	     úplně nahoře. -->
+	<!-- SJEDNOCENO S DRAWEREM (majitel, 14. 8. 2026): stejné ztmavení stránky
+	     o 50 %, stejný neprůhledný bílý panel (--bg-white, v tmavém tmavý)
+	     s jemnou hranou border-subtle, stejný pohyb na 0,2 s a stejné chování
+	     — Esc, klik na pozadí, zamčený scroll. Jedna vrstva, dva tvary. -->
+	<div use:portal class="fixed inset-0 z-(--z-overlay)">
+		<!-- Pozadí je čistě myší zkratka pro zavření — NENÍ v tab pořadí
+		     (dřív to byl <button> a neviditelné celoobrazovkové tlačítko bylo
+		     první zastávkou tabulátoru). Klávesnice zavírá Escapem, čtečky
+		     mají viditelné zavírací tlačítko v obsahu. -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div
+			data-overlay-backdrop
+			aria-hidden="true"
+			class="absolute inset-0 bg-[var(--overlay-scrim)] [-webkit-backdrop-filter:var(--overlay-filter)] [backdrop-filter:var(--overlay-filter)]"
+			transition:fade={{ duration: 200 }}
 			onclick={onclose}
-		></button>
+		></div>
 		<div
 			bind:this={panel}
 			tabindex="-1"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby={labelledby}
-			class="rounded-card bg-surface shadow-interactive absolute inset-0 m-auto h-fit max-h-[90dvh] w-fit max-w-[92vw] outline-none {className}"
+			class="rounded-card border border-border-subtle bg-surface font-secondary font-light shadow-resting absolute inset-0 m-auto h-fit max-h-[90dvh] w-fit max-w-[92vw] outline-none {className}"
 			transition:fade={{ duration: 200 }}
 		>
 			{@render children()}

package/dist/components/commerce/Modal.svelte.d.ts

@@ -3,8 +3,6 @@ interface Props {
     open: boolean;
     onclose: () => void;
     labelledby?: string;
-    /** Accessible label of the backdrop close button. */
-    closeLabel?: string;
     class?: string;
     children: Snippet;
 }

package/dist/components/commerce/OrderSummary.svelte

@@ -48,7 +48,7 @@
 	});
 </script>
 
-<div class="space-y-2 text-(length:--step-down1)">
+<div class="space-y-2 font-secondary font-light text-(length:--step-down1)">
 	<div class="flex justify-between">
 		<span class="text-fg-muted1">{l.itemsTotal}</span>
 		<span class="text-fg">{formatMoney(itemsTotal, currency)}</span>

package/dist/components/commerce/Pagination.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		/** Aktuální stránka (od 1). */
+		page: number;
+		/** Celkový počet stránek. */
+		count: number;
+		/** Zavolá se s číslem cílové stránky. */
+		onchange?: (page: number) => void;
+		/** Když je zadané, čísla se vykreslí jako odkazy (lepší pro SEO výpisů). */
+		href?: (page: number) => string;
+		class?: string;
+	}
+
+	let { page, count, onchange, href, class: className }: Props = $props();
+
+	// Window: always page 1 and the last page, the current page with one
+	// neighbour each side, ellipsis for the gaps. Seven slots at most, so the
+	// row never wraps awkwardly on a phone.
+	const items = $derived.by((): Array<number | '…'> => {
+		if (count <= 7) return Array.from({ length: count }, (_, i) => i + 1);
+		const middle = [page - 1, page, page + 1].filter((n) => n > 1 && n < count);
+		const out: Array<number | '…'> = [1];
+		if ((middle[0] ?? count) > 2) out.push('…');
+		out.push(...middle);
+		if ((middle[middle.length - 1] ?? 1) < count - 1) out.push('…');
+		out.push(count);
+		return out;
+	});
+
+	// 44px targets like the demo's gallery arrows; resting border-fg-muted2 /
+	// hover black follows the neutral-emphasis rule (colour is for errors).
+	// The current page is a filled JELINEK-BLACK square — same emphasis
+	// language as the active form frame, flips to light in dark mode for free.
+	const CELL =
+		'inline-flex h-11 min-w-11 items-center justify-center rounded-button border px-1 ' +
+		'font-secondary text-[0.98rem] text-fg [font-variant-numeric:tabular-nums] ' +
+		'transition-colors duration-[var(--dur-base)] ease-[var(--ease)]';
+	const IDLE = 'cursor-pointer border-fg-muted2 bg-surface hover:border-jelinek-black';
+	const CURRENT = 'border-jelinek-black bg-jelinek-black font-bold text-fg-inverse';
+	const ARROW_DISABLED = 'cursor-not-allowed border-border-subtle text-fg-muted2';
+
+	const go = (n: number) => {
+		if (n >= 1 && n <= count && n !== page) onchange?.(n);
+	};
+</script>
+
+{#snippet chevron(dir: 'prev' | 'next')}
+	<svg
+		viewBox="0 0 24 24"
+		class="size-4"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d={dir === 'prev' ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'} />
+	</svg>
+{/snippet}
+
+<nav aria-label="Stránkování" class={cn('flex flex-wrap items-center gap-2', className)}>
+	{#if href && page > 1}
+		<a href={href(page - 1)} aria-label="Předchozí stránka" class="{CELL} {IDLE}">
+			{@render chevron('prev')}
+		</a>
+	{:else}
+		<button
+			type="button"
+			aria-label="Předchozí stránka"
+			disabled={page <= 1}
+			class={cn(CELL, page <= 1 ? ARROW_DISABLED : IDLE)}
+			onclick={() => go(page - 1)}
+		>
+			{@render chevron('prev')}
+		</button>
+	{/if}
+
+	{#each items as item, i (typeof item === 'number' ? item : `gap-${i}`)}
+		{#if item === '…'}
+			<span aria-hidden="true" class="px-1 font-secondary text-fg-muted1">…</span>
+		{:else if item === page}
+			<!-- The current page is not a control — nothing to click, just where
+			     you are. aria-current still names it for assistive tech. -->
+			<span aria-current="page" class="{CELL} {CURRENT}">{item}</span>
+		{:else if href}
+			<a href={href(item)} aria-label="Stránka {item}" class="{CELL} {IDLE}">{item}</a>
+		{:else}
+			<button
+				type="button"
+				aria-label="Stránka {item}"
+				class="{CELL} {IDLE}"
+				onclick={() => go(item)}>{item}</button
+			>
+		{/if}
+	{/each}
+
+	{#if href && page < count}
+		<a href={href(page + 1)} aria-label="Další stránka" class="{CELL} {IDLE}">
+			{@render chevron('next')}
+		</a>
+	{:else}
+		<button
+			type="button"
+			aria-label="Další stránka"
+			disabled={page >= count}
+			class={cn(CELL, page >= count ? ARROW_DISABLED : IDLE)}
+			onclick={() => go(page + 1)}
+		>
+			{@render chevron('next')}
+		</button>
+	{/if}
+</nav>

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

@@ -0,0 +1,14 @@
+interface Props {
+    /** Aktuální stránka (od 1). */
+    page: number;
+    /** Celkový počet stránek. */
+    count: number;
+    /** Zavolá se s číslem cílové stránky. */
+    onchange?: (page: number) => void;
+    /** Když je zadané, čísla se vykreslí jako odkazy (lepší pro SEO výpisů). */
+    href?: (page: number) => string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/commerce/PriceDisplay.svelte

@@ -29,13 +29,13 @@
 	};
 </script>
 
-<span class="inline-flex items-baseline gap-2 font-bold {sizes[size]}">
+<span class="inline-flex items-baseline gap-2 font-secondary font-bold {sizes[size]}">
 	{#if from}<span
-			class="text-fg-muted1 text-(length:--step-down2) font-normal tracking-wide uppercase"
+			class="text-fg-muted1 text-(length:--step-down2) font-light tracking-wide uppercase"
 			>{fromLabel}</span
 		>{/if}
 	<span>{formatPrice(price, currency)}</span>
 	{#if originalPrice && originalPrice > price}
-		<s class="text-fg-muted2 text-[0.7em] font-normal">{formatPrice(originalPrice, currency)}</s>
+		<s class="text-fg-muted2 text-[0.7em] font-light">{formatPrice(originalPrice, currency)}</s>
 	{/if}
 </span>

package/dist/components/commerce/ProductHeader.svelte

@@ -42,8 +42,8 @@
 	}: Props = $props();
 </script>
 
-<div class="flex flex-col gap-3">
-	<h1 class="text-(length:--step5) leading-tight font-bold">{name}</h1>
+<div class="flex flex-col gap-3 font-secondary font-light">
+	<h1 class="text-(length:--step6) leading-tight font-bold">{name}</h1>
 	{#if subtitle}<p class="text-fg-muted1 text-(length:--step1)">{subtitle}</p>{/if}
 	{#if rating && rating.count > 0}
 		<RatingStars rating={rating.value} count={rating.count} />

package/dist/components/commerce/QuantityStepper.svelte

@@ -21,7 +21,7 @@
 	}: Props = $props();
 </script>
 
-<div class="rounded-button border-border-subtle inline-flex items-center border">
+<div class="rounded-button border-border-subtle inline-flex items-center border font-secondary">
 	<button
 		type="button"
 		aria-label={decreaseLabel}

package/dist/components/commerce/RatingStars.svelte

@@ -33,7 +33,7 @@
 			/>
 		</svg>
 	{/each}
-	{#if count !== undefined}<span class="text-fg-muted1 text-(length:--step-down1) ml-1"
+	{#if count !== undefined}<span class="text-fg-muted1 font-secondary font-light text-(length:--step-down1) ml-1"
 			>({count})</span
 		>{/if}
 </span>