@jelinek/ui 0.5.3 → 0.9.1

package/dist/components/ChapterNav.svelte

@@ -61,7 +61,7 @@
 	// while `display: none` holds; from 640px up the bar is `absolute`, which is
 	// what makes it the containing block for the scroll-affordance fades below.
 	const OUTER =
-		'hidden z-[49] px-6 ' +
+		'hidden z-(--z-chapter-nav) px-6 ' +
 		'min-[640px]:block min-[640px]:absolute min-[640px]:inset-x-0 ' +
 		'min-[640px]:top-[calc(var(--header-h)-11px)]';
 

package/dist/components/Checkbox.svelte

@@ -6,6 +6,7 @@
 		checked?: boolean;
 		label: string;
 		id?: string;
+		disabled?: boolean;
 		class?: string;
 	}
 
@@ -13,6 +14,7 @@
 		checked = $bindable(false),
 		label,
 		id,
+		disabled = false,
 		class: className,
 		...rest
 	}: Props & Omit<HTMLInputAttributes, 'checked' | 'type'> = $props();
@@ -31,22 +33,18 @@
 	// without depending on an ambient .demo wrapper the consumer may not
 	// have. gap-2.5 matches the 10px inline gap.
 	//
-	// ACCENT COLOUR — no CSS source of truth exists, so this is a judgement
-	// call, flagged for adjudication (see task-7-report.md). The checkbox
-	// square itself uses accent-jelinek-brown, NOT accent-jelinek-magenta:
-	// magenta is reserved for the Zdravý spánek (mattress) division and the
-	// guide is explicit brown/magenta never mix in one interface, so baking
-	// magenta into every checkbox would leak the mattress accent into
-	// furniture-division UIs. jelinek-brown is also what TextField/Select's
-	// own focus ring already uses (jelinek.css:661), and the token layer
-	// already re-themes --JELINEK-BROWN to magenta under
-	// [data-division="mattress"] (tokens.css:161-166) — the same mechanism
-	// Button relies on for its brand colours — so this accent still turns
-	// magenta automatically on mattress-themed pages, without hardcoding it.
-	const LABEL = 'flex cursor-pointer items-center gap-2.5 font-secondary text-step0 text-fg';
+	// ACCENT COLOUR — adjudicated by the owner (14. 8. 2026): forms are
+	// colour-neutral. Every emphasis in a form is BLACK (--JELINEK-BLACK,
+	// which flips to near-white in dark mode so it stays visible); the only
+	// colour a form carries is the error state. No division re-theme here —
+	// forms look the same in Nábytek and Zdravý spánek.
+	const LABEL = 'flex cursor-pointer items-center gap-2.5 font-secondary font-light text-step0 text-fg';
+	// Zakázaný stav mluví jako zakázané tlačítko (Button.svelte:117):
+	// utlumený text a cursor-not-allowed; políčko samotné tlumí prohlížeč.
+	const DISABLED = 'cursor-not-allowed text-fg-muted2';
 </script>
 
-<label for={inputId} class={cn(LABEL, className)}>
-	<input {...rest} id={inputId} type="checkbox" bind:checked class="accent-jelinek-brown" />
+<label for={inputId} class={cn(LABEL, disabled && DISABLED, className)}>
+	<input {...rest} id={inputId} type="checkbox" {disabled} bind:checked class="accent-jelinek-black" />
 	{label}
 </label>

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

@@ -3,6 +3,7 @@ interface Props {
     checked?: boolean;
     label: string;
     id?: string;
+    disabled?: boolean;
     class?: string;
 }
 type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'checked' | 'type'>;

package/dist/components/ContentLogo.svelte

@@ -3,13 +3,14 @@
 	import { cn } from '../utils/cn.js';
 	import { DEER_MARK_PATH } from './deer-mark-path.js';
 
-	type Variant = 'brown' | 'magenta';
+	type Variant = 'brown';
 
 	interface Props {
-		/** jelinek.css:744-745. Left unset for the bare/default rule (mark
-		 * colour --text-white, jelinek.css:743) — NOT itself a "neutral"
-		 * variant name, since there is no third `.content-logo--*` modifier
-		 * in the guide to give it one. */
+		/** Jelen je jen HNĚDÝ, nebo BÍLÝ (brand → Znak, Užití s produktovými
+		 * barvami; majitel, 21. 8. 2026): `brown` pro divizi Nábytek, bez
+		 * varianty BÍLÝ — divize Zdravý spánek a neutrální užití (interní
+		 * aplikace). Purpurová varianta NEEXISTUJE — dřívější `magenta` byla
+		 * chyba proti manuálu a je odstraněná. */
 		variant?: Variant;
 		/**
 		 * Sets `--logo-mark` (default matches jelinek.css:743's own inline
@@ -76,14 +77,13 @@
 	// actually invisible once the colour scoping below is right.
 	const BASE = 'inline-flex items-center gap-[calc(var(--logo-mark)*107/400)] text-fg-inverse';
 
-	// jelinek.css:744 (--brown, --JELINEK-BROWN, division-tracking) and :745
-	// (--magenta, --JELINEK-MAGENTA, fixed regardless of division) — same
-	// token pair and same division-tracking-vs-fixed distinction Eyebrow's
-	// own VARIANT already documents for the identical reason (tokens.css's
-	// mattress re-theme only ever reassigns --JELINEK-BROWN).
+	// jelinek.css .content-logo--brown: the brown deer. The division re-theme
+	// remaps --JELINEK-BROWN to magenta — for the deer that is a FORBIDDEN
+	// state, so under [data-division="mattress"] every lockup flips to WHITE
+	// instead; the rule lives in extras.css and hooks on the data-content-logo
+	// attribute below, mirroring jelinek.css's own division override.
 	const VARIANT: Record<Variant, string> = {
-		brown: 'text-jelinek-brown',
-		magenta: 'text-jelinek-magenta'
+		brown: 'text-jelinek-brown'
 	};
 
 	// jelinek.css:746 (.content-logo__svg): width/height both var(--logo-mark),
@@ -142,7 +142,12 @@
 	);
 </script>
 
-<div {...rest} style={mergedStyle} class={cn(BASE, variant && VARIANT[variant], className)}>
+<div
+	{...rest}
+	style={mergedStyle}
+	data-content-logo=""
+	class={cn(BASE, variant && VARIANT[variant], className)}
+>
 	<svg class={SVG} viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 		<rect width="400" height="400" rx="25" ry="25" fill="#000" />
 		<path d={DEER_MARK_PATH} fill="currentColor" />

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

@@ -1,10 +1,11 @@
 import type { HTMLAttributes } from 'svelte/elements';
-type Variant = 'brown' | 'magenta';
+type Variant = 'brown';
 interface Props {
-    /** jelinek.css:744-745. Left unset for the bare/default rule (mark
-     * colour --text-white, jelinek.css:743) — NOT itself a "neutral"
-     * variant name, since there is no third `.content-logo--*` modifier
-     * in the guide to give it one. */
+    /** Jelen je jen HNĚDÝ, nebo BÍLÝ (brand → Znak, Užití s produktovými
+     * barvami; majitel, 21. 8. 2026): `brown` pro divizi Nábytek, bez
+     * varianty BÍLÝ — divize Zdravý spánek a neutrální užití (interní
+     * aplikace). Purpurová varianta NEEXISTUJE — dřívější `magenta` byla
+     * chyba proti manuálu a je odstraněná. */
     variant?: Variant;
     /**
      * Sets `--logo-mark` (default matches jelinek.css:743's own inline

package/dist/components/Grid.svelte

@@ -49,10 +49,11 @@
 	// Behaviour by width (the guide's, verbatim):
 	//   w < 640              -> 1 column, every cols value
 	//   640 <= w < 1024      -> 2 columns, every cols value
-	//   w >= 1024            -> the cols value itself (2/3/4)
-	// (.grid--3 and .grid--4 both collapse to 2 columns between 640 and 1024,
-	// so cols=4 goes 4 -> 2 -> 1 and never passes through 3; cols=2 has no
-	// 1024px rule at all, it is already 2-up from 640px.)
+	//   w >= 1024            -> the cols value itself for 2/3; cols=4 steps
+	//                           3 (>=1024) -> 4 (>=1280) -> 5 (>=1600), so the
+	//                           four-column grid climbs 1/2/3/4/5 with width
+	//                           (owner's request) instead of jumping 2 -> 4.
+	// (cols=2 has no 1024px rule at all, it is already 2-up from 640px.)
 	//
 	// Why Tailwind's native `min-*` variant family and NOT arbitrary *media*
 	// variants (`[@media(min-width:1024px)]:...`), even though those can express
@@ -75,10 +76,13 @@
 	// `min-[1024px]:grid-cols-${n}` template, so Tailwind's static scanner can
 	// see each one literally — a template string is invisible to it and the
 	// class would never be generated.
+	// cols={4} přidává od 1600 px pátý sloupec (jelinek.css .grid--4, majitel:
+	// širší web = víc obsahu do řady; trojka a dvojka zůstávají — jsou volené
+	// kvůli obsahu, ne kvůli místu).
 	const COLS: Record<2 | 3 | 4, string> = {
 		2: 'grid-cols-1 min-[640px]:grid-cols-2',
 		3: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1024px]:grid-cols-3',
-		4: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1024px]:grid-cols-4'
+		4: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1024px]:grid-cols-3 min-[1280px]:grid-cols-4 min-[1600px]:grid-cols-5'
 	};
 </script>
 

package/dist/components/Label.svelte

@@ -5,12 +5,21 @@
 
 	interface Props {
 		for?: string;
+		/**
+		 * Hvězdička povinného pole za popiskem. Jen vizuální značka
+		 * (aria-hidden) — povinnost samotnou hlásí nativní `required` na poli,
+		 * které ji zapíná. Černá (--JELINEK-BLACK, v tmavém režimu se sama
+		 * překlopí na bílou): formuláře jsou podle rozhodnutí majitele
+		 * (14. 8. 2026) barevně neutrální — barvu nese jen chyba.
+		 */
+		required?: boolean;
 		class?: string;
 		children: Snippet;
 	}
 
 	let {
 		for: forId,
+		required = false,
 		class: className,
 		children,
 		...rest
@@ -33,5 +42,7 @@
 	for={forId}
 	class={cn('mb-1.5 block font-secondary text-[0.88rem] font-medium', className)}
 >
-	{@render children()}
+	{@render children()}{#if required}<span aria-hidden="true" class="text-jelinek-black">
+			*</span
+		>{/if}
 </label>

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

@@ -2,6 +2,14 @@ import type { Snippet } from 'svelte';
 import type { HTMLLabelAttributes } from 'svelte/elements';
 interface Props {
     for?: string;
+    /**
+     * Hvězdička povinného pole za popiskem. Jen vizuální značka
+     * (aria-hidden) — povinnost samotnou hlásí nativní `required` na poli,
+     * které ji zapíná. Černá (--JELINEK-BLACK, v tmavém režimu se sama
+     * překlopí na bílou): formuláře jsou podle rozhodnutí majitele
+     * (14. 8. 2026) barevně neutrální — barvu nese jen chyba.
+     */
+    required?: boolean;
     class?: string;
     children: Snippet;
 }

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,20 @@
 		heading,
 		children,
 		media,
+		crumbs = [],
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
 
+	// jelinek.css .breadcrumbs — a small muted UI row: step-down2, links darken
+	// on hover, current chapter reads in full text colour.
+	// GT Walsheim Medium — Avenir do drobečků nepatří (majitel, 21. 8. 2026):
+	// pravidla znají Avenir jen u podnázvu loga.
+	const CRUMBS =
+		'mb-4 flex flex-wrap items-center gap-2 font-secondary text-step-down2 font-medium 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';
+
 	// `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 +271,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 +327,18 @@
      contain itself" branches below render the identical markup instead of
      two copies drifting apart. -->
 {#snippet content()}
+	{#if crumbs.length > 0}
+		<nav class={CRUMBS} 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/Pager.svelte

@@ -62,15 +62,18 @@
 	// a 0 basis can always be squeezed into the line). jelinek.css:1116 is
 	// `flex: 1 1 200px`; the 200px basis is what makes ROOT's `flex-wrap`
 	// actually fire. Changing one without the other is a no-op.
+	// font-light, not font-normal: jelinek.css's `.tile, .pager a` moved to
+	// weight 300 (typografická revize 21. 8. 2026 — Walsheim má jen
+	// Bold/Medium/Light); the bold lives on the inner <strong>.
 	const LINK =
 		'max-w-[340px] flex-[1_1_200px] rounded-card border border-border-subtle px-5 py-4 font-secondary ' +
-		'font-normal text-fg no-underline shadow-resting hover:shadow-interactive ' +
+		'font-light text-fg no-underline shadow-resting hover:shadow-interactive ' +
 		'transition-shadow duration-[var(--dur-base)] ease-[var(--ease)] ' +
 		'dark:border-t-[var(--border-highlight-white)]';
 
 	// jelinek.css:1123 (.pager a span): block, 0.78rem (not on the --step
 	// scale), text-muted1.
-	const SUBLABEL = 'block text-[0.78rem] text-fg-muted1';
+	const SUBLABEL = 'block text-[0.78rem] font-light text-fg-muted1';
 </script>
 
 <nav {...rest} class={cn(ROOT, className)}>

package/dist/components/PhotoTile.svelte

@@ -66,8 +66,10 @@
 	const BASE =
 		'group relative flex flex-col justify-end overflow-hidden aspect-[4/3] ' +
 		'rounded-section shadow-resting no-underline ' +
-		'transition-[box-shadow,transform] duration-[var(--dur-base)] ease-[var(--ease)] ' +
-		'hover:-translate-y-0.5 hover:shadow-interactive ' +
+		// Bez vyskočení na hover (majitel 14. 8. 2026, stejně jako Tile) —
+		// zvýrazňuje jen stín.
+		'transition-[box-shadow] duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		'hover:shadow-interactive ' +
 		'dark:shadow-[var(--shadow-resting),inset_0_2px_1px_-1px_var(--box-primary)] ' +
 		'dark:hover:shadow-[var(--shadow-interactive),inset_0_2px_1px_-1px_var(--box-primary)]';
 

package/dist/components/ProductCard.svelte

@@ -2,18 +2,31 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/cn.js';
-	import Button from './Button.svelte';
-	import Card from './Card.svelte';
+	import PriceDisplay from './commerce/PriceDisplay.svelte';
+	import StockBadge from './commerce/StockBadge.svelte';
 
 	interface Props {
 		title: string;
+		/** Krátký popis pod názvem — kolekce, materiál, shrnutí konfigurace. */
 		description?: string;
 		image?: string;
 		imageAlt?: string;
+		/** Odkaz na detail — celá karta je jeden odkaz, žádné tlačítko uvnitř. */
 		href?: string;
-		ctaLabel?: string;
-		color?: 'brown' | 'magenta' | 'black';
-		/** Optional badge rendered above the title, e.g. <Tag variant="instock">. */
+		/** Cena v celých korunách (formátuje `formatPrice`). */
+		price?: number;
+		/** Přeškrtnutý původ — vykreslí se jen, když je vyšší než `price`. */
+		originalPrice?: number;
+		/** Kvalifikátor „od“ před cenou (konfigurovatelné produkty). */
+		priceFrom?: boolean;
+		/** Dostupnost pod cenou (kompaktní StockBadge). */
+		stock?: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+		/** Přepis textu dostupnosti — u stavu `lead` konkrétní lhůta. */
+		stockLabel?: string;
+		/** Produktová fotka na bílém pozadí (packshot): čtverec bez ořezu.
+		    Výchozí je ambientní fotka v ořezu 4:3. */
+		packshot?: boolean;
+		/** Štítek nad názvem, např. <Tag variant="instock">. */
 		tag?: Snippet;
 		class?: string;
 	}
@@ -24,58 +37,67 @@
 		image,
 		imageAlt = '',
 		href,
-		ctaLabel = 'Detail produktu',
-		color = 'brown',
+		price,
+		originalPrice,
+		priceFrom = false,
+		stock,
+		stockLabel,
+		packshot = false,
 		tag,
 		class: className,
 		...rest
-	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+	}: Props & HTMLAttributes<HTMLElement> = $props();
 
-	// No `.product-card` class exists in jelinek.css — this is a composition
-	// of Card + Button + (via the `tag` snippet) Tag, not a standalone CSS
-	// rule. Its structure and spacing are taken from the guide's own worked
-	// example, ui/komponenty.html:253-281, reproduced value-for-value where
-	// that markup gives one (18px inner padding, 10px gap under the tag,
-	// 8px/4px heading margin), and by ordinary judgment where it doesn't
-	// (there's no other source of truth to check those calls against).
+	// DEFINITIVNÍ PODOBA (audit P2, 21. 8. 2026) — do té doby bylo tohle
+	// provizorium složené z Card + Button. Předloha je karta výpisu z dema
+	// kategorie (demo/ortopedicke-lamelove-matrace), kterou schválil majitel:
+	//
+	// - CELÁ KARTA JE JEDEN ODKAZ. Ve výpisu se kliká na produkt, ne na
+	//   tlačítko v něm — tlačítko uvnitř odkazu je past pro čtečky i palce.
+	//   Bez `href` se vykreslí jako <div> (čistě prezentační užití).
+	// - Neutrální zvýraznění (pravidlo formulářů): klidová hrana
+	//   border-subtle, na najetí tenká černá + zvednutý stín, ŽÁDNÝ posun.
+	//   Barva divize na kartě není — nese ji obsah stránky, ne rámeček.
+	// - Cena a dostupnost jsou existující atomy PriceDisplay a StockBadge,
+	//   karta si je nekreslí po svém.
+	// - Fotky: ambientní záběry ořez 4:3 (jako PhotoTile), packshoty na bílém
+	//   pozadí čtverec bez ořezu (`packshot`) — matrace nesmí přijít o rohy.
+	const CARD =
+		'block overflow-hidden rounded-card border border-border-subtle bg-surface ' +
+		'no-underline shadow-resting transition-[border-color,box-shadow] ' +
+		'duration-[var(--dur-base)] ease-[var(--ease)]';
+	const LINKED = 'hover:border-jelinek-black hover:shadow-interactive';
 </script>
 
-<Card {...rest} padded={false} class={cn('overflow-hidden', className)}>
+<svelte:element this={href ? 'a' : 'div'} {...rest} {href} class={cn(CARD, href && LINKED, className)}>
 	{#if image}
-		<!-- jelinek.css:510 (.photo): rounded-image object-cover w-full. The
-		     demo (ui/komponenty.html:255) overrides the radius to 0 inline and
-		     adds aspect-ratio:4/3: the image sits flush against the card's own
-		     rounded top corners, and `overflow-hidden` on the card above does
-		     the rounding instead — a rounded image here would double up as a
-		     visible seam inside the rounded card. `rounded-none` is written
-		     explicitly, not just omitted, to keep that override visible. -->
-		<img src={image} alt={imageAlt} class="aspect-[4/3] w-full rounded-none object-cover" />
+		<!-- rounded-none: fotka lícuje s kulatými rohy karty, ořez dělá
+		     overflow-hidden nahoře — viz stejná poznámka v PhotoTile. -->
+		{#if packshot}
+			<img src={image} alt={imageAlt} class="aspect-square w-full rounded-none bg-surface object-contain" />
+		{:else}
+			<img src={image} alt={imageAlt} class="aspect-[4/3] w-full rounded-none object-cover" />
+		{/if}
 	{/if}
 	<div class="p-[18px]">
 		{#if tag}
 			<div class="mb-2.5">{@render tag()}</div>
 		{/if}
-		<!-- jelinek.css:652 (`.card h3`) already reaches this <h3> through
-		     Card's own [&_h3]:text-step1 [&_h3]:leading-[1.3] descendant rule
-		     (Card.svelte) — repeating text-step1/leading here would duplicate
-		     Card, not correct it. text-fg is still needed: Card sets no text
-		     color of its own (the static site's .card h3 inherits its color
-		     from body), so without it this heading would fall back to
-		     whichever default the consuming app happens to have. mt-2/mb-1
-		     reproduce the demo's inline `margin:8px 0 4px` exactly — no CSS
-		     rule sets this margin (it's specific to that one demo instance),
-		     but both values already sit on Tailwind's default spacing scale. -->
-		<h3 class="mt-2 mb-1 text-fg">{title}</h3>
+		<h3 class="mt-0 mb-1 font-primary text-step1 leading-[1.3] font-bold text-fg">{title}</h3>
 		{#if description}
-			<!-- jelinek.css:306 (.small) + shared .muted (jelinek.css:303): a
-			     fixed --step-down1 size at line-height 1.1 (not on Tailwind's
-			     leading scale, kept arbitrary) and the muted1 text color.
-			     font-weight 300 already comes from Card's own
-			     font-secondary/font-light, inherited here — not re-stated. -->
-			<p class="mb-4 text-step-down1 leading-[1.1] text-fg-muted1">{description}</p>
+			<p class="mb-0 font-secondary font-light text-step-down1 leading-[1.3] text-fg-muted1">
+				{description}
+			</p>
+		{/if}
+		{#if price !== undefined}
+			<div class="mt-2.5 text-fg">
+				<PriceDisplay {price} {originalPrice} from={priceFrom} size="sm" />
+			</div>
 		{/if}
-		{#if href}
-			<Button {href} {color} fullWidth>{ctaLabel}</Button>
+		{#if stock}
+			<div class="mt-1.5">
+				<StockBadge state={stock} label={stockLabel} compact />
+			</div>
 		{/if}
 	</div>
-</Card>
+</svelte:element>

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

@@ -2,17 +2,30 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props {
     title: string;
+    /** Krátký popis pod názvem — kolekce, materiál, shrnutí konfigurace. */
     description?: string;
     image?: string;
     imageAlt?: string;
+    /** Odkaz na detail — celá karta je jeden odkaz, žádné tlačítko uvnitř. */
     href?: string;
-    ctaLabel?: string;
-    color?: 'brown' | 'magenta' | 'black';
-    /** Optional badge rendered above the title, e.g. <Tag variant="instock">. */
+    /** Cena v celých korunách (formátuje `formatPrice`). */
+    price?: number;
+    /** Přeškrtnutý původ — vykreslí se jen, když je vyšší než `price`. */
+    originalPrice?: number;
+    /** Kvalifikátor „od“ před cenou (konfigurovatelné produkty). */
+    priceFrom?: boolean;
+    /** Dostupnost pod cenou (kompaktní StockBadge). */
+    stock?: 'in-stock' | 'on-order' | 'sold-out' | 'lead';
+    /** Přepis textu dostupnosti — u stavu `lead` konkrétní lhůta. */
+    stockLabel?: string;
+    /** Produktová fotka na bílém pozadí (packshot): čtverec bez ořezu.
+        Výchozí je ambientní fotka v ořezu 4:3. */
+    packshot?: boolean;
+    /** Štítek nad názvem, např. <Tag variant="instock">. */
     tag?: Snippet;
     class?: string;
 }
-type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
 declare const ProductCard: import("svelte").Component<$$ComponentProps, {}, "">;
 type ProductCard = ReturnType<typeof ProductCard>;
 export default ProductCard;

package/dist/components/Radio.svelte

@@ -8,6 +8,7 @@
 		value: string;
 		label: string;
 		id?: string;
+		disabled?: boolean;
 		class?: string;
 	}
 
@@ -15,6 +16,7 @@
 		value,
 		label,
 		id,
+		disabled = false,
 		class: className,
 		...rest
 	}: Props & Omit<HTMLInputAttributes, 'value' | 'type' | 'name'> = $props();
@@ -28,15 +30,16 @@
 
 	// Same reasoning as Checkbox.svelte: no CSS rule exists for radio inputs
 	// or their label; font-secondary/text-fg reproduces what the guide's own
-	// `.demo` wrapper applies ambiently (jelinek.css:322-324), and
-	// accent-jelinek-brown (not accent-jelinek-magenta) keeps the mattress
-	// accent out of furniture UIs by default while still following the
-	// division automatically via the --JELINEK-BROWN re-theme
-	// (tokens.css:161-166). Flagged for adjudication.
-	const LABEL = 'flex cursor-pointer items-center gap-2.5 font-secondary text-step0 text-fg';
+	// `.demo` wrapper applies ambiently (jelinek.css:322-324). Accent is
+	// BLACK per the owner's 14. 8. 2026 call — forms are colour-neutral,
+	// only the error state carries colour; --JELINEK-BLACK flips to
+	// near-white in dark mode.
+	const LABEL = 'flex cursor-pointer items-center gap-2.5 font-secondary font-light text-step0 text-fg';
+	// Stejná řeč jako Checkbox: utlumený text + cursor-not-allowed.
+	const DISABLED = 'cursor-not-allowed text-fg-muted2';
 </script>
 
-<label for={inputId} class={cn(LABEL, className)}>
+<label for={inputId} class={cn(LABEL, disabled && DISABLED, className)}>
 	<input
 		{...rest}
 		id={inputId}
@@ -44,11 +47,12 @@
 		name={group.name}
 		{value}
 		{checked}
+		{disabled}
 		onchange={(event) => {
 			group.select(value);
 			rest.onchange?.(event);
 		}}
-		class="accent-jelinek-brown"
+		class="accent-jelinek-black"
 	/>
 	{label}
 </label>

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

@@ -3,6 +3,7 @@ interface Props {
     value: string;
     label: string;
     id?: string;
+    disabled?: boolean;
     class?: string;
 }
 type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value' | 'type' | 'name'>;