@jelinek/ui 0.3.0 → 0.4.0

package/README.md

@@ -26,7 +26,7 @@ Packages for a package that is no longer published there:
 ```json
 {
   "dependencies": {
-    "@jelinek/ui": "^0.3.0"
+    "@jelinek/ui": "^0.4.0"
   }
 }
 ```
@@ -465,15 +465,38 @@ The `publish` job is separate and gated on a tag matching `ui-v*` — it
 does not run on ordinary merges to `master`, only when someone pushes a
 `ui-v*` tag, and it also depends on `verify` passing first. It publishes
 to **npmjs.org with `--access public`**, authenticating with the
-`NPM_TOKEN` repo secret (a granular automation token for the `jelinek`
-npm org — a different namespace from the GitHub org, which is named
-`JELINEK-nabytek-a-matrace`). Two things to know about that token: npm
-expires granular tokens, so a publish failing with a 401 after months of
-silence means it needs regenerating; and npm is phasing out tokens that
-bypass 2FA (account changes Aug 2026, direct publishing Jan 2027), whose
-replacement is trusted publishing via GitHub Actions OIDC. No provenance
-(`--provenance`) is generated — npm rejects it for builds from a private
-repository, and this repo is private.
+`NPM_TOKEN` repo secret (a granular token for the `jelinek` npm org — a
+different namespace from the GitHub org, which is named
+`JELINEK-nabytek-a-matrace`). No provenance (`--provenance`) is
+generated: npm rejects it for builds from a private repository.
+
+**That job does not currently work, and 0.3.0 was released by hand.** npm
+requires a second factor for every publish, and a granular token only
+satisfies that if "Bypass two-factor authentication (2FA)" was ticked
+*when the token was created* — the setting cannot be added to an existing
+token, and npm is in the middle of restricting bypass tokens outright
+(account changes Aug 2026, direct publishing Jan 2027). Without it the
+registry answers a `PUT` with a misleading `E404 Not Found` in CI, and a
+clearer `E403 … Two-factor authentication or granular access token with
+bypass 2fa enabled is required` locally.
+
+So the working release procedure is manual, from a machine that can reach
+a browser:
+
+```
+cd svelte && npm publish --access public --auth-type=web
+```
+
+That prints a `npmjs.com/auth/cli/…` URL; approving it there with a
+passkey (or an authenticator app) completes the publish. `--otp=<code>`
+works too, but only with an authenticator app — a passkey produces no
+code. Push the `ui-v*` tag anyway: `verify` still gates the release, and
+the tag is what records which commit a version came from.
+
+Fixing CI means either a bypass-enabled token while npm still issues
+them, or trusted publishing via GitHub Actions OIDC — the latter is
+untested here and may be unavailable for the same reason provenance is,
+namely that this repo is private.
 
 ## Known design debt
 

package/dist/components/PageHero.svelte

@@ -53,6 +53,12 @@
 		 * real `.page-hero` in the guide has this; kept optional since
 		 * jelinek.css itself allows a bare eyebrow+heading (brand/znacka.html). */
 		children?: Snippet;
+		/** Full-bleed background medium — a photo or video behind the hero.
+		 * Render a bare `<img>` or `<video>`; the wrapper stretches it across
+		 * the WHOLE band (edge to edge of the window, like the `--hero-bg`
+		 * colour) and crops it with object-fit: cover. Mirrors the guide's
+		 * `.page-hero__media`. The text content is lifted above it. */
+		media?: Snippet;
 		class?: string;
 	}
 
@@ -64,6 +70,7 @@
 		eyebrow,
 		heading,
 		children,
+		media,
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
@@ -92,10 +99,28 @@
 	// padding-bottom is the passthrough token --space-section (token-map.js
 	// keeps space-* off the Tailwind theme on purpose — see its own comment —
 	// so this stays an arbitrary var() reference, not a spacing utility).
+	// Task 44 — THE BAND'S SURFACE IS ONE VARIABLE. The colour used to be
+	// written twice (background + the 100vmax shadow), so recolouring the band
+	// took two edits that could disagree — the reader proved it in dev tools:
+	// changing `background` alone painted only the container-width rectangle
+	// red while the bleed stayed grey. Both now read --hero-bg (default: the
+	// same --color-surface-gray as before, so it still flips in dark mode);
+	// one `[--hero-bg:...]` override — or `style="--hero-bg: …"` — recolours
+	// the whole band. `relative` anchors the `media` layer below.
 	const OUTER =
-		'bg-surface-gray shadow-[0_0_0_100vmax_var(--color-surface-gray)] ' +
+		'relative [--hero-bg:var(--color-surface-gray)] bg-[var(--hero-bg)] ' +
+		'shadow-[0_0_0_100vmax_var(--hero-bg)] ' +
 		'[clip-path:inset(0_-100vmax)] pb-[var(--space-section)]';
 
+	// The guide's `.page-hero__media`: a photo/video stretched across the whole
+	// full-bleed band. Centred 100vw wide (translateX — measured: adds NO
+	// horizontal scrollbar), clipped by the section's own clip-path. The `*:`
+	// variant sizes whatever single element the snippet renders (img/video) to
+	// cover the layer.
+	const MEDIA =
+		'pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 select-none ' +
+		'*:h-full *:w-full *:object-cover';
+
 	// jelinek.css:339 (.container) — jelinek.css:672 gives `.page-hero`
 	// itself explicit ZERO horizontal padding, relying ENTIRELY on
 	// `.page-hero` always being a direct child of `<main class="container">`
@@ -302,10 +327,19 @@
 {/snippet}
 
 <section {...rest} class={cn(OUTER, paddingTop, className)}>
+	{#if media}
+		<!-- aria-hidden: the medium is decoration behind the text, same as the
+		     band's colour. Content is lifted above it via `relative` below. -->
+		<div class={MEDIA} aria-hidden="true">{@render media()}</div>
+	{/if}
 	{#if isContained}
-		{@render content()}
+		{#if media}
+			<div class="relative">{@render content()}</div>
+		{:else}
+			{@render content()}
+		{/if}
 	{:else}
-		<div class={INNER}>
+		<div class={cn(INNER, media && 'relative')}>
 			{@render content()}
 		</div>
 	{/if}

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

@@ -47,6 +47,12 @@ interface Props {
      * real `.page-hero` in the guide has this; kept optional since
      * jelinek.css itself allows a bare eyebrow+heading (brand/znacka.html). */
     children?: Snippet;
+    /** Full-bleed background medium — a photo or video behind the hero.
+     * Render a bare `<img>` or `<video>`; the wrapper stretches it across
+     * the WHOLE band (edge to edge of the window, like the `--hero-bg`
+     * colour) and crops it with object-fit: cover. Mirrors the guide's
+     * `.page-hero__media`. The text content is lifted above it. */
+    media?: Snippet;
     class?: string;
 }
 type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;

package/dist/components/SiteFooter.svelte

@@ -8,6 +8,14 @@
 		slogan?: string;
 		meta?: string;
 		stamp?: string;
+		/**
+		 * Task 45 — HTML of the changelog shown in a floating <dialog> when the
+		 * reader clicks the deploy stamp. The showcase passes the build-time
+		 * inline of partials/changelog.html (__CHANGELOG_HTML__, see
+		 * vite.config.ts) — the same file the hand-written pages SSI-include.
+		 * Without it (or without `stamp`) the stamp stays a plain line.
+		 */
+		changelog?: string;
 		class?: string;
 	}
 
@@ -17,10 +25,35 @@
 		slogan,
 		meta,
 		stamp,
+		changelog,
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
 
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+
+	// Mirrors the guide's .changelog dialog (jelinek.css) — a card over the
+	// dimmed page. The native <dialog> handles Escape and focus itself; a
+	// click landing on the dialog ELEMENT (i.e. its ::backdrop area) closes.
+	const STAMP_BUTTON =
+		'ml-auto cursor-pointer border-0 bg-transparent p-0 font-serif text-[0.85rem] text-fg-muted2 ' +
+		'transition-[color] duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg-inverse';
+	const DIALOG =
+		'm-auto w-[min(560px,calc(100vw-48px))] max-h-[min(70vh,640px)] p-0 ' +
+		'rounded-card border border-border-subtle bg-surface text-fg shadow-hover ' +
+		'backdrop:bg-black/40';
+	const DIALOG_HEAD =
+		'sticky top-0 flex items-center justify-between bg-surface px-6 pt-4';
+	const DIALOG_CLOSE =
+		'inline-flex h-11 w-11 flex-none cursor-pointer items-center justify-center ' +
+		'rounded-button border-0 bg-transparent p-0 text-fg';
+	// The changelog HTML carries the guide's own class names (.changelog__entry
+	// etc.) that mean nothing to Tailwind — style its plain tags contextually.
+	const DIALOG_BODY =
+		'px-6 pt-2 pb-6 ' +
+		'[&_h3]:mt-4 [&_h3]:mb-1.5 [&_h3]:text-[0.95rem] ' +
+		'[&_ul]:mb-2 [&_ul]:pl-[1.2em] [&_ul]:list-disc [&_li]:my-1';
+
 	// jelinek.css:759-770 (.site-footer, .site-footer__inner). `margin-top:
 	// 60px` (:760) is kept — unlike Card/Alert (Tasks 5/6), which deliberately
 	// drop their own external margins on the reasoning that a reusable
@@ -99,7 +132,15 @@
 				{/if}
 			</div>
 		{/if}
-		{#if stamp}
+		{#if stamp && changelog}
+			<!-- The stamp opens the changelog dialog — same classes-worth of
+			     treatment as the plain stamp below, plus the pointer/hover.
+			     partials/footer.html does the identical thing with
+			     #changelog-open + initChangelog() in jelinek.js. -->
+			<button type="button" class={STAMP_BUTTON} aria-haspopup="dialog" onclick={() => dialogEl?.showModal()}>
+				{stamp}
+			</button>
+		{:else if stamp}
 			<!-- jelinek.css:770 (`.site-footer .meta`): margin-left:auto pins it
 			     to the far right of `.site-footer__inner`'s flex row — so this
 			     has to be a sibling of the logo/slogan-wrapper above, not nested
@@ -118,4 +159,22 @@
 			<div class="ml-auto font-serif text-[0.85rem] text-fg-muted2">{stamp}</div>
 		{/if}
 	</div>
+	{#if stamp && changelog}
+		<dialog
+			bind:this={dialogEl}
+			class={DIALOG}
+			aria-labelledby="changelog-title"
+			onclick={(e) => e.target === dialogEl && dialogEl?.close()}
+		>
+			<div class={DIALOG_HEAD}>
+				<h2 id="changelog-title" class="m-0 font-primary text-step3 font-bold">Co je nového</h2>
+				<button type="button" class={DIALOG_CLOSE} aria-label="Zavřít" onclick={() => dialogEl?.close()}>
+					<svg class="h-[18px] w-[18px]" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+				</button>
+			</div>
+			<!-- The changelog is repo content (partials/changelog.html), inlined at
+			     build time — not user input; {@html} is safe here. -->
+			<div class={DIALOG_BODY}>{@html changelog}</div>
+		</dialog>
+	{/if}
 </footer>

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

@@ -5,6 +5,14 @@ interface Props {
     slogan?: string;
     meta?: string;
     stamp?: string;
+    /**
+     * Task 45 — HTML of the changelog shown in a floating <dialog> when the
+     * reader clicks the deploy stamp. The showcase passes the build-time
+     * inline of partials/changelog.html (__CHANGELOG_HTML__, see
+     * vite.config.ts) — the same file the hand-written pages SSI-include.
+     * Without it (or without `stamp`) the stamp stays a plain line.
+     */
+    changelog?: string;
     class?: string;
 }
 type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;

package/dist/components/SiteHeader.svelte

@@ -5,7 +5,7 @@
 	import Button from './Button.svelte';
 	import { createChapterNavDock } from '../utils/chapter-nav-dock.svelte.js';
 	import { DEER_MARK_PATH } from './deer-mark-path.js';
-	import { isActive, type NavItem } from './nav.js';
+	import { isActive, type NavGroup, type NavItem } from './nav.js';
 
 	interface Props {
 		/**
@@ -78,6 +78,22 @@
 		 * it is not a general slot.
 		 */
 		actions?: Snippet;
+		/**
+		 * Controls that must stay visible IN THE BAR on a phone — an e-shop's
+		 * cart button, a search trigger. `actions` cannot serve them: it lives
+		 * inside the nav, which below 640px is the burger drawer, so anything
+		 * in it costs a reader two taps and disappears from the bar entirely.
+		 * The guide's own header has no such controls (its one nav-adjacent
+		 * control, the theme toggle, belongs in `actions`), so this slot adds
+		 * a consumer seam rather than reproducing guide markup.
+		 *
+		 * Rendered between the lockup and the burger, right-aligned, and
+		 * HIDDEN from 640px up — on a desktop the same controls belong in
+		 * `actions`, inside the nav row, and rendering both would double
+		 * them. A consumer using this slot typically renders the same
+		 * snippet content in both props.
+		 */
+		barActions?: Snippet;
 		class?: string;
 	}
 
@@ -94,6 +110,7 @@
 		menuLabel = 'Otevřít menu',
 		menuLabelClose = 'Zavřít menu',
 		actions,
+		barActions,
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
@@ -116,6 +133,62 @@
 	let menuOpen = $state(false);
 	let menuButton = $state<HTMLButtonElement | null>(null);
 	let linksEl = $state<HTMLElement | null>(null);
+	let headerEl = $state<HTMLElement | null>(null);
+
+	// MEGA-MENU (≥640px): which section's panel is slid out, keyed by item
+	// href. Opens on hover or keyboard focus of the section link; closes with
+	// a 150ms grace on mouseleave — the pointer's path from the link down into
+	// the panel crosses the bar's bottom padding, and an immediate close would
+	// snap the panel shut before it arrives. Mirrors initSiteMenu() in
+	// assets/js/jelinek.js (same delay, same open-on-focus).
+	let openSub = $state<string | null>(null);
+	let subCloseTimer: ReturnType<typeof setTimeout> | null = null;
+	function cancelSubClose() {
+		if (subCloseTimer) {
+			clearTimeout(subCloseTimer);
+			subCloseTimer = null;
+		}
+	}
+	function openSubmenu(href: string) {
+		cancelSubClose();
+		openSub = href;
+	}
+	function closeSubmenu() {
+		cancelSubClose();
+		openSub = null;
+	}
+	function scheduleSubClose() {
+		cancelSubClose();
+		subCloseTimer = setTimeout(() => (openSub = null), 150);
+	}
+
+	// Escape closes the open panel and hands focus back to its section link
+	// (without that, focus inside the now-invisible panel drops to <body> and
+	// keyboard navigation restarts from the top — same WCAG 2.4.3 reasoning as
+	// closeMenu above). Focus leaving the header entirely closes it too.
+	$effect(() => {
+		if (!openSub) return;
+		function onKeyDown(event: KeyboardEvent) {
+			if (event.key !== 'Escape') return;
+			const i = items.findIndex((it) => it.href === openSub);
+			closeSubmenu();
+			if (i >= 0) document.getElementById(`${uid}-link-${i}`)?.focus();
+		}
+		function onFocusIn(event: FocusEvent) {
+			const target = event.target as Node | null;
+			if (target && headerEl && !headerEl.contains(target)) closeSubmenu();
+		}
+		document.addEventListener('keydown', onKeyDown);
+		document.addEventListener('focusin', onFocusIn);
+		return () => {
+			document.removeEventListener('keydown', onKeyDown);
+			document.removeEventListener('focusin', onFocusIn);
+		};
+	});
+
+	// Phone accordion state (which sections are unfolded in the drawer),
+	// keyed by item href. Survives closing the drawer, like the guide's.
+	let openGroups = $state<Record<string, boolean>>({});
 
 	// Closing the panel while focus is still inside it would drop focus onto
 	// <body>, restarting keyboard navigation from the top of the page. Every
@@ -269,19 +342,35 @@
 	const OUTER =
 		'absolute inset-x-0 top-0 z-50 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
+	// wrapper (BAR below), so the card can grow BELOW the row by the open
+	// mega-menu panel — one background, one border, one shadow for the bar and
+	// the submenu together, exactly like partials/header.html's
+	// .site-header__inner / .site-header__bar split.
 	const INNER_BASE =
-		'mx-auto flex max-w-none items-center gap-[calc(var(--logo-mark)*107/400)] ' +
+		'mx-auto max-w-none ' +
 		'border border-x-0 border-t-0 border-[var(--glass-border)] rounded-none ' +
 		'bg-[var(--glass-fill)] px-6 py-3 shadow-resting ' +
 		'dark:shadow-[var(--shadow-resting),inset_0_2px_1px_-1px_var(--box-primary)] ' +
 		'[-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] ' +
 		'min-[640px]:max-w-page min-[640px]:border-x min-[640px]:border-t ' +
 		'min-[640px]:rounded-card';
+	const BAR_ROW = 'flex items-center gap-[calc(var(--logo-mark)*107/400)]';
 	const INNER_JOINED =
 		'min-[640px]:rounded-b-none min-[640px]:border-b-0 min-[640px]:shadow-none ' +
 		'min-[640px]:dark:shadow-[inset_0_2px_1px_-1px_var(--box-primary)]';
 	const INNER_DETACHED = '';
-	const inner = $derived(cn(INNER_BASE, dock.docked ? INNER_JOINED : INNER_DETACHED));
+	// While a mega-menu is open the card has stretched OVER the chapter bar, so
+	// even a docked header gets its detached rounded bottom back (mirrors the
+	// guide's `.site-header.is-submenu-open .site-header__inner` rule). Placed
+	// after INNER_JOINED in cn() so tailwind-merge lets it win.
+	const INNER_SUBOPEN =
+		'min-[640px]:rounded-card min-[640px]:border-b min-[640px]:shadow-resting ' +
+		'min-[640px]:dark:shadow-[var(--shadow-resting),inset_0_2px_1px_-1px_var(--box-primary)]';
+	const inner = $derived(
+		cn(INNER_BASE, dock.docked ? INNER_JOINED : INNER_DETACHED, openSub ? INNER_SUBOPEN : '')
+	);
 
 	// jelinek.css:444-445 (.site-header__logo, .site-header__logo img /
 	// .site-header__mark): inline-flex, no shrink/grow, line-height:0
@@ -417,14 +506,91 @@
 	// `vh` is the tallest-possible viewport, which is exactly the amount by which
 	// the URL bar would hide the end of the list. `overscroll-contain` keeps a
 	// flick at the end of the list from scrolling the page underneath instead.
-	const NAV_PANEL =
-		'absolute top-full inset-x-0 z-[48] flex-col items-stretch gap-1 p-3 ' +
-		'rounded-b-card border border-x-0 border-t-0 border-[var(--glass-border)] ' +
-		'bg-[var(--glass-fill)] shadow-resting min-[640px]:hidden ' +
-		'max-h-[calc(100dvh_-_var(--header-h)_-_12px)] overflow-y-auto overscroll-contain ' +
-		'[-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)]';
+	// Task 43 — THE PHONE MENU IS A RIGHT-SIDE DRAWER, not a dropdown hung off
+	// the bar: full viewport height, slides in from the right (where the burger
+	// is), over a dimmed page. Mirrors jelinek.css's phone
+	// `:root.has-js .site-header__nav`. Closed, it is translated fully off the
+	// right edge AND `invisible`, so nothing inside is focusable; the
+	// visibility flip is delayed by the slide duration on the way out (the
+	// arbitrary [transition:…] pair below) so the exit animation stays visible.
+	const DRAWER =
+		'fixed inset-y-0 right-0 left-auto z-[3] flex w-[min(84vw,340px)] flex-col items-stretch gap-1 p-4 ' +
+		'border-l border-[var(--glass-border)] bg-[var(--glass-fill)] shadow-resting ' +
+		'[-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] ' +
+		'overflow-y-auto overscroll-contain min-[640px]:hidden';
+	const DRAWER_CLOSED =
+		'translate-x-full invisible ' +
+		'[transition:transform_var(--dur-slow)_var(--ease),visibility_0s_var(--dur-slow)]';
+	const DRAWER_OPEN = 'translate-x-0 visible [transition:transform_var(--dur-slow)_var(--ease)]';
+	const drawer = $derived(cn(DRAWER, menuOpen ? DRAWER_OPEN : DRAWER_CLOSED));
+
+	// The page dim under the open drawer. A real element rather than the
+	// guide's `.site-header::before` (a component can attach handlers to an
+	// element; a pseudo needs the guide's target===header trick). A tap on it
+	// is already "a pointerdown outside linksEl/menuButton", so the dismissal
+	// $effect above closes the drawer without a handler here.
+	const BACKDROP =
+		'fixed inset-0 z-[1] bg-black/30 min-[640px]:hidden ' +
+		'transition-opacity duration-[var(--dur-slow)] ease-[var(--ease)]';
+	const backdrop = $derived(cn(BACKDROP, menuOpen ? 'opacity-100' : 'pointer-events-none opacity-0'));
+
+	// Drawer head: small uppercase "Menu" + a 44px close cross. The drawer
+	// covers the bar (and the burger with it), so it closes itself.
+	const DRAWER_HEAD = 'flex items-center justify-between pb-2 pl-4 min-[640px]:hidden';
+	const DRAWER_LABEL = 'text-[0.8rem] font-semibold tracking-[0.08em] uppercase text-fg-muted1';
+	const DRAWER_CLOSE =
+		'inline-flex h-11 w-11 flex-none cursor-pointer items-center justify-center ' +
+		'rounded-button border-0 bg-transparent p-0 text-fg';
+
+	// Accordion (drawer): section row = link + a chevron that unfolds the
+	// chapters in place. Height animates via grid-template-rows 0fr → 1fr —
+	// the one way to animate to an automatic height.
+	const GROUP_ROW = 'flex items-center';
+	const CHEVRON =
+		'inline-flex h-10 w-11 flex-none cursor-pointer items-center justify-center ' +
+		'rounded-button border-0 bg-transparent p-0 text-fg';
+	const CHEVRON_ICON = 'h-4 w-4 transition-transform duration-[var(--dur-base)] ease-[var(--ease)]';
+	// Same closed/open mechanics as MEGA below (and the guide's shared
+	// .site-menu__panel rule): closed is ALSO invisible, so the clipped links
+	// drop out of the tab order; the flip back is delayed by the animation
+	// length so the fold-up stays visible.
+	const ACC_PANEL = 'grid overflow-hidden';
+	const ACC_CLOSED =
+		'invisible grid-rows-[0fr] ' +
+		'[transition:grid-template-rows_var(--dur-base)_var(--ease),visibility_0s_var(--dur-base)]';
+	const ACC_OPEN =
+		'visible grid-rows-[1fr] [transition:grid-template-rows_var(--dur-base)_var(--ease)]';
+	const ACC_INNER = 'flex min-h-0 flex-col gap-0.5 overflow-hidden pl-4';
+
+	// MEGA-MENU PANEL (≥640px): a child of the glass card itself, rendered
+	// below the BAR row — NOT a second glass surface hung outside it. The
+	// reader asked for the submenu to read as the bar stretching smoothly
+	// downward: one background, one border, one shadow. Opening animates
+	// grid-template-rows 0fr → 1fr (the accordion mechanic — the one way to
+	// animate to an automatic height), so the card grows with it. The panel
+	// carries NO glass of its own: glass nested in glass has nothing to blur.
+	// Closed it is also `invisible`, so its clipped links drop out of the tab
+	// order; the flip back is delayed by the animation length on the way out.
+	const MEGA = 'hidden overflow-hidden min-[640px]:grid';
+	const MEGA_CLOSED =
+		'invisible grid-rows-[0fr] ' +
+		'[transition:grid-template-rows_var(--dur-base)_var(--ease),visibility_0s_var(--dur-base)]';
+	const MEGA_OPEN =
+		'visible grid-rows-[1fr] [transition:grid-template-rows_var(--dur-base)_var(--ease)]';
+	// The breathing room above the columns appears WITH the opening and
+	// animates alongside the height — a permanent padding-top would hold the
+	// card taller even closed (0fr crushes content, padding it cannot).
+	const MEGA_COLS =
+		'grid min-h-0 grid-cols-3 gap-x-6 gap-y-2 pt-0 ' +
+		'transition-[padding-top] duration-[var(--dur-base)] ease-[var(--ease)]';
+	const MEGA_COLS_OPEN = 'pt-4';
+	const MEGA_COL = 'flex flex-col gap-0.5';
+	// Column heading (shared by the mega-menu and the accordion): the same
+	// small uppercase Avenir treatment as the header subtitle.
+	const HEADING =
+		'px-4 pt-2.5 pb-0.5 text-[0.72rem] font-semibold tracking-[0.08em] uppercase text-fg-muted1';
+
 	const NAV_ROW = 'hidden ml-auto items-center gap-2 min-[640px]:flex';
-	const navPanel = $derived(cn(NAV_PANEL, menuOpen ? 'flex' : 'hidden'));
 
 	// NAV LINKS (jelinek.css:472 + partials/header.html:6-8). His 36354b9 turned
 	// them into TERTIARY BUTTONS: the markup is literally
@@ -473,6 +639,14 @@
 	const BURGER =
 		'ml-auto inline-flex h-11 w-11 flex-none cursor-pointer flex-col justify-center gap-[5px] ' +
 		'rounded-button border-0 bg-transparent px-2.5 min-[640px]:hidden';
+
+	// The `barActions` slot (see its prop doc). `ml-auto` claims the bar's free
+	// space so the controls sit against the burger on the right; the burger then
+	// drops its OWN `ml-auto` (via the cn() override below) — two auto margins
+	// in one flex row would each take half the free space and strand the
+	// controls mid-bar. Phone-only: from 640px up the nav row's `ml-auto` owns
+	// the right side and these controls belong in `actions`.
+	const BAR_ACTIONS = 'ml-auto flex items-center gap-1 min-[640px]:hidden';
 	const BAR =
 		'block h-0.5 rounded-[2px] bg-fg ' +
 		'transition-[transform,opacity] duration-[var(--dur-base)] ease-[var(--ease)]';
@@ -507,26 +681,27 @@
 	// "render it yourself outside the component".
 </script>
 
-<!-- One definition of the top-level links, rendered into both navs. `linkClass`
-     exists only so a future caller of this snippet can trim differently; today
-     both call sites pass NAV_LINK. -->
-{#snippet navLinks(linkClass: string)}
-	{#each items as item (item.href)}
+<!-- One definition of a submenu column's links, rendered into both the
+     mega-menu columns (≥640px) and the drawer accordion (phone). -->
+{#snippet subLinks(group: NavGroup)}
+	{#if group.title}<div class={HEADING} style={SUBTITLE_STYLE}>{group.title}</div>{/if}
+	{#each group.items as chapter (chapter.href)}
 		<Button
-			href={item.href}
+			href={chapter.href}
 			variant="ghost"
 			color="black"
-			active={isActive(item, active)}
-			aria-current={isActive(item, active) ? 'page' : undefined}
-			class={linkClass}
+			active={isActive(chapter, active)}
+			aria-current={isActive(chapter, active) ? 'page' : undefined}
+			class={CHAPTER_LINK}
 		>
-			{item.label}
+			{chapter.label}
 		</Button>
 	{/each}
 {/snippet}
 
-<header {...rest} class={cn(OUTER, className)}>
+<header {...rest} bind:this={headerEl} class={cn(OUTER, className)}>
 	<div class={inner}>
+		<div class={BAR_ROW}>
 		<a href={logoHref} aria-label={logoAlt} class={LOGO_LINK}>
 			{#if logo}
 				{@render logo()}
@@ -557,6 +732,9 @@
 			{/if}
 		</a>
 		<div class={TITLE}>JELÍNEK{#if subtitle}<span class={SUBTITLE} style={SUBTITLE_STYLE}>{subtitle}</span>{/if}</div>
+		{#if barActions}
+			<div class={BAR_ACTIONS}>{@render barActions()}</div>
+		{/if}
 		{#if items.length > 0}
 			<!-- The burger precedes the panel in source order so Tab from it lands on
 			     the first link it just revealed, and because that is the order in
@@ -564,7 +742,7 @@
 			<button
 				type="button"
 				bind:this={menuButton}
-				class={BURGER}
+				class={cn(BURGER, barActions !== undefined && 'ml-0')}
 				aria-expanded={menuOpen}
 				aria-controls={panelId}
 				aria-label={menuOpen ? menuLabelClose : menuLabel}
@@ -574,19 +752,153 @@
 				<span class={bar2}></span>
 				<span class={bar3}></span>
 			</button>
-			<!-- The ≥640px row. Inside the glass bar, so it is a flex item of it. -->
+			<!-- The ≥640px row. Inside the glass bar, so it is a flex item of it.
+			     Section links with a submenu open their mega-menu panel on hover or
+			     keyboard focus; the click still navigates (to the section's first
+			     chapter), so the link works without a mouse and on touch. -->
 			<nav class={NAV_ROW} aria-label={navLabel}>
-				{@render navLinks(NAV_LINK)}
+				{#each items as item, i (item.href)}
+					{#if item.submenu}
+						<!-- A BUTTON, not a link — the owner's call: the first level
+						     never navigates. Hover/focus slides the panel out; click
+						     only opens it too (not a toggle — the focus that precedes
+						     a click already opened it, so a toggle would snap it shut).
+						     Esc / mouse-out / clicking elsewhere closes. -->
+						<Button
+							variant="ghost"
+							color="black"
+							active={isActive(item, active)}
+							aria-current={isActive(item, active) ? 'page' : undefined}
+							aria-expanded={openSub === item.href}
+							aria-controls={`${uid}-sub-${i}`}
+							id={`${uid}-link-${i}`}
+							class={NAV_LINK}
+							onmouseenter={() => openSubmenu(item.href)}
+							onmouseleave={scheduleSubClose}
+							onfocus={() => openSubmenu(item.href)}
+							onclick={() => openSubmenu(item.href)}
+						>
+							{item.label}
+						</Button>
+					{:else}
+						<Button
+							href={item.href}
+							variant="ghost"
+							color="black"
+							active={isActive(item, active)}
+							aria-current={isActive(item, active) ? 'page' : undefined}
+							class={NAV_LINK}
+						>
+							{item.label}
+						</Button>
+					{/if}
+				{/each}
 				{#if actions}{@render actions()}{/if}
 			</nav>
 		{/if}
+		</div>
+		<!-- Mega-menu panels (≥640px): children of the glass card, below the bar
+		     row — the card stretches down with the open panel, so the bar and the
+		     submenu share one background, border and shadow. Exactly one can be
+		     open at a time (openSub). -->
+		{#each items as item, i (item.href)}
+			{#if item.submenu}
+				<!-- role="presentation": the wrapper is a hover surface; the links
+				     inside carry the semantics (the keyboard path never needs the
+				     mouse handlers — focus opens/closes the panel via the link). -->
+				<div
+					id={`${uid}-sub-${i}`}
+					role="presentation"
+					class={cn(MEGA, openSub === item.href ? MEGA_OPEN : MEGA_CLOSED)}
+					onmouseenter={cancelSubClose}
+					onmouseleave={scheduleSubClose}
+				>
+					<!-- Columns = the section's group count. The guide's own rule is a fixed
+					     repeat(3, 1fr) (jelinek.css .site-menu__cols) because both its sections
+					     have exactly three groups; a consumer's section may have four or two, and
+					     a fixed 3 would wrap the surplus group onto a lonely second row. The
+					     inline style computes to the identical value for the guide's own pages. -->
+					<div
+						class={cn(MEGA_COLS, openSub === item.href && MEGA_COLS_OPEN)}
+						style={`grid-template-columns:repeat(${item.submenu.length},minmax(0,1fr))`}
+					>
+						{#each item.submenu as group, gi (group.title ?? gi)}
+							<div class={MEGA_COL}>
+								{@render subLinks(group)}
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		{/each}
 	</div>
 	{#if items.length > 0}
-		<!-- The phone panel. A SIBLING of the glass bar, not a child — see
-		     NAV_PANEL's comment for the measurement that forced that. Hidden from
+		<!-- The page dim under the open drawer (phone only). Its own element so
+		     it can sit between the page and the drawer; a tap on it is a
+		     pointerdown outside linksEl, so the dismissal effect closes the menu. -->
+		<div class={backdrop} aria-hidden="true"></div>
+		<!-- The phone drawer. A SIBLING of the glass bar, not a child — see
+		     DRAWER's comment for the measurement that forced that. Hidden from
 		     640px up, so only one of the two navs is ever in the a11y tree. -->
-		<nav id={panelId} bind:this={linksEl} class={navPanel} aria-label={navLabel}>
-			{@render navLinks(NAV_LINK)}
+		<nav id={panelId} bind:this={linksEl} class={drawer} aria-label={navLabel}>
+			<div class={DRAWER_HEAD}>
+				<span class={DRAWER_LABEL} style={SUBTITLE_STYLE}>Menu</span>
+				<button type="button" class={DRAWER_CLOSE} aria-label={menuLabelClose} onclick={closeMenu}>
+					<svg class="h-[18px] w-[18px]" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
+				</button>
+			</div>
+			{#each items as item, i (item.href)}
+				{#if item.submenu}
+					<div>
+						<div class={GROUP_ROW}>
+							<!-- The label is a BUTTON too: tapping it unfolds the
+							     chapters, same as the chevron (the owner's call — a
+							     navigating first level was easy to hit by mistake on
+							     a phone). The chevron stays as the visual cue. -->
+							<Button
+								variant="ghost"
+								color="black"
+								active={isActive(item, active)}
+								aria-current={isActive(item, active) ? 'page' : undefined}
+								aria-expanded={!!openGroups[item.href]}
+								aria-controls={`${uid}-acc-${i}`}
+								class={cn(NAV_LINK, 'grow')}
+								onclick={() => (openGroups[item.href] = !openGroups[item.href])}
+							>
+								{item.label}
+							</Button>
+							<button
+								type="button"
+								class={CHEVRON}
+								aria-expanded={!!openGroups[item.href]}
+								aria-controls={`${uid}-acc-${i}`}
+								aria-label={`Rozbalit kapitoly sekce ${item.label}`}
+								onclick={() => (openGroups[item.href] = !openGroups[item.href])}
+							>
+								<svg class={cn(CHEVRON_ICON, openGroups[item.href] && 'rotate-180')} viewBox="0 0 16 16" aria-hidden="true"><path d="m3.5 6 4.5 4.5L12.5 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+							</button>
+						</div>
+						<div id={`${uid}-acc-${i}`} class={cn(ACC_PANEL, openGroups[item.href] ? ACC_OPEN : ACC_CLOSED)}>
+							<div class={ACC_INNER}>
+								{#each item.submenu as group, gi (group.title ?? gi)}
+									{@render subLinks(group)}
+								{/each}
+							</div>
+						</div>
+					</div>
+				{:else}
+					<Button
+						href={item.href}
+						variant="ghost"
+						color="black"
+						active={isActive(item, active)}
+						aria-current={isActive(item, active) ? 'page' : undefined}
+						class={NAV_LINK}
+					>
+						{item.label}
+					</Button>
+				{/if}
+			{/each}
 			{#if chapterItems.length > 0}
 				<div class={CHAPTERS}>
 					{#each chapterItems as chapter (chapter.href)}

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

@@ -72,6 +72,22 @@ interface Props {
      * it is not a general slot.
      */
     actions?: Snippet;
+    /**
+     * Controls that must stay visible IN THE BAR on a phone — an e-shop's
+     * cart button, a search trigger. `actions` cannot serve them: it lives
+     * inside the nav, which below 640px is the burger drawer, so anything
+     * in it costs a reader two taps and disappears from the bar entirely.
+     * The guide's own header has no such controls (its one nav-adjacent
+     * control, the theme toggle, belongs in `actions`), so this slot adds
+     * a consumer seam rather than reproducing guide markup.
+     *
+     * Rendered between the lockup and the burger, right-aligned, and
+     * HIDDEN from 640px up — on a desktop the same controls belong in
+     * `actions`, inside the nav row, and rendering both would double
+     * them. A consumer using this slot typically renders the same
+     * snippet content in both props.
+     */
+    barActions?: Snippet;
     class?: string;
 }
 type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;

package/dist/components/Tab.svelte

@@ -62,9 +62,16 @@
 	// its solid styling even while hovered — reproduced here by only adding the
 	// hover: classes to the unselected branch, never to the selected one.
 	// Neither branch needs an explicit dark: override: bg-jelinek-black /
-	// text-on-jelinek-black / text-fg-muted1 / bg-fg-muted1 / text-fg-inverse
+	// text-on-jelinek-black / bg-fg-muted1 / text-fg-inverse
 	// all resolve through theme-aware CSS custom properties that already flip
 	// under [data-theme="dark"]/.dark.
+	//
+	// The INACTIVE segment is --JELINEK-BLACK (text-jelinek-black), not
+	// --text-muted1 — the guide changed .tab to match its tertiary buttons
+	// (.btn--ghost.btn--black) after the muted grey washed out over the
+	// logo-tool photo. Marked provisional in jelinek.css: the pill/button
+	// relationship gets its final definition with the button-system design
+	// (docs/chybejici-komponenty.md).
 </script>
 
 <button
@@ -80,7 +87,7 @@
 		BASE,
 		selected
 			? 'bg-jelinek-black text-on-jelinek-black'
-			: 'bg-transparent text-fg-muted1 hover:bg-fg-muted1 hover:text-fg-inverse',
+			: 'bg-transparent text-jelinek-black hover:bg-fg-muted1 hover:text-fg-inverse',
 		className
 	)}
 >

package/dist/components/deer-mark-path.d.ts

@@ -13,4 +13,4 @@
  * fill="currentColor" so only the antlers — not the square behind them —
  * follow the content division), only the path data itself is identical.
  */
-export declare const DEER_MARK_PATH = "M216.7,187.9h26.5c1,0,2,0,3,0,12.6,0,26.9.1,36.7-9.8,6.8-6.9,10.1-17.4,10.1-32h-12.7c0,10.8-2.1,18.5-6.4,22.8-6.1,6.1-17,6.1-27.7,6-1,0-2.1,0-3.1,0h-13.7v-33.5h-12.7v33.5h-23.2l-55-31v-48.2h-12.7v41l-9.1-5.1h-.3c-.5-.4-53.6-27.6-54.2-69.3l-12.7.2c.7,49,57.1,78.5,61.2,80.5l56.5,31.8h-41.4v6.5c0,12.5,5,19.7,11.5,25.4,6.5,5.7,22.9,5.7,22.9,5.7h19.3v-13h-22.9c-9.6,0-15.4-3.9-17.4-11.7h51l79.9,42.3v27.2l-32.6-12.5-2.4-.5-99,53.6v13.7l2.6-.3,99.6-53.6,34,13.2,10.4-4.7v-39.9l-3.3-5.7-63-32.8Z";
+export declare const DEER_MARK_PATH = "M220.3,196.1h23c.9,0,1.8,0,2.6,0,10.9,0,23.3.1,31.8-8.5,5.9-6,8.8-15.1,8.8-27.7h-11c0,9.4-1.9,16-5.5,19.8-5.3,5.3-14.8,5.3-24,5.2-.9,0-1.8,0-2.7,0h-11.9v-29.1h-11v29.1h-20.1l-47.7-26.9v-41.8h-11v35.6l-7.9-4.4h-.2c-.5-.4-46.5-23.9-47-60.1l-11,.2c.6,42.5,49.6,68.1,53.1,69.9l49,27.6h-35.9v5.6c0,10.9,4.4,17.1,10,22.1,5.6,5,19.9,4.9,19.9,4.9h16.8v-11.2h-19.9c-8.3,0-13.4-3.4-15.1-10.1h44.3l69.3,36.7v23.6l-28.3-10.9-2.1-.4-85.9,46.5v11.9l2.3-.3,86.5-46.5,29.5,11.5,9.1-4.1v-34.7l-2.9-4.9-54.7-28.5Z";

package/dist/components/deer-mark-path.js

@@ -13,4 +13,8 @@
  * fill="currentColor" so only the antlers — not the square behind them —
  * follow the content division), only the path data itself is identical.
  */
-export const DEER_MARK_PATH = 'M216.7,187.9h26.5c1,0,2,0,3,0,12.6,0,26.9.1,36.7-9.8,6.8-6.9,10.1-17.4,10.1-32h-12.7c0,10.8-2.1,18.5-6.4,22.8-6.1,6.1-17,6.1-27.7,6-1,0-2.1,0-3.1,0h-13.7v-33.5h-12.7v33.5h-23.2l-55-31v-48.2h-12.7v41l-9.1-5.1h-.3c-.5-.4-53.6-27.6-54.2-69.3l-12.7.2c.7,49,57.1,78.5,61.2,80.5l56.5,31.8h-41.4v6.5c0,12.5,5,19.7,11.5,25.4,6.5,5.7,22.9,5.7,22.9,5.7h19.3v-13h-22.9c-9.6,0-15.4-3.9-17.4-11.7h51l79.9,42.3v27.2l-32.6-12.5-2.4-.5-99,53.6v13.7l2.6-.3,99.6-53.6,34,13.2,10.4-4.7v-39.9l-3.3-5.7-63-32.8Z';
+// Refreshed 2026-07-29 from the new master files the user uploaded to
+// assets/logos/mark/Digital/ (path taken verbatim from Mark-RGB_NOBKG-BLK.svg;
+// every variant in the set carries the identical path). partials/header.html:4
+// was updated in the same change — the two must keep matching.
+export const DEER_MARK_PATH = 'M220.3,196.1h23c.9,0,1.8,0,2.6,0,10.9,0,23.3.1,31.8-8.5,5.9-6,8.8-15.1,8.8-27.7h-11c0,9.4-1.9,16-5.5,19.8-5.3,5.3-14.8,5.3-24,5.2-.9,0-1.8,0-2.7,0h-11.9v-29.1h-11v29.1h-20.1l-47.7-26.9v-41.8h-11v35.6l-7.9-4.4h-.2c-.5-.4-46.5-23.9-47-60.1l-11,.2c.6,42.5,49.6,68.1,53.1,69.9l49,27.6h-35.9v5.6c0,10.9,4.4,17.1,10,22.1,5.6,5,19.9,4.9,19.9,4.9h16.8v-11.2h-19.9c-8.3,0-13.4-3.4-15.1-10.1h44.3l69.3,36.7v23.6l-28.3-10.9-2.1-.4-85.9,46.5v11.9l2.3-.3,86.5-46.5,29.5,11.5,9.1-4.1v-34.7l-2.9-4.9-54.7-28.5Z';

package/dist/components/nav.d.ts

@@ -16,6 +16,27 @@ export type NavItem = {
      * special-cased to an exact compare — see isActive() in SiteHeader.
      */
     match?: 'exact' | 'prefix';
+    /**
+     * Compare `active` against this path instead of `href`. For a section link
+     * whose href jumps straight to the section's first chapter (the way
+     * partials/header.html sends "Brand guide" to /brand/znacka.html) but which
+     * must stay lit on every page of the section, not just that chapter.
+     */
+    matchHref?: string;
+    /**
+     * Chapters of this section, split into columns. On a desktop the columns
+     * make up the section's mega-menu panel (slides out from under the header
+     * bar on hover/focus); on a phone they flatten into one accordion list
+     * under the section's row in the drawer. A column's `title` renders as a
+     * small uppercase heading above its links (the UI Kit groups its pages;
+     * the brand guide's plain chapter list leaves it unset). Mirrors the
+     * `.site-menu__group`/`.site-menu__panel` markup in partials/header.html.
+     */
+    submenu?: NavGroup[];
+};
+export type NavGroup = {
+    title?: string;
+    items: NavItem[];
 };
 /**
  * Does `pathname` count as being on `item`? Exported because SiteHeader renders

package/dist/components/nav.js

@@ -6,11 +6,12 @@
 export function isActive(item, pathname) {
     if (pathname === undefined)
         return false;
+    const target = item.matchHref ?? item.href;
     if (item.match !== 'prefix')
-        return item.href === pathname;
+        return target === pathname;
     // A bare "/" prefix would match every path, which is never what a section
     // link means. Compare exactly instead.
-    const base = item.href.replace(/\/$/, '');
+    const base = target.replace(/\/$/, '');
     if (base === '')
         return pathname === '/' || pathname === '';
     return pathname === base || pathname.startsWith(`${base}/`);

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { default as Eyebrow } from './components/Eyebrow.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 { isActive, type NavItem } from './components/nav.js';
+export { isActive, type NavItem, type NavGroup } from './components/nav.js';
 export { default as PageHero } from './components/PageHero.svelte';
 export { default as Pager } from './components/Pager.svelte';
 export { default as Panel } from './components/Panel.svelte';

package/package.json

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