@marianmeres/stuic 3.167.0 → 3.168.0

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -0,0 +1,302 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type {
+		DropdownMenuActionItem,
+		DropdownMenuItem,
+		DropdownMenuPosition,
+		DropdownMenuSearchConfig,
+	} from "../DropdownMenu/DropdownMenu.svelte";
+
+	/** ContextMenu shares the DropdownMenu item model — aliases for consumer DX. */
+	export type ContextMenuItem = DropdownMenuItem;
+	export type ContextMenuActionItem = DropdownMenuActionItem;
+	export type ContextMenuPosition = DropdownMenuPosition;
+	export type ContextMenuSearchConfig = DropdownMenuSearchConfig;
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** Menu items to display (the DropdownMenu item model) */
+		items: ContextMenuItem[];
+		/** The right-clickable / long-pressable target area content */
+		children?: Snippet;
+		/** Controlled open state (bindable). Setting `true` programmatically with no
+		 *  recorded coordinates positions the menu at the target area's top-left. */
+		isOpen?: boolean;
+		/** When true, triggers are inert and the browser's native menu works again */
+		disabled?: boolean;
+		/** Long-press duration in ms for touch/pen pointers (default 500);
+		 *  `false` disables the long-press trigger entirely. */
+		longPress?: number | false;
+		/** Menu placement relative to the pointer (default "bottom-span-right" —
+		 *  below-right of the cursor, the native context menu convention) */
+		position?: ContextMenuPosition;
+		/** Offset of the menu from the pointer (CSS value, default "0px") */
+		offset?: string;
+		/** Max height of the menu (CSS value) */
+		maxHeight?: string;
+		/** Whether to close the menu when an action item is selected */
+		closeOnSelect?: boolean;
+		/** Close on click outside */
+		closeOnClickOutside?: boolean;
+		/** Close on Escape key */
+		closeOnEscape?: boolean;
+		/** Force fallback positioning mode (for testing) */
+		forceFallback?: boolean;
+		/** Enable search/filter functionality (true for defaults, or config object) */
+		search?: boolean | ContextMenuSearchConfig;
+		/** Show backdrop in fallback mode (default: true) */
+		showBackdrop?: boolean;
+		/** Reserve scrollbar space to prevent layout shift on open (see DropdownMenu) */
+		scrollbarGutter?: boolean;
+		/** Skip the body scroll lock in fallback mode */
+		noScrollLock?: boolean;
+		/** Called when the menu opens */
+		onOpen?: () => void;
+		/** Called when the menu closes */
+		onClose?: () => void;
+		/** Called when any action item is selected (fallback if item has no onSelect) */
+		onSelect?: (item: ContextMenuActionItem) => void | boolean | Promise<void | boolean>;
+		/** i18n translate function (see `createContextMenuT`) — localizes the
+		 *  screen-reader-only menu label */
+		t?: TranslateFn;
+		/** Opt out of stuic base classes for full styling control */
+		unstyled?: boolean;
+		/** Classes for the target area wrapper */
+		class?: string;
+		/** Classes for the menu container */
+		classDropdown?: string;
+		/** Classes for action items */
+		classItem?: string;
+		/** Classes for active/focused action item */
+		classItemActive?: string;
+		/** Classes for disabled items */
+		classItemDisabled?: string;
+		/** Classes for content before label */
+		classItemBefore?: string;
+		/** Classes for content after label */
+		classItemAfter?: string;
+		/** Classes for dividers */
+		classDivider?: string;
+		/** Classes for header items */
+		classHeader?: string;
+		/** Classes for expandable section header */
+		classExpandable?: string;
+		/** Classes for expandable section content */
+		classExpandableContent?: string;
+		/** Classes for backdrop (fallback mode only) */
+		classBackdrop?: string;
+		/** Classes for search input container */
+		classSearchContainer?: string;
+		/** Classes for search input */
+		classSearchInput?: string;
+		/** Reference to the target area wrapper element */
+		el?: HTMLDivElement;
+		/** Reference to the open menu element */
+		dropdownEl?: HTMLDivElement;
+	}
+
+	export const CONTEXT_MENU_BASE_CLASSES = `stuic-context-menu`;
+
+	export const CONTEXT_MENU_ANCHOR_CLASSES = `stuic-context-menu-anchor`;
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { fixedContainingBlockRect } from "../../utils/containing-block.js";
+	import { longPress as longPressAttachment } from "../../attachments/long-press.js";
+	import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
+	import { t_default } from "./i18n.js";
+
+	let {
+		items,
+		children,
+		isOpen = $bindable(false),
+		disabled = false,
+		longPress = 500,
+		position = "bottom-span-right",
+		offset = "0px",
+		maxHeight,
+		closeOnSelect,
+		closeOnClickOutside,
+		closeOnEscape,
+		forceFallback,
+		search,
+		showBackdrop,
+		scrollbarGutter,
+		noScrollLock,
+		onOpen,
+		onClose,
+		onSelect,
+		t = t_default,
+		unstyled = false,
+		class: classProp,
+		classDropdown,
+		classItem,
+		classItemActive,
+		classItemDisabled,
+		classItemBefore,
+		classItemAfter,
+		classDivider,
+		classHeader,
+		classExpandable,
+		classExpandableContent,
+		classBackdrop,
+		classSearchContainer,
+		classSearchInput,
+		el = $bindable(),
+		dropdownEl = $bindable(),
+		...rest
+	}: Props = $props();
+
+	// Anchor coordinates within the anchor's fixed containing block (viewport,
+	// unless a transformed/contained ancestor establishes one).
+	let x = $state(0);
+	let y = $state(0);
+	let hasPosition = $state(false);
+
+	// For keyboard users: what had focus when the menu opened, restored on close.
+	let prevFocused: HTMLElement | null = null;
+
+	/** Open the menu with its anchor at the given viewport coordinates. */
+	function openAt(clientX: number, clientY: number) {
+		if (disabled) return;
+		// clientX/Y are viewport coords, but the fixed anchor resolves against its
+		// containing block — translate when a transformed ancestor establishes one
+		const cb = el ? fixedContainingBlockRect(el) : undefined;
+		x = clientX - (cb?.left ?? 0);
+		y = clientY - (cb?.top ?? 0);
+		hasPosition = true;
+		if (!isOpen) {
+			const active = document.activeElement;
+			prevFocused =
+				active instanceof HTMLElement && active !== document.body ? active : null;
+			isOpen = true;
+		}
+	}
+
+	/** Open at an element's bottom-left corner (keyboard invocation convention). */
+	function openAtElement(target?: Element | null) {
+		const rect = (target ?? el)?.getBoundingClientRect();
+		if (!rect) return;
+		openAt(rect.left, rect.bottom);
+	}
+
+	function focusedElementWithin(): Element | null {
+		const active = document.activeElement;
+		return active && el?.contains(active) ? active : (el ?? null);
+	}
+
+	function _onContextMenu(e: MouseEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		// nested context areas: the innermost one wins
+		e.stopPropagation();
+		if (e.clientX === 0 && e.clientY === 0) {
+			// keyboard-invoked (menu key synthesizes contextmenu with no coords)
+			openAtElement(focusedElementWithin());
+		} else {
+			openAt(e.clientX, e.clientY);
+		}
+	}
+
+	function _onKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === "ContextMenu" || (e.shiftKey && e.key === "F10")) {
+			e.preventDefault();
+			e.stopPropagation();
+			openAtElement(focusedElementWithin());
+		}
+	}
+
+	function _onClose() {
+		onClose?.();
+		if (prevFocused?.isConnected) prevFocused.focus();
+		prevFocused = null;
+	}
+
+	// Programmatic open (isOpen set true from outside) with no coords yet —
+	// anchor to the target area instead of the (0,0) default.
+	$effect(() => {
+		if (isOpen && !hasPosition && el) {
+			openAtElement(el);
+		}
+	});
+
+	const _longPressAttach = $derived(
+		longPress !== false &&
+			!disabled &&
+			longPressAttachment({
+				duration: longPress,
+				onLongPress: (e) => openAt(e.clientX, e.clientY),
+			})
+	);
+</script>
+
+<div
+	bind:this={el}
+	class={unstyled ? classProp : twMerge(CONTEXT_MENU_BASE_CLASSES, classProp)}
+	data-longpress={!unstyled && longPress !== false && !disabled ? "" : undefined}
+	data-open={!unstyled && isOpen ? "" : undefined}
+	aria-haspopup="menu"
+	{...rest}
+	oncontextmenu={_onContextMenu}
+	onkeydown={_onKeydown}
+	{@attach _longPressAttach}
+>
+	{@render children?.()}
+</div>
+
+<!-- Invisible 0x0 anchor moved to the pointer — the DropdownMenu positions against it -->
+<div
+	role="presentation"
+	class={unstyled ? undefined : CONTEXT_MENU_ANCHOR_CLASSES}
+	style:position="fixed"
+	style:left="{x}px"
+	style:top="{y}px"
+	style:width="0"
+	style:height="0"
+	oncontextmenu={(e) => e.preventDefault()}
+>
+	<DropdownMenu
+		bind:isOpen
+		bind:dropdownEl
+		{items}
+		{position}
+		{offset}
+		{maxHeight}
+		{closeOnSelect}
+		{closeOnClickOutside}
+		{closeOnEscape}
+		{forceFallback}
+		{search}
+		{showBackdrop}
+		{scrollbarGutter}
+		{noScrollLock}
+		{onOpen}
+		onClose={_onClose}
+		{onSelect}
+		{unstyled}
+		{classDropdown}
+		{classItem}
+		{classItemActive}
+		{classItemDisabled}
+		{classItemBefore}
+		{classItemAfter}
+		{classDivider}
+		{classHeader}
+		{classExpandable}
+		{classExpandableContent}
+		{classBackdrop}
+		{classSearchContainer}
+		{classSearchInput}
+	>
+		{#snippet trigger({ triggerProps })}
+			<!-- No visible trigger — an sr-only label keeps the menu's
+			     aria-labelledby reference valid and names it for AT -->
+			<span class="sr-only" id={triggerProps.id}>
+				{t("context_menu", null, "Context menu")}
+			</span>
+		{/snippet}
+	</DropdownMenu>
+</div>

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

@@ -0,0 +1,94 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { DropdownMenuActionItem, DropdownMenuItem, DropdownMenuPosition, DropdownMenuSearchConfig } from "../DropdownMenu/DropdownMenu.svelte";
+/** ContextMenu shares the DropdownMenu item model — aliases for consumer DX. */
+export type ContextMenuItem = DropdownMenuItem;
+export type ContextMenuActionItem = DropdownMenuActionItem;
+export type ContextMenuPosition = DropdownMenuPosition;
+export type ContextMenuSearchConfig = DropdownMenuSearchConfig;
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Menu items to display (the DropdownMenu item model) */
+    items: ContextMenuItem[];
+    /** The right-clickable / long-pressable target area content */
+    children?: Snippet;
+    /** Controlled open state (bindable). Setting `true` programmatically with no
+     *  recorded coordinates positions the menu at the target area's top-left. */
+    isOpen?: boolean;
+    /** When true, triggers are inert and the browser's native menu works again */
+    disabled?: boolean;
+    /** Long-press duration in ms for touch/pen pointers (default 500);
+     *  `false` disables the long-press trigger entirely. */
+    longPress?: number | false;
+    /** Menu placement relative to the pointer (default "bottom-span-right" —
+     *  below-right of the cursor, the native context menu convention) */
+    position?: ContextMenuPosition;
+    /** Offset of the menu from the pointer (CSS value, default "0px") */
+    offset?: string;
+    /** Max height of the menu (CSS value) */
+    maxHeight?: string;
+    /** Whether to close the menu when an action item is selected */
+    closeOnSelect?: boolean;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Close on Escape key */
+    closeOnEscape?: boolean;
+    /** Force fallback positioning mode (for testing) */
+    forceFallback?: boolean;
+    /** Enable search/filter functionality (true for defaults, or config object) */
+    search?: boolean | ContextMenuSearchConfig;
+    /** Show backdrop in fallback mode (default: true) */
+    showBackdrop?: boolean;
+    /** Reserve scrollbar space to prevent layout shift on open (see DropdownMenu) */
+    scrollbarGutter?: boolean;
+    /** Skip the body scroll lock in fallback mode */
+    noScrollLock?: boolean;
+    /** Called when the menu opens */
+    onOpen?: () => void;
+    /** Called when the menu closes */
+    onClose?: () => void;
+    /** Called when any action item is selected (fallback if item has no onSelect) */
+    onSelect?: (item: ContextMenuActionItem) => void | boolean | Promise<void | boolean>;
+    /** i18n translate function (see `createContextMenuT`) — localizes the
+     *  screen-reader-only menu label */
+    t?: TranslateFn;
+    /** Opt out of stuic base classes for full styling control */
+    unstyled?: boolean;
+    /** Classes for the target area wrapper */
+    class?: string;
+    /** Classes for the menu container */
+    classDropdown?: string;
+    /** Classes for action items */
+    classItem?: string;
+    /** Classes for active/focused action item */
+    classItemActive?: string;
+    /** Classes for disabled items */
+    classItemDisabled?: string;
+    /** Classes for content before label */
+    classItemBefore?: string;
+    /** Classes for content after label */
+    classItemAfter?: string;
+    /** Classes for dividers */
+    classDivider?: string;
+    /** Classes for header items */
+    classHeader?: string;
+    /** Classes for expandable section header */
+    classExpandable?: string;
+    /** Classes for expandable section content */
+    classExpandableContent?: string;
+    /** Classes for backdrop (fallback mode only) */
+    classBackdrop?: string;
+    /** Classes for search input container */
+    classSearchContainer?: string;
+    /** Classes for search input */
+    classSearchInput?: string;
+    /** Reference to the target area wrapper element */
+    el?: HTMLDivElement;
+    /** Reference to the open menu element */
+    dropdownEl?: HTMLDivElement;
+}
+export declare const CONTEXT_MENU_BASE_CLASSES = "stuic-context-menu";
+export declare const CONTEXT_MENU_ANCHOR_CLASSES = "stuic-context-menu-anchor";
+declare const ContextMenu: import("svelte").Component<Props, {}, "el" | "isOpen" | "dropdownEl">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/ContextMenu/README.md

@@ -0,0 +1,159 @@
+# ContextMenu
+
+Right-click / long-press triggered menu, positioned at the pointer. Wrap any content
+in `<ContextMenu items={...}>` and the wrapped area becomes a context target:
+a `contextmenu` event (right-click), a long-press (touch/pen pointers), or
+Shift+F10 / the dedicated menu key (keyboard) opens the menu anchored at the
+interaction point.
+
+The menu panel itself **is** a [`DropdownMenu`](../DropdownMenu/README.md) — the full
+item model (actions, dividers, headers, custom content, expandable sections), keyboard
+navigation, optional search, viewport-overflow handling (CSS anchor positioning with a
+centered-modal fallback), and theming all come from there. What ContextMenu adds is the
+trigger semantics and the cursor anchoring.
+
+## Props
+
+| Prop                                               | Type                                   | Default               | Description                                                                                        |
+| -------------------------------------------------- | -------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------- |
+| `items`                                            | `ContextMenuItem[]`                    | required              | Menu items (the DropdownMenu item model)                                                           |
+| `children`                                         | `Snippet`                              | -                     | The right-clickable / long-pressable target area content                                           |
+| `isOpen`                                           | `boolean`                              | `false`               | Controlled open state (bindable); setting `true` programmatically anchors at the target area       |
+| `disabled`                                         | `boolean`                              | `false`               | Triggers are inert — the browser's native context menu works again                                 |
+| `longPress`                                        | `number \| false`                      | `500`                 | Long-press duration in ms (touch/pen); `false` disables the long-press trigger                     |
+| `position`                                         | `ContextMenuPosition`                  | `"bottom-span-right"` | Menu placement relative to the pointer (below-right = the native convention); flips near the edges |
+| `offset`                                           | `string`                               | `"0px"`               | Offset of the menu from the pointer (CSS value)                                                    |
+| `maxHeight`                                        | `string`                               | `"300px"`             | Max menu height (CSS value)                                                                        |
+| `closeOnSelect`                                    | `boolean`                              | `true`                | Close when an action item is selected                                                              |
+| `closeOnClickOutside`                              | `boolean`                              | `true`                | Close on click outside                                                                             |
+| `closeOnEscape`                                    | `boolean`                              | `true`                | Close on Escape                                                                                    |
+| `search`                                           | `boolean \| ContextMenuSearchConfig`   | -                     | Search/filter input inside the menu (see DropdownMenu)                                             |
+| `showBackdrop`                                     | `boolean`                              | `true`                | Backdrop in fallback (centered modal) mode                                                         |
+| `scrollbarGutter`                                  | `boolean`                              | auto                  | Reserve scrollbar space (auto-enables at ≥ 7 items)                                                |
+| `noScrollLock`                                     | `boolean`                              | -                     | Skip the body scroll lock in fallback mode                                                         |
+| `forceFallback`                                    | `boolean`                              | `false`               | Force the centered-modal fallback (testing)                                                        |
+| `onOpen` / `onClose`                               | `() => void`                           | -                     | Open/close callbacks                                                                               |
+| `onSelect`                                         | `(item) => void \| boolean \| Promise` | -                     | Fallback select handler when an item has no own `onSelect`                                         |
+| `t`                                                | `TranslateFn`                          | English               | i18n — localizes the screen-reader-only menu label (see below)                                     |
+| `unstyled`                                         | `boolean`                              | `false`               | Skip all default styling                                                                           |
+| `class`                                            | `string`                               | -                     | Classes for the target area wrapper                                                                |
+| `classDropdown`, `classItem`, `classItemActive`, … | `string`                               | -                     | Menu part classes, passed to the underlying DropdownMenu                                           |
+| `el`                                               | `HTMLDivElement`                       | -                     | Target area wrapper element (bindable)                                                             |
+| `dropdownEl`                                       | `HTMLDivElement`                       | -                     | Open menu element (bindable)                                                                       |
+
+`ContextMenuItem` / `ContextMenuActionItem` / `ContextMenuPosition` /
+`ContextMenuSearchConfig` are aliases of the corresponding `DropdownMenu*` types —
+see the [DropdownMenu README](../DropdownMenu/README.md) for the full item model
+(action, divider, header, custom, expandable).
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+	import { ContextMenu, type ContextMenuItem } from "@marianmeres/stuic";
+
+	const items: ContextMenuItem[] = [
+		{ type: "action", id: "copy", label: "Copy", onSelect: () => copy() },
+		{ type: "action", id: "rename", label: "Rename", onSelect: () => rename() },
+		{ type: "divider", id: "d" },
+		{ type: "action", id: "delete", label: "Delete", onSelect: () => remove() },
+	];
+</script>
+
+<ContextMenu {items}>
+	<div class="p-8">Right-click (or long-press) anywhere in here…</div>
+</ContextMenu>
+```
+
+### Per-row menus (list/table)
+
+Each `<ContextMenu>` instance is one target area — wrap each row and build the items
+from the row's data:
+
+```svelte
+{#each files as file (file.id)}
+	<ContextMenu items={itemsFor(file)}>
+		<div class="row">{file.name}</div>
+	</ContextMenu>
+{/each}
+```
+
+(Nested target areas are fine — the innermost one wins.)
+
+### Controlled / programmatic
+
+```svelte
+<ContextMenu {items} bind:isOpen>...</ContextMenu>
+```
+
+Setting `isOpen = true` programmatically (with no pointer interaction recorded yet)
+anchors the menu at the target area's bottom-left corner.
+
+### i18n
+
+Only the screen-reader-only menu label ("Context menu") is localized — the item
+labels are yours. Built-in English; bundled Slovak (`CONTEXT_MENU_MESSAGES_SK`) is
+opt-in:
+
+```svelte
+<script lang="ts">
+	import {
+		ContextMenu,
+		createContextMenuT,
+		CONTEXT_MENU_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createContextMenuT(CONTEXT_MENU_MESSAGES_SK);
+</script>
+
+<ContextMenu {items} {t}>...</ContextMenu>
+```
+
+## Trigger semantics
+
+- **Right-click** (`contextmenu` event): opens at the cursor, `preventDefault`s the
+  native menu, `stopPropagation`s so the innermost of nested context areas wins.
+  Right-clicking again while open just moves the menu.
+- **Long-press** (touch/pen, via the exported [`longPress`](../../attachments/long-press.ts)
+  attachment): fires after `longPress` ms without moving beyond ~10px; the platform's
+  own long-press behaviors are suppressed (Android's native `contextmenu` synthesis is
+  deduplicated; iOS's callout/text-selection via CSS on the target area — coarse
+  pointers only, so desktop text selection inside the area stays intact). The click
+  that some platforms fire when the finger lifts is swallowed so it can't activate
+  whatever sits under it.
+- **Keyboard**: Shift+F10 or the dedicated menu key while focus is inside the target
+  area opens the menu at the focused element's bottom-left corner. Note the wrapper
+  itself is not focusable — put focusable content inside (or add `tabindex="0"`
+  yourself) for keyboard invocation to have somewhere to happen. Focus returns to the
+  previously focused element on close.
+- **`disabled`**: all triggers inert, the browser's native context menu works again.
+
+## Accessibility
+
+- The target area wrapper carries `aria-haspopup="menu"`; the menu is a
+  `role="menu"` with `role="menuitem"` items (DropdownMenu's keyboard navigation:
+  arrows, Home/End, Enter/Space, Escape).
+- The menu's `aria-labelledby` points at a visually hidden label ("Context menu",
+  localizable via `t`).
+- Keyboard invocation (Shift+F10 / menu key) is supported, and focus is restored on
+  close.
+
+## Styling
+
+The menu panel is a DropdownMenu — **theme it via the `--stuic-dropdown-menu-*`
+tokens** (see the [DropdownMenu README](../DropdownMenu/README.md#css-variables)).
+ContextMenu itself only styles the target area:
+
+- `.stuic-context-menu` — the target area wrapper (`class` prop merges here)
+- `.stuic-context-menu-anchor` — the invisible 0×0 fixed anchor the menu positions
+  against (inline-positioned; not a styling hook)
+
+## Data Attributes
+
+On the target area wrapper:
+
+- `data-open` — empty attribute while the menu is open (e.g. highlight the target:
+  `.stuic-context-menu[data-open] { background: ... }`)
+- `data-longpress` — empty attribute when the long-press trigger is enabled; drives
+  the CSS that suppresses the platform's own long-press behaviors

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

@@ -0,0 +1,17 @@
+import type { ContextMenuMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `ContextMenu`. 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 { ContextMenu, createContextMenuT, CONTEXT_MENU_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createContextMenuT(CONTEXT_MENU_MESSAGES_SK);
+ * </script>
+ *
+ * <ContextMenu {items} {t}>...</ContextMenu>
+ * ```
+ */
+export declare const CONTEXT_MENU_MESSAGES_SK: ContextMenuMessages;

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

@@ -0,0 +1,18 @@
+/**
+ * Slovak message catalog for `ContextMenu`. 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 { ContextMenu, createContextMenuT, CONTEXT_MENU_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createContextMenuT(CONTEXT_MENU_MESSAGES_SK);
+ * </script>
+ *
+ * <ContextMenu {items} {t}>...</ContextMenu>
+ * ```
+ */
+export const CONTEXT_MENU_MESSAGES_SK = {
+    context_menu: "Kontextové menu",
+};

package/dist/components/ContextMenu/i18n.d.ts

@@ -0,0 +1,30 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `ContextMenu`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ */
+export declare const CONTEXT_MENU_MESSAGES_EN: {
+    context_menu: string;
+};
+/** Every message key `ContextMenu` may look up. */
+export type ContextMenuMessageKey = keyof typeof CONTEXT_MENU_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type ContextMenuMessages = Record<ContextMenuMessageKey, string>;
+/**
+ * Builds the `t` prop of `ContextMenu` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { ContextMenu, createContextMenuT, CONTEXT_MENU_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createContextMenuT(CONTEXT_MENU_MESSAGES_SK);
+ * </script>
+ *
+ * <ContextMenu {items} {t}>...</ContextMenu>
+ * ```
+ */
+export declare function createContextMenuT(messages: Partial<ContextMenuMessages> | Record<string, string>, fallbackMessages?: Partial<ContextMenuMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/ContextMenu/i18n.js

@@ -0,0 +1,38 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `ContextMenu`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ */
+export const CONTEXT_MENU_MESSAGES_EN = {
+    context_menu: "Context menu",
+};
+/**
+ * Builds the `t` prop of `ContextMenu` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { ContextMenu, createContextMenuT, CONTEXT_MENU_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createContextMenuT(CONTEXT_MENU_MESSAGES_SK);
+ * </script>
+ *
+ * <ContextMenu {items} {t}>...</ContextMenu>
+ * ```
+ */
+export function createContextMenuT(messages, fallbackMessages = CONTEXT_MENU_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createContextMenuT(CONTEXT_MENU_MESSAGES_EN);