npm - @jelinek/ui - Versions diffs - 0.3.0 - Mend

@jelinek/ui 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/README.md +492 -0
package/dist/components/Alert.svelte +59 -0
package/dist/components/Alert.svelte.d.ts +13 -0
package/dist/components/Button.svelte +178 -0
package/dist/components/Button.svelte.d.ts +19 -0
package/dist/components/Card.svelte +68 -0
package/dist/components/Card.svelte.d.ts +11 -0
package/dist/components/ChapterNav.svelte +290 -0
package/dist/components/ChapterNav.svelte.d.ts +18 -0
package/dist/components/Checkbox.svelte +52 -0
package/dist/components/Checkbox.svelte.d.ts +11 -0
package/dist/components/CodeCopy.svelte +294 -0
package/dist/components/CodeCopy.svelte.d.ts +51 -0
package/dist/components/Container.svelte +34 -0
package/dist/components/Container.svelte.d.ts +10 -0
package/dist/components/ContentLogo.svelte +151 -0
package/dist/components/ContentLogo.svelte.d.ts +37 -0
package/dist/components/Demo.svelte +111 -0
package/dist/components/Demo.svelte.d.ts +12 -0
package/dist/components/Eyebrow.svelte +70 -0
package/dist/components/Eyebrow.svelte.d.ts +12 -0
package/dist/components/Glass.svelte +75 -0
package/dist/components/Glass.svelte.d.ts +10 -0
package/dist/components/Grid.svelte +87 -0
package/dist/components/Grid.svelte.d.ts +11 -0
package/dist/components/Label.svelte +37 -0
package/dist/components/Label.svelte.d.ts +11 -0
package/dist/components/PageHero.svelte +312 -0
package/dist/components/PageHero.svelte.d.ts +55 -0
package/dist/components/Pager.svelte +98 -0
package/dist/components/Pager.svelte.d.ts +13 -0
package/dist/components/Panel.svelte +89 -0
package/dist/components/Panel.svelte.d.ts +12 -0
package/dist/components/ProductCard.svelte +81 -0
package/dist/components/ProductCard.svelte.d.ts +18 -0
package/dist/components/Radio.svelte +54 -0
package/dist/components/Radio.svelte.d.ts +11 -0
package/dist/components/RadioGroup.svelte +42 -0
package/dist/components/RadioGroup.svelte.d.ts +12 -0
package/dist/components/Select.svelte +65 -0
package/dist/components/Select.svelte.d.ts +20 -0
package/dist/components/SiteFooter.svelte +121 -0
package/dist/components/SiteFooter.svelte.d.ts +13 -0
package/dist/components/SiteHeader.svelte +613 -0
package/dist/components/SiteHeader.svelte.d.ts +80 -0
package/dist/components/Slider.svelte +55 -0
package/dist/components/Slider.svelte.d.ts +14 -0
package/dist/components/Swatch.svelte +174 -0
package/dist/components/Swatch.svelte.d.ts +58 -0
package/dist/components/Tab.svelte +88 -0
package/dist/components/Tab.svelte.d.ts +11 -0
package/dist/components/Tabs.svelte +306 -0
package/dist/components/Tabs.svelte.d.ts +20 -0
package/dist/components/Tag.svelte +71 -0
package/dist/components/Tag.svelte.d.ts +16 -0
package/dist/components/TextField.svelte +100 -0
package/dist/components/TextField.svelte.d.ts +18 -0
package/dist/components/ThemeToggle.svelte +122 -0
package/dist/components/ThemeToggle.svelte.d.ts +11 -0
package/dist/components/Tile.svelte +115 -0
package/dist/components/Tile.svelte.d.ts +14 -0
package/dist/components/TileScroller.svelte +199 -0
package/dist/components/TileScroller.svelte.d.ts +25 -0
package/dist/components/container-context.d.ts +1 -0
package/dist/components/container-context.js +6 -0
package/dist/components/deer-mark-path.d.ts +16 -0
package/dist/components/deer-mark-path.js +16 -0
package/dist/components/nav.d.ts +25 -0
package/dist/components/nav.js +17 -0
package/dist/components/radio-context.d.ts +6 -0
package/dist/components/radio-context.js +1 -0
package/dist/components/tabs-context.d.ts +5 -0
package/dist/components/tabs-context.js +1 -0
package/dist/index.d.ts +37 -0
package/dist/index.js +37 -0
package/dist/theme/base.css +439 -0
package/dist/theme/extras.css +2 -0
package/dist/theme/fonts.css +107 -0
package/dist/theme/tokens.css +208 -0
package/dist/utils/chapter-nav-dock.svelte.d.ts +23 -0
package/dist/utils/chapter-nav-dock.svelte.js +65 -0
package/dist/utils/cn.d.ts +2 -0
package/dist/utils/cn.js +27 -0
package/package.json +79 -0

package/dist/theme/base.css ADDED Viewed

@@ -0,0 +1,439 @@
+/* Optional, but recommended. Reproduces the brand guide's global element
+   styles (assets/css/jelinek.css:274-339) — the layer between raw tokens
+   (theme.css) and components: headings, body copy, links, and a handful of
+   text-role utility classes. Without this file, a consuming app gets
+   JELÍNEK colours and components but plain markup (a bare <h2>, a <p>, an
+   <a>) that still looks generic, because nothing in theme.css touches
+   element defaults — it only defines custom properties and the Tailwind
+   `@theme inline` mapping.
+   Import after `tailwindcss` (see README for the exact order). The rules
+   below live in `@layer base` — the same cascade layer Tailwind's own
+   preflight populates — which matters for two reasons:
+     - Tailwind's preflight resets h1-h6 to `font-size: inherit; font-weight:
+       inherit`. Since this file is imported after `tailwindcss`, its
+       `@layer base` content is appended later in that layer's rule list;
+       for the equal-specificity type selectors here (h1, body, p, a…),
+       later wins, so these rules override preflight's reset.
+     - Every Tailwind utility class (`text-step2`, `font-bold`, a component's
+       own `[&_h3]:...` arbitrary variant, …) still wins over anything here,
+       unconditionally — `utilities` is a CSS layer declared after `base`,
+       and layer order beats specificity regardless of selector shape.
+   Verified from compiled output, not assumed: dumping the built CSS shows
+   `@layer base` here ordered after Tailwind's own preflight `@layer base`
+   content, and a plain `<h2 class="text-step0">` renders at --step0's size,
+   not h2's own --step5.
+   Page scaffolding IS reproduced here (revised from Task 17 — see below):
+   `html { height: 100% }` + `body { margin: 0; min-height: 100%; display:
+   flex; flex-direction: column }` + `main { flex: 1 0 auto }`
+   (jelinek.css:295-316) is the guide's sticky-footer trick, holding the
+   footer to the bottom of the viewport on short pages instead of leaving a
+   white gap below it. Task 17 excluded this as "page-scaffolding specific
+   to the guide site's own shell, not to a generic consuming app's page"
+   and backed that with a Playwright pass that only ever visited two long,
+   scroll-filling showcase pages — it never actually exercised the short
+   one (`src/routes/+page.svelte`), which is exactly the case this rule
+   exists for, and which is where a real visible regression (black footer
+   band ending mid-page, white canvas continuing below it) then showed up.
+   The package-level concern from Task 17 still stands and is answered by
+   documentation instead of omission: importing base.css means opting into
+   a page shell of header / one `<main>` / footer, each a direct flex
+   child of `<body>` — see svelte/README.md's base.css section for the
+   consumer-facing version of this note, including how to opt out (skip
+   this file, or override `body` after importing it) without losing
+   everything else base.css provides.
+   `body { margin: 0 }` (jelinek.css:303) is also newly included here —
+   previously dropped from both the Included and the Deliberately-excluded
+   lists in Task 17, an accidental gap rather than a considered exclusion.
+   Tailwind's own preflight already zeroes body's margin in the same layer,
+   which is exactly why the gap was invisible until now: a consumer who
+   imports base.css WITHOUT Tailwind preflight (or without Tailwind at all)
+   would have kept the browser's default body margin with no indication
+   anything was missing.
+   Task 20 audited the guide's whole "3) ZÁKLAD" section
+   (jelinek.css:274-339 as the section now numbers — from the section
+   heading down to the .container rule immediately before "4) TYPOGRAFIE"
+   begins) rule by rule, starting
+   from the guide rather than from this file, specifically because walking
+   this file only ever confirms what's already here and would never have
+   caught the previous two gaps (this file's own missing `body { margin: 0
+   }`, then `html`'s missing font-size/background-color) either. Three more
+   gaps were found and closed:
+     - `* { box-sizing: border-box }` (jelinek.css:277) — the identical
+       situation as `body { margin: 0 }` above: Tailwind's preflight
+       already sets this, in the same @layer base, so the gap was invisible
+       with preflight and real without it. Included, same resolution.
+     - `html`'s root `font-size` (jelinek.css:296). Every --stepN token
+       (tokens.css) is rem-based off this root, so it is a substantive
+       reproduction, not a cosmetic one. Task 20 added it as the guide's
+       then-current `clamp(13px, 8px + 1.4vw, 16px)`; Task 25 replaced that
+       in the guide with a flat `16px` and moved the fluidity onto the
+       individual step clamps, and this file follows. Included — see the
+       `html` rule's own comment below.
+     - `body`'s `transition` on background-color/color (jelinek.css:314) —
+       excluded twice before (Task 17, Task 18) as
+       cosmetic and tied to the guide's own ThemeToggle interaction.
+       Revisited per the Task 20 brief: the kit ships `ThemeToggle.svelte`,
+       so the theme DOES change at runtime in any consuming app that uses
+       it — exactly the condition that makes this transition meaningful
+       rather than decorative. Included.
+   `html`'s `background-color: var(--bg-white)` (jelinek.css:300) was also
+   added; see the `html` rule's own comment for why only the static default
+   belongs here, not the scroll-driven swap.
+   After Task 20, the "Still deliberately NOT reproduced" list immediately
+   below is exhaustive for the guide's ZÁKLAD section: every declaration in
+   jelinek.css:274-339 is now either reproduced in the @layer base block
+   further down, or named in that list with its reasoning. This is a
+   standing invariant, not a one-time snapshot — if the guide's ZÁKLAD
+   section changes, re-run this same audit rather than trusting this file's
+   own contents.
+   TASK 31 RE-RAN THAT AUDIT against the merged guide, which is what the
+   invariant above asks for, and it earned its keep: the section gained one
+   whole new rule that NOTHING in the kit was reviewing.
+     - `body`'s transition is now written in tokens —
+       `background-color var(--dur-slow) var(--ease), color var(--dur-slow)
+       var(--ease)` (jelinek.css:314) instead of the literal `0.2s ease`.
+       Same computed value today (--dur-slow IS 0.2s, --ease IS `ease`), but
+       reproduced as the token reference so a retune of --dur-slow follows
+       through instead of silently diverging. Updated below.
+     - `:where(a, button, input, select, textarea, summary,
+       [tabindex]):focus-visible { outline: var(--focus-width) solid
+       var(--focus-color); outline-offset: var(--focus-offset) }`
+       (jelinek.css:327-330) — NEW in the merge, and a genuine accessibility
+       default: a visible keyboard focus ring on every interactive element,
+       in the brand's own brown, lightening to --JELINEK-BROWN-HIGHLIGHT in
+       dark mode (tokens.css's --focus-color). Reproduced below. `:where()`
+       has zero specificity, so it can never fight a component's own
+       `focus-visible:` utilities or a consumer's override — which is
+       exactly why it is safe to ship globally, and the guide says so itself
+       in its own comment above the rule.
+       WARNING, and the reason this rule is worth a paragraph rather than a
+       line: `check-css-lock.js` CANNOT SEE IT. `groupsOf()` splits on
+       top-level commas only, so this selector is ONE part; that part has no
+       class token, so it falls through to the GUARDED_ELEMENTS branch,
+       whose leading-token regex (`^(\*|[a-z][a-z0-9]*)`) fails on a
+       selector starting with `:`. The rule therefore lands in no bucket at
+       all and the checker reported "no drift" for it — the documented
+       "brand-new bare type selector" blind spot in that file's own header
+       comment, hit for real. Reproducing it here closes the visual gap but
+       NOT the guard gap: future edits to the guide's focus ring will not
+       fail any gate. Closing it properly means teaching groupsOf() to scan
+       INSIDE `:is()`/`:where()` argument lists for bare element tokens —
+       but only when the part has no class anywhere, otherwise
+       `:is(h1,h2,h3):has(+ .rule)` (jelinek.css:407-414) would start
+       mis-attributing to the h1/h2/h3 buckets, which is the exact false
+       positive topLevelParts() was written to prevent. That is a change to
+       the lock tool with its own test surface, deliberately left out of
+       Task 31 and named in its report instead.
+   Still deliberately NOT reproduced from the ZÁKLAD section
+   (jelinek.css:274-339):
+     - `scroll-behavior: smooth` on `html` (jelinek.css:296) — a global
+       scroll *behaviour*, not a visual default, and not load-bearing for
+       anything the guide itself does: its own chapter navigation
+       (ChapterNav/Pager) is cross-page links to different documents, not
+       in-page anchors, and grepping brand/*.html and ui/*.html turns up no
+       in-page-anchor pattern that depends on it either. Forcing it
+       globally on a consuming app's `<html>` is a bigger commitment than
+       it looks: it can fight an app's own scroll management (virtualised
+       lists, scroll-linked animation, router-driven scroll restoration),
+       and the guide doesn't gate it behind `prefers-reduced-motion` (no
+       such media query exists anywhere in jelinek.css or jelinek.js), so
+       reproducing it here would also reproduce that accessibility gap for
+       every consumer. Trivial to opt into if wanted:
+       `html { scroll-behavior: smooth }` in the consumer's own CSS, after
+       this import.
+     - `.container` (jelinek.css:339: `width: 100%; max-width:
+       var(--page-max); margin: 0 auto; padding: 0 24px`) — not silently
+       dropped, reproduced instead as a component: `Container.svelte`
+       applies the equivalent Tailwind utilities (`mx-auto w-full
+       max-w-page px-6`) on its own root element (see that file's own
+       comment for the value-by-value mapping, including why no
+       my-0/py-0 is needed). Not duplicated here as a global class rule for
+       the same reason the font-role classes below aren't: it would collide
+       with any consumer app that reuses the class name `.container` for
+       something unrelated of its own.
+   Still deliberately NOT reproduced from the TYPOGRAFIE section
+   (jelinek.css:344-391) — out of Task 20's audit scope (that task covered
+   ZÁKLAD only), noted here because it predates Task 20 and the reasoning is
+   the same shape: component-specific font-role switching (.card, .panel,
+   .tile, .demo, .swatch on font-secondary/Light; .eyebrow; the
+   site-header/chapter-nav/pager font-secondary swaps) is also NOT
+   reproduced: every component that needs one of these already carries the
+   equivalent Tailwind utility classes on its own root element (see e.g.
+   Tile.svelte's BASE constant reproducing jelinek.css:382-385 and :337
+   directly), so duplicating the underlying element/class rule here would be
+   redundant — and, being global, would actively fight component internals
+   for any plain (non-component) markup a consumer writes with those same
+   class names for unrelated reasons. */
+@layer base {
+	/* jelinek.css:277. Tailwind's preflight already sets this identically
+	   (`*, ::before, ::after, ::backdrop, ::file-selector-button {
+	   box-sizing: border-box; ... }`, verified in
+	   node_modules/tailwindcss/preflight.css) in this same @layer base —
+	   the same situation as body's margin below: invisible with preflight,
+	   real without it (or without Tailwind at all). Included. */
+	* {
+		box-sizing: border-box;
+	}
+	/* jelinek.css:295-301. `height: 100%` is required for body's
+	   `min-height: 100%` below to mean anything at all: a percentage height
+	   on a non-root element resolves against its containing block's height,
+	   and the root element's own height is otherwise 'auto' (sized to
+	   content) — `html { height: 100% }` is what gives `<html>` a used
+	   height (the viewport, via the CSS root-element special case) for
+	   `<body>` to then take 100% of.
+	   `font-size` is the guide's root size (see the file header comment above
+	   for the full rationale) — the one property in this rule that's
+	   substantive rather than cosmetic, since every --stepN TYPE token is
+	   rem-based off it. It is a flat 16px as of Task 25, NOT the
+	   `clamp(13px, 8px + 1.4vw, 16px)` this file carried before: that clamp
+	   made the root — and with it every rem in the system — shrink to 13px on
+	   the narrowest phones. The guide states the intent itself, above its own
+	   `html` rule at jelinek.css:278-282: "Základ škály = 16px na každé šířce
+	   okna… Velikosti teď mění jednotlivé stupně škály (--step1…--step6), ne
+	   kořen; tělo textu proto zůstává 16px všude." The fluidity did not
+	   disappear, it moved: each --stepN is now its own clamp() interpolating
+	   over 320-1024px viewport width (tokens.css), so headings still grow with
+	   the viewport while body copy no longer shrinks with it. Guide SPACING
+	   deliberately does not move with this root either way; that's theme.css's
+	   `--spacing: 4px` pin (gen-tokens.js), a separate fix, not this file's
+	   concern.
+	   `background-color` is the static canvas colour revealed by elastic
+	   overscroll (Safari's rubber-band past the top/bottom of the page).
+	   The guide swaps this by scroll position at runtime via a `<script>`
+	   in assets/js/jelinek.js (page colour at the top, black to match the
+	   footer at the bottom) — that JS behaviour is out of scope for a
+	   CSS-only kit, but the static default it starts from is a real visual
+	   default worth keeping on its own.
+	   `scroll-behavior: smooth` is deliberately NOT included here — see the
+	   file header comment above for why. */
+	html {
+		font-size: 16px;
+		height: 100%;
+		background-color: var(--bg-white);
+	}
+	/* jelinek.css:302-315. `min-height: 100%` + the flex column is the
+	   sticky-footer trick: SiteHeader/ChapterNav/main/SiteFooter, each a
+	   direct flex child of body, stretch to fill at least the viewport
+	   height so the footer never ends before the bottom of a short page.
+	   `transition` is included as of Task 20 — see the file header comment
+	   above for why the earlier "cosmetic, tied to the guide's own
+	   ThemeToggle" exclusion no longer holds now that the kit ships that
+	   same component. */
+	body {
+		margin: 0;
+		min-height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-white);
+		color: var(--text-black);
+		font-family: var(--font-serif); /* Archer Book — paragraphs and body text */
+		font-weight: 400;
+		font-size: 1rem;
+		line-height: 1.6;
+		-webkit-font-smoothing: antialiased;
+		/* Token references, not the literal `0.2s ease` this used to carry —
+		   the guide moved its own durations onto --dur-fast/base/slow + --ease
+		   in the Task 31 merge (jelinek.css:126-130). Identical computed value
+		   today; the point is that a retune of --dur-slow reaches this rule
+		   instead of leaving it behind. */
+		transition:
+			background-color var(--dur-slow) var(--ease),
+			color var(--dur-slow) var(--ease);
+	}
+	/* jelinek.css:316. The one flex child that should actually grow — header,
+	   chapter-nav and footer keep their natural (content) height; whatever
+	   space is left over goes to <main>, pushing the footer down to the
+	   bottom of the viewport on short pages instead of leaving it stranded
+	   right after the content. */
+	main {
+		flex: 1 0 auto;
+	}
+	/* Headings — modular scale (see --stepN in theme.css); only size/line-height
+	   change per level, the typeface (GT Walsheim Bold) stays constant. */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: var(--font-primary);
+		font-weight: 700;
+		margin: 0 0 0.4em;
+	}
+	h1 {
+		font-size: var(--step6);
+		line-height: 1.1;
+		letter-spacing: -0.01em;
+	}
+	h2 {
+		font-size: var(--step5);
+		line-height: 1.1;
+	}
+	h3 {
+		font-size: var(--step4);
+		line-height: 1.2;
+	}
+	h4 {
+		font-size: var(--step3);
+		line-height: 1.2;
+	}
+	h5 {
+		font-size: var(--step2);
+		line-height: 1.3;
+	}
+	h6 {
+		font-size: var(--step1);
+		line-height: 1.3;
+	}
+	p {
+		font-size: var(--step0);
+		line-height: 1.4;
+		margin: 0 0 1em;
+	}
+	/* Links are always bold — in text and as a button (see Button.svelte). */
+	a {
+		color: var(--JELINEK-BROWN);
+		text-decoration: none;
+		font-weight: 700;
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+	/* "Block" links (tiles, pagers) keep the surrounding content's normal
+	   weight — their own headings/<strong> carry the bold, not the whole link. */
+	.tile,
+	.pager a {
+		font-weight: 400;
+	}
+	img {
+		max-width: 100%;
+		display: block;
+	}
+	/* Inline unformatted text — small monospace in a dashed grey box.
+	   Task 33 — THE COLOUR IS A TOKEN NOW, and darker. The designer's b45c536
+	   replaced the hardcoded `#ccc` on both the text and the dashed border with
+	   `var(--text-muted2)`. That is a real value change, not the notation sweep
+	   the rest of that commit is: #ccc is hsl(0,0%,80%), --text-muted2 is
+	   hsl(0,0%,62%) in light mode — noticeably darker and a real contrast
+	   improvement — and it now flips in dark mode (hsl(0,0%,38%)), which #ccc
+	   never did. Written as the mapped Tailwind token here (--color-fg-muted2 is
+	   `var(--text-muted2)` via @theme inline) so the flip is inherited rather
+	   than frozen. */
+	code {
+		font-family: ui-monospace, Menlo, Consolas, monospace;
+		font-size: 12px;
+		color: var(--color-fg-muted2);
+		border: 1px dashed var(--color-fg-muted2);
+		border-radius: 4px;
+		padding: 1px 6px;
+	}
+	/* jelinek.css:325-330 — the global keyboard focus ring, NEW in the Task 31
+	   merge. `:focus-visible`, not `:focus`, so a mouse click does not draw it;
+	   `:where()` keeps the whole selector at ZERO specificity, so any component
+	   in this kit (and any consumer rule) overrides it with a plain class —
+	   which is what makes shipping it globally safe rather than presumptuous.
+	   --focus-color is --JELINEK-BROWN in light and the lighter
+	   --JELINEK-BROWN-HIGHLIGHT in dark (tokens.css), so the ring stays visible
+	   against both canvases without a dark: variant here.
+	   Kept as a raw rule rather than Tailwind utilities for the same reason as
+	   everything else in this file: there is no element to hang a class on. See
+	   the file header for why check-css-lock.js cannot guard this rule, and
+	   what closing that would take. */
+	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+		outline: var(--focus-width) solid var(--focus-color);
+		outline-offset: var(--focus-offset);
+	}
+	.muted {
+		color: var(--text-muted1);
+	}
+	.muted2 {
+		color: var(--text-muted2);
+	}
+	.serif {
+		font-family: var(--font-serif);
+	}
+	.small {
+		font-size: var(--step-down1);
+		line-height: 1.1;
+		font-weight: 300;
+	}
+	.tiny {
+		font-size: var(--step-down2);
+		line-height: 1.1;
+	}
+	.sub {
+		font-size: var(--step2);
+		line-height: 1.3;
+	}
+	/* Task 38 — THE HEADING UNDERLINE, jelinek.css:415-425 verbatim.
+	   The guide's pattern is literal markup: a heading followed by
+	   `<hr class="rule">`. The hr itself is display:none — it exists only so
+	   `:has(+ .rule)` can see it — and the visible bar is the heading's own
+	   ::after, 3px tall and 75% of the heading's FITTED width (width:
+	   fit-content is what makes 75% mean "of the text", not "of the page").
+	   Colour variants ride on the hr's class, default follows the division
+	   through --JELINEK-BROWN.
+	   Until now only PageHero carried this (as Tailwind classes on its own
+	   heading), so a chapter page could not underline its section <h2>s the
+	   way every hand-written page does — the pattern the guide uses most was
+	   the one thing base.css didn't reproduce. PageHero keeps its own copy on
+	   purpose (it must not depend on this optional stylesheet); these rules
+	   are for page content written in the guide's own markup.
+	   The margin shorthand is the guide's: 16px above the bar, 24px below
+	   (var(--space-2) / var(--space-3)). `:has(+ .rule)` also zeroes the
+	   heading's own margin-bottom, so the bar's margins are the only spacing
+	   in play. */
+	.rule,
+	.rule--magenta,
+	.rule--black,
+	.rule--white {
+		display: none;
+	}
+	:is(h1, h2, h3):has(+ .rule) {
+		width: fit-content;
+		max-width: 100%;
+		margin-bottom: 0;
+	}
+	:is(h1, h2, h3):has(+ .rule)::after {
+		content: '';
+		display: block;
+		height: 3px;
+		width: 75%;
+		border-radius: 2px;
+		margin: var(--space-2) 0 var(--space-3);
+		background: var(--JELINEK-BROWN);
+	}
+	:is(h1, h2, h3):has(+ .rule--magenta)::after {
+		background: var(--JELINEK-MAGENTA);
+	}
+	:is(h1, h2, h3):has(+ .rule--black)::after {
+		background: var(--JELINEK-BLACK);
+	}
+	:is(h1, h2, h3):has(+ .rule--white)::after {
+		background: var(--text-white);
+	}
+}

package/dist/theme/extras.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /* Hand-written theme additions. The generator never touches this file.
2	+ Import after theme.css. */

package/dist/theme/fonts.css ADDED Viewed

@@ -0,0 +1,107 @@
+/* Optional. Assumes the .woff2 files are served from /assets/fonts/ — the
+   same absolute path the brand guide itself uses (assets/fonts/*.woff2 at
+   the repo root). That is not a coincidence: when this showcase is deployed
+   behind the `brand` Worker at /ui/, /assets/fonts/... already
+   resolves on the same origin for free (wrangler.jsonc serves the whole
+   repo root as static assets), so this file needs no change to work there.
+   For standalone `pnpm dev` / `vite preview`, vite.config.ts adds a small
+   dev-only middleware that serves the same /assets/fonts/* path straight
+   from the repo root's assets/fonts/ — see that file's comment for why a
+   static/ copy or symlink can't do this (this project's `paths.base:
+   '/ui'` prefixes everything under static/, including symlinks, so it
+   can never be reached at the unprefixed path fonts.css actually requests).
+   Either way the licensed files themselves are never copied into svelte/.
+   Apps that host fonts elsewhere skip this import and declare their own
+   @font-face — the kit only relies on --font-primary/--font-secondary/
+   --font-serif, which all have fallbacks.
+   font-display: block, matching jelinek.css (the designer flagged swap's
+   visible fallback flash on load; block hides the text for the few ms the
+   same-origin files take instead of flashing Arial/Georgia).
+   Reconciled against assets/css/jelinek.css's @font-face block (the
+   authority for which faces exist): every face declared there is declared
+   here too, with the same family name, weight and filename. That now
+   includes Archer Medium (500) — the file had been in assets/fonts/ and in
+   its README since 03ee9de, but with no @font-face anywhere, so any request
+   for a 500-weight Archer silently fell back to Book. Declaring it makes
+   the README true and gives the designer the option of Medium emphasis in
+   prose; nothing requests it yet (prose <strong> is plain Bold, his
+   7cd378c). */
+@font-face {
+	font-family: 'GT Walsheim Pro';
+	src: url('/assets/fonts/GT-Walsheim-Pro-Light.woff2') format('woff2');
+	font-weight: 300;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'GT Walsheim Pro';
+	src: url('/assets/fonts/GT-Walsheim-Pro-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'GT Walsheim Pro';
+	src: url('/assets/fonts/GT-Walsheim-Pro-Medium.woff2') format('woff2');
+	font-weight: 500;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'GT Walsheim Pro';
+	src: url('/assets/fonts/GT-Walsheim-Pro-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'GT Walsheim Pro';
+	src: url('/assets/fonts/GT-Walsheim-Pro-Black.woff2') format('woff2');
+	font-weight: 900;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Avenir Next LT Pro';
+	src: url('/assets/fonts/AvenirNextLTPro-Regular.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Avenir Next LT Pro';
+	src: url('/assets/fonts/AvenirNextLTPro-Demi.woff2') format('woff2');
+	font-weight: 600;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Avenir Next LT Pro';
+	src: url('/assets/fonts/AvenirNextLTPro-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Archer';
+	src: url('/assets/fonts/Archer-Book.woff2') format('woff2');
+	font-weight: 400;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Archer';
+	src: url('/assets/fonts/Archer-Medium.woff2') format('woff2');
+	font-weight: 500;
+	font-style: normal;
+	font-display: block;
+}
+@font-face {
+	font-family: 'Archer';
+	src: url('/assets/fonts/Archer-Bold.woff2') format('woff2');
+	font-weight: 700;
+	font-style: normal;
+	font-display: block;
+}