@jelinek/ui 0.9.0 → 0.9.2

package/dist/components/SiteHeader.svelte

@@ -3,11 +3,14 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/cn.js';
 	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
 	import { createChapterNavDock } from '../utils/chapter-nav-dock.svelte.js';
 	import { DEER_MARK_PATH } from './deer-mark-path.js';
 	import { isActive, type NavGroup, type NavItem } from './nav.js';
 
 	interface Props {
+		/** Cíl odkazu „Přeskočit na obsah“ — id hlavního obsahu stránky. */
+		skipHref?: string;
 		/**
 		 * Escape hatch: a snippet rendering custom mark content in place of the
 		 * bundled, re-theming deer mark (e.g. a division-specific logo). Most
@@ -21,6 +24,20 @@
 		 * app is not rooted at `/`, e.g. mounted under a base path.
 		 */
 		logoHref?: string;
+		/**
+		 * Cesta zpět na firemní rozcestník. Když je zadaná, vykreslí se jako
+		 * PRVNÍ položka lišty, vlevo před znakem, ikona domečku (`home` ze sady
+		 * ikon) bez textu — na každé šířce, telefon včetně. Rozhodnutí majitele
+		 * 15. 9. 2026: firemní aplikace ze šablon tak nepotřebují tlačítko
+		 * „Zpět na rozcestník“ v `actions`, které vedle odkazů menu vypadalo
+		 * jinak velké. Bez této vlastnosti se hlavička nemění.
+		 */
+		homeHref?: string;
+		/**
+		 * Přístupný název ikony domečku (`aria-label` i `title`). Ikona nemá
+		 * viditelný text, takže tohle je jediné, co přečte čtečka.
+		 */
+		homeLabel?: string;
 		subtitle?: string;
 		items?: NavItem[];
 		active?: string;
@@ -98,9 +115,12 @@
 	}
 
 	let {
+		skipHref = '#hlavni-obsah',
 		logo,
 		logoAlt = 'JELÍNEK',
 		logoHref = '/',
+		homeHref,
+		homeLabel = 'Zpět na rozcestník',
 		subtitle,
 		items = [],
 		active,
@@ -276,7 +296,7 @@
 	// Three of his commits land here (36354b9, 6750ee8, 74ef043, a430f9c) and
 	// they supersede this component's previous phone treatment wholesale:
 	//
-	// POSITION. `absolute inset-x-0 top-0 z-50`, not `sticky`. His 74ef043 made
+	// POSITION. `absolute inset-x-0 top-0` at --z-header (50), not `sticky`. His 74ef043 made
 	// this change deliberately and says why: with the bar in flow (or sticky at
 	// the top) the hero's grey band started BELOW it, leaving a visible seam in
 	// the page background right above the bar. Absolute takes the bar out of
@@ -339,8 +359,14 @@
 	// (`--header-h`/`--subnav-h` are exported passthrough tokens precisely so a
 	// consumer's own layout can do that). PageHero and the showcase's
 	// `+layout.svelte` model exactly that.
+	// .skip-link z jelinek.css: mimo obraz, dokud nemá fokus z klávesnice.
+	const SKIP =
+		'absolute top-3 left-3 z-[60] rounded-button bg-jelinek-black px-4 py-2.5 font-primary font-bold text-on-jelinek-black no-underline ' +
+		'-translate-y-[200%] opacity-0 focus-visible:translate-y-0 focus-visible:opacity-100';
 	const OUTER =
-		'absolute inset-x-0 top-0 z-50 p-0 [--logo-mark:46px] ' +
+		// top = --header-offset: InfoBar (lišta nad menu) ji nastaví na svou výšku
+		// a při rolování stahuje k nule; bez lišty je proměnná prázdná → 0.
+		'absolute inset-x-0 top-[var(--header-offset,0px)] z-(--z-header) p-0 [--logo-mark:46px] ' +
 		'min-[640px]:fixed min-[640px]:px-6 min-[640px]:py-3';
 	// Task 43 — the glass card no longer IS the flex row: the row (logo,
 	// lockup, burger, nav) moved into its own .site-header__bar-equivalent
@@ -377,6 +403,23 @@
 	// (leading-none), border-radius:radius-button, overflow hidden — the
 	// mark itself is a square var(--logo-mark) box.
 	const LOGO_LINK = 'inline-flex flex-none leading-none rounded-button overflow-hidden';
+
+	// HOME LINK (`homeHref`). Not guide markup — partials/header.html has no
+	// way back to a portal, because the guide IS the rozcestník; this is a
+	// consumer seam for company apps built from the templates. Rendered through
+	// this kit's own <Button variant="ghost" color="black">, like NAV_LINK, so
+	// the hover colour, transition and flat shadow are the button system's and
+	// cannot drift. The override only reshapes it into the BURGER's 44px square
+	// (`h-11 w-11 p-0`, cn() merges it last so it beats Button's padding); the
+	// focus ring is the global :focus-visible rule every link gets. The icon is
+	// 28px (owner, 15. 9. 2026: at 24px the weight-300 glyph read too light
+	// next to the burger); the hit target stays 44px. The 28px box goes through
+	// Icon's `size` (an inline style), not `w-7 h-7`: the `.icon` rule in
+	// extras.css is unlayered and would beat a layered utility. The SVG itself
+	// is sized here too, because `.icon > svg` filling its box also lives in
+	// extras.css, which is optional — without it the SVG would keep its 20px
+	// attributes inside the 28px span.
+	const HOME_LINK = 'h-11 w-11 flex-none gap-0 p-0 [&_svg]:block [&_svg]:h-7 [&_svg]:w-7';
 	const MARK = 'block h-[var(--logo-mark)] w-[var(--logo-mark)]';
 
 	// jelinek.css:447 (.site-header__title): font-primary (GT Walsheim),
@@ -537,7 +580,7 @@
 	// 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_LABEL = 'font-secondary text-[0.8rem] font-bold 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';
@@ -585,10 +628,10 @@
 		'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.
+	// Column heading (shared by the mega-menu and the accordion): GT Walsheim
+	// Bold, small uppercase — Avenir patří jen podnázvu loga (majitel, 21. 8. 2026).
 	const HEADING =
-		'px-4 pt-2.5 pb-0.5 text-[0.72rem] font-semibold tracking-[0.08em] uppercase text-fg-muted1';
+		'px-4 pt-2.5 pb-0.5 font-secondary text-[0.72rem] font-bold tracking-[0.08em] uppercase text-fg-muted1';
 
 	const NAV_ROW = 'hidden ml-auto items-center gap-2 min-[640px]:flex';
 
@@ -684,7 +727,7 @@
 <!-- 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}
+	{#if group.title}<div class={HEADING}>{group.title}</div>{/if}
 	{#each group.items as chapter (chapter.href)}
 		<Button
 			href={chapter.href}
@@ -700,8 +743,24 @@
 {/snippet}
 
 <header {...rest} bind:this={headerEl} class={cn(OUTER, className)}>
+	<!-- Přeskočit na obsah (/ui/pristupnost): první prvek v pořadí Tabu, vidět jen
+	     se zaostřením z klávesnice. Cíl `#hlavni-obsah` = <main id="hlavni-obsah"> layoutu; stejný
+	     odkaz má partials/header.html (.skip-link v jelinek.css). -->
+	<a href={skipHref} class={SKIP}>Přeskočit na obsah</a>
 	<div class={inner}>
 		<div class={BAR_ROW}>
+		{#if homeHref}
+			<Button
+				href={homeHref}
+				variant="ghost"
+				color="black"
+				aria-label={homeLabel}
+				title={homeLabel}
+				class={HOME_LINK}
+			>
+				<Icon name="home" size={28} />
+			</Button>
+		{/if}
 		<a href={logoHref} aria-label={logoAlt} class={LOGO_LINK}>
 			{#if logo}
 				{@render logo()}
@@ -726,8 +785,10 @@
 					xmlns="http://www.w3.org/2000/svg"
 					aria-hidden="true"
 				>
+					<!-- Majitel 21. 8. 2026: jelen v hlavičce je HNĚDÝ (barevná
+					     varianta znaku), ne bílý — zrcadlí partials/header.html. -->
 					<rect width="400" height="400" class="fill-jelinek-black" />
-					<path d={DEER_MARK_PATH} class="fill-jelinek-white" />
+					<path d={DEER_MARK_PATH} class="fill-jelinek-brown" />
 				</svg>
 			{/if}
 		</a>
@@ -842,7 +903,7 @@
 		     640px up, so only one of the two navs is ever in the a11y tree. -->
 		<nav id={panelId} bind:this={linksEl} class={drawer} aria-label={navLabel}>
 			<div class={DRAWER_HEAD}>
-				<span class={DRAWER_LABEL} style={SUBTITLE_STYLE}>Menu</span>
+				<span class={DRAWER_LABEL}>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>

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

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

package/dist/components/Slider.svelte

@@ -28,16 +28,11 @@
 	const inputId = $derived(id ?? uid);
 
 	// Same reasoning as Checkbox.svelte/Radio.svelte: jelinek.css has NO rule
-	// at all for range inputs. ui/komponenty.html's two sliders do carry an
-	// inline `accent-color: var(--JELINEK-MAGENTA)`, but both are
-	// mattress-width demos (90 cm, 120 cm) — a mattress-CONTEXT instance, not
-	// a stylesheet rule for sliders in general. Treating that literal magenta
-	// as the default would leak the mattress accent onto furniture-division
-	// pages, mixing brown and magenta in one interface exactly as the guide
-	// prohibits. Using accent-jelinek-brown instead still reproduces the
-	// guide's magenta slider exactly on mattress-division pages, because
-	// tokens.css:161-166 re-themes --JELINEK-BROWN to --JELINEK-MAGENTA
-	// there — the same division re-theme Checkbox and Radio rely on.
+	// at all for range inputs (the archive's magenta sliders were
+	// mattress-CONTEXT demos, not a stylesheet rule). Accent adjudicated by
+	// the owner (14. 8. 2026): forms are colour-neutral — every emphasis is
+	// BLACK (--JELINEK-BLACK, flips to near-white in dark mode), no division
+	// re-theme; the only colour a form carries is the error state.
 </script>
 
 {#if label}
@@ -51,5 +46,5 @@
 	{max}
 	{step}
 	bind:value
-	class={cn('w-full accent-jelinek-brown', className)}
+	class={cn('w-full accent-jelinek-black', className)}
 />

package/dist/components/Switch.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		checked?: boolean;
+		label: string;
+		id?: string;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		id,
+		disabled = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'checked' | 'type'> = $props();
+
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+
+	// Přepínač zap/vyp — zásobník práce, priorita 1. Uvnitř je nativní
+	// checkbox s role="switch" (sr-only), takže klávesnice i čtečky fungují
+	// zadarmo; dráha a palec jsou jen kresba nad ním.
+	//
+	// Geometrie záměrně opakuje přepínač tmavého režimu (ThemeToggle /
+	// jelinek.css `.theme-toggle`): dráha 44×24, palec 20 s 2px odsazením —
+	// jeden tvar přepínače v celém webu. Barvy: zapnuto = černá
+	// (--JELINEK-BLACK, v tmavém režimu se sama překlopí na bílou), vypnuto
+	// = šedá --text-muted2. Formuláře jsou podle rozhodnutí majitele
+	// (14. 8. 2026) barevně neutrální — žádné přebarvování podle divize,
+	// barvu nese jen chyba. Pohyb: tokeny --dur-base/--ease.
+	const LABEL = 'flex items-center gap-2.5 font-secondary font-light text-step0 text-fg';
+	const DISABLED_LABEL = 'cursor-not-allowed text-fg-muted2';
+
+	const TRACK =
+		'relative inline-flex h-6 w-11 shrink-0 rounded-full ' +
+		'transition-colors duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		// Fokus z klávesnice kreslí prstenec z fokus tokenů na dráze —
+		// vlastní input je sr-only, prstenec na něm by nebyl vidět.
+		'peer-focus-visible:outline peer-focus-visible:outline-[length:var(--focus-width)] ' +
+		'peer-focus-visible:outline-offset-1 peer-focus-visible:outline-[var(--focus-color)]';
+
+	const KNOB =
+		'absolute top-0.5 left-0.5 size-5 rounded-full border border-border-subtle bg-surface ' +
+		'transition-transform duration-[var(--dur-base)] ease-[var(--ease)]';
+</script>
+
+<label
+	for={inputId}
+	class={cn(LABEL, disabled ? DISABLED_LABEL : 'cursor-pointer', className)}
+>
+	<input
+		{...rest}
+		id={inputId}
+		type="checkbox"
+		role="switch"
+		{disabled}
+		bind:checked
+		class="peer sr-only"
+	/>
+	<span
+		aria-hidden="true"
+		class={cn(
+			TRACK,
+			checked ? 'bg-jelinek-black' : 'bg-fg-muted2',
+			disabled && 'bg-border-subtle'
+		)}
+	>
+		<span class={cn(KNOB, checked && 'translate-x-5')}></span>
+	</span>
+	{label}
+</label>

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

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

package/dist/components/Tab.svelte

@@ -22,6 +22,29 @@
 
 	const selected = $derived(tabs.current() === value);
 
+	// Klávesnice (/ui/pristupnost, audit 4. 9. 2026): šipky ←/→ přepínají mezi
+	// taby, Home/End skočí na první/poslední; vybraný tab se zároveň aktivuje
+	// (automatická aktivace, vzor WAI-ARIA Tabs). Fokus drží jen vybraný tab
+	// (roving tabindex), takže Tab klávesa opustí celý přepínač jedním stiskem.
+	function onKey(event: KeyboardEvent) {
+		const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+		if (!keys.includes(event.key)) return;
+		const self = event.currentTarget as HTMLElement;
+		const list = self.closest('[role="tablist"]') ?? self.parentElement;
+		if (!list) return;
+		const all = [...list.querySelectorAll<HTMLElement>('[role="tab"]')];
+		const i = all.indexOf(self);
+		if (i === -1) return;
+		event.preventDefault();
+		const next =
+			event.key === 'Home' ? 0
+			: event.key === 'End' ? all.length - 1
+			: event.key === 'ArrowRight' ? (i + 1) % all.length
+			: (i - 1 + all.length) % all.length;
+		all[next].focus();
+		all[next].click();
+	}
+
 	// jelinek.css:877-884 (.tab, shared with .logo-tool__bgtab/.logo-tool__lang):
 	// text-align:center + white-space:nowrap — both absent from the original
 	// draft. font-family is
@@ -71,7 +94,7 @@
 	// (.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).
+	// (plán práce, audit.html).
 </script>
 
 <button
@@ -79,6 +102,11 @@
 	type={rest.type ?? 'button'}
 	role={rest.role ?? 'tab'}
 	aria-selected={selected}
+	tabindex={selected ? 0 : -1}
+	onkeydown={(event) => {
+		onKey(event);
+		rest.onkeydown?.(event);
+	}}
 	onclick={(event) => {
 		tabs.select(value);
 		rest.onclick?.(event);

package/dist/components/TextField.svelte

@@ -14,6 +14,19 @@
 		 * coloured. See ERROR below.
 		 */
 		error?: boolean;
+		/**
+		 * Chybová hláška pod polem. Zapíná chybový stav sama (není třeba
+		 * posílat i `error`) a naváže se na pole přes `aria-describedby`,
+		 * takže ji čtečky obrazovky přečtou k poli; `aria-live` ji ohlásí,
+		 * i když se objeví až po odeslání. Má přednost před `hint`.
+		 */
+		errorText?: string;
+		/** Nápověda pod polem — např. formát hodnoty. Navázaná přes `aria-describedby`. */
+		hint?: string;
+		/** Povinné pole: hvězdička u popisku + nativní `required` na poli. */
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
 		class?: string;
 	}
 
@@ -22,6 +35,11 @@
 		label,
 		id,
 		error = false,
+		errorText,
+		hint,
+		required = false,
+		disabled = false,
+		readonly = false,
 		class: className,
 		...rest
 	}: Props & Omit<HTMLInputAttributes, 'value'> = $props();
@@ -30,6 +48,17 @@
 	// without the consumer having to invent one.
 	const uid = $props.id();
 	const inputId = $derived(id ?? uid);
+	const hintId = $derived(`${inputId}-hint`);
+	const errorId = $derived(`${inputId}-error`);
+	const isError = $derived(error || !!errorText);
+	// The message under the field is not just visually adjacent — it is wired
+	// to the input, so assistive tech reads it as part of the field. A
+	// consumer-supplied aria-describedby is kept, appended after ours.
+	const describedBy = $derived(
+		[errorText ? errorId : null, !errorText && hint ? hintId : null, rest['aria-describedby']]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
 
 	// jelinek.css:966-975 (`.input, .select`), corrected against the draft brief:
 	// - border is 1px solid var(--text-muted2) (border-fg-muted2), NOT
@@ -62,9 +91,13 @@
 	// 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.
+	// `leading-normal`: input jinak dědí řádkování 1.6 z body, zatímco select
+	// má od prohlížeče `normal` — pole pak byla o ~5 px vyšší než selecty
+	// vedle nich (nejnápadnější u type="date"). Explicitní `normal` na obou
+	// drží formulářový řádek v jedné výšce.
 	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 ' +
+		'font-secondary font-light text-[0.98rem] leading-normal 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)]';
 
@@ -77,24 +110,42 @@
 	// 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';
+
+	// Zakázané pole mluví stejnou řečí jako zakázané tlačítko
+	// (Button.svelte:117): šedá výplň, utlumený text, cursor-not-allowed.
+	// Jen pro čtení si nechává plný text (obsah platí, jen se nemění) a
+	// odlišuje se šedou výplní.
+	const DISABLED =
+		'cursor-not-allowed border-border-subtle bg-surface-gray text-fg-muted2 ' +
+		'placeholder:text-fg-muted2';
+	const READONLY = 'bg-surface-gray';
+
+	// Stejný vzhled, jaký sekce Formulářové prvky používala pro ručně psanou
+	// hlášku — teď ho nese komponenta, aby hláška byla vždy i programově
+	// navázaná na pole.
+	const MSG_ERROR = 'mt-1.5 font-secondary text-step-down1 font-medium text-sem-error-strong';
+	const MSG_HINT = 'mt-1.5 font-secondary text-step-down1 font-light text-fg-muted1';
 </script>
 
 {#if label}
-	<Label for={inputId}>{label}</Label>
+	<Label for={inputId} {required}>{label}</Label>
 {/if}
 <input
 	{...rest}
 	id={inputId}
 	type={rest.type ?? 'text'}
-	aria-invalid={error ? 'true' : rest['aria-invalid']}
+	{required}
+	{disabled}
+	{readonly}
+	aria-invalid={isError ? 'true' : rest['aria-invalid']}
+	aria-describedby={describedBy}
 	bind:value
-	class={cn(BASE, error && ERROR, className)}
+	class={cn(BASE, isError && ERROR, readonly && !disabled && READONLY, disabled && DISABLED, className)}
 />
+{#if errorText}
+	<p id={errorId} aria-live="polite" class={MSG_ERROR}>{errorText}</p>
+{:else if hint}
+	<p id={hintId} class={MSG_HINT}>{hint}</p>
+{/if}

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

@@ -10,6 +10,19 @@ interface Props {
      * coloured. See ERROR below.
      */
     error?: boolean;
+    /**
+     * Chybová hláška pod polem. Zapíná chybový stav sama (není třeba
+     * posílat i `error`) a naváže se na pole přes `aria-describedby`,
+     * takže ji čtečky obrazovky přečtou k poli; `aria-live` ji ohlásí,
+     * i když se objeví až po odeslání. Má přednost před `hint`.
+     */
+    errorText?: string;
+    /** Nápověda pod polem — např. formát hodnoty. Navázaná přes `aria-describedby`. */
+    hint?: string;
+    /** Povinné pole: hvězdička u popisku + nativní `required` na poli. */
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
     class?: string;
 }
 type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value'>;

package/dist/components/Textarea.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import Label from './Label.svelte';
+
+	interface Props {
+		value?: string;
+		label?: string;
+		id?: string;
+		/** Počet řádků naprázdno; výšku jde myší táhnout jen svisle (resize-y). */
+		rows?: number;
+		/** Chybový stav — stejné pravidlo `.input.is-error` jako TextField. */
+		error?: boolean;
+		/** Chybová hláška pod polem — stejné chování jako u TextFieldu. */
+		errorText?: string;
+		/** Nápověda pod polem, navázaná přes `aria-describedby`. */
+		hint?: string;
+		/** Povinné pole: hvězdička u popisku + nativní `required`. */
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		label,
+		id,
+		rows = 4,
+		error = false,
+		errorText,
+		hint,
+		required = false,
+		disabled = false,
+		readonly = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLTextareaAttributes, 'value'> = $props();
+
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+	const hintId = $derived(`${inputId}-hint`);
+	const errorId = $derived(`${inputId}-error`);
+	const isError = $derived(error || !!errorText);
+	const describedBy = $derived(
+		[errorText ? errorId : null, !errorText && hint ? hintId : null, rest['aria-describedby']]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
+
+	// Víceřádkové pole je TextField s <textarea> uvnitř — záměrně stejné
+	// třídy (jelinek.css:966-975 styluje `.input` bez ohledu na element),
+	// stejný chybový stav i stejné hlášky. Jediné navíc: resize-y, aby šla
+	// výška táhnout, ale pole nikdy nerozbilo layout do šířky.
+	const BASE =
+		'w-full resize-y rounded-button border border-fg-muted2 bg-surface px-[14px] py-[11px] ' +
+		'font-secondary font-light 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)]';
+
+	const ERROR =
+		'border-sem-error-strong focus:border-sem-error-strong focus:outline-sem-error-strong';
+
+	const DISABLED =
+		'cursor-not-allowed resize-none border-border-subtle bg-surface-gray text-fg-muted2 ' +
+		'placeholder:text-fg-muted2';
+	const READONLY = 'bg-surface-gray';
+
+	const MSG_ERROR = 'mt-1.5 font-secondary text-step-down1 font-medium text-sem-error-strong';
+	const MSG_HINT = 'mt-1.5 font-secondary text-step-down1 font-light text-fg-muted1';
+</script>
+
+{#if label}
+	<Label for={inputId} {required}>{label}</Label>
+{/if}
+<textarea
+	{...rest}
+	id={inputId}
+	{rows}
+	{required}
+	{disabled}
+	{readonly}
+	aria-invalid={isError ? 'true' : rest['aria-invalid']}
+	aria-describedby={describedBy}
+	bind:value
+	class={cn(BASE, isError && ERROR, readonly && !disabled && READONLY, disabled && DISABLED, className)}
+></textarea>
+{#if errorText}
+	<p id={errorId} aria-live="polite" class={MSG_ERROR}>{errorText}</p>
+{:else if hint}
+	<p id={hintId} class={MSG_HINT}>{hint}</p>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    label?: string;
+    id?: string;
+    /** Počet řádků naprázdno; výšku jde myší táhnout jen svisle (resize-y). */
+    rows?: number;
+    /** Chybový stav — stejné pravidlo `.input.is-error` jako TextField. */
+    error?: boolean;
+    /** Chybová hláška pod polem — stejné chování jako u TextFieldu. */
+    errorText?: string;
+    /** Nápověda pod polem, navázaná přes `aria-describedby`. */
+    hint?: string;
+    /** Povinné pole: hvězdička u popisku + nativní `required`. */
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLTextareaAttributes, 'value'>;
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;