@jelinek/ui 0.3.0

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

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type NavItem } from './nav.js';
+interface Props {
+    /**
+     * Escape hatch: a snippet rendering custom mark content in place of the
+     * bundled, re-theming deer mark (e.g. a division-specific logo). Most
+     * consumers should leave this unset and get the guide's own mark.
+     */
+    logo?: Snippet;
+    logoAlt?: string;
+    /**
+     * Where the logo/mark links to. Defaults to `/`, the guide's own
+     * literal href (partials/header.html:3) — set this when the consuming
+     * app is not rooted at `/`, e.g. mounted under a base path.
+     */
+    logoHref?: string;
+    subtitle?: string;
+    items?: NavItem[];
+    active?: string;
+    /**
+     * Set when a `ChapterNav` is rendered directly below this header, to
+     * reproduce the guide's joined-panel seam (jelinek.css:604-620): the
+     * header loses its bottom border/corners/shadow so it flows into the
+     * nav strip, until the reader scrolls past 50px and it detaches into
+     * its own rounded, shadowed bar (assets/js/jelinek.js:354). SiteHeader
+     * tracks that scroll threshold itself — a consumer never has to wire
+     * up a listener. Leave unset (default `false`) for the normal,
+     * always-detached header, e.g. the rozcestník, which has no chapter
+     * nav at all.
+     */
+    hasChapterNav?: boolean;
+    /**
+     * Accessible name for the `<nav>` landmark holding the top-level
+     * links. Czech by default, like every other user-facing string this
+     * kit ships (see Pager's `prevLabel`/`nextLabel`).
+     */
+    navLabel?: string;
+    /**
+     * Chapter links to repeat inside the phone menu panel. Below 640px the
+     * guide's chapter bar is `display: none` (see ChapterNav.svelte), so the
+     * chapters have nowhere else to live on a phone; the guide's own script
+     * clones them out of the rendered bar, and this prop is that same content
+     * passed declaratively instead. Leave unset on pages with no chapter nav
+     * (the rozcestník) — the divider and the block disappear with it. They
+     * are hidden again from 640px up, where the bar itself is back.
+     */
+    chapterItems?: NavItem[];
+    /**
+     * Accessible name for the phone hamburger button while the menu is SHUT.
+     * It has no visible text — it is three bars that fold into a cross — so
+     * this is the only name a screen reader gets. See BURGER below.
+     */
+    menuLabel?: string;
+    /** Accessible name for the same button while the menu is OPEN. */
+    menuLabelClose?: string;
+    /**
+     * Task 37 — TRAILING CONTENT INSIDE THE NAV, which the guide requires and
+     * this component previously refused.
+     *
+     * partials/header.html:6-13 nests the theme toggle as the LAST CHILD of
+     * `.site-header__nav`, so it sits in the nav row on a desktop and moves
+     * into the burger panel on a phone along with the links. The earlier
+     * decision here was to keep ThemeToggle separate and let a consumer
+     * "render both together in its own layout" — but a consumer cannot put
+     * anything inside this component's nav from outside it, so what that
+     * actually produced was a toggle stranded in the page body, at a different
+     * place from the guide and gone from the phone menu entirely.
+     *
+     * Rendered into BOTH navs, after the links, exactly like `items`. Keep it
+     * to controls that belong to the header (the toggle, a division switch) —
+     * it is not a general slot.
+     */
+    actions?: Snippet;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLElement>;
+declare const SiteHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type SiteHeader = ReturnType<typeof SiteHeader>;
+export default SiteHeader;

package/dist/components/Slider.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import Label from './Label.svelte';
+
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		label?: string;
+		id?: string;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		label,
+		id,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value' | 'min' | 'max' | 'step' | 'type'> = $props();
+
+	const uid = $props.id();
+	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.
+</script>
+
+{#if label}
+	<Label for={inputId}>{label}</Label>
+{/if}
+<input
+	{...rest}
+	id={inputId}
+	type="range"
+	{min}
+	{max}
+	{step}
+	bind:value
+	class={cn('w-full accent-jelinek-brown', className)}
+/>

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

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

package/dist/components/Swatch.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import CodeCopy from './CodeCopy.svelte';
+
+	interface Props {
+		color: string;
+		name?: string;
+		/**
+		 * A single copyable string under the name. Use this when the swatch has
+		 * one value regardless of mode. For a token that changes with the mode,
+		 * use `light`/`dark` instead — see below.
+		 */
+		value?: string;
+		/**
+		 * Task 37 — THE TWO-MODE ROWS, restored from the guide.
+		 *
+		 * jelinek.css:1006-1014 (`.swatch__mode` / `.swatch__mode-lbl`) exists for
+		 * one purpose: printing a token's LIGHT and DARK value on the same swatch,
+		 * one labelled row each, because a colour token in this system is a pair
+		 * and showing only the current mode's half tells a reader half the truth.
+		 * ui-old/barvy.html used it on every one of its swatches; the kit shipped
+		 * the chip and the token NAME and nothing else, so the chapter could not
+		 * answer "what colour is this" at all.
+		 *
+		 * Pass both to get the two rows. Each value is copyable on click, and what
+		 * lands on the clipboard is the VALUE — the previous behaviour, copying
+		 * the token name from `value`, is what made the copy button useless for
+		 * anyone reaching for a colour rather than for CSS.
+		 *
+		 * A row whose value is a bare em dash renders as a normal row: that is how
+		 * a token defined in only one mode says so (--border-highlight-white is
+		 * dark-only), and it is deliberately not silently dropped.
+		 */
+		light?: string;
+		dark?: string;
+		/** One line under the values — what the token is for. */
+		note?: string;
+		/** Row labels, Czech by default like every other string this kit ships. */
+		lightLabel?: string;
+		darkLabel?: string;
+		/**
+		 * 1px BORDER-SUBTLE hairline on the colour chip itself. ui-old/barvy.html
+		 * sets it inline on the swatches whose chip would otherwise dissolve into
+		 * the card behind it (white or near-white halves); reproduced as a prop
+		 * because which chips need it is knowledge about the COLOUR, not about
+		 * this component.
+		 */
+		chipBorder?: boolean;
+		/**
+		 * The archive's copy-icon button next to each value (jelinek.js:146-160
+		 * builds it, jelinek.css:1028-1039 styles it). In the guide it exists only
+		 * on pages with the colour-format switcher — initColorSwitch() bails out
+		 * without one — so it is opt-in here too; the Barvy chapter turns it on.
+		 */
+		copyIcon?: boolean;
+		class?: string;
+	}
+
+	let {
+		color,
+		name,
+		value,
+		light,
+		dark,
+		note,
+		lightLabel = 'Light mode',
+		darkLabel = 'Dark mode',
+		chipBorder = false,
+		copyIcon = false,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// jelinek.css:1008-1012 (`.swatch__mode-lbl`): the secondary family at weight
+	// 500, 0.68rem, 0.05em tracking, muted2, and a 62px minimum so both labels
+	// line their values up in a column instead of ragging.
+	const MODE_LABEL =
+		'font-secondary text-[0.68rem] font-medium tracking-[0.05em] text-fg-muted2 ' +
+		'min-w-[62px] flex-none whitespace-nowrap';
+	// jelinek.css:1007 (`.swatch__mode`): the label and the value on one line.
+	const MODE_ROW = 'flex items-center gap-2.5';
+
+	// CSS FIDELITY
+	// jelinek.css:474-482 (shared box system with .card/.panel/.demo/.tile):
+	// --box-accent is never overridden for .swatch (no `.swatch--*` colour
+	// modifier exists anywhere in jelinek.css), so — same reasoning as
+	// Card/Tile — the two-stop border gradient collapses to a flat 1px
+	// border-border-subtle, reproduced directly.
+	// jelinek.css:665 `.swatch { overflow: hidden }` — clips the color chip's
+	// square corners to the card's rounded ones.
+	// jelinek.css:666 `.swatch__color { height: 92px }` — the brief's `h-20`
+	// (80px) was wrong; 92px isn't on Tailwind's default scale, kept as
+	// h-[92px].
+	// jelinek.css:667 `.swatch__meta { padding: 12px 14px; font-size: 0.82rem
+	// }` — 12px/14px map exactly to Tailwind's py-3/px-3.5; 0.82rem isn't a
+	// --step token (no rung of the scale equals it: --step-down2 is 0.75rem
+	// and --step-down1 is 0.875rem) so it's an arbitrary text-[0.82rem].
+	// jelinek.css:668 `.swatch__meta strong { display: block; font-size:
+	// 0.88rem }` — block text-[0.88rem] on the name element directly (this
+	// component owns its own markup here, unlike Card/Tile's opaque Snippet
+	// children, so no [&_strong] selector trick is needed).
+	// jelinek.css:327-331 (shared strong/b→font-medium rule) also covers this
+	// strong (`.swatch strong` is in that selector list) — folded into the
+	// same class list as font-medium.
+	// jelinek.css:322-325 (`.swatch` on the shared list): font-secondary
+	// font-light for the swatch's own text.
+	// jelinek.css:669-676 `.swatch__meta code` — this is CodeCopy's job; see
+	// CodeCopy.svelte for the full fidelity note including the `.is-empty`
+	// state. Composing CodeCopy here (rather than a bare <code>) is what
+	// reproduces jelinek.css's real click-to-copy behaviour for the value
+	// (assets/js/jelinek.js:142-193 wires exactly this element to
+	// navigator.clipboard).
+	// Standing rule 5 (margin policy): `.panel, .card, .demo { ... margin-
+	// bottom: 1.5rem }` (jelinek.css:483) does NOT list .swatch at all — .swatch
+	// never had an outer margin to begin with, so there is nothing to drop
+	// here (unlike Card/Alert/Panel/Demo).
+	// TASK 34 — the dark-mode inset top highlight, jelinek.css:251-257:
+	// `:root[data-theme="dark"] .panel, .card, .demo, .swatch, .logo-tool {
+	// box-shadow: inset 0 2px 1px -1px var(--box-primary) }`. `.swatch` is in
+	// that selector list and this was missing. See Panel.svelte for the full
+	// note on the false "nothing consumes --box-primary" reasoning it was
+	// dropped under.
+	//
+	// Mostly INVISIBLE here, in the guide exactly as much as in the kit: an
+	// inset box-shadow paints above the element's own background but below its
+	// descendants, and `.swatch__color` (the 92px chip, reproduced below) covers
+	// the whole top edge the highlight sits on. It shows only on a swatch with
+	// no chip. Reproduced anyway — the divergence in the computed value is what
+	// the css-lock's green is promising, and "you cannot see it on this
+	// component" is not a reason for the two stylesheets to disagree.
+	// No `.swatch--*` colour modifier exists, so --box-primary is always the
+	// :root 50% grey here.
+	const BASE =
+		'overflow-hidden rounded-card border border-border-subtle bg-surface ' +
+		'dark:shadow-[inset_0_2px_1px_-1px_var(--box-primary)]';
+</script>
+
+<div {...rest} class={cn(BASE, className)}>
+	<div
+	data-swatch-chip
+	style="background: {color};"
+	class="h-[92px] w-full {chipBorder ? 'border border-border-subtle' : ''}"
+></div>
+	{#if name || value || light || dark || note}
+		<div class="px-3.5 py-3 font-secondary text-[0.82rem] font-light">
+			{#if name}
+				<strong class="block text-[0.88rem] font-medium">{name}</strong>
+			{/if}
+			{#if value}
+				<CodeCopy {value} icon={copyIcon} />
+			{/if}
+			<!-- jelinek.css:1025 (`.swatch__mode .swatch__value`): inside a mode row
+			     the value row flexes to fill and carries `margin: 3px 0` instead of
+			     the standalone row's `2px 0 4px`. Only meaningful with the icon —
+			     a bare CodeCopy is a plain inline button, not a row. -->
+			{#if light}
+				<div class="{MODE_ROW} mt-1.5">
+					<span class={MODE_LABEL}>{lightLabel}</span>
+					<CodeCopy value={light} icon={copyIcon} class={copyIcon ? 'flex-1 my-[3px]' : undefined} />
+				</div>
+			{/if}
+			{#if dark}
+				<div class={MODE_ROW}>
+					<span class={MODE_LABEL}>{darkLabel}</span>
+					<CodeCopy value={dark} icon={copyIcon} class={copyIcon ? 'flex-1 my-[3px]' : undefined} />
+				</div>
+			{/if}
+			{#if note}
+				<p class="mt-1.5 mb-0 text-fg-muted1">{note}</p>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,58 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    color: string;
+    name?: string;
+    /**
+     * A single copyable string under the name. Use this when the swatch has
+     * one value regardless of mode. For a token that changes with the mode,
+     * use `light`/`dark` instead — see below.
+     */
+    value?: string;
+    /**
+     * Task 37 — THE TWO-MODE ROWS, restored from the guide.
+     *
+     * jelinek.css:1006-1014 (`.swatch__mode` / `.swatch__mode-lbl`) exists for
+     * one purpose: printing a token's LIGHT and DARK value on the same swatch,
+     * one labelled row each, because a colour token in this system is a pair
+     * and showing only the current mode's half tells a reader half the truth.
+     * ui-old/barvy.html used it on every one of its swatches; the kit shipped
+     * the chip and the token NAME and nothing else, so the chapter could not
+     * answer "what colour is this" at all.
+     *
+     * Pass both to get the two rows. Each value is copyable on click, and what
+     * lands on the clipboard is the VALUE — the previous behaviour, copying
+     * the token name from `value`, is what made the copy button useless for
+     * anyone reaching for a colour rather than for CSS.
+     *
+     * A row whose value is a bare em dash renders as a normal row: that is how
+     * a token defined in only one mode says so (--border-highlight-white is
+     * dark-only), and it is deliberately not silently dropped.
+     */
+    light?: string;
+    dark?: string;
+    /** One line under the values — what the token is for. */
+    note?: string;
+    /** Row labels, Czech by default like every other string this kit ships. */
+    lightLabel?: string;
+    darkLabel?: string;
+    /**
+     * 1px BORDER-SUBTLE hairline on the colour chip itself. ui-old/barvy.html
+     * sets it inline on the swatches whose chip would otherwise dissolve into
+     * the card behind it (white or near-white halves); reproduced as a prop
+     * because which chips need it is knowledge about the COLOUR, not about
+     * this component.
+     */
+    chipBorder?: boolean;
+    /**
+     * The archive's copy-icon button next to each value (jelinek.js:146-160
+     * builds it, jelinek.css:1028-1039 styles it). In the guide it exists only
+     * on pages with the colour-format switcher — initColorSwitch() bails out
+     * without one — so it is opt-in here too; the Barvy chapter turns it on.
+     */
+    copyIcon?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const Swatch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/components/Tab.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { getContext, type Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { TABS_CONTEXT, type TabsContext } from './tabs-context.js';
+
+	interface Props {
+		value: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		value,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLButtonAttributes = $props();
+
+	const tabs = getContext<TabsContext>(TABS_CONTEXT);
+	if (!tabs) throw new Error('<Tab> must be rendered inside <Tabs>.');
+
+	const selected = $derived(tabs.current() === value);
+
+	// 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
+	// --font-secondary (Avenir), NOT --font-primary (GT Walsheim) as first
+	// written. font-weight is 700 (font-bold), also missing. Padding is
+	// 10px/16px: px-4 (16px) is correct but the vertical 10px is py-2.5, not
+	// py-2 (8px). font-size is a fixed 0.9rem literal, not on the --step scale
+	// (--step0 is a constant 1rem, unrelated) — kept as text-[0.9rem], with
+	// leading-[1.2] for the CSS's line-height:1.2 (same arbitrary-leading
+	// pattern as Button's text-[0.98rem] leading-[1.2]).
+	//
+	// TASK 31 — `flex: 1` BECAME `flex: 1 0 auto` (jelinek.css:880), which is
+	// `flex-[1_0_auto]` here and NOT Tailwind's `flex-1` (that is `flex: 1 1 0%`,
+	// a different thing: grow, shrink, zero basis). The guide's own inline
+	// comment on that line says what it is for — "roztáhne se, ale nikdy se
+	// nesmrskne pod text", it stretches but never shrinks below its label.
+	//
+	// This is the other half of Tabs' change from a wrapping row to a sideways
+	// scroller; see Tabs.svelte's comment for the full pairing. Short version:
+	// with a 0% basis, segments in a `flex-nowrap` row shrink instead of
+	// overflowing, so the scroller never engages and long labels squash. Both
+	// values have to move together or neither does anything.
+	//
+	// `transition-all` is NOT from the guide — `.tab` carries no transition at
+	// all there, so hover snaps rather than fades. Left in place because it
+	// predates this task and removing it is a visual change with no rule behind
+	// it either way; noted in the Task 31 report so the call is visible rather
+	// than buried.
+	const BASE =
+		'flex-[1_0_auto] cursor-pointer whitespace-nowrap text-center rounded-pill border-0 ' +
+		'px-4 py-2.5 font-secondary text-[0.9rem] leading-[1.2] font-bold transition-all';
+
+	// jelinek.css:885-887 (.tab:hover): background flips to --text-muted1 with
+	// --text-white text on top — not just a text-colour change as first
+	// written. jelinek.css:889-891 (.tab.is-active): unchanged, bg-jelinek-black
+	// + text-on-jelinek-black is correct. .tab.is-active is declared after
+	// .tab:hover in the source with equal specificity, so an active tab keeps
+	// its solid styling even while hovered — reproduced here by only adding the
+	// hover: classes to the unselected branch, never to the selected one.
+	// Neither branch needs an explicit dark: override: bg-jelinek-black /
+	// text-on-jelinek-black / text-fg-muted1 / bg-fg-muted1 / text-fg-inverse
+	// all resolve through theme-aware CSS custom properties that already flip
+	// under [data-theme="dark"]/.dark.
+</script>
+
+<button
+	{...rest}
+	type={rest.type ?? 'button'}
+	role={rest.role ?? 'tab'}
+	aria-selected={selected}
+	onclick={(event) => {
+		tabs.select(value);
+		rest.onclick?.(event);
+	}}
+	class={cn(
+		BASE,
+		selected
+			? 'bg-jelinek-black text-on-jelinek-black'
+			: 'bg-transparent text-fg-muted1 hover:bg-fg-muted1 hover:text-fg-inverse',
+		className
+	)}
+>
+	{@render children()}
+</button>

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

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