@marianmeres/stuic 3.167.0 → 3.169.0

package/dist/components/ContextMenu/index.css

@@ -0,0 +1,26 @@
+/* =============================================================================
+   CONTEXT MENU COMPONENT
+   The menu panel itself IS a DropdownMenu — theme it via the
+   --stuic-dropdown-menu-* tokens. This file only styles the target area.
+   ============================================================================= */
+
+@layer components {
+	.stuic-context-menu {
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* Long-press enabled: keep the platform from hijacking the press.
+	   -webkit-touch-callout blocks iOS's link/image callout on long-press;
+	   user-select (coarse pointers only) blocks the text-selection long-press —
+	   desktop text selection inside the area stays intact. */
+	.stuic-context-menu[data-longpress] {
+		-webkit-touch-callout: none;
+	}
+
+	@media (pointer: coarse) {
+		.stuic-context-menu[data-longpress] {
+			user-select: none;
+			-webkit-user-select: none;
+		}
+	}
+}

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

@@ -0,0 +1,3 @@
+export { default as ContextMenu, type Props as ContextMenuProps, type ContextMenuItem, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuSearchConfig, CONTEXT_MENU_BASE_CLASSES, CONTEXT_MENU_ANCHOR_CLASSES, } from "./ContextMenu.svelte";
+export { createContextMenuT, CONTEXT_MENU_MESSAGES_EN, type ContextMenuMessageKey, type ContextMenuMessages, } from "./i18n.js";
+export { CONTEXT_MENU_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/ContextMenu/index.js

@@ -0,0 +1,3 @@
+export { default as ContextMenu, CONTEXT_MENU_BASE_CLASSES, CONTEXT_MENU_ANCHOR_CLASSES, } from "./ContextMenu.svelte";
+export { createContextMenuT, CONTEXT_MENU_MESSAGES_EN, } from "./i18n.js";
+export { CONTEXT_MENU_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/CopyButton/CopyButton.svelte

@@ -0,0 +1,278 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { TranslateFn } from "../../types.js";
+	import type { Props as ButtonProps } from "../Button/Button.svelte";
+	import type { TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
+
+	/** Feedback phase the button is in. Exposed as `data-state` and to `children`. */
+	export type CopyButtonState = "idle" | "copied" | "error";
+
+	/** What to copy: a string, or a getter (sync or async) resolved on click. */
+	export type CopyButtonText = string | (() => string | Promise<string>);
+
+	export interface Props extends Omit<
+		ButtonProps,
+		| "children"
+		| "onclick"
+		| "href"
+		| "target"
+		| "checked"
+		| "roleSwitch"
+		| "iconSwap"
+		| "x"
+		| "nav"
+		| "spinner"
+		| "spinnerOnly"
+		| "tooltip"
+	> {
+		/**
+		 * The text to copy. A getter is resolved on click (sync or async) — use it for
+		 * values that are expensive to build or only known at click time. Keep async
+		 * getters fast: browsers gate clipboard writes on the user gesture.
+		 */
+		text: CopyButtonText;
+		/**
+		 * Visible label next to the icon. Without it the button is icon-only and gets
+		 * an accessible name from `t("copy")`. Pass `true` for the localized default
+		 * ("Copy").
+		 */
+		label?: THC | true;
+		/** Label while in the "copied" state (default: `t("copied")`). Only with `label`. */
+		labelCopied?: THC;
+		/** Label while in the "error" state (default: `t("copy_failed")`). Only with `label`. */
+		labelError?: THC;
+		/** Idle icon as an svg/html string (default: copy icon). `false` renders no icons. */
+		icon?: string | false;
+		/** "copied" icon (default: check). `false` hides it; omitted follows `icon === false`. */
+		iconCopied?: string | false;
+		/** "error" icon (default: ×). `false` hides it; omitted follows `icon === false`. */
+		iconError?: string | false;
+		/**
+		 * How long the copied/error feedback stays (ms, default 2000). `0` keeps it until
+		 * the next click.
+		 */
+		feedbackDuration?: number;
+		/** Button intent while "copied" (default `"success"`). `false` keeps `intent`. */
+		intentCopied?: IntentColorKey | false;
+		/** Button intent while in "error" (default `"destructive"`). `false` keeps `intent`. */
+		intentError?: IntentColorKey | false;
+		/** Fired after a successful copy, with the text that was copied. */
+		onCopied?: (text: string) => void;
+		/** Fired when the copy failed (clipboard unavailable, permission denied, getter threw). */
+		onError?: (error: unknown) => void;
+		/**
+		 * Plain click hook, called before copying. Call `e.preventDefault()` to skip the
+		 * copy for this click.
+		 */
+		onclick?: (e: MouseEvent) => void;
+		/**
+		 * Tooltip (the stuic `tooltip` action), state-aware: it reads "Copy" while idle
+		 * and flips to "Copied" / "Copy failed" with the feedback — live, while it is
+		 * showing. `true` uses those localized texts; a string replaces the idle text
+		 * only; a `TooltipConfig` gives full control (position, class, …) and only
+		 * falls back to the state text when it returns no `content`; `false` disables.
+		 * Default: on for icon-only buttons, off when a `label` or `children` already
+		 * carry the feedback.
+		 */
+		tooltip?: boolean | string | TooltipConfig;
+		/** i18n translate function (see `createCopyButtonT`) */
+		t?: TranslateFn;
+		/** Override the whole button content; receives the current feedback state. */
+		children?: Snippet<[{ state: CopyButtonState; copied: boolean }]>;
+		/** Class for the icon wrapper */
+		classIcon?: string;
+		/** Class for the label wrapper */
+		classLabel?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { copyToClipboard } from "../../utils/copy-to-clipboard.js";
+	import { iconCopy, iconCheck, iconX } from "../../icons/index.js";
+	import Button from "../Button/Button.svelte";
+	import Thc from "../Thc/Thc.svelte";
+	import { t_default } from "./i18n.js";
+
+	let {
+		text,
+		label,
+		labelCopied,
+		labelError,
+		icon,
+		iconCopied,
+		iconError,
+		feedbackDuration = 2000,
+		intentCopied = "success",
+		intentError = "destructive",
+		onCopied,
+		onError,
+		onclick,
+		tooltip: tooltipProp,
+		t = t_default,
+		children,
+		intent,
+		variant = "ghost",
+		size = "sm",
+		disabled,
+		unstyled = false,
+		class: classProp,
+		classIcon: classIconProp,
+		classLabel: classLabelProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let phase = $state<CopyButtonState>("idle");
+	// Live-region text. Cleared on reset so the next feedback is a fresh announcement.
+	let announcement = $state("");
+
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	// Click sequence — a click whose async work finishes after a newer click has
+	// started must not overwrite that newer click's feedback.
+	let seq = 0;
+
+	function clearTimer() {
+		if (timer) clearTimeout(timer);
+		timer = undefined;
+	}
+
+	function setFeedback(next: Exclude<CopyButtonState, "idle">) {
+		clearTimer();
+		phase = next;
+		announcement = next === "copied" ? t("copied") : t("copy_failed");
+		if (feedbackDuration > 0) {
+			timer = setTimeout(() => {
+				timer = undefined;
+				phase = "idle";
+				announcement = "";
+			}, feedbackDuration);
+		}
+	}
+
+	async function handleClick(e: MouseEvent) {
+		onclick?.(e);
+		if (e.defaultPrevented) return;
+
+		const id = ++seq;
+		try {
+			// A plain string (or sync getter) is written synchronously within the click —
+			// Safari wants the clipboard write close to the user gesture.
+			const maybe = typeof text === "function" ? text() : text;
+			const value =
+				typeof (maybe as Promise<string>)?.then === "function"
+					? await (maybe as Promise<string>)
+					: (maybe as string);
+			await copyToClipboard(value);
+			if (id !== seq) return;
+			setFeedback("copied");
+			onCopied?.(value);
+		} catch (err) {
+			if (id !== seq) return;
+			setFeedback("error");
+			onError?.(err);
+		}
+	}
+
+	// pending feedback reset must not fire into an unmounted component
+	$effect(() => clearTimer);
+
+	let copied = $derived(phase === "copied");
+
+	let _intent = $derived.by(() => {
+		if (phase === "copied") return intentCopied === false ? intent : intentCopied;
+		if (phase === "error") return intentError === false ? intent : intentError;
+		return intent;
+	});
+
+	let _label: THC | undefined = $derived.by(() => {
+		if (!label) return undefined;
+		if (phase === "copied") return labelCopied ?? t("copied");
+		if (phase === "error") return labelError ?? t("copy_failed");
+		return label === true ? t("copy") : label;
+	});
+
+	let _icon: string | undefined = $derived.by(() => {
+		const base = icon === false ? undefined : (icon ?? iconCopy());
+		if (phase === "copied") {
+			if (iconCopied === false) return undefined;
+			return iconCopied ?? (icon === false ? undefined : iconCheck());
+		}
+		if (phase === "error") {
+			if (iconError === false) return undefined;
+			return iconError ?? (icon === false ? undefined : iconX());
+		}
+		return base;
+	});
+
+	let _iconOnly = $derived(!children && !label);
+
+	// The localized text for the current phase — the icon-only accessible name and
+	// the default tooltip content.
+	let _stateText = $derived(
+		phase === "copied" ? t("copied") : phase === "error" ? t("copy_failed") : t("copy")
+	);
+
+	// One stable config closure (the tooltip action keeps the function it was mounted
+	// with and re-reads it reactively) that branches on the prop inside.
+	const _tooltipConfig: TooltipConfig = () => {
+		if (tooltipProp === false || (tooltipProp === undefined && !_iconOnly)) {
+			return { enabled: false };
+		}
+		if (typeof tooltipProp === "function") {
+			const cfg = tooltipProp();
+			return { ...cfg, content: cfg.content ?? _stateText };
+		}
+		return {
+			enabled: true,
+			content:
+				phase === "idle" && typeof tooltipProp === "string" ? tooltipProp : _stateText,
+		};
+	};
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-copy-button", classProp));
+	let _classIcon = $derived(
+		unstyled ? classIconProp : twMerge("stuic-copy-button-icon", classIconProp)
+	);
+	let _classLabel = $derived(
+		unstyled ? classLabelProp : twMerge("stuic-copy-button-label", classLabelProp)
+	);
+</script>
+
+{#snippet content()}
+	{#if children}
+		{@render children({ state: phase, copied })}
+	{:else}
+		{#if _icon}
+			<span class={_classIcon} aria-hidden="true">{@html _icon}</span>
+		{/if}
+		{#if _label !== undefined}
+			<span class={_classLabel}><Thc thc={_label} /></span>
+		{/if}
+	{/if}
+{/snippet}
+
+<Button
+	bind:el
+	type="button"
+	class={_class}
+	intent={_intent}
+	{variant}
+	{size}
+	iconButton={_iconOnly}
+	{disabled}
+	{unstyled}
+	aria-label={_iconOnly ? _stateText : undefined}
+	tooltip={_tooltipConfig}
+	data-state={phase}
+	onclick={handleClick}
+	children={content}
+	{...rest}
+/>
+<!-- Announces the outcome to assistive tech. A sibling (not inside the button) so the
+     announcement never leaks into the button's accessible name. -->
+<span class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+	{announcement}
+</span>

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

@@ -0,0 +1,76 @@
+import type { Snippet } from "svelte";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { TranslateFn } from "../../types.js";
+import type { Props as ButtonProps } from "../Button/Button.svelte";
+import type { TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
+/** Feedback phase the button is in. Exposed as `data-state` and to `children`. */
+export type CopyButtonState = "idle" | "copied" | "error";
+/** What to copy: a string, or a getter (sync or async) resolved on click. */
+export type CopyButtonText = string | (() => string | Promise<string>);
+export interface Props extends Omit<ButtonProps, "children" | "onclick" | "href" | "target" | "checked" | "roleSwitch" | "iconSwap" | "x" | "nav" | "spinner" | "spinnerOnly" | "tooltip"> {
+    /**
+     * The text to copy. A getter is resolved on click (sync or async) — use it for
+     * values that are expensive to build or only known at click time. Keep async
+     * getters fast: browsers gate clipboard writes on the user gesture.
+     */
+    text: CopyButtonText;
+    /**
+     * Visible label next to the icon. Without it the button is icon-only and gets
+     * an accessible name from `t("copy")`. Pass `true` for the localized default
+     * ("Copy").
+     */
+    label?: THC | true;
+    /** Label while in the "copied" state (default: `t("copied")`). Only with `label`. */
+    labelCopied?: THC;
+    /** Label while in the "error" state (default: `t("copy_failed")`). Only with `label`. */
+    labelError?: THC;
+    /** Idle icon as an svg/html string (default: copy icon). `false` renders no icons. */
+    icon?: string | false;
+    /** "copied" icon (default: check). `false` hides it; omitted follows `icon === false`. */
+    iconCopied?: string | false;
+    /** "error" icon (default: ×). `false` hides it; omitted follows `icon === false`. */
+    iconError?: string | false;
+    /**
+     * How long the copied/error feedback stays (ms, default 2000). `0` keeps it until
+     * the next click.
+     */
+    feedbackDuration?: number;
+    /** Button intent while "copied" (default `"success"`). `false` keeps `intent`. */
+    intentCopied?: IntentColorKey | false;
+    /** Button intent while in "error" (default `"destructive"`). `false` keeps `intent`. */
+    intentError?: IntentColorKey | false;
+    /** Fired after a successful copy, with the text that was copied. */
+    onCopied?: (text: string) => void;
+    /** Fired when the copy failed (clipboard unavailable, permission denied, getter threw). */
+    onError?: (error: unknown) => void;
+    /**
+     * Plain click hook, called before copying. Call `e.preventDefault()` to skip the
+     * copy for this click.
+     */
+    onclick?: (e: MouseEvent) => void;
+    /**
+     * Tooltip (the stuic `tooltip` action), state-aware: it reads "Copy" while idle
+     * and flips to "Copied" / "Copy failed" with the feedback — live, while it is
+     * showing. `true` uses those localized texts; a string replaces the idle text
+     * only; a `TooltipConfig` gives full control (position, class, …) and only
+     * falls back to the state text when it returns no `content`; `false` disables.
+     * Default: on for icon-only buttons, off when a `label` or `children` already
+     * carry the feedback.
+     */
+    tooltip?: boolean | string | TooltipConfig;
+    /** i18n translate function (see `createCopyButtonT`) */
+    t?: TranslateFn;
+    /** Override the whole button content; receives the current feedback state. */
+    children?: Snippet<[{
+        state: CopyButtonState;
+        copied: boolean;
+    }]>;
+    /** Class for the icon wrapper */
+    classIcon?: string;
+    /** Class for the label wrapper */
+    classLabel?: string;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "el">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/CopyButton/README.md

@@ -0,0 +1,241 @@
+# CopyButton
+
+Click-to-copy button with built-in feedback. It **is a `Button`** (same `intent`,
+`variant`, `size` and theming) that writes `text` to the clipboard on click, flips to a
+"copied" state (check icon, success intent, localized label/name, screen-reader
+announcement) for a moment, and reports the outcome through `onCopied` / `onError`.
+
+The clipboard write itself is a standalone utility — `copyToClipboard()` — so the same
+logic can be used programmatically, without the button.
+
+## Props
+
+Everything `Button` accepts (except the toggle/link/spinner extras) plus:
+
+| Prop               | Type                                        | Default            | Description                                                                                     |
+| ------------------ | ------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------- |
+| `text`             | `string \| () => string \| Promise<string>` | required           | What to copy. A getter is resolved on click (sync or async)                                     |
+| `label`            | `THC \| true`                               | -                  | Visible label. Omit for an icon-only button (accessible name from `t("copy")`); `true` = "Copy" |
+| `labelCopied`      | `THC`                                       | `t("copied")`      | Label while copied (only with `label`)                                                          |
+| `labelError`       | `THC`                                       | `t("copy_failed")` | Label while in error (only with `label`)                                                        |
+| `icon`             | `string \| false`                           | copy icon          | Idle icon (svg/html string). `false` = no icons at all                                          |
+| `iconCopied`       | `string \| false`                           | check icon         | Copied icon                                                                                     |
+| `iconError`        | `string \| false`                           | × icon             | Error icon                                                                                      |
+| `feedbackDuration` | `number`                                    | `2000`             | How long (ms) the copied/error feedback stays. `0` = until the next click                       |
+| `intentCopied`     | `IntentColorKey \| false`                   | `"success"`        | Button intent while copied. `false` keeps `intent`                                              |
+| `intentError`      | `IntentColorKey \| false`                   | `"destructive"`    | Button intent while in error. `false` keeps `intent`                                            |
+| `onCopied`         | `(text: string) => void`                    | -                  | Fired after a successful copy with the copied text                                              |
+| `onError`          | `(error: unknown) => void`                  | -                  | Fired when the copy failed (clipboard unavailable / denied, getter threw)                       |
+| `onclick`          | `(e: MouseEvent) => void`                   | -                  | Runs before copying; `e.preventDefault()` skips the copy                                        |
+| `tooltip`          | `boolean \| string \| TooltipConfig`        | icon-only: `true`  | State-aware tooltip ("Copy" → "Copied"); see below                                              |
+| `t`                | `TranslateFn`                               | English            | i18n (see below)                                                                                |
+| `variant`          | `ButtonVariant`                             | `"ghost"`          | Button variant (CopyButton's default differs from Button's `"solid"`)                           |
+| `size`             | `ButtonSize`                                | `"sm"`             | Button size (CopyButton's default differs from Button's `"md"`)                                 |
+| `unstyled`         | `boolean`                                   | `false`            | Skip all default styling                                                                        |
+| `class`            | `string`                                    | -                  | Additional CSS classes (merged via twMerge)                                                     |
+| `classIcon`        | `string`                                    | -                  | Class for the icon wrapper                                                                      |
+| `classLabel`       | `string`                                    | -                  | Class for the label wrapper                                                                     |
+| `el`               | `HTMLElement`                               | -                  | Button element reference (bindable)                                                             |
+
+## Snippet Props
+
+| Snippet    | Description                                                                                    |
+| ---------- | ---------------------------------------------------------------------------------------------- |
+| `children` | Override the whole button content. Receives `{ state: "idle" \| "copied" \| "error", copied }` |
+
+## Usage
+
+### Icon-only (default)
+
+```svelte
+<script lang="ts">
+	import { CopyButton } from "@marianmeres/stuic";
+	const apiKey = "sk-live-…";
+</script>
+
+<code>{apiKey}</code>
+<CopyButton text={apiKey} />
+```
+
+### With a label
+
+```svelte
+<!-- "Copy" → "Copied" (localized defaults) -->
+<CopyButton text={url} label />
+
+<!-- custom labels, regular button look -->
+<CopyButton
+	text={url}
+	label="Copy link"
+	labelCopied="Link copied!"
+	variant="outline"
+	size="md"
+/>
+```
+
+### Tooltip
+
+Icon-only buttons get a tooltip out of the box (the stuic `tooltip` action): it reads
+"Copy" on hover and flips to "Copied" / "Copy failed" live, while it is showing. With a
+`label` or `children` the visible text already carries the feedback, so the tooltip is
+off unless asked for.
+
+```svelte
+<!-- default for icon-only: "Copy" → "Copied" -->
+<CopyButton text={apiKey} />
+
+<!-- custom idle text; the feedback texts stay localized -->
+<CopyButton text={apiKey} tooltip="Copy API key" />
+
+<!-- labeled button, tooltip forced on -->
+<CopyButton text={url} label="Copy link" tooltip />
+
+<!-- full control: any TooltipConfig; without `content` it still gets the state text -->
+<CopyButton text={apiKey} tooltip={() => ({ position: "bottom", class: "font-mono" })} />
+
+<!-- off -->
+<CopyButton text={apiKey} tooltip={false} />
+```
+
+Tooltips follow the global `setTooltipsEnabled()` switch (auto-off on touch devices) and
+need CSS anchor positioning in the browser, like every stuic tooltip.
+
+### Notify when copied
+
+The component announces the result to assistive tech by itself (a visually hidden live
+region). For a visible app-level notification, hook `onCopied` / `onError` into your
+notifications stack:
+
+```svelte
+<script lang="ts">
+	import { CopyButton, Notifications, NotificationsStack } from "@marianmeres/stuic";
+	const notifications = new NotificationsStack();
+</script>
+
+<CopyButton
+	text={shareUrl}
+	label="Copy link"
+	onCopied={() => notifications.success("Link copied to clipboard")}
+	onError={() => notifications.error("Could not copy — please copy the link manually")}
+/>
+
+<Notifications {notifications} />
+```
+
+### Lazy / async text
+
+Pass a getter when the value is expensive to build or only known at click time. Keep
+it fast — browsers tie clipboard writes to the user gesture, and Safari is strict
+about it.
+
+```svelte
+<CopyButton text={() => JSON.stringify(exportData(), null, 2)} label="Copy JSON" />
+
+<CopyButton
+	text={async () => (await fetch("/api/share-link")).text()}
+	label="Copy share link"
+/>
+```
+
+### Feedback tuning
+
+```svelte
+<!-- keep the base intent while copied, and stay "copied" until the next click -->
+<CopyButton
+	text={x}
+	intent="primary"
+	variant="solid"
+	intentCopied={false}
+	feedbackDuration={0}
+	label
+/>
+
+<!-- no icons, text only -->
+<CopyButton text={x} icon={false} label="Copy" labelCopied="✓ Copied" />
+```
+
+### Custom content
+
+```svelte
+<CopyButton text={x} variant="soft">
+	{#snippet children({ state, copied })}
+		{copied ? "🎉 Got it" : state === "error" ? "😬 Nope" : "Grab it"}
+	{/snippet}
+</CopyButton>
+```
+
+### Programmatic copy
+
+`copyToClipboard(text)` is the same write the button performs: the async Clipboard
+API with a `document.execCommand("copy")` fallback (insecure contexts, older
+browsers, a rejected async write). It resolves once the text is on the clipboard and
+rejects only when every path failed. Call it from a user gesture.
+
+```ts
+import { copyToClipboard, isCopyToClipboardSupported } from "@marianmeres/stuic";
+
+async function share() {
+	try {
+		await copyToClipboard(location.href);
+		notifications.success("Copied");
+	} catch (e) {
+		notifications.error("Copy failed");
+	}
+}
+
+// decide up-front whether to offer copying at all (always false during SSR)
+if (isCopyToClipboardSupported()) {
+	/* … */
+}
+```
+
+### i18n
+
+English is built in; Slovak is bundled and opt-in. Any partial catalog works — missing
+keys fall back to English.
+
+```svelte
+<script lang="ts">
+	import {
+		CopyButton,
+		createCopyButtonT,
+		COPY_BUTTON_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createCopyButtonT(COPY_BUTTON_MESSAGES_SK);
+</script>
+
+<CopyButton text={x} {t} />
+```
+
+| Key           | English       | Used for                                            |
+| ------------- | ------------- | --------------------------------------------------- |
+| `copy`        | `Copy`        | Idle accessible name (icon-only) and `label={true}` |
+| `copied`      | `Copied`      | Copied name/label and the live announcement         |
+| `copy_failed` | `Copy failed` | Error name/label and the live announcement          |
+
+## Accessibility
+
+- Icon-only mode gets an `aria-label` that tracks the state (`Copy` → `Copied` /
+  `Copy failed`) plus a tooltip with the same text. With a `label`, the visible text is
+  the name.
+- A visually hidden `role="status"` live region next to the button announces the
+  outcome, so screen-reader users hear "Copied" without the icon.
+- The feedback intent swap is a color cue only — the icon and the text change too.
+- The icon wrapper is `aria-hidden`.
+
+## CSS Variables
+
+The button surface (colors, padding, radius, focus ring) themes via the
+`--stuic-button-*` tokens. CopyButton adds:
+
+| Variable                                | Default  | Description                                                      |
+| --------------------------------------- | -------- | ---------------------------------------------------------------- |
+| `--stuic-copy-button-icon-size`         | `1.25em` | Icon size (any `svg` inside the icon wrapper)                    |
+| `--stuic-copy-button-icon-pop-duration` | `200ms`  | Length of the icon "pop" when the state changes                  |
+| `--stuic-copy-button-icon-pop-scale`    | `0.6`    | Scale the pop starts from (`prefers-reduced-motion` disables it) |
+
+## Data Attributes
+
+- `data-state` - `"idle" | "copied" | "error"` (kept even when `unstyled`)
+- plus everything `Button` sets (`data-variant`, `data-size`, `data-intent`,
+  `data-icon-button` in icon-only mode, …)

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

@@ -0,0 +1,17 @@
+import type { CopyButtonMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `CopyButton`. 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 { CopyButton, createCopyButtonT, COPY_BUTTON_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createCopyButtonT(COPY_BUTTON_MESSAGES_SK);
+ * </script>
+ *
+ * <CopyButton text={url} {t} />
+ * ```
+ */
+export declare const COPY_BUTTON_MESSAGES_SK: CopyButtonMessages;

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

@@ -0,0 +1,20 @@
+/**
+ * Slovak message catalog for `CopyButton`. 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 { CopyButton, createCopyButtonT, COPY_BUTTON_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createCopyButtonT(COPY_BUTTON_MESSAGES_SK);
+ * </script>
+ *
+ * <CopyButton text={url} {t} />
+ * ```
+ */
+export const COPY_BUTTON_MESSAGES_SK = {
+    copy: "Kopírovať",
+    copied: "Skopírované",
+    copy_failed: "Kopírovanie zlyhalo",
+};