@marianmeres/stuic 3.162.0 → 3.164.0

package/dist/components/DataTable/DataTable.svelte

@@ -4,35 +4,8 @@
 	import type { PagingCalcResult } from "@marianmeres/paging-store";
 	import type { THC } from "../Thc/index.js";
 	import type { TranslateFn } from "../../types.js";
-	import { isPlainObject } from "../../utils/is-plain-object.js";
-	import { replaceMap } from "../../utils/replace-map.js";
-
-	// i18n ready
-	function t_default(
-		k: string,
-		values: false | null | undefined | Record<string, string | number> = null,
-		fallback: string | boolean = "",
-		_i18nSpanWrap: boolean = true
-	) {
-		const m: Record<string, string> = {
-			previous_page: "Prev",
-			next_page: "Next",
-			page_x_of_y: "Page {page} of {pageCount}",
-			no_data: "No data",
-			select_all_rows: "Select all rows on this page",
-			select_row: "Select row",
-			select_all_on_page_x: "All {count} on this page selected.",
-			select_all_results: "Select all {totalCount} results",
-			all_results_selected: "All {totalCount} results selected.",
-			clear_selection: "Clear selection",
-		};
-		let out = m[k] ?? fallback ?? k;
-		return isPlainObject(values)
-			? replaceMap(out, values as any, {
-					preSearchKeyTransform: (k) => `{${k}}`,
-				})
-			: out;
-	}
+	// i18n ready -- see ./i18n.ts (english, built-in) and ./i18n-sk.ts (opt-in slovak)
+	import { DATA_TABLE_MESSAGES_EN, t_default } from "./i18n.js";
 
 	export interface DataTableColumn<T = Record<string, any>> {
 		/** Property key to extract from row data (supports dot-notation: "data.name") */
@@ -95,6 +68,20 @@
 		/** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
 		excluded?: Set<string | number>;
 
+		/**
+		 * Keep the selection bar -- the strip above the table holding the idle status,
+		 * `batchActions`, and the select-all-across-pages offer -- in the layout at all
+		 * times, so checking the first row does not shove the table down. While nothing
+		 * is selected it reads `t("no_rows_selected")`.
+		 *
+		 * Only meaningful when `selectable` is on AND there is something to reserve room
+		 * for (a `batchActions` snippet or `allowSelectAllPages`); with neither, no bar
+		 * is rendered at all.
+		 *
+		 * Set `false` for the pop-in behaviour: the bar appears only once it has content.
+		 */
+		reserveBatchBar?: boolean;
+
 		/** Callback when a row is clicked */
 		onRowClick?: (row: T, index: number) => void;
 
@@ -173,7 +160,8 @@
 			]
 		>;
 		/**
-		 * Batch actions bar snippet (shown when items are selected).
+		 * Content of the selection bar while something is selected. Replaces the default
+		 * "{count} selected" status, so render your own count alongside the buttons.
 		 *
 		 * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
 		 * rows from the current page that aren't excluded. Off-page rows are not
@@ -195,8 +183,8 @@
 			]
 		>;
 		/**
-		 * Custom "select all results across pages" banner. When omitted, a default
-		 * banner is rendered.
+		 * Custom "select all results across pages" offer, rendered on the trailing edge
+		 * of the selection bar. When omitted, a default one is rendered.
 		 */
 		selectAllBanner?: Snippet<
 			[
@@ -250,6 +238,7 @@
 		allowSelectAllPages = false,
 		selectedAll = $bindable(false),
 		excluded = $bindable(new Set()),
+		reserveBatchBar = true,
 		onRowClick,
 		rowHref,
 		rowHrefColumn,
@@ -395,6 +384,30 @@
 		return allOnPageSelected;
 	});
 
+	// The default selection status, shown when there is no `batchActions` snippet to take
+	// its place. Both keys post-date the component, so a consumer `t` written against an
+	// older version does not know them -- and one that answers an unknown key with ""
+	// would leave the reserved bar visibly blank. Hence the explicit english fallbacks
+	// (pre-interpolated, since a `t` may hand a fallback straight back untouched), which
+	// every other, older key can do without.
+	let statusText = $derived(
+		effectiveCount > 0
+			? t(
+					"x_rows_selected",
+					{ count: effectiveCount },
+					DATA_TABLE_MESSAGES_EN.x_rows_selected.replace("{count}", `${effectiveCount}`)
+				)
+			: t("no_rows_selected", null, DATA_TABLE_MESSAGES_EN.no_rows_selected)
+	);
+
+	// The bar only exists if something can appear in it; `reserveBatchBar` then decides
+	// whether it holds its place while that something is absent.
+	let hasBatchBar = $derived(selectable && (!!batchActions || allowSelectAllPages));
+	let showBatchBar = $derived(
+		hasBatchBar &&
+			(reserveBatchBar || showSelectAllBanner || (effectiveCount > 0 && !!batchActions))
+	);
+
 	// --- Row click / activation ---
 
 	// A row is a big target that legitimately contains its own controls. Anything that
@@ -489,47 +502,62 @@
 	{/if}
 {/snippet}
 
-<!-- Batch action bar -->
-{#if selectable && effectiveCount > 0 && batchActions}
-	<div class={!unstyled ? "stuic-data-table-batch" : undefined}>
-		{@render batchActions({
-			selected,
-			selectedRows,
-			selectedAll,
-			excluded,
-			effectiveCount,
-			totalCount,
-			clearSelection: clearAllSelection,
-		})}
-	</div>
-{/if}
-
-<!-- Select-all-across-pages banner -->
-{#if showSelectAllBanner && paging}
-	{#if selectAllBanner}
-		{@render selectAllBanner({
-			selectedAll,
-			effectiveCount,
-			totalCount: paging.total,
-			pageCount: data.length,
-			selectAll: enterSelectAll,
-			clearSelection: clearAllSelection,
-		})}
-	{:else}
-		<div class={!unstyled ? "stuic-data-table-select-all-banner" : undefined}>
-			{#if selectedAll}
-				<span>{t("all_results_selected", { totalCount: paging.total })}</span>
-				<Button variant="ghost" size="sm" onclick={clearAllSelection}>
-					{t("clear_selection")}
-				</Button>
+<!--
+	Selection bar -- one strip carrying the selection status, the consumer's
+	`batchActions`, and the select-all-across-pages offer. Deliberately a single element
+	rather than a stack of independent conditionals: each of those appearing on its own
+	reflows everything below it, which is exactly the jump `reserveBatchBar` exists to
+	prevent. Sits outside the root container so the loading overlay doesn't cover it.
+-->
+{#if showBatchBar}
+	<div
+		class={!unstyled ? "stuic-data-table-batch" : undefined}
+		data-idle={!unstyled && effectiveCount === 0 ? "true" : undefined}
+		data-select-all={!unstyled && showSelectAllBanner ? "true" : undefined}
+	>
+		<div class={!unstyled ? "stuic-data-table-batch-main" : undefined}>
+			{#if effectiveCount > 0 && batchActions}
+				{@render batchActions({
+					selected,
+					selectedRows,
+					selectedAll,
+					excluded,
+					effectiveCount,
+					totalCount,
+					clearSelection: clearAllSelection,
+				})}
 			{:else}
-				<span>{t("select_all_on_page_x", { count: data.length })}</span>
-				<Button variant="ghost" size="sm" onclick={enterSelectAll}>
-					{t("select_all_results", { totalCount: paging.total })}
-				</Button>
+				<span class={!unstyled ? "stuic-data-table-batch-status" : undefined}>
+					{statusText}
+				</span>
 			{/if}
 		</div>
-	{/if}
+
+		{#if showSelectAllBanner && paging}
+			<div class={!unstyled ? "stuic-data-table-batch-select-all" : undefined}>
+				{#if selectAllBanner}
+					{@render selectAllBanner({
+						selectedAll,
+						effectiveCount,
+						totalCount: paging.total,
+						pageCount: data.length,
+						selectAll: enterSelectAll,
+						clearSelection: clearAllSelection,
+					})}
+				{:else if selectedAll}
+					<span>{t("all_results_selected", { totalCount: paging.total })}</span>
+					<Button variant="ghost" size="sm" onclick={clearAllSelection}>
+						{t("clear_selection")}
+					</Button>
+				{:else}
+					<span>{t("select_all_on_page_x", { count: data.length })}</span>
+					<Button variant="ghost" size="sm" onclick={enterSelectAll}>
+						{t("select_all_results", { totalCount: paging.total })}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</div>
 {/if}
 
 <!-- Root container -->

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

@@ -56,6 +56,19 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     selectedAll?: boolean;
     /** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
     excluded?: Set<string | number>;
+    /**
+     * Keep the selection bar -- the strip above the table holding the idle status,
+     * `batchActions`, and the select-all-across-pages offer -- in the layout at all
+     * times, so checking the first row does not shove the table down. While nothing
+     * is selected it reads `t("no_rows_selected")`.
+     *
+     * Only meaningful when `selectable` is on AND there is something to reserve room
+     * for (a `batchActions` snippet or `allowSelectAllPages`); with neither, no bar
+     * is rendered at all.
+     *
+     * Set `false` for the pop-in behaviour: the bar appears only once it has content.
+     */
+    reserveBatchBar?: boolean;
     /** Callback when a row is clicked */
     onRowClick?: (row: T, index: number) => void;
     /**
@@ -126,7 +139,8 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         }
     ]>;
     /**
-     * Batch actions bar snippet (shown when items are selected).
+     * Content of the selection bar while something is selected. Replaces the default
+     * "{count} selected" status, so render your own count alongside the buttons.
      *
      * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
      * rows from the current page that aren't excluded. Off-page rows are not
@@ -146,8 +160,8 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         }
     ]>;
     /**
-     * Custom "select all results across pages" banner. When omitted, a default
-     * banner is rendered.
+     * Custom "select all results across pages" offer, rendered on the trailing edge
+     * of the selection bar. When omitted, a default one is rendered.
      */
     selectAllBanner?: Snippet<[
         {

package/dist/components/DataTable/README.md

@@ -64,6 +64,30 @@ DataTable integrates with [`@marianmeres/paging-store`](https://github.com/maria
 
 Shift+click a checkbox to toggle a range of rows from the last clicked checkbox to the current one. Disabled rows in the range are skipped. The anchor resets when `data` changes (e.g. on page navigation).
 
+#### The selection bar holds its place
+
+Everything selection-related lives in one strip above the table: the status while nothing
+is selected, your `batchActions` while something is, and the select-all-across-pages offer
+on its trailing edge. That strip is rendered from the start and keeps a constant height
+(`reserveBatchBar`, on by default), so checking the first row swaps its contents instead
+of pushing the table down.
+
+- The height comes from `--stuic-data-table-batch-min-height`, sized to a `size="sm"`
+  Button. Batch actions built from bigger controls need that token raised, or the bar
+  grows when they appear — which is the jump all over again.
+- Idle, the bar is transparent (`--stuic-data-table-batch-bg-idle`) so a permanently
+  reserved strip doesn't shout; it takes on `--stuic-data-table-batch-bg` once something
+  is selected and `--stuic-data-table-select-all-bg` while the select-all offer is up.
+- The bar only exists when there is something to reserve room for — `selectable` plus
+  either a `batchActions` snippet or `allowSelectAllPages`. `selectable` on its own
+  renders no bar.
+- `reserveBatchBar={false}` restores the old behaviour: the bar appears only once it has
+  content.
+
+Without a `batchActions` snippet the bar still reports the count itself
+(`t("x_rows_selected")` / `t("no_rows_selected")`). With one, the snippet replaces that
+status entirely — render your own count next to the buttons.
+
 ### Select All Across Pages
 
 When your data is paged, DataTable can offer a "select all results" affordance that expands selection beyond the current page. Enable it with `allowSelectAllPages`. When the user opts in, selection flips to **all-pages mode**: every row is implicitly selected, and `excluded` holds IDs the user has explicitly deselected.
@@ -115,7 +139,7 @@ function deleteSelection({ selectedAll, excluded }) {
 
 New records inserted while all-pages mode is active are implicitly selected (they aren't in `excluded`). This matches the conventional intent — "delete everything matching X" should include matches that arrive before the operation runs. If you need snapshot-at-click semantics, capture a timestamp or ID list in your consumer.
 
-**Customising the banner:** the default banner uses the built-in `t()` keys `select_all_on_page_x`, `select_all_results`, `all_results_selected`, and `clear_selection`. Override markup entirely with the `selectAllBanner` snippet:
+**Customising the offer:** the default offer renders on the trailing edge of the selection bar and uses the built-in `t()` keys `select_all_on_page_x`, `select_all_results`, `all_results_selected`, and `clear_selection`. Override its markup entirely with the `selectAllBanner` snippet (which renders in the same slot — it is no longer a standalone block below the batch bar):
 
 ```svelte
 <DataTable
@@ -301,6 +325,7 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `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`                                |
@@ -313,8 +338,8 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `cell`                | `Snippet`                             | -             | Custom cell renderer (desktop + mobile)                                    |
 | `row`                 | `Snippet`                             | -             | Custom desktop `<tr>` renderer (overrides default row)                     |
 | `mobileRow`           | `Snippet`                             | -             | Custom mobile card renderer                                                |
-| `batchActions`        | `Snippet`                             | -             | Batch action bar content                                                   |
-| `selectAllBanner`     | `Snippet`                             | -             | Override default "select all across pages" banner                          |
+| `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                                                     |
@@ -348,36 +373,83 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `hideOnMobile` | `boolean`                       | `false`  | Hide in mobile view                       |
 | `renderValue`  | `(value, row) => string`        | -        | Value formatter                           |
 
+## i18n
+
+All built-in texts go through the `t` prop. English is the built-in default; Slovak ships
+bundled and opt-in (importing it is what pulls it into your bundle — English-only
+consumers pay nothing).
+
+```svelte
+<script>
+	import {
+		DataTable,
+		createDataTableT,
+		DATA_TABLE_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+
+	const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+</script>
+
+<DataTable {columns} {data} {t} />
+```
+
+`createDataTableT(messages, fallbackMessages?)` falls back to `DATA_TABLE_MESSAGES_EN` for
+any key the catalog does not define, so a partial catalog is fine and a raw key is never
+rendered — pass your own object to translate into a language that is not bundled, or to
+override individual bundled texts:
+
+```ts
+const t = createDataTableT({ ...DATA_TABLE_MESSAGES_SK, no_data: "Nič tu nie je" });
+```
+
+| Key                    | English                            | Used by                              |
+| ---------------------- | ---------------------------------- | ------------------------------------ |
+| `previous_page`        | Prev                               | Paging                               |
+| `next_page`            | Next                               | Paging                               |
+| `page_x_of_y`          | Page {page} of {pageCount}         | Paging                               |
+| `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`            |
+| `no_rows_selected`     | No rows selected                   | Idle selection bar                   |
+| `x_rows_selected`      | {count} selected                   | Selection bar without `batchActions` |
+| `select_all_on_page_x` | All {count} on this page selected. | Select-all offer                     |
+| `select_all_results`   | Select all {totalCount} results    | Select-all offer                     |
+| `all_results_selected` | All {totalCount} results selected. | Select-all offer, all-pages mode     |
+| `clear_selection`      | Clear selection                    | Select-all offer, all-pages mode     |
+
 ## CSS Variables
 
-| Variable                                       | Default                               | Description                  |
-| ---------------------------------------------- | ------------------------------------- | ---------------------------- |
-| `--stuic-data-table-radius`                    | `var(--radius-md)`                    | Border radius                |
-| `--stuic-data-table-border-color`              | `var(--stuic-color-border)`           | Border color                 |
-| `--stuic-data-table-header-bg`                 | `var(--stuic-color-muted)`            | Header background            |
-| `--stuic-data-table-header-color`              | `var(--stuic-color-muted-foreground)` | Header text                  |
-| `--stuic-data-table-header-font-size`          | `0.875rem`                            | Header font size             |
-| `--stuic-data-table-header-font-weight`        | `var(--font-weight-semibold)`         | Header font weight           |
-| `--stuic-data-table-header-padding-x`          | `0.75rem`                             | Header horizontal padding    |
-| `--stuic-data-table-header-padding-y`          | `0.5rem`                              | Header vertical padding      |
-| `--stuic-data-table-row-bg`                    | `transparent`                         | Row background               |
-| `--stuic-data-table-row-bg-hover`              | `var(--stuic-color-muted)`            | Row hover background         |
-| `--stuic-data-table-row-bg-selected`           | `color-mix(primary 10%)`              | Selected row background      |
-| `--stuic-data-table-row-border-color`          | `var(--stuic-color-border)`           | Row border color             |
-| `--stuic-data-table-row-link-color`            | `inherit`                             | `rowHref` anchor color       |
-| `--stuic-data-table-row-link-decoration`       | `none`                                | `rowHref` anchor decoration  |
-| `--stuic-data-table-row-link-decoration-hover` | `underline`                           | …on hover                    |
-| `--stuic-data-table-row-ring-width`            | `3px`                                 | Activatable row focus ring   |
-| `--stuic-data-table-row-ring-color`            | `var(--stuic-color-ring)`             | Activatable row ring color   |
-| `--stuic-data-table-cell-padding-x`            | `0.75rem`                             | Cell horizontal padding      |
-| `--stuic-data-table-cell-padding-y`            | `0.75rem`                             | Cell vertical padding        |
-| `--stuic-data-table-cell-font-size`            | `0.875rem`                            | Cell font size               |
-| `--stuic-data-table-loading-opacity`           | `0.5`                                 | Loading state opacity        |
-| `--stuic-data-table-card-bg`                   | `var(--stuic-color-background)`       | Mobile card background       |
-| `--stuic-data-table-card-border-color`         | `var(--stuic-color-border)`           | Mobile card border           |
-| `--stuic-data-table-card-radius`               | `var(--radius-md)`                    | Mobile card radius           |
-| `--stuic-data-table-card-padding`              | `0.75rem`                             | Mobile card padding          |
-| `--stuic-data-table-card-gap`                  | `0.5rem`                              | Gap between mobile cards     |
-| `--stuic-data-table-select-all-bg`             | `color-mix(primary 10%)`              | Select-all banner background |
-| `--stuic-data-table-select-all-padding-x`      | `0.75rem`                             | Banner horizontal padding    |
-| `--stuic-data-table-select-all-padding-y`      | `0.5rem`                              | Banner vertical padding      |
+| Variable                                       | Default                               | Description                       |
+| ---------------------------------------------- | ------------------------------------- | --------------------------------- |
+| `--stuic-data-table-radius`                    | `var(--radius-md)`                    | Border radius                     |
+| `--stuic-data-table-border-color`              | `var(--stuic-color-border)`           | Border color                      |
+| `--stuic-data-table-header-bg`                 | `var(--stuic-color-muted)`            | Header background                 |
+| `--stuic-data-table-header-color`              | `var(--stuic-color-muted-foreground)` | Header text                       |
+| `--stuic-data-table-header-font-size`          | `0.875rem`                            | Header font size                  |
+| `--stuic-data-table-header-font-weight`        | `var(--font-weight-semibold)`         | Header font weight                |
+| `--stuic-data-table-header-padding-x`          | `0.75rem`                             | Header horizontal padding         |
+| `--stuic-data-table-header-padding-y`          | `0.5rem`                              | Header vertical padding           |
+| `--stuic-data-table-row-bg`                    | `transparent`                         | Row background                    |
+| `--stuic-data-table-row-bg-hover`              | `var(--stuic-color-muted)`            | Row hover background              |
+| `--stuic-data-table-row-bg-selected`           | `color-mix(primary 10%)`              | Selected row background           |
+| `--stuic-data-table-row-border-color`          | `var(--stuic-color-border)`           | Row border color                  |
+| `--stuic-data-table-row-link-color`            | `inherit`                             | `rowHref` anchor color            |
+| `--stuic-data-table-row-link-decoration`       | `none`                                | `rowHref` anchor decoration       |
+| `--stuic-data-table-row-link-decoration-hover` | `underline`                           | …on hover                         |
+| `--stuic-data-table-row-ring-width`            | `3px`                                 | Activatable row focus ring        |
+| `--stuic-data-table-row-ring-color`            | `var(--stuic-color-ring)`             | Activatable row ring color        |
+| `--stuic-data-table-cell-padding-x`            | `0.75rem`                             | Cell horizontal padding           |
+| `--stuic-data-table-cell-padding-y`            | `0.75rem`                             | Cell vertical padding             |
+| `--stuic-data-table-cell-font-size`            | `0.875rem`                            | Cell font size                    |
+| `--stuic-data-table-loading-opacity`           | `0.5`                                 | Loading state opacity             |
+| `--stuic-data-table-card-bg`                   | `var(--stuic-color-background)`       | Mobile card background            |
+| `--stuic-data-table-card-border-color`         | `var(--stuic-color-border)`           | Mobile card border                |
+| `--stuic-data-table-card-radius`               | `var(--radius-md)`                    | Mobile card radius                |
+| `--stuic-data-table-card-padding`              | `0.75rem`                             | Mobile card padding               |
+| `--stuic-data-table-card-gap`                  | `0.5rem`                              | Gap between mobile cards          |
+| `--stuic-data-table-batch-bg`                  | `var(--stuic-color-muted)`            | Selection bar background          |
+| `--stuic-data-table-batch-bg-idle`             | `transparent`                         | …while nothing is selected        |
+| `--stuic-data-table-batch-padding-x`           | `0.75rem`                             | Selection bar h. padding          |
+| `--stuic-data-table-batch-padding-y`           | `0.5rem`                              | Selection bar v. padding          |
+| `--stuic-data-table-batch-min-height`          | `sm Button + padding`                 | Reserved selection bar height     |
+| `--stuic-data-table-select-all-bg`             | `color-mix(primary 10%)`              | …while the select-all offer is up |

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

@@ -0,0 +1,17 @@
+import type { DataTableMessages } from "./i18n.js";
+/**
+ * Slovak message catalog for `DataTable`. 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 { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export declare const DATA_TABLE_MESSAGES_SK: DataTableMessages;

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

@@ -0,0 +1,29 @@
+/**
+ * Slovak message catalog for `DataTable`. 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 { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export const DATA_TABLE_MESSAGES_SK = {
+    previous_page: "Späť",
+    next_page: "Ďalej",
+    page_x_of_y: "Strana {page} z {pageCount}",
+    no_data: "Žiadne údaje",
+    select_all_rows: "Vybrať všetky riadky na tejto strane",
+    select_row: "Vybrať riadok",
+    select_all_on_page_x: "Vybrané všetky na tejto strane ({count}).",
+    select_all_results: "Vybrať všetky výsledky ({totalCount})",
+    all_results_selected: "Vybrané všetky výsledky ({totalCount}).",
+    clear_selection: "Zrušiť výber",
+    no_rows_selected: "Nič nie je vybrané",
+    x_rows_selected: "Vybrané: {count}",
+};

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

@@ -0,0 +1,43 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `DataTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{page}`, `{totalCount}`, ...).
+ */
+export declare const DATA_TABLE_MESSAGES_EN: {
+    previous_page: string;
+    next_page: string;
+    page_x_of_y: string;
+    no_data: string;
+    select_all_rows: string;
+    select_row: string;
+    select_all_on_page_x: string;
+    select_all_results: string;
+    all_results_selected: string;
+    clear_selection: string;
+    no_rows_selected: string;
+    x_rows_selected: string;
+};
+/** Every message key `DataTable` may look up. */
+export type DataTableMessageKey = keyof typeof DATA_TABLE_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type DataTableMessages = Record<DataTableMessageKey, string>;
+/**
+ * Builds the `t` prop of `DataTable` 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 { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export declare function createDataTableT(messages: Partial<DataTableMessages> | Record<string, string>, fallbackMessages?: Partial<DataTableMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/DataTable/i18n.js

@@ -0,0 +1,51 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `DataTable`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{page}`, `{totalCount}`, ...).
+ */
+export const DATA_TABLE_MESSAGES_EN = {
+    previous_page: "Prev",
+    next_page: "Next",
+    page_x_of_y: "Page {page} of {pageCount}",
+    no_data: "No data",
+    select_all_rows: "Select all rows on this page",
+    select_row: "Select row",
+    select_all_on_page_x: "All {count} on this page selected.",
+    select_all_results: "Select all {totalCount} results",
+    all_results_selected: "All {totalCount} results selected.",
+    clear_selection: "Clear selection",
+    no_rows_selected: "No rows selected",
+    x_rows_selected: "{count} selected",
+};
+/**
+ * Builds the `t` prop of `DataTable` 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 { DataTable, createDataTableT, DATA_TABLE_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createDataTableT(DATA_TABLE_MESSAGES_SK);
+ * </script>
+ *
+ * <DataTable {columns} {data} {t} />
+ * ```
+ */
+export function createDataTableT(messages, fallbackMessages = DATA_TABLE_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 = createDataTableT(DATA_TABLE_MESSAGES_EN);

package/dist/components/DataTable/index.css

@@ -42,15 +42,19 @@
 	--stuic-data-table-paging-gap: 0.5rem;
 	--stuic-data-table-paging-padding-y: 0.75rem;
 
-	/* Batch action bar */
+	/* Selection (batch action) bar */
 	--stuic-data-table-batch-bg: var(--stuic-color-muted);
+	/* Nothing selected -- the bar is only holding its place, so it stays quiet. */
+	--stuic-data-table-batch-bg-idle: var(--stuic-color-muted);
 	--stuic-data-table-batch-padding-x: 0.75rem;
-	--stuic-data-table-batch-padding-y: 0.5rem;
+	--stuic-data-table-batch-padding-y: 0.25rem;
+	/* Sized to a `size="sm"` Button so the idle and active states are the same height. */
+	--stuic-data-table-batch-min-height: calc(var(--stuic-button-min-height-sm, 2.75rem) + var(--stuic-data-table-batch-padding-y) * 2);
+	/*  */
+	--stuic-data-table-batch-margin: 0 0 0.125rem 0;
 
-	/* Select-all-across-pages banner */
+	/* Select-all-across-pages offer (rendered inside the selection bar) */
 	--stuic-data-table-select-all-bg: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
-	--stuic-data-table-select-all-padding-x: 0.75rem;
-	--stuic-data-table-select-all-padding-y: 0.5rem;
 
 	/* Checkbox column */
 	--stuic-data-table-checkbox-width: 3rem;
@@ -238,34 +242,52 @@
 	   BATCH ACTION BAR
 	   ============================================================================ */
 
+	/*
+	   The min-height is the whole point of the reserved bar: an idle line of text is
+	   shorter than a row of buttons, so without it the table would still shift -- just
+	   by less. Keep it in sync with whatever button size the batch actions use.
+	*/
 	.stuic-data-table-batch {
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
 		gap: var(--stuic-data-table-paging-gap);
+		min-height: var(--stuic-data-table-batch-min-height);
 		padding: var(--stuic-data-table-batch-padding-y)
 			var(--stuic-data-table-batch-padding-x);
 		background: var(--stuic-data-table-batch-bg);
 		border-radius: var(--stuic-data-table-radius, var(--stuic-radius));
-		margin-bottom: 0.5rem;
+		margin: var(--stuic-data-table-batch-margin, 0);
+		transition: background var(--stuic-data-table-transition, var(--stuic-transition));
 	}
 
-	/* ============================================================================
-	   SELECT-ALL-ACROSS-PAGES BANNER
-	   ============================================================================ */
+	.stuic-data-table-batch[data-idle="true"] {
+		background: var(--stuic-data-table-batch-bg-idle);
+	}
+
+	/* The select-all offer is the one state worth actively drawing attention to. */
+	.stuic-data-table-batch[data-select-all="true"] {
+		background: var(--stuic-data-table-select-all-bg);
+	}
 
-	.stuic-data-table-select-all-banner {
+	.stuic-data-table-batch-main,
+	.stuic-data-table-batch-select-all {
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		flex-wrap: wrap;
 		gap: var(--stuic-data-table-paging-gap);
-		padding: var(--stuic-data-table-select-all-padding-y)
-			var(--stuic-data-table-select-all-padding-x);
-		background: var(--stuic-data-table-select-all-bg);
-		border-radius: var(--stuic-data-table-radius, var(--stuic-radius));
-		margin-bottom: 0.5rem;
+	}
+
+	.stuic-data-table-batch-select-all {
+		margin-left: auto;
+		font-size: var(--stuic-data-table-cell-font-size);
+		color: var(--stuic-data-table-header-color);
+	}
+
+	.stuic-data-table-batch-status {
 		font-size: var(--stuic-data-table-cell-font-size);
 		color: var(--stuic-data-table-header-color);
-		text-align: center;
 	}
 
 	/* ============================================================================

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

@@ -1 +1,3 @@
 export { default as DataTable, type Props as DataTableProps, type DataTableColumn, } from "./DataTable.svelte";
+export { createDataTableT, DATA_TABLE_MESSAGES_EN, type DataTableMessageKey, type DataTableMessages, } from "./i18n.js";
+export { DATA_TABLE_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/DataTable/index.js

@@ -1 +1,3 @@
 export { default as DataTable, } from "./DataTable.svelte";
+export { createDataTableT, DATA_TABLE_MESSAGES_EN, } from "./i18n.js";
+export { DATA_TABLE_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/FieldsBuilder/_internal/LocalizedTextInput.svelte

@@ -180,14 +180,13 @@
 		{#if !expanded || !_hasMultiple}
 			{@render langInput(_defaultLanguage, true)}
 		{:else}
-			<div class="expanded-wrap">
-				{#each sortedLanguages as lang, idx (lang)}
-					<div
-						class={twMerge(
-							"flex-1 flex gap-2 items-center pl-2",
-							idx > 0 && "entry-divider"
-						)}
-					>
+			<!-- no `.expanded-wrap`/`.entry-divider` chrome here (unlike
+			     FieldInputLocalized): these inputs carry their own border, so a
+			     divider line and the wrap's right edge would only add noise —
+			     plain spacing separates the rows instead -->
+			<div class="flex flex-col gap-1.5">
+				{#each sortedLanguages as lang (lang)}
+					<div class="flex-1 flex gap-2 items-center pl-2">
 						<div
 							class={twMerge(
 								"lang-label",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.162.0",
+	"version": "3.164.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -19,8 +19,8 @@
 		"test:ui": "vitest --ui",
 		"svelte-check": "svelte-check",
 		"svelte-package": "svelte-package",
-		"rp": "pnpm run build && deno run -A jsr:@marianmeres/release patch --no-push && npm publish --access public && git push --follow-tags",
-		"rpm": "pnpm run build && deno run -A jsr:@marianmeres/release minor --no-push && npm publish --access public && git push --follow-tags",
+		"rp": "pnpm run build && deno run -A jsr:@marianmeres/release patch --yes --no-push && npm publish --access public && git push --follow-tags",
+		"rpm": "pnpm run build && deno run -A jsr:@marianmeres/release minor --yes --no-push && npm publish --access public && git push --follow-tags",
 		"release": "deno run -A jsr:@marianmeres/release"
 	},
 	"files": [