@jelinek/ui 0.4.1 → 0.5.1

package/README.md

@@ -464,24 +464,48 @@ cascade that `pnpm test`'s jsdom environment structurally cannot check
 The `publish` job is separate and gated on a tag matching `ui-v*` — it
 does not run on ordinary merges to `master`, only when someone pushes a
 `ui-v*` tag, and it also depends on `verify` passing first. It publishes
-to **npmjs.org with `--access public`**, authenticating with the
-`NPM_TOKEN` repo secret (a granular token for the `jelinek` npm org — a
-different namespace from the GitHub org, which is named
-`JELINEK-nabytek-a-matrace`). No provenance (`--provenance`) is
-generated: npm rejects it for builds from a private repository.
-
-**That job does not currently work, and 0.3.0 was released by hand.** npm
-requires a second factor for every publish, and a granular token only
-satisfies that if "Bypass two-factor authentication (2FA)" was ticked
-*when the token was created* — the setting cannot be added to an existing
-token, and npm is in the middle of restricting bypass tokens outright
-(account changes Aug 2026, direct publishing Jan 2027). Without it the
-registry answers a `PUT` with a misleading `E404 Not Found` in CI, and a
-clearer `E403 … Two-factor authentication or granular access token with
-bypass 2fa enabled is required` locally.
-
-So the working release procedure is manual, from a machine that can reach
-a browser:
+to **npmjs.org with `--access public`**.
+
+### Releasing
+
+1. Bump `version` in `svelte/package.json`, commit, push `master`.
+2. `git tag ui-v<version> && git push origin ui-v<version>`.
+3. `verify` runs, then `publish` — nothing else to do.
+
+The tag is what records which commit a version came from, so push it even
+if a release has to be finished by hand.
+
+### How the publish authenticates
+
+**Trusted publishing (GitHub Actions OIDC), no secret.** The job asks
+GitHub for an OIDC token and npm exchanges it for a short-lived publish
+credential. Registered on npmjs under the package's *Trusted publisher*:
+org `JELINEK-nabytek-a-matrace`, repo `brand-guide`, workflow filename
+`ui.yml`, environment left empty. All three are checked on every publish
+— **renaming `ui.yml`, or adding an `environment:` to the publish job,
+breaks releases** until the publisher entry is edited to match.
+
+Two consequences worth knowing:
+
+- The job runs `npm publish`, not `pnpm publish`. The OIDC exchange lives
+  in the npm CLI (11.5.1+, which the job installs explicitly); pnpm would
+  look for an auth token, find none, and fail.
+- Provenance stays off (`NPM_CONFIG_PROVENANCE=false`). npm can only
+  attest a build from a public repository and this one is private
+  (licensed fonts). Trusted publishing does not require provenance.
+
+There is no `NPM_TOKEN` secret any more. It never worked: npm requires a
+second factor for every publish, and a granular token only satisfies that
+if "Bypass two-factor authentication (2FA)" was ticked *when the token was
+created* — a setting that cannot be added afterwards, on a mechanism npm
+is retiring outright (account changes Aug 2026, direct publishing Jan
+2027). Without it the registry answered a `PUT` with a misleading `E404
+Not Found` in CI. 0.3.0 through 0.5.0 were released by hand because of it.
+
+### Fallback: publishing by hand
+
+If the job fails, the release is not stuck — publish from a machine that
+can reach a browser:
 
 ```
 cd svelte && npm publish --access public --auth-type=web
@@ -490,13 +514,7 @@ cd svelte && npm publish --access public --auth-type=web
 That prints a `npmjs.com/auth/cli/…` URL; approving it there with a
 passkey (or an authenticator app) completes the publish. `--otp=<code>`
 works too, but only with an authenticator app — a passkey produces no
-code. Push the `ui-v*` tag anyway: `verify` still gates the release, and
-the tag is what records which commit a version came from.
-
-Fixing CI means either a bypass-enabled token while npm still issues
-them, or trusted publishing via GitHub Actions OIDC — the latter is
-untested here and may be unavailable for the same reason provenance is,
-namely that this repo is private.
+code.
 
 ## Known design debt
 

package/dist/components/OptionTile.svelte

@@ -0,0 +1,206 @@
+<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.
+					     `font-bold`, not `font-semibold`: GT Walsheim Pro ships
+					     300/400/500/700/900 and no 600, so semibold silently
+					     renders as Medium 500 (e2e/font-faces.spec.ts caught it).
+					     `font-semibold` is only legal on the logo subtitle, which
+					     switches to Avenir Next, whose Demi *is* 600. -->
+					<span class="font-bold 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/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.1",
+  "version": "0.5.1",
   "description": "JELÍNEK Svelte 5 component kit, generated from the brand guide",
   "license": "UNLICENSED",
   "type": "module",