@jelinek/ui 0.5.2 → 0.9.0

package/dist/components/commerce/toast.js

@@ -0,0 +1,44 @@
+class ToastStore {
+    #items = [];
+    #timers = new Map();
+    #listeners = new Set();
+    /** Plain snapshot, not reactive — re-reading this getter after a mutation sees the update, but
+     *  nothing re-renders automatically outside a `subscribe()` listener (see below). */
+    get items() {
+        return this.#items;
+    }
+    /** Show a toast. Passing an `id` that's already showing replaces its message and resets its timer. */
+    show(message, opts = {}) {
+        const id = opts.id ?? crypto.randomUUID();
+        const existing = this.#timers.get(id);
+        if (existing)
+            clearTimeout(existing);
+        this.#items = [...this.#items.filter((t) => t.id !== id), { id, message }];
+        this.#notify();
+        this.#timers.set(id, setTimeout(() => this.dismiss(id), opts.duration ?? 3000));
+    }
+    dismiss(id) {
+        const existing = this.#timers.get(id);
+        if (existing)
+            clearTimeout(existing);
+        this.#items = this.#items.filter((t) => t.id !== id);
+        this.#timers.delete(id);
+        this.#notify();
+    }
+    /**
+     * For Toaster.svelte to mirror `items` into its own reactive state. Returns an unsubscribe fn.
+     * Note: `items` is a plain getter, not a Svelte rune — it is NOT reactive outside a subscriber.
+     * Reading `toasts.items` directly from a component template will not update on show/dismiss;
+     * either call `subscribe()` yourself or route the UI through `<Toaster />`.
+     */
+    subscribe(listener) {
+        this.#listeners.add(listener);
+        listener(this.#items);
+        return () => this.#listeners.delete(listener);
+    }
+    #notify() {
+        for (const listener of this.#listeners)
+            listener(this.#items);
+    }
+}
+export const toasts = new ToastStore();

package/dist/index.d.ts

@@ -1,33 +1,57 @@
 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 { type CartLine } 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 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 Eyebrow } from './components/Eyebrow.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 Modal } from './components/commerce/Modal.svelte';
 export { isActive, type NavItem, type NavGroup } 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 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, type RadioContext } from './components/radio-context.js';
 export { default as RadioGroup } from './components/RadioGroup.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 Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
@@ -36,4 +60,7 @@ export { default as Tag } from './components/Tag.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, type ToastItem } 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/index.js

@@ -1,33 +1,57 @@
 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 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 Eyebrow } from './components/Eyebrow.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 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 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 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 Tab } from './components/Tab.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
@@ -36,4 +60,7 @@ export { default as Tag } from './components/Tag.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

@@ -404,21 +404,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 +442,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,21 @@
 /* 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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jelinek/ui",
-  "version": "0.5.2",
+  "version": "0.9.0",
   "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",