@jelinek/ui 0.5.3 → 0.9.1

package/dist/components/Tile.svelte

@@ -3,12 +3,17 @@
 	import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/cn.js';
 
-	type Color = 'brown' | 'magenta';
-
 	interface Props {
 		href?: string;
+		/**
+		 * Vybraná dlaždice: silný černý rámeček (2px, padding to kompenzuje,
+		 * dlaždice nezmění rozměr). Bez rozlišení divize — rozhodnutí majitele
+		 * (14. 8. 2026), stejná neutrální řeč jako formuláře a prstenec
+		 * fokusu; --JELINEK-BLACK se v tmavém režimu překlopí na bílou.
+		 * Dřívější `color` prop (hnědá/magenta výplň) zanikl s tímto
+		 * rozhodnutím.
+		 */
 		active?: boolean;
-		color?: Color;
 		class?: string;
 		children: Snippet;
 	}
@@ -16,16 +21,12 @@
 	let {
 		href,
 		active = false,
-		color = 'brown',
 		class: className,
 		children,
 		...rest
 	}: Props & Omit<HTMLAnchorAttributes & HTMLAttributes<HTMLDivElement>, 'href'> = $props();
 
-	const ACTIVE: Record<Color, string> = {
-		brown: 'border-jelinek-brown bg-surface-brown',
-		magenta: 'border-jelinek-magenta bg-surface-magenta'
-	};
+	const ACTIVE = 'border-2 border-jelinek-black p-[21px]';
 
 	// jelinek.css:474-481 (shared surface, --box-accent unset by .tile so it
 	// defaults to --border-subtle at both gradient stops) collapses to a flat
@@ -68,8 +69,8 @@
 	const BASE =
 		'block rounded-card border border-border-subtle bg-surface p-[22px] ' +
 		'font-secondary font-light text-fg no-underline ' +
-		'transition-[box-shadow,transform] duration-[var(--dur-base)] ease-[var(--ease)] ' +
-		'shadow-resting hover:-translate-y-0.5 hover:shadow-interactive ' +
+		'transition-[box-shadow,border-color] duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		'shadow-resting hover:shadow-interactive hover:border-jelinek-black ' +
 		'[&_h3]:mb-1.5 [&_h3]:text-step1 [&_h3]:leading-[1.3] ' +
 		'[&_p]:m-0 [&_p]:text-[0.9rem] [&_p]:text-fg-muted1 ' +
 		'[&_strong]:font-medium [&_b]:font-medium ' +
@@ -105,7 +106,7 @@
 	// .tile (jelinek.css:917-928) declares no cursor of its own, so this is a
 	// kit-only addition, not a reproduction — the css-lock gate watches the
 	// guide's rule text and is unaffected.
-	const classes = $derived(cn(BASE, href && 'cursor-pointer', active && ACTIVE[color], className));
+	const classes = $derived(cn(BASE, href && 'cursor-pointer', active && ACTIVE, className));
 </script>
 
 {#if href}

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

@@ -1,10 +1,16 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
-type Color = 'brown' | 'magenta';
 interface Props {
     href?: string;
+    /**
+     * Vybraná dlaždice: silný černý rámeček (2px, padding to kompenzuje,
+     * dlaždice nezmění rozměr). Bez rozlišení divize — rozhodnutí majitele
+     * (14. 8. 2026), stejná neutrální řeč jako formuláře a prstenec
+     * fokusu; --JELINEK-BLACK se v tmavém režimu překlopí na bílou.
+     * Dřívější `color` prop (hnědá/magenta výplň) zanikl s tímto
+     * rozhodnutím.
+     */
     active?: boolean;
-    color?: Color;
     class?: string;
     children: Snippet;
 }

package/dist/components/blocks/CmsButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Button from '../Button.svelte';
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Tlačítko": ZADÁNÍ VÝSLOVNĚ ŘÍKÁ „musí se sjednotit s tlačítky
+	// z UI guide, ne navrhovat znovu" — blok je proto jen zarovnávací obal
+	// nad komponentou Button. Varianty a barvy jsou Buttonu vlastní.
+	interface Props {
+		/** Text tlačítka. */
+		label: string;
+		href: string;
+		align?: 'left' | 'center' | 'right';
+		variant?: 'primary' | 'secondary';
+		color?: 'brown' | 'magenta' | 'black';
+		class?: string;
+	}
+
+	let {
+		label,
+		href,
+		align = 'left',
+		variant = 'primary',
+		color = 'brown',
+		class: className
+	}: Props = $props();
+
+	const ALIGN: Record<string, string> = {
+		left: 'justify-start',
+		center: 'justify-center',
+		right: 'justify-end'
+	};
+</script>
+
+<div class={cn('flex', ALIGN[align], className)}>
+	<Button {href} {variant} {color}>{label}</Button>
+</div>

package/dist/components/blocks/CmsButton.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** Text tlačítka. */
+    label: string;
+    href: string;
+    align?: 'left' | 'center' | 'right';
+    variant?: 'primary' | 'secondary';
+    color?: 'brown' | 'magenta' | 'black';
+    class?: string;
+}
+declare const CmsButton: import("svelte").Component<Props, {}, "">;
+type CmsButton = ReturnType<typeof CmsButton>;
+export default CmsButton;

package/dist/components/blocks/CmsColumns.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Grid from '../Grid.svelte';
+
+	// Blok CMS „Sloupce": 2–4 sloupce, do kterých redaktor vkládá jiné bloky
+	// (o jednu úroveň, bez vnořování kontejnerů). Skládání na mobilu řeší
+	// PŘESNĚ mřížka guidu (Grid): 1 sloupec, od 640 px 2, od 1024 px plný
+	// počet — odpověď na otázku zadání „kdy 4 přejdou na 2 a kdy na 1".
+	interface Props {
+		cols?: 2 | 3 | 4;
+		children: Snippet;
+		class?: string;
+	}
+
+	let { cols = 2, children, class: className }: Props = $props();
+</script>
+
+<Grid {cols} class={className}>
+	{@render children()}
+</Grid>

package/dist/components/blocks/CmsColumns.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    cols?: 2 | 3 | 4;
+    children: Snippet;
+    class?: string;
+}
+declare const CmsColumns: import("svelte").Component<Props, {}, "">;
+type CmsColumns = ReturnType<typeof CmsColumns>;
+export default CmsColumns;

package/dist/components/blocks/CmsCover.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Button from '../Button.svelte';
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Úvodní cover": celoplošná fotka s H1, nadtitulkem, textem
+	// a CTA. Vzor povýšený z dema (hero kategorie Nábytek z masivu).
+	// ČITELNOST na světlé i tmavé fotce řeší vždy přítomný gradient odspoda
+	// (černá 60 % → průhledná) + bílý text — funguje na obou, žádné
+	// rozhodování redaktora. Na mobilu je fotka na výšku a text sedí dole
+	// nad gradientem, takže se s fotkou nepere.
+	interface Props {
+		image: string;
+		/** Povinný alt fotky (prázdný jen u čistě dekorativního pozadí). */
+		imageAlt?: string;
+		/** Hlavní nadpis stránky (H1). */
+		title: string;
+		eyebrow?: string;
+		text?: string;
+		ctaLabel?: string;
+		ctaHref?: string;
+		/** Volba výšky ze zadání bloku. */
+		height?: 'nizky' | 'stredni' | 'vysoky';
+		class?: string;
+	}
+
+	let {
+		image,
+		imageAlt = '',
+		title,
+		eyebrow,
+		text,
+		ctaLabel,
+		ctaHref,
+		height = 'stredni',
+		class: className
+	}: Props = $props();
+
+	const HEIGHT: Record<string, string> = {
+		nizky: 'min-h-[320px]',
+		stredni: 'min-h-[440px]',
+		vysoky: 'min-h-[70dvh]'
+	};
+</script>
+
+<section class={cn('relative flex items-end overflow-hidden', HEIGHT[height], className)}>
+	<img src={image} alt={imageAlt} class="absolute inset-0 h-full w-full object-cover" />
+	<div
+		class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"
+	></div>
+	<div class="relative mx-auto w-full max-w-page px-6 pt-24 pb-10">
+		{#if eyebrow}
+			<!-- Kicker z typografie guidu (tučný, --step2, bez verzálek —
+			     majitel, 21. 8. 2026); na fotce nese bílou místo hnědé. -->
+			<p class="m-0 font-secondary text-step2 font-bold text-white/85">
+				{eyebrow}
+			</p>
+		{/if}
+		<h1 class="mt-1 mb-0 font-primary text-step4 font-bold text-white [text-wrap:balance]">
+			{title}
+		</h1>
+		{#if text}
+			<!-- Perex je čtený text — Archer, jako perex v PageHero. -->
+			<p class="mt-3 mb-0 max-w-[560px] font-serif font-normal text-white/90">{text}</p>
+		{/if}
+		{#if ctaLabel && ctaHref}
+			<div class="mt-5">
+				<Button href={ctaHref}>{ctaLabel}</Button>
+			</div>
+		{/if}
+	</div>
+</section>

package/dist/components/blocks/CmsCover.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    image: string;
+    /** Povinný alt fotky (prázdný jen u čistě dekorativního pozadí). */
+    imageAlt?: string;
+    /** Hlavní nadpis stránky (H1). */
+    title: string;
+    eyebrow?: string;
+    text?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    /** Volba výšky ze zadání bloku. */
+    height?: 'nizky' | 'stredni' | 'vysoky';
+    class?: string;
+}
+declare const CmsCover: import("svelte").Component<Props, {}, "">;
+type CmsCover = ReturnType<typeof CmsCover>;
+export default CmsCover;

package/dist/components/blocks/CmsHeading.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Nadpis" (docs/chybejici-bloky-cms.md): nadtitulek + nadpis
+	// úrovně h2–h4. Vzhled = typografie guidu: eyebrow, nadpisová škála,
+	// podtržení. Podtržení patří jen nad text (pravidlo majitele) — a jestli
+	// za blokem následuje textový blok, ví jen CMS renderer, proto to řídí
+	// prop `rule` (výchozí zapnuto: nadpis v obsahu textem obvykle pokračuje;
+	// h4 podtržení nemá nikdy, stejně jako v guidu).
+	interface Props {
+		/** Text nadpisu. */
+		text: string;
+		/** Nadtitulek (eyebrow) nad nadpisem. */
+		eyebrow?: string;
+		/** Úroveň nadpisu v osnově stránky. */
+		level?: 'h2' | 'h3' | 'h4';
+		/** Podtržení pod nadpisem — vypnout, když za blokem NEnásleduje text. */
+		rule?: boolean;
+		class?: string;
+	}
+
+	let { text, eyebrow, level = 'h2', rule = true, class: className }: Props = $props();
+
+	// Velikosti podle typografické škály guidu (h2 step3, h3 step2, h4 step1
+	// — stejné hodnoty používají kapitoly kitu).
+	const SIZE: Record<'h2' | 'h3' | 'h4', string> = {
+		h2: 'text-step5',
+		h3: 'text-step4',
+		h4: 'text-step3'
+	};
+	// Nadtitulek = kicker z typografie guidu (brand → Typografie, hierarchie:
+	// „Kicker — GT Walsheim Bold, produktová barva“; jelinek.css .eyebrow):
+	// tučný, hnědý, velikost --step2, BEZ verzálek — verzálky jsou vyhrazené
+	// menu a krátkým titulkům a dřívější uppercase tu byl proti manuálu
+	// (majitel, 21. 8. 2026). Stejné třídy nese komponenta Eyebrow.
+	const EYEBROW = 'font-secondary text-step2 font-bold text-jelinek-brown';
+</script>
+
+<div class={cn('max-w-[720px]', className)}>
+	{#if eyebrow}<p class="m-0 {EYEBROW}">{eyebrow}</p>{/if}
+	<svelte:element
+		this={level}
+		class="mt-1 mb-0 font-primary {SIZE[level]} font-bold text-fg [text-wrap:balance]"
+	>
+		{text}
+	</svelte:element>
+	{#if rule && level !== 'h4'}
+		<hr class="rule" />
+	{/if}
+</div>

package/dist/components/blocks/CmsHeading.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Text nadpisu. */
+    text: string;
+    /** Nadtitulek (eyebrow) nad nadpisem. */
+    eyebrow?: string;
+    /** Úroveň nadpisu v osnově stránky. */
+    level?: 'h2' | 'h3' | 'h4';
+    /** Podtržení pod nadpisem — vypnout, když za blokem NEnásleduje text. */
+    rule?: boolean;
+    class?: string;
+}
+declare const CmsHeading: import("svelte").Component<Props, {}, "">;
+type CmsHeading = ReturnType<typeof CmsHeading>;
+export default CmsHeading;

package/dist/components/blocks/CmsImage.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Obrázek": fotka z mediální knihovny s POVINNÝM altem
+	// (přístupnost) a volitelným popiskem. Poměr stran si blok vynucuje sám
+	// (výchozí 3:2 s ořezem cover) — knihovna nezaručuje žádný poměr, a bez
+	// ořezu by velmi vysoká fotka rozbila rytmus stránky. `ratio="auto"`
+	// nechá přirozený poměr, když na něm záleží (např. pérovka).
+	interface Props {
+		src: string;
+		/** Povinný alternativní text — bez něj obrázek do CMS nepatří. */
+		alt: string;
+		/** Popisek pod obrázkem. */
+		caption?: string;
+		/** Vynucený poměr stran; „auto" = přirozený poměr fotky. */
+		ratio?: '3:2' | '4:3' | '16:9' | '1:1' | 'auto';
+		class?: string;
+	}
+
+	let { src, alt, caption, ratio = '3:2', class: className }: Props = $props();
+
+	const RATIO: Record<string, string> = {
+		'3:2': 'aspect-[3/2] object-cover',
+		'4:3': 'aspect-[4/3] object-cover',
+		'16:9': 'aspect-video object-cover',
+		'1:1': 'aspect-square object-cover',
+		auto: ''
+	};
+</script>
+
+<figure class={cn('m-0', className)}>
+	<img
+		{src}
+		{alt}
+		loading="lazy"
+		class="w-full rounded-image shadow-resting {RATIO[ratio]}"
+	/>
+	{#if caption}
+		<figcaption class="mt-2 font-secondary text-step-down1 font-light text-fg-muted1">
+			{caption}
+		</figcaption>
+	{/if}
+</figure>

package/dist/components/blocks/CmsImage.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    src: string;
+    /** Povinný alternativní text — bez něj obrázek do CMS nepatří. */
+    alt: string;
+    /** Popisek pod obrázkem. */
+    caption?: string;
+    /** Vynucený poměr stran; „auto" = přirozený poměr fotky. */
+    ratio?: '3:2' | '4:3' | '16:9' | '1:1' | 'auto';
+    class?: string;
+}
+declare const CmsImage: import("svelte").Component<Props, {}, "">;
+type CmsImage = ReturnType<typeof CmsImage>;
+export default CmsImage;

package/dist/components/blocks/CmsMediaText.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Obrázek + text": fotka vedle obsahu (obsah = další bloky,
+	// typicky Nadpis + Text + Tlačítko — kontejner o jedné úrovni vnoření,
+	// přesně podle zadání). Vzor povýšený z dema. NA MOBILU JE FOTKA VŽDY
+	// NAHOŘE — web stojí na fotkách, fotka prodává a text vysvětluje
+	// (odpověď na otevřenou otázku zadání).
+	interface Props {
+		image: string;
+		imageAlt: string;
+		/** Strana obrázku na desktopu. */
+		side?: 'left' | 'right';
+		/** Poměr stran fotky. */
+		ratio?: '3:2' | '4:3' | '1:1';
+		/** Fotka od kraje ke kraji (bez rádiusu a bočního okraje). */
+		fullBleed?: boolean;
+		children: Snippet;
+		class?: string;
+	}
+
+	let {
+		image,
+		imageAlt,
+		side = 'right',
+		ratio = '4:3',
+		fullBleed = false,
+		children,
+		class: className
+	}: Props = $props();
+
+	const RATIO: Record<string, string> = {
+		'3:2': 'aspect-[3/2]',
+		'4:3': 'aspect-[4/3]',
+		'1:1': 'aspect-square'
+	};
+</script>
+
+{#if fullBleed}
+	<!-- Varianta na celou šířku: fotka bez okrajů, text v kontejneru pod ní
+	     (na desktopu překrývá spodní část fotky nepotřebujeme — čitelnost). -->
+	<section class={cn('', className)}>
+		<img src={image} alt={imageAlt} class="w-full {RATIO[ratio]} object-cover" />
+		<div class="mx-auto w-full max-w-page px-6 pt-8">
+			{@render children()}
+		</div>
+	</section>
+{:else}
+	<section
+		class={cn('grid items-center gap-8 min-[1024px]:grid-cols-2 min-[1024px]:gap-10', className)}
+	>
+		<!-- Mobil: fotka první (DOM pořadí). Desktop: strana podle `side`. -->
+		<img
+			src={image}
+			alt={imageAlt}
+			loading="lazy"
+			class="w-full rounded-image {RATIO[ratio]} object-cover shadow-resting {side === 'right'
+				? 'min-[1024px]:order-last'
+				: ''}"
+		/>
+		<div>{@render children()}</div>
+	</section>
+{/if}

package/dist/components/blocks/CmsMediaText.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    image: string;
+    imageAlt: string;
+    /** Strana obrázku na desktopu. */
+    side?: 'left' | 'right';
+    /** Poměr stran fotky. */
+    ratio?: '3:2' | '4:3' | '1:1';
+    /** Fotka od kraje ke kraji (bez rádiusu a bočního okraje). */
+    fullBleed?: boolean;
+    children: Snippet;
+    class?: string;
+}
+declare const CmsMediaText: import("svelte").Component<Props, {}, "">;
+type CmsMediaText = ReturnType<typeof CmsMediaText>;
+export default CmsMediaText;

package/dist/components/blocks/CmsText.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	// Blok CMS „Text": formátovaný text redaktora — odstavce, odrážkové
+	// i číslované seznamy, odkazy, tučné. KURZÍVA SE NEPOUŽÍVÁ NIKDY
+	// (rozhodnutí majitele 14. 8. 2026) — kdyby ji CMS přece jen poslalo,
+	// blok ji narovná na běžný řez, aby se zákaz nedal obejít obsahem.
+	// Maximální šířka řádku 720 px drží čitelnost (rozvrzeni#sirka).
+	interface Props {
+		/** Hotové HTML z CMS. Alternativně jde obsah předat jako children. */
+		html?: string;
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { html, children, class: className }: Props = $props();
+
+	// PÍSMO: Archer (font-serif) — brand → Typografie: „Odstavec — Archer
+	// Book. Plynulý čtený text pro popisy a delší obsah mimo ohraničené
+	// bloky.“ Dřívější GT Walsheim Light tu byl proti manuálu (majitel,
+	// 21. 8. 2026); Walsheim Light patří drobnému textu a textům
+	// v ohraničených blocích, ne odstavcům obsahu.
+	const TEXT =
+		'max-w-[720px] font-serif font-normal text-step0 text-fg ' +
+		// odstavce a mezery mezi nimi (guide: p margin 0 0 1em, line-height 1.4)
+		'[&_p]:my-0 [&_p]:mb-[1em] [&_p]:leading-[1.4] [&_p:last-child]:mb-0 ' +
+		// seznamy — odrážky i číslování, s odsazením
+		'[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-6 ' +
+		'[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-6 ' +
+		'[&_li]:my-1 ' +
+		// odkaz uvnitř odstavce — tučný, akcent, podtržení až na hover (guide a{})
+		'[&_a]:font-bold [&_a]:text-jelinek-brown [&_a]:no-underline hover:[&_a]:underline ' +
+		// tučné je jediné povolené zvýraznění (Archer Bold je v sadě). Suffix
+		// `!`: Demo.svelte kreslí ukázkové panely s [&_strong]:font-medium
+		// (Walsheim konvence panelů) a jeho pravidlo by při stejné specificitě
+		// vyhrálo pořadím ve stylopisu — blok uvnitř ukázky by měl Archer
+		// Medium, zakázaný řez. Bez vnořeného obsahu v Demu by ! nebylo třeba.
+		'[&_strong]:font-bold! [&_b]:font-bold! ' +
+		// …kurzívu narovnáváme (zákaz platí i pro obsah z CMS)
+		'[&_em]:not-italic [&_i]:not-italic';
+</script>
+
+<div class={cn(TEXT, className)}>
+	{#if html}
+		<!-- Obsah přichází z vlastního CMS (redakční vstup), ne od anonymních
+		     uživatelů — sanitizace je věc aplikace. -->
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html html}
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/blocks/CmsText.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Hotové HTML z CMS. Alternativně jde obsah předat jako children. */
+    html?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const CmsText: import("svelte").Component<Props, {}, "">;
+type CmsText = ReturnType<typeof CmsText>;
+export default CmsText;

package/dist/components/commerce/Breadcrumbs.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	// Task 48 — UNIFIED WITH THE GUIDE'S BREADCRUMBS (the owner's spec, same
+	// treatment PageHero's `crumbs` and the hand-written pages' `.breadcrumbs`
+	// carry): a small Avenir UI row, "/" separators in muted2, ancestor links
+	// muted darkening on hover, the current page in full text colour — never
+	// the accent. The previous "›" + accent-coloured current item was this
+	// component's own invention and made the e-shop's trail a different design
+	// from the site's.
+	interface Props {
+		items: { href?: string; label: string }[];
+		/** aria-label of the <nav> landmark. */
+		label?: string;
+	}
+
+	let { items, label = 'Drobečková navigace' }: Props = $props();
+
+	// GT Walsheim Medium — Avenir do drobečků nepatří (majitel, 21. 8. 2026):
+	// pravidla znají Avenir jen u podnázvu loga.
+	const LINK =
+		'text-fg-muted1 no-underline transition-[color] duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg hover:no-underline';
+</script>
+
+<!-- overflow-x: long product trails scroll sideways on a phone instead of
+     wrapping — kept from the original component, the guide's static pages
+     never grow trails that long. -->
+<nav aria-label={label} class="overflow-x-auto font-secondary whitespace-nowrap py-3 [scrollbar-width:none]">
+	<ol
+		class="flex items-center gap-2 text-step-down2 font-medium tracking-[0.02em] text-fg-muted1"
+	>
+		{#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={LINK}>{item.label}</a>
+				{:else}
+					<span class="text-fg" 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;