@jelinek/ui 0.9.1 → 0.9.2

package/README.md

@@ -26,7 +26,7 @@ Packages for a package that is no longer published there:
 ```json
 {
   "dependencies": {
-    "@jelinek/ui": "^0.4.0"
+    "@jelinek/ui": "^0.9.2"
   }
 }
 ```
@@ -365,10 +365,7 @@ as before; the DOM-seeding only applies when it's left unbound.
 
 ## Components
 
-Alert, Button, Card, ChapterNav, Checkbox, CodeCopy, Container, ContentLogo,
-Demo, Eyebrow, Glass, Grid, Label, PageHero, Pager, Panel, ProductCard, Radio,
-RadioGroup, Select, SiteFooter, SiteHeader, Slider, Swatch, Tab, Tabs, Tag,
-TextField, ThemeToggle, Tile, TileScroller.
+Alert, Breadcrumbs, Button, Card, CartDrawer, CartLineItem, ChapterNav, Checkbox, CheckoutProgress, CmsButton, CmsColumns, CmsCover, CmsHeading, CmsImage, CmsMediaText, CmsText, CodeCopy, ConfigSection, Container, ContentLogo, Demo, DimensionSlider, Drawer, EmptyState, Eyebrow, FilterChip, FreeShippingBar, Gallery, Glass, Grid, Icon, Label, ListingToolbar, Modal, OptionTile, OrderSummary, PageHero, Pager, Pagination, Panel, PhotoTile, PriceDisplay, ProductCard, ProductHeader, ProductStickyBar, ProductTabs, QuantityStepper, Radio, RadioGroup, RatingStars, SearchField, Select, SideToggle, SiteFooter, SiteHeader, Skeleton, Slider, StickyBar, StockBadge, Swatch, Switch, Tab, Tabs, Tag, TextField, Textarea, ThemeToggle, Tile, TileScroller, Toaster, TrustBadges.
 
 See `src/lib/index.ts` for the exact export list and `src/lib/components/`
 for source. Per-component contracts, including the two below, are printed at
@@ -395,6 +392,22 @@ showcase's `+layout.svelte` both model it. And below 640px `ChapterNav` renders
 nothing at all: pass the same chapter list to `SiteHeader`'s `chapterItems` so
 a phone reader can still reach the chapters from the menu panel.
 
+**`SiteHeader` — the way back to the company portal is `homeHref`, not a
+button in `actions`.** Company apps built from the templates link back to the
+rozcestník. Pass its URL as `homeHref` and the header renders a `home` icon
+(from the kit's icon set, no text) as the first item of the bar, at the far
+left before the logo, at every width including phones. It is a 44px square
+— the burger's size — rendered through the kit's own ghost/black `Button`,
+so hover, transition and the global focus-visible ring match the nav links.
+`homeLabel` (default `'Zpět na rozcestník'`) is its `aria-label` and `title`.
+Without `homeHref` the header is unchanged. Do not put a "Zpět na rozcestník"
+`Button` into `actions` any more: it sat on the right next to the nav links at
+a different size (owner's decision, 15. 9. 2026).
+
+```svelte
+<SiteHeader subtitle="Objednávky" items={menu} homeHref="https://jlnk.cz/" />
+```
+
 ## Sync contract — and its limits
 
 Two automated checks keep this kit from silently drifting away from the
@@ -413,6 +426,18 @@ never hand-edit it**; run `pnpm gen:tokens` and commit the result.
 Hand-written theme additions belong in `src/lib/theme/extras.css`, which
 the generator never touches.
 
+**`pnpm check:icons`** (`scripts/gen-icons.js --check`) does the same for
+the interface icon set: `src/lib/icons/material-icons.generated.ts` is
+generated from `assets/icons/material/` (Google icons as per-icon SVGs plus
+our own drawings in `vlastni/`) and fails if it is stale. The generator also
+refuses any SVG without `fill="currentColor"` on its root or carrying its
+own colours — an icon that would not re-theme. The module is **generated —
+never hand-edit it**; add or remove SVG files, run `pnpm gen:icons`, commit.
+It exists so that `<Icon name="…" />` works from the installed package:
+the earlier `import.meta.glob` reached outside `dist/` and only worked
+inside this repo (review, 1. 9. 2026). The whole set is ~18 kB gzipped and
+ships with the package.
+
 **`pnpm check:css-lock`** (`scripts/check-css-lock.js`) hashes the guide's
 CSS rule groups for two fixed, hardcoded allow-lists in that file:
 `GUARDED` — class names (`btn`, `tag`, `alert`, `tile`, `panel`, `input`,
@@ -525,11 +550,9 @@ code.
 
 The guide does not yet define everything this kit's consumers need. See:
 
-- `docs/chybejici-komponenty.md` — missing interface components (icons,
-  form states, modals/toasts, tables, e-shop pieces, navigation), with
-  priority.
-- `docs/chybejici-bloky-cms.md` — the 16 CMS content blocks that exist in
-  code but were never designed against the brand guide.
+- `/audit.html#plan-prace` — the single work plan (formerly the two backlog
+  documents): missing interface components, the CMS content blocks still to
+  be designed, admin components, with priority and deadline.
 
 Five components in this kit have **no corresponding CSS in the guide** and
 were necessarily invented rather than reimplemented: `Checkbox`, `Radio`,

package/dist/components/Icon.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { materialIcon } from '../icons/material.js';
+
+	/**
+	 * Ikona rozhraní — Google icons (Material Symbols Rounded) jako inline SVG
+	 * (rozhodnutí majitele 28. 8. 2026: soubory, ne ikonové písmo; pravidla
+	 * v kapitole /ui/ikony).
+	 *
+	 * `name` je přesné jméno ikony z fonts.google.com/icons (shopping_cart,
+	 * search, favorite…) = jméno souboru v assets/icons/material/. Soubor se
+	 * vloží inline, takže `fill="currentColor"` dědí barvu okolního textu;
+	 * neexistující jméno spadne hned při vykreslení (loader hlásí překlep
+	 * i chybějící stažení). Obal .icon (extras.css) dává rozměr 20 px
+	 * a posazení na účaří; `size` ho přepíše. Plná varianta (`fill`) sahá po
+	 * souboru `<name>_fill.svg` — existuje jen tam, kde ji stavy potřebují
+	 * (star, favorite…), jinak loader spadne a fill variantu je potřeba
+	 * nejdřív stáhnout. Ikona je čtečkám skrytá, ledaže dostane `label`.
+	 */
+	interface Props {
+		name: string;
+		/** Plná varianta pro aktivní/vybraný stav — soubor `<name>_fill.svg`. */
+		fill?: boolean;
+		/** Popisek pro čtečky; bez něj je ikona dekorace (aria-hidden). */
+		label?: string;
+		/** Velikost v px (šířka i výška). Výchozích 20 px dává utilita .icon. */
+		size?: number;
+		class?: string;
+	}
+
+	let {
+		name,
+		fill = false,
+		label,
+		size,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLSpanElement> = $props();
+
+	const svg = $derived(materialIcon(fill ? `${name}_fill` : name));
+</script>
+
+<span
+	{...rest}
+	class={cn('icon', className)}
+	style:width={size ? `${size}px` : undefined}
+	style:height={size ? `${size}px` : undefined}
+	role={label ? 'img' : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : 'true'}>{@html svg}</span
+>

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

@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Ikona rozhraní — Google icons (Material Symbols Rounded) jako inline SVG
+ * (rozhodnutí majitele 28. 8. 2026: soubory, ne ikonové písmo; pravidla
+ * v kapitole /ui/ikony).
+ *
+ * `name` je přesné jméno ikony z fonts.google.com/icons (shopping_cart,
+ * search, favorite…) = jméno souboru v assets/icons/material/. Soubor se
+ * vloží inline, takže `fill="currentColor"` dědí barvu okolního textu;
+ * neexistující jméno spadne hned při vykreslení (loader hlásí překlep
+ * i chybějící stažení). Obal .icon (extras.css) dává rozměr 20 px
+ * a posazení na účaří; `size` ho přepíše. Plná varianta (`fill`) sahá po
+ * souboru `<name>_fill.svg` — existuje jen tam, kde ji stavy potřebují
+ * (star, favorite…), jinak loader spadne a fill variantu je potřeba
+ * nejdřív stáhnout. Ikona je čtečkám skrytá, ledaže dostane `label`.
+ */
+interface Props {
+    name: string;
+    /** Plná varianta pro aktivní/vybraný stav — soubor `<name>_fill.svg`. */
+    fill?: boolean;
+    /** Popisek pro čtečky; bez něj je ikona dekorace (aria-hidden). */
+    label?: string;
+    /** Velikost v px (šířka i výška). Výchozích 20 px dává utilita .icon. */
+    size?: number;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLSpanElement>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/InfoBar.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import { INFO_BAR_COLORS, isActive, type InfoBarItem } from './info-bar.js';
+
+	/**
+	 * INFORMAČNÍ LIŠTA (majitel, 4. 9. 2026) — celoplošná sdělení nad menu:
+	 * celozávodní dovolená, doprava zdarma, otevírací doba o svátcích.
+	 *
+	 *  - Leží NAD hlavičkou a PŘES hero (absolute, jako hlavička): pozadí
+	 *    úvodního pásu běží pod ní i pod menu, žádný bílý pruh. Při rolování
+	 *    odjede, plovoucí hlavička se přilepí k hornímu okraji jako bez lišty.
+	 *    Lišta hlásí na <html> dvě proměnné: `--info-bar-h` (svou výšku — hero ji
+	 *    přičítá k rezervě pro hlavičku) a `--header-offset` (aktuální `top`
+	 *    hlavičky, od výšky lišty k nule podle rolování).
+	 *  - Tvar jako hlavička: plovoucí karta stejné šířky a zaoblení, na
+	 *    telefonu pruh od kraje ke kraji.
+	 *  - Výška podle obsahu — ale podle NEJVYŠŠÍHO sdělení: všechna jsou vykreslená
+	 *    přes sebe v jedné buňce mřížky a střídá se jen průhlednost, takže obsah pod
+	 *    lištou při přepnutí neposkočí (majitel, 4. 9. 2026). Křížek je u
+	 *    jednořádkového textu uprostřed výšky, u víceřádkového v pravém horním rohu.
+	 *  - Víc sdělení se střídá samo (výchozí 8 s), prolínáním; při najetí myší
+	 *    nebo zaostření se střídání zastaví. Kdo má v systému omezený pohyb,
+	 *    dostane výměnu bez prolínání.
+	 *  - Křížek zavře jen aktuální sdělení; web si to pamatuje po dobu návštěvy
+	 *    (sessionStorage). Lišta zmizí, až když nezbývá co ukázat.
+	 *  - Každé sdělení může mít časové okno od–do včetně času; kontroluje se
+	 *    každou minutu, takže lišta zmizí i bez obnovení stránky.
+	 *  - Odkaz vpravo je TLAČÍTKO v neutrální barvě (majitel, 4. 9. 2026): černé
+	 *    z kapitoly Tlačítka. Na černé liště se neutrální tokeny přemapují jako
+	 *    v tmavém režimu, takže je bílé s černým textem a hover má podle pravidel.
+	 *    Značkový akcent v liště nepoužíváme, sdělení nese barva samotné lišty.
+	 */
+	interface Props {
+		items: InfoBarItem[];
+		/** Střídání sdělení v ms. */
+		interval?: number;
+		/** Klíč v sessionStorage se zavřenými sděleními. */
+		storageKey?: string;
+		/** Posouvat plovoucí hlavičku pod lištu (vypnout v ukázkách uvnitř stránky). */
+		offsetHeader?: boolean;
+		/** „Teď“ pro časová okna — přepisuje se jen v testech a ukázkách. */
+		now?: Date;
+		class?: string;
+	}
+
+	let {
+		items,
+		interval = 8000,
+		storageKey = 'jelinek-info-bar',
+		offsetHeader = true,
+		now: nowProp,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	let closed = $state<string[]>([]);
+	// svelte-ignore state_referenced_locally — výchozí hodnota, dál se řídí hodinami v onMount
+	let now = $state(nowProp ?? new Date());
+	let index = $state(0);
+	let paused = $state(false);
+	let single = $state<Record<string, boolean>>({});
+
+	const visible = $derived(items.filter((i) => !closed.includes(i.id) && isActive(i, now)));
+	const current = $derived(visible[Math.min(index, Math.max(visible.length - 1, 0))]);
+
+	function readClosed(): string[] {
+		try {
+			return JSON.parse(sessionStorage.getItem(storageKey) ?? '[]');
+		} catch {
+			return [];
+		}
+	}
+	function close(id: string) {
+		closed = [...closed, id];
+		try {
+			sessionStorage.setItem(storageKey, JSON.stringify(closed));
+		} catch {
+			/* soukromý režim bez úložiště — lišta se zavře jen pro tuto stránku */
+		}
+		index = 0;
+	}
+
+	function advance() {
+		if (paused || visible.length < 2) return;
+		index = (index + 1) % visible.length;
+	}
+
+	// ODHAD VÝŠKY PŘED HYDRATACÍ (majitel, 4. 9. 2026: „menu nejdřív zčerná“).
+	// Než doběhne JS a lišta se změří, seděla hlavička na top:0 — tedy PŘES
+	// černou lištu, a skleněná karta nad černou vypadá černě. Proto se do <head>
+	// vykreslí odhad --header-offset / --info-bar-h už při prerenderu: řádek
+	// textu ≈ 20 px, svislé okraje 24 px, na desktopu horní mezera 12 px; na
+	// telefonu se odhadne zalomení (~34 znaků na řádek). JS pak hodnotu opraví
+	// přesným měřením, případný rozdíl je pár pixelů, žádný černý záblesk.
+	const LINE = 20;
+	function estimate(phone: boolean): number {
+		let lines = 1;
+		for (const i of visible) {
+			const width = phone ? 34 : 90;
+			const titleLines = i.title ? Math.max(1, Math.ceil(i.title.length / (phone ? 30 : 80))) : 0;
+			const n = titleLines + Math.max(1, Math.ceil(i.text.length / width));
+			lines = Math.max(lines, n);
+		}
+		return (phone ? 0 : 12) + 24 + LINE * lines;
+	}
+	const ssrCss = $derived(
+		offsetHeader && visible.length
+			? `:root{--header-offset:${estimate(false)}px;--info-bar-h:${estimate(false)}px}@media (max-width:639px){:root{--header-offset:${estimate(true)}px;--info-bar-h:${estimate(true)}px}}`
+			: ''
+	);
+
+	let wrap = $state<HTMLDivElement | null>(null);
+	let textEls = $state<Record<string, HTMLDivElement | null>>({});
+
+	// Výška lišty → posun hlavičky. Od 640 px je hlavička fixed: posun se
+	// zmenšuje s rolováním až na 0 (lišta odjela, menu se přilepilo nahoru).
+	// Na telefonu je hlavička absolute a roluje s obsahem: posun = výška lišty.
+	function updateOffset() {
+		if (!offsetHeader || typeof document === 'undefined') return;
+		const root = document.documentElement;
+		const h = wrap?.offsetHeight ?? 0;
+		if (!h) {
+			root.style.removeProperty('--header-offset');
+			root.style.removeProperty('--info-bar-h');
+			return;
+		}
+		root.style.setProperty('--info-bar-h', `${h}px`);
+		const fixed = matchMedia('(min-width: 640px)').matches;
+		root.style.setProperty('--header-offset', `${fixed ? Math.max(0, h - window.scrollY) : h}px`);
+	}
+
+	function updateLines() {
+		const next: Record<string, boolean> = {};
+		for (const [id, el] of Object.entries(textEls)) {
+			if (!el) continue;
+			const lh = parseFloat(getComputedStyle(el).lineHeight) || 20;
+			next[id] = el.offsetHeight <= lh * 1.5;
+		}
+		single = next;
+	}
+
+	onMount(() => {
+		closed = readClosed();
+		if (!nowProp) now = new Date();
+		const tick = setInterval(advance, interval);
+		const clock = nowProp ? null : setInterval(() => (now = new Date()), 60_000);
+		const onScroll = () => updateOffset();
+		window.addEventListener('scroll', onScroll, { passive: true });
+		window.addEventListener('resize', onScroll);
+		const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(() => { updateOffset(); updateLines(); }) : null;
+		if (ro && wrap) ro.observe(wrap);
+		return () => {
+			clearInterval(tick);
+			if (clock) clearInterval(clock);
+			window.removeEventListener('scroll', onScroll);
+			window.removeEventListener('resize', onScroll);
+			ro?.disconnect();
+			if (offsetHeader && typeof document !== 'undefined') {
+				document.documentElement.style.removeProperty('--header-offset');
+				document.documentElement.style.removeProperty('--info-bar-h');
+			}
+		};
+	});
+
+	$effect(() => {
+		// Nová lišta / jiná sada sdělení → přeměřit.
+		wrap; visible; textEls;
+		updateOffset();
+		updateLines();
+	});
+
+	// Stejná geometrie jako SiteHeader (OUTER/CARD): na telefonu pruh, od 640 px
+	// karta se stejným bočním okrajem, stropem šířky a zaoblením.
+	// Nad menu, přes hero: absolute jako hlavička (roluje s obsahem). V ukázkách
+	// uvnitř stránky (offsetHeader=false) zůstává v toku.
+	const WRAP = $derived(
+		(offsetHeader ? 'absolute inset-x-0 top-0 ' : 'relative ') + 'z-(--z-bar) min-[640px]:px-6 min-[640px]:pt-3'
+	);
+	// Všechna sdělení v jedné buňce mřížky (grid-area 1/1): mřížka má výšku
+	// nejvyššího z nich, viditelné je jen aktuální (ostatní průhledná a skrytá
+	// pro čtečky i klávesnici). Prolínání = přechod průhlednosti; komu systém
+	// omezuje pohyb, tomu ho `motion-reduce` vypne.
+	// grid-cols minmax(0,1fr) + min-w-0: bez toho by mřížka rostla podle
+	// nejdelšího slova a lišta na 320 px přetekla za okraj okna.
+	const STACK = 'mx-auto grid w-full max-w-page grid-cols-[minmax(0,1fr)]';
+	// flex-wrap + pravý vnitřní okraj pro křížek: na úzkém displeji tlačítko
+	// spadne pod text, křížek zůstává v rohu (je absolute).
+	const BAR =
+		'[grid-area:1/1] relative flex min-w-0 w-full flex-wrap gap-x-3 gap-y-2 py-3 pl-6 pr-14 font-secondary text-[0.9rem] leading-snug ' +
+		'shadow-resting transition-opacity duration-[var(--dur-base)] ease-[var(--ease)] motion-reduce:transition-none min-[640px]:rounded-card';
+	// Tlačítko v liště: vždy neutrální černé (Komponenty → Tlačítka), jen
+	// kompaktnější kvůli výšce lišty. Na černé liště ho čitelným dělá lokální
+	// přemapování neutrálních tokenů v INFO_BAR_COLORS.black (stejně jako tmavý
+	// režim a .demo--black): černé tlačítko je tam bílé s černým textem a hover
+	// jde na 60 % šedou — přesně stav „Černé“ z kapitoly Tlačítka v tmavém režimu.
+	const BTN = 'shrink-0 self-center px-4 py-2 text-[0.9rem]';
+	const CLOSE =
+		'absolute right-2 inline-flex h-11 w-11 cursor-pointer items-center justify-center rounded-button border-0 bg-transparent p-0 ' +
+		'text-current opacity-80 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-current';
+</script>
+
+<svelte:head>
+	<!-- {@html}: literální <style> by Svelte vzal jako styl komponenty, ne jako element. -->
+	{#if ssrCss}{@html `<style>${ssrCss}</style>`}{/if}
+</svelte:head>
+
+{#if current}
+	<div
+		{...rest}
+		bind:this={wrap}
+		class={cn(WRAP, className)}
+		data-info-bar
+		onmouseenter={() => (paused = true)}
+		onmouseleave={() => (paused = false)}
+		onfocusin={() => (paused = true)}
+		onfocusout={() => (paused = false)}
+	>
+		<div class={STACK}>
+			{#each visible as item, i (item.id)}
+				{@const isCurrent = item === current}
+				{@const oneLine = single[item.id] ?? true}
+				<div
+					role="region"
+					aria-label="Informační lišta"
+					aria-hidden={!isCurrent}
+					inert={!isCurrent}
+					class={cn(BAR, INFO_BAR_COLORS[item.color ?? 'black'], oneLine ? 'items-center' : 'items-start', !isCurrent && 'pointer-events-none opacity-0')}
+					data-color={item.color ?? 'black'}
+					data-current={isCurrent || undefined}
+				>
+					{#if item.icon}
+						<span class="shrink-0 {oneLine ? '' : 'mt-0.5'} [&_svg]:h-5 [&_svg]:w-5"><Icon name={item.icon} size={20} /></span>
+					{/if}
+					<div bind:this={textEls[item.id]} class="min-w-[10rem] flex-1 self-center">
+						{#if item.title}<strong class="block font-bold">{item.title}</strong>{/if}
+						<span class="font-light">{item.text}</span>
+					</div>
+					{#if item.href}
+						<Button href={item.href} color="black" class={BTN}>
+							{item.linkLabel ?? 'Více'}
+						</Button>
+					{/if}
+					<button type="button" class={cn(CLOSE, oneLine ? 'top-1/2 -translate-y-1/2' : 'top-1.5')} aria-label="Zavřít sdělení" title="Zavřít sdělení" onclick={() => close(item.id)}>
+						<Icon name="close" size={18} />
+					</button>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,46 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type InfoBarItem } from './info-bar.js';
+/**
+ * INFORMAČNÍ LIŠTA (majitel, 4. 9. 2026) — celoplošná sdělení nad menu:
+ * celozávodní dovolená, doprava zdarma, otevírací doba o svátcích.
+ *
+ *  - Leží NAD hlavičkou a PŘES hero (absolute, jako hlavička): pozadí
+ *    úvodního pásu běží pod ní i pod menu, žádný bílý pruh. Při rolování
+ *    odjede, plovoucí hlavička se přilepí k hornímu okraji jako bez lišty.
+ *    Lišta hlásí na <html> dvě proměnné: `--info-bar-h` (svou výšku — hero ji
+ *    přičítá k rezervě pro hlavičku) a `--header-offset` (aktuální `top`
+ *    hlavičky, od výšky lišty k nule podle rolování).
+ *  - Tvar jako hlavička: plovoucí karta stejné šířky a zaoblení, na
+ *    telefonu pruh od kraje ke kraji.
+ *  - Výška podle obsahu — ale podle NEJVYŠŠÍHO sdělení: všechna jsou vykreslená
+ *    přes sebe v jedné buňce mřížky a střídá se jen průhlednost, takže obsah pod
+ *    lištou při přepnutí neposkočí (majitel, 4. 9. 2026). Křížek je u
+ *    jednořádkového textu uprostřed výšky, u víceřádkového v pravém horním rohu.
+ *  - Víc sdělení se střídá samo (výchozí 8 s), prolínáním; při najetí myší
+ *    nebo zaostření se střídání zastaví. Kdo má v systému omezený pohyb,
+ *    dostane výměnu bez prolínání.
+ *  - Křížek zavře jen aktuální sdělení; web si to pamatuje po dobu návštěvy
+ *    (sessionStorage). Lišta zmizí, až když nezbývá co ukázat.
+ *  - Každé sdělení může mít časové okno od–do včetně času; kontroluje se
+ *    každou minutu, takže lišta zmizí i bez obnovení stránky.
+ *  - Odkaz vpravo je TLAČÍTKO v neutrální barvě (majitel, 4. 9. 2026): černé
+ *    z kapitoly Tlačítka. Na černé liště se neutrální tokeny přemapují jako
+ *    v tmavém režimu, takže je bílé s černým textem a hover má podle pravidel.
+ *    Značkový akcent v liště nepoužíváme, sdělení nese barva samotné lišty.
+ */
+interface Props {
+    items: InfoBarItem[];
+    /** Střídání sdělení v ms. */
+    interval?: number;
+    /** Klíč v sessionStorage se zavřenými sděleními. */
+    storageKey?: string;
+    /** Posouvat plovoucí hlavičku pod lištu (vypnout v ukázkách uvnitř stránky). */
+    offsetHeader?: boolean;
+    /** „Teď“ pro časová okna — přepisuje se jen v testech a ukázkách. */
+    now?: Date;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const InfoBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type InfoBar = ReturnType<typeof InfoBar>;
+export default InfoBar;

package/dist/components/PageHero.svelte

@@ -198,10 +198,14 @@
 	// different reason: the chapter bar is `display: none` below 640px (its
 	// entries move into the header's burger panel), so there is no strip to
 	// reserve until the bar exists.
+	//
+	// --info-bar-h (majitel, 4. 9. 2026): informační lišta nad menu leží PŘES hero
+	// jako hlavička a hlásí svou výšku na <html>; bez lišty je proměnná prázdná → 0.
+	// Pozadí hero tak běží pod lištou i pod menu, žádný bílý pruh nad hlavičkou.
 	const paddingTop = $derived(
 		hasChapterNav
-			? 'pt-[calc(var(--header-h)_+_28px)] min-[640px]:pt-[calc(var(--header-h)_+_var(--subnav-h)_+_20px)]'
-			: 'pt-[calc(var(--header-h)_+_28px)]'
+			? 'pt-[calc(var(--header-h)_+_var(--info-bar-h,0px)_+_28px)] min-[640px]:pt-[calc(var(--header-h)_+_var(--info-bar-h,0px)_+_var(--subnav-h)_+_20px)]'
+			: 'pt-[calc(var(--header-h)_+_var(--info-bar-h,0px)_+_28px)]'
 	);
 
 	// The heading-underline mechanism. jelinek.css draws this via

package/dist/components/SiteHeader.svelte

@@ -3,11 +3,14 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/cn.js';
 	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
 	import { createChapterNavDock } from '../utils/chapter-nav-dock.svelte.js';
 	import { DEER_MARK_PATH } from './deer-mark-path.js';
 	import { isActive, type NavGroup, type NavItem } from './nav.js';
 
 	interface Props {
+		/** Cíl odkazu „Přeskočit na obsah“ — id hlavního obsahu stránky. */
+		skipHref?: string;
 		/**
 		 * Escape hatch: a snippet rendering custom mark content in place of the
 		 * bundled, re-theming deer mark (e.g. a division-specific logo). Most
@@ -21,6 +24,20 @@
 		 * app is not rooted at `/`, e.g. mounted under a base path.
 		 */
 		logoHref?: string;
+		/**
+		 * Cesta zpět na firemní rozcestník. Když je zadaná, vykreslí se jako
+		 * PRVNÍ položka lišty, vlevo před znakem, ikona domečku (`home` ze sady
+		 * ikon) bez textu — na každé šířce, telefon včetně. Rozhodnutí majitele
+		 * 15. 9. 2026: firemní aplikace ze šablon tak nepotřebují tlačítko
+		 * „Zpět na rozcestník“ v `actions`, které vedle odkazů menu vypadalo
+		 * jinak velké. Bez této vlastnosti se hlavička nemění.
+		 */
+		homeHref?: string;
+		/**
+		 * Přístupný název ikony domečku (`aria-label` i `title`). Ikona nemá
+		 * viditelný text, takže tohle je jediné, co přečte čtečka.
+		 */
+		homeLabel?: string;
 		subtitle?: string;
 		items?: NavItem[];
 		active?: string;
@@ -98,9 +115,12 @@
 	}
 
 	let {
+		skipHref = '#hlavni-obsah',
 		logo,
 		logoAlt = 'JELÍNEK',
 		logoHref = '/',
+		homeHref,
+		homeLabel = 'Zpět na rozcestník',
 		subtitle,
 		items = [],
 		active,
@@ -339,8 +359,14 @@
 	// (`--header-h`/`--subnav-h` are exported passthrough tokens precisely so a
 	// consumer's own layout can do that). PageHero and the showcase's
 	// `+layout.svelte` model exactly that.
+	// .skip-link z jelinek.css: mimo obraz, dokud nemá fokus z klávesnice.
+	const SKIP =
+		'absolute top-3 left-3 z-[60] rounded-button bg-jelinek-black px-4 py-2.5 font-primary font-bold text-on-jelinek-black no-underline ' +
+		'-translate-y-[200%] opacity-0 focus-visible:translate-y-0 focus-visible:opacity-100';
 	const OUTER =
-		'absolute inset-x-0 top-0 z-(--z-header) p-0 [--logo-mark:46px] ' +
+		// top = --header-offset: InfoBar (lišta nad menu) ji nastaví na svou výšku
+		// a při rolování stahuje k nule; bez lišty je proměnná prázdná → 0.
+		'absolute inset-x-0 top-[var(--header-offset,0px)] z-(--z-header) p-0 [--logo-mark:46px] ' +
 		'min-[640px]:fixed min-[640px]:px-6 min-[640px]:py-3';
 	// Task 43 — the glass card no longer IS the flex row: the row (logo,
 	// lockup, burger, nav) moved into its own .site-header__bar-equivalent
@@ -377,6 +403,23 @@
 	// (leading-none), border-radius:radius-button, overflow hidden — the
 	// mark itself is a square var(--logo-mark) box.
 	const LOGO_LINK = 'inline-flex flex-none leading-none rounded-button overflow-hidden';
+
+	// HOME LINK (`homeHref`). Not guide markup — partials/header.html has no
+	// way back to a portal, because the guide IS the rozcestník; this is a
+	// consumer seam for company apps built from the templates. Rendered through
+	// this kit's own <Button variant="ghost" color="black">, like NAV_LINK, so
+	// the hover colour, transition and flat shadow are the button system's and
+	// cannot drift. The override only reshapes it into the BURGER's 44px square
+	// (`h-11 w-11 p-0`, cn() merges it last so it beats Button's padding); the
+	// focus ring is the global :focus-visible rule every link gets. The icon is
+	// 28px (owner, 15. 9. 2026: at 24px the weight-300 glyph read too light
+	// next to the burger); the hit target stays 44px. The 28px box goes through
+	// Icon's `size` (an inline style), not `w-7 h-7`: the `.icon` rule in
+	// extras.css is unlayered and would beat a layered utility. The SVG itself
+	// is sized here too, because `.icon > svg` filling its box also lives in
+	// extras.css, which is optional — without it the SVG would keep its 20px
+	// attributes inside the 28px span.
+	const HOME_LINK = 'h-11 w-11 flex-none gap-0 p-0 [&_svg]:block [&_svg]:h-7 [&_svg]:w-7';
 	const MARK = 'block h-[var(--logo-mark)] w-[var(--logo-mark)]';
 
 	// jelinek.css:447 (.site-header__title): font-primary (GT Walsheim),
@@ -700,8 +743,24 @@
 {/snippet}
 
 <header {...rest} bind:this={headerEl} class={cn(OUTER, className)}>
+	<!-- Přeskočit na obsah (/ui/pristupnost): první prvek v pořadí Tabu, vidět jen
+	     se zaostřením z klávesnice. Cíl `#hlavni-obsah` = <main id="hlavni-obsah"> layoutu; stejný
+	     odkaz má partials/header.html (.skip-link v jelinek.css). -->
+	<a href={skipHref} class={SKIP}>Přeskočit na obsah</a>
 	<div class={inner}>
 		<div class={BAR_ROW}>
+		{#if homeHref}
+			<Button
+				href={homeHref}
+				variant="ghost"
+				color="black"
+				aria-label={homeLabel}
+				title={homeLabel}
+				class={HOME_LINK}
+			>
+				<Icon name="home" size={28} />
+			</Button>
+		{/if}
 		<a href={logoHref} aria-label={logoAlt} class={LOGO_LINK}>
 			{#if logo}
 				{@render logo()}

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type NavItem } from './nav.js';
 interface Props {
+    /** Cíl odkazu „Přeskočit na obsah“ — id hlavního obsahu stránky. */
+    skipHref?: string;
     /**
      * Escape hatch: a snippet rendering custom mark content in place of the
      * bundled, re-theming deer mark (e.g. a division-specific logo). Most
@@ -15,6 +17,20 @@ interface Props {
      * app is not rooted at `/`, e.g. mounted under a base path.
      */
     logoHref?: string;
+    /**
+     * Cesta zpět na firemní rozcestník. Když je zadaná, vykreslí se jako
+     * PRVNÍ položka lišty, vlevo před znakem, ikona domečku (`home` ze sady
+     * ikon) bez textu — na každé šířce, telefon včetně. Rozhodnutí majitele
+     * 15. 9. 2026: firemní aplikace ze šablon tak nepotřebují tlačítko
+     * „Zpět na rozcestník“ v `actions`, které vedle odkazů menu vypadalo
+     * jinak velké. Bez této vlastnosti se hlavička nemění.
+     */
+    homeHref?: string;
+    /**
+     * Přístupný název ikony domečku (`aria-label` i `title`). Ikona nemá
+     * viditelný text, takže tohle je jediné, co přečte čtečka.
+     */
+    homeLabel?: string;
     subtitle?: string;
     items?: NavItem[];
     active?: string;