@jelinek/ui 0.3.0

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    title: string;
+    description?: string;
+    image?: string;
+    imageAlt?: string;
+    href?: string;
+    ctaLabel?: string;
+    color?: 'brown' | 'magenta' | 'black';
+    /** Optional badge rendered above the title, e.g. <Tag variant="instock">. */
+    tag?: Snippet;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const ProductCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductCard = ReturnType<typeof ProductCard>;
+export default ProductCard;

package/dist/components/Radio.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { RADIO_CONTEXT, type RadioContext } from './radio-context.js';
+
+	interface Props {
+		value: string;
+		label: string;
+		id?: string;
+		class?: string;
+	}
+
+	let {
+		value,
+		label,
+		id,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value' | 'type' | 'name'> = $props();
+
+	const group = getContext<RadioContext>(RADIO_CONTEXT);
+	if (!group) throw new Error('<Radio> must be rendered inside <RadioGroup>.');
+
+	const uid = $props.id();
+	const inputId = $derived(id ?? uid);
+	const checked = $derived(group.current() === value);
+
+	// Same reasoning as Checkbox.svelte: no CSS rule exists for radio inputs
+	// or their label; font-secondary/text-fg reproduces what the guide's own
+	// `.demo` wrapper applies ambiently (jelinek.css:322-324), and
+	// accent-jelinek-brown (not accent-jelinek-magenta) keeps the mattress
+	// accent out of furniture UIs by default while still following the
+	// division automatically via the --JELINEK-BROWN re-theme
+	// (tokens.css:161-166). Flagged for adjudication.
+	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="radio"
+		name={group.name}
+		{value}
+		{checked}
+		onchange={(event) => {
+			group.select(value);
+			rest.onchange?.(event);
+		}}
+		class="accent-jelinek-brown"
+	/>
+	{label}
+</label>

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

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

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { setContext, untrack, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { RADIO_CONTEXT, type RadioContext } from './radio-context.js';
+
+	interface Props {
+		name: string;
+		value?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		name,
+		value = $bindable(''),
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// RadioContext (radio-context.ts) fixes `name` as a plain string, not a
+	// getter like `current`/`select` — the native <input name> a group's
+	// radios share isn't meant to change after mount. `untrack` here is
+	// exactly that: an explicit, one-time snapshot at setContext time,
+	// silencing Svelte's state_referenced_locally warning rather than
+	// leaving an unacknowledged one.
+	setContext<RadioContext>(RADIO_CONTEXT, {
+		name: untrack(() => name),
+		current: () => value,
+		select: (next) => (value = next)
+	});
+
+	// No CSS rule targets a "radio group" wrapper; ui/komponenty.html just
+	// stacks the <label> rows with margin-bottom on all but the last. gap-2.5
+	// (10px) reproduces that spacing declaratively instead of a per-item
+	// trailing margin.
+</script>
+
+<div {...rest} role={rest.role ?? 'radiogroup'} class={cn('flex flex-col gap-2.5', className)}>
+	{@render children()}
+</div>

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

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

package/dist/components/Select.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLSelectAttributes } 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 `.select.is-error`
+		 * (jelinek.css:988-991) — new in the Task 31 merge — and sets
+		 * `aria-invalid` alongside it. Same prop and same rule as TextField's;
+		 * the guide styles both in one selector list.
+		 */
+		error?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		label,
+		id,
+		error = false,
+		class: className,
+		children,
+		...rest
+	}: Props & Omit<HTMLSelectAttributes, 'value'> = $props();
+
+	const uid = $props.id();
+	const selectId = $derived(id ?? uid);
+
+	// jelinek.css:966-975 (`.input, .select`) — same rule, and same
+	// corrections against the draft brief, as TextField: border-fg-muted2
+	// (not border-border-subtle), px-[14px] py-[11px] (not px-4 py-3),
+	// text-[0.98rem] (not text-step0).
+	// Task 31 — the focus ring moved onto --focus-width/--focus-color, which
+	// fixes a too-dark ring in dark mode, and `.select.is-error`
+	// (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.
+	const BASE =
+		'w-full rounded-button border border-fg-muted2 bg-surface px-[14px] py-[11px] ' +
+		'font-secondary text-[0.98rem] text-fg ' +
+		'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';
+</script>
+
+{#if label}
+	<Label for={selectId}>{label}</Label>
+{/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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    label?: string;
+    id?: string;
+    /**
+     * Invalid state. Reproduces the guide's `.select.is-error`
+     * (jelinek.css:988-991) — new in the Task 31 merge — and sets
+     * `aria-invalid` alongside it. Same prop and same rule as TextField's;
+     * the guide styles both in one selector list.
+     */
+    error?: boolean;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & Omit<HTMLSelectAttributes, 'value'>;
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/SiteFooter.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		logo?: string;
+		logoAlt?: string;
+		slogan?: string;
+		meta?: string;
+		stamp?: string;
+		class?: string;
+	}
+
+	let {
+		logo,
+		logoAlt = 'JELÍNEK',
+		slogan,
+		meta,
+		stamp,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLElement> = $props();
+
+	// jelinek.css:759-770 (.site-footer, .site-footer__inner). `margin-top:
+	// 60px` (:760) is kept — unlike Card/Alert (Tasks 5/6), which deliberately
+	// drop their own external margins on the reasoning that a reusable
+	// CONTENT atom shouldn't fight a consumer's grid/flex `gap`, SiteFooter
+	// is page CHROME: there is exactly one per page, always at the very
+	// bottom, and per this task's direction the guide is reproduced as the
+	// default rather than softened for a hypothetical consumer. 60px isn't on
+	// Tailwind's default spacing scale (nearest are 56px/64px) — arbitrary
+	// `mt-[60px]`. `border-radius: var(--radius-section) var(--radius-section)
+	// 0 0` (top corners only, :761) → `rounded-t-section`.
+	//
+	// partials/footer.html has NO anchor wrapping the logo image (unlike
+	// header.html, which wraps its mark in <a href="/">) — reproduced as a
+	// bare <img>, not a link.
+	//
+	// Real footer.html uses a dedicated white PNG asset (`logo-znak-bily.png`)
+	// here, not the auto-theming inline SVG header.html uses. That's not
+	// incidental: the footer's background is ALWAYS pure black (--bg-black is
+	// hsl(0,0%,0%) in both themes, see tokens.css) but --JELINEK-WHITE itself
+	// INVERTS in dark mode (tokens.css:91, becomes hsl(0,0%,0%)) — the
+	// re-theming mark would go invisible against its own footer in dark mode.
+	// So, unlike SiteHeader, no bundled-SVG default was added here for the
+	// `logo` prop (kept as a plain URL string, per the brief) — flagged as an
+	// open question in the Task 9 report: a theme-invariant white-only mark
+	// fallback is a reasonable future addition, just out of this task's
+	// explicit scope (the owner's logo direction named SiteHeader only).
+	const BASE = 'mt-[60px] rounded-t-section bg-surface-black text-fg-inverse';
+</script>
+
+<footer {...rest} class={cn(BASE, className)}>
+	<div class="mx-auto flex max-w-page flex-wrap items-center gap-6 px-6 py-10">
+		{#if logo}
+			<!-- jelinek.css:767 — 52px square, 12px radius. Neither value is on
+			     Tailwind's default scale (nearest square size is 48/56px;
+			     nearest radius token, radius-card, clamps 10-15px) — both
+			     arbitrary. The brief's h-8 w-auto (32px, unconstrained width)
+			     was wrong on every count. -->
+			<img src={logo} alt={logoAlt} class="h-[52px] w-[52px] rounded-[12px]" />
+		{/if}
+		{#if slogan || meta}
+			<div>
+				{#if slogan}
+					<!-- jelinek.css:769 (.slogan): font-weight 700 only — no
+					     font-family/size rule of its own, so it inherits body's
+					     defaults (font-serif/Archer, step0/1rem, leading 1.6,
+					     jelinek.css:264-267). Set explicitly rather than relying
+					     on an ambient body reset the consuming app may not have,
+					     same reasoning Checkbox/Card use for their own inherited
+					     values. -->
+					<div class="font-serif text-step0 font-bold leading-[1.6]">{slogan}</div>
+				{/if}
+				{#if meta}
+					<!-- The real footer.html actually renders a THIRD, distinct
+					     block here styled `.small.muted2` (jelinek.css:306,304:
+					     step-down1/1.1/weight 300, text-muted2) for the address
+					     line, plus a separate `.meta`-classed block (jelinek.css:770)
+					     for a page-specific build-version stamp that isn't
+					     meaningful outside this static site. This component's
+					     `meta` prop maps to the general-purpose one — the
+					     `.small.muted2` address-line treatment — not the
+					     name-colliding `.site-footer .meta` CSS class (which pins
+					     itself to the far right via margin-left:auto and is really
+					     "wherever the deploy timestamp goes", not a generic
+					     "meta text" concept). Task 18 adds that third block as its
+					     own `stamp` prop below — kept a separate prop, not folded
+					     into `meta`, for exactly the reason this paragraph already
+					     explains: same CSS class name in the guide, different
+					     element, different font, different position.
+
+					     Fix round 1: `.small` is also in the shared font-secondary
+					     selector list (jelinek.css:313-317, `.small` listed
+					     alongside `.site-header__nav a`/`.chapter-nav a`/`.pager a`
+					     etc.) — missing from the first pass, which left this line
+					     inheriting the ambient serif body font instead. -->
+					<div class="font-secondary text-step-down1 font-light leading-[1.1] text-fg-muted2">{meta}</div>
+				{/if}
+			</div>
+		{/if}
+		{#if stamp}
+			<!-- jelinek.css:770 (`.site-footer .meta`): margin-left:auto pins it
+			     to the far right of `.site-footer__inner`'s flex row — so this
+			     has to be a sibling of the logo/slogan-wrapper above, not nested
+			     inside either, or margin-left:auto pins it right only within that
+			     inner wrapper instead of the whole footer. `0.85rem` is a literal
+			     in the guide, not on the --step scale — arbitrary `text-[0.85rem]`,
+			     not the nearest step. No font-family rule of its own (unlike
+			     `.small`, this class is NOT in the jelinek.css:313-317
+			     font-secondary list), so — same reasoning as `slogan` above — it
+			     inherits body's ambient Archer, set explicitly here rather than
+			     relying on a consuming app's own reset to provide it. No
+			     `flex-wrap` breakpoint needed: `.site-footer__inner`'s own
+			     `flex-wrap: wrap` (already `flex-wrap` below) already drops this
+			     onto its own line under the logo/text on narrow screens, same as
+			     the guide. -->
+			<div class="ml-auto font-serif text-[0.85rem] text-fg-muted2">{stamp}</div>
+		{/if}
+	</div>
+</footer>

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    logo?: string;
+    logoAlt?: string;
+    slogan?: string;
+    meta?: string;
+    stamp?: string;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
+declare const SiteFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type SiteFooter = ReturnType<typeof SiteFooter>;
+export default SiteFooter;