@jelinek/ui 0.3.0

package/dist/components/Button.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Variant = 'primary' | 'secondary' | 'ghost';
+	type Color = 'brown' | 'magenta' | 'black';
+
+	interface Props {
+		variant?: Variant;
+		color?: Color;
+		href?: string;
+		disabled?: boolean;
+		active?: boolean;
+		fullWidth?: boolean;
+		class?: string;
+		onclick?: (event: MouseEvent) => void;
+		children: Snippet;
+	}
+
+	let {
+		variant = 'primary',
+		color = 'brown',
+		href,
+		disabled = false,
+		active = false,
+		fullWidth = false,
+		class: className,
+		onclick,
+		children,
+		...rest
+	}: Props &
+		Omit<
+			HTMLButtonAttributes & HTMLAnchorAttributes,
+			'href' | 'disabled' | 'onclick'
+		> = $props();
+
+	// jelinek.css:734-741 fixes the button's type size, line height and padding
+	// to exact pixel/rem values, not the modular type scale or 8pt spacing grid.
+	// Fidelity to the guide beats token purity for this component — do not
+	// "tidy" text-[0.98rem]/leading-[1.2]/px-[26px]/py-[11px] back to scale
+	// tokens.
+	//
+	// Task 31 — the transition is now the guide's OWN property list and its own
+	// duration/easing tokens (jelinek.css:739: `transition: background
+	// var(--dur-base) var(--ease), color …, border-color …, box-shadow …`),
+	// replacing a bare `transition-all`. Two separate corrections in one:
+	//   - PROPERTY LIST. `transition-all` animates every animatable property,
+	//     including ones the guide deliberately leaves alone. The guide names
+	//     four; so does this now.
+	//   - EASING, and this one was a real (if invisible) mismatch even before
+	//     the merge. Tailwind's default timing function is
+	//     `cubic-bezier(0.4, 0, 0.2, 1)` (verified in
+	//     node_modules/tailwindcss/theme.css's --default-transition-timing-
+	//     function), while the guide's --ease is the CSS keyword `ease` =
+	//     `cubic-bezier(0.25, 0.1, 0.25, 1)`. A bare `transition-*` utility
+	//     therefore never matched the guide's curve. Naming --ease explicitly
+	//     fixes that and makes the kit track the token.
+	//     Duration happened to agree (--dur-base 0.15s = Tailwind's 150ms
+	//     default), but it is spelled out for the same tracking reason: the
+	//     agreement is a property of today's value, not of the system.
+	// NOT done as a global `--default-transition-*` override in extras.css,
+	// which would have covered every component at once: extras.css is OPTIONAL
+	// (package.json exports it separately), so a consumer who skips it would get
+	// silently un-branded transitions everywhere. Components must not depend on
+	// optional CSS for correctness — the same call base.css's own header makes.
+	const BASE =
+		'inline-flex items-center justify-center gap-2 border-2 border-transparent rounded-button ' +
+		'px-[26px] py-[11px] font-primary text-[0.98rem] leading-[1.2] font-bold no-underline ' +
+		'cursor-pointer shadow-resting ' +
+		'transition-[background,color,border-color,box-shadow] ' +
+		'duration-[var(--dur-base)] ease-[var(--ease)]';
+
+	const PRIMARY: Record<Color, string> = {
+		brown:
+			'bg-jelinek-brown text-fg-inverse hover:bg-jelinek-brown-highlight hover:shadow-interactive',
+		magenta:
+			'bg-jelinek-magenta text-fg-inverse hover:bg-jelinek-magenta-highlight hover:shadow-interactive',
+		black:
+			'bg-jelinek-black text-on-jelinek-black hover:bg-jelinek-black-highlight hover:shadow-interactive'
+	};
+
+	const SECONDARY: Record<Color, string> = {
+		brown:
+			'bg-transparent text-jelinek-brown border-jelinek-brown ' +
+			'hover:bg-jelinek-brown-highlight hover:text-fg-inverse hover:border-transparent hover:shadow-interactive',
+		magenta:
+			'bg-transparent text-jelinek-magenta border-jelinek-magenta ' +
+			'hover:bg-jelinek-magenta-highlight hover:text-fg-inverse hover:border-transparent hover:shadow-interactive',
+		black:
+			'bg-transparent text-jelinek-black border-jelinek-black ' +
+			'hover:bg-jelinek-black-highlight hover:text-on-jelinek-black hover:border-transparent hover:shadow-interactive'
+	};
+
+	// jelinek.css:765 (and its :hover at :769) keeps ghost buttons flat — no
+	// resting or hover shadow — unlike primary/secondary which get shadow-resting
+	// from BASE and shadow-interactive on hover/active.
+	const GHOST: Record<Color, string> = {
+		brown:
+			'bg-transparent border-transparent shadow-none text-jelinek-brown hover:text-jelinek-brown-highlight',
+		magenta:
+			'bg-transparent border-transparent shadow-none text-jelinek-magenta hover:text-jelinek-magenta-highlight',
+		black:
+			'bg-transparent border-transparent shadow-none text-jelinek-black hover:text-jelinek-black-highlight'
+	};
+
+	// Active always means a full fill in the accent colour — the highlight shade
+	// is reserved for hover. (ui/komponenty.html, "Aktivní / vybraný stav")
+	// jelinek.css:776-779 also raises active buttons to shadow-interactive.
+	const ACTIVE: Record<Color, string> = {
+		brown: 'bg-jelinek-brown text-fg-inverse border-transparent shadow-interactive',
+		magenta: 'bg-jelinek-magenta text-fg-inverse border-transparent shadow-interactive',
+		black: 'bg-jelinek-black text-on-jelinek-black border-transparent shadow-interactive'
+	};
+
+	const DISABLED =
+		'bg-surface-gray text-fg-muted2 border-transparent shadow-none cursor-not-allowed ' +
+		'pointer-events-none hover:bg-surface-gray hover:text-fg-muted2 hover:shadow-none';
+
+	const byVariant = $derived(
+		variant === 'primary' ? PRIMARY[color] : variant === 'secondary' ? SECONDARY[color] : GHOST[color]
+	);
+
+	const classes = $derived(
+		cn(
+			BASE,
+			byVariant,
+			active && ACTIVE[color],
+			disabled && DISABLED,
+			fullWidth && 'w-full',
+			className
+		)
+	);
+
+	// A disabled link keeps its genuine href and native `link` role — a
+	// screen-reader user must still land on something announced as a link,
+	// not on an inert generic element. Activation is blocked at the handler
+	// level instead: mouse/AT clicks are intercepted here, and keyboard
+	// activation (Enter on a focused <a href>) is intercepted separately,
+	// rather than relying on `pointer-events-none` alone (it only stops
+	// pointer input, not keyboard or assistive-technology activation).
+	function handleClick(event: MouseEvent) {
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onclick?.(event);
+	}
+
+	// Only ever wired to the <a> branch below, so the event is typed to match
+	// exactly the overload `rest.onkeydown` resolves to there — a plain
+	// `KeyboardEvent` doesn't satisfy either half of HTMLButtonAttributes &
+	// HTMLAnchorAttributes's overloaded onkeydown at once.
+	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLAnchorElement }) {
+		if (disabled && event.key === 'Enter') {
+			event.preventDefault();
+		}
+		rest.onkeydown?.(event);
+	}
+</script>
+
+{#if href}
+	<a
+		{...rest}
+		{href}
+		aria-disabled={disabled ? 'true' : rest['aria-disabled']}
+		tabindex={disabled ? -1 : rest.tabindex}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+		class={classes}
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button {...rest} type={rest.type ?? 'button'} {disabled} onclick={handleClick} class={classes}>
+		{@render children()}
+	</button>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary' | 'secondary' | 'ghost';
+type Color = 'brown' | 'magenta' | 'black';
+interface Props {
+    variant?: Variant;
+    color?: Color;
+    href?: string;
+    disabled?: boolean;
+    active?: boolean;
+    fullWidth?: boolean;
+    class?: string;
+    onclick?: (event: MouseEvent) => void;
+    children: Snippet;
+}
+type $$ComponentProps = Props & Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'href' | 'disabled' | 'onclick'>;
+declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Card.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		padded?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		padded = true,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// jelinek.css:474-481 draws the card border as a two-layer gradient
+	// (padding-box fill + border-box gradient from --box-accent to
+	// --border-subtle) so a divisional --box-accent can tint just the edge.
+	// This component has no colour-variant prop, and --box-accent defaults to
+	// --border-subtle, so both gradient stops are identical and the technique
+	// collapses to a flat 1px border-border-subtle — reproduced directly
+	// rather than replicating the (here invisible) gradient machinery.
+	// jelinek.css:322-325 puts .card on the secondary (Avenir) family at
+	// weight 300 (Light) as its body text, same as .alert/.panel/etc.
+	// jelinek.css:483's `padding: 24px` matches p-6 exactly — p-6 resolves to
+	// a fixed 24px at every viewport width because theme.css pins Tailwind's
+	// `--spacing` to a literal 4px (gen-tokens.js), not its rem-relative
+	// default; see that file's comment for why a rem-based p-6 would have
+	// drifted below the guide's 24px once base.css's html got a responsive
+	// font-size (Task 20).
+	// Deliberately NOT reproduced: the same line's `margin-bottom: 1.5rem`.
+	// Same reasoning as Alert's dropped margin: a reusable Card shouldn't
+	// impose spacing on whatever a consumer stacks it in, and the guide's own
+	// CSS zeroes this exact margin inside `.grid` (line 485) — treating it as
+	// a page-layout convenience, not a property of "card". Flagging for
+	// adjudication per the task brief.
+	// jelinek.css:652 (`.card h3, .tile h3`): headings inside components are
+	// deliberately NOT the content hierarchy — they hold a smaller,
+	// componentised --step1 size at line-height 1.3, not the page's large h3
+	// modular-scale step. (Tile's own h3 rule also adds a 6px margin-bottom
+	// via a Tile-only selector, jelinek.css:648 — that one is not shared with
+	// .card, so it is not reproduced here.) jelinek.css:327-331 (the same
+	// shared strong/b block that gives the card itself font-secondary/
+	// font-light) raises nested strong/b back to font-weight 500. Both
+	// reproduced as compound arbitrary variants on the root element, matching
+	// the pattern Tile.svelte uses for its own equivalent rules, since Card's
+	// children are an opaque Snippet this component doesn't otherwise touch.
+	// TASK 34 — the dark-mode inset top highlight, jelinek.css:251-257:
+	// `:root[data-theme="dark"] .panel, .card, .demo, .swatch, .logo-tool {
+	// box-shadow: inset 0 2px 1px -1px var(--box-primary) }`. `.card` is in that
+	// selector list and this was missing, so the guide's card computed
+	// `inset 0 2px 1px -1px rgb(128,128,128)` in dark where the kit's computed
+	// `none`. See Panel.svelte for why it was dropped and why that was wrong.
+	// This component has no colour-variant prop, so jelinek.css:705-706's
+	// `.card--brown`/`.card--magenta` --box-primary overrides have no
+	// counterpart to attach to; the highlight is always the :root 50% grey here.
+	const BASE =
+		'rounded-card border border-border-subtle bg-surface font-secondary font-light ' +
+		'[&_h3]:text-step1 [&_h3]:leading-[1.3] [&_strong]:font-medium [&_b]:font-medium ' +
+		'dark:shadow-[inset_0_2px_1px_-1px_var(--box-primary)]';
+</script>
+
+<div {...rest} class={cn(BASE, padded && 'p-6', className)}>
+	{@render children()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    padded?: boolean;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/ChapterNav.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { isActive, type NavItem } from './nav.js';
+
+	interface Props {
+		items: NavItem[];
+		active?: string;
+		/**
+		 * Accessible name for the `<nav>` landmark. The bar is a horizontal
+		 * scroll region with `tabindex="0"` (see INNER below), so it needs a
+		 * name for a screen-reader user to know what they have landed in.
+		 * Czech by default, like every other user-facing string this kit ships.
+		 */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		items,
+		active,
+		label = 'Kapitoly',
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLElement> = $props();
+
+	// jelinek.css:559-638 (.chapter-nav / .chapter-nav__inner) — the guide's
+	// floating pill bar, tucked under the (also floating) SiteHeader. Per
+	// direction, this is reproduced as the component's own default rather
+	// than left to a consuming app.
+	//
+	// Task 26 — mobile-first, and the `min-[620.02px]:` epsilon is GONE.
+	// The guide used to express the phone case as
+	// `@media (max-width: 620px) { .site-header, .chapter-nav { position: static } }`
+	// and the epsilon existed purely to convert that INCLUSIVE max-width
+	// boundary into a mobile-first `min-width` without a gap (Tailwind's
+	// `max-[620px]:` compiles to the exclusive `width < 620px`). That block is
+	// gone: the guide declares the phone layout unconditionally and enhances it
+	// in `@media (min-width: 640px)`, so `min-[640px]:` is an EXACT translation.
+	// Task 30 moved the boundary from 621 to 640: the guide converged on the
+	// designer's 640/1024/1440 ladder, and 621 was an artifact of the
+	// `--ratio` tiers that no longer exist. Grid no longer needs an epsilon
+	// either — its `.grid--*` rules are mobile-first `min-width` now too.
+	//
+	// TASK 33 — ON A PHONE THIS BAR IS NOT RENDERED AT ALL. jelinek.css:521-525
+	// now reads `.chapter-nav { display: none; position: static; padding: 0
+	// var(--space-3) }`, and `@media (min-width: 640px)` turns it back on with
+	// `display: block; position: absolute`. That is the designer's decision
+	// (6750ee8): below 640px the chapters live inside the header's burger panel
+	// instead, which is why SiteHeader now takes a `chapterItems` prop — a phone
+	// reader has to be able to reach them somewhere, and a second glass strip
+	// under a full-width glass header was the arrangement he replaced.
+	//
+	// Everything the previous phone base carried is gone with it: the `-mt-1.5`
+	// that cancelled the old `py-1.5` header gutter (the header has no gutter on
+	// a phone any more, `padding: 0`), the `pb-2`, and the narrower `px-3`. The
+	// padding is now a flat 24px (`px-6` = --space-3) at every width, so it does
+	// not need a variant either.
+	//
+	// `position: static` in the base is the guide's own wording and is harmless
+	// 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 ' +
+		'min-[640px]:block min-[640px]:absolute min-[640px]:inset-x-0 ' +
+		'min-[640px]:top-[calc(var(--header-h)-11px)]';
+
+	// The inner bar itself (jelinek.css:593-604): flex/gap-1.5 (6px), 16px/8px
+	// padding (py-2 px-4), max-w-page + mx-auto centering, the glass, and
+	// shadow-resting. The dark variant's box-shadow is the SAME `shadow-resting`
+	// as light — no extra inset highlight here (that's SiteHeader-only, see
+	// there).
+	//
+	// Task 31, part 1 — THE GLASS IS THE SHARED TOKEN SET NOW. jelinek.css:597-600
+	// reads `background: var(--glass-fill); backdrop-filter: var(--glass-filter);
+	// border: 1px solid var(--glass-border)`, identical to .site-header__inner
+	// and .glassmorphism. Fill was `rgba(255,255,255,.6)` light /
+	// `rgba(13,13,13,.6)` dark (both hand-written here) and is now one token that
+	// flips itself; filter was `blur(20px) brightness(150%)`/`brightness(40%)`
+	// and is now `blur(25px) saturate(140%)` in both themes; border was
+	// --border-subtle and is now --glass-border. Both `dark:` utilities are gone
+	// with the guide's own dark rules — jelinek.css:262-264 now only sets the
+	// FILL token in dark, and the filter override was deleted outright. See
+	// Glass.svelte for why the filter is an arbitrary property pair.
+	//
+	// Task 31, part 2 — the guide gave this bar the SAME scroller treatment as
+	// `.tabs`, in a rule that names both (jelinek.css:834-846):
+	// `flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
+	// scrollbar-width: none; -ms-overflow-style: none` plus
+	// `::-webkit-scrollbar { display: none }`. Two of those are real changes
+	// here: `scrollbar-width` was `thin` and is now `none`, and
+	// `scroll-behavior: smooth` is new (it makes the mount-time "scroll the
+	// active chapter into view" below animate instead of jumping). `flex-wrap:
+	// nowrap` is now explicit in the guide where it was previously only the
+	// flex default — spelled out here for the same reason.
+	//
+	// HIDING THE SCROLLBAR COSTS THIS COMPONENT NOTHING, which is why it is
+	// reproduced as-is: unlike Tabs (see Tabs.svelte's own note on the same
+	// change), this bar already carries the guide's replacement affordance —
+	// the gradient edge fades below, driven by real scroll position — plus
+	// `tabindex="0"` for keyboard scrolling. The guide reached the same
+	// conclusion for the same element: assets/js/jelinek.js:467-474 deliberately
+	// EXCLUDES `.chapter-nav__inner` from the arrow-button wrapper because it
+	// already has the fades, and says so ("Dvě různá vodítka na jednom prvku …
+	// nenavrhl nikdo" — nobody designed two different affordances on one
+	// element). The `.chapter-nav .tabs-scroll*` rules at jelinek.css:853-855
+	// are dead code kept only so that decision is one step to reverse; there is
+	// nothing there for this component to reproduce.
+	//
+	// Fix round 1: NO `flex-wrap: wrap` — wrapping would be self-contradictory
+	// (a wrapped row never overflows, so the horizontal scroll this bar is built
+	// around never engages) and would break `--subnav-h: 58px`, a fixed
+	// single-row-height token other layout maths depends on.
+	//
+	// Task 26 (audit M4) — this stayed a scroller rather than becoming a
+	// wrapping row, and that was measured rather than assumed: the guide's nine
+	// brand chapters have 860px of intrinsic pill width, which at a 320px
+	// viewport wraps to four rows, ~164px — it would hand back most of what the
+	// header redesign just saved. So the scroller keeps its single row and
+	// gains the two things it was missing:
+	//   - `tabindex="0"` + a focus ring, so the region is keyboard-operable
+	//     (WCAG 2.1.1). Note the links inside were already reachable — focusing
+	//     an off-screen link scrolls it into view — so this closes the
+	//     "scroll the region without moving focus link-by-link" case, not a
+	//     total lockout.
+	//   - an edge fade on whichever side still has content, driven by the real
+	//     scroll position (see `atStart`/`atEnd` below), so it never appears
+	//     where there is nothing to scroll.
+	// `rounded-b-card` + `border-t-0`, NOT `rounded-card`/`rounded-pill`: the
+	// guide rounds only the bottom two corners and zeroes the top border,
+	// UNCONDITIONALLY — this is the static half of the joined-header seam,
+	// reproduced as-is regardless of scroll position or of whether a SiteHeader
+	// is actually rendered above this component. The OTHER, scroll-linked half
+	// (the header's own top-only radius, dropped bottom border and shadow)
+	// lives in SiteHeader's `hasChapterNav` prop (Task 15;
+	// chapter-nav-dock.svelte.ts). That module is unchanged by Task 26 — its
+	// 50px threshold and its meaning are untouched — but the state it exposes
+	// now matters on phones too, where the header did not previously stay on
+	// screen at all.
+	// Task 32 — THE FOCUS RING IS ON THE FOCUS TOKENS, not --JELINEK-BROWN.
+	// jelinek.css:637-640 now reads `outline: var(--focus-width) solid
+	// var(--focus-color); outline-offset: calc(-1 * var(--focus-offset))`. The
+	// colour is the point: --focus-color is --JELINEK-BROWN in light mode but
+	// --JELINEK-BROWN-HIGHLIGHT in dark (tokens.css:47/100), so the previous
+	// hard-coded `outline-jelinek-brown` here rendered rgb(147,101,57) against
+	// the rgb(201,157,115) every other focusable element in the kit shows in
+	// dark mode — measurably darker, on the one control whose ring sits on
+	// glass. See TextField.svelte for the same reasoning and the same
+	// `[length:…]` hint (Tailwind needs it to read a var() as a width rather
+	// than a colour).
+	//
+	// The OFFSET stays negative — the ring is drawn inside the bar, because an
+	// outward ring would collide with the SiteHeader this bar is docked to —
+	// but it is now derived from --focus-offset rather than a literal -2px, so
+	// the three focus tokens move together.
+	const INNER =
+		'mx-auto flex max-w-page flex-nowrap items-center gap-1.5 rounded-b-card ' +
+		'border border-t-0 border-[var(--glass-border)] bg-[var(--glass-fill)] px-4 py-2 shadow-resting ' +
+		'[-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)] ' +
+		'overflow-x-auto [scroll-behavior:smooth] [scrollbar-width:none] ' +
+		'[-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ' +
+		'focus-visible:outline-[length:var(--focus-width)] ' +
+		'focus-visible:outline-offset-[calc(-1*var(--focus-offset))] ' +
+		'focus-visible:outline-[var(--focus-color)]';
+
+	// jelinek.css:622-629. Resting colour is text-muted1 with hover adding
+	// BOTH a text colour change and a background. The active pill is
+	// `color: var(--text-black); border-color: var(--JELINEK-BROWN);
+	// background: var(--bg-brown)` — a light brown-bordered pill with full-
+	// strength text, NOT a solid black fill. `border: 1px solid transparent`
+	// is kept on rest/hover so the active item's border doesn't shift layout
+	// when it appears — tailwind-merge drops it in favour of the active
+	// variant's `border-jelinek-brown` since both target the same
+	// border-color group.
+	const REST = 'text-fg-muted1 hover:bg-surface-gray hover:text-fg';
+	const ACTIVE = 'border-jelinek-brown bg-surface-brown text-fg';
+
+	// Scroll affordance. The fades are real elements rather than `before:`/
+	// `after:` utilities because a component owns its markup — the same call
+	// PageHero makes about the guide's `<hr class="rule">` marker. They are
+	// positioned against OUTER (`relative` on a phone, `absolute` from 640px
+	// up — both are positioned, so both establish the containing block), and
+	// inset 1px so they never blur the bar's own border.
+	//
+	// State is read from the scroller, not guessed from a breakpoint: a nav
+	// with three chapters does not overflow at any width and correctly shows
+	// no fade at all. A ResizeObserver covers the viewport changing under a
+	// fixed set of items; the scroll listener covers the reader moving.
+	let scroller = $state<HTMLElement | null>(null);
+	let scrollLeft = $state(0);
+	let scrollMax = $state(0);
+	const showStart = $derived(scrollMax > 1 && scrollLeft > 1);
+	const showEnd = $derived(scrollMax > 1 && scrollLeft < scrollMax - 1);
+
+	$effect(() => {
+		const el = scroller;
+		if (!el) return;
+		function measure() {
+			if (!el) return;
+			scrollLeft = el.scrollLeft;
+			scrollMax = el.scrollWidth - el.clientWidth;
+		}
+		// Bring the active chapter into view on mount, mirroring
+		// assets/js/jelinek.js's initChapterNavScroll(): a nav whose own current
+		// entry is off-screen is worse than no scroller. Only when it really is
+		// clipped, though — centring unconditionally would also move the bar on
+		// the (common, wider) renders where the active pill is already visible,
+		// which is a change nobody asked for.
+		const current = el.querySelector<HTMLElement>('[aria-current="page"]');
+		if (current) {
+			const pill = current.getBoundingClientRect();
+			const port = el.getBoundingClientRect();
+			if (pill.left < port.left - 1 || pill.right > port.right + 1) {
+				const offset = pill.left - port.left + el.scrollLeft;
+				el.scrollLeft = Math.max(0, offset - (el.clientWidth - current.offsetWidth) / 2);
+			}
+		}
+		measure();
+		el.addEventListener('scroll', measure, { passive: true });
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => {
+			el.removeEventListener('scroll', measure);
+			ro.disconnect();
+		};
+	});
+
+	// jelinek.css:573-592 (.chapter-nav::before/::after) + :670 (the ≥640px
+	// `bottom: 1px`). The fade's `transition` used to be the ONE in the guide
+	// still spelled as a literal `0.15s ease` while everything else had moved
+	// onto --dur-*/--ease; this component referenced the tokens anyway, and
+	// Task 31 reported the literal as a likely oversight rather than copying it
+	// as a divergence. Task 32 closed it in the guide itself (:581 now reads
+	// `transition: opacity var(--dur-base) var(--ease)`), so the two spellings
+	// agree and no divergence is left to record. The explicit easing still
+	// matters, because Tailwind's default curve is not `ease` (see
+	// Button.svelte).
+	// Task 33 — `bottom: 1px` is unconditional in the guide now (the phone-only
+	// `bottom: 9px`, which cleared the old `pb-2`, went with the phone layout),
+	// and so are the 25px insets below: the bar's own padding is a flat
+	// --space-3 (24px) plus its 1px border at every width.
+	const FADE =
+		'pointer-events-none absolute top-px bottom-px w-9 ' +
+		'transition-opacity duration-[var(--dur-base)] ease-[var(--ease)]';
+</script>
+
+<nav {...rest} class={cn(OUTER, className)} aria-label={label}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<!-- The tabindex is deliberate and is the fix for audit M4, not an
+	     oversight the linter caught: WCAG 2.1.1 requires a scrollable region to
+	     be operable from the keyboard, and a scroll container is only
+	     scrollable by arrow key once it can hold focus. The rule fires because
+	     a plain <div> is non-interactive, which is true and is exactly the
+	     situation the success criterion covers. No `role` is added: the
+	     enclosing <nav> landmark already carries the accessible name, and
+	     `role="group"` here would make a screen reader announce "Kapitoly"
+	     twice. -->
+	<div bind:this={scroller} class={INNER} tabindex="0">
+		{#each items as item (item.href)}
+			<a
+				href={item.href}
+				aria-current={isActive(item, active) ? 'page' : undefined}
+				class={cn(
+					'whitespace-nowrap rounded-pill border border-transparent px-[13px] py-1.5 font-secondary text-[0.88rem] font-medium no-underline transition-colors',
+					isActive(item, active) ? ACTIVE : REST
+				)}
+			>
+				{item.label}
+			</a>
+		{/each}
+	</div>
+	<span
+		aria-hidden="true"
+		class={cn(
+			FADE,
+			'left-[25px] rounded-bl-[calc(var(--radius-card)-1px)]',
+			'bg-[linear-gradient(to_right,var(--color-surface)_20%,transparent)]',
+			showStart ? 'opacity-100' : 'opacity-0'
+		)}
+	></span>
+	<span
+		aria-hidden="true"
+		class={cn(
+			FADE,
+			'right-[25px] rounded-br-[calc(var(--radius-card)-1px)]',
+			'bg-[linear-gradient(to_left,var(--color-surface)_20%,transparent)]',
+			showEnd ? 'opacity-100' : 'opacity-0'
+		)}
+	></span>
+</nav>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type NavItem } from './nav.js';
+interface Props {
+    items: NavItem[];
+    active?: string;
+    /**
+     * Accessible name for the `<nav>` landmark. The bar is a horizontal
+     * scroll region with `tabindex="0"` (see INNER below), so it needs a
+     * name for a screen-reader user to know what they have landed in.
+     * Czech by default, like every other user-facing string this kit ships.
+     */
+    label?: string;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
+declare const ChapterNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChapterNav = ReturnType<typeof ChapterNav>;
+export default ChapterNav;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		checked?: boolean;
+		label: string;
+		id?: string;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		id,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'checked' | 'type'> = $props();
+
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+
+	// jelinek.css has NO rule at all for checkbox inputs or their wrapper —
+	// ui/komponenty.html renders them as bare
+	// `<label style="display:flex;gap:10px;...">` with no class. The label
+	// TEXT still ends up on Avenir in the real guide page, though: that demo
+	// markup sits inside `<div class="demo">`, and `.card, .panel, .alert,
+	// .tile, .demo, .swatch { font-family: var(--font-secondary); ... }`
+	// (jelinek.css:322-324) applies font-secondary to it ambiently. Setting
+	// font-secondary/text-fg explicitly here reproduces that real rendering
+	// 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';
+</script>
+
+<label for={inputId} class={cn(LABEL, className)}>
+	<input {...rest} id={inputId} type="checkbox" bind:checked class="accent-jelinek-brown" />
+	{label}
+</label>

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

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    checked?: boolean;
+    label: string;
+    id?: string;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'checked' | 'type'>;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;