@marianmeres/stuic 3.115.0 → 3.116.0

package/dist/components/CronInput/CronInput.svelte

@@ -90,8 +90,19 @@
 	] as const;
 
 	const MONTH_NAMES = [
-		"", "Jan", "Feb", "Mar", "Apr", "May", "Jun",
-		"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+		"",
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec",
 	];
 
 	const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -120,7 +131,9 @@
 		} else if (hour.startsWith("*/")) {
 			segments.push(`every ${hour.slice(2)} hours`);
 		} else {
-			segments.push(`at ${hour.padStart(2, "0")}:${minute === "*" ? "00" : minute.padStart(2, "0")}`);
+			segments.push(
+				`at ${hour.padStart(2, "0")}:${minute === "*" ? "00" : minute.padStart(2, "0")}`
+			);
 			// remove the minute segment if we have a specific hour
 			if (minute !== "*" && !minute.includes("/")) {
 				segments.length = 0;
@@ -167,7 +180,9 @@
 			}
 		}
 
-		return segments.length ? segments[0].charAt(0).toUpperCase() + segments.join(", ").slice(1) : "";
+		return segments.length
+			? segments[0].charAt(0).toUpperCase() + segments.join(", ").slice(1)
+			: "";
 	}
 </script>
 
@@ -240,21 +255,11 @@
 	}
 
 	// Effective show flags — mode overrides explicit props when defined
-	let _showPresets = $derived(
-		hasModeToggle ? mode === "predefined" : showPresets
-	);
-	let _showFields = $derived(
-		hasModeToggle ? mode === "manual" : showFields
-	);
-	let _showRawInput = $derived(
-		hasModeToggle ? false : showRawInput
-	);
-	let _showDescription = $derived(
-		hasModeToggle ? mode === "manual" : showDescription
-	);
-	let _showNextRun = $derived(
-		hasModeToggle ? mode === "manual" : showNextRun
-	);
+	let _showPresets = $derived(hasModeToggle ? mode === "predefined" : showPresets);
+	let _showFields = $derived(hasModeToggle ? mode === "manual" : showFields);
+	let _showRawInput = $derived(hasModeToggle ? false : showRawInput);
+	let _showDescription = $derived(hasModeToggle ? mode === "manual" : showDescription);
+	let _showNextRun = $derived(hasModeToggle ? mode === "manual" : showNextRun);
 
 	const BTN_CLS = [
 		"toggle-btn",
@@ -378,7 +383,9 @@
 	}
 
 	// When only presets are visible, render as a plain select (no extra padding/border)
-	let presetsOnly = $derived(_showPresets && !_showFields && !_showRawInput && !_showDescription && !_showNextRun);
+	let presetsOnly = $derived(
+		_showPresets && !_showFields && !_showRawInput && !_showDescription && !_showNextRun
+	);
 
 	// Minute tick — triggers re-evaluation of "Next: ..." every 60s
 	let _tick = $state(0);
@@ -463,48 +470,46 @@
 				{/if}
 
 				{#if _showFields}
-				<div
-					class={unstyled
-						? classFields
-						: twMerge("stuic-cron-input-fields", classFields)}
-				>
-					{#each FIELD_DEFS as def}
-						<div
-							class={unstyled
-								? classField
-								: twMerge("stuic-cron-input-field", classField)}
-						>
-							<span
+					<div
+						class={unstyled
+							? classFields
+							: twMerge("stuic-cron-input-fields", classFields)}
+					>
+						{#each FIELD_DEFS as def}
+							<div
 								class={unstyled
-									? classFieldLabel
-									: twMerge("stuic-cron-input-field-label", classFieldLabel)}
+									? classField
+									: twMerge("stuic-cron-input-field", classField)}
 							>
-								{def.label}
-							</span>
-							<input
-								type="text"
-								class={unstyled
-									? classFieldInput
-									: twMerge("stuic-cron-input-field-input", classFieldInput)}
-								bind:value={fields[def.key]}
-								oninput={onFieldInput}
-								placeholder={def.placeholder}
-								aria-label={`${def.label} (${def.placeholder})`}
-								{disabled}
-								autocomplete="off"
-								spellcheck={false}
-							/>
-						</div>
-					{/each}
-				</div>
+								<span
+									class={unstyled
+										? classFieldLabel
+										: twMerge("stuic-cron-input-field-label", classFieldLabel)}
+								>
+									{def.label}
+								</span>
+								<input
+									type="text"
+									class={unstyled
+										? classFieldInput
+										: twMerge("stuic-cron-input-field-input", classFieldInput)}
+									bind:value={fields[def.key]}
+									oninput={onFieldInput}
+									placeholder={def.placeholder}
+									aria-label={`${def.label} (${def.placeholder})`}
+									{disabled}
+									autocomplete="off"
+									spellcheck={false}
+								/>
+							</div>
+						{/each}
+					</div>
 				{/if}
 
 				{#if _showRawInput}
 					<input
 						type="text"
-						class={unstyled
-							? classRaw
-							: twMerge("stuic-cron-input-raw", classRaw)}
+						class={unstyled ? classRaw : twMerge("stuic-cron-input-raw", classRaw)}
 						bind:value={rawValue}
 						oninput={onRawInput}
 						placeholder="* * * * *"
@@ -524,16 +529,15 @@
 						{humanDescription}
 					</div>
 				{/if}
-
 			</div>
 			{#if hasModeToggle}
 				<button
 					type="button"
-					class={unstyled
-						? classToggleButton
-						: twMerge(BTN_CLS, classToggleButton)}
+					class={unstyled ? classToggleButton : twMerge(BTN_CLS, classToggleButton)}
 					onclick={toggleMode}
-					aria-label={mode === "predefined" ? "Switch to manual input" : "Switch to presets"}
+					aria-label={mode === "predefined"
+						? "Switch to manual input"
+						: "Switch to presets"}
 					{disabled}
 					use:tooltip={() => ({
 						enabled: true,

package/dist/components/CronInput/README.md

@@ -10,9 +10,9 @@ The cron expression string is the single source of truth; field / preset / raw s
 
 ```svelte
 <script lang="ts">
-    import { CronInput } from "@marianmeres/stuic";
+	import { CronInput } from "@marianmeres/stuic";
 
-    let expression = $state("0 9 * * 1-5");
+	let expression = $state("0 9 * * 1-5");
 </script>
 
 <CronInput bind:value={expression} label="Schedule" />
@@ -24,13 +24,13 @@ Default `mode` is `"predefined"` — users see the preset picker with a toggle b
 
 ```svelte
 <CronInput
-    bind:value={expression}
-    mode={undefined}
-    showPresets
-    showFields
-    showRawInput
-    showDescription
-    showNextRun
+	bind:value={expression}
+	mode={undefined}
+	showPresets
+	showFields
+	showRawInput
+	showDescription
+	showNextRun
 />
 ```
 
@@ -38,13 +38,13 @@ Default `mode` is `"predefined"` — users see the preset picker with a toggle b
 
 ```svelte
 <script lang="ts">
-    import { CronInput, type CronPreset } from "@marianmeres/stuic";
+	import { CronInput, type CronPreset } from "@marianmeres/stuic";
 
-    const presets: CronPreset[] = [
-        { label: "Top of every hour", value: "0 * * * *" },
-        { label: "Daily at 09:00", value: "0 9 * * *" },
-        { label: "Every 5 minutes", value: "*/5 * * * *" },
-    ];
+	const presets: CronPreset[] = [
+		{ label: "Top of every hour", value: "0 * * * *" },
+		{ label: "Daily at 09:00", value: "0 9 * * *" },
+		{ label: "Every 5 minutes", value: "*/5 * * * *" },
+	];
 </script>
 
 <CronInput bind:value={expression} {presets} />
@@ -56,11 +56,11 @@ For places outside the CronInput that need the next-fire time (e.g. a dashboard
 
 ```svelte
 <script lang="ts">
-    import { CronNextRun } from "@marianmeres/stuic";
-    import { onDestroy } from "svelte";
+	import { CronNextRun } from "@marianmeres/stuic";
+	import { onDestroy } from "svelte";
 
-    const nr = new CronNextRun("0 9 * * 1-5");
-    onDestroy(() => nr.destroy());
+	const nr = new CronNextRun("0 9 * * 1-5");
+	onDestroy(() => nr.destroy());
 </script>
 
 <p>Next run: {nr.nextRunFormatted}</p>
@@ -72,11 +72,11 @@ For places outside the CronInput that need the next-fire time (e.g. a dashboard
 
 The `mode` prop controls which surfaces are visible and whether the toggle button is shown:
 
-| `mode`              | Toggle shown | Visible surfaces                                     |
-| ------------------- | ------------ | ---------------------------------------------------- |
-| `"predefined"`      | yes          | preset picker                                        |
-| `"manual"`          | yes          | fields + raw + description + next-run                |
-| `undefined`         | no           | whatever the `show*` flags enable (full control)     |
+| `mode`         | Toggle shown | Visible surfaces                                 |
+| -------------- | ------------ | ------------------------------------------------ |
+| `"predefined"` | yes          | preset picker                                    |
+| `"manual"`     | yes          | fields + raw + description + next-run            |
+| `undefined`    | no           | whatever the `show*` flags enable (full control) |
 
 When `mode` is defined, it **overrides** the individual `show*` flags. Set `mode={undefined}` if you want to pick surfaces yourself.
 
@@ -91,13 +91,13 @@ The `value` string is canonical. Internally:
 
 Off-by-one conventions match standard cron:
 
-| Field        | Range  | Notes                                |
-| ------------ | ------ | ------------------------------------ |
-| minute       | 0-59   |                                      |
-| hour         | 0-23   |                                      |
-| day of month | 1-31   |                                      |
-| month        | 1-12   | 1 = January                          |
-| day of week  | 0-6    | 0 = Sunday                           |
+| Field        | Range | Notes       |
+| ------------ | ----- | ----------- |
+| minute       | 0-59  |             |
+| hour         | 0-23  |             |
+| day of month | 1-31  |             |
+| month        | 1-12  | 1 = January |
+| day of week  | 0-6   | 0 = Sunday  |
 
 ## Validation
 
@@ -113,21 +113,21 @@ All next-run calculations use the **host's local timezone**. There is no `timezo
 
 ## Props
 
-| Prop                  | Type                                  | Default         | Description                                          |
-| --------------------- | ------------------------------------- | --------------- | ---------------------------------------------------- |
-| `value`               | `string`                              | `"* * * * *"`   | Cron expression (bindable)                           |
-| `mode`                | `"predefined" \| "manual" \| undefined` | `"predefined"` | Editor mode; `undefined` hides the toggle            |
-| `presets`             | `CronPreset[]`                        | `DEFAULT_PRESETS` | Preset options                                     |
-| `showPresets`         | `boolean`                             | `true`          | (Ignored when `mode` is defined)                     |
-| `showFields`          | `boolean`                             | `true`          | (Ignored when `mode` is defined)                     |
-| `showRawInput`        | `boolean`                             | `true`          | (Ignored when `mode` is defined)                     |
-| `showDescription`     | `boolean`                             | `true`          | (Ignored when `mode` is defined)                     |
-| `showNextRun`         | `boolean`                             | `true`          | (Ignored when `mode` is defined)                     |
-| `onchange`            | `(expr, valid) => void`               | -               | Fires on every valid or invalid change               |
-| `unstyled`            | `boolean`                             | `false`         | Skip stuic base classes (user provides all styling)  |
-| `class`               | `string`                              | -               | Wrapper class                                        |
-| `el`                  | `HTMLElement`                         | -               | Bindable wrapper element                             |
-| `classFields`/`classField`/`classFieldLabel`/`classFieldInput`/`classPreset`/`classRaw`/`classSummary`/`classToggleButton` | `string` | - | Per-element class overrides |
+| Prop                                                                                                                       | Type                                    | Default           | Description                                         |
+| -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------------- | --------------------------------------------------- |
+| `value`                                                                                                                    | `string`                                | `"* * * * *"`     | Cron expression (bindable)                          |
+| `mode`                                                                                                                     | `"predefined" \| "manual" \| undefined` | `"predefined"`    | Editor mode; `undefined` hides the toggle           |
+| `presets`                                                                                                                  | `CronPreset[]`                          | `DEFAULT_PRESETS` | Preset options                                      |
+| `showPresets`                                                                                                              | `boolean`                               | `true`            | (Ignored when `mode` is defined)                    |
+| `showFields`                                                                                                               | `boolean`                               | `true`            | (Ignored when `mode` is defined)                    |
+| `showRawInput`                                                                                                             | `boolean`                               | `true`            | (Ignored when `mode` is defined)                    |
+| `showDescription`                                                                                                          | `boolean`                               | `true`            | (Ignored when `mode` is defined)                    |
+| `showNextRun`                                                                                                              | `boolean`                               | `true`            | (Ignored when `mode` is defined)                    |
+| `onchange`                                                                                                                 | `(expr, valid) => void`                 | -                 | Fires on every valid or invalid change              |
+| `unstyled`                                                                                                                 | `boolean`                               | `false`           | Skip stuic base classes (user provides all styling) |
+| `class`                                                                                                                    | `string`                                | -                 | Wrapper class                                       |
+| `el`                                                                                                                       | `HTMLElement`                           | -                 | Bindable wrapper element                            |
+| `classFields`/`classField`/`classFieldLabel`/`classFieldInput`/`classPreset`/`classRaw`/`classSummary`/`classToggleButton` | `string`                                | -                 | Per-element class overrides                         |
 
 Plus all standard `InputWrap` wrapper class props (`classLabel`, `classLabelBox`, `classInputBox`, `classInputBoxWrap`, `classInputBoxWrapInvalid`, `classDescBox`, `classBelowBox`) — same pattern as every other `Field*` component.
 

package/dist/components/DataTable/DataTable.svelte

@@ -563,7 +563,11 @@
 						}}
 					>
 						{#if selectable}
-							<div class={!unstyled ? "stuic-checkbox stuic-data-table-card-checkbox" : undefined}>
+							<div
+								class={!unstyled
+									? "stuic-checkbox stuic-data-table-card-checkbox"
+									: undefined}
+							>
 								<input
 									type="checkbox"
 									checked={isSelected}

package/dist/components/DataTable/README.md

@@ -87,7 +87,13 @@ When your data is paged, DataTable can offer a "select all results" affordance t
 	bind:excluded
 	getRowId={(row) => row.id}
 >
-	{#snippet batchActions({ selectedAll, excluded, effectiveCount, totalCount, clearSelection })}
+	{#snippet batchActions({
+		selectedAll,
+		excluded,
+		effectiveCount,
+		totalCount,
+		clearSelection,
+	})}
 		<span>{effectiveCount} selected{selectedAll ? ` of ${totalCount}` : ""}</span>
 		<Button onclick={() => deleteSelection({ selectedAll, excluded })}>Delete</Button>
 		<Button variant="ghost" onclick={clearSelection}>Clear</Button>
@@ -112,7 +118,16 @@ New records inserted while all-pages mode is active are implicitly selected (the
 **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:
 
 ```svelte
-<DataTable {columns} {data} {paging} selectable allowSelectAllPages bind:selected bind:selectedAll bind:excluded>
+<DataTable
+	{columns}
+	{data}
+	{paging}
+	selectable
+	allowSelectAllPages
+	bind:selected
+	bind:selectedAll
+	bind:excluded
+>
 	{#snippet selectAllBanner({ selectedAll, totalCount, selectAll, clearSelection })}
 		<div class="my-banner">
 			{#if selectedAll}
@@ -189,44 +204,44 @@ 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)             |
-| `onRowClick`        | `(row, index) => void`                     | -             | Row click callback                                                |
-| `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`                                  | -             | Batch action bar content                                          |
-| `selectAllBanner`   | `Snippet`                                  | -             | Override default "select all across pages" banner                 |
-| `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                 |
+| `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)                    |
+| `onRowClick`          | `(row, index) => void`             | -             | Row click callback                                                       |
+| `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`                          | -             | Batch action bar content                                                 |
+| `selectAllBanner`     | `Snippet`                          | -             | Override default "select all across pages" banner                        |
+| `empty`               | `Snippet`                          | -             | Custom empty state                                                       |
+| `unstyled`            | `boolean`                          | `false`       | Skip default styling                                                     |
+| `class`               | `string`                           | -             | Additional CSS classes                                                   |
+| `el`                  | `HTMLDivElement`                   | -             | Bindable element ref                                                     |
 
 ### Snippet signatures
 
-| Snippet            | Props                                                                                                                |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------- |
-| `cell`             | `{ column, row, value, rowIndex, variant: "desktop" \| "mobile" }`                                                   |
-| `row`              | `{ row, columns, rowIndex, isSelected }` — desktop only                                                              |
-| `mobileRow`        | `{ row, columns, rowIndex }` — mobile only                                                                           |
-| `batchActions`     | `{ selected, selectedRows, selectedAll, excluded, effectiveCount, totalCount, clearSelection }`                      |
-| `selectAllBanner`  | `{ selectedAll, effectiveCount, totalCount, pageCount, selectAll, clearSelection }`                                  |
-| `empty`            | —                                                                                                                    |
+| Snippet           | Props                                                                                           |
+| ----------------- | ----------------------------------------------------------------------------------------------- |
+| `cell`            | `{ column, row, value, rowIndex, variant: "desktop" \| "mobile" }`                              |
+| `row`             | `{ row, columns, rowIndex, isSelected }` — desktop only                                         |
+| `mobileRow`       | `{ row, columns, rowIndex }` — mobile only                                                      |
+| `batchActions`    | `{ selected, selectedRows, selectedAll, excluded, effectiveCount, totalCount, clearSelection }` |
+| `selectAllBanner` | `{ selectedAll, effectiveCount, totalCount, pageCount, selectAll, clearSelection }`             |
+| `empty`           | —                                                                                               |
 
 > **Note:** "Select all rows" affects only the rows currently in `data` (i.e. the current page when using external paging). Rows for which `selectDisabledBy` returns `true` are excluded from "select all". To select across pages, enable `allowSelectAllPages` and use the banner that appears.
 >
@@ -247,29 +262,29 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ## 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-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-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      |

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -835,7 +835,9 @@
 		<button
 			bind:this={triggerEl}
 			id={triggerId}
-			class={unstyled ? classTrigger : twMerge(DROPDOWN_MENU_TRIGGER_CLASSES, classTrigger)}
+			class={unstyled
+				? classTrigger
+				: twMerge(DROPDOWN_MENU_TRIGGER_CLASSES, classTrigger)}
 			onclick={() => (isOpen = !isOpen)}
 			aria-haspopup="menu"
 			aria-expanded={isOpen}
@@ -858,7 +860,9 @@
 	{#if isOpen && !isSupported && showBackdrop}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
-			class={unstyled ? classBackdrop : twMerge(DROPDOWN_MENU_BACKDROP_CLASSES, classBackdrop)}
+			class={unstyled
+				? classBackdrop
+				: twMerge(DROPDOWN_MENU_BACKDROP_CLASSES, classBackdrop)}
 			onclick={() => {
 				if (closeOnClickOutside) {
 					isOpen = false;