@marianmeres/stuic 3.167.0 → 3.168.0

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

@@ -0,0 +1,35 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `CopyButton`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ */
+export declare const COPY_BUTTON_MESSAGES_EN: {
+    /** Idle: accessible name of the icon-only button, and the default `label` */
+    copy: string;
+    /** After a successful copy: label, accessible name, and the live announcement */
+    copied: string;
+    /** After a failed copy: label, accessible name, and the live announcement */
+    copy_failed: string;
+};
+/** Every message key `CopyButton` may look up. */
+export type CopyButtonMessageKey = keyof typeof COPY_BUTTON_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type CopyButtonMessages = Record<CopyButtonMessageKey, string>;
+/**
+ * Builds the `t` prop of `CopyButton` 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 { CopyButton, createCopyButtonT, COPY_BUTTON_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createCopyButtonT(COPY_BUTTON_MESSAGES_SK);
+ * </script>
+ *
+ * <CopyButton text={url} {t} />
+ * ```
+ */
+export declare function createCopyButtonT(messages: Partial<CopyButtonMessages> | Record<string, string>, fallbackMessages?: Partial<CopyButtonMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/CopyButton/i18n.js

@@ -0,0 +1,43 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `CopyButton`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ */
+export const COPY_BUTTON_MESSAGES_EN = {
+    /** Idle: accessible name of the icon-only button, and the default `label` */
+    copy: "Copy",
+    /** After a successful copy: label, accessible name, and the live announcement */
+    copied: "Copied",
+    /** After a failed copy: label, accessible name, and the live announcement */
+    copy_failed: "Copy failed",
+};
+/**
+ * Builds the `t` prop of `CopyButton` 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 { CopyButton, createCopyButtonT, COPY_BUTTON_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createCopyButtonT(COPY_BUTTON_MESSAGES_SK);
+ * </script>
+ *
+ * <CopyButton text={url} {t} />
+ * ```
+ */
+export function createCopyButtonT(messages, fallbackMessages = COPY_BUTTON_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 = createCopyButtonT(COPY_BUTTON_MESSAGES_EN);

package/dist/components/CopyButton/index.css

@@ -0,0 +1,67 @@
+/* ============================================================================
+   COPY BUTTON COMPONENT TOKENS
+   The button itself IS a Button — colors, sizes, radius and focus ring theme via
+   the --stuic-button-* tokens. These tokens only cover the icon and the feedback
+   "pop" when the state flips to copied/error.
+   Override globally: :root { --stuic-copy-button-icon-size: 1em; }
+   Override locally:  <CopyButton style="--stuic-copy-button-icon-size: 1em;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Icon (any svg inside the icon wrapper is normalized to this) */
+	--stuic-copy-button-icon-size: 1.25em;
+
+	/* Feedback pop: the icon scales up from this factor when the state changes */
+	--stuic-copy-button-icon-pop-duration: 200ms;
+	--stuic-copy-button-icon-pop-scale: 0.6;
+}
+
+@layer components {
+	/* ============================================================================
+	   ICON
+	   ============================================================================ */
+
+	.stuic-copy-button-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+	}
+
+	.stuic-copy-button-icon svg {
+		width: var(--stuic-copy-button-icon-size);
+		height: var(--stuic-copy-button-icon-size);
+	}
+
+	/* ============================================================================
+	   FEEDBACK POP
+	   Runs once when [data-state] flips to copied/error (the selector starts
+	   matching). Re-clicking within the feedback window keeps the state and so
+	   does not replay it.
+	   ============================================================================ */
+
+	.stuic-copy-button[data-state="copied"] .stuic-copy-button-icon,
+	.stuic-copy-button[data-state="error"] .stuic-copy-button-icon {
+		animation: stuic-copy-button-icon-pop var(--stuic-copy-button-icon-pop-duration)
+			ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.stuic-copy-button[data-state="copied"] .stuic-copy-button-icon,
+		.stuic-copy-button[data-state="error"] .stuic-copy-button-icon {
+			animation: none;
+		}
+	}
+}
+
+@keyframes stuic-copy-button-icon-pop {
+	from {
+		transform: scale(var(--stuic-copy-button-icon-pop-scale));
+		opacity: 0.4;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}

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

@@ -0,0 +1,3 @@
+export { default as CopyButton, type Props as CopyButtonProps, type CopyButtonState, type CopyButtonText, } from "./CopyButton.svelte";
+export { createCopyButtonT, COPY_BUTTON_MESSAGES_EN, type CopyButtonMessageKey, type CopyButtonMessages, } from "./i18n.js";
+export { COPY_BUTTON_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/CopyButton/index.js

@@ -0,0 +1,3 @@
+export { default as CopyButton, } from "./CopyButton.svelte";
+export { createCopyButtonT, COPY_BUTTON_MESSAGES_EN, } from "./i18n.js";
+export { COPY_BUTTON_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/DataTable/DataTable.svelte

@@ -235,6 +235,8 @@
 	import { Breakpoint } from "../../utils/breakpoint.svelte.js";
 	import Spinner from "../Spinner/Spinner.svelte";
 	import Button from "../Button/Button.svelte";
+	import EmptyState from "../EmptyState/EmptyState.svelte";
+	import Pagination from "../Pagination/Pagination.svelte";
 	import Thc, { isTHCNotEmpty, getTHCStringContent } from "../Thc/Thc.svelte";
 
 	let {
@@ -517,6 +519,25 @@
 	{/if}
 {/snippet}
 
+<!--
+	The empty state, shared by both layouts. The built-in one is an `EmptyState`; its
+	typography is pulled back to table chrome (muted, cell-sized, no headline weight) by
+	the `--stuic-empty-state-*` overrides in index.css, so it reads exactly as the bare
+	`t("no_data")` string it replaces. An `empty` snippet still replaces it whole.
+-->
+{#snippet emptyBody()}
+	{#if empty}
+		{@render empty()}
+	{:else}
+		<EmptyState
+			title={t("no_data")}
+			size="sm"
+			{unstyled}
+			class={!unstyled ? "stuic-data-table-empty-state" : undefined}
+		/>
+	{/if}
+{/snippet}
+
 <!--
 	Selection bar -- one strip carrying the selection status, the consumer's
 	`batchActions`, and the select-all-across-pages offer. Deliberately a single element
@@ -668,11 +689,7 @@
 								colspan={columns.length + (selectable ? 1 : 0)}
 								class={!unstyled ? "stuic-data-table-empty" : undefined}
 							>
-								{#if empty}
-									{@render empty()}
-								{:else}
-									{t("no_data")}
-								{/if}
+								{@render emptyBody()}
 							</td>
 						</tr>
 					{/each}
@@ -749,11 +766,7 @@
 				{/if}
 			{:else}
 				<div class={!unstyled ? "stuic-data-table-empty" : undefined}>
-					{#if empty}
-						{@render empty()}
-					{:else}
-						{t("no_data")}
-					{/if}
+					{@render emptyBody()}
 				</div>
 			{/each}
 		</div>
@@ -766,30 +779,24 @@
 		</div>
 	{/if}
 
-	<!-- Paging -->
+	<!--
+		Paging -- the built-in pager IS a `Pagination` in its default "compact" variant,
+		which is exactly the prev / "Page X of Y" / next control this used to inline.
+		`.stuic-data-table-paging` moves onto its `<nav>` rather than wrapping it, so the
+		region keeps its class (and its `--stuic-data-table-paging-*` tokens, re-pointed
+		at Pagination's in index.css) without an extra node.
+
+		Note `Pagination`'s own single-page rule is left at its default: `renderPager`
+		already encodes it, plus `showPager`.
+	-->
 	{#if renderPager && paging}
-		<div class={!unstyled ? "stuic-data-table-paging" : undefined}>
-			<Button
-				variant="ghost"
-				size="sm"
-				disabled={!paging.hasPrevious}
-				onclick={() => onPageChange?.(paging!.previousOffset)}
-				aria-label={t("previous_page")}
-			>
-				&lsaquo; {t("previous_page")}
-			</Button>
-			<span class={!unstyled ? "stuic-data-table-paging-info" : undefined}>
-				{t("page_x_of_y", { page: paging.currentPage, pageCount: paging.pageCount })}
-			</span>
-			<Button
-				variant="ghost"
-				size="sm"
-				disabled={!paging.hasNext}
-				onclick={() => onPageChange?.(paging!.nextOffset)}
-				aria-label={t("next_page")}
-			>
-				{t("next_page")} &rsaquo;
-			</Button>
-		</div>
+		<Pagination
+			{paging}
+			{onPageChange}
+			{t}
+			{unstyled}
+			class={!unstyled ? "stuic-data-table-paging" : undefined}
+			classInfo={!unstyled ? "stuic-data-table-paging-info" : undefined}
+		/>
 	{/if}
 </div>

package/dist/components/DataTable/README.md

@@ -75,6 +75,50 @@ so your own control is the single thing driving the offset; don't wire both.
 (The node's class stays `.stuic-data-table-paging` and its `--stuic-data-table-paging-*`
 tokens are unchanged -- `showPager` names the control, the CSS names the region.)
 
+### What the built-in pager and empty state are made of
+
+Neither is bespoke markup any more:
+
+- the pager is a [`Pagination`](../Pagination/README.md) in its default `"compact"`
+  variant, rendered with `.stuic-data-table-paging` on its own `<nav>`;
+- the default empty state (no `empty` snippet) is an
+  [`EmptyState`](../EmptyState/README.md) at `size="sm"`, carrying the marker class
+  `.stuic-data-table-empty-state` inside the usual `.stuic-data-table-empty` cell.
+
+The table's `--stuic-data-table-*` tokens are re-pointed at the inner components' own
+tokens, so an existing override still drives them, and the `t` you pass `DataTable` is
+the one the pager uses -- the shared `previous_page`, `next_page` and `page_x_of_y`
+keys are identical in both catalogs, so nothing to wire.
+
+Two things did change:
+
+- the pager is a `<nav>` landmark named by the new `pagination` key, where it used to
+  be a plain `<div>`. Same buttons, same labels, same `onPageChange` offsets;
+- the built-in empty state now gets the `2rem` of padding `.stuic-data-table-empty` has
+  always declared. On desktop it never actually got it (the more specific
+  `.stuic-data-table td` padding rule won), so that cell is taller than it was, and now
+  matches the mobile card layout, which already had it. Typography is unchanged.
+
+An `empty` snippet is untouched by any of this -- it replaces the built-in `EmptyState`
+outright and keeps the container padding it has always had. Rendering your own
+`EmptyState` in it is a perfectly good way to get an icon, a description and a CTA:
+
+```svelte
+<DataTable {columns} {data}>
+	{#snippet empty()}
+		<EmptyState
+			icon={{ html: iconSearch({ size: 48 }) }}
+			title="No matches"
+			description="Try widening the filter."
+		>
+			{#snippet actions()}
+				<Button onclick={resetFilters}>Reset filters</Button>
+			{/snippet}
+		</EmptyState>
+	{/snippet}
+</DataTable>
+```
+
 ### With Selection
 
 ```svelte
@@ -437,6 +481,7 @@ const t = createDataTableT({ ...DATA_TABLE_MESSAGES_SK, no_data: "Nič tu nie je
 | `previous_page`        | Prev                               | Paging                               |
 | `next_page`            | Next                               | Paging                               |
 | `page_x_of_y`          | Page {page} of {pageCount}         | Paging                               |
+| `pagination`           | Pagination                         | Pager `<nav>` `aria-label`           |
 | `no_data`              | No data                            | Empty state (no `empty` snippet)     |
 | `select_all_rows`      | Select all rows on this page       | Header checkbox `aria-label`         |
 | `select_row`           | Select row                         | Row checkbox `aria-label`            |

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

@@ -17,6 +17,7 @@ export const DATA_TABLE_MESSAGES_SK = {
     previous_page: "Späť",
     next_page: "Ďalej",
     page_x_of_y: "Strana {page} z {pageCount}",
+    pagination: "Stránkovanie",
     no_data: "Žiadne údaje",
     select_all_rows: "Vybrať všetky riadky na tejto strane",
     select_row: "Vybrať riadok",

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

@@ -9,6 +9,7 @@ export declare const DATA_TABLE_MESSAGES_EN: {
     previous_page: string;
     next_page: string;
     page_x_of_y: string;
+    pagination: string;
     no_data: string;
     select_all_rows: string;
     select_row: string;

package/dist/components/DataTable/i18n.js

@@ -10,6 +10,9 @@ export const DATA_TABLE_MESSAGES_EN = {
     previous_page: "Prev",
     next_page: "Next",
     page_x_of_y: "Page {page} of {pageCount}",
+    // The pager is a `Pagination`; this is its `<nav>` accessible name. Identical to
+    // `PAGINATION_MESSAGES_EN` so one merged catalog can still serve both components.
+    pagination: "Pagination",
     no_data: "No data",
     select_all_rows: "Select all rows on this page",
     select_row: "Select row",

package/dist/components/DataTable/index.css

@@ -224,18 +224,31 @@
 	   PAGING
 	   ============================================================================ */
 
+	/*
+	   The built-in pager IS a `Pagination` (compact variant), so these two classes now
+	   sit on Pagination's own nodes alongside `.stuic-pagination`. They add the region's
+	   top padding (which Pagination has no notion of) and re-point Pagination's tokens
+	   at the table's -- as custom properties rather than plain declarations on purpose:
+	   an existing `--stuic-data-table-paging-*` / `--stuic-data-table-cell-font-size`
+	   override keeps driving the pager, with no dependence on which of the two
+	   same-specificity rules happens to win the cascade. The layout declarations below
+	   are a deliberate duplicate of Pagination's own, so the region class stays
+	   self-sufficient.
+	*/
 	.stuic-data-table-paging {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--stuic-data-table-paging-gap);
 		padding-top: var(--stuic-data-table-paging-padding-y);
+
+		--stuic-pagination-gap: var(--stuic-data-table-paging-gap);
 	}
 
 	.stuic-data-table-paging-info {
-		font-size: var(--stuic-data-table-cell-font-size);
-		color: var(--stuic-data-table-header-color);
 		white-space: nowrap;
+
+		--stuic-pagination-info-font-size: var(--stuic-data-table-cell-font-size);
+		--stuic-pagination-info-text: var(--stuic-data-table-header-color);
 	}
 
 	/* ============================================================================
@@ -322,6 +335,31 @@
 		justify-content: center;
 	}
 
+	/*
+	   The built-in empty state is an `EmptyState`, which brings its own padding -- which
+	   would otherwise stack on the container's. Keyed on the marker class rather than on
+	   `.stuic-empty-state` so that an `empty` snippet rendering an EmptyState of its own
+	   is left alone: it keeps the container padding it has always had, and the
+	   component's own look.
+	*/
+	.stuic-data-table-empty:has(> .stuic-data-table-empty-state) {
+		padding: 0;
+	}
+
+	/*
+	   Pull the built-in EmptyState back to table chrome: the "No data" line is a cell
+	   note, not a headline. Fed from the tokens the rest of the table uses, so it stays
+	   in sync with a consumer's overrides.
+	*/
+	.stuic-data-table-empty-state {
+		--stuic-empty-state-padding-sm: 2rem;
+		--stuic-empty-state-title-font-size-sm: var(--stuic-data-table-cell-font-size);
+		/* NOT `inherit`: a CSS-wide keyword in a custom property applies to the property
+		   itself, so it would inherit the :root value (semibold) rather than the cell's. */
+		--stuic-empty-state-title-font-weight: normal;
+		--stuic-empty-state-title-text: var(--stuic-data-table-header-color);
+	}
+
 	/* ============================================================================
 	   MOBILE CARDS
 	   ============================================================================ */

package/dist/components/EmptyState/EmptyState.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export type EmptyStateVariant = "plain" | "outline" | "dashed";
+	export type EmptyStateSize = "sm" | "md" | "lg";
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"children" | "title"
+	> {
+		/** Icon area content (typically `{ html: iconSearch({ size: 48 }) }`) */
+		icon?: THC;
+		/** Title (the "Nothing here yet" headline) */
+		title?: THC;
+		/** Short supporting description below the title */
+		description?: THC;
+		/** Container treatment */
+		variant?: EmptyStateVariant;
+		/** Size preset (padding, icon and typography scale) */
+		size?: EmptyStateSize;
+		/** CTA area below the description (buttons, links) */
+		actions?: Snippet;
+		/** Override the entire default layout */
+		children?: Snippet;
+		/** Override the icon area */
+		renderIcon?: Snippet;
+		/** Skip all default styling */
+		unstyled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Class for the icon area */
+		classIcon?: string;
+		/** Class for the title */
+		classTitle?: string;
+		/** Class for the description */
+		classDescription?: string;
+		/** Class for the actions area */
+		classActions?: string;
+		/** Bindable element reference */
+		el?: HTMLElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Thc from "../Thc/Thc.svelte";
+
+	let {
+		icon,
+		title,
+		description,
+		variant = "plain",
+		size = "md",
+		actions,
+		children,
+		renderIcon,
+		unstyled = false,
+		class: classProp,
+		classIcon: classIconProp,
+		classTitle: classTitleProp,
+		classDescription: classDescriptionProp,
+		classActions: classActionsProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let _class = $derived(unstyled ? classProp : twMerge("stuic-empty-state", classProp));
+	let _classIcon = $derived(
+		unstyled ? classIconProp : twMerge("stuic-empty-state-icon", classIconProp)
+	);
+	let _classTitle = $derived(
+		unstyled ? classTitleProp : twMerge("stuic-empty-state-title", classTitleProp)
+	);
+	let _classDescription = $derived(
+		unstyled
+			? classDescriptionProp
+			: twMerge("stuic-empty-state-description", classDescriptionProp)
+	);
+	let _classActions = $derived(
+		unstyled ? classActionsProp : twMerge("stuic-empty-state-actions", classActionsProp)
+	);
+</script>
+
+<div
+	bind:this={el}
+	class={_class}
+	data-variant={!unstyled ? variant : undefined}
+	data-size={!unstyled ? size : undefined}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if renderIcon || icon}
+			<div class={_classIcon}>
+				{#if renderIcon}
+					{@render renderIcon()}
+				{:else if icon}
+					<Thc thc={icon} />
+				{/if}
+			</div>
+		{/if}
+		{#if title}
+			<div class={_classTitle}>
+				<Thc thc={title} />
+			</div>
+		{/if}
+		{#if description}
+			<div class={_classDescription}>
+				<Thc thc={description} />
+			</div>
+		{/if}
+		{#if actions}
+			<div class={_classActions}>
+				{@render actions()}
+			</div>
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { THC } from "../Thc/Thc.svelte";
+export type EmptyStateVariant = "plain" | "outline" | "dashed";
+export type EmptyStateSize = "sm" | "md" | "lg";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** Icon area content (typically `{ html: iconSearch({ size: 48 }) }`) */
+    icon?: THC;
+    /** Title (the "Nothing here yet" headline) */
+    title?: THC;
+    /** Short supporting description below the title */
+    description?: THC;
+    /** Container treatment */
+    variant?: EmptyStateVariant;
+    /** Size preset (padding, icon and typography scale) */
+    size?: EmptyStateSize;
+    /** CTA area below the description (buttons, links) */
+    actions?: Snippet;
+    /** Override the entire default layout */
+    children?: Snippet;
+    /** Override the icon area */
+    renderIcon?: Snippet;
+    /** Skip all default styling */
+    unstyled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Class for the icon area */
+    classIcon?: string;
+    /** Class for the title */
+    classTitle?: string;
+    /** Class for the description */
+    classDescription?: string;
+    /** Class for the actions area */
+    classActions?: string;
+    /** Bindable element reference */
+    el?: HTMLElement;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "el">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;