@jelinek/ui 0.4.0 → 0.5.0

package/dist/components/OptionTile.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Color = 'brown' | 'magenta';
+
+	interface Props {
+		label: string;
+		selected?: boolean;
+		disabled?: boolean;
+		/** Short text shown over the disabled tile explaining WHY it cannot be
+		 * picked ("Nelze kombinovat s výškou Komfort"). A disabled option with
+		 * no reason reads as broken, not constrained. */
+		disabledNote?: string;
+		/** Accent of the selected border and the meter fill — same division
+		 * pair as Tile. The utilities resolve through --JELINEK-BROWN /
+		 * --JELINEK-MAGENTA, so an app remapping those per division section
+		 * re-colours selected tiles without touching this prop. */
+		color?: Color;
+		/** Photo header (a fabric, a wood finish). Aspect 4:3, top corners
+		 * follow the tile radius. */
+		image?: string;
+		/** Empty by default — the label below already names the option. */
+		imageAlt?: string;
+		/** CSS colour for a swatch-strip header (a lacquer tone, a weight
+		 * category band) — the no-photograph alternative to `image`. */
+		swatch?: string;
+		/** Text centred on the swatch strip (matrace-fe's weight label). */
+		swatchLabel?: string;
+		/** PRE-FORMATTED price delta ("+1 670 Kč"). A string on purpose: money
+		 * formatting is the app's business (locale, currency, sign), not this
+		 * kit's — passing a number here would force one formatter on every
+		 * consumer. Rendered in the accent colour beside the label; wraps to
+		 * its own right-aligned line on narrow tiles instead of overflowing. */
+		price?: string;
+		/** Pre-formatted crossed-out price above `price` (a running discount). */
+		oldPrice?: string;
+		description?: string;
+		/** A small labelled level meter (matrace-fe's "Tuhost"): `value` of
+		 * `max` bars filled with the accent colour. */
+		meter?: { label: string; value: number; max?: number };
+		/** A Tag ("Novinka", "Volitelné"). Over an image header it floats
+		 * top-left on the photo; on a tile with no media it renders at the
+		 * top of the body, above the label row. */
+		badge?: Snippet;
+		onselect?: () => void;
+		/** Extra content at the body's end. Anything interactive inside must
+		 * carry `data-stop-card-select` so its clicks don't also select the
+		 * tile. */
+		children?: Snippet;
+		class?: string;
+	}
+
+	let {
+		label,
+		selected = false,
+		disabled = false,
+		disabledNote,
+		color = 'brown',
+		image,
+		imageAlt = '',
+		swatch,
+		swatchLabel,
+		price,
+		oldPrice,
+		description,
+		meter,
+		badge,
+		onselect,
+		children,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLButtonAttributes, 'disabled'> = $props();
+
+	function handleClick(event: MouseEvent) {
+		if (disabled) return;
+		if ((event.target as HTMLElement).closest('[data-stop-card-select]')) return;
+		onselect?.();
+	}
+
+	// A selectable option in a configurator — Tile's form-control sibling,
+	// first built twice over (matrace-fe's OptionCard, then the e-shop's) and
+	// promoted here so the third app doesn't roll a fourth copy. The guide has
+	// no .option-tile rule; the geometry is Tile's (rounded-card, the
+	// border-subtle resting frame), the selected state is the division-accent
+	// border the e-shop shipped, and — unlike Tile — there is NO hover lift:
+	// this is a form control, and its feedback is the border, not motion.
+	//
+	// A real <button aria-pressed>, not a clickable <div>: keyboard and screen
+	// readers get the option for free (matrace-fe's div needed two a11y-lint
+	// waivers; this needs none).
+	const SELECTED: Record<Color, string> = {
+		brown: 'border-jelinek-brown shadow-resting',
+		magenta: 'border-jelinek-magenta shadow-resting'
+	};
+	const HOVER: Record<Color, string> = {
+		brown: 'hover:border-jelinek-brown-highlight',
+		magenta: 'hover:border-jelinek-magenta-highlight'
+	};
+	const METER_FILL: Record<Color, string> = {
+		brown: 'bg-jelinek-brown',
+		magenta: 'bg-jelinek-magenta'
+	};
+	const PRICE_TEXT: Record<Color, string> = {
+		brown: 'text-jelinek-brown',
+		magenta: 'text-jelinek-magenta'
+	};
+
+	const BASE =
+		'w-full cursor-pointer rounded-card border-2 bg-surface text-left ' +
+		'font-secondary font-light text-fg ' +
+		'transition-[border-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease)]';
+
+	const classes = $derived(
+		cn(
+			BASE,
+			selected ? SELECTED[color] : cn('border-border-subtle', HOVER[color]),
+			disabled && 'pointer-events-none opacity-60',
+			className
+		)
+	);
+
+	const meterMax = $derived(meter?.max ?? 5);
+</script>
+
+<div class="relative">
+	<button type="button" onclick={handleClick} aria-pressed={selected} {disabled} {...rest} class={classes}>
+		{#if image}
+			<div class="relative">
+				<img
+					src={image}
+					alt={imageAlt}
+					loading="lazy"
+					class="aspect-[4/3] w-full rounded-t-[calc(var(--radius-card)-2px)] object-cover"
+				/>
+				{#if badge}<div class="absolute top-2 left-2">{@render badge()}</div>{/if}
+			</div>
+		{:else if swatch}
+			<div
+				class="flex aspect-[4/1] w-full items-center justify-center rounded-t-[calc(var(--radius-card)-2px)]"
+				style="background:{swatch}"
+			>
+				{#if swatchLabel}
+					<!-- Literal white + a soft shadow: the swatch is an arbitrary
+					     consumer colour, so no theme token can promise contrast. -->
+					<span class="font-semibold text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]"
+						>{swatchLabel}</span
+					>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="flex flex-col gap-1 p-4">
+			{#if badge && !image && !swatch}<div>{@render badge()}</div>{/if}
+			<!-- flex-wrap + ml-auto: the price is one unbreakable chunk (nbsp
+			     grouping); on a narrow tile it drops to its own right-aligned
+			     line instead of overflowing the border. -->
+			<div class="flex flex-wrap items-baseline justify-between gap-x-2">
+				<span class="font-bold">{label}</span>
+				{#if price || oldPrice}
+					<span class="ml-auto flex flex-col items-end">
+						{#if oldPrice}<span class="text-step-down2 text-fg-muted2 line-through"
+								>{oldPrice}</span
+							>{/if}
+						{#if price}<span
+								class={cn('text-step-down1 font-medium whitespace-nowrap', PRICE_TEXT[color])}
+								>{price}</span
+							>{/if}
+					</span>
+				{/if}
+			</div>
+			{#if description}<p class="text-step-down1 text-fg-muted1 m-0">{description}</p>{/if}
+			{#if meter}
+				<div class="mt-1 flex items-center gap-2">
+					<span class="text-step-down2 text-fg-muted2 font-medium tracking-wide uppercase"
+						>{meter.label}</span
+					>
+					<div class="flex gap-[3px]" role="img" aria-label={`${meter.label}: ${meter.value} z ${meterMax}`}>
+						{#each Array(meterMax) as _, i (i)}
+							<div
+								class={cn(
+									'h-1 w-3 rounded-[2px]',
+									i < meter.value ? METER_FILL[color] : 'bg-border-subtle'
+								)}
+							></div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+			{#if children}<div class="mt-1">{@render children()}</div>{/if}
+		</div>
+	</button>
+	{#if disabled && disabledNote}
+		<div
+			class="rounded-card text-step-down1 absolute inset-0 grid place-items-center bg-[var(--glass-fill)] p-4 text-center font-medium backdrop-blur-sm"
+		>
+			{disabledNote}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,57 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Color = 'brown' | 'magenta';
+interface Props {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Short text shown over the disabled tile explaining WHY it cannot be
+     * picked ("Nelze kombinovat s výškou Komfort"). A disabled option with
+     * no reason reads as broken, not constrained. */
+    disabledNote?: string;
+    /** Accent of the selected border and the meter fill — same division
+     * pair as Tile. The utilities resolve through --JELINEK-BROWN /
+     * --JELINEK-MAGENTA, so an app remapping those per division section
+     * re-colours selected tiles without touching this prop. */
+    color?: Color;
+    /** Photo header (a fabric, a wood finish). Aspect 4:3, top corners
+     * follow the tile radius. */
+    image?: string;
+    /** Empty by default — the label below already names the option. */
+    imageAlt?: string;
+    /** CSS colour for a swatch-strip header (a lacquer tone, a weight
+     * category band) — the no-photograph alternative to `image`. */
+    swatch?: string;
+    /** Text centred on the swatch strip (matrace-fe's weight label). */
+    swatchLabel?: string;
+    /** PRE-FORMATTED price delta ("+1 670 Kč"). A string on purpose: money
+     * formatting is the app's business (locale, currency, sign), not this
+     * kit's — passing a number here would force one formatter on every
+     * consumer. Rendered in the accent colour beside the label; wraps to
+     * its own right-aligned line on narrow tiles instead of overflowing. */
+    price?: string;
+    /** Pre-formatted crossed-out price above `price` (a running discount). */
+    oldPrice?: string;
+    description?: string;
+    /** A small labelled level meter (matrace-fe's "Tuhost"): `value` of
+     * `max` bars filled with the accent colour. */
+    meter?: {
+        label: string;
+        value: number;
+        max?: number;
+    };
+    /** A Tag ("Novinka", "Volitelné"). Over an image header it floats
+     * top-left on the photo; on a tile with no media it renders at the
+     * top of the body, above the label row. */
+    badge?: Snippet;
+    onselect?: () => void;
+    /** Extra content at the body's end. Anything interactive inside must
+     * carry `data-stop-card-select` so its clicks don't also select the
+     * tile. */
+    children?: Snippet;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLButtonAttributes, 'disabled'>;
+declare const OptionTile: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptionTile = ReturnType<typeof OptionTile>;
+export default OptionTile;

package/dist/components/PhotoTile.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../utils/cn.js';
+
+	type Level = 'h2' | 'h3';
+
+	interface Props {
+		/** With `href` the tile is a link; without it an inert block — same
+		 * contract as Tile, and the same reasoning: an unlinked tile has
+		 * nowhere to go, so it should not be keyboard-reachable either. */
+		href?: string;
+		/** The photograph filling the tile. */
+		image: string;
+		/** Empty by default: the visible title already names the destination,
+		 * so the image is decorative unless a consumer says otherwise. */
+		imageAlt?: string;
+		title: string;
+		description?: string;
+		/** Heading tag for the title. `h3` matches Tile's own convention; an
+		 * app using photo tiles as top-level section links (the e-shop's two
+		 * division tiles) passes `h2`. */
+		level?: Level;
+		/** Passed straight to the <img>. Photo tiles usually sit below the
+		 * fold, so lazy is the right default; a consumer rendering one above
+		 * the fold passes `eager`. */
+		loading?: 'lazy' | 'eager';
+		class?: string;
+		/** Extra content under the description — a Tag, a small CTA line. */
+		children?: Snippet;
+	}
+
+	let {
+		href,
+		image,
+		imageAlt = '',
+		title,
+		description,
+		level = 'h3',
+		loading = 'lazy',
+		class: className,
+		children,
+		...rest
+	}: Props & Omit<HTMLAnchorAttributes & HTMLAttributes<HTMLDivElement>, 'href' | 'title'> =
+		$props();
+
+	// A photo tile is Tile's full-bleed photographic sibling — first built in
+	// the e-shop storefront (its home-page division tiles), promoted here so
+	// consumers stop hand-rolling it. The guide itself has no .photo-tile
+	// rule; every value below is either a shared token the guide's own
+	// surfaces use, or is forced by the photograph:
+	//
+	// - Geometry/motion are Tile's: rounded-section (a full-bleed photo card
+	//   is section-scale, not card-scale), shadow-resting → shadow-interactive
+	//   with the 2px hover lift, both on the guide's own
+	//   box-shadow/transform transition pair (jelinek.css:924 — see Tile for
+	//   why transition-all is wrong here).
+	// - `no-underline`: base.css underlines every anchor on hover; on a tile
+	//   that underline bleeds onto the caption text (the exact defect the
+	//   e-shop shipped with).
+	// - The scrim and the text are LITERAL black/white, not theme tokens, on
+	//   purpose: they sit on a photograph, which does not re-theme.
+	//   --JELINEK-WHITE inverts to hsl(0,0%,0%) in dark mode (tokens.css:96)
+	//   — white-on-scrim text routed through it would go invisible on its own
+	//   photo, the same trap SiteFooter documents for its logo.
+	const BASE =
+		'group relative flex flex-col justify-end overflow-hidden aspect-[4/3] ' +
+		'rounded-section shadow-resting no-underline ' +
+		'transition-[box-shadow,transform] duration-[var(--dur-base)] ease-[var(--ease)] ' +
+		'hover:-translate-y-0.5 hover:shadow-interactive ' +
+		'dark:shadow-[var(--shadow-resting),inset_0_2px_1px_-1px_var(--box-primary)] ' +
+		'dark:hover:shadow-[var(--shadow-interactive),inset_0_2px_1px_-1px_var(--box-primary)]';
+
+	// The photo zooms slowly under the pointer while the tile itself lifts on
+	// --dur-base — two speeds on purpose: the lift is feedback ("this is a
+	// control"), the zoom is atmosphere. 700ms is deliberate and NOT a --dur
+	// token: the scale is 8× the size of the 2px lift, and at --dur-slow
+	// (0.2s) it reads as a twitch, not a drift.
+	const IMG =
+		'absolute inset-0 h-full w-full object-cover ' +
+		'transition-transform duration-700 ease-[var(--ease)] group-hover:scale-105';
+
+	// Bottom-weighted scrim so white text passes contrast over any photo —
+	// strongest where the text sits, gone by mid-frame so the photo stays a
+	// photo.
+	const SCRIM = 'absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent';
+
+	const TEXT = 'relative p-6 sm:p-8';
+	const TITLE = 'font-primary text-step3 mb-1 font-bold text-white';
+	const DESC = 'text-step0 m-0 max-w-xs text-white/90';
+
+	const classes = $derived(cn(BASE, href && 'cursor-pointer', className));
+</script>
+
+{#snippet content()}
+	<img src={image} alt={imageAlt} {loading} class={IMG} />
+	<div class={SCRIM}></div>
+	<div class={TEXT}>
+		<svelte:element this={level} class={TITLE}>{title}</svelte:element>
+		{#if description}<p class={DESC}>{description}</p>{/if}
+		{#if children}{@render children()}{/if}
+	</div>
+{/snippet}
+
+{#if href}
+	<a {...rest} {href} class={classes}>{@render content()}</a>
+{:else}
+	<div {...rest} class={classes}>{@render content()}</div>
+{/if}

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
+type Level = 'h2' | 'h3';
+interface Props {
+    /** With `href` the tile is a link; without it an inert block — same
+     * contract as Tile, and the same reasoning: an unlinked tile has
+     * nowhere to go, so it should not be keyboard-reachable either. */
+    href?: string;
+    /** The photograph filling the tile. */
+    image: string;
+    /** Empty by default: the visible title already names the destination,
+     * so the image is decorative unless a consumer says otherwise. */
+    imageAlt?: string;
+    title: string;
+    description?: string;
+    /** Heading tag for the title. `h3` matches Tile's own convention; an
+     * app using photo tiles as top-level section links (the e-shop's two
+     * division tiles) passes `h2`. */
+    level?: Level;
+    /** Passed straight to the <img>. Photo tiles usually sit below the
+     * fold, so lazy is the right default; a consumer rendering one above
+     * the fold passes `eager`. */
+    loading?: 'lazy' | 'eager';
+    class?: string;
+    /** Extra content under the description — a Tag, a small CTA line. */
+    children?: Snippet;
+}
+type $$ComponentProps = Props & Omit<HTMLAnchorAttributes & HTMLAttributes<HTMLDivElement>, 'href' | 'title'>;
+declare const PhotoTile: import("svelte").Component<$$ComponentProps, {}, "">;
+type PhotoTile = ReturnType<typeof PhotoTile>;
+export default PhotoTile;

package/dist/components/SiteFooter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/cn.js';
 
@@ -8,6 +9,16 @@
 		slogan?: string;
 		meta?: string;
 		stamp?: string;
+		/**
+		 * Consumer content rendered inside the footer's black chrome, ABOVE the
+		 * brand row (an e-shop's link columns, a newsletter box). The guide's
+		 * own footer is the brand row alone, so this stays unset there and the
+		 * markup is unchanged; an app footer is usually more than one strip,
+		 * and without this slot it would have to stack its own black block on
+		 * top of this one — two rounded-top black boxes with a seam between
+		 * them. Same consumer-seam reasoning as SiteHeader's `barActions`.
+		 */
+		children?: Snippet;
 		/**
 		 * Task 45 — HTML of the changelog shown in a floating <dialog> when the
 		 * reader clicks the deploy stamp. The showcase passes the build-time
@@ -26,6 +37,7 @@
 		meta,
 		stamp,
 		changelog,
+		children,
 		class: className,
 		...rest
 	}: Props & HTMLAttributes<HTMLElement> = $props();
@@ -84,6 +96,15 @@
 </script>
 
 <footer {...rest} class={cn(BASE, className)}>
+	{#if children}
+		<!-- Consumer strip(s) above the brand row — see the `children` prop doc.
+		     The divider separates it from the brand row the same way an app
+		     would otherwise draw its own seam; the brand row below keeps its
+		     guide geometry untouched. -->
+		<div class="border-b border-white/15">
+			{@render children()}
+		</div>
+	{/if}
 	<div class="mx-auto flex max-w-page flex-wrap items-center gap-6 px-6 py-10">
 		{#if logo}
 			<!-- jelinek.css:767 — 52px square, 12px radius. Neither value is on

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

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props {
     logo?: string;
@@ -5,6 +6,16 @@ interface Props {
     slogan?: string;
     meta?: string;
     stamp?: string;
+    /**
+     * Consumer content rendered inside the footer's black chrome, ABOVE the
+     * brand row (an e-shop's link columns, a newsletter box). The guide's
+     * own footer is the brand row alone, so this stays unset there and the
+     * markup is unchanged; an app footer is usually more than one strip,
+     * and without this slot it would have to stack its own black block on
+     * top of this one — two rounded-top black boxes with a seam between
+     * them. Same consumer-seam reasoning as SiteHeader's `barActions`.
+     */
+    children?: Snippet;
     /**
      * Task 45 — HTML of the changelog shown in a floating <dialog> when the
      * reader clicks the deploy stamp. The showcase passes the build-time

package/dist/index.d.ts

@@ -15,9 +15,11 @@ 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 { isActive, type NavItem, type NavGroup } from './components/nav.js';
+export { default as OptionTile } from './components/OptionTile.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 ProductCard } from './components/ProductCard.svelte';
 export { default as Radio } from './components/Radio.svelte';
 export { RADIO_CONTEXT, type RadioContext } from './components/radio-context.js';

package/dist/index.js

@@ -15,9 +15,11 @@ 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 { isActive } from './components/nav.js';
+export { default as OptionTile } from './components/OptionTile.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 ProductCard } from './components/ProductCard.svelte';
 export { default as Radio } from './components/Radio.svelte';
 export { RADIO_CONTEXT } from './components/radio-context.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jelinek/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
   "license": "UNLICENSED",
   "type": "module",