@jelinek/ui 0.9.0 → 0.9.1

package/dist/components/Select.svelte

@@ -15,6 +15,17 @@
 		 * the guide styles both in one selector list.
 		 */
 		error?: boolean;
+		/**
+		 * Chybová hláška pod polem — stejné chování jako u TextFieldu: zapíná
+		 * chybový stav, váže se přes `aria-describedby` a `aria-live`,
+		 * má přednost před `hint`.
+		 */
+		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;
 		class?: string;
 		children: Snippet;
 	}
@@ -24,6 +35,10 @@
 		label,
 		id,
 		error = false,
+		errorText,
+		hint,
+		required = false,
+		disabled = false,
 		class: className,
 		children,
 		...rest
@@ -31,6 +46,14 @@
 
 	const uid = $props.id();
 	const selectId = $derived(id ?? uid);
+	const hintId = $derived(`${selectId}-hint`);
+	const errorId = $derived(`${selectId}-error`);
+	const isError = $derived(error || !!errorText);
+	const describedBy = $derived(
+		[errorText ? errorId : null, !errorText && hint ? hintId : null, rest['aria-describedby']]
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
 
 	// jelinek.css:966-975 (`.input, .select`) — same rule, and same
 	// corrections against the draft brief, as TextField: border-fg-muted2
@@ -41,25 +64,60 @@
 	// (jelinek.css:987-991) is new. See TextField.svelte for the full note on
 	// both; the guide styles `.input` and `.select` in one selector list, so the
 	// two components stay deliberately identical here.
+	// Vlastní šipka místo nativní: Chrome na macOS kreslí u stylovaného
+	// selectu svůj chevron nalepený na pravý kraj, bez ohledu na padding.
+	// `appearance-none` ho vypne a chevron kreslí SVG ve wrapperu níž,
+	// posazené na stejných 14 px od kraje jako text. `pr-9` dělá šipce místo.
+	// `leading-normal` drží výšku ve shodě s TextFieldem — viz komentář tam.
 	const BASE =
-		'w-full rounded-button border border-fg-muted2 bg-surface px-[14px] py-[11px] ' +
-		'font-secondary text-[0.98rem] text-fg ' +
+		'w-full appearance-none rounded-button border border-fg-muted2 bg-surface px-[14px] py-[11px] pr-9 ' +
+		'font-secondary font-light text-[0.98rem] leading-normal text-fg [&_option]:font-light ' +
 		'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';
+
+	// Stejná řeč jako TextField.svelte — zakázaný select podle zakázaného
+	// tlačítka (Button.svelte:117), hlášky pod polem beze změny vzhledu.
+	const DISABLED = 'cursor-not-allowed border-border-subtle bg-surface-gray text-fg-muted2';
+	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={selectId}>{label}</Label>
+	<Label for={selectId} {required}>{label}</Label>
+{/if}
+<span class="relative block">
+	<select
+		{...rest}
+		id={selectId}
+		{required}
+		{disabled}
+		aria-invalid={isError ? 'true' : rest['aria-invalid']}
+		aria-describedby={describedBy}
+		bind:value
+		class={cn(BASE, isError && ERROR, disabled && DISABLED, className)}
+	>
+		{@render children()}
+	</select>
+	<svg
+		class="pointer-events-none absolute top-1/2 right-[14px] size-3 -translate-y-1/2 {disabled
+			? 'text-fg-muted2'
+			: 'text-fg'}"
+		viewBox="0 0 12 12"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d="m2.5 4.25 3.5 3.5 3.5-3.5" />
+	</svg>
+</span>
+{#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}
-<select
-	{...rest}
-	id={selectId}
-	aria-invalid={error ? 'true' : rest['aria-invalid']}
-	bind:value
-	class={cn(BASE, error && ERROR, className)}
->
-	{@render children()}
-</select>

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

@@ -11,6 +11,17 @@ interface Props {
      * the guide styles both in one selector list.
      */
     error?: boolean;
+    /**
+     * Chybová hláška pod polem — stejné chování jako u TextFieldu: zapíná
+     * chybový stav, váže se přes `aria-describedby` a `aria-live`,
+     * má přednost před `hint`.
+     */
+    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;
     class?: string;
     children: Snippet;
 }

package/dist/components/SiteFooter.svelte

@@ -27,6 +27,14 @@
 		 * Without it (or without `stamp`) the stamp stays a plain line.
 		 */
 		changelog?: string;
+		/**
+		 * Task 49 — controls in the footer's brand row, after the stamp (the
+		 * theme toggle moved here from the header, the owner's call —
+		 * partials/footer.html carries the same markup). The wrapper remaps the
+		 * fg/surface tokens to their inverse: the footer is ALWAYS black, so a
+		 * control drawn in text colour would vanish in light mode.
+		 */
+		actions?: Snippet;
 		class?: string;
 	}
 
@@ -38,10 +46,18 @@
 		stamp,
 		changelog,
 		children,
+		actions,
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
 
+	// Mirrors jelinek.css's `.site-footer .theme-toggle` overrides: light
+	// track/knob in both themes, dark icon on the light knob.
+	const ACTIONS =
+		'flex flex-none items-center ' +
+		'[--color-fg:var(--color-fg-inverse)] [--color-surface:var(--color-fg-inverse)] ' +
+		'[&_svg]:text-surface-black';
+
 	let dialogEl = $state<HTMLDialogElement | null>(null);
 
 	// Mirrors the guide's .changelog dialog (jelinek.css) — a card over the
@@ -179,6 +195,9 @@
 			     the guide. -->
 			<div class="ml-auto font-serif text-[0.85rem] text-fg-muted2">{stamp}</div>
 		{/if}
+		{#if actions}
+			<div class={cn(ACTIONS, !stamp && 'ml-auto')}>{@render actions()}</div>
+		{/if}
 	</div>
 	{#if stamp && changelog}
 		<dialog

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

@@ -24,6 +24,14 @@ interface Props {
      * Without it (or without `stamp`) the stamp stays a plain line.
      */
     changelog?: string;
+    /**
+     * Task 49 — controls in the footer's brand row, after the stamp (the
+     * theme toggle moved here from the header, the owner's call —
+     * partials/footer.html carries the same markup). The wrapper remaps the
+     * fg/surface tokens to their inverse: the footer is ALWAYS black, so a
+     * control drawn in text colour would vanish in light mode.
+     */
+    actions?: Snippet;
     class?: string;
 }
 type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;

package/dist/components/SiteHeader.svelte

@@ -276,7 +276,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
@@ -340,7 +340,7 @@
 	// consumer's own layout can do that). PageHero and the showcase's
 	// `+layout.svelte` model exactly that.
 	const OUTER =
-		'absolute inset-x-0 top-0 z-50 p-0 [--logo-mark:46px] ' +
+		'absolute inset-x-0 top-0 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
@@ -537,7 +537,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 +585,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 +684,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}
@@ -726,8 +726,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 +844,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/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/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;