@jelinek/ui 0.3.0

package/dist/theme/tokens.css

@@ -0,0 +1,208 @@
+/* GENERATED FILE — DO NOT EDIT.
+   Source: assets/css/jelinek.css
+   Regenerate: pnpm gen:tokens
+   Hand-written additions belong in extras.css. */
+
+/* 1) Semantic layer — copied verbatim from the guide. These flip with the mode. */
+:root {
+  --JELINEK-WHITE: hsl(0, 0%, 100%);
+  --JELINEK-BROWN: hsl(29, 44%, 62%);
+  --JELINEK-MAGENTA: hsl(324, 100%, 46%);
+  --JELINEK-BLACK: hsl(0, 0%, 0%);
+  --JELINEK-WHITE-HIGHLIGHT: hsl(0, 0%, 95%);
+  --JELINEK-BROWN-HIGHLIGHT: hsl(29, 44%, 80%);
+  --JELINEK-MAGENTA-HIGHLIGHT: hsl(324, 100%, 70%);
+  --JELINEK-BLACK-HIGHLIGHT: hsl(0, 0%, 38%);
+  --ON-JELINEK-BLACK: hsl(0, 0%, 95%);
+  --bg-white: hsl(0, 0%, 100%);
+  --bg-gray: hsl(0, 0%, 95%);
+  --bg-brown: hsl(29, 44%, 95%);
+  --bg-magenta: hsl(324, 100%, 95%);
+  --bg-black: hsl(0, 0%, 0%);
+  --border-subtle: hsl(0, 0%, 91%);
+  --text-black: hsl(0, 0%, 5%);
+  --text-muted1: hsl(0, 0%, 38%);
+  --text-muted2: hsl(0, 0%, 62%);
+  --text-white: hsl(0, 0%, 95%);
+  --sem-success: hsl(80, 47%, 90%);
+  --sem-error: hsl(5, 100%, 90%);
+  --sem-warning: hsl(45, 67%, 90%);
+  --sem-info: hsl(173, 19%, 90%);
+  --sem-success-strong: hsl(142, 76%, 38%);
+  --sem-error-strong: hsl(5, 100%, 38%);
+  --radius-button: 8px;
+  --radius-image: clamp(10px, 0.8vw, 15px);
+  --radius-card: clamp(10px, 1vw, 15px);
+  --radius-section: clamp(10px, 3vw, 15px);
+  --radius-pill: 9999px;
+  --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.188), 0px 12px 12px hsl(0, 0%, 0%, 0.082);
+  --shadow-resting: 0px 2px 2px hsl(0, 0%, 0%, 0.188), 0px 6px 6px hsl(0, 0%, 0%, 0.082);
+  --dur-fast: 0.12s;
+  --dur-base: 0.15s;
+  --dur-slow: 0.2s;
+  --ease: ease;
+  --box-primary: hsl(0, 0%, 50%);
+  --glass-fill: hsl(0, 0%, 100%, 0.5);
+  --glass-border: hsl(0, 0%, 100%, 0.75);
+  --glass-filter: blur(25px) saturate(140%);
+  --focus-color: var(--JELINEK-BROWN);
+  --focus-width: 2px;
+  --focus-offset: 2px;
+  --font-primary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
+  --font-secondary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
+  --font-serif: "Archer", Georgia, "Times New Roman", serif;
+  --page-max: 1180px;
+  --header-h: 70px;
+  --subnav-h: 58px;
+  --step0: 1rem;
+  --step1: clamp(1.125rem,  1.0682rem + 0.2841vw, 1.25rem);
+  --step2: clamp(1.3125rem, 1.2273rem + 0.4261vw, 1.5rem);
+  --step3: clamp(1.4375rem, 1.2955rem + 0.7102vw, 1.75rem);
+  --step4: clamp(1.625rem,  1.3977rem + 1.1364vw, 2.125rem);
+  --step5: clamp(1.8125rem, 1.5rem    + 1.5625vw, 2.5rem);
+  --step6: clamp(2.0625rem, 1.6364rem + 2.1307vw, 3rem);
+  --step-down1: 0.9375rem;
+  --step-down2: 0.8125rem;
+  --space-1: 8px;
+  --space-2: 16px;
+  --space-3: 24px;
+  --space-4: 32px;
+  --space-5: 48px;
+  --space-6: 64px;
+  --space-section: clamp(24px, 4vw, 48px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --header-h: 94px;
+  }
+}
+
+:root[data-theme="dark"],
+.dark {
+  --bg-white: hsl(0, 0%, 5%);
+  --bg-gray: hsl(0, 0%, 15%);
+  --bg-brown: hsl(29, 44%, 10%);
+  --bg-magenta: hsl(324, 100%, 10%);
+  --bg-black: hsl(0, 0%, 0%);
+  --text-black: hsl(0, 0%, 92%);
+  --text-muted1: hsl(0, 0%, 62%);
+  --text-muted2: hsl(0, 0%, 38%);
+  --text-white: hsl(0, 0%, 95%);
+  --JELINEK-BROWN: hsl(29, 44%, 40%);
+  --JELINEK-MAGENTA: hsl(324, 100%, 30%);
+  --JELINEK-BROWN-HIGHLIGHT: hsl(29, 44%, 62%);
+  --JELINEK-MAGENTA-HIGHLIGHT: hsl(324, 100%, 46%);
+  --JELINEK-WHITE: hsl(0, 0%, 0%);
+  --JELINEK-BLACK: hsl(0, 0%, 95%);
+  --JELINEK-BLACK-HIGHLIGHT: hsl(0, 0%, 60%);
+  --JELINEK-WHITE-HIGHLIGHT: hsl(0, 0%, 5%);
+  --ON-JELINEK-BLACK: hsl(0, 0%, 5%);
+  --sem-success: hsl(80, 47%, 24%);
+  --sem-error: hsl(5, 100%, 24%);
+  --sem-warning: hsl(45, 67%, 38%);
+  --sem-info: hsl(173, 19%, 24%);
+  --sem-error-strong: hsl(5, 100%, 54%);
+  --glass-fill: hsl(0, 0%, 0%, 0.6);
+  --glass-border: hsl(0, 0%, 100%, 0.25);
+  --focus-color: var(--JELINEK-BROWN-HIGHLIGHT);
+  --border-subtle: hsl(0, 0%, 20%);
+  --border-highlight-white: hsl(0, 0%, 40%);
+  --shadow-interactive: 0px 4px 4px hsl(0, 0%, 0%, 0.063), 0px 12px 12px hsl(0, 0%, 0%, 0.188);
+  --shadow-resting: 0px 2px 2px hsl(0, 0%, 0%, 0.063), 0px 6px 6px hsl(0, 0%, 0%, 0.188);
+}
+
+/* 2) Tailwind mapping. `inline` makes utilities emit var(--GUIDE-NAME), so they
+      follow the semantic layer above instead of freezing the light values. */
+@theme inline {
+  /* Pinned to a literal px, not Tailwind v4's default 0.25rem, which is
+     rem-relative and therefore tracks whatever the root font-size is.
+     TYPE scales with the viewport; SPACING does not. Keeping them on one
+     lever is the defect this pin exists to prevent, and it was a real one:
+     until Task 25 the guide's root was clamp(13px, 8px + 1.4vw, 16px)
+     (jelinek.css:251), so a rem-based --spacing silently shrank every p,
+     px, m, gap and w utility by up to 19% below ~571px viewport width —
+     exactly the range mobile-first design cares most about. Task 25 flattened
+     the root to 16px and moved the fluidity onto the individual --stepN
+     clamp()s instead, which happens to make 0.25rem and 4px agree today.
+     The pin stays anyway: that agreement is a property of the current root
+     value, not of the system, and the guide's spacing is authored in fixed
+     px regardless (searching jelinek.css for "rem" outside font-size,
+     line-height and --step contexts turns up exactly one hit, line 483's
+     fixed-px padding deliberately paired with one fluid-rem margin on the
+     same line — not evidence that spacing in general is meant to be rem).
+     Pinning here keeps every component's bare Tailwind spacing utility
+     (documented against literal guide px values throughout
+     src/lib/components) correct at every viewport width, and matches the
+     equivalence the PASSTHROUGH comment in token-map.js assumes for space-1
+     through space-6. */
+  --spacing: 4px;
+  --color-jelinek-black: var(--JELINEK-BLACK);
+  --color-jelinek-black-highlight: var(--JELINEK-BLACK-HIGHLIGHT);
+  --color-jelinek-brown: var(--JELINEK-BROWN);
+  --color-jelinek-brown-highlight: var(--JELINEK-BROWN-HIGHLIGHT);
+  --color-jelinek-magenta: var(--JELINEK-MAGENTA);
+  --color-jelinek-magenta-highlight: var(--JELINEK-MAGENTA-HIGHLIGHT);
+  --color-jelinek-white: var(--JELINEK-WHITE);
+  --color-jelinek-white-highlight: var(--JELINEK-WHITE-HIGHLIGHT);
+  --color-on-jelinek-black: var(--ON-JELINEK-BLACK);
+  --color-surface-black: var(--bg-black);
+  --color-surface-brown: var(--bg-brown);
+  --color-surface-gray: var(--bg-gray);
+  --color-surface-magenta: var(--bg-magenta);
+  --color-surface: var(--bg-white);
+  --color-border-highlight: var(--border-highlight-white);
+  --color-border-subtle: var(--border-subtle);
+  --font-primary: var(--font-primary);
+  --font-secondary: var(--font-secondary);
+  --font-serif: var(--font-serif);
+  --container-page: var(--page-max);
+  --radius-button: var(--radius-button);
+  --radius-card: var(--radius-card);
+  --radius-image: var(--radius-image);
+  --radius-pill: var(--radius-pill);
+  --radius-section: var(--radius-section);
+  --color-sem-error: var(--sem-error);
+  --color-sem-error-strong: var(--sem-error-strong);
+  --color-sem-info: var(--sem-info);
+  --color-sem-success: var(--sem-success);
+  --color-sem-success-strong: var(--sem-success-strong);
+  --color-sem-warning: var(--sem-warning);
+  --shadow-interactive: var(--shadow-interactive);
+  --shadow-resting: var(--shadow-resting);
+  --text-step-down1: var(--step-down1);
+  --text-step-down2: var(--step-down2);
+  --text-step0: var(--step0);
+  --text-step1: var(--step1);
+  --text-step2: var(--step2);
+  --text-step3: var(--step3);
+  --text-step4: var(--step4);
+  --text-step5: var(--step5);
+  --text-step6: var(--step6);
+  --color-fg: var(--text-black);
+  --color-fg-muted1: var(--text-muted1);
+  --color-fg-muted2: var(--text-muted2);
+  --color-fg-inverse: var(--text-white);
+}
+
+/* 3) Variants. Both selectors are supported so pim/admin's .dark keeps working. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
+
+/* 4) Division re-theme — Zdravý spánek swaps the accent brown → magenta.
+      [data-theme="mattress"] is an alias kept for the e-shop's existing markup.
+      :root-scoped duplicates come FIRST so that, when both data-theme="dark"
+      and data-division="mattress" land on the same <html>, this block ties
+      the dark block above on specificity (0,2,0 vs 0,2,0) and wins on source
+      order instead of losing outright to the dark block's plain (0,1,0)
+      compare (0,2,0 beats 0,1,0 regardless of order — that was the bug: the
+      bare-selector-only version of this block could never outrank dark on
+      :root). The bare selectors stay too, so data-division/data-theme set on
+      a non-root element still re-themes just that subtree. */
+:root[data-division="mattress"],
+:root[data-theme="mattress"],
+[data-division="mattress"],
+[data-theme="mattress"] {
+  --JELINEK-BROWN: var(--JELINEK-MAGENTA);
+  --JELINEK-BROWN-HIGHLIGHT: var(--JELINEK-MAGENTA-HIGHLIGHT);
+  --bg-brown: var(--bg-magenta);
+}

package/dist/utils/chapter-nav-dock.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tracks the guide's chapter-nav "docked" scroll state: `true` while the
+ * page has not yet scrolled past 50px (the header should read as fused to
+ * the chapter nav below it), `false` once it has (the header should detach
+ * into its own rounded, shadowed bar). Mirrors
+ * `assets/js/jelinek.js:354`'s `window.scrollY > 50` threshold exactly.
+ *
+ * Must be called during component initialisation, like any other rune.
+ * Registers a passive `scroll` listener only while `enabled()` is true, and
+ * always removes it via the `$effect` cleanup function on unmount or when
+ * `enabled()` turns false — never `onDestroy` alongside runes. The handler
+ * only reads `window.scrollY`, never DOM geometry, so it does no layout
+ * work on every scroll event.
+ *
+ * @param enabled - reactive getter for whether a chapter nav is actually
+ *   present. Mirrors the guide's own `initSubnavDock()`
+ *   (assets/js/jelinek.js:350), which returns early and never attaches a
+ *   listener at all when `document.querySelector('.chapter-nav')` finds
+ *   nothing on the page.
+ */
+export declare function createChapterNavDock(enabled: () => boolean): {
+    readonly docked: boolean;
+};

package/dist/utils/chapter-nav-dock.svelte.js

@@ -0,0 +1,65 @@
+// Task 15 — the guide's joined header/chapter-nav seam. jelinek.css:432-448
+// expresses "is the header still fused to the chapter nav below it" with
+// `:root:has(.chapter-nav):not(.is-subnav-scrolled)`, a selector that
+// reaches OUTSIDE a component's own subtree to find a sibling and reacts to
+// a class assets/js/jelinek.js:354 toggles on <html> from a page-level
+// scroll listener (`window.scrollY > 50`). Neither half of that is
+// expressible from inside a single Svelte component (no :root selectors,
+// no :has() reaching outside this component's own subtree), which is why
+// Task 9 deferred the seam entirely. This module is the reactive-state half
+// of the replacement: a consumer signals "a ChapterNav sits directly below
+// me" locally (as a prop), and this tracks the same 50px scroll threshold
+// as a plain boolean instead of a document-level class.
+//
+// Runes used outside a .svelte file require the .svelte.ts extension for
+// the compiler to process them — hence this file living here rather than
+// inline in SiteHeader.svelte. Factored out (rather than kept as a private
+// effect inside SiteHeader) for two reasons: it is exported from the
+// package as its own primitive for a consumer assembling fully custom
+// chrome who wants the exact same scroll-linked boolean without
+// hand-writing a listener, and it keeps SiteHeader's own script focused on
+// class computation rather than scroll bookkeeping.
+//
+// `enabled` is a getter, not a plain boolean, because this module lives
+// outside the component that owns the prop — passing the current value by
+// itself would freeze it at call time; reading it through a closure inside
+// the effect keeps it live against prop changes, the same way `$derived`
+// depends on whatever reactive values its expression reads.
+/**
+ * Tracks the guide's chapter-nav "docked" scroll state: `true` while the
+ * page has not yet scrolled past 50px (the header should read as fused to
+ * the chapter nav below it), `false` once it has (the header should detach
+ * into its own rounded, shadowed bar). Mirrors
+ * `assets/js/jelinek.js:354`'s `window.scrollY > 50` threshold exactly.
+ *
+ * Must be called during component initialisation, like any other rune.
+ * Registers a passive `scroll` listener only while `enabled()` is true, and
+ * always removes it via the `$effect` cleanup function on unmount or when
+ * `enabled()` turns false — never `onDestroy` alongside runes. The handler
+ * only reads `window.scrollY`, never DOM geometry, so it does no layout
+ * work on every scroll event.
+ *
+ * @param enabled - reactive getter for whether a chapter nav is actually
+ *   present. Mirrors the guide's own `initSubnavDock()`
+ *   (assets/js/jelinek.js:350), which returns early and never attaches a
+ *   listener at all when `document.querySelector('.chapter-nav')` finds
+ *   nothing on the page.
+ */
+export function createChapterNavDock(enabled) {
+    let scrolled = $state(false);
+    $effect(() => {
+        if (!enabled())
+            return;
+        function onScroll() {
+            scrolled = window.scrollY > 50;
+        }
+        onScroll();
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    });
+    return {
+        get docked() {
+            return enabled() && !scrolled;
+        }
+    };
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,27 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+// The kit adds custom radius, shadow and font-size scale names. tailwind-merge
+// cannot know them, so without this a consumer's `rounded-none` would sit
+// alongside the kit's `rounded-button` instead of replacing it.
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            radius: ['button', 'image', 'card', 'section', 'pill'],
+            shadow: ['interactive', 'resting'],
+            text: [
+                'step0',
+                'step1',
+                'step2',
+                'step3',
+                'step4',
+                'step5',
+                'step6',
+                'step-down1',
+                'step-down2'
+            ]
+        }
+    }
+});
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@jelinek/ui",
+  "version": "0.3.0",
+  "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
+  "license": "UNLICENSED",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "packageManager": "pnpm@10.32.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JELINEK-nabytek-a-matrace/brand-guide.git",
+    "directory": "svelte"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme/tokens.css",
+    "./extras.css": "./dist/theme/extras.css",
+    "./base.css": "./dist/theme/base.css",
+    "./fonts.css": "./dist/theme/fonts.css"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "svelte-kit sync && svelte-package && find dist -name '*.test.*' -delete",
+    "build:showcase": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "gen:tokens": "node scripts/gen-tokens.js",
+    "check:tokens": "node scripts/gen-tokens.js --check",
+    "check:css-lock": "node scripts/check-css-lock.js",
+    "test:e2e": "pnpm run build:showcase && playwright test",
+    "prepublishOnly": "pnpm check:tokens && pnpm check:css-lock && pnpm check && pnpm test && pnpm build"
+  },
+  "peerDependencies": {
+    "svelte": "^5.56.3",
+    "tailwindcss": "^4.3.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.62.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.65.1",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.6",
+    "@types/node": "^22.10.2",
+    "jsdom": "^26.0.0",
+    "postcss": "^8.5.3",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^3.2.7"
+  }
+}