@jelinek/ui 0.5.3 → 0.9.1

package/dist/index.js

@@ -1,39 +1,80 @@
 export { cn } from './utils/cn.js';
 export { createChapterNavDock } from './utils/chapter-nav-dock.svelte.js';
 export { default as Alert } from './components/Alert.svelte';
+export { default as Breadcrumbs } from './components/commerce/Breadcrumbs.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
+export { default as CartDrawer } from './components/commerce/CartDrawer.svelte';
+export { default as CartLineItem } from './components/commerce/CartLineItem.svelte';
+export {} from './components/commerce/cart-types.js';
 export { default as ChapterNav } from './components/ChapterNav.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckoutProgress } from './components/commerce/CheckoutProgress.svelte';
+export { default as CmsButton } from './components/blocks/CmsButton.svelte';
+export { default as CmsColumns } from './components/blocks/CmsColumns.svelte';
+export { default as CmsCover } from './components/blocks/CmsCover.svelte';
+export { default as CmsHeading } from './components/blocks/CmsHeading.svelte';
+export { default as CmsImage } from './components/blocks/CmsImage.svelte';
+export { default as CmsMediaText } from './components/blocks/CmsMediaText.svelte';
+export { default as CmsText } from './components/blocks/CmsText.svelte';
 export { default as CodeCopy } from './components/CodeCopy.svelte';
+export { default as ConfigSection } from './components/commerce/ConfigSection.svelte';
 export { CONTAINER_CONTEXT } from './components/container-context.js';
 export { default as Container } from './components/Container.svelte';
 export { default as ContentLogo } from './components/ContentLogo.svelte';
 export { default as Demo } from './components/Demo.svelte';
+export { default as DimensionSlider } from './components/commerce/DimensionSlider.svelte';
+export { default as Drawer } from './components/commerce/Drawer.svelte';
+export { default as EmptyState } from './components/commerce/EmptyState.svelte';
 export { default as Eyebrow } from './components/Eyebrow.svelte';
+export { default as FilterChip } from './components/commerce/FilterChip.svelte';
+export { formatMoney, formatPrice } from './components/commerce/money.js';
+export { default as FreeShippingBar } from './components/commerce/FreeShippingBar.svelte';
+export { default as Gallery } from './components/commerce/Gallery.svelte';
 export { default as Glass } from './components/Glass.svelte';
 export { default as Grid } from './components/Grid.svelte';
 export { default as Label } from './components/Label.svelte';
+export { default as ListingToolbar } from './components/commerce/ListingToolbar.svelte';
+export { default as Modal } from './components/commerce/Modal.svelte';
 export { isActive } from './components/nav.js';
 export { default as OptionTile } from './components/OptionTile.svelte';
+export { default as OrderSummary } from './components/commerce/OrderSummary.svelte';
 export { default as PageHero } from './components/PageHero.svelte';
 export { default as Pager } from './components/Pager.svelte';
+export { default as Pagination } from './components/commerce/Pagination.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as PhotoTile } from './components/PhotoTile.svelte';
+export { default as PriceDisplay } from './components/commerce/PriceDisplay.svelte';
 export { default as ProductCard } from './components/ProductCard.svelte';
+export { default as ProductHeader } from './components/commerce/ProductHeader.svelte';
+export { default as ProductStickyBar } from './components/commerce/ProductStickyBar.svelte';
+export { default as ProductTabs } from './components/commerce/ProductTabs.svelte';
+export { default as QuantityStepper } from './components/commerce/QuantityStepper.svelte';
 export { default as Radio } from './components/Radio.svelte';
+export { default as RatingStars } from './components/commerce/RatingStars.svelte';
 export { RADIO_CONTEXT } from './components/radio-context.js';
 export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as SearchField } from './components/commerce/SearchField.svelte';
 export { default as Select } from './components/Select.svelte';
+export { portal } from './components/commerce/overlay.js';
+export { default as SideToggle } from './components/commerce/SideToggle.svelte';
 export { default as SiteFooter } from './components/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader.svelte';
+export { default as Skeleton } from './components/commerce/Skeleton.svelte';
 export { default as Slider } from './components/Slider.svelte';
+export { default as StickyBar } from './components/commerce/StickyBar.svelte';
+export { default as StockBadge } from './components/commerce/StockBadge.svelte';
 export { default as Swatch } from './components/Swatch.svelte';
+export { default as Switch } from './components/Switch.svelte';
 export { default as Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { TABS_CONTEXT } from './components/tabs-context.js';
 export { default as Tag } from './components/Tag.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
 export { default as TextField } from './components/TextField.svelte';
 export { default as ThemeToggle } from './components/ThemeToggle.svelte';
 export { default as Tile } from './components/Tile.svelte';
+export { toasts } from './components/commerce/toast.js';
+export { default as Toaster } from './components/commerce/Toaster.svelte';
+export { default as TrustBadges } from './components/commerce/TrustBadges.svelte';
 export { default as TileScroller } from './components/TileScroller.svelte';

package/dist/theme/base.css

@@ -253,6 +253,25 @@
 			color var(--dur-slow) var(--ease);
 	}
 
+	/* KURZÍVA SE NEPOUŽÍVÁ NIKDY (brand → Typografie; majitel 14. 8. 2026) —
+	   žádné písmo značky nemá skloněný řez a prohlížeč by si ho syntetizoval.
+	   <em>/<i> se narovnává a zvýrazňuje tučně („ke zvýraznění slouží tučné
+	   řezy“). Mirrors the identical rule in jelinek.css. */
+	em,
+	i {
+		font-style: normal;
+		font-weight: 700;
+	}
+
+	/* <strong> pinned to Bold: the default `bolder` is RELATIVE — one step
+	   up from Light (300) is Regular (400), a face outside the role system.
+	   Contexts with their own rule (.card strong = Medium, Demo's
+	   [&_strong]:font-medium utility) still win on specificity/layer. */
+	b,
+	strong {
+		font-weight: 700;
+	}
+
 	/* 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
@@ -372,6 +391,9 @@
 	}
 	.serif {
 		font-family: var(--font-serif);
+		/* Archer only has Book (400) and Bold — a surrounding Light must not
+		   be inherited into serif text. */
+		font-weight: 400;
 	}
 	.small {
 		font-size: var(--step-down1);
@@ -404,21 +426,36 @@
 	   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
+	   (var(--space-2) / var(--space-3)). `:has(+ .rule + p)` also zeroes the
 	   heading's own margin-bottom, so the bar's margins are the only spacing
-	   in play. */
+	   in play.
+
+	   Task 46 — UNDERLINE ONLY ABOVE TEXT (the owner's rule): the bar draws
+	   only when TEXT begins under the heading — a paragraph directly after
+	   the marker, or a grid whose first cell opens with one (the guide's
+	   two-column text+photo sections). A heading above a tile, an image or
+	   cards keeps no bar — the `<hr class="rule">` may stay in the markup,
+	   it just stops mattering there. Mirrors jelinek.css. */
 	.rule,
 	.rule--magenta,
 	.rule--black,
 	.rule--white {
 		display: none;
 	}
-	:is(h1, h2, h3):has(+ .rule) {
+	:is(h1, h2, h3):has(
+		+ .rule + p,
+		+ .rule + .grid > p:first-child,
+		+ .rule + .grid > :first-child > p:first-child
+	) {
 		width: fit-content;
 		max-width: 100%;
 		margin-bottom: 0;
 	}
-	:is(h1, h2, h3):has(+ .rule)::after {
+	:is(h1, h2, h3):has(
+		+ .rule + p,
+		+ .rule + .grid > p:first-child,
+		+ .rule + .grid > :first-child > p:first-child
+	)::after {
 		content: '';
 		display: block;
 		height: 3px;
@@ -427,13 +464,25 @@
 		margin: var(--space-2) 0 var(--space-3);
 		background: var(--JELINEK-BROWN);
 	}
-	:is(h1, h2, h3):has(+ .rule--magenta)::after {
+	:is(h1, h2, h3):has(
+		+ .rule--magenta + p,
+		+ .rule--magenta + .grid > p:first-child,
+		+ .rule--magenta + .grid > :first-child > p:first-child
+	)::after {
 		background: var(--JELINEK-MAGENTA);
 	}
-	:is(h1, h2, h3):has(+ .rule--black)::after {
+	:is(h1, h2, h3):has(
+		+ .rule--black + p,
+		+ .rule--black + .grid > p:first-child,
+		+ .rule--black + .grid > :first-child > p:first-child
+	)::after {
 		background: var(--JELINEK-BLACK);
 	}
-	:is(h1, h2, h3):has(+ .rule--white)::after {
+	:is(h1, h2, h3):has(
+		+ .rule--white + p,
+		+ .rule--white + .grid > p:first-child,
+		+ .rule--white + .grid > :first-child > p:first-child
+	)::after {
 		background: var(--text-white);
 	}
 }

package/dist/theme/extras.css

@@ -1,2 +1,65 @@
 /* Hand-written theme additions. The generator never touches this file.
    Import after theme.css. */
+
+:root {
+	/* WCAG AA text-on-white accents (docs/pro-designera.md): darker L than the
+	   brand fills, for colored TEXT and links on white. Never replaces the
+	   brand fills themselves. Upstreamed from the store, where the e-shop
+	   components (Breadcrumbs, ConfigSection, CheckoutProgress, OrderSummary,
+	   SideToggle, DimensionSlider) already leaned on them. */
+	--color-accent-text: hsl(29 44% 43%);
+	--color-accent-text-mattress: hsl(324 100% 44%);
+	/* Stock states beyond the semantic success token — StockBadge's
+	   „na objednávku“/lead orange. */
+	--color-stock-order: hsl(35 85% 40%);
+}
+
+/* Accent text follows the division: the Zdravý spánek (mattress) subtree
+   flips it to magenta, the same way theme.css flips the brand fills. */
+[data-division='mattress'] {
+	--color-accent-text: var(--color-accent-text-mattress);
+}
+
+/* Jelen je jen hnědý, nebo bílý (brand → Znak, Užití s produktovými
+   barvami): divizní přetéma přemapovává --JELINEK-BROWN na magentu, ale pro
+   jelena je to zakázaný stav — pod divizí Zdravý spánek přechází KAŽDÉ
+   obsahové logo na bílou, divizní barvu jelena. Zrcadlí stejné pravidlo
+   v jelinek.css u .content-logo. */
+[data-division='mattress'] [data-content-logo],
+[data-theme='mattress'] [data-content-logo] {
+	color: var(--color-fg-inverse);
+}
+
+/* Skeleton shimmer (majitel, 14. 8. 2026): placeholder při načítání nese
+   projíždějící světlý gradient, jak je dnes zvykem — ne jen pulz. Barvy
+   jsou tokeny (klidová --bg-gray, projíždějící světlo --bg-white), takže
+   se v tmavém režimu překlopí samy. Smyčka 1,5 s je vlastní hodnota:
+   pohybové tokeny (--dur-*) popisují přechody stavů, ne nekonečné smyčky.
+   Kdo si v systému vypnul animace, dostane klidnou plochu — první kousek
+   prefers-reduced-motion v kitu (zásobník: Ohled na omezení pohybu). */
+@keyframes skeleton-shimmer {
+	to {
+		transform: translateX(100%);
+	}
+}
+.skeleton-shimmer {
+	position: relative;
+	overflow: hidden;
+	background: var(--color-surface-gray);
+}
+/* Světelný pás jede přes celou plochu jako vrstva nad ní (transform, ne
+   background-position) — na malém řádku i velké fotce je pohyb stejně
+   viditelný a nemá hluchá místa. */
+.skeleton-shimmer::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	transform: translateX(-100%);
+	background: linear-gradient(90deg, transparent, var(--color-surface) 55%, transparent);
+	animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+	.skeleton-shimmer::after {
+		content: none;
+	}
+}

package/dist/theme/fonts.css

@@ -21,13 +21,12 @@
 
    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). */
+   here too, with the same family name, weight and filename. Only the ROLE
+   faces are loaded (majitel, 21. 8. 2026): Walsheim Light/Medium/Bold,
+   Archer Book/Bold, Avenir Demi (logo subtitle). Regular, Black, Avenir
+   Regular/Bold and Archer Medium stay in assets/fonts/ for other projects,
+   but the web never declares them — a stray request falls back and the
+   font-faces e2e catches it. */
 @font-face {
 	font-family: 'GT Walsheim Pro';
 	src: url('/assets/fonts/GT-Walsheim-Pro-Light.woff2') format('woff2');
@@ -35,13 +34,6 @@
 	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');
@@ -56,20 +48,6 @@
 	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');
@@ -77,13 +55,6 @@
 	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');
@@ -91,13 +62,6 @@
 	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');

package/dist/theme/tokens.css

@@ -16,8 +16,8 @@
   --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-brown: hsl(27, 58%, 96.3%);
+  --bg-magenta: hsl(324, 85%, 92%);
   --bg-black: hsl(0, 0%, 0%);
   --border-subtle: hsl(0, 0%, 91%);
   --text-black: hsl(0, 0%, 5%);
@@ -45,13 +45,20 @@
   --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);
+  --overlay-scrim: hsl(0, 0%, 0%, 0.5);
+  --overlay-filter: blur(4px);
+  --z-bar: 40;
+  --z-chapter-nav: 49;
+  --z-header: 50;
+  --z-overlay: 1200;
+  --z-toast: 1500;
+  --focus-color: var(--JELINEK-BLACK);
   --focus-width: 2px;
   --focus-offset: 2px;
-  --font-primary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
+  --font-primary: "GT Walsheim Pro", "Arial Black", Arial, Helvetica, sans-serif;
   --font-secondary: "GT Walsheim Pro", Arial, Helvetica, sans-serif;
-  --font-serif: "Archer", Georgia, "Times New Roman", serif;
-  --page-max: 1180px;
+  --font-serif: "Archer", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif;
+  --page-max: 1480px;
   --header-h: 70px;
   --subnav-h: 58px;
   --step0: 1rem;
@@ -82,8 +89,8 @@
 .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-brown: hsl(27, 58%, 10%);
+  --bg-magenta: hsl(324, 85%, 10%);
   --bg-black: hsl(0, 0%, 0%);
   --text-black: hsl(0, 0%, 92%);
   --text-muted1: hsl(0, 0%, 62%);
@@ -105,7 +112,7 @@
   --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);
+  --focus-color: var(--JELINEK-BLACK);
   --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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jelinek/ui",
-  "version": "0.5.3",
+  "version": "0.9.1",
   "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
   "license": "UNLICENSED",
   "type": "module",
@@ -34,7 +34,11 @@
     "./theme.css": "./dist/theme/tokens.css",
     "./extras.css": "./dist/theme/extras.css",
     "./base.css": "./dist/theme/base.css",
-    "./fonts.css": "./dist/theme/fonts.css"
+    "./fonts.css": "./dist/theme/fonts.css",
+    "./money": {
+      "types": "./dist/components/commerce/money.d.ts",
+      "default": "./dist/components/commerce/money.js"
+    }
   },
   "scripts": {
     "dev": "vite dev",