@marianmeres/stuic 3.167.0 → 3.169.0

package/AGENTS.md

@@ -23,10 +23,10 @@
 
 ```
 src/lib/
-├── components/     # 63 component directories
+├── components/     # 73 component directories
 ├── actions/        # 15 Svelte actions (use: directives)
 ├── attachments/    # Svelte attachments ({@attach} — preferred for new DOM helpers)
-├── utils/          # 44 utility modules
+├── utils/          # 45 utility modules
 ├── icons/          # Icon re-exports from @marianmeres/icons-fns
 ├── css/            # CSS-only presets (ratio-locked frame / letterbox)
 ├── index.css       # Centralized CSS imports
@@ -55,8 +55,8 @@ Theme CSS files are not bundled in this package — they're provided by `@marian
 6. Use `dark:` Tailwind prefix when CSS vars handle dark mode
 7. Import CSS inside components — centralize in `src/lib/index.css`
    (**exception:** subpath-export components with optional peer deps — `MarkdownEditor`,
-   `CommentInput` — import their own `index.css` locally so their styles don't ship to
-   barrel-only consumers. Enforced by `src/lib/barrel-optional-peers.test.ts`.)
+   `CommentInput`, `TrendChart` — import their own `index.css` locally so their styles
+   don't ship to barrel-only consumers. Enforced by `src/lib/barrel-optional-peers.test.ts`.)
 8. Declare component tokens at `:root` that reference shared structural tokens (use fallback pattern instead)
 
 ### CSS Variable Pattern
@@ -129,12 +129,12 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 63 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 73 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [CSS presets](./docs/domains/css-presets.md) — ratio-locked frame (letterbox), safe-area, scrollbar
 - [Actions](./docs/domains/actions.md) — 15 Svelte directives
 - [Attachments](./docs/domains/attachments.md) — `{@attach}` DOM helpers (preferred for new ones)
-- [Utils](./docs/domains/utils.md) — 44 utility modules
+- [Utils](./docs/domains/utils.md) — 45 utility modules
 
 ### Reference
 

package/dist/README.md

@@ -43,7 +43,7 @@ npm install @marianmeres/stuic
 - **FieldRadios** - Radio button group
 - **FieldFile** - File upload input
 - **FieldAssets** - Multi-file upload with preview
-- **FieldOptions** - Modal-based multi-select picker
+- **FieldOptions** - Modal-based multi-select picker (optional inline `chips` display)
 - **FieldKeyValues** - Key-value pairs editor with JSON serialization
 - **FieldSwitch** - Toggle switch within a form
 - **Fieldset** - Group of form fields with legend

package/dist/attachments/index.d.ts

@@ -1 +1,2 @@
 export * from "./auto-height.js";
+export * from "./long-press.js";

package/dist/attachments/index.js

@@ -1 +1,2 @@
 export * from "./auto-height.js";
+export * from "./long-press.js";

package/dist/attachments/long-press.d.ts

@@ -0,0 +1,43 @@
+import type { Attachment } from "svelte/attachments";
+export interface LongPressOptions {
+    /** Called when the press exceeds `duration` without moving beyond `moveTolerance`. */
+    onLongPress: (event: PointerEvent) => void;
+    /** How long (ms) the pointer must stay down before firing. Default 500. */
+    duration?: number;
+    /** Movement (px, straight-line) that cancels the pending press. Default 10. */
+    moveTolerance?: number;
+    /** Pointer types that can long-press. Default `["touch", "pen"]` (mouse has right-click). */
+    pointerTypes?: string[];
+    /**
+     * Swallow the `click` that some platforms fire when the finger lifts after a
+     * long-press, so it can't activate whatever sits under it (link, button) right
+     * after the long-press action ran. Default true.
+     */
+    suppressClick?: boolean;
+}
+/**
+ * Svelte attachment (factory) that detects a long-press on the host element and calls
+ * `onLongPress` with the initiating `pointerdown` event (its `clientX`/`clientY` is
+ * where the press happened).
+ *
+ * Semantics: only primary pointers of the configured `pointerTypes` arm the timer;
+ * lifting, cancellation (e.g. the platform turning the gesture into a scroll), or
+ * moving beyond `moveTolerance` disarms it. A native `contextmenu` event on the host
+ * (Android fires it on long-press by itself) also disarms, so a host that handles
+ * `contextmenu` never gets both paths for one gesture.
+ *
+ * The browser's own long-press behaviors are NOT prevented here — that is CSS the
+ * consumer owns: `-webkit-touch-callout: none` (iOS link/image callout) and
+ * `user-select: none` (text-selection long-press) on the host.
+ *
+ * @example
+ * ```svelte
+ * <div {@attach longPress({ onLongPress: (e) => openAt(e.clientX, e.clientY) })}>...</div>
+ * ```
+ *
+ * Conditional usage (a falsy value means "no attachment"):
+ * ```svelte
+ * <div {@attach enabled && longPress({ onLongPress })}>...</div>
+ * ```
+ */
+export declare function longPress(options: LongPressOptions): Attachment<HTMLElement>;

package/dist/attachments/long-press.js

@@ -0,0 +1,107 @@
+/**
+ * Svelte attachment (factory) that detects a long-press on the host element and calls
+ * `onLongPress` with the initiating `pointerdown` event (its `clientX`/`clientY` is
+ * where the press happened).
+ *
+ * Semantics: only primary pointers of the configured `pointerTypes` arm the timer;
+ * lifting, cancellation (e.g. the platform turning the gesture into a scroll), or
+ * moving beyond `moveTolerance` disarms it. A native `contextmenu` event on the host
+ * (Android fires it on long-press by itself) also disarms, so a host that handles
+ * `contextmenu` never gets both paths for one gesture.
+ *
+ * The browser's own long-press behaviors are NOT prevented here — that is CSS the
+ * consumer owns: `-webkit-touch-callout: none` (iOS link/image callout) and
+ * `user-select: none` (text-selection long-press) on the host.
+ *
+ * @example
+ * ```svelte
+ * <div {@attach longPress({ onLongPress: (e) => openAt(e.clientX, e.clientY) })}>...</div>
+ * ```
+ *
+ * Conditional usage (a falsy value means "no attachment"):
+ * ```svelte
+ * <div {@attach enabled && longPress({ onLongPress })}>...</div>
+ * ```
+ */
+export function longPress(options) {
+    return (node) => {
+        const { onLongPress, duration = 500, moveTolerance = 10, pointerTypes = ["touch", "pen"], suppressClick = true, } = options;
+        let timer;
+        let startEvent;
+        let fired = false;
+        let suppressing = false;
+        const disarm = () => {
+            if (timer !== undefined)
+                clearTimeout(timer);
+            timer = undefined;
+            startEvent = undefined;
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onPointerCancel);
+        };
+        const onMove = (e) => {
+            if (!startEvent || e.pointerId !== startEvent.pointerId || fired)
+                return;
+            const dist = Math.hypot(e.clientX - startEvent.clientX, e.clientY - startEvent.clientY);
+            if (dist > moveTolerance)
+                disarm();
+        };
+        // The follow-up click (if the platform fires one) lands right after the
+        // gesture ends — close the suppress window soon after, so a stale flag can
+        // never swallow a later genuine click.
+        const scheduleSuppressEnd = () => {
+            if (fired && suppressing)
+                setTimeout(() => (suppressing = false), 150);
+        };
+        const onUp = (e) => {
+            if (!startEvent || e.pointerId !== startEvent.pointerId)
+                return;
+            scheduleSuppressEnd();
+            disarm();
+        };
+        const onPointerCancel = (e) => {
+            if (!startEvent || e.pointerId !== startEvent.pointerId)
+                return;
+            scheduleSuppressEnd();
+            disarm();
+        };
+        const onDown = (e) => {
+            if (!e.isPrimary || !pointerTypes.includes(e.pointerType))
+                return;
+            disarm();
+            fired = false;
+            startEvent = e;
+            window.addEventListener("pointermove", onMove);
+            window.addEventListener("pointerup", onUp);
+            window.addEventListener("pointercancel", onPointerCancel);
+            timer = setTimeout(() => {
+                timer = undefined;
+                fired = true;
+                suppressing = suppressClick;
+                onLongPress(e);
+            }, duration);
+        };
+        // Android synthesizes contextmenu on long-press by itself — let that path win.
+        const onNativeContextMenu = () => {
+            scheduleSuppressEnd();
+            disarm();
+        };
+        const onClickCapture = (e) => {
+            if (!suppressing)
+                return;
+            suppressing = false;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        node.addEventListener("pointerdown", onDown);
+        node.addEventListener("contextmenu", onNativeContextMenu);
+        window.addEventListener("click", onClickCapture, { capture: true });
+        return () => {
+            disarm();
+            suppressing = false;
+            node.removeEventListener("pointerdown", onDown);
+            node.removeEventListener("contextmenu", onNativeContextMenu);
+            window.removeEventListener("click", onClickCapture, { capture: true });
+        };
+    };
+}

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,198 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { TranslateFn } from "../../types.js";
+	import type { BreadcrumbsJsonLdOptions } from "./json-ld.js";
+
+	/** One crumb of the trail. */
+	export interface BreadcrumbItem {
+		/** Visible label (also the `name` in the JSON-LD output). */
+		label: string;
+		/**
+		 * Link target. Omit to render a plain (non-link) crumb — typical for the
+		 * last item, the current page.
+		 */
+		href?: string;
+	}
+
+	export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+		/** The trail, first-to-current. The last item is marked as the current page. */
+		items: BreadcrumbItem[];
+		/** Separator text between crumbs (default "/"). See also `renderSeparator`. */
+		separator?: string;
+		/**
+		 * Collapse the middle of a long trail into an expandable ellipsis button when
+		 * there are more than `maxItems` crumbs. `0` (default) never collapses.
+		 */
+		maxItems?: number;
+		/** How many leading crumbs stay visible when collapsed (default 1). */
+		itemsBeforeCollapse?: number;
+		/** How many trailing crumbs stay visible when collapsed (default 1). */
+		itemsAfterCollapse?: number;
+		/**
+		 * Render schema.org `BreadcrumbList` JSON-LD (a
+		 * `<script type="application/ld+json">`) along with the trail — the
+		 * structured data search engines read. Pass `{ baseUrl }` to resolve
+		 * relative `href`s to the absolute URLs Google recommends. Alternatively
+		 * use the exported `breadcrumbsJsonLdScript()` helper in `<svelte:head>`.
+		 */
+		jsonLd?: boolean | BreadcrumbsJsonLdOptions;
+		/** i18n translate function (see `createBreadcrumbsT`). */
+		t?: TranslateFn;
+		/** Override the rendering of every crumb; receives `(item, index, isLast)`. */
+		renderItem?: Snippet<[BreadcrumbItem, number, boolean]>;
+		/** Override the separator between crumbs. */
+		renderSeparator?: Snippet;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for every `<li>` */
+		classItem?: string;
+		/** Class for every crumb link */
+		classLink?: string;
+		/** Extra class for the current (last) crumb */
+		classCurrent?: string;
+		/** Class for the separator */
+		classSeparator?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+
+	type Entry = { item: BreadcrumbItem; index: number } | "ellipsis";
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./i18n.js";
+	import { breadcrumbsJsonLdScript } from "./json-ld.js";
+
+	let {
+		items,
+		separator = "/",
+		maxItems = 0,
+		itemsBeforeCollapse = 1,
+		itemsAfterCollapse = 1,
+		jsonLd = false,
+		t = t_default,
+		renderItem,
+		renderSeparator,
+		unstyled = false,
+		class: classProp,
+		classItem: classItemProp,
+		classLink: classLinkProp,
+		classCurrent: classCurrentProp,
+		classSeparator: classSeparatorProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	// expansion is keyed on the items reference, so a new trail (navigation)
+	// automatically collapses again ($state.raw: plain $state would proxy the
+	// stored array and break the identity comparison)
+	let _expandedFor: BreadcrumbItem[] | undefined = $state.raw();
+	let _expanded = $derived(_expandedFor === items);
+
+	let _collapsible = $derived(
+		maxItems > 0 &&
+			items.length > maxItems &&
+			items.length > itemsBeforeCollapse + itemsAfterCollapse
+	);
+
+	let _entries: Entry[] = $derived.by(() => {
+		const all: Entry[] = items.map((item, index) => ({ item, index }));
+		if (!_collapsible || _expanded) return all;
+		return [
+			...all.slice(0, itemsBeforeCollapse),
+			"ellipsis",
+			...all.slice(items.length - itemsAfterCollapse),
+		];
+	});
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-breadcrumbs", classProp));
+	let _classItem = $derived(
+		unstyled ? classItemProp : twMerge("stuic-breadcrumbs-item", classItemProp)
+	);
+	let _classLink = $derived(
+		unstyled ? classLinkProp : twMerge("stuic-breadcrumbs-link", classLinkProp)
+	);
+	let _classSeparator = $derived(
+		unstyled
+			? classSeparatorProp
+			: twMerge("stuic-breadcrumbs-separator", classSeparatorProp)
+	);
+
+	function _classCrumb(isLast: boolean, isLink: boolean) {
+		const current = isLast
+			? unstyled
+				? classCurrentProp
+				: twMerge("stuic-breadcrumbs-current", classCurrentProp)
+			: undefined;
+		const link = isLink ? _classLink : undefined;
+		return twMerge(link, current) || undefined;
+	}
+
+	let _jsonLdScript = $derived(
+		jsonLd ? breadcrumbsJsonLdScript(items, jsonLd === true ? undefined : jsonLd) : ""
+	);
+</script>
+
+{#if items.length}
+	<nav
+		bind:this={el}
+		class={_class}
+		aria-label={t("breadcrumbs", null, "Breadcrumb")}
+		{...rest}
+	>
+		<ol class={!unstyled ? "stuic-breadcrumbs-list" : undefined}>
+			{#each _entries as entry, i (entry === "ellipsis" ? "ellipsis" : entry.index)}
+				<li
+					class={_classItem}
+					data-current={entry !== "ellipsis" && entry.index === items.length - 1
+						? "true"
+						: undefined}
+				>
+					{#if i > 0}
+						<span class={_classSeparator} aria-hidden="true">
+							{#if renderSeparator}{@render renderSeparator()}{:else}{separator}{/if}
+						</span>
+					{/if}
+					{#if entry === "ellipsis"}
+						<button
+							type="button"
+							class={!unstyled ? "stuic-breadcrumbs-ellipsis" : undefined}
+							aria-label={t("show_all", null, "Show all breadcrumbs")}
+							onclick={() => (_expandedFor = items)}
+						>
+							&hellip;
+						</button>
+					{:else}
+						{@const isLast = entry.index === items.length - 1}
+						{#if renderItem}
+							{@render renderItem(entry.item, entry.index, isLast)}
+						{:else if entry.item.href}
+							<a
+								href={entry.item.href}
+								class={_classCrumb(isLast, true)}
+								aria-current={isLast ? "page" : undefined}
+							>
+								{entry.item.label}
+							</a>
+						{:else}
+							<span
+								class={_classCrumb(isLast, false)}
+								aria-current={isLast ? "page" : undefined}
+							>
+								{entry.item.label}
+							</span>
+						{/if}
+					{/if}
+				</li>
+			{/each}
+		</ol>
+		{#if _jsonLdScript}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- helper escapes angle brackets -->
+			{@html _jsonLdScript}
+		{/if}
+	</nav>
+{/if}

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

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { TranslateFn } from "../../types.js";
+import type { BreadcrumbsJsonLdOptions } from "./json-ld.js";
+/** One crumb of the trail. */
+export interface BreadcrumbItem {
+    /** Visible label (also the `name` in the JSON-LD output). */
+    label: string;
+    /**
+     * Link target. Omit to render a plain (non-link) crumb — typical for the
+     * last item, the current page.
+     */
+    href?: string;
+}
+export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The trail, first-to-current. The last item is marked as the current page. */
+    items: BreadcrumbItem[];
+    /** Separator text between crumbs (default "/"). See also `renderSeparator`. */
+    separator?: string;
+    /**
+     * Collapse the middle of a long trail into an expandable ellipsis button when
+     * there are more than `maxItems` crumbs. `0` (default) never collapses.
+     */
+    maxItems?: number;
+    /** How many leading crumbs stay visible when collapsed (default 1). */
+    itemsBeforeCollapse?: number;
+    /** How many trailing crumbs stay visible when collapsed (default 1). */
+    itemsAfterCollapse?: number;
+    /**
+     * Render schema.org `BreadcrumbList` JSON-LD (a
+     * `<script type="application/ld+json">`) along with the trail — the
+     * structured data search engines read. Pass `{ baseUrl }` to resolve
+     * relative `href`s to the absolute URLs Google recommends. Alternatively
+     * use the exported `breadcrumbsJsonLdScript()` helper in `<svelte:head>`.
+     */
+    jsonLd?: boolean | BreadcrumbsJsonLdOptions;
+    /** i18n translate function (see `createBreadcrumbsT`). */
+    t?: TranslateFn;
+    /** Override the rendering of every crumb; receives `(item, index, isLast)`. */
+    renderItem?: Snippet<[BreadcrumbItem, number, boolean]>;
+    /** Override the separator between crumbs. */
+    renderSeparator?: Snippet;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for every `<li>` */
+    classItem?: string;
+    /** Class for every crumb link */
+    classLink?: string;
+    /** Extra class for the current (last) crumb */
+    classCurrent?: string;
+    /** Class for the separator */
+    classSeparator?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "el">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/README.md

@@ -0,0 +1,174 @@
+# Breadcrumbs
+
+Breadcrumb navigation trail — `<nav>` + ordered list of links with the current page
+marked, an optional collapse of long trails into an expandable ellipsis, and
+schema.org `BreadcrumbList` JSON-LD helpers for SEO.
+
+## Props
+
+| Prop                  | Type                     | Default | Description                                                        |
+| --------------------- | ------------------------ | ------- | ------------------------------------------------------------------ |
+| `items`               | `BreadcrumbItem[]`       | -       | The trail, first-to-current; the last item is the current page     |
+| `separator`           | `string`                 | `"/"`   | Separator text between crumbs                                      |
+| `maxItems`            | `number`                 | `0`     | Collapse when there are more crumbs than this; `0` never collapses |
+| `itemsBeforeCollapse` | `number`                 | `1`     | Leading crumbs kept visible when collapsed                         |
+| `itemsAfterCollapse`  | `number`                 | `1`     | Trailing crumbs kept visible when collapsed                        |
+| `jsonLd`              | `boolean \| { baseUrl }` | `false` | Render schema.org `BreadcrumbList` JSON-LD along with the trail    |
+| `t`                   | `TranslateFn`            | English | i18n translate function (see below)                                |
+| `unstyled`            | `boolean`                | `false` | Skip all default styling                                           |
+| `class`               | `string`                 | -       | Additional CSS classes (merged via twMerge)                        |
+| `classItem`           | `string`                 | -       | Class for every `<li>`                                             |
+| `classLink`           | `string`                 | -       | Class for every crumb link                                         |
+| `classCurrent`        | `string`                 | -       | Extra class for the current (last) crumb                           |
+| `classSeparator`      | `string`                 | -       | Class for the separator                                            |
+| `el`                  | `HTMLElement`            | -       | Element reference (bindable)                                       |
+
+`BreadcrumbItem`: `{ label: string; href?: string }` — omit `href` to render a plain
+(non-link) crumb, typical for the last item (the current page).
+
+## Snippet Props
+
+| Snippet           | Description                                            |
+| ----------------- | ------------------------------------------------------ |
+| `renderItem`      | Override every crumb; receives `(item, index, isLast)` |
+| `renderSeparator` | Override the separator between crumbs                  |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { Breadcrumbs } from "@marianmeres/stuic";
+
+	const items = [
+		{ label: "Home", href: "/" },
+		{ label: "Products", href: "/products" },
+		{ label: "Phones" }, // current page — no href
+	];
+</script>
+
+<Breadcrumbs {items} />
+```
+
+### Custom separator
+
+```svelte
+<Breadcrumbs {items} separator="›" />
+
+<!-- or any markup -->
+<Breadcrumbs {items}>
+	{#snippet renderSeparator()}
+		<ChevronIcon />
+	{/snippet}
+</Breadcrumbs>
+```
+
+### Long trails (collapse)
+
+Trails longer than `maxItems` collapse their middle into an ellipsis button;
+clicking it expands the full trail. A new `items` array (navigation) collapses it
+again.
+
+```svelte
+<Breadcrumbs {items} maxItems={4} itemsBeforeCollapse={1} itemsAfterCollapse={2} />
+```
+
+### SEO structured data (JSON-LD)
+
+Search engines read breadcrumb trails from schema.org `BreadcrumbList` structured
+data. Either let the component render it inline (JSON-LD is valid anywhere in the
+document):
+
+```svelte
+<Breadcrumbs {items} jsonLd={{ baseUrl: page.url.origin }} />
+```
+
+...or keep it in the head via the pure helper (SvelteKit):
+
+```svelte
+<script lang="ts">
+	import { Breadcrumbs, breadcrumbsJsonLdScript } from "@marianmeres/stuic";
+	import { page } from "$app/state";
+</script>
+
+<svelte:head>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- helper escapes angle brackets -->
+	{@html breadcrumbsJsonLdScript(items, { baseUrl: page.url.origin })}
+</svelte:head>
+
+<Breadcrumbs {items} />
+```
+
+Notes:
+
+- crumbs without `href` (the current page) are emitted without `item`, exactly per
+  Google's guidelines;
+- `baseUrl` resolves relative `href`s to the absolute URLs Google recommends;
+- the emitted JSON is `\uXXXX`-escaped (`<`, `>`, `&`), so it is safe for `{@html}`
+  — a label can never break out of the script element;
+- `breadcrumbsJsonLd(items, options?)` returns the raw object if you prefer to
+  serialize yourself.
+
+### Custom crumb rendering
+
+```svelte
+<Breadcrumbs {items}>
+	{#snippet renderItem(item, index, isLast)}
+		{#if index === 0}
+			<a href={item.href} aria-label={item.label}><HomeIcon /></a>
+		{:else if isLast}
+			<span aria-current="page">{item.label}</span>
+		{:else}
+			<a href={item.href}>{item.label}</a>
+		{/if}
+	{/snippet}
+</Breadcrumbs>
+```
+
+### i18n
+
+Built-in English; bundled Slovak (`BREADCRUMBS_MESSAGES_SK`) is opt-in.
+
+```svelte
+<script lang="ts">
+	import {
+		Breadcrumbs,
+		createBreadcrumbsT,
+		BREADCRUMBS_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createBreadcrumbsT(BREADCRUMBS_MESSAGES_SK);
+</script>
+
+<Breadcrumbs {items} {t} />
+```
+
+## Accessibility
+
+- Renders a `<nav aria-label="Breadcrumb">` landmark (label localized via `t`)
+  containing an ordered list — the WAI-ARIA APG breadcrumb pattern.
+- The last crumb carries `aria-current="page"` (link or plain span alike).
+- Separators are `aria-hidden`.
+- The collapse ellipsis is a real `<button>` with a localized `aria-label`.
+
+## Exports
+
+Besides the component: `breadcrumbsJsonLd` / `breadcrumbsJsonLdScript` (schema.org
+`BreadcrumbList` helpers), `createBreadcrumbsT` + message catalogs (i18n).
+
+## CSS Variables
+
+| Variable                                  | Default                          | Description                          |
+| ----------------------------------------- | -------------------------------- | ------------------------------------ |
+| `--stuic-breadcrumbs-gap`                 | `0.375rem`                       | Gap between crumbs and separators    |
+| `--stuic-breadcrumbs-font-size`           | `--text-sm`                      | Trail font size                      |
+| `--stuic-breadcrumbs-text`                | `--stuic-color-muted-foreground` | Link / plain crumb color             |
+| `--stuic-breadcrumbs-text-hover`          | `--stuic-color-foreground`       | Link hover color                     |
+| `--stuic-breadcrumbs-text-current`        | `--stuic-color-foreground`       | Current crumb color                  |
+| `--stuic-breadcrumbs-font-weight-current` | `500`                            | Current crumb font weight            |
+| `--stuic-breadcrumbs-separator-text`      | `--stuic-color-muted-foreground` | Separator color                      |
+| `--stuic-breadcrumbs-transition`          | `--stuic-transition`             | Hover transition duration (fallback) |
+
+## Data Attributes
+
+- `data-current` - `"true"` on the current (last) crumb's `<li>`

package/dist/components/Breadcrumbs/i18n-sk.d.ts

@@ -0,0 +1,17 @@
+import type { BreadcrumbsMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `Breadcrumbs`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually
+ * imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Breadcrumbs, createBreadcrumbsT, BREADCRUMBS_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createBreadcrumbsT(BREADCRUMBS_MESSAGES_SK);
+ * </script>
+ *
+ * <Breadcrumbs {items} {t} />
+ * ```
+ */
+export declare const BREADCRUMBS_MESSAGES_SK: BreadcrumbsMessages;

package/dist/components/Breadcrumbs/i18n-sk.js

@@ -0,0 +1,19 @@
+/**
+ * Slovak message catalog for `Breadcrumbs`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually
+ * imported (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Breadcrumbs, createBreadcrumbsT, BREADCRUMBS_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createBreadcrumbsT(BREADCRUMBS_MESSAGES_SK);
+ * </script>
+ *
+ * <Breadcrumbs {items} {t} />
+ * ```
+ */
+export const BREADCRUMBS_MESSAGES_SK = {
+    breadcrumbs: "Omrvinková navigácia",
+    show_all: "Zobraziť celú cestu",
+};