@jelinek/ui 0.3.0

package/dist/components/Demo.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Variant = 'light' | 'brown' | 'magenta' | 'black';
+
+	interface Props {
+		variant?: Variant;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		variant,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// CSS FIDELITY — the brief gave Demo a `dark` boolean that only applied
+	// `bg-surface-black text-fg-inverse`. jelinek.css defines no `.demo--dark`
+	// at all; Demo's variants are `--light`/`--brown`/`--magenta` (shared with
+	// .panel/.card, jelinek.css:486/491-492) plus its OWN `--black`
+	// (jelinek.css:792-796) — a different and much bigger rule than a plain
+	// dark background. Replaced the boolean with a `variant` prop, same shape
+	// as Panel, but with `black` instead of `dark` because that's the class
+	// that actually exists for .demo, and — critically — it is not a drop-in
+	// synonym for Panel's `dark` (see below).
+	//
+	// jelinek.css:474-482/483 (shared box system + 24px padding, same as
+	// Panel — see Panel.svelte's comment for the border-gradient-collapse and
+	// dropped-margin reasoning, identical here) and :322-325/327-331 (shared
+	// font-secondary/font-light + nested strong/b→font-medium) all apply
+	// identically to .demo.
+	//
+	// jelinek.css:486 `.demo--light { --box-fill: var(--bg-gray) }` →
+	// bg-surface-gray.
+	// jelinek.css:491 `.demo--brown { --box-fill: var(--bg-brown) }` →
+	// bg-surface-brown. jelinek.css:492 `.demo--magenta` → bg-surface-magenta.
+	//
+	// TASK 34 — CORRECTION. --box-primary used to be dropped here on the
+	// "inert for this component" reasoning Panel.svelte carried. That reasoning
+	// was false: jelinek.css:251-257 names `.demo` among the five surfaces that
+	// take `box-shadow: inset 0 2px 1px -1px var(--box-primary)` in dark mode.
+	// See Panel.svelte for the full note. The highlight is in BASE below and the
+	// two divisional overrides are back on the variants.
+	//
+	// `.demo--black` (jelinek.css:1129-1133) does NOT override --box-primary, so
+	// a black demo keeps the :root 50% grey highlight — matching the guide.
+	//
+	// jelinek.css:790-796 `.demo--black` — the serious one. It is NOT just a
+	// dark background: it locally re-maps the neutral brand tokens so
+	// black-accented content nested inside (e.g. a `<Button color="black">`)
+	// stays readable on a black surface, exactly the same technique the
+	// site's own dark mode and the mattress-division re-theme
+	// (tokens.css:161-166, `[data-division="mattress"]`) use — overriding the
+	// *source* custom property (`--JELINEK-BLACK`, `--text-muted1`, …), not
+	// the derived Tailwind token (`--color-jelinek-black`). Because
+	// tokens.css's `@theme inline` makes every `--color-*` an unresolved
+	// `var(--GUIDE-NAME)` reference (not a baked-in value), overriding the
+	// guide-name variable locally on this element cascades correctly to any
+	// descendant using the mapped utility (`bg-jelinek-black`,
+	// `text-fg-muted1`, …), the same mechanism already used by
+	// SiteHeader.svelte's `[--logo-mark:46px]` and by the mattress division
+	// override:
+	//   --box-fill: var(--bg-black); color: var(--text-white);
+	//     → bg-surface-black text-fg-inverse
+	//   --JELINEK-BLACK: hsl(0,0%,50%); --JELINEK-BLACK-HIGHLIGHT: hsl(0,0%,60%);
+	//   --ON-JELINEK-BLACK: hsl(0,0%,5%); --text-muted1: hsl(0,0%,62%);
+	//   --text-muted2: hsl(0,0%,42%);
+	//     → arbitrary-property utilities re-declaring those exact five
+	//       custom properties locally. These are hardcoded literals in
+	//       the guide itself (not references to other tokens), so arbitrary
+	//       values are the correct, faithful reproduction, not a shortcut.
+	//
+	// Task 33 — the five moved from hex to hsl() in the designer's b45c536.
+	// Three are exact (#808080 = 50%, #999999 = 60%, #0D0D0D = 5%); TWO ARE NOT,
+	// and it is worth writing down that we checked rather than trusting the
+	// commit message's "bit-identical": --text-muted1 went #9F9F9F (159) →
+	// hsl(0,0%,62%) (158) and --text-muted2 went #6A6A6A (106) →
+	// hsl(0,0%,42%) (107). One step of 255 on a muted grey, in a demo panel —
+	// non-visual, and taken as-is rather than "corrected" back, because the
+	// round number is what the designer is now authoring against.
+	//
+	// Deliberately NOT named `dark` to match Panel: Panel's `--dark` is the
+	// simple case (fill + text colour only, no token remap) and Demo has no
+	// equivalent of it — offering a `dark` option here would invite exactly
+	// the bug this task flagged (black-on-near-black content going
+	// invisible), so the option that exists is spelled `black` and does the
+	// full remap, full stop.
+	const BASE =
+		'rounded-card border border-border-subtle bg-surface p-6 font-secondary font-light ' +
+		'[&_strong]:font-medium [&_b]:font-medium ' +
+		'dark:shadow-[inset_0_2px_1px_-1px_var(--box-primary)]';
+
+	const VARIANT: Record<Variant, string> = {
+		light: 'bg-surface-gray',
+		brown: 'bg-surface-brown [--box-primary:var(--JELINEK-BROWN)]',
+		magenta: 'bg-surface-magenta [--box-primary:var(--JELINEK-MAGENTA)]',
+		black:
+			'bg-surface-black text-fg-inverse ' +
+			'[--JELINEK-BLACK:hsl(0,0%,50%)] [--JELINEK-BLACK-HIGHLIGHT:hsl(0,0%,60%)] ' +
+			'[--ON-JELINEK-BLACK:hsl(0,0%,5%)] ' +
+			'[--text-muted1:hsl(0,0%,62%)] [--text-muted2:hsl(0,0%,42%)]'
+	};
+</script>
+
+<div {...rest} class={cn(BASE, variant && VARIANT[variant], className)}>
+	{@render children()}
+</div>

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

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

package/dist/components/Eyebrow.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Variant = 'brown' | 'magenta' | 'black';
+
+	interface Props {
+		variant?: Variant;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		variant = 'brown',
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLParagraphElement> = $props();
+
+	// jelinek.css:394-399 (.eyebrow): font-weight 700, margin-bottom 0.35em
+	// (mb-[0.35em] — not on Tailwind's spacing scale).
+	//
+	// TASK 31 — THE SIZE IS NOW ON THE MODULAR SCALE. It was a fixed 1.05rem
+	// literal (16.8px, deliberately off-scale); the guide replaced it with
+	// `font-size: var(--step2)` (jelinek.css:398), which is
+	// clamp(1.3125rem, …, 1.5rem) — 21px on a phone growing to 24px from 1024px
+	// up. So this is a real, visible size increase of roughly 25-43%, not a
+	// re-spelling, and it is deliberate: the guide's own comment on that line
+	// calls --step2 the "velikost „h5" (o stupeň pod h4)" — h5's size, one step
+	// below h4 — and the section header above it (:343) states the hierarchy
+	// this belongs to, "eyebrow / číslo kapitoly (velikost „h5") → H1 → H2 …".
+	// The eyebrow is a kicker in the heading hierarchy, so it is sized from the
+	// scale like every other member of it. --step2 IS mapped (tokens.css's
+	// @theme inline block), so this is the named `text-step2` utility rather
+	// than an arbitrary value — and it therefore stays fluid with the viewport
+	// on its own, with no variant needed.
+	//
+	// jelinek.css:373-377 puts .eyebrow in the shared font-secondary selector
+	// list (`.eyebrow, .small, .tag, .tab, figcaption, label.field-label, …`)
+	// — Avenir/GT Walsheim Pro per tokens.css, NOT the Archer serif body
+	// inherits — reproduced as font-secondary.
+	const BASE = 'font-secondary font-bold text-step2 mb-[0.35em]';
+
+	// jelinek.css:396 (.eyebrow, the bare/default rule): color is
+	// var(--JELINEK-BROWN), NOT a hardcoded brown — tokens.css:193-200
+	// ([data-division="mattress"]) reassigns --JELINEK-BROWN itself to
+	// --JELINEK-MAGENTA, so text-jelinek-brown (which resolves through
+	// var(--color-jelinek-brown) -> var(--JELINEK-BROWN)) automatically
+	// follows the division switch, same mechanism Button/Checkbox already
+	// rely on for their own default brown. jelinek.css:400 (.eyebrow--magenta)
+	// uses text-jelinek-magenta instead: --JELINEK-MAGENTA is only ever READ
+	// by the division re-theme, never itself reassigned by it, so this variant
+	// stays magenta regardless of division — verified by reading
+	// tokens.css:193-200, which touches --JELINEK-BROWN/-HIGHLIGHT/--bg-brown
+	// only. jelinek.css:401 (.eyebrow--black) -> text-jelinek-black, which
+	// still correctly inverts under dark mode via --JELINEK-BLACK's own
+	// tokens.css dark-mode block (no dark: override needed here, same
+	// reasoning Tab.svelte/Tag.svelte document for their own bare
+	// jelinek-black usage).
+	const VARIANT: Record<Variant, string> = {
+		brown: 'text-jelinek-brown',
+		magenta: 'text-jelinek-magenta',
+		black: 'text-jelinek-black'
+	};
+</script>
+
+<p {...rest} class={cn(BASE, VARIANT[variant], className)}>
+	{@render children()}
+</p>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Variant = 'brown' | 'magenta' | 'black';
+interface Props {
+    variant?: Variant;
+    class?: string;
+    children: Snippet;
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLParagraphElement>;
+declare const Eyebrow: import("svelte").Component<$$ComponentProps, {}, "">;
+type Eyebrow = ReturnType<typeof Eyebrow>;
+export default Eyebrow;

package/dist/components/Glass.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// jelinek.css:1144-1151 (.glassmorphism) — a standalone surface primitive
+	// (per task direction, its own component rather than a boolean bolted
+	// onto Panel/Card/Demo: the guide treats it as one rule, unrelated to the
+	// shared box system those three use — no --box-fill/--box-primary custom
+	// properties, no border-border-subtle, no p-6/rounded-card). `backdrop-
+	// filter` only produces a visible effect when something behind the
+	// element is actually rendered — a flat card in front of a flat
+	// background demonstrates nothing, which is why the showcase demo (Task
+	// 23 report) places this over a photo, not another surface colour.
+	//
+	// TASK 31 — THE GUIDE NOW HAS ONE SHARED DEFINITION OF GLASS, and this
+	// component is no longer the only thing that uses it. The designer pulled
+	// the fill, the border and the filter out into three tokens
+	// (jelinek.css:132-136) and pointed .glassmorphism, .site-header__inner,
+	// .chapter-nav__inner and the sticky .is-sticky switcher at all three. Every
+	// value in this component therefore changed:
+	//   - background-color: was the literal `rgba(0,0,0,0)` — fully transparent,
+	//     which is why this component previously emitted no bg-* utility at all.
+	//     It is now `var(--glass-fill)`: rgba(255,255,255,0.5) light,
+	//     rgba(0,0,0,0.6) dark. So the glass finally has a fill, and the dark
+	//     mode difference is carried entirely by that token.
+	//   - border: was the literal `rgba(255,255,255,0.125)`, now
+	//     `var(--glass-border)` = rgba(255,255,255,0.75) — SIX TIMES more
+	//     opaque, and deliberately the same hairline in both themes (the token's
+	//     own comment says so: "stejná hrana v obou režimech").
+	//   - backdrop-filter: was `blur(5px) brightness(140%)`, now
+	//     `var(--glass-filter)` = `blur(25px) saturate(140%)`. Five times the
+	//     blur, and brightness is replaced by saturation.
+	//   - the `:root[data-theme="dark"] .glassmorphism` rule is GONE from the
+	//     guide entirely, so the `dark:` brightness override here goes with it.
+	//     Dark mode no longer darkens the glass with a filter; it darkens the
+	//     FILL (--glass-fill flips to rgba(0,0,0,0.6)). One less rule, same
+	//     effect. The old `dark:backdrop-brightness-[60%]` would now fight the
+	//     shared filter for no reason.
+	// border-radius: 15px is unchanged and still off the radius scale
+	// (--radius-card is clamp(10px,1vw,15px), fluid, not a fixed 15px), so it
+	// stays arbitrary.
+	//
+	// WHY THE FILTER IS AN ARBITRARY *PROPERTY* PAIR and not
+	// `backdrop-blur-[25px] backdrop-saturate-[140%]`: both compile, but only
+	// this form REFERENCES the token. If the designer retunes --glass-filter
+	// (he already has, twice), a component holding `blur(25px)` as a literal
+	// diverges silently and NO gate catches it — check:css-lock hashes
+	// `.glassmorphism`'s rule text, which would still read
+	// `var(--glass-filter)` and so would not have changed, and gen-tokens only
+	// checks tokens.css. Referencing the token is what makes the retune flow
+	// through. Both the prefixed and unprefixed properties are written out
+	// because, unlike Tailwind's backdrop-* utilities, an arbitrary property
+	// emits exactly what it is given — verified against compiled output, not
+	// assumed.
+	//
+	// box-shadow: var(--shadow-interactive) -> shadow-interactive, the
+	// mapped Tailwind token (tokens.css's @theme inline block), tracking
+	// both light/dark automatically like every other shadow-* usage in this
+	// kit.
+	const BASE =
+		'rounded-[15px] bg-[var(--glass-fill)] border border-[var(--glass-border)] shadow-interactive ' +
+		'[-webkit-backdrop-filter:var(--glass-filter)] [backdrop-filter:var(--glass-filter)]';
+</script>
+
+<div {...rest} class={cn(BASE, className)}>
+	{@render children()}
+</div>

package/dist/components/Glass.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 Glass: import("svelte").Component<$$ComponentProps, {}, "">;
+type Glass = ReturnType<typeof Glass>;
+export default Glass;

package/dist/components/Grid.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		cols?: 2 | 3 | 4;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		cols = 3,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLAttributes<HTMLDivElement> = $props();
+
+	// jelinek.css:709-717 (.grid/.grid--2/--3/--4): as of the Task 30 merge the
+	// guide is MOBILE-FIRST here — base `grid-template-columns: 1fr` for every
+	// variant, `@media (min-width: 640px)` gives 2 columns,
+	// `@media (min-width: 1024px)` gives .grid--3 three and .grid--4 four.
+	// Reproduced 1:1 below.
+	//
+	// Task 31 RE-VERIFIED this against the merged stylesheet rather than
+	// trusting the merge report's claim that grid already matched, and it does —
+	// declaration for declaration, including that the old desktop-first
+	// `@media (max-width: 900px)` tier became `min-width: 1024px`, not 900. The
+	// group's other rule, `.grid .panel, .grid .card, .grid .demo
+	// { margin-bottom: 0 }` (:699), has nothing to reproduce either: Card, Panel
+	// and Demo all deliberately drop their own `margin-bottom` (see e.g.
+	// Panel.svelte's comment on standing rule 5), so there is no margin here for
+	// a grid to zero out.
+	//
+	// THE `min-[620.02px]` / `min-[900.02px]` EPSILON IS GONE, and this is the
+	// one place in the kit where removing it is not a rounding decision. The
+	// epsilon existed for exactly one reason: the guide expressed this component
+	// desktop-first with INCLUSIVE `max-width` boundaries
+	// (`@media (max-width: 900px)` / `@media (max-width: 620px)`, both true AT
+	// the boundary value), and Tailwind's `max-[620px]:` compiles to the
+	// EXCLUSIVE `width < 620px`. `min-[620.02px]:` was the gapless,
+	// non-overlapping inverse of `<= 620px`. The brand designer rewrote these
+	// rules mobile-first with `min-width` queries, so the inclusive boundary
+	// this component was compensating for no longer exists: `min-[640px]:` and
+	// `min-[1024px]:` are now EXACT translations of the guide's own queries,
+	// character for character. Do not reintroduce an epsilon here — it would
+	// now put the kit 0.02px away from the stylesheet instead of onto it.
+	//
+	// Behaviour by width (the guide's, verbatim):
+	//   w < 640              -> 1 column, every cols value
+	//   640 <= w < 1024      -> 2 columns, every cols value
+	//   w >= 1024            -> the cols value itself (2/3/4)
+	// (.grid--3 and .grid--4 both collapse to 2 columns between 640 and 1024,
+	// so cols=4 goes 4 -> 2 -> 1 and never passes through 3; cols=2 has no
+	// 1024px rule at all, it is already 2-up from 640px.)
+	//
+	// Why Tailwind's native `min-*` variant family and NOT arbitrary *media*
+	// variants (`[@media(min-width:1024px)]:...`), even though those can express
+	// any query verbatim: a prior attempt at the desktop-first version used that
+	// form and was reverted after a real `vite build` showed Tailwind sorts
+	// arbitrary media variants by the *query text itself*, not by breakpoint
+	// magnitude — "620" sorts before "900" lexically regardless of which is
+	// numerically narrower. That put the narrow rule after the wide one in the
+	// compiled stylesheet and, at equal specificity, the later rule won the
+	// cascade across the whole range. Tailwind's native `min-*` family sorts
+	// ascending by magnitude instead — confirmed against the compiled CSS for
+	// this component, not assumed. Never paper over a future regression here
+	// with `!important`: it would break the class-override contract
+	// `cn.test.ts` guarantees.
+	//
+	// gap: var(--space-3) (24px) = gap-6 on the default Tailwind spacing scale
+	// (--space-3 is listed passthrough-but-equal to Tailwind's spacing scale in
+	// global-constraints.md).
+	// Classes are written out per-cols-value in full, not built from a
+	// `min-[1024px]:grid-cols-${n}` template, so Tailwind's static scanner can
+	// see each one literally — a template string is invisible to it and the
+	// class would never be generated.
+	const COLS: Record<2 | 3 | 4, string> = {
+		2: 'grid-cols-1 min-[640px]:grid-cols-2',
+		3: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1024px]:grid-cols-3',
+		4: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1024px]:grid-cols-4'
+	};
+</script>
+
+<div {...rest} class={cn('grid gap-6', COLS[cols], className)}>
+	{@render children()}
+</div>

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

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

package/dist/components/Label.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	interface Props {
+		for?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		for: forId,
+		class: className,
+		children,
+		...rest
+	}: Props & HTMLLabelAttributes = $props();
+
+	// jelinek.css:662 (`label.field-label`): display:block, font-weight:500,
+	// font-size:0.88rem (fixed literal, not on the --step scale), margin
+	// 0 0 6px (mb-1.5). The selector only matches an actual <label> element,
+	// which this component always renders, so it always applies. Crucially
+	// this rule declares no `color` at all — text colour is left to inherit
+	// from context, so it must NOT be forced to text-fg-muted1 as the draft
+	// brief did. font-family IS legitimately font-secondary, but from a
+	// *separate* rule at jelinek.css:313-318 (the shared Avenir group that
+	// also covers .eyebrow/.tag/.tab/etc.), which targets the same
+	// `label.field-label` selector — not from the :662 block itself.
+</script>
+
+<label
+	{...rest}
+	for={forId}
+	class={cn('mb-1.5 block font-secondary text-[0.88rem] font-medium', className)}
+>
+	{@render children()}
+</label>

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

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