@jelinek/ui 0.5.2 → 0.9.0

package/dist/components/OptionTile.svelte

@@ -109,9 +109,12 @@
 
 	// h-full so tiles in a CSS-grid row equalise: the grid stretches the
 	// wrapper, and the button must follow it — otherwise a two-line label
-	// makes one tile taller and its row neighbours look ragged.
+	// makes one tile taller and its row neighbours look ragged. flex-col
+	// because a stretched <button> vertically centres its content by
+	// default — the label of a short tile would float mid-cell instead of
+	// starting at the same height as its neighbours'.
 	const BASE =
-		'h-full w-full cursor-pointer rounded-card border-2 bg-surface text-left ' +
+		'flex h-full w-full cursor-pointer flex-col rounded-card border-2 bg-surface text-left ' +
 		'font-secondary font-light text-fg ' +
 		'transition-[border-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease)]';
 

package/dist/components/PageHero.svelte

@@ -59,6 +59,12 @@
 		 * colour) and crops it with object-fit: cover. Mirrors the guide's
 		 * `.page-hero__media`. The text content is lifted above it. */
 		media?: Snippet;
+		/** Task 46 — breadcrumb trail, the hero's first line ("under the menu"):
+		 * `Sekce / Kapitola`. Entries WITH `href` render as links, the last
+		 * (current page) is plain text with aria-current. Mirrors the guide's
+		 * `.breadcrumbs` row (jelinek.css) — no "home" entry, the logo is the
+		 * way home. */
+		crumbs?: { label: string; href?: string }[];
 		class?: string;
 	}
 
@@ -71,10 +77,21 @@
 		heading,
 		children,
 		media,
+		crumbs = [],
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
 
+	// jelinek.css .breadcrumbs — a small Avenir UI row: muted, 600 weight,
+	// step-down2, links darken on hover, current chapter reads in full text
+	// colour. SUBTITLE_STYLE (below) carries the Avenir stack inline, same as
+	// the header's subtitle does.
+	const CRUMBS =
+		'mb-4 flex flex-wrap items-center gap-2 text-step-down2 font-semibold tracking-[0.02em] text-fg-muted1';
+	const CRUMB_LINK =
+		'text-fg-muted1 no-underline transition-[color] duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg hover:no-underline';
+	const CRUMBS_STYLE = "font-family: 'Avenir Next LT Pro', 'Avenir Next', Arial, sans-serif;";
+
 	// `hasContext` must run synchronously during this component's own
 	// initialization (Svelte's lifecycle rule for context APIs) — captured
 	// into a plain const here, NOT inside `$derived`'s callback, since that
@@ -255,8 +272,14 @@
 		"w-fit max-w-full mb-0 after:content-[''] " +
 		'after:block after:h-[3px] after:w-[75%] after:rounded-[2px] after:mt-4 after:mb-6';
 
-	// Which levels the guide's `:is(h1, h2, h3):has(+ .rule)` covers.
-	const hasRule = $derived(level !== 'h4');
+	// Which levels the guide's `:is(h1, h2, h3):has(+ .rule + p)` covers —
+	// and, Task 46, the owner's "underline only above text" rule: the bar
+	// draws only when something follows the heading (the `children` lede).
+	// A component cannot inspect what a snippet renders, so "children exist"
+	// stands in for the guide CSS's "a <p> follows the marker" — every real
+	// hero lede in this showcase is a paragraph, so the two agree; a bare
+	// eyebrow+heading hero (brand/znacka.html's shape) loses the bar in both.
+	const hasRule = $derived(level !== 'h4' && !!children);
 
 	// jelinek.css:356-359 (h1-h4; h5/h6 have no counterpart here since `Level`
 	// stops at h4). Note this list is NOT the same set as the underline's
@@ -305,6 +328,18 @@
      contain itself" branches below render the identical markup instead of
      two copies drifting apart. -->
 {#snippet content()}
+	{#if crumbs.length > 0}
+		<nav class={CRUMBS} style={CRUMBS_STYLE} aria-label="Drobečková navigace">
+			{#each crumbs as crumb, i (crumb.label)}
+				{#if i > 0}<span class="text-fg-muted2" aria-hidden="true">/</span>{/if}
+				{#if crumb.href}
+					<a href={crumb.href} class={CRUMB_LINK}>{crumb.label}</a>
+				{:else}
+					<span class="text-fg" aria-current="page">{crumb.label}</span>
+				{/if}
+			{/each}
+		</nav>
+	{/if}
 	{#if eyebrow}
 		<Eyebrow {variant}>{@render eyebrow()}</Eyebrow>
 	{/if}

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

@@ -53,6 +53,15 @@ interface Props {
      * colour) and crops it with object-fit: cover. Mirrors the guide's
      * `.page-hero__media`. The text content is lifted above it. */
     media?: Snippet;
+    /** Task 46 — breadcrumb trail, the hero's first line ("under the menu"):
+     * `Sekce / Kapitola`. Entries WITH `href` render as links, the last
+     * (current page) is plain text with aria-current. Mirrors the guide's
+     * `.breadcrumbs` row (jelinek.css) — no "home" entry, the logo is the
+     * way home. */
+    crumbs?: {
+        label: string;
+        href?: string;
+    }[];
     class?: string;
 }
 type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;

package/dist/components/commerce/Breadcrumbs.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface Props {
+		items: { href?: string; label: string }[];
+		/** aria-label of the <nav> landmark. */
+		label?: string;
+	}
+
+	let { items, label = 'Drobečková navigace' }: Props = $props();
+</script>
+
+<nav aria-label={label} class="overflow-x-auto whitespace-nowrap py-3 [scrollbar-width:none]">
+	<ol class="flex items-center gap-2 text-(length:--step-down1)">
+		{#each items as item, i (i)}
+			<li class="flex items-center gap-2">
+				{#if i > 0}<span aria-hidden="true" class="text-fg-muted2">›</span>{/if}
+				{#if item.href && i < items.length - 1}
+					<a href={item.href} class="text-fg-muted1 hover:text-fg">{item.label}</a>
+				{:else}
+					<span class="text-(--color-accent-text) font-medium" aria-current="page">{item.label}</span>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+</nav>

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

@@ -0,0 +1,11 @@
+interface Props {
+    items: {
+        href?: string;
+        label: string;
+    }[];
+    /** aria-label of the <nav> landmark. */
+    label?: string;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/commerce/CartDrawer.svelte

@@ -0,0 +1,128 @@
+<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" {closeLabel}>
+	<header class="border-border-subtle flex items-center justify-between border-b 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}
+			<div class="divide-border-subtle divide-y">
+				{#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="border-border-subtle border-t 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">
+	<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 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">
+	<h3 class="flex items-baseline gap-3 text-(length:--step2) 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 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,67 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { portal, lockScroll } 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();
+
+	let panel: HTMLElement | undefined = $state();
+
+	$effect(() => {
+		if (!open) return;
+		const unlock = lockScroll();
+		panel?.focus();
+		const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onclose();
+		window.addEventListener('keydown', onKey);
+		return () => {
+			unlock();
+			window.removeEventListener('keydown', onKey);
+		};
+	});
+</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 }}
+			onclick={onclose}
+		></button>
+		<div
+			bind:this={panel}
+			tabindex="-1"
+			role="dialog"
+			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 }}
+		>
+			{@render children()}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    onclose: () => void;
+    side?: 'left' | 'right';
+    labelledby?: string;
+    /** Accessible label of the backdrop close button. */
+    closeLabel?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;