@jelinek/ui 0.5.3 → 0.9.1

package/dist/components/commerce/FreeShippingBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { formatMoney } from './money.js';
+
+	interface Props {
+		threshold: number;
+		remaining: number;
+		qualified: boolean;
+		currency?: string;
+		qualifiedLabel?: string;
+		/** Builds the „zbývá X do dopravy zdarma“ line from the formatted amount. */
+		remainingLabel?: (amount: string) => string;
+	}
+
+	let {
+		threshold,
+		remaining,
+		qualified,
+		currency,
+		qualifiedLabel = 'Máte dopravu zdarma',
+		remainingLabel = (amount) => `Do dopravy zdarma zbývá ${amount}`
+	}: Props = $props();
+
+	// Guards the division below: a misconfigured (or not-yet-loaded) threshold
+	// of 0 would otherwise divide by zero. Treated as "already qualified" —
+	// nothing more to progress toward.
+	let pct = $derived(
+		threshold > 0 ? Math.min(100, Math.round(((threshold - remaining) / threshold) * 100)) : 100
+	);
+</script>
+
+<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"
+			class="size-4 shrink-0 {qualified ? 'text-(--sem-success-strong)' : 'text-fg-muted1'}"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+			><path d="M14 17h-9v-11h9zM14 9h4l3 3v5h-7" /><circle cx="7.5" cy="17.5" r="1.5" /><circle
+				cx="16.5"
+				cy="17.5"
+				r="1.5"
+			/></svg
+		>
+		{#if qualified}
+			<span>{qualifiedLabel}</span>
+		{:else}
+			<span>{remainingLabel(formatMoney(remaining, currency))}</span>
+		{/if}
+	</p>
+	<div class="rounded-pill bg-surface-gray h-2 w-full overflow-hidden">
+		<!-- bg-(--JELINEK-BROWN) rather than an accent alias utility: this token
+		     is the one a division re-theme (the mattress/magenta swap) actually
+		     overrides at :root, so the fill tracks the division. -->
+		<div
+			class="rounded-pill h-full bg-(--JELINEK-BROWN) transition-all duration-500"
+			style="width: {qualified ? 100 : pct}%"
+		></div>
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    threshold: number;
+    remaining: number;
+    qualified: boolean;
+    currency?: string;
+    qualifiedLabel?: string;
+    /** Builds the „zbývá X do dopravy zdarma“ line from the formatted amount. */
+    remainingLabel?: (amount: string) => string;
+}
+declare const FreeShippingBar: import("svelte").Component<Props, {}, "">;
+type FreeShippingBar = ReturnType<typeof FreeShippingBar>;
+export default FreeShippingBar;

package/dist/components/commerce/Gallery.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+	// PDP image mosaic + lightbox. Mechanics (keyboard nav, touch swipe, counter)
+	// originate in matrace-fe's Product/Gallery.svelte, rebuilt on the kit's own
+	// Modal — Modal already owns Esc/backdrop-click/scroll-lock/focus, so this
+	// component only adds prev/next + swipe + counter.
+	import type { Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+
+	interface Props {
+		images: { src: string; full: string; alt: string }[];
+		/**
+		 * Rendered over the hero tile's bottom edge from lg up — the store puts
+		 * its TrustBadges strip here. A snippet, not a baked-in child: the kit
+		 * doesn't decide what earns a place on the photo.
+		 */
+		badge?: Snippet;
+		/** Localized texts; Czech defaults. */
+		labels?: {
+			close?: string;
+			previous?: string;
+			next?: string;
+			/** Lightbox position, e.g. „3 / 8“. */
+			counter?: (index: number, total: number) => string;
+			/** Overflow tile, e.g. „+4 fotky“. */
+			more?: (count: number) => string;
+		};
+	}
+
+	let { images, badge, labels }: Props = $props();
+
+	const closeLabel = $derived(labels?.close ?? 'Zavřít');
+	const prevLabel = $derived(labels?.previous ?? 'Předchozí fotka');
+	const nextLabel = $derived(labels?.next ?? 'Další fotka');
+	const counterLabel = $derived(labels?.counter ?? ((i: number, t: number) => `${i} / ${t}`));
+	const moreLabel = $derived(labels?.more ?? ((n: number) => `+${n}`));
+
+	const VISIBLE_TILES = 4;
+	let visibleImages = $derived(images.slice(0, VISIBLE_TILES));
+	let hiddenCount = $derived(Math.max(0, images.length - VISIBLE_TILES));
+
+	let lightboxOpen = $state(false);
+	let lightboxIndex = $state(0);
+
+	function openLightbox(index: number) {
+		lightboxIndex = index;
+		lightboxOpen = true;
+	}
+
+	function closeLightbox() {
+		lightboxOpen = false;
+	}
+
+	function prev() {
+		lightboxIndex = (lightboxIndex - 1 + images.length) % images.length;
+	}
+
+	function next() {
+		lightboxIndex = (lightboxIndex + 1) % images.length;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!lightboxOpen) return;
+		if (e.key === 'ArrowLeft') prev();
+		if (e.key === 'ArrowRight') next();
+	}
+
+	// Swipe support — 50px threshold, same as matrace-fe.
+	let touchStartX = 0;
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStartX = e.changedTouches[0].screenX;
+	}
+
+	function handleTouchEnd(e: TouchEvent) {
+		const delta = e.changedTouches[0].screenX - touchStartX;
+		const threshold = 50;
+		if (delta < -threshold) next();
+		if (delta > threshold) prev();
+	}
+
+	// Display utility (grid / hidden md:grid) is applied per-usage below, never
+	// here — keeping it out of the shared string avoids two display utilities
+	// landing on the same class list.
+	const navButtonClass =
+		'size-10 place-items-center rounded-pill bg-(--glass-fill) text-fg backdrop-blur-[25px] transition-opacity hover:opacity-80';
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if images.length > 0}
+	<div class="grid grid-cols-2 gap-2.5">
+		{#each visibleImages as image, i (image.src)}
+			{#if i === 0}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative col-span-2 aspect-video overflow-hidden"
+					onclick={() => openLightbox(0)}
+					aria-label={image.alt}
+				>
+					<img
+						src={image.src}
+						alt={image.alt}
+						loading="eager"
+						class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+					/>
+					{#if badge}
+						<div class="pointer-events-none absolute inset-0 hidden lg:block" aria-hidden="true">
+							{@render badge()}
+						</div>
+					{/if}
+				</button>
+			{:else if i === visibleImages.length - 1 && hiddenCount > 0}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative aspect-[5/3] overflow-hidden"
+					onclick={() => openLightbox(i)}
+					aria-label={`${image.alt} — ${moreLabel(hiddenCount)}`}
+				>
+					<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-secondary font-medium text-fg backdrop-blur-[25px]"
+					>
+						{moreLabel(hiddenCount)}
+					</div>
+				</button>
+			{:else}
+				<button
+					type="button"
+					class="group rounded-image bg-surface-gray relative aspect-[5/3] overflow-hidden"
+					onclick={() => openLightbox(i)}
+					aria-label={image.alt}
+				>
+					<img
+						src={image.src}
+						alt={image.alt}
+						loading="lazy"
+						class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+					/>
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<!-- 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"
+		aria-label={counterLabel(lightboxIndex + 1, images.length)}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+	>
+		<button
+			type="button"
+			class="grid {navButtonClass} absolute top-2 right-2 z-10"
+			onclick={closeLightbox}
+			aria-label={closeLabel}
+		>
+			<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+		</button>
+
+		{#if images[lightboxIndex]}
+			<img
+				src={images[lightboxIndex].full}
+				alt={images[lightboxIndex].alt}
+				class="rounded-image max-h-[70dvh] max-w-full object-contain"
+			/>
+		{/if}
+
+		<div class="flex items-center gap-4">
+			<button
+				type="button"
+				class="hidden md:grid {navButtonClass}"
+				onclick={prev}
+				aria-label={prevLabel}
+			>
+				<svg viewBox="0 0 24 24" class="size-5" 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>
+			<p aria-live="polite" class="text-fg-muted1 min-w-16 text-center tabular-nums">
+				{counterLabel(lightboxIndex + 1, images.length)}
+			</p>
+			<button
+				type="button"
+				class="hidden md:grid {navButtonClass}"
+				onclick={next}
+				aria-label={nextLabel}
+			>
+				<svg viewBox="0 0 24 24" class="size-5" 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>
+		</div>
+	</div>
+</Modal>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    images: {
+        src: string;
+        full: string;
+        alt: string;
+    }[];
+    /**
+     * Rendered over the hero tile's bottom edge from lg up — the store puts
+     * its TrustBadges strip here. A snippet, not a baked-in child: the kit
+     * doesn't decide what earns a place on the photo.
+     */
+    badge?: Snippet;
+    /** Localized texts; Czech defaults. */
+    labels?: {
+        close?: string;
+        previous?: string;
+        next?: string;
+        /** Lightbox position, e.g. „3 / 8“. */
+        counter?: (index: number, total: number) => string;
+        /** Overflow tile, e.g. „+4 fotky“. */
+        more?: (count: number) => string;
+    };
+}
+declare const Gallery: import("svelte").Component<Props, {}, "">;
+type Gallery = ReturnType<typeof Gallery>;
+export default Gallery;

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { portal, lockScroll, trapFocus, rememberFocus } from './overlay.js';
+
+	interface Props {
+		open: boolean;
+		onclose: () => void;
+		labelledby?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	// 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}
+	<!-- Š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}
+		></div>
+		<div
+			bind:this={panel}
+			tabindex="-1"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby={labelledby}
+			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()}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    onclose: () => void;
+    labelledby?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/commerce/OrderSummary.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { formatMoney } from './money.js';
+
+	interface Props {
+		currency?: string;
+		itemsTotal: number;
+		discount?: number;
+		shipping?: number;
+		/** Extra fees total (dobírka, výnos…); 0 hides the row. */
+		surcharges?: number;
+		grand: number;
+		/** Deposit due now; 0 hides the highlighted row. */
+		deposit?: number;
+		shippingFree?: boolean;
+		labels?: {
+			itemsTotal?: string;
+			discount?: string;
+			shipping?: string;
+			free?: string;
+			surcharges?: string;
+			grandTotal?: string;
+			depositDue?: string;
+			vatIncluded?: string;
+		};
+	}
+
+	let {
+		currency,
+		itemsTotal,
+		discount = 0,
+		shipping = 0,
+		surcharges = 0,
+		grand,
+		deposit = 0,
+		shippingFree = false,
+		labels
+	}: Props = $props();
+
+	const l = $derived({
+		itemsTotal: labels?.itemsTotal ?? 'Zboží celkem',
+		discount: labels?.discount ?? 'Sleva',
+		shipping: labels?.shipping ?? 'Doprava',
+		free: labels?.free ?? 'Zdarma',
+		surcharges: labels?.surcharges ?? 'Příplatky',
+		grandTotal: labels?.grandTotal ?? 'Celkem',
+		depositDue: labels?.depositDue ?? 'Záloha nyní',
+		vatIncluded: labels?.vatIncluded ?? 'Ceny včetně DPH'
+	});
+</script>
+
+<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>
+	</div>
+	{#if discount > 0}
+		<div class="text-(--color-accent-text) flex justify-between">
+			<span>{l.discount}</span>
+			<span>−{formatMoney(discount, currency)}</span>
+		</div>
+	{/if}
+	<div class="flex justify-between">
+		<span class="text-fg-muted1">{l.shipping}</span>
+		<span class="text-fg">
+			{shippingFree || shipping === 0 ? l.free : formatMoney(shipping, currency)}
+		</span>
+	</div>
+	{#if surcharges > 0}
+		<div class="flex justify-between">
+			<span class="text-fg-muted1">{l.surcharges}</span>
+			<span class="text-fg">{formatMoney(surcharges, currency)}</span>
+		</div>
+	{/if}
+	<div class="border-border-subtle flex items-baseline justify-between border-t pt-2">
+		<span class="text-(length:--step0) font-bold text-fg">{l.grandTotal}</span>
+		<span class="text-(length:--step4) font-bold text-fg">{formatMoney(grand, currency)}</span>
+	</div>
+	{#if deposit > 0}
+		<div class="rounded-card bg-sem-warning flex justify-between px-2.5 py-1.5 text-fg">
+			<span>{l.depositDue}</span>
+			<span class="font-bold">{formatMoney(deposit, currency)}</span>
+		</div>
+	{/if}
+	<p class="text-fg-muted2 pt-1 text-(length:--step-down2)">{l.vatIncluded}</p>
+</div>

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

@@ -0,0 +1,25 @@
+interface Props {
+    currency?: string;
+    itemsTotal: number;
+    discount?: number;
+    shipping?: number;
+    /** Extra fees total (dobírka, výnos…); 0 hides the row. */
+    surcharges?: number;
+    grand: number;
+    /** Deposit due now; 0 hides the highlighted row. */
+    deposit?: number;
+    shippingFree?: boolean;
+    labels?: {
+        itemsTotal?: string;
+        discount?: string;
+        shipping?: string;
+        free?: string;
+        surcharges?: string;
+        grandTotal?: string;
+        depositDue?: string;
+        vatIncluded?: string;
+    };
+}
+declare const OrderSummary: import("svelte").Component<Props, {}, "">;
+type OrderSummary = ReturnType<typeof OrderSummary>;
+export default OrderSummary;