@jelinek/ui 0.9.0 → 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/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/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;