@jelinek/ui 0.3.0

package/dist/components/CodeCopy.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		value: string;
+		/**
+		 * Reproduces jelinek.css:675-676 (`.swatch__meta code.is-empty`): a
+		 * structurally-present but non-interactive, permanently-muted state for
+		 * when there is nothing to copy. Native `disabled` handles both the
+		 * click-suppression and the focus/keyboard-activation removal that the
+		 * source's plain `cursor: default` alone doesn't give you.
+		 */
+		disabled?: boolean;
+		/**
+		 * Reproduces the archive's `.swatch__value` row (jelinek.css:1028-1039 +
+		 * assets/js/jelinek.js:146-160): the code value plus a trailing copy-icon
+		 * button, spread apart by the row. The icon is a second trigger for the
+		 * same copy, and it is also where the feedback goes — jelinek.js's
+		 * `flashCopied` turns the ICON --sem-success-strong for 1100ms and leaves
+		 * the code text alone, so with the icon on, the text-swap feedback below
+		 * is off. Default off: bare CodeCopy (prose `code[data-copy]`,
+		 * jelinek.js:329-336) has no icon in the guide either.
+		 */
+		icon?: boolean;
+		/**
+		 * The guide's OTHER copy control: `code[data-copy]` in prose
+		 * (assets/js/jelinek.js:329-336) — the dashed-chip typography of a bare
+		 * <code> (base.css's `code` rule / jelinek.css:274-279), but clickable,
+		 * with the same "zkopírováno ✓" text-swap this component already does.
+		 * The DECISION note below predates this prop and stands for the
+		 * DEFAULT look only: a chip without data-copy stays a bare <code>;
+		 * this mode exists for the chips the archive marked copyable.
+		 */
+		chip?: boolean;
+		/**
+		 * The guide's `.code-line code` (jelinek.css:985-992): a full-width grey
+		 * block for one-or-more lines of example code, pre-wrap, muted text that
+		 * darkens on hover, click copies the whole thing. Use for the multi-line
+		 * snippets the archive rendered as `p.code-line`.
+		 */
+		block?: boolean;
+		/**
+		 * Visible text when it differs from what lands on the clipboard — the
+		 * archive's `<code data-copy="33px">33 px</code>` shape. Defaults to
+		 * `value`.
+		 */
+		label?: string;
+		class?: string;
+	}
+
+	let {
+		value,
+		disabled = false,
+		icon = false,
+		chip = false,
+		block = false,
+		label,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLButtonAttributes, 'type' | 'disabled'> = $props();
+
+	let copied = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	// Ports assets/js/jelinek.js:109-121 (`copyText`) verbatim in shape: the
+	// Clipboard API only when `navigator.clipboard` exists AND the page is a
+	// secure context (both required — `navigator.clipboard` is `undefined`
+	// outside one, e.g. plain http:// or an unsupported browser), else a
+	// hidden <textarea> + `document.execCommand('copy')` fallback. The
+	// previous version called `navigator.clipboard.writeText` with no guard:
+	// in a non-secure context that throws inside an async function (an
+	// unhandled rejection), `copied` never flips, and the button silently
+	// looks dead.
+	function writeToClipboard(text: string): Promise<void> {
+		// `!== false` rather than a plain truthy check: real browsers always
+		// give `isSecureContext` a genuine boolean, so this is identical to the
+		// guide's own check there. jsdom (this file's test environment) never
+		// implements the property at all and leaves it `undefined` — treated
+		// here as "not known to be insecure", not as falling back.
+		if (navigator.clipboard && window.isSecureContext !== false) {
+			return navigator.clipboard.writeText(text);
+		}
+		return new Promise((resolve, reject) => {
+			try {
+				const ta = document.createElement('textarea');
+				ta.value = text;
+				ta.style.position = 'fixed';
+				ta.style.opacity = '0';
+				document.body.appendChild(ta);
+				ta.focus();
+				ta.select();
+				document.execCommand('copy');
+				document.body.removeChild(ta);
+				resolve();
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+
+	async function copy(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		if (disabled) return;
+		// try/catch so a rejection (either path above can reject) can never
+		// escape as an unhandled promise rejection — on failure the label is
+		// left unchanged rather than falsely showing the success text.
+		try {
+			await writeToClipboard(value);
+			copied = true;
+			clearTimeout(timer);
+			// assets/js/jelinek.js:319-326 — the text-swap window is 900ms; the
+			// icon flash (jelinek.js:123-132, flashCopied) is 1100ms. Neither is a
+			// round number, both are the guide's own.
+			timer = setTimeout(() => (copied = false), icon ? 1100 : 900);
+		} catch {
+			// Swallowed deliberately — see the try/catch comment above.
+		}
+		// Own work first, THEN the consumer's handler — same order as
+		// Tab/ThemeToggle/Radio. Calling rest.onclick BEFORE the copy attempt
+		// (as an earlier version of this fix did) meant a throwing consumer
+		// handler suppressed the copy entirely and reintroduced the unhandled
+		// rejection finding #3 removed: copy() is async, so a synchronous
+		// throw from rest.onclick before the try/catch was reached would
+		// reject copy()'s own returned promise, which nothing here awaits.
+		rest.onclick?.(event);
+	}
+
+	// Svelte 5 replacement for onDestroy — never mix the two, it breaks hydration.
+	$effect(() => () => clearTimeout(timer));
+
+	// CSS FIDELITY — the brief's CodeCopy (rounded-button border bg-surface-gray
+	// px-2 py-1 hover:bg-surface-brown chip) matches NEITHER of the two `code`
+	// treatments jelinek.css actually defines, and is wrong on every property:
+	//
+	// jelinek.css:274-279, generic inline `code` (used in body copy, e.g.
+	// ui/komponenty.html:243 `<code>--tag-h</code>`): 12px monospace,
+	// `color:var(--text-muted2)`, `border:1px dashed var(--text-muted2)`,
+	// `border-radius:4px`, `padding:1px 6px`. Task 33: those two were a hardcoded
+	// #ccc until the designer's b45c536 put them on the token, so base.css's
+	// reproduction is `var(--color-fg-muted2)` rather than an arbitrary value. But this rule has NO `cursor:pointer` and NO `:hover`
+	// state anywhere — it is inert documentation typography for a plain
+	// `<code>` element sitting in prose, not a control. Grepping the guide
+	// confirms every real usage is exactly that (a bare property/token name
+	// mentioned mid-sentence), never something clickable.
+	//
+	// jelinek.css:669-676, `.swatch__meta code` (used by every real swatch,
+	// e.g. brand/barvy.html:64 `<code>#FFFFFF</code>` and
+	// assets/js/jelinek.js:142/319, which wires a document-level click
+	// listener to exactly this element to copy its `data-copy`/text content):
+	// `font-family: ui-monospace, Menlo, Consolas, monospace`, `color:
+	// var(--text-muted1)`, `font-size: 0.8rem`, `cursor: pointer`, `border: 0;
+	// padding: 0; border-radius: 0` (explicitly STRIPS the generic code
+	// chrome), `:hover { color: var(--text-black) }`, and `.is-empty` /
+	// `.is-empty:hover` pinning it to `var(--text-muted2)` and `cursor:
+	// default` when there is nothing to copy.
+	//
+	// DECISION: CodeCopy always renders the `.swatch__meta code` treatment,
+	// never the dashed-chip one, and gets no variant toggling between them.
+	// Reasoning: CodeCopy's own contract (Task 10 interfaces) is a `<button
+	// role>` that copies `value` on click and reports the action via
+	// aria-label — it is unconditionally an interactive control. The generic
+	// `code` rule's whole visual language (a dashed border) is the opposite
+	// signal — every real instance of it in the guide is static, cursor
+	// unchanged, no hover feedback, used for words like `backdrop-filter` or
+	// `.ai` inline in a sentence. Skinning an actual `<button>` as "inert
+	// text you can't act on" is a UX/affordance bug, not a faithful
+	// reproduction — the *other* rule is the one describing a clickable code
+	// value. The dashed-chip look is real and worth having in the kit, but as
+	// a plain, non-interactive `<code>` typography default (applied globally
+	// to bare `<code>` in prose, the way jelinek.css itself does it with a
+	// bare-element selector), not as a mode of a component whose entire job
+	// is being clicked. That is out of scope for Task 10's four components.
+	//
+	// jelinek.css:322-325/327-331 (shared `.card/.panel/.alert/.tile/.demo/
+	// .swatch` block) does not apply here: `.swatch__meta code` is never
+	// listed in that selector group, and lives inside `.swatch__meta`, not
+	// directly inside `.swatch` — its font-family/size/weight are fully
+	// specified by :669-676 alone.
+	//
+	// `.swatch__meta code.is-copied` does not exist in jelinek.css — only the
+	// sibling `.swatch__copy` icon button and `.pal-cell` get a
+	// `--sem-success-strong` flash (assets/js/jelinek.js's `flashCopied`), and
+	// that pattern doesn't transfer here (no separate icon for CodeCopy to
+	// flash). But the guide's *other* copy control — assets/js/jelinek.js:
+	// 319-326, `code[data-copy]` outside a swatch-value row — is structurally
+	// the same shape as CodeCopy (one element is both the trigger and the
+	// display), and it DOES give visible feedback: on copy it swaps its own
+	// text content to the literal string "zkopírováno ✓" for 900ms, then
+	// restores the original. That's reproduced below (`copied ? 'zkopírováno
+	// ✓' : value`), alongside the aria-label swap already in place — the
+	// text-swap is the sighted-user feedback, the aria-label is the
+	// assistive-tech feedback, both present at once.
+	const BASE =
+		'rounded-none border-0 bg-transparent p-0 font-[ui-monospace,Menlo,Consolas,monospace] ' +
+		'text-[0.8rem] transition-colors';
+	const ENABLED = 'cursor-pointer text-fg-muted1 hover:text-fg';
+	const DISABLED = 'cursor-default text-fg-muted2 hover:text-fg-muted2';
+
+	// base.css's `code` rule (jelinek.css:274-279) restated on the button, since
+	// a <button> doesn't inherit it: 12px monospace, muted2, 1px dashed border,
+	// 4px radius, 6px side padding. No vertical padding and a tight line-height:
+	// on the guide's inline <code> the 1px padding doesn't grow the line box,
+	// but on an inline-block button it would — the chip was visibly taller than
+	// the archive's until both were dropped.
+	// leading must come AFTER text-[12px]: tailwind-merge treats a font-size
+	// utility as also owning line-height, so the other order strips the leading
+	// (the same trap SiteHeader's NAV_LINK documents).
+	const CHIP =
+		'cursor-pointer rounded-[4px] border border-dashed border-fg-muted2 bg-transparent ' +
+		'px-[6px] py-0 font-[ui-monospace,Menlo,Consolas,monospace] text-[12px] leading-[1.3] text-fg-muted2 ' +
+		'transition-colors hover:border-fg-muted1 hover:text-fg-muted1';
+
+	// jelinek.css:985-992 (`.code-line code`): block, pre-wrap + break-word, 8px/
+	// 12px padding, solid --border-subtle, grey fill, muted1 text darkening on
+	// hover. Radius 4px comes from the generic code rule it inherits there.
+	const BLOCK =
+		'block w-full cursor-pointer rounded-[4px] border border-solid border-border-subtle ' +
+		'bg-surface-gray px-3 py-2 text-left font-[ui-monospace,Menlo,Consolas,monospace] ' +
+		'text-[12px] leading-relaxed whitespace-pre-wrap [word-break:break-word] text-fg-muted1 ' +
+		'transition-colors hover:text-fg';
+
+	// jelinek.css:1028-1031 (`.swatch__value`): flex row, centred, value and icon
+	// pushed apart, 8px gap (--space-1), `margin: 2px 0 4px`. The `.swatch__mode
+	// .swatch__value { flex: 1; margin: 3px 0 }` override is the CALLER's business
+	// (Swatch's mode row passes its own class), not hardcoded here.
+	const ROW = 'flex items-center justify-between gap-2 my-0.5 mb-1';
+	// jelinek.css:1032-1039 (`.swatch__copy`): borderless 4px-padded 6px-radius
+	// icon, muted2 → fg + grey wash on hover, --sem-success-strong while the
+	// flash lasts, 0.3 opacity when there is nothing to copy.
+	const ICON =
+		'flex-none cursor-pointer rounded-[6px] border-0 bg-transparent p-1 leading-none ' +
+		'text-fg-muted2 transition-colors hover:bg-surface-gray hover:text-fg ' +
+		'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-transparent ' +
+		'disabled:hover:text-fg-muted2';
+</script>
+
+{#if icon}
+	<span class={cn(ROW, className)}>
+		<button
+			{...rest}
+			type="button"
+			disabled={disabled || undefined}
+			onclick={copy}
+			aria-label={disabled ? undefined : `Zkopírovat ${value}`}
+			class={cn(BASE, disabled ? DISABLED : ENABLED)}
+		>
+			{label ?? value}
+		</button>
+		<button
+			type="button"
+			disabled={disabled || undefined}
+			onclick={copy}
+			aria-label={disabled ? undefined : copied ? 'Zkopírováno' : `Kopírovat ${value}`}
+			class={cn(ICON, copied && 'text-sem-success-strong hover:text-sem-success-strong')}
+		>
+			<!-- assets/js/jelinek.js:23-28 (COPY_SVG), verbatim geometry. While the
+			     flash lasts the icon swaps to a tick in the same success green —
+			     stronger sighted feedback than the archive's colour-only flash. -->
+			<svg
+				width="15"
+				height="15"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				{#if copied}
+					<path d="M20 6L9 17l-5-5"></path>
+				{:else}
+					<rect x="9" y="9" width="12" height="12" rx="2"></rect>
+					<path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
+				{/if}
+			</svg>
+		</button>
+	</span>
+{:else}
+	<button
+		{...rest}
+		type="button"
+		disabled={disabled || undefined}
+		onclick={copy}
+		aria-label={disabled ? undefined : copied ? 'Zkopírováno' : `Zkopírovat ${value}`}
+		class={block
+			? cn(BLOCK, className)
+			: chip
+				? cn(CHIP, className)
+				: cn(BASE, disabled ? DISABLED : ENABLED, className)}
+	>
+		{copied ? 'zkopírováno ✓' : (label ?? value)}
+	</button>
+{/if}

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

@@ -0,0 +1,51 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props {
+    value: string;
+    /**
+     * Reproduces jelinek.css:675-676 (`.swatch__meta code.is-empty`): a
+     * structurally-present but non-interactive, permanently-muted state for
+     * when there is nothing to copy. Native `disabled` handles both the
+     * click-suppression and the focus/keyboard-activation removal that the
+     * source's plain `cursor: default` alone doesn't give you.
+     */
+    disabled?: boolean;
+    /**
+     * Reproduces the archive's `.swatch__value` row (jelinek.css:1028-1039 +
+     * assets/js/jelinek.js:146-160): the code value plus a trailing copy-icon
+     * button, spread apart by the row. The icon is a second trigger for the
+     * same copy, and it is also where the feedback goes — jelinek.js's
+     * `flashCopied` turns the ICON --sem-success-strong for 1100ms and leaves
+     * the code text alone, so with the icon on, the text-swap feedback below
+     * is off. Default off: bare CodeCopy (prose `code[data-copy]`,
+     * jelinek.js:329-336) has no icon in the guide either.
+     */
+    icon?: boolean;
+    /**
+     * The guide's OTHER copy control: `code[data-copy]` in prose
+     * (assets/js/jelinek.js:329-336) — the dashed-chip typography of a bare
+     * <code> (base.css's `code` rule / jelinek.css:274-279), but clickable,
+     * with the same "zkopírováno ✓" text-swap this component already does.
+     * The DECISION note below predates this prop and stands for the
+     * DEFAULT look only: a chip without data-copy stays a bare <code>;
+     * this mode exists for the chips the archive marked copyable.
+     */
+    chip?: boolean;
+    /**
+     * The guide's `.code-line code` (jelinek.css:985-992): a full-width grey
+     * block for one-or-more lines of example code, pre-wrap, muted text that
+     * darkens on hover, click copies the whole thing. Use for the multi-line
+     * snippets the archive rendered as `p.code-line`.
+     */
+    block?: boolean;
+    /**
+     * Visible text when it differs from what lands on the clipboard — the
+     * archive's `<code data-copy="33px">33 px</code>` shape. Defaults to
+     * `value`.
+     */
+    label?: string;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLButtonAttributes, 'type' | 'disabled'>;
+declare const CodeCopy: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeCopy = ReturnType<typeof CodeCopy>;
+export default CodeCopy;

package/dist/components/Container.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { setContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { CONTAINER_CONTEXT } from './container-context.js';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props & HTMLAttributes<HTMLDivElement> =
+		$props();
+
+	// Lets a descendant (currently only PageHero) detect "an ancestor already
+	// applies .container's max-width/padding" without reaching outside its
+	// own subtree — see PageHero.svelte's own comment (review round 3,
+	// Critical follow-up) for why it needs to know this at all: rendering its
+	// own equivalent wrapper INSIDE an existing Container would double the
+	// horizontal padding jelinek.css only ever applies once.
+	setContext(CONTAINER_CONTEXT, true);
+
+	// jelinek.css:287 (.container): width:100%, max-width:var(--page-max),
+	// margin:0 auto, padding:0 24px. w-full/max-w-page/mx-auto/px-6 reproduce
+	// all four values exactly (max-w-page maps to --page-max per the token
+	// map). mx-auto/px-6 alone don't touch the top/bottom margin or padding
+	// sides, but a <div>'s browser default for both is already 0, so no
+	// my-0/py-0 is needed to match the source rule's `0` values.
+	const BASE = 'mx-auto w-full max-w-page px-6';
+</script>
+
+<div {...rest} class={cn(BASE, className)}>
+	{@render children()}
+</div>

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

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

package/dist/components/ContentLogo.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+	import { DEER_MARK_PATH } from './deer-mark-path.js';
+
+	type Variant = 'brown' | 'magenta';
+
+	interface Props {
+		/** jelinek.css:744-745. Left unset for the bare/default rule (mark
+		 * colour --text-white, jelinek.css:743) — NOT itself a "neutral"
+		 * variant name, since there is no third `.content-logo--*` modifier
+		 * in the guide to give it one. */
+		variant?: Variant;
+		/**
+		 * Sets `--logo-mark` (default matches jelinek.css:743's own inline
+		 * default, `96px`). Every other size in this lockup — the gap between
+		 * mark and text, the mark's own width/height, the title and subtitle
+		 * font-sizes — is a `calc()` off this one custom property
+		 * (jelinek.css:743/746/749/754), so resizing the whole lockup is
+		 * always this one prop, never a font-size or width override on the
+		 * parts themselves.
+		 */
+		logoMark?: string;
+		/**
+		 * The verzálkový podnázev (uppercase subtitle) — jelinek.css's own
+		 * comment above the rule (jelinek.css:740-742) names this as one of
+		 * the lockup's three required parts (mark + "JELÍNEK" + subtitle),
+		 * describing "právě prohlížený obsah" (the content currently being
+		 * viewed: a division, campaign, claim, anniversary...). Every real
+		 * instance in the guide (ui/logo.html, 7 of them) sets one — there is
+		 * no documented bare-mark-plus-title case — so this is required
+		 * rather than optional. Plain text: jelinek.css:755's
+		 * `text-transform: uppercase` does the casing, this prop is never
+		 * pre-uppercased.
+		 */
+		subtitle: string;
+		class?: string;
+	}
+
+	let {
+		variant,
+		logoMark = '96px',
+		subtitle,
+		class: className,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// jelinek.css:740-742 (the Czech comment above the rule): "znak : nadpis :
+	// podnázev = 170 : 71 : 28" states the DESIGN INTENT, but the rule that
+	// actually ships two lines below it (jelinek.css:754) sets the subtitle's
+	// font-size to `calc(var(--logo-mark) * 35 / 170)`, not 28 — confirmed by
+	// also reading jelinek.css:751-756 directly rather than trusting the
+	// comment's numbers, and cross-checked against SiteHeader.svelte's own
+	// subtitle, which independently reproduces the exact same 35/170 ratio
+	// for its own comparable text (jelinek.css:379-385) — two unrelated rules
+	// agreeing on 35 is strong evidence the comment's "28" is simply stale,
+	// not that the CSS is wrong. This component reproduces what the stylesheet
+	// actually declares (35), since that's what a browser renders, and flags
+	// the mismatch here rather than silently "correcting" either number.
+	//
+	// jelinek.css:743 (.content-logo): inline-flex, centred, gap computed from
+	// --logo-mark (the antler's own right-edge margin, per the rule's own
+	// trailing comment "mezera = pravý okraj parohů ve znaku") — same formula
+	// SiteHeader.svelte's __inner gap already uses for the same reason. Colour
+	// defaults to --text-white (text-fg-inverse) and is picked up by the
+	// mark's `currentColor` path below — NOT by the title or subtitle, which
+	// each set their own explicit colour two rules down (jelinek.css:749/752)
+	// and so do not inherit this. A naive implementation that let title/
+	// subtitle inherit this colour instead would go genuinely invisible on a
+	// light background in the default (text-white) state; verified this one
+	// does not, since both keep their own always-legible colours (near-black
+	// title, mid-grey subtitle) regardless of variant, and the mark's own
+	// antler artwork sits on an unconditionally opaque black square
+	// (jelinek.css:743's rect, see SVG_RECT below) rather than directly on
+	// whatever page background surrounds the component — so nothing here is
+	// actually invisible once the colour scoping below is right.
+	const BASE = 'inline-flex items-center gap-[calc(var(--logo-mark)*107/400)] text-fg-inverse';
+
+	// jelinek.css:744 (--brown, --JELINEK-BROWN, division-tracking) and :745
+	// (--magenta, --JELINEK-MAGENTA, fixed regardless of division) — same
+	// token pair and same division-tracking-vs-fixed distinction Eyebrow's
+	// own VARIANT already documents for the identical reason (tokens.css's
+	// mattress re-theme only ever reassigns --JELINEK-BROWN).
+	const VARIANT: Record<Variant, string> = {
+		brown: 'text-jelinek-brown',
+		magenta: 'text-jelinek-magenta'
+	};
+
+	// jelinek.css:746 (.content-logo__svg): width/height both var(--logo-mark),
+	// block, flex: 0 0 auto (CSS's `none` keyword is defined as exactly
+	// `0 0 auto` — flex-none reproduces it, same mapping SiteHeader's own
+	// LOGO_LINK wrapper uses for its equivalent rule).
+	const SVG = 'block h-[var(--logo-mark)] w-[var(--logo-mark)] flex-none';
+
+	// jelinek.css:743's markup (ui/logo.html, all 7 instances verified
+	// byte-identical): the SVG's <rect> is a LITERAL `fill="#000"` attribute
+	// with a baked-in rx/ry of 25 (a rounded square badge, NOT the plain
+	// square SiteHeader's own mark uses) — not a class, not `currentColor`,
+	// so it never re-themes with the division switch or with this
+	// component's own `variant` prop; only the antler <path> below does
+	// (`fill="currentColor"`, picking up BASE/VARIANT's `color` from the
+	// wrapping element). Reproduced as literal SVG attributes for the same
+	// reason the guide itself uses them: this rect's colour is deliberately
+	// NOT part of the token system.
+
+	// jelinek.css:747-750 (.content-logo__title): font-primary (GT Walsheim),
+	// weight 700, line-height 1, letter-spacing -0.01em, size
+	// calc(logo-mark*71/170), colour --text-black (text-fg) — its OWN colour,
+	// confirmed above, not inherited from BASE.
+	const TITLE =
+		'font-primary text-[calc(var(--logo-mark)*71/170)] leading-none font-bold tracking-[-0.01em] text-fg';
+
+	// jelinek.css:751-756 (.content-logo__sub): block, colour --text-muted1
+	// (text-fg-muted1, its own colour, not inherited), weight 600 (Avenir
+	// Demi -> font-semibold), size calc(logo-mark*35/170), tracking 0.064em,
+	// uppercase, margin-top 0.3em, line-height 1.1. Font-family is a literal
+	// inline "Avenir Next LT Pro"/"Avenir Next"/Arial/sans-serif stack, NOT
+	// var(--font-secondary) (which currently also resolves to GT Walsheim Pro
+	// per tokens.css) — same fact, same fix, and same reasoning
+	// SiteHeader.svelte's own SUBTITLE_STYLE already documents for its
+	// byte-identical subtitle rule: kept as a literal inline `style` rather
+	// than a Tailwind arbitrary-font-family class, since Tailwind's bracket
+	// syntax for a comma-separated, quoted font stack is fragile.
+	const SUB =
+		'mt-[0.3em] block text-[calc(var(--logo-mark)*35/170)] leading-[1.1] font-semibold ' +
+		'tracking-[0.064em] text-fg-muted1 uppercase';
+	const SUB_STYLE = "font-family: 'Avenir Next LT Pro', 'Avenir Next', Arial, sans-serif;";
+
+	// `--logo-mark` itself has to be a real inline style (a Tailwind
+	// arbitrary-property class can't take a per-instance runtime value — only
+	// the calc()s that REFERENCE var(--logo-mark) above are static enough for
+	// that). Composed with a consumer's own `style` (via `rest.style`) rather
+	// than overwritten, same technique — and same reason — Tag.svelte's
+	// `mergedStyle` already uses for its own per-instance `--tag-h`/`--tag-s`
+	// custom properties: a bare `style={...}` placed after `{...rest}` would
+	// otherwise silently discard whatever `style` a consumer passed in.
+	const mergedStyle = $derived(
+		[`--logo-mark: ${logoMark};`, rest.style]
+			.filter((s): s is string => Boolean(s))
+			.map((s) => s.trim().replace(/;+$/, ''))
+			.join('; ')
+	);
+</script>
+
+<div {...rest} style={mergedStyle} class={cn(BASE, variant && VARIANT[variant], className)}>
+	<svg class={SVG} viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+		<rect width="400" height="400" rx="25" ry="25" fill="#000" />
+		<path d={DEER_MARK_PATH} fill="currentColor" />
+	</svg>
+	<span class={TITLE}>JELÍNEK<span class={SUB} style={SUB_STYLE}>{subtitle}</span></span>
+</div>

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

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'brown' | 'magenta';
+interface Props {
+    /** jelinek.css:744-745. Left unset for the bare/default rule (mark
+     * colour --text-white, jelinek.css:743) — NOT itself a "neutral"
+     * variant name, since there is no third `.content-logo--*` modifier
+     * in the guide to give it one. */
+    variant?: Variant;
+    /**
+     * Sets `--logo-mark` (default matches jelinek.css:743's own inline
+     * default, `96px`). Every other size in this lockup — the gap between
+     * mark and text, the mark's own width/height, the title and subtitle
+     * font-sizes — is a `calc()` off this one custom property
+     * (jelinek.css:743/746/749/754), so resizing the whole lockup is
+     * always this one prop, never a font-size or width override on the
+     * parts themselves.
+     */
+    logoMark?: string;
+    /**
+     * The verzálkový podnázev (uppercase subtitle) — jelinek.css's own
+     * comment above the rule (jelinek.css:740-742) names this as one of
+     * the lockup's three required parts (mark + "JELÍNEK" + subtitle),
+     * describing "právě prohlížený obsah" (the content currently being
+     * viewed: a division, campaign, claim, anniversary...). Every real
+     * instance in the guide (ui/logo.html, 7 of them) sets one — there is
+     * no documented bare-mark-plus-title case — so this is required
+     * rather than optional. Plain text: jelinek.css:755's
+     * `text-transform: uppercase` does the casing, this prop is never
+     * pre-uppercased.
+     */
+    subtitle: string;
+    class?: string;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const ContentLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContentLogo = ReturnType<typeof ContentLogo>;
+export default ContentLogo;