@jelinek/ui 0.9.0 → 0.9.1

package/dist/components/commerce/SearchField.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		value?: string;
+		/** Popisek pro čtečky (pole nemá viditelný label). */
+		label?: string;
+		placeholder?: string;
+		/** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+		onsearch?: (query: string) => void;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		label = 'Hledat',
+		placeholder = 'Hledat…',
+		onsearch,
+		disabled = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value'> = $props();
+
+	// Field chrome is TextField's BASE verbatim (border-fg-muted2, 11px/14px
+	// padding, 0.98rem, tokenised focus ring — see TextField.svelte for the
+	// full provenance notes), with left padding widened for the magnifier and
+	// right padding for the clear button. type="search" is NOT used: WebKit
+	// draws its own clear control there, which would double up with ours.
+	const FIELD =
+		'w-full rounded-button border border-fg-muted2 bg-surface py-[11px] pr-11 pl-11 ' +
+		'font-secondary font-light text-[0.98rem] text-fg placeholder:text-fg-muted2 ' +
+		'focus:outline-[length:var(--focus-width)] focus:outline-offset-1 ' +
+		'focus:outline-[var(--focus-color)] focus:border-[var(--focus-color)]';
+	const DISABLED =
+		'cursor-not-allowed border-border-subtle bg-surface-gray text-fg-muted2 ' +
+		'placeholder:text-fg-muted2';
+</script>
+
+<!-- role="search" comes with the <search>/form pattern: submit = Enter, which
+     is how people actually search. The magnifier is decorative (the field's
+     accessible name carries the meaning), the clear button is a real button. -->
+<form
+	role="search"
+	class={cn('relative', className)}
+	onsubmit={(e) => {
+		e.preventDefault();
+		onsearch?.(value);
+	}}
+>
+	<svg
+		viewBox="0 0 24 24"
+		class="pointer-events-none absolute top-1/2 left-3.5 size-5 -translate-y-1/2 text-fg-muted1"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		aria-hidden="true"
+	>
+		<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+	</svg>
+	<input
+		{...rest}
+		type="text"
+		aria-label={label}
+		{placeholder}
+		{disabled}
+		bind:value
+		class={cn(FIELD, disabled && DISABLED)}
+	/>
+	{#if value && !disabled}
+		<button
+			type="button"
+			aria-label="Vymazat hledání"
+			class="absolute top-1/2 right-2 inline-flex size-8 -translate-y-1/2 cursor-pointer
+				items-center justify-center rounded-button text-fg-muted1 transition-colors
+				duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg"
+			onclick={() => (value = '')}
+		>
+			<svg
+				viewBox="0 0 24 24"
+				class="size-4"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg
+			>
+		</button>
+	{/if}
+</form>

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

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    /** Popisek pro čtečky (pole nemá viditelný label). */
+    label?: string;
+    placeholder?: string;
+    /** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+    onsearch?: (query: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value'>;
+declare const SearchField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

package/dist/components/commerce/SideToggle.svelte

@@ -27,7 +27,7 @@
 
 <button
 	type="button"
-	class="rounded-card cursor-pointer border px-3 py-2.5 text-left transition-all duration-200 max-sm:px-2 max-sm:py-2 {active
+	class="rounded-card cursor-pointer border px-3 py-2.5 text-left font-secondary font-light transition-all duration-200 max-sm:px-2 max-sm:py-2 {active
 		? 'border-(--JELINEK-BROWN) bg-surface-gray shadow-resting'
 		: 'border-border-subtle bg-surface hover:border-(--text-muted2)'}"
 	aria-pressed={active}

package/dist/components/commerce/Skeleton.svelte

@@ -7,4 +7,7 @@
 	let { class: className = '' }: Props = $props();
 </script>
 
-<div class="animate-pulse rounded-card bg-surface-gray {className}" aria-hidden="true"></div>
+<!-- Shimmer místo pulzu (majitel, 14. 8. 2026) — projíždějící gradient,
+     definovaný v theme/extras.css (.skeleton-shimmer); tam je i klidová
+     varianta pro prefers-reduced-motion. -->
+<div class="skeleton-shimmer rounded-card {className}" aria-hidden="true"></div>

package/dist/components/commerce/StickyBar.svelte

@@ -9,8 +9,8 @@
 	let { visible, children }: Props = $props();
 </script>
 
-<!-- Glass strip under the kit's floating header card. z-40 keeps it BELOW the
-     header (SiteHeader is z-50) — any higher and the strip renders over the
+<!-- Glass strip under the kit's floating header card. --z-bar (40) keeps it
+     BELOW the header (--z-header, 50) — any higher and the strip renders over the
      card and its backdrop blur smears the whole top of the page. Top offset:
      var(--header-h) from 640px up so the strip hangs under the fixed card;
      top-0 on a phone, where the kit bar is absolute and has already scrolled
@@ -18,10 +18,10 @@
      left the viewport). -->
 <div
 	aria-hidden={!visible}
-	class="fixed inset-x-0 top-0 z-40 border-b border-(--glass-border) bg-(--glass-fill) backdrop-blur-[25px] backdrop-saturate-140 transition-transform duration-(--dur-base) min-[640px]:top-(--header-h)
+	class="fixed inset-x-0 top-0 z-(--z-bar) border-b border-(--glass-border) bg-(--glass-fill) backdrop-blur-[25px] backdrop-saturate-140 transition-transform duration-(--dur-base) min-[640px]:top-(--header-h)
 		{visible ? 'translate-y-0' : 'pointer-events-none -translate-y-[calc(100%+var(--header-h))]'}"
 >
-	<div class="max-w-page mx-auto flex w-full items-center gap-4 px-6 py-3">
+	<div class="max-w-page mx-auto flex w-full items-center gap-4 px-6 py-3 font-secondary font-light">
 		{@render children()}
 	</div>
 </div>

package/dist/components/commerce/StockBadge.svelte

@@ -33,12 +33,12 @@
 </script>
 
 {#if compact}
-	<span class="inline-flex items-center gap-1.5 text-(length:--step-down1) font-medium {config.cls}">
+	<span class="inline-flex items-center gap-1.5 font-secondary text-(length:--step-down1) font-medium {config.cls}">
 		<span class="size-2 rounded-pill {config.dot}"></span>{text}
 	</span>
 {:else}
 	<span
-		class="rounded-pill bg-surface-gray inline-flex items-center gap-2 px-3 py-1 text-(length:--step-down1) font-medium {config.cls}"
+		class="rounded-pill bg-surface-gray inline-flex items-center gap-2 px-3 py-1 font-secondary text-(length:--step-down1) font-medium {config.cls}"
 	>
 		<span class="size-2 rounded-pill {config.dot}"></span>{text}
 	</span>

package/dist/components/commerce/Toaster.svelte

@@ -17,16 +17,20 @@
 	onMount(() => toasts.subscribe((next) => (items = next)));
 </script>
 
-<!-- z-scale contract: header 1100, Drawer/Modal 1200+, search overlays 1400.
-     Toasts must clear all of it so an add-to-cart confirmation is never hidden
-     under a drawer/overlay — hence z-[1500]. -->
+<!-- Škála vrstev (jelinek.css :root): hlavička --z-header (50), Drawer/Modal
+     --z-overlay (1200), toasty nade vším — --z-toast (1500; potvrzení
+     o přidání do košíku nesmí zmizet pod drawerem). role="status"
+     + aria-live="polite": kontejner tu je trvale, takže čtečky ohlásí každý
+     toast, který do něj přibude — dřív byly hlášky pro čtečky němé (EAA). -->
 <div
-	class="pointer-events-none fixed inset-x-0 bottom-6 z-[1500] flex flex-col items-center gap-2 {className}"
+	role="status"
+	aria-live="polite"
+	class="pointer-events-none fixed inset-x-0 bottom-6 z-(--z-toast) flex flex-col items-center gap-2 {className}"
 >
 	{#each items as t (t.id)}
 		<div
 			transition:fly={{ y: 16, duration: 200 }}
-			class="rounded-pill text-fg-inverse shadow-interactive pointer-events-auto bg-(--bg-black) px-5 py-2.5 text-(length:--step-down1) font-medium"
+			class="rounded-pill text-fg-inverse shadow-interactive pointer-events-auto bg-(--bg-black) px-5 py-2.5 font-secondary text-(length:--step-down1) font-medium"
 		>
 			{t.message}
 		</div>

package/dist/components/commerce/TrustBadges.svelte

@@ -17,7 +17,7 @@
 <div class={overlay ? 'absolute inset-x-3 bottom-3 flex flex-wrap gap-2' : 'flex flex-wrap gap-2'}>
 	{#each items as item (item.label)}
 		<span
-			class="rounded-pill flex items-center gap-1.5 bg-(--glass-fill) px-3 py-1.5 text-(length:--step-down2) font-medium backdrop-blur-[25px]"
+			class="rounded-pill flex items-center gap-1.5 bg-(--glass-fill) px-3 py-1.5 font-secondary text-(length:--step-down2) font-medium backdrop-blur-[25px]"
 		>
 			<item.icon class="size-3.5" />
 			{item.label}

package/dist/components/commerce/overlay.d.ts

@@ -10,3 +10,17 @@ export declare function portal(node: HTMLElement): {
 };
 /** Lock body scroll; returns the unlock function (for use inside $effect). */
 export declare function lockScroll(): () => void;
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export declare function rememberFocus(): () => void;

package/dist/components/commerce/overlay.js

@@ -18,3 +18,52 @@ export function lockScroll() {
         document.body.style.overflow = prev;
     };
 }
+// Co se v překryvu dá zaostřit tabulátorem. Bez filtru viditelnosti —
+// otevřený overlay svůj obsah zobrazuje celý a jsdom (unit testy)
+// offsetParent nezná.
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), ' +
+    'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export function trapFocus(container) {
+    const onKey = (e) => {
+        if (e.key !== 'Tab')
+            return;
+        const items = Array.from(container.querySelectorAll(FOCUSABLE));
+        if (items.length === 0) {
+            e.preventDefault();
+            container.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey && (active === first || active === container)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    container.addEventListener('keydown', onKey);
+    return () => container.removeEventListener('keydown', onKey);
+}
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export function rememberFocus() {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    return () => {
+        if (opener && document.contains(opener))
+            opener.focus();
+    };
+}

package/dist/index.d.ts

@@ -10,6 +10,13 @@ export { type CartLine } from './components/commerce/cart-types.js';
 export { default as ChapterNav } from './components/ChapterNav.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as CheckoutProgress } from './components/commerce/CheckoutProgress.svelte';
+export { default as CmsButton } from './components/blocks/CmsButton.svelte';
+export { default as CmsColumns } from './components/blocks/CmsColumns.svelte';
+export { default as CmsCover } from './components/blocks/CmsCover.svelte';
+export { default as CmsHeading } from './components/blocks/CmsHeading.svelte';
+export { default as CmsImage } from './components/blocks/CmsImage.svelte';
+export { default as CmsMediaText } from './components/blocks/CmsMediaText.svelte';
+export { default as CmsText } from './components/blocks/CmsText.svelte';
 export { default as CodeCopy } from './components/CodeCopy.svelte';
 export { default as ConfigSection } from './components/commerce/ConfigSection.svelte';
 export { CONTAINER_CONTEXT } from './components/container-context.js';
@@ -18,19 +25,23 @@ export { default as ContentLogo } from './components/ContentLogo.svelte';
 export { default as Demo } from './components/Demo.svelte';
 export { default as DimensionSlider } from './components/commerce/DimensionSlider.svelte';
 export { default as Drawer } from './components/commerce/Drawer.svelte';
+export { default as EmptyState } from './components/commerce/EmptyState.svelte';
 export { default as Eyebrow } from './components/Eyebrow.svelte';
+export { default as FilterChip } from './components/commerce/FilterChip.svelte';
 export { formatMoney, formatPrice } from './components/commerce/money.js';
 export { default as FreeShippingBar } from './components/commerce/FreeShippingBar.svelte';
 export { default as Gallery } from './components/commerce/Gallery.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as Grid } from './components/Grid.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListingToolbar } from './components/commerce/ListingToolbar.svelte';
 export { default as Modal } from './components/commerce/Modal.svelte';
 export { isActive, type NavItem, type NavGroup } from './components/nav.js';
 export { default as OptionTile } from './components/OptionTile.svelte';
 export { default as OrderSummary } from './components/commerce/OrderSummary.svelte';
 export { default as PageHero } from './components/PageHero.svelte';
 export { default as Pager } from './components/Pager.svelte';
+export { default as Pagination } from './components/commerce/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PhotoTile } from './components/PhotoTile.svelte';
 export { default as PriceDisplay } from './components/commerce/PriceDisplay.svelte';
@@ -43,6 +54,7 @@ export { default as Radio } from './components/Radio.svelte';
 export { default as RatingStars } from './components/commerce/RatingStars.svelte';
 export { RADIO_CONTEXT, type RadioContext } from './components/radio-context.js';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchField } from './components/commerce/SearchField.svelte';
 export { default as Select } from './components/Select.svelte';
 export { portal } from './components/commerce/overlay.js';
 export { default as SideToggle } from './components/commerce/SideToggle.svelte';
@@ -53,10 +65,12 @@ export { default as Slider } from './components/Slider.svelte';
 export { default as StickyBar } from './components/commerce/StickyBar.svelte';
 export { default as StockBadge } from './components/commerce/StockBadge.svelte';
 export { default as Swatch } from './components/Swatch.svelte';
+export { default as Switch } from './components/Switch.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { TABS_CONTEXT, type TabsContext } from './components/tabs-context.js';
 export { default as Tag } from './components/Tag.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
 export { default as TextField } from './components/TextField.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Tile } from './components/Tile.svelte';

package/dist/index.js

@@ -10,6 +10,13 @@ export {} from './components/commerce/cart-types.js';
 export { default as ChapterNav } from './components/ChapterNav.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as CheckoutProgress } from './components/commerce/CheckoutProgress.svelte';
+export { default as CmsButton } from './components/blocks/CmsButton.svelte';
+export { default as CmsColumns } from './components/blocks/CmsColumns.svelte';
+export { default as CmsCover } from './components/blocks/CmsCover.svelte';
+export { default as CmsHeading } from './components/blocks/CmsHeading.svelte';
+export { default as CmsImage } from './components/blocks/CmsImage.svelte';
+export { default as CmsMediaText } from './components/blocks/CmsMediaText.svelte';
+export { default as CmsText } from './components/blocks/CmsText.svelte';
 export { default as CodeCopy } from './components/CodeCopy.svelte';
 export { default as ConfigSection } from './components/commerce/ConfigSection.svelte';
 export { CONTAINER_CONTEXT } from './components/container-context.js';
@@ -18,19 +25,23 @@ export { default as ContentLogo } from './components/ContentLogo.svelte';
 export { default as Demo } from './components/Demo.svelte';
 export { default as DimensionSlider } from './components/commerce/DimensionSlider.svelte';
 export { default as Drawer } from './components/commerce/Drawer.svelte';
+export { default as EmptyState } from './components/commerce/EmptyState.svelte';
 export { default as Eyebrow } from './components/Eyebrow.svelte';
+export { default as FilterChip } from './components/commerce/FilterChip.svelte';
 export { formatMoney, formatPrice } from './components/commerce/money.js';
 export { default as FreeShippingBar } from './components/commerce/FreeShippingBar.svelte';
 export { default as Gallery } from './components/commerce/Gallery.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as Grid } from './components/Grid.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListingToolbar } from './components/commerce/ListingToolbar.svelte';
 export { default as Modal } from './components/commerce/Modal.svelte';
 export { isActive } from './components/nav.js';
 export { default as OptionTile } from './components/OptionTile.svelte';
 export { default as OrderSummary } from './components/commerce/OrderSummary.svelte';
 export { default as PageHero } from './components/PageHero.svelte';
 export { default as Pager } from './components/Pager.svelte';
+export { default as Pagination } from './components/commerce/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PhotoTile } from './components/PhotoTile.svelte';
 export { default as PriceDisplay } from './components/commerce/PriceDisplay.svelte';
@@ -43,6 +54,7 @@ export { default as Radio } from './components/Radio.svelte';
 export { default as RatingStars } from './components/commerce/RatingStars.svelte';
 export { RADIO_CONTEXT } from './components/radio-context.js';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchField } from './components/commerce/SearchField.svelte';
 export { default as Select } from './components/Select.svelte';
 export { portal } from './components/commerce/overlay.js';
 export { default as SideToggle } from './components/commerce/SideToggle.svelte';
@@ -53,10 +65,12 @@ export { default as Slider } from './components/Slider.svelte';
 export { default as StickyBar } from './components/commerce/StickyBar.svelte';
 export { default as StockBadge } from './components/commerce/StockBadge.svelte';
 export { default as Swatch } from './components/Swatch.svelte';
+export { default as Switch } from './components/Switch.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { TABS_CONTEXT } from './components/tabs-context.js';
 export { default as Tag } from './components/Tag.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
 export { default as TextField } from './components/TextField.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Tile } from './components/Tile.svelte';

package/dist/theme/base.css

@@ -253,6 +253,25 @@
 			color var(--dur-slow) var(--ease);
 	}
 
+	/* KURZÍVA SE NEPOUŽÍVÁ NIKDY (brand → Typografie; majitel 14. 8. 2026) —
+	   žádné písmo značky nemá skloněný řez a prohlížeč by si ho syntetizoval.
+	   <em>/<i> se narovnává a zvýrazňuje tučně („ke zvýraznění slouží tučné
+	   řezy“). Mirrors the identical rule in jelinek.css. */
+	em,
+	i {
+		font-style: normal;
+		font-weight: 700;
+	}
+
+	/* <strong> pinned to Bold: the default `bolder` is RELATIVE — one step
+	   up from Light (300) is Regular (400), a face outside the role system.
+	   Contexts with their own rule (.card strong = Medium, Demo's
+	   [&_strong]:font-medium utility) still win on specificity/layer. */
+	b,
+	strong {
+		font-weight: 700;
+	}
+
 	/* jelinek.css:316. The one flex child that should actually grow — header,
 	   chapter-nav and footer keep their natural (content) height; whatever
 	   space is left over goes to <main>, pushing the footer down to the
@@ -372,6 +391,9 @@
 	}
 	.serif {
 		font-family: var(--font-serif);
+		/* Archer only has Book (400) and Bold — a surrounding Light must not
+		   be inherited into serif text. */
+		font-weight: 400;
 	}
 	.small {
 		font-size: var(--step-down1);

package/dist/theme/extras.css

@@ -19,3 +19,47 @@
 [data-division='mattress'] {
 	--color-accent-text: var(--color-accent-text-mattress);
 }
+
+/* Jelen je jen hnědý, nebo bílý (brand → Znak, Užití s produktovými
+   barvami): divizní přetéma přemapovává --JELINEK-BROWN na magentu, ale pro
+   jelena je to zakázaný stav — pod divizí Zdravý spánek přechází KAŽDÉ
+   obsahové logo na bílou, divizní barvu jelena. Zrcadlí stejné pravidlo
+   v jelinek.css u .content-logo. */
+[data-division='mattress'] [data-content-logo],
+[data-theme='mattress'] [data-content-logo] {
+	color: var(--color-fg-inverse);
+}
+
+/* Skeleton shimmer (majitel, 14. 8. 2026): placeholder při načítání nese
+   projíždějící světlý gradient, jak je dnes zvykem — ne jen pulz. Barvy
+   jsou tokeny (klidová --bg-gray, projíždějící světlo --bg-white), takže
+   se v tmavém režimu překlopí samy. Smyčka 1,5 s je vlastní hodnota:
+   pohybové tokeny (--dur-*) popisují přechody stavů, ne nekonečné smyčky.
+   Kdo si v systému vypnul animace, dostane klidnou plochu — první kousek
+   prefers-reduced-motion v kitu (zásobník: Ohled na omezení pohybu). */
+@keyframes skeleton-shimmer {
+	to {
+		transform: translateX(100%);
+	}
+}
+.skeleton-shimmer {
+	position: relative;
+	overflow: hidden;
+	background: var(--color-surface-gray);
+}
+/* Světelný pás jede přes celou plochu jako vrstva nad ní (transform, ne
+   background-position) — na malém řádku i velké fotce je pohyb stejně
+   viditelný a nemá hluchá místa. */
+.skeleton-shimmer::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	transform: translateX(-100%);
+	background: linear-gradient(90deg, transparent, var(--color-surface) 55%, transparent);
+	animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.skeleton-shimmer::after {
+		content: none;
+	}
+}

package/dist/theme/fonts.css

@@ -21,13 +21,12 @@
 
    Reconciled against assets/css/jelinek.css's @font-face block (the
    authority for which faces exist): every face declared there is declared
-   here too, with the same family name, weight and filename. That now
-   includes Archer Medium (500) — the file had been in assets/fonts/ and in
-   its README since 03ee9de, but with no @font-face anywhere, so any request
-   for a 500-weight Archer silently fell back to Book. Declaring it makes
-   the README true and gives the designer the option of Medium emphasis in
-   prose; nothing requests it yet (prose <strong> is plain Bold, his
-   7cd378c). */
+   here too, with the same family name, weight and filename. Only the ROLE
+   faces are loaded (majitel, 21. 8. 2026): Walsheim Light/Medium/Bold,
+   Archer Book/Bold, Avenir Demi (logo subtitle). Regular, Black, Avenir
+   Regular/Bold and Archer Medium stay in assets/fonts/ for other projects,
+   but the web never declares them — a stray request falls back and the
+   font-faces e2e catches it. */
 @font-face {
 	font-family: 'GT Walsheim Pro';
 	src: url('/assets/fonts/GT-Walsheim-Pro-Light.woff2') format('woff2');
@@ -35,13 +34,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'GT Walsheim Pro';
-	src: url('/assets/fonts/GT-Walsheim-Pro-Regular.woff2') format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'GT Walsheim Pro';
 	src: url('/assets/fonts/GT-Walsheim-Pro-Medium.woff2') format('woff2');
@@ -56,20 +48,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'GT Walsheim Pro';
-	src: url('/assets/fonts/GT-Walsheim-Pro-Black.woff2') format('woff2');
-	font-weight: 900;
-	font-style: normal;
-	font-display: block;
-}
-@font-face {
-	font-family: 'Avenir Next LT Pro';
-	src: url('/assets/fonts/AvenirNextLTPro-Regular.woff2') format('woff2');
-	font-weight: 400;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Avenir Next LT Pro';
 	src: url('/assets/fonts/AvenirNextLTPro-Demi.woff2') format('woff2');
@@ -77,13 +55,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'Avenir Next LT Pro';
-	src: url('/assets/fonts/AvenirNextLTPro-Bold.woff2') format('woff2');
-	font-weight: 700;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Archer';
 	src: url('/assets/fonts/Archer-Book.woff2') format('woff2');
@@ -91,13 +62,6 @@
 	font-style: normal;
 	font-display: block;
 }
-@font-face {
-	font-family: 'Archer';
-	src: url('/assets/fonts/Archer-Medium.woff2') format('woff2');
-	font-weight: 500;
-	font-style: normal;
-	font-display: block;
-}
 @font-face {
 	font-family: 'Archer';
 	src: url('/assets/fonts/Archer-Bold.woff2') format('woff2');

package/dist/theme/tokens.css

@@ -16,8 +16,8 @@
   --ON-JELINEK-BLACK: hsl(0, 0%, 95%);
   --bg-white: hsl(0, 0%, 100%);
   --bg-gray: hsl(0, 0%, 95%);
-  --bg-brown: hsl(29, 44%, 95%);
-  --bg-magenta: hsl(324, 100%, 95%);
+  --bg-brown: hsl(27, 58%, 96.3%);
+  --bg-magenta: hsl(324, 85%, 92%);
   --bg-black: hsl(0, 0%, 0%);
   --border-subtle: hsl(0, 0%, 91%);
   --text-black: hsl(0, 0%, 5%);
@@ -45,13 +45,20 @@
   --glass-fill: hsl(0, 0%, 100%, 0.5);
   --glass-border: hsl(0, 0%, 100%, 0.75);
   --glass-filter: blur(25px) saturate(140%);
-  --focus-color: var(--JELINEK-BROWN);
+  --overlay-scrim: hsl(0, 0%, 0%, 0.5);
+  --overlay-filter: blur(4px);
+  --z-bar: 40;
+  --z-chapter-nav: 49;
+  --z-header: 50;
+  --z-overlay: 1200;
+  --z-toast: 1500;
+  --focus-color: var(--JELINEK-BLACK);
   --focus-width: 2px;
   --focus-offset: 2px;
-  --font-primary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
+  --font-primary: "GT Walsheim Pro", "Arial Black", Arial, Helvetica, sans-serif;
   --font-secondary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
-  --font-serif: "Archer", Georgia, "Times New Roman", serif;
-  --page-max: 1180px;
+  --font-serif: "Archer", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
+  --page-max: 1480px;
   --header-h: 70px;
   --subnav-h: 58px;
   --step0: 1rem;
@@ -82,8 +89,8 @@
 .dark {
   --bg-white: hsl(0, 0%, 5%);
   --bg-gray: hsl(0, 0%, 15%);
-  --bg-brown: hsl(29, 44%, 10%);
-  --bg-magenta: hsl(324, 100%, 10%);
+  --bg-brown: hsl(27, 58%, 10%);
+  --bg-magenta: hsl(324, 85%, 10%);
   --bg-black: hsl(0, 0%, 0%);
   --text-black: hsl(0, 0%, 92%);
   --text-muted1: hsl(0, 0%, 62%);
@@ -105,7 +112,7 @@
   --sem-error-strong: hsl(5, 100%, 54%);
   --glass-fill: hsl(0, 0%, 0%, 0.6);
   --glass-border: hsl(0, 0%, 100%, 0.25);
-  --focus-color: var(--JELINEK-BROWN-HIGHLIGHT);
+  --focus-color: var(--JELINEK-BLACK);
   --border-subtle: hsl(0, 0%, 20%);
   --border-highlight-white: hsl(0, 0%, 40%);
   --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.063), 0px 12px 12px hsl(0, 0%, 0%, 0.188);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jelinek/ui",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
   "license": "UNLICENSED",
   "type": "module",