@marianmeres/stuic 3.166.0 → 3.168.0

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",
+};

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

@@ -41,6 +41,18 @@
 		paging?: PagingCalcResult;
 		/** Callback when the user navigates to a different page (receives new offset) */
 		onPageChange?: (offset: number) => void;
+		/**
+		 * Render the built-in pager. Set `false` to keep feeding `paging` -- which the
+		 * select-all-across-pages banner, `effectiveCount` and `totalCount` need -- while
+		 * paging the data from your own control elsewhere on the page.
+		 *
+		 * With the pager hidden `onPageChange` never fires (nothing else calls it), so the
+		 * caller's own control is the single thing driving the offset -- don't wire both.
+		 *
+		 * Orthogonal to the existing "one page of results needs no pager" rule: a single-page
+		 * `paging` renders no pager either way.
+		 */
+		showPager?: boolean;
 
 		/** Enable row selection checkboxes */
 		selectable?: boolean;
@@ -223,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 {
@@ -231,6 +245,7 @@
 		getRowId = (_row: T, index: number) => index,
 		paging,
 		onPageChange,
+		showPager = true,
 		selectable = false,
 		selected = $bindable(new Set()),
 		selectOnRowClick = false,
@@ -265,7 +280,9 @@
 	let isDesktop = $derived(small ? false : bp.md);
 
 	// --- Paging ---
-	let showPaging = $derived(paging != null && paging.pageCount > 1);
+	// The prop only ADDs to the existing rule -- a single-page result still renders no
+	// pager, regardless of `showPager`.
+	let renderPager = $derived(showPager && paging != null && paging.pageCount > 1);
 
 	// --- Selection ---
 	let allRowIds = $derived(data.map((row, i) => getRowId(row, i)));
@@ -502,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
@@ -653,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}
@@ -734,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>
@@ -751,30 +779,24 @@
 		</div>
 	{/if}
 
-	<!-- Paging -->
-	{#if showPaging && 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>
+	<!--
+		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}
+		<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/DataTable.svelte.d.ts

@@ -32,6 +32,18 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     paging?: PagingCalcResult;
     /** Callback when the user navigates to a different page (receives new offset) */
     onPageChange?: (offset: number) => void;
+    /**
+     * Render the built-in pager. Set `false` to keep feeding `paging` -- which the
+     * select-all-across-pages banner, `effectiveCount` and `totalCount` need -- while
+     * paging the data from your own control elsewhere on the page.
+     *
+     * With the pager hidden `onPageChange` never fires (nothing else calls it), so the
+     * caller's own control is the single thing driving the offset -- don't wire both.
+     *
+     * Orthogonal to the existing "one page of results needs no pager" rule: a single-page
+     * `paging` renders no pager either way.
+     */
+    showPager?: boolean;
     /** Enable row selection checkboxes */
     selectable?: boolean;
     /** Set of selected row IDs (bindable) */

package/dist/components/DataTable/README.md

@@ -46,6 +46,79 @@ DataTable integrates with [`@marianmeres/paging-store`](https://github.com/maria
 />
 ```
 
+A single-page result renders no pager -- there is nothing to page through.
+
+#### Bringing your own pager
+
+`paging` does two unrelated jobs: it renders the built-in pager, and it feeds the
+select-all-across-pages banner, `effectiveCount` and `totalCount`. `showPager={false}`
+asks for the second without the first, for a page that already pages the data from its own
+control (one with a rows-per-page selector, say):
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	paging={pagingResult}
+	showPager={false}
+	selectable
+	allowSelectAllPages
+/>
+
+<MyOwnPager … />
+```
+
+The pager node is then absent from the DOM, not hidden -- it takes no space and holds no
+focusable buttons. `onPageChange` never fires while it is hidden (nothing else calls it),
+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
@@ -311,39 +384,40 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ## Props
 
-| Prop                  | Type                                  | Default       | Description                                                                |
-| --------------------- | ------------------------------------- | ------------- | -------------------------------------------------------------------------- |
-| `columns`             | `DataTableColumn<T>[]`                | required      | Column definitions                                                         |
-| `data`                | `T[]`                                 | required      | Array of row data                                                          |
-| `getRowId`            | `(row, index) => string \| number`    | `(_, i) => i` | Row ID extractor                                                           |
-| `paging`              | `PagingCalcResult`                    | -             | Paging state (from `@marianmeres/paging-store`)                            |
-| `onPageChange`        | `(offset: number) => void`            | -             | Called with the new offset when the user navigates pages                   |
-| `selectable`          | `boolean`                             | `false`       | Enable selection checkboxes                                                |
-| `selected`            | `Set<string \| number>`               | `new Set()`   | Selected row IDs (bindable)                                                |
-| `selectOnRowClick`    | `boolean`                             | `false`       | Clicking anywhere on a row toggles its selection                           |
-| `selectDisabledBy`    | `(row, index) => boolean`             | -             | Return `true` to disable selection for a specific row                      |
-| `allowSelectAllPages` | `boolean`                             | `false`       | Show a banner offering "select all results" across paged data              |
-| `selectedAll`         | `boolean`                             | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection   |
-| `excluded`            | `Set<string \| number>`               | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                      |
-| `reserveBatchBar`     | `boolean`                             | `true`        | Keep the selection bar in the layout while nothing is selected             |
-| `onRowClick`          | `(row, index) => void`                | -             | Row click callback                                                         |
-| `rowHref`             | `(row, index) => string \| undefined` | -             | Wrap the lead cell's content in an `<a href>` (keyboard/⌘-click reachable) |
-| `rowHrefColumn`       | `string`                              | first column  | Which column is the lead cell for `rowHref`                                |
-| `classRowLink`        | `string`                              | -             | Extra classes for the `rowHref` anchor                                     |
-| `rowActivatable`      | `boolean`                             | `false`       | Make the desktop `<tr>` focusable + `Enter`-activatable (no `role`)        |
-| `rowLabel`            | `(row, index) => string \| undefined` | -             | Accessible name for an activatable row                                     |
-| `loading`             | `boolean`                             | `false`       | Show loading overlay                                                       |
-| `small`               | `boolean`                             | `false`       | Force mobile/card layout regardless of viewport                            |
-| `t`                   | `TranslateFn`                         | built-in      | Optional translation function                                              |
-| `cell`                | `Snippet`                             | -             | Custom cell renderer (desktop + mobile)                                    |
-| `row`                 | `Snippet`                             | -             | Custom desktop `<tr>` renderer (overrides default row)                     |
-| `mobileRow`           | `Snippet`                             | -             | Custom mobile card renderer                                                |
-| `batchActions`        | `Snippet`                             | -             | Selection bar content while something is selected                          |
-| `selectAllBanner`     | `Snippet`                             | -             | Override default "select all across pages" offer                           |
-| `empty`               | `Snippet`                             | -             | Custom empty state                                                         |
-| `unstyled`            | `boolean`                             | `false`       | Skip default styling                                                       |
-| `class`               | `string`                              | -             | Additional CSS classes                                                     |
-| `el`                  | `HTMLDivElement`                      | -             | Bindable element ref                                                       |
+| Prop                  | Type                                  | Default       | Description                                                                          |
+| --------------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------ |
+| `columns`             | `DataTableColumn<T>[]`                | required      | Column definitions                                                                   |
+| `data`                | `T[]`                                 | required      | Array of row data                                                                    |
+| `getRowId`            | `(row, index) => string \| number`    | `(_, i) => i` | Row ID extractor                                                                     |
+| `paging`              | `PagingCalcResult`                    | -             | Paging state (from `@marianmeres/paging-store`)                                      |
+| `onPageChange`        | `(offset: number) => void`            | -             | Called with the new offset when the user navigates pages                             |
+| `showPager`           | `boolean`                             | `true`        | Render the built-in pager. `false` keeps `paging` feeding the select-all banner only |
+| `selectable`          | `boolean`                             | `false`       | Enable selection checkboxes                                                          |
+| `selected`            | `Set<string \| number>`               | `new Set()`   | Selected row IDs (bindable)                                                          |
+| `selectOnRowClick`    | `boolean`                             | `false`       | Clicking anywhere on a row toggles its selection                                     |
+| `selectDisabledBy`    | `(row, index) => boolean`             | -             | Return `true` to disable selection for a specific row                                |
+| `allowSelectAllPages` | `boolean`                             | `false`       | Show a banner offering "select all results" across paged data                        |
+| `selectedAll`         | `boolean`                             | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection             |
+| `excluded`            | `Set<string \| number>`               | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)                                |
+| `reserveBatchBar`     | `boolean`                             | `true`        | Keep the selection bar in the layout while nothing is selected                       |
+| `onRowClick`          | `(row, index) => void`                | -             | Row click callback                                                                   |
+| `rowHref`             | `(row, index) => string \| undefined` | -             | Wrap the lead cell's content in an `<a href>` (keyboard/⌘-click reachable)           |
+| `rowHrefColumn`       | `string`                              | first column  | Which column is the lead cell for `rowHref`                                          |
+| `classRowLink`        | `string`                              | -             | Extra classes for the `rowHref` anchor                                               |
+| `rowActivatable`      | `boolean`                             | `false`       | Make the desktop `<tr>` focusable + `Enter`-activatable (no `role`)                  |
+| `rowLabel`            | `(row, index) => string \| undefined` | -             | Accessible name for an activatable row                                               |
+| `loading`             | `boolean`                             | `false`       | Show loading overlay                                                                 |
+| `small`               | `boolean`                             | `false`       | Force mobile/card layout regardless of viewport                                      |
+| `t`                   | `TranslateFn`                         | built-in      | Optional translation function                                                        |
+| `cell`                | `Snippet`                             | -             | Custom cell renderer (desktop + mobile)                                              |
+| `row`                 | `Snippet`                             | -             | Custom desktop `<tr>` renderer (overrides default row)                               |
+| `mobileRow`           | `Snippet`                             | -             | Custom mobile card renderer                                                          |
+| `batchActions`        | `Snippet`                             | -             | Selection bar content while something is selected                                    |
+| `selectAllBanner`     | `Snippet`                             | -             | Override default "select all across pages" offer                                     |
+| `empty`               | `Snippet`                             | -             | Custom empty state                                                                   |
+| `unstyled`            | `boolean`                             | `false`       | Skip default styling                                                                 |
+| `class`               | `string`                              | -             | Additional CSS classes                                                               |
+| `el`                  | `HTMLDivElement`                      | -             | Bindable element ref                                                                 |
 
 ### Snippet signatures
 
@@ -407,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
 	   ============================================================================ */