@jelinek/ui 0.3.0

package/dist/components/Tabs.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+	import { setContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { TABS_CONTEXT, type TabsContext } from './tabs-context.js';
+
+	interface Props {
+		value?: string;
+		/**
+		 * Accessible names for the two scroll arrows. Verbatim from
+		 * assets/js/jelinek.js:502-503, which passes exactly these strings to
+		 * `arrow()` and sets them as the buttons' `aria-label`. Czech by default,
+		 * like every other user-facing string this kit ships (see ChapterNav's
+		 * `label`).
+		 */
+		prevLabel?: string;
+		nextLabel?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		prevLabel = 'Posunout na předchozí položky',
+		nextLabel = 'Posunout na další položky',
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	setContext<TabsContext>(TABS_CONTEXT, {
+		current: () => value,
+		select: (next) => (value = next)
+	});
+
+	// jelinek.css:834-838 (.tabs): display:flex, 6px gap. gap-1.5 = 6px —
+	// a fixed px, not 1.5 × a rem-relative default; see theme.css's
+	// `--spacing: 4px` pin (gen-tokens.js) for why that distinction matters
+	// under base.css's responsive root font-size (Task 20).
+	//
+	// TASK 31 — `.tabs` STOPPED WRAPPING AND BECAME A SIDEWAYS SCROLLER. The
+	// guide now reads `flex-wrap: nowrap; overflow-x: auto; scroll-behavior:
+	// smooth; scrollbar-width: none; -ms-overflow-style: none`, plus
+	// `.tabs::-webkit-scrollbar { display: none }` (:844-846, a rule shared with
+	// .chapter-nav__inner and .logo-tool__bgtabs, which get the same scroller
+	// declarations at :840-843). Its own comment states the intent: when the
+	// segments do not fit, they "NEZALOMÍ se do dalšího řádku, ale posouvají se
+	// do strany" — they no longer break onto a second line, they scroll
+	// sideways.
+	//
+	// This is a PAIRED change with Tab.svelte's `flex: 1 0 auto` (jelinek.css:880,
+	// was `flex: 1`). Do not touch one without the other: `flex: 1` carries a 0%
+	// basis, so segments would happily shrink below their own text inside a
+	// nowrap row and nothing would ever overflow — the scroller would never
+	// engage and the labels would just squash. `1 0 auto` grows to fill a wide
+	// row but never shrinks, which is what produces the overflow this rule
+	// scrolls.
+	// TASK 33 — the pill joined the surface system. The designer's 8d68770
+	// ("pilulky: stejný border a horní highlight jako ostatní povrchy") replaced
+	// `border: 0` with `border: 1px solid var(--border-subtle)` — the same
+	// hairline .panel/.card/.tile carry — and appended the shared dark-mode top
+	// highlight `inset 0 2px 1px -1px var(--box-primary)` to the dark inset
+	// shadow. The shadow's own two layers moved to HSL notation in b45c536 at
+	// bit-identical values (#00000040 = 0.251, #00000010 = 0.063, #ffffff40,
+	// #ffffff10 likewise), and they follow that notation here — in the
+	// SPACE-separated hsl() form, `hsl(0 0% 0% / 0.251)`, not the guide's
+	// comma-separated `hsl(0, 0%, 0%, 0.251)`. The two are the same colour in
+	// CSS Color 4; the difference is forced by Tailwind's arbitrary-value
+	// syntax, where commas inside `shadow-[…]` are the shadow-LAYER separator
+	// and a comma-form hsl() would be parsed as several broken layers. That is
+	// why the previous version of this line used #RRGGBBAA hex at all.
+	//
+	// --box-primary is a real passthrough token as of this task (it was promoted
+	// from a per-surface local property to one neutral :root value in 4ec82cd,
+	// see scripts/token-map.js), so it is referenced by name rather than
+	// substituted — the previous `var(--color-jelinek-black)` stand-in would now
+	// render a 95%-light highlight in dark mode instead of the intended 50% grey.
+	const BASE =
+		'flex flex-nowrap gap-1.5 rounded-pill border border-border-subtle bg-transparent p-1.5 ' +
+		'overflow-x-auto [scroll-behavior:smooth] [scrollbar-width:none] ' +
+		'[-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ' +
+		'shadow-[inset_0_0px_5px_hsl(0_0%_0%_/_0.251),inset_0_0px_5px_hsl(0_0%_0%_/_0.063)] ' +
+		'dark:shadow-[0_0_10px_hsl(0_0%_100%_/_0.251)_inset,inset_0_0px_50px_hsl(0_0%_100%_/_0.063),inset_0_2px_1px_-1px_var(--box-primary)]';
+
+	// jelinek.css:894-900 (shared segmented-switcher pill — selector list also
+	// covers .color-formats/.logo-tool__langs/.logo-tool__bgtabs): transparent
+	// background, no border, pill radius, 6px padding (p-1.5, same unit as the
+	// row gap), plus a two-layer inset shadow, above. Every appearance of tabs in
+	// the guide sits inside this pill — ui-old/komponenty.html:117 puts both
+	// classes (`class="tabs tabs--demo"`) on the very same element this component
+	// renders, and ui-old/barvy-v-akci.html:54 does the same for the division
+	// switcher. There is no bare-track tab style in the guide, so this pill IS
+	// Tabs' default appearance, not optional demo chrome. The shadow values are
+	// literals in the guide, not tokens, so they stay Tailwind arbitrary values
+	// here rather than named shadow-resting/interactive utilities.
+	//
+	// jelinek.css:255-258 (dark-mode counterpart, same selector list): a
+	// different, hand-written inset shadow (not a token) — applied through the
+	// kit's `dark:` variant (tokens.css:181).
+	//
+	// STILL NOT reproduced here: the width. That rule moved and became
+	// responsive in the merge — `.tabs--demo, .color-formats { width: 100%;
+	// margin-inline: auto }` with `@media (min-width: 640px) { width: 75% }`
+	// (jelinek.css:1067-1068) — but it is still page-layout centring for the
+	// guide's demo card rather than part of the switcher, so it stays out of the
+	// component on exactly the reasoning that kept the old flat `width: 75%`
+	// out. Callers apply it through the external `class` prop, and the showcase
+	// caller uses the mobile-first pair (see routes/komponenty/+page.svelte).
+	// Baking it in would be worse now than before: a component that forces
+	// itself to 75% of its parent cannot be used in a narrow column at all.
+
+	// ─── TASK 32 — THE SCROLL AFFORDANCE, AND WHY IT IS ARROWS ──────────────
+	//
+	// Task 31 shipped the scroller CSS without the thing that makes a hidden
+	// scrollbar usable, and said so: an overflowing row showed nothing at all.
+	// Two closable designs existed in the guide, and this component takes the
+	// one the guide applies to THIS element:
+	//
+	//   - `.tabs` gets ARROW BUTTONS. assets/js/jelinek.js:477-521
+	//     (`initTabScroll`) wraps every element matching `SCROLLERS` (:475 —
+	//     `.tabs, .logo-tool__bgtabs, .tile-scroller`) in a `.tabs-scroll` div
+	//     (jelinek.css:851) and injects `.tabs-scroll__prev/__next`, styled at
+	//     jelinek.css:858-873.
+	//   - `.chapter-nav__inner` gets GRADIENT EDGE FADES, and jelinek.js
+	//     :465-474 goes out of its way to EXCLUDE it from that selector, in a
+	//     comment that is explicit about why: "Dvě různá vodítka na jednom
+	//     prvku … nenavrhl nikdo" (nobody designed two different affordances on
+	//     one element), and "kdyby lišta měla mít šipky místo zastínění, vrať
+	//     sem `.chapter-nav__inner` a smaž ::before/::after v CSS — obojí naráz
+	//     ne".
+	//
+	// So the two treatments are a deliberate per-element choice, not a default
+	// and an exception, and copying ChapterNav's fades onto tabs would be a
+	// deviation from the guide rather than reuse of it. It would also not work:
+	// a fade is a `linear-gradient` from an OPAQUE surface colour, and
+	// ChapterNav can use `var(--color-surface)` because its bar is always the
+	// page background. `.tabs` is `background: transparent` sitting inside
+	// whatever surface a caller puts it on — a `<Demo variant="brown">`, a
+	// `<Panel variant="black">`, a photo behind `<Glass>` — so the same fade
+	// would paint a page-coloured smear over a coloured card. Arrows are
+	// self-contained (`bg-surface` pill + shadow) and carry no assumption about
+	// what is behind them.
+	//
+	// Written as real markup rather than injected on mount, because a component
+	// owns its markup — the same call PageHero makes about the guide's
+	// `<hr class="rule">`. That also fixes the guide's own ordering hazard: its
+	// arrows only exist after `initTabScroll()` runs, so a `.tabs` rendered
+	// later by an app's own JS never gets any.
+	//
+	// WHAT THIS DOES NOT REPRODUCE: jelinek.js:496-497's `try/catch` around
+	// `scrollBy({...})`, a fallback for embedded webviews that lack the object
+	// form. This kit's floor is Svelte 5 + `ResizeObserver`, both of which
+	// postdate `ScrollToOptions` everywhere, so the catch would be unreachable.
+	// Recorded as a decision, not an oversight.
+	//
+	// GEOMETRY NOTE. The guide pins its arrows to the WRAPPER's edges
+	// (`left: 2px` / `right: 2px`, jelinek.css:867-868), not the row's, and so
+	// does this. That is exact whenever the row fills its wrapper — which is
+	// every phone width, since the guide's own call-site width is `100%` below
+	// 640px and overflow is a narrow-screen condition. It is also why `class`
+	// keeps landing on the ROW rather than on the wrapper: the cn() contract and
+	// every existing caller depend on it. A caller that needs the WRAPPER to be
+	// a flex item with `flex: 1` (the guide does this for `.color-formats`)
+	// cannot express that through `class` today; no caller needs it yet.
+	const WRAP = 'relative min-w-0';
+
+	// jelinek.css:858-866 + :872-873, one to one: 30px circle, no border, no padding,
+	// centred content, surface fill + --text-muted1 glyph, --shadow-resting, and
+	// the two-property transition on the guide's own duration/easing tokens.
+	// Hover inverts to the neutral accent pair (--JELINEK-BLACK /
+	// --ON-JELINEK-BLACK), which flips itself in dark mode.
+	const ARROW =
+		'absolute top-1/2 flex h-[30px] w-[30px] -translate-y-1/2 items-center justify-center ' +
+		'rounded-pill border-0 p-0 bg-surface text-fg-muted1 shadow-resting cursor-pointer ' +
+		'transition-[background-color,color] duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		'hover:bg-jelinek-black hover:text-on-jelinek-black';
+
+	// State comes from the scroller, never from a breakpoint: a two-segment row
+	// does not overflow at any width and correctly shows no arrow at all. The
+	// thresholds are the guide's own (jelinek.js:506-508 uses +2/-2 px slack, so
+	// sub-pixel layout never leaves a permanently-lit arrow that cannot move).
+	// Both start at 0, so server-rendered HTML contains no buttons and the
+	// hydrated page adds them only if the row really does overflow.
+	let scroller = $state<HTMLElement | null>(null);
+	let prevButton = $state<HTMLButtonElement | null>(null);
+	let nextButton = $state<HTMLButtonElement | null>(null);
+	let scrollLeft = $state(0);
+	let scrollMax = $state(0);
+	const showPrev = $derived(scrollMax > 2 && scrollLeft > 2);
+	const showNext = $derived(scrollMax > 2 && scrollLeft < scrollMax - 2);
+
+	$effect(() => {
+		const el = scroller;
+		if (!el) return;
+		function measure() {
+			if (!el) return;
+			scrollLeft = el.scrollLeft;
+			scrollMax = el.scrollWidth - el.clientWidth;
+		}
+		measure();
+		el.addEventListener('scroll', measure, { passive: true });
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => {
+			el.removeEventListener('scroll', measure);
+			ro.disconnect();
+		};
+	});
+
+	// jelinek.js:493-497 — 80 % of the visible width per press, smooth.
+	//
+	// THE FOCUS HAND-OFF is this component's own addition, and it is why `nudge`
+	// is not simply a `scrollBy`. The guide's arrows are `display: none` the
+	// moment their direction is exhausted, so a keyboard user who presses Enter
+	// on "next" until the row ends has the button pulled out from under them and
+	// focus falls to <body> — measured, on this very page: one Enter at 320px
+	// takes scrollLeft from 0 to its 73px maximum, "next" unmounts, and
+	// `document.activeElement` becomes BODY, i.e. the next Tab press restarts
+	// from the top of the document.
+	//
+	// It cannot be fixed inline in this handler. At the moment of the press the
+	// opposite arrow does not exist yet — at scrollLeft 0 there is no "prev"
+	// button to hand focus to — and it only mounts once a scroll event reports
+	// the new position, part-way through the smooth animation. So the intent is
+	// recorded here and the effect below performs the focus when the element
+	// actually appears.
+	let handoff = $state<'prev' | 'next' | null>(null);
+
+	function nudge(dir: 'prev' | 'next') {
+		const el = scroller;
+		if (!el) return;
+		const step = Math.round(el.clientWidth * 0.8) * (dir === 'prev' ? -1 : 1);
+		const target = Math.max(0, Math.min(el.scrollLeft + step, scrollMax));
+		const exhausts = dir === 'prev' ? target <= 2 : target >= scrollMax - 2;
+		// If this press exhausts the direction, the pressed button is about to
+		// unmount; claim the opposite one, which by definition becomes reachable
+		// in the same move. Otherwise cancel any stale claim.
+		handoff = exhausts ? (dir === 'prev' ? 'next' : 'prev') : null;
+		el.scrollBy({ left: step, behavior: 'smooth' });
+	}
+
+	$effect(() => {
+		if (!handoff) return;
+		const target = handoff === 'prev' ? prevButton : nextButton;
+		if (!target) return; // not mounted yet; this effect re-runs when it is
+		target.focus();
+		handoff = null;
+	});
+
+	// jelinek.js:459-463 (`chevron()`), byte for byte: 16×16 in a 24-unit box, stroked in
+	// currentColor at 2.5 with round joins, so it inherits the button's hover
+	// colour change rather than needing its own rule.
+	const CHEVRON = { prev: 'M15 6l-6 6 6 6', next: 'M9 6l6 6-6 6' };
+</script>
+
+<div class={WRAP}>
+	<div bind:this={scroller} {...rest} role={rest.role ?? 'tablist'} class={cn(BASE, className)}>
+		{@render children()}
+	</div>
+	{#if showPrev}
+		<button
+			bind:this={prevButton}
+			type="button"
+			class={cn(ARROW, 'left-0.5')}
+			aria-label={prevLabel}
+			onclick={() => nudge('prev')}
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d={CHEVRON.prev} />
+			</svg>
+		</button>
+	{/if}
+	{#if showNext}
+		<button
+			bind:this={nextButton}
+			type="button"
+			class={cn(ARROW, 'right-0.5')}
+			aria-label={nextLabel}
+			onclick={() => nudge('next')}
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d={CHEVRON.next} />
+			</svg>
+		</button>
+	{/if}
+</div>

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

@@ -0,0 +1,20 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    /**
+     * Accessible names for the two scroll arrows. Verbatim from
+     * assets/js/jelinek.js:502-503, which passes exactly these strings to
+     * `arrow()` and sets them as the buttons' `aria-label`. Czech by default,
+     * like every other user-facing string this kit ships (see ChapterNav's
+     * `label`).
+     */
+    prevLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tag.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Variant = 'solid' | 'soft' | 'fill' | 'instock';
+
+	interface Props {
+		variant?: Variant;
+		/** Hue 0-360, for the soft and fill variants. */
+		hue?: number;
+		/** Saturation 0-100, for the soft and fill variants. */
+		saturation?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		variant = 'solid',
+		hue,
+		saturation,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLSpanElement> = $props();
+
+	// jelinek.css:581-584 (.tag): display:inline-block (not flex), 3px/12px
+	// padding (py-1 would be 4px, not 3px), font-weight 700 (not 500), and a
+	// fixed 0.78rem font-size that is NOT on the --step scale (its nearest
+	// rung, --step-down1, is 0.875rem since Task 25 — a flat value now, but
+	// still not this one) — kept as an arbitrary value.
+	const BASE = 'inline-block rounded-pill px-3 py-[3px] font-secondary text-[0.78rem] font-bold';
+
+	// `solid` has no CSS counterpart — bare `.tag` sets no background/color of
+	// its own in jelinek.css (real usages either add `.tag--instock` or an
+	// inline `style="background:..."`). This default is this component's own
+	// judgment call for a neutral resting tag, not a literal translation.
+	const VARIANT: Record<Variant, string> = {
+		solid: 'bg-surface-gray text-fg',
+		instock: 'bg-sem-success-strong text-fg-inverse',
+		// The soft and fill shades are computed from --tag-h / --tag-s, which are
+		// set inline. The lightness steps (90 / 54 / 24) and their light-vs-dark
+		// swap live in jelinek.css lines 592-596: dark mode re-lightens the
+		// *background* for soft but the *text* for fill — not the same property.
+		soft: 'bg-[hsl(var(--tag-h),var(--tag-s),90%)] text-[hsl(var(--tag-h),var(--tag-s),54%)] dark:bg-[hsl(var(--tag-h),var(--tag-s),24%)]',
+		fill: 'bg-[hsl(var(--tag-h),var(--tag-s),54%)] text-[hsl(var(--tag-h),var(--tag-s),90%)] dark:text-[hsl(var(--tag-h),var(--tag-s),24%)]'
+	};
+
+	const tunable = $derived(variant === 'soft' || variant === 'fill');
+
+	const style = $derived(tunable ? `--tag-h: ${hue ?? 0}; --tag-s: ${saturation ?? 0}%;` : undefined);
+
+	// Composes rather than overwrites: the previous version set the bare
+	// `style` shorthand unconditionally after {...rest}, which is `undefined`
+	// for the solid/instock variants — erasing a consumer's own `style` to
+	// `null` on those variants instead of leaving it alone. Trailing
+	// semicolons are stripped from each piece before rejoining: `style`
+	// already ends in `;`, so a naive join produced a double `;;`, which
+	// `CSSStyleDeclaration.cssText`'s parser treats as a malformed
+	// declaration and silently drops everything after it.
+	const mergedStyle = $derived(
+		[style, rest.style]
+			.filter((s): s is string => Boolean(s))
+			.map((s) => s.trim().replace(/;+$/, ''))
+			.join('; ') || undefined
+	);
+</script>
+
+<span {...rest} style={mergedStyle} class={cn(BASE, VARIANT[variant], className)}>
+	{@render children()}
+</span>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'solid' | 'soft' | 'fill' | 'instock';
+interface Props {
+    variant?: Variant;
+    /** Hue 0-360, for the soft and fill variants. */
+    hue?: number;
+    /** Saturation 0-100, for the soft and fill variants. */
+    saturation?: number;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLSpanElement>;
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/TextField.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import Label from './Label.svelte';
+
+	interface Props {
+		value?: string;
+		label?: string;
+		id?: string;
+		/**
+		 * Invalid state. Reproduces the guide's `.input.is-error`
+		 * (jelinek.css:988-991) — new in the Task 31 merge — and sets
+		 * `aria-invalid` alongside it, so the state is announced and not only
+		 * coloured. See ERROR below.
+		 */
+		error?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		label,
+		id,
+		error = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value'> = $props();
+
+	// $props.id() gives a stable per-instance id, so a label can be associated
+	// without the consumer having to invent one.
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+
+	// jelinek.css:966-975 (`.input, .select`), corrected against the draft brief:
+	// - border is 1px solid var(--text-muted2) (border-fg-muted2), NOT
+	//   border-border-subtle (that token is --border-subtle, a different,
+	//   lighter grey used elsewhere, e.g. Card).
+	// - padding is 11px 14px, NOT the 16px/12px py-3 px-4 the brief used.
+	// - font-size is a fixed 0.98rem literal (not on the --step scale, where
+	//   --step0 is a constant 1rem unrelated to this value) — kept as
+	//   text-[0.98rem], not text-step0.
+	// width:100%, font-family:--font-secondary, background:--bg-white,
+	// color:--text-black and border-radius:--radius-button all check out as
+	// w-full/font-secondary/bg-surface/text-fg/rounded-button.
+	//
+	// TASK 31 — THE FOCUS RING IS TOKENISED, AND THAT FIXES A DARK-MODE BUG.
+	// jelinek.css:972-975 now reads `outline: var(--focus-width) solid
+	// var(--focus-color); outline-offset: 1px; border-color: var(--focus-color)`.
+	// --focus-color is NOT simply --JELINEK-BROWN: it is --JELINEK-BROWN in
+	// light and the lighter --JELINEK-BROWN-HIGHLIGHT in dark
+	// (jelinek.css:139, :229), precisely so the ring stays visible against the
+	// dark canvas. The old `focus:outline-jelinek-brown focus:border-jelinek-brown`
+	// therefore drew a too-dark ring in dark mode. Referenced as var() rather
+	// than translated to a named token because --focus-color/--focus-width are
+	// emitted into :root by gen-tokens but are not in the @theme inline map, so
+	// no `outline-focus-color` utility exists; the var() reference also keeps
+	// this tracking the token if the designer retunes it.
+	// The width needs the `[length:…]` hint — `outline-[var(--focus-width)]`
+	// alone is ambiguous and Tailwind reads it as a COLOUR (verified against
+	// compiled output).
+	// Note the guide uses `:focus`, not `:focus-visible`, for form fields, so a
+	// mouse click shows the ring too — kept as `focus:`. That is deliberate on
+	// the guide's part: base.css's new global ring is `:focus-visible`, and
+	// `.input:focus` (specificity 0,2,0) outranks it either way.
+	const BASE =
+		'w-full rounded-button border border-fg-muted2 bg-surface px-[14px] py-[11px] ' +
+		'font-secondary text-[0.98rem] text-fg placeholder:text-fg-muted2 ' +
+		'focus:outline-[length:var(--focus-width)] focus:outline-offset-1 ' +
+		'focus:outline-[var(--focus-color)] focus:border-[var(--focus-color)]';
+
+	// jelinek.css:987-991 — NEW in the merge. `.input.is-error` recolours the
+	// border to --sem-error-strong, and `.input.is-error:focus` recolours the
+	// focus ring to match while leaving its width and offset alone. That token
+	// IS in the @theme map (--color-sem-error-strong), so these are named
+	// utilities; it also lightens in dark mode (hsl(7,100%,45%) -> 62%) to stay
+	// legible, which the named utility follows for free.
+	// Merged AFTER BASE so it wins on source order within the same
+	// tailwind-merge groups, and BEFORE `className` so a consumer override still
+	// beats both — the kit's standing cn() contract.
+	//
+	// NOT reproduced: the guide's `.field-error` message element
+	// (jelinek.css:992-995). That is markup plus `aria-describedby` wiring, i.e.
+	// a prop-surface addition rather than a rule to copy, and `.field-error` is
+	// not a guarded class so the lock makes no claim about it. Noted in the Task
+	// 31 report as a candidate follow-up.
+	const ERROR =
+		'border-sem-error-strong focus:border-sem-error-strong focus:outline-sem-error-strong';
+</script>
+
+{#if label}
+	<Label for={inputId}>{label}</Label>
+{/if}
+<input
+	{...rest}
+	id={inputId}
+	type={rest.type ?? 'text'}
+	aria-invalid={error ? 'true' : rest['aria-invalid']}
+	bind:value
+	class={cn(BASE, error && ERROR, className)}
+/>

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

@@ -0,0 +1,18 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    label?: string;
+    id?: string;
+    /**
+     * Invalid state. Reproduces the guide's `.input.is-error`
+     * (jelinek.css:988-991) — new in the Task 31 merge — and sets
+     * `aria-invalid` alongside it, so the state is announced and not only
+     * coloured. See ERROR below.
+     */
+    error?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value'>;
+declare const TextField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Theme = 'light' | 'dark';
+
+	interface Props {
+		theme?: Theme;
+		class?: string;
+		label?: string;
+	}
+
+	let {
+		theme = $bindable(),
+		// Literal copy of partials/header.html:10's aria-label, not the
+		// brief's shorter invented "Tmavý režim".
+		label = 'Přepnout světlý/tmavý režim',
+		class: className,
+		...rest
+	}: Props & Omit<HTMLButtonAttributes, 'type'> = $props();
+
+	// Seed from whatever is already on <html> instead of writing blind. A
+	// consumer that persists the user's choice (localStorage, a cookie, an
+	// SSR-rendered attribute) sets `data-theme` on the document element
+	// before this component ever mounts; unconditionally writing `theme`'s
+	// default ('light') back onto it on mount clobbered that on every load.
+	// Falls back to prefers-color-scheme, then 'light', only when the
+	// consumer hasn't bound `theme` AND nothing is already on the document.
+	$effect(() => {
+		if (theme === undefined) {
+			const existing = document.documentElement.dataset.theme;
+			theme =
+				existing === 'dark' || existing === 'light'
+					? existing
+					: window.matchMedia?.('(prefers-color-scheme: dark)').matches
+						? 'dark'
+						: 'light';
+			return;
+		}
+		if (document.documentElement.dataset.theme !== theme) {
+			document.documentElement.setAttribute('data-theme', theme);
+		}
+	});
+
+	const dark = $derived(theme === 'dark');
+
+	// jelinek.css:536-541 (.theme-toggle): relative, no shrink/grow, 52px x
+	// 28px (w-[52px] — not on Tailwind's default scale, which has no 13
+	// (52px) stop, jumping 12→14; h-7 = 28px is exact), no padding,
+	// cursor-pointer, a 2px solid border in text-black (border-2 border-fg —
+	// the brief's `border border-border-subtle` was a much lighter 1px
+	// subtle-grey border, wrong on both width and colour), transparent
+	// background (the brief filled it with bg-surface-gray), rounded-pill.
+	const TRACK =
+		'relative h-7 w-[52px] flex-none cursor-pointer rounded-pill border-2 border-fg bg-transparent p-0';
+
+	// jelinek.css:542-550 (.theme-toggle__knob / .is-dark / __icon): 20x20px
+	// circle (h-5 w-5, exact), 2px inset (top-0.5 left-0.5, exact),
+	// background var(--bg-white) → bg-surface (the brief's bg-jelinek-black
+	// was a solid BLACK knob, the opposite of the guide's light one),
+	// shadow-resting, rounded-full (a literal 50%, not the pill radius
+	// token). `.is-dark .theme-toggle__knob { transform: translateX(24px) }`
+	// (:549) → translate-x-6 = 24px, NOT the brief's translate-x-5 (20px).
+	//
+	// Task 31 — the knob's slide is `transform var(--dur-slow) var(--ease)`
+	// (jelinek.css:547). This is the one transition in the merge whose DURATION
+	// genuinely moved, not just its spelling: it was a literal `0.18s`, and the
+	// designer folded it into the shared --dur-slow (0.2s) with the other
+	// large-surface animations. A bare `transition-transform` would have run at
+	// Tailwind's 150ms default on Tailwind's own easing curve — wrong on both
+	// counts now — so both are named explicitly. See Button.svelte's comment for
+	// why this is not solved once globally in extras.css.
+	const KNOB =
+		'absolute top-0.5 left-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface shadow-resting ' +
+		'transition-transform duration-[var(--dur-slow)] ease-[var(--ease)]';
+
+	// jelinek.css:550 only declares `.theme-toggle__icon`'s size/colour
+	// (13x13px, color:var(--text-black)) — the actual sun/moon markup lives
+	// in assets/js/jelinek.js:259-260 (SUN_ICON/MOON_ICON), not in the CSS.
+	// Reproduced here verbatim as native Svelte conditionals keyed off
+	// `dark` (reactive) instead of the guide's imperative innerHTML swap —
+	// this is the one addition in this task not literally sourced from
+	// jelinek.css, flagged in the Task 9 report since the CSS only implies
+	// an icon exists, it doesn't specify one.
+	const ICON = 'block h-[13px] w-[13px] text-fg';
+</script>
+
+<button
+	{...rest}
+	type="button"
+	role={rest.role ?? 'switch'}
+	aria-checked={dark}
+	aria-label={label}
+	onclick={(event) => {
+		theme = dark ? 'light' : 'dark';
+		rest.onclick?.(event);
+	}}
+	class={cn(TRACK, className)}
+>
+	<span class={cn(KNOB, dark && 'translate-x-6')}>
+		{#if dark}
+			<svg class={ICON} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+				<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+			</svg>
+		{:else}
+			<svg
+				class={ICON}
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				aria-hidden="true"
+			>
+				<circle cx="12" cy="12" r="4" />
+				<path
+					d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+				/>
+			</svg>
+		{/if}
+	</span>
+</button>

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

@@ -0,0 +1,11 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Theme = 'light' | 'dark';
+interface Props {
+    theme?: Theme;
+    class?: string;
+    label?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLButtonAttributes, 'type'>;
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;