@jelinek/ui 0.9.0 → 0.9.2

package/dist/components/commerce/SearchField.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/cn.js';
+
+	interface Props {
+		value?: string;
+		/** Popisek pro čtečky (pole nemá viditelný label). */
+		label?: string;
+		placeholder?: string;
+		/** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+		onsearch?: (query: string) => void;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		label = 'Hledat',
+		placeholder = 'Hledat…',
+		onsearch,
+		disabled = false,
+		class: className,
+		...rest
+	}: Props & Omit<HTMLInputAttributes, 'value'> = $props();
+
+	// Field chrome is TextField's BASE verbatim (border-fg-muted2, 11px/14px
+	// padding, 0.98rem, tokenised focus ring — see TextField.svelte for the
+	// full provenance notes), with left padding widened for the magnifier and
+	// right padding for the clear button. type="search" is NOT used: WebKit
+	// draws its own clear control there, which would double up with ours.
+	const FIELD =
+		'w-full rounded-button border border-fg-muted2 bg-surface py-[11px] pr-11 pl-11 ' +
+		'font-secondary font-light text-[0.98rem] text-fg placeholder:text-fg-muted2 ' +
+		'focus:outline-[length:var(--focus-width)] focus:outline-offset-1 ' +
+		'focus:outline-[var(--focus-color)] focus:border-[var(--focus-color)]';
+	const DISABLED =
+		'cursor-not-allowed border-border-subtle bg-surface-gray text-fg-muted2 ' +
+		'placeholder:text-fg-muted2';
+</script>
+
+<!-- role="search" comes with the <search>/form pattern: submit = Enter, which
+     is how people actually search. The magnifier is decorative (the field's
+     accessible name carries the meaning), the clear button is a real button. -->
+<form
+	role="search"
+	class={cn('relative', className)}
+	onsubmit={(e) => {
+		e.preventDefault();
+		onsearch?.(value);
+	}}
+>
+	<svg
+		viewBox="0 0 24 24"
+		class="pointer-events-none absolute top-1/2 left-3.5 size-5 -translate-y-1/2 text-fg-muted1"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		aria-hidden="true"
+	>
+		<circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
+	</svg>
+	<input
+		{...rest}
+		type="text"
+		aria-label={label}
+		{placeholder}
+		{disabled}
+		bind:value
+		class={cn(FIELD, disabled && DISABLED)}
+	/>
+	{#if value && !disabled}
+		<button
+			type="button"
+			aria-label="Vymazat hledání"
+			class="absolute top-1/2 right-2 inline-flex size-8 -translate-y-1/2 cursor-pointer
+				items-center justify-center rounded-button text-fg-muted1 transition-colors
+				duration-[var(--dur-base)] ease-[var(--ease)] hover:text-fg"
+			onclick={() => (value = '')}
+		>
+			<svg
+				viewBox="0 0 24 24"
+				class="size-4"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg
+			>
+		</button>
+	{/if}
+</form>

package/dist/components/commerce/SearchField.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    value?: string;
+    /** Popisek pro čtečky (pole nemá viditelný label). */
+    label?: string;
+    placeholder?: string;
+    /** Zavolá se při odeslání (Enter) s aktuálním dotazem. */
+    onsearch?: (query: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+type $$ComponentProps = Props & Omit<HTMLInputAttributes, 'value'>;
+declare const SearchField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SearchField = ReturnType<typeof SearchField>;
+export default SearchField;

package/dist/components/commerce/SideToggle.svelte

@@ -27,7 +27,7 @@
 
 <button
 	type="button"
-	class="rounded-card cursor-pointer border px-3 py-2.5 text-left transition-all duration-200 max-sm:px-2 max-sm:py-2 {active
+	class="rounded-card cursor-pointer border px-3 py-2.5 text-left font-secondary font-light transition-all duration-200 max-sm:px-2 max-sm:py-2 {active
 		? 'border-(--JELINEK-BROWN) bg-surface-gray shadow-resting'
 		: 'border-border-subtle bg-surface hover:border-(--text-muted2)'}"
 	aria-pressed={active}

package/dist/components/commerce/Skeleton.svelte

@@ -7,4 +7,7 @@
 	let { class: className = '' }: Props = $props();
 </script>
 
-<div class="animate-pulse rounded-card bg-surface-gray {className}" aria-hidden="true"></div>
+<!-- Shimmer místo pulzu (majitel, 14. 8. 2026) — projíždějící gradient,
+     definovaný v theme/extras.css (.skeleton-shimmer); tam je i klidová
+     varianta pro prefers-reduced-motion. -->
+<div class="skeleton-shimmer rounded-card {className}" aria-hidden="true"></div>

package/dist/components/commerce/StickyBar.svelte

@@ -9,8 +9,8 @@
 	let { visible, children }: Props = $props();
 </script>
 
-<!-- Glass strip under the kit's floating header card. z-40 keeps it BELOW the
-     header (SiteHeader is z-50) — any higher and the strip renders over the
+<!-- Glass strip under the kit's floating header card. --z-bar (40) keeps it
+     BELOW the header (--z-header, 50) — any higher and the strip renders over the
      card and its backdrop blur smears the whole top of the page. Top offset:
      var(--header-h) from 640px up so the strip hangs under the fixed card;
      top-0 on a phone, where the kit bar is absolute and has already scrolled
@@ -18,10 +18,10 @@
      left the viewport). -->
 <div
 	aria-hidden={!visible}
-	class="fixed inset-x-0 top-0 z-40 border-b border-(--glass-border) bg-(--glass-fill) backdrop-blur-[25px] backdrop-saturate-140 transition-transform duration-(--dur-base) min-[640px]:top-(--header-h)
+	class="fixed inset-x-0 top-0 z-(--z-bar) border-b border-(--glass-border) bg-(--glass-fill) backdrop-blur-[25px] backdrop-saturate-140 transition-transform duration-(--dur-base) min-[640px]:top-(--header-h)
 		{visible ? 'translate-y-0' : 'pointer-events-none -translate-y-[calc(100%+var(--header-h))]'}"
 >
-	<div class="max-w-page mx-auto flex w-full items-center gap-4 px-6 py-3">
+	<div class="max-w-page mx-auto flex w-full items-center gap-4 px-6 py-3 font-secondary font-light">
 		{@render children()}
 	</div>
 </div>

package/dist/components/commerce/StockBadge.svelte

@@ -33,12 +33,12 @@
 </script>
 
 {#if compact}
-	<span class="inline-flex items-center gap-1.5 text-(length:--step-down1) font-medium {config.cls}">
+	<span class="inline-flex items-center gap-1.5 font-secondary text-(length:--step-down1) font-medium {config.cls}">
 		<span class="size-2 rounded-pill {config.dot}"></span>{text}
 	</span>
 {:else}
 	<span
-		class="rounded-pill bg-surface-gray inline-flex items-center gap-2 px-3 py-1 text-(length:--step-down1) font-medium {config.cls}"
+		class="rounded-pill bg-surface-gray inline-flex items-center gap-2 px-3 py-1 font-secondary text-(length:--step-down1) font-medium {config.cls}"
 	>
 		<span class="size-2 rounded-pill {config.dot}"></span>{text}
 	</span>

package/dist/components/commerce/Toaster.svelte

@@ -17,16 +17,20 @@
 	onMount(() => toasts.subscribe((next) => (items = next)));
 </script>
 
-<!-- z-scale contract: header 1100, Drawer/Modal 1200+, search overlays 1400.
-     Toasts must clear all of it so an add-to-cart confirmation is never hidden
-     under a drawer/overlay — hence z-[1500]. -->
+<!-- Škála vrstev (jelinek.css :root): hlavička --z-header (50), Drawer/Modal
+     --z-overlay (1200), toasty nade vším — --z-toast (1500; potvrzení
+     o přidání do košíku nesmí zmizet pod drawerem). role="status"
+     + aria-live="polite": kontejner tu je trvale, takže čtečky ohlásí každý
+     toast, který do něj přibude — dřív byly hlášky pro čtečky němé (EAA). -->
 <div
-	class="pointer-events-none fixed inset-x-0 bottom-6 z-[1500] flex flex-col items-center gap-2 {className}"
+	role="status"
+	aria-live="polite"
+	class="pointer-events-none fixed inset-x-0 bottom-6 z-(--z-toast) flex flex-col items-center gap-2 {className}"
 >
 	{#each items as t (t.id)}
 		<div
 			transition:fly={{ y: 16, duration: 200 }}
-			class="rounded-pill text-fg-inverse shadow-interactive pointer-events-auto bg-(--bg-black) px-5 py-2.5 text-(length:--step-down1) font-medium"
+			class="rounded-pill text-fg-inverse shadow-interactive pointer-events-auto bg-(--bg-black) px-5 py-2.5 font-secondary text-(length:--step-down1) font-medium"
 		>
 			{t.message}
 		</div>

package/dist/components/commerce/TrustBadges.svelte

@@ -17,7 +17,7 @@
 <div class={overlay ? 'absolute inset-x-3 bottom-3 flex flex-wrap gap-2' : 'flex flex-wrap gap-2'}>
 	{#each items as item (item.label)}
 		<span
-			class="rounded-pill flex items-center gap-1.5 bg-(--glass-fill) px-3 py-1.5 text-(length:--step-down2) font-medium backdrop-blur-[25px]"
+			class="rounded-pill flex items-center gap-1.5 bg-(--glass-fill) px-3 py-1.5 font-secondary text-(length:--step-down2) font-medium backdrop-blur-[25px]"
 		>
 			<item.icon class="size-3.5" />
 			{item.label}

package/dist/components/commerce/overlay.d.ts

@@ -10,3 +10,17 @@ export declare function portal(node: HTMLElement): {
 };
 /** Lock body scroll; returns the unlock function (for use inside $effect). */
 export declare function lockScroll(): () => void;
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export declare function rememberFocus(): () => void;

package/dist/components/commerce/overlay.js

@@ -18,3 +18,52 @@ export function lockScroll() {
         document.body.style.overflow = prev;
     };
 }
+// Co se v překryvu dá zaostřit tabulátorem. Bez filtru viditelnosti —
+// otevřený overlay svůj obsah zobrazuje celý a jsdom (unit testy)
+// offsetParent nezná.
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), ' +
+    'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Past na fokus (zákonná přístupnost překryvů — EAA): Tab a Shift+Tab
+ * cyklí UVNITŘ containeru, do stránky pod overlayem se tabulátorem nedá
+ * vyjet. Myš ani Escape to nijak neomezuje. Vrací úklidovou funkci
+ * (pro $effect), stejná smlouva jako lockScroll().
+ */
+export function trapFocus(container) {
+    const onKey = (e) => {
+        if (e.key !== 'Tab')
+            return;
+        const items = Array.from(container.querySelectorAll(FOCUSABLE));
+        if (items.length === 0) {
+            e.preventDefault();
+            container.focus();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey && (active === first || active === container)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    container.addEventListener('keydown', onKey);
+    return () => container.removeEventListener('keydown', onKey);
+}
+/**
+ * Zapamatuje si prvek zaostřený PŘED otevřením overlaye a vrátí funkci,
+ * která na něj fokus vrátí (pokud mezitím nezmizel ze stránky). Čtenář
+ * s klávesnicí tak po zavření pokračuje přesně tam, kde byl — typicky
+ * na tlačítku, kterým overlay otevřel.
+ */
+export function rememberFocus() {
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    return () => {
+        if (opener && document.contains(opener))
+            opener.focus();
+    };
+}

package/dist/components/info-bar.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Typy a pomocné funkce informační lišty (InfoBar.svelte) — v samostatném
+ * souboru, aby komponenta měla jediný <script> s `interface Props` (tak ji
+ * čte generátor API v routes/api/props.ts).
+ */
+/** Barvy lišty — plné plochy značky a světlá pozadí (majitel, 4. 9. 2026). */
+export type InfoBarColor = 'black' | 'brown' | 'magenta' | 'gray' | 'beige' | 'pink';
+export interface InfoBarItem {
+    /** Stálý identifikátor sdělení — podle něj si web pamatuje zavření. */
+    id: string;
+    text: string;
+    /** Tučný titulek nad textem (lišta pak má dva řádky). */
+    title?: string;
+    /** Tlačítko vpravo (např. „Naše služby“) — neutrální černé podle Tlačítek. */
+    href?: string;
+    linkLabel?: string;
+    /** Ikona ze sady rozhraní (/ui/ikony), jméno souboru bez .svg. */
+    icon?: string;
+    color?: InfoBarColor;
+    /** Zobrazovat od / do — datum s časem (`2026-12-20T00:00`), místní čas. */
+    from?: string | Date;
+    to?: string | Date;
+}
+export declare const INFO_BAR_COLORS: Record<InfoBarColor, string>;
+/** Je sdělení v čase `now` v platném okně? */
+export declare function isActive(item: InfoBarItem, now: Date): boolean;

package/dist/components/info-bar.js

@@ -0,0 +1,23 @@
+/**
+ * Typy a pomocné funkce informační lišty (InfoBar.svelte) — v samostatném
+ * souboru, aby komponenta měla jediný <script> s `interface Props` (tak ji
+ * čte generátor API v routes/api/props.ts).
+ */
+export const INFO_BAR_COLORS = {
+    // Černá lišta = tmavá plocha: pozadí --bg-black (v obou režimech černé) a
+    // lokální přemapování neutrálních tokenů na hodnoty tmavého režimu
+    // (tokens.css, stejná technika jako .demo--black), aby černé tlačítko
+    // a černý focus ring uvnitř zůstaly vidět a měly hover podle pravidel.
+    black: 'bg-surface-black text-fg-inverse [--JELINEK-BLACK:hsl(0,0%,95%)] [--JELINEK-BLACK-HIGHLIGHT:hsl(0,0%,60%)] [--ON-JELINEK-BLACK:hsl(0,0%,5%)]',
+    brown: 'bg-jelinek-brown text-white',
+    magenta: 'bg-jelinek-magenta text-white',
+    gray: 'bg-surface-gray text-fg',
+    beige: 'bg-surface-brown text-fg',
+    pink: 'bg-surface-magenta text-fg'
+};
+/** Je sdělení v čase `now` v platném okně? */
+export function isActive(item, now) {
+    const from = item.from ? new Date(item.from) : null;
+    const to = item.to ? new Date(item.to) : null;
+    return (!from || now >= from) && (!to || now <= to);
+}

package/dist/icons/material-icons.generated.d.ts

@@ -0,0 +1,4 @@
+/** Všechny ikony sady (Google icons + vlastní), jméno souboru → inline SVG. */
+export declare const MATERIAL_ICONS: Record<string, string>;
+/** Jména vlastních dokreslených ikon (podsložka vlastni/). */
+export declare const CUSTOM_ICON_NAMES: string[];