@jelinek/ui 0.5.3 → 0.9.1

package/dist/components/commerce/CartDrawer.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	// The whole cart drawer, composed from kit parts (Drawer + CartLineItem +
+	// FreeShippingBar). Purely presentational: the app owns the cart store and
+	// maps it onto these props; navigation targets come in as hrefs.
+	import Button from '../Button.svelte';
+	import CartLineItem from './CartLineItem.svelte';
+	import Drawer from './Drawer.svelte';
+	import FreeShippingBar from './FreeShippingBar.svelte';
+	import { formatMoney } from './money.js';
+	import type { CartLine } from './cart-types.js';
+
+	interface Props {
+		open: boolean;
+		onclose: () => void;
+		items: CartLine[];
+		/** Item count shown next to the title. */
+		count: number;
+		currency?: string;
+		/** Items total minus discounts — the number above the CTA. */
+		subtotal: number;
+		checkoutHref: string;
+		viewCartHref?: string;
+		/** Disables steppers/remove while a cart mutation is in flight. */
+		disabled?: boolean;
+		onQuantity: (id: CartLine['id'], quantity: number) => void;
+		onRemove: (id: CartLine['id']) => void;
+		/** Free-shipping progress; omit to hide the bar. */
+		shipping?: { threshold: number; remaining: number; qualified: boolean };
+		labels?: {
+			title?: string;
+			close?: string;
+			empty?: string;
+			subtotal?: string;
+			checkout?: string;
+			viewCart?: string;
+			remove?: string;
+			decrease?: string;
+			increase?: string;
+		};
+	}
+
+	let {
+		open,
+		onclose,
+		items,
+		count,
+		currency,
+		subtotal,
+		checkoutHref,
+		viewCartHref,
+		disabled = false,
+		onQuantity,
+		onRemove,
+		shipping,
+		labels
+	}: Props = $props();
+
+	const title = $derived(labels?.title ?? 'Košík');
+	const closeLabel = $derived(labels?.close ?? 'Zavřít');
+	const emptyLabel = $derived(labels?.empty ?? 'Košík je prázdný');
+	const subtotalLabel = $derived(labels?.subtotal ?? 'Mezisoučet');
+	const checkoutLabel = $derived(labels?.checkout ?? 'K pokladně');
+	const viewCartLabel = $derived(labels?.viewCart ?? 'Zobrazit košík');
+</script>
+
+<Drawer {open} {onclose} side="right" labelledby="cart-drawer-title">
+	<!-- Bez vodorovných linek (majitel 14. 8. 2026) — hlavičku a patičku
+	     odděluje jen vzduch. -->
+	<header class="flex items-center justify-between px-5 py-4">
+		<h2 id="cart-drawer-title" class="font-primary text-(length:--step1) font-bold text-fg">
+			{title} ({count})
+		</h2>
+		<button
+			type="button"
+			class="rounded-button hover:bg-surface-gray flex items-center justify-center p-2 text-fg transition-colors"
+			aria-label={closeLabel}
+			onclick={onclose}
+		>
+			<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>
+	</header>
+
+	<div class="flex-1 overflow-y-auto px-5">
+		{#if items.length === 0}
+			<p class="text-fg-muted1 py-10 text-center">{emptyLabel}</p>
+		{:else}
+			{#if shipping}
+				<div class="py-4">
+					<FreeShippingBar
+						threshold={shipping.threshold}
+						remaining={shipping.remaining}
+						qualified={shipping.qualified}
+						{currency}
+					/>
+				</div>
+			{/if}
+			<!-- Řádky odděluje jen vzduch — žádné vodorovné linky (majitel 14. 8. 2026). -->
+			<div class="flex flex-col gap-1">
+				{#each items as item (item.id)}
+					<CartLineItem
+						{item}
+						{currency}
+						{disabled}
+						{onQuantity}
+						{onRemove}
+						removeLabel={labels?.remove}
+						decreaseLabel={labels?.decrease}
+						increaseLabel={labels?.increase}
+					/>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if items.length > 0}
+		<footer class="px-5 py-4">
+			<div class="mb-3 flex items-center justify-between text-(length:--step0) font-bold text-fg">
+				<span>{subtotalLabel}</span>
+				<span>{formatMoney(subtotal, currency)}</span>
+			</div>
+			<Button color="brown" fullWidth href={checkoutHref} onclick={onclose} class="mb-2">
+				{checkoutLabel}
+			</Button>
+			{#if viewCartHref}
+				<Button variant="ghost" color="brown" fullWidth href={viewCartHref} onclick={onclose}>
+					{viewCartLabel}
+				</Button>
+			{/if}
+		</footer>
+	{/if}
+</Drawer>

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

@@ -0,0 +1,37 @@
+import type { CartLine } from './cart-types.js';
+interface Props {
+    open: boolean;
+    onclose: () => void;
+    items: CartLine[];
+    /** Item count shown next to the title. */
+    count: number;
+    currency?: string;
+    /** Items total minus discounts — the number above the CTA. */
+    subtotal: number;
+    checkoutHref: string;
+    viewCartHref?: string;
+    /** Disables steppers/remove while a cart mutation is in flight. */
+    disabled?: boolean;
+    onQuantity: (id: CartLine['id'], quantity: number) => void;
+    onRemove: (id: CartLine['id']) => void;
+    /** Free-shipping progress; omit to hide the bar. */
+    shipping?: {
+        threshold: number;
+        remaining: number;
+        qualified: boolean;
+    };
+    labels?: {
+        title?: string;
+        close?: string;
+        empty?: string;
+        subtotal?: string;
+        checkout?: string;
+        viewCart?: string;
+        remove?: string;
+        decrease?: string;
+        increase?: string;
+    };
+}
+declare const CartDrawer: import("svelte").Component<Props, {}, "">;
+type CartDrawer = ReturnType<typeof CartDrawer>;
+export default CartDrawer;

package/dist/components/commerce/CartLineItem.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import QuantityStepper from './QuantityStepper.svelte';
+	import { formatMoney } from './money.js';
+	import type { CartLine } from './cart-types.js';
+
+	interface Props {
+		item: CartLine;
+		currency?: string;
+		disabled?: boolean;
+		onQuantity: (id: CartLine['id'], quantity: number) => void;
+		onRemove: (id: CartLine['id']) => void;
+		removeLabel?: string;
+		decreaseLabel?: string;
+		increaseLabel?: string;
+	}
+
+	let {
+		item,
+		currency,
+		disabled = false,
+		onQuantity,
+		onRemove,
+		removeLabel = 'Odebrat z košíku',
+		decreaseLabel,
+		increaseLabel
+	}: Props = $props();
+</script>
+
+<div class="flex gap-3 py-4 font-secondary font-light">
+	<div class="rounded-image bg-surface-gray h-20 w-20 shrink-0 overflow-hidden">
+		{#if item.imageUrl}
+			<img src={item.imageUrl} alt={item.productName} class="h-full w-full object-cover" />
+		{/if}
+	</div>
+
+	<div class="flex min-w-0 flex-1 flex-col">
+		<div class="flex items-start justify-between gap-2">
+			<p class="font-medium text-fg">{item.productName}</p>
+			<p class="shrink-0 font-bold text-fg">
+				{formatMoney(item.lineTotal, currency)}
+			</p>
+		</div>
+		{#if item.configSummary}
+			<p class="text-fg-muted1 mt-0.5 text-(length:--step-down2)">{item.configSummary}</p>
+		{/if}
+
+		<div class="mt-auto flex items-center justify-between pt-2">
+			<QuantityStepper
+				value={item.quantity}
+				min={1}
+				{disabled}
+				onchange={(quantity) => onQuantity(item.id, quantity)}
+				{decreaseLabel}
+				{increaseLabel}
+			/>
+			<button
+				type="button"
+				class="rounded-button text-fg-muted1 hover:text-(--sem-error-strong) flex items-center justify-center p-1.5 transition-colors disabled:opacity-40"
+				aria-label={removeLabel}
+				{disabled}
+				onclick={() => onRemove(item.id)}
+			>
+				<svg viewBox="0 0 24 24" class="size-[17px]" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" /></svg>
+			</button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,14 @@
+import type { CartLine } from './cart-types.js';
+interface Props {
+    item: CartLine;
+    currency?: string;
+    disabled?: boolean;
+    onQuantity: (id: CartLine['id'], quantity: number) => void;
+    onRemove: (id: CartLine['id']) => void;
+    removeLabel?: string;
+    decreaseLabel?: string;
+    increaseLabel?: string;
+}
+declare const CartLineItem: import("svelte").Component<Props, {}, "">;
+type CartLineItem = ReturnType<typeof CartLineItem>;
+export default CartLineItem;

package/dist/components/commerce/CheckoutProgress.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	interface Props {
+		/** 1-based current step. */
+		step: number;
+		/** Step captions in order; length defines the step count. */
+		steps?: string[];
+		/** Called with the step number when a completed step is clicked. */
+		onStep?: (step: number) => void;
+	}
+
+	let { step, steps = ['Rekapitulace', 'Doprava', 'Platba'], onStep }: Props = $props();
+</script>
+
+<ol class="flex items-center justify-center gap-2 font-secondary font-light sm:gap-4">
+	{#each steps as label, i (i)}
+		{@const n = i + 1}
+		<li class="flex items-center gap-2">
+			<button
+				type="button"
+				disabled={n >= step}
+				class="flex items-center gap-2 {n > step ? 'opacity-50' : ''}"
+				onclick={() => n < step && onStep?.(n)}
+			>
+				<span
+					class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-(length:--step-down1) font-bold {n <
+					step
+						? 'bg-(--JELINEK-BROWN) text-fg-inverse'
+						: n === step
+							? 'border-2 border-(--JELINEK-BROWN) text-(--color-accent-text)'
+							: 'bg-surface-gray text-fg-muted2'}"
+				>
+					{#if n < step}
+						<svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 13 4 4L19 7" /></svg>
+					{:else}
+						{n}
+					{/if}
+				</span>
+				<span
+					class="text-(length:--step-down1) font-medium max-sm:hidden {n === step
+						? 'text-fg'
+						: 'text-fg-muted1'}">{label}</span
+				>
+			</button>
+			{#if n < steps.length}
+				<span class="bg-border-subtle h-px w-6 sm:w-10"></span>
+			{/if}
+		</li>
+	{/each}
+</ol>

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

@@ -0,0 +1,11 @@
+interface Props {
+    /** 1-based current step. */
+    step: number;
+    /** Step captions in order; length defines the step count. */
+    steps?: string[];
+    /** Called with the step number when a completed step is clicked. */
+    onStep?: (step: number) => void;
+}
+declare const CheckoutProgress: import("svelte").Component<Props, {}, "">;
+type CheckoutProgress = ReturnType<typeof CheckoutProgress>;
+export default CheckoutProgress;

package/dist/components/commerce/ConfigSection.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	// Numbered configurator section („1. Šířka“, „2. Tuhost“…) — the numbering
+	// pattern matrace-fe's configurator established for guiding the shopper
+	// through a long decision list.
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		number: number;
+		title: string;
+		/** One-line helper under the heading. */
+		hint?: string;
+		children: Snippet;
+	}
+
+	let { number, title, hint, children }: Props = $props();
+</script>
+
+<section class="py-6 font-secondary font-light">
+	<h3 class="flex items-baseline gap-3 text-(length:--step4) font-bold">
+		<span class="text-(--color-accent-text)">{number}.</span>{title}
+	</h3>
+	{#if hint}<p class="text-fg-muted1 mt-1 text-(length:--step-down1)">{hint}</p>{/if}
+	<div class="mt-4">{@render children()}</div>
+</section>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    number: number;
+    title: string;
+    /** One-line helper under the heading. */
+    hint?: string;
+    children: Snippet;
+}
+declare const ConfigSection: import("svelte").Component<Props, {}, "">;
+type ConfigSection = ReturnType<typeof ConfigSection>;
+export default ConfigSection;

package/dist/components/commerce/DimensionSlider.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	// Custom-dimension picker (matrace-fe's DimensionSlider, restyled to kit
+	// tokens): a range slider synced with a stepper number input, plus the
+	// price delta the chosen dimension costs.
+	import { formatPrice } from './money.js';
+
+	interface Props {
+		value: number;
+		min: number;
+		max: number;
+		step?: number;
+		/** Dimension name shown next to the input („Šířka“). */
+		label: string;
+		/** Price delta of the current value in CZK; 0 hides the tag. */
+		surcharge?: number;
+		/** One-line note above the slider („Atypický rozměr vyrábíme na míru“). */
+		note?: string | null;
+		/** Unit shown after the number input. */
+		unit?: string;
+		currency?: string;
+	}
+
+	let {
+		value = $bindable(),
+		min,
+		max,
+		step = 1,
+		label,
+		surcharge = 0,
+		note = null,
+		unit = 'cm',
+		currency
+	}: Props = $props();
+
+	function update(val: number) {
+		value = Math.max(min, Math.min(max, val));
+	}
+
+	const stepButton =
+		'text-fg hover:bg-surface-gray flex cursor-pointer items-center justify-center rounded border-none bg-transparent px-1.5 text-xl leading-none font-medium transition-colors duration-200 select-none';
+</script>
+
+<div
+	class="bg-surface border-border-subtle rounded-card mt-2 flex flex-col gap-2 border font-secondary font-light pt-5 pr-4 pb-4 pl-4"
+>
+	{#if note}
+		<div class="text-fg-muted1 mb-1 text-(length:--step-down2) font-medium">{note}</div>
+	{/if}
+	<input
+		type="range"
+		{min}
+		{max}
+		{step}
+		bind:value
+		oninput={() => update(value)}
+		aria-label={label}
+		class="w-full cursor-pointer border-none bg-transparent outline-none accent-(--JELINEK-BROWN)"
+	/>
+	<div
+		class="flex items-center justify-between text-[0.95rem] max-sm:flex-col max-sm:items-start max-sm:gap-1"
+	>
+		<div class="flex items-center gap-2">
+			<span>{label}:</span>
+			<div
+				class="bg-surface border-border-subtle rounded-button flex items-center gap-1 border px-2 py-1 transition-colors focus-within:border-(--JELINEK-BROWN)"
+			>
+				<button type="button" class={stepButton} onclick={() => update(value - step)}>−</button>
+				<input
+					type="number"
+					bind:value
+					{min}
+					{max}
+					oninput={() => update(value)}
+					aria-label={label}
+					class="w-[50px] border-none p-0 font-bold text-fg outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+				/>
+				<span class="text-fg-muted1 text-(length:--step-down1) font-medium">{unit}</span>
+			</div>
+		</div>
+		{#if surcharge !== 0}
+			<span class="text-(--color-accent-text) text-(length:--step-down1) font-bold">
+				{surcharge > 0 ? '+' : '−'}{formatPrice(Math.abs(surcharge), currency)}
+			</span>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+interface Props {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    /** Dimension name shown next to the input („Šířka“). */
+    label: string;
+    /** Price delta of the current value in CZK; 0 hides the tag. */
+    surcharge?: number;
+    /** One-line note above the slider („Atypický rozměr vyrábíme na míru“). */
+    note?: string | null;
+    /** Unit shown after the number input. */
+    unit?: string;
+    currency?: string;
+}
+declare const DimensionSlider: import("svelte").Component<Props, {}, "value">;
+type DimensionSlider = ReturnType<typeof DimensionSlider>;
+export default DimensionSlider;

package/dist/components/commerce/Drawer.svelte

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

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

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

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;