@marianmeres/stuic 3.66.1 → 3.68.0

package/dist/components/DataTable/README.md

@@ -28,14 +28,21 @@ loading state, and mobile card layout.
 
 ### With Paging
 
+DataTable integrates with [`@marianmeres/paging-store`](https://github.com/marianmeres/paging-store). Pass its computed result and receive offsets back via `onPageChange`:
+
 ```svelte
+<script lang="ts">
+	import { createPagingStore } from "@marianmeres/paging-store";
+
+	const paging = createPagingStore({ pageSize: 20, totalItems: 100 });
+	$: pagingResult = $paging; // or via $derived in Svelte 5 rune mode
+</script>
+
 <DataTable
 	{columns}
 	{data}
-	page={1}
-	pageSize={20}
-	totalItems={100}
-	onPageChange={(p) => fetchPage(p)}
+	paging={pagingResult}
+	onPageChange={(offset) => paging.setOffset(offset)}
 />
 ```
 
@@ -55,13 +62,83 @@ loading state, and mobile card layout.
 </DataTable>
 ```
 
+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).
+
+### 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.
+
+```svelte
+<script lang="ts">
+	let selected = $state(new Set<string | number>());
+	let selectedAll = $state(false);
+	let excluded = $state(new Set<string | number>());
+</script>
+
+<DataTable
+	{columns}
+	{data}
+	{paging}
+	{onPageChange}
+	selectable
+	allowSelectAllPages
+	bind:selected
+	bind:selectedAll
+	bind:excluded
+	getRowId={(row) => row.id}
+>
+	{#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>
+	{/snippet}
+</DataTable>
+```
+
+**Important — executing batch operations:** in all-pages mode the off-page rows are not loaded locally, so consumers cannot iterate IDs. Execute operations server-side using the active filter minus `excluded`:
+
+```ts
+function deleteSelection({ selectedAll, excluded }) {
+	if (selectedAll) {
+		// Server-side: DELETE FROM rows WHERE <currentFilter> AND id NOT IN excluded
+		return api.delete({ filter: currentFilter, exclude: [...excluded] });
+	}
+	return api.delete({ ids: [...selected] });
+}
+```
+
+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:
+
+```svelte
+<DataTable {columns} {data} {paging} selectable allowSelectAllPages bind:selected bind:selectedAll bind:excluded>
+	{#snippet selectAllBanner({ selectedAll, totalCount, selectAll, clearSelection })}
+		<div class="my-banner">
+			{#if selectedAll}
+				<span>All {totalCount} selected.</span>
+				<button onclick={clearSelection}>Undo</button>
+			{:else}
+				<button onclick={selectAll}>Select all {totalCount}</button>
+			{/if}
+		</div>
+	{/snippet}
+</DataTable>
+```
+
+**Filter changes:** when filters change in the consumer, reset the bound selection stores (`selected`, `selectedAll`, `excluded`) explicitly — DataTable doesn't track which filter produced the current state.
+
 ### Custom Cell Rendering
 
+The `cell` snippet is used for both desktop and mobile layouts. Use the `variant` param if rendering differs per layout.
+
 ```svelte
 <DataTable {columns} {data}>
-	{#snippet cell({ column, row, value })}
+	{#snippet cell({ column, row, value, rowIndex, variant })}
 		{#if column.key === "status"}
 			<span class="badge">{value}</span>
+		{:else if variant === "mobile"}
+			<em>{value}</em>
 		{:else}
 			{value}
 		{/if}
@@ -69,6 +146,34 @@ loading state, and mobile card layout.
 </DataTable>
 ```
 
+### Custom Desktop Row
+
+Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable does not render the default row markup (checkbox, cells) — you own it all. Use for custom expandable rows, row grouping, etc.
+
+```svelte
+<DataTable {columns} {data}>
+	{#snippet row({ row, columns, rowIndex, isSelected })}
+		<tr data-custom-row>
+			{#each columns as col}
+				<td>{row[col.key]}</td>
+			{/each}
+		</tr>
+	{/snippet}
+</DataTable>
+```
+
+### Disabling Selection Per Row
+
+```svelte
+<DataTable
+	{columns}
+	{data}
+	selectable
+	bind:selected
+	selectDisabledBy={(row) => row.locked === true}
+/>
+```
+
 ### Custom Mobile Layout
 
 ```svelte
@@ -84,26 +189,48 @@ loading state, and mobile card layout.
 
 ## 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            |
-| `page`         | `number`                           | -             | Current page (1-based)      |
-| `pageSize`     | `number`                           | -             | Rows per page               |
-| `totalItems`   | `number`                           | -             | Total items count           |
-| `onPageChange` | `(page: number) => void`           | -             | Page change callback        |
-| `selectable`   | `boolean`                          | `false`       | Enable selection checkboxes |
-| `selected`     | `Set<string \| number>`            | `new Set()`   | Selected row IDs (bindable) |
-| `onRowClick`   | `(row, index) => void`             | -             | Row click callback          |
-| `loading`      | `boolean`                          | `false`       | Show loading overlay        |
-| `cell`         | `Snippet`                          | -             | Custom cell renderer        |
-| `batchActions` | `Snippet`                          | -             | Batch action bar content    |
-| `empty`        | `Snippet`                          | -             | Custom empty state          |
-| `mobileRow`    | `Snippet`                          | -             | Custom mobile row card      |
-| `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`            | —                                                                                                                    |
+
+> **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.
+>
+> **Note:** `clearSelection` (exposed by the `batchActions` snippet) resets all selection state — `selected`, `selectedAll`, and `excluded` — including exiting all-pages mode.
 
 ## DataTableColumn
 
@@ -143,3 +270,6 @@ loading state, and mobile card layout.
 | `--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/DataTable/index.css

@@ -38,6 +38,11 @@
 	--stuic-data-table-batch-padding-x: 0.75rem;
 	--stuic-data-table-batch-padding-y: 0.5rem;
 
+	/* Select-all-across-pages banner */
+	--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;
 
@@ -210,6 +215,25 @@
 		margin-bottom: 0.5rem;
 	}
 
+	/* ============================================================================
+	   SELECT-ALL-ACROSS-PAGES BANNER
+	   ============================================================================ */
+
+	.stuic-data-table-select-all-banner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		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;
+		font-size: var(--stuic-data-table-cell-font-size);
+		color: var(--stuic-data-table-header-color);
+		text-align: center;
+	}
+
 	/* ============================================================================
 	   LOADING SPINNER OVERLAY
 	   ============================================================================ */
@@ -278,6 +302,13 @@
 		background: var(--stuic-data-table-card-bg-selected);
 	}
 
+	.stuic-data-table-card-checkbox {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+
 	.stuic-data-table-card-row {
 		display: flex;
 		justify-content: space-between;

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -201,6 +201,10 @@
 		triggerEl?: HTMLButtonElement;
 		/** Reference to dropdown element */
 		dropdownEl?: HTMLDivElement;
+		/** Reference to the wrapper element */
+		el?: HTMLDivElement;
+		/** Opt out of stuic base classes for full styling control */
+		unstyled?: boolean;
 		/** Optional, used only when css positioning not supported (iPhone)*/
 		noScrollLock?: boolean;
 	}
@@ -298,6 +302,8 @@
 		onSelect,
 		triggerEl = $bindable(),
 		dropdownEl = $bindable(),
+		el = $bindable(),
+		unstyled = false,
 		scrollbarGutter,
 		noScrollLock,
 		...rest
@@ -309,7 +315,6 @@
 	const anchorName = `--dropdown-anchor-${triggerId}`;
 
 	// State
-	let wrapperEl: HTMLDivElement = $state()!;
 	let activeItemEl: HTMLButtonElement | undefined = $state();
 	const reducedMotion = prefersReducedMotion();
 
@@ -615,7 +620,7 @@
 
 	// Click outside handler — only active when open (prevents stale refs on destroy)
 	const _clickOutside = onClickOutside(
-		() => wrapperEl,
+		() => el,
 		() => {
 			if (closeOnClickOutside && isOpen) {
 				isOpen = false;
@@ -626,7 +631,7 @@
 	);
 
 	$effect(() => {
-		if (isOpen && wrapperEl) _clickOutside.start();
+		if (isOpen && el) _clickOutside.start();
 		else _clickOutside.stop();
 	});
 
@@ -808,8 +813,8 @@
 />
 
 <div
-	bind:this={wrapperEl}
-	class={twMerge(DROPDOWN_MENU_BASE_CLASSES, classProp)}
+	bind:this={el}
+	class={unstyled ? classProp : twMerge(DROPDOWN_MENU_BASE_CLASSES, classProp)}
 	style:anchor-name={isSupported ? anchorName : undefined}
 >
 	<!-- Trigger -->
@@ -830,7 +835,7 @@
 		<button
 			bind:this={triggerEl}
 			id={triggerId}
-			class={twMerge(DROPDOWN_MENU_TRIGGER_CLASSES, classTrigger)}
+			class={unstyled ? classTrigger : twMerge(DROPDOWN_MENU_TRIGGER_CLASSES, classTrigger)}
 			onclick={() => (isOpen = !isOpen)}
 			aria-haspopup="menu"
 			aria-expanded={isOpen}
@@ -851,15 +856,15 @@
 
 	<!-- Backdrop (fallback mode only) -->
 	{#if isOpen && !isSupported && showBackdrop}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
-			class={twMerge(DROPDOWN_MENU_BACKDROP_CLASSES, classBackdrop)}
+			class={unstyled ? classBackdrop : twMerge(DROPDOWN_MENU_BACKDROP_CLASSES, classBackdrop)}
 			onclick={() => {
 				if (closeOnClickOutside) {
 					isOpen = false;
 					triggerEl?.focus();
 				}
 			}}
-			onkeydown={() => {}}
 			role="presentation"
 			transition:fade={{ duration: transitionDuration }}
 		></div>
@@ -872,11 +877,13 @@
 			id={dropdownId}
 			role="menu"
 			aria-labelledby={triggerId}
-			class={twMerge(
-				DROPDOWN_MENU_DROPDOWN_CLASSES,
-				!isSupported && "w-4/5 max-w-32",
-				classDropdown
-			)}
+			class={unstyled
+				? twMerge(!isSupported && "w-4/5 max-w-sm", classDropdown)
+				: twMerge(
+						DROPDOWN_MENU_DROPDOWN_CLASSES,
+						!isSupported && "w-4/5 max-w-sm",
+						classDropdown
+					)}
 			style={dropdownStyle}
 			transition:slide={{ duration: transitionDuration }}
 		>
@@ -886,7 +893,9 @@
 					<button
 						type="button"
 						aria-label="Close"
-						class="stuic-close-button absolute right-0 top-0 pointer-events-auto"
+						class={unstyled
+							? "absolute right-0 top-0 pointer-events-auto"
+							: "stuic-close-button absolute right-0 top-0 pointer-events-auto"}
 						onclick={() => {
 							isOpen = false;
 							triggerEl?.focus();
@@ -957,12 +966,16 @@
 					{:else if item.type === "divider"}
 						<div
 							role="separator"
-							class={twMerge(DROPDOWN_MENU_DIVIDER_CLASSES, classDivider, item.class)}
+							class={unstyled
+								? twMerge(classDivider, item.class)
+								: twMerge(DROPDOWN_MENU_DIVIDER_CLASSES, classDivider, item.class)}
 						></div>
 					{:else if item.type === "header"}
 						<div
 							role="presentation"
-							class={twMerge(DROPDOWN_MENU_HEADER_CLASSES, classHeader, item.class)}
+							class={unstyled
+								? twMerge(classHeader, item.class)
+								: twMerge(DROPDOWN_MENU_HEADER_CLASSES, classHeader, item.class)}
 						>
 							<Thc thc={item.label} />
 						</div>
@@ -1043,20 +1056,24 @@
 											{#if childItem.type === "divider"}
 												<div
 													role="separator"
-													class={twMerge(
-														DROPDOWN_MENU_DIVIDER_CLASSES,
-														classDivider,
-														childItem.class
-													)}
+													class={unstyled
+														? twMerge(classDivider, childItem.class)
+														: twMerge(
+																DROPDOWN_MENU_DIVIDER_CLASSES,
+																classDivider,
+																childItem.class
+															)}
 												></div>
 											{:else if childItem.type === "header"}
 												<div
 													role="presentation"
-													class={twMerge(
-														DROPDOWN_MENU_HEADER_CLASSES,
-														classHeader,
-														childItem.class
-													)}
+													class={unstyled
+														? twMerge(classHeader, childItem.class)
+														: twMerge(
+																DROPDOWN_MENU_HEADER_CLASSES,
+																classHeader,
+																childItem.class
+															)}
 												>
 													<Thc thc={childItem.label} />
 												</div>

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

@@ -170,6 +170,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     triggerEl?: HTMLButtonElement;
     /** Reference to dropdown element */
     dropdownEl?: HTMLDivElement;
+    /** Reference to the wrapper element */
+    el?: HTMLDivElement;
+    /** Opt out of stuic base classes for full styling control */
+    unstyled?: boolean;
     /** Optional, used only when css positioning not supported (iPhone)*/
     noScrollLock?: boolean;
 }
@@ -179,6 +183,6 @@ export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropd
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "stuic-dropdown-menu-divider";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "stuic-dropdown-menu-header";
 export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "stuic-dropdown-menu-backdrop";
-declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
+declare const DropdownMenu: import("svelte").Component<Props, {}, "el" | "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/README.md

@@ -8,13 +8,15 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 | ------------------------ | ---------------------- | -------------------- | ---------------------------------------- |
 | `items`                  | `DropdownMenuItem[]`   | -                    | Menu items to display                    |
 | `isOpen`                 | `boolean`              | `false`              | Controlled open state (bindable)         |
-| `position`               | `DropdownMenuPosition` | `"bottom-span-left"` | Popover position relative to trigger     |
+| `position`               | `DropdownMenuPosition` | `"bottom-span-right"` | Popover position relative to trigger    |
 | `offset`                 | `string`               | `"0.25rem"`          | Offset from trigger element (CSS value)  |
 | `maxHeight`              | `string`               | `"300px"`            | Max height of dropdown                   |
 | `closeOnSelect`          | `boolean`              | `true`               | Close menu when action item is selected  |
 | `closeOnClickOutside`    | `boolean`              | `true`               | Close on click outside                   |
 | `closeOnEscape`          | `boolean`              | `true`               | Close on Escape key                      |
 | `forceFallback`          | `boolean`              | `false`              | Force fallback positioning (for testing) |
+| `search`                 | `boolean \| DropdownMenuSearchConfig` | -     | Enable search/filter input (see [Search](#search)) |
+| `unstyled`               | `boolean`              | `false`              | Opt out of stuic base classes            |
 | `class`                  | `string`               | -                    | Classes for wrapper element              |
 | `classTrigger`           | `string`               | -                    | Classes for trigger button               |
 | `classDropdown`          | `string`               | -                    | Classes for dropdown container           |
@@ -25,6 +27,7 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 | `classHeader`            | `string`               | -                    | Classes for header items                 |
 | `classExpandable`        | `string`               | -                    | Classes for expandable section header    |
 | `classExpandableContent` | `string`               | -                    | Classes for expandable section content   |
+| `el`                     | `HTMLDivElement`       | -                    | Wrapper element reference (bindable)     |
 | `triggerEl`              | `HTMLButtonElement`    | -                    | Trigger element reference (bindable)     |
 | `dropdownEl`             | `HTMLDivElement`       | -                    | Dropdown element reference (bindable)    |
 
@@ -39,15 +42,15 @@ A feature-rich dropdown menu component with CSS Anchor Positioning (with fallbac
 
 ### Action Item
 
-Clickable menu item with optional icon and shortcut.
+Clickable menu item with optional leading/trailing content.
 
 ```typescript
 interface DropdownMenuActionItem {
 	type: "action";
 	id: string | number;
 	label: THC; // Text, HTML, or component
-	icon?: THC; // Optional leading icon
-	shortcut?: string; // Keyboard shortcut hint
+	contentBefore?: THC; // Optional leading content (icon, etc.)
+	contentAfter?: THC; // Optional trailing content (shortcut hint, etc.)
 	disabled?: boolean;
 	onSelect?: () => void | boolean;
 	href?: string; // Render as <a> link instead of <button>
@@ -104,7 +107,7 @@ interface DropdownMenuExpandableItem {
 	type: "expandable";
 	id: string | number;
 	label: THC;
-	icon?: THC;
+	contentBefore?: THC;
 	items: DropdownMenuFlatItem[]; // Nested items (no nested expandables)
 	defaultExpanded?: boolean;
 	disabled?: boolean;
@@ -131,6 +134,29 @@ interface DropdownMenuExpandableItem {
 | `onClose`  | -                                | Called when menu closes                     |
 | `onSelect` | `(item: DropdownMenuActionItem)` | Called when action item selected (fallback) |
 
+## Search
+
+Pass `search` to enable an in-menu filter input. Use `true` for defaults or a config object:
+
+```typescript
+interface DropdownMenuSearchConfig {
+	placeholder?: string;
+	/** Match algorithm */
+	strategy?: "prefix" | "exact" | "fuzzy";
+	/** Custom function to extract searchable text from an item */
+	getContent?: (item: DropdownMenuActionItem | DropdownMenuExpandableItem) => string;
+	/** Auto-focus search input when menu opens */
+	autoFocus?: boolean;
+	/** Message shown when no results found */
+	noResultsMessage?: string;
+}
+```
+
+```svelte
+<DropdownMenu {items} search />
+<DropdownMenu {items} search={{ placeholder: "Filter…", strategy: "fuzzy" }} />
+```
+
 ## Keyboard Navigation
 
 | Key                | Action                           |
@@ -186,6 +212,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 
 ### With Icons and Shortcuts
 
+Use `contentBefore` for leading content (icons) and `contentAfter` for trailing content (shortcut hints). Both accept any `THC` value — string, HTML, or component.
+
 ```svelte
 <script lang="ts">
 	import { DropdownMenu } from "stuic";
@@ -197,8 +225,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 			type: "action",
 			id: "edit",
 			label: "Edit",
-			icon: iconLucideEdit({ size: 16 }),
-			shortcut: "Cmd+E",
+			contentBefore: { html: iconLucideEdit({ size: 16 }) },
+			contentAfter: "Cmd+E",
 			onSelect: () => handleEdit(),
 		},
 		{ type: "divider" },
@@ -206,8 +234,8 @@ When `href` is set, the item renders as an `<a>` element instead of `<button>`.
 			type: "action",
 			id: "delete",
 			label: "Delete",
-			icon: iconLucideTrash({ size: 16 }),
-			shortcut: "Cmd+D",
+			contentBefore: { html: iconLucideTrash({ size: 16 }) },
+			contentAfter: "Cmd+D",
 			onSelect: () => handleDelete(),
 		},
 	];

package/dist/components/Input/FieldAssets.svelte

@@ -37,6 +37,7 @@
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 	import Button from "../Button/Button.svelte";
 
 	const clog = createClog("FieldAssets");
@@ -126,7 +127,7 @@
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		value: string;
 		label?: SnippetWithId | THC;
 		type?: string;
@@ -145,13 +146,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the hidden <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classOption?: string;
 		classOptionActive?: string;
 		classOptgroup?: string;
@@ -205,8 +201,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		//
 		classOption,
 		classOptionActive,
@@ -503,8 +502,11 @@
 		{classLabelBox}
 		{classInputBox}
 		{classInputBoxWrap}
+		{classInputBoxWrapInvalid}
 		{classDescBox}
+		{classDescBoxToggle}
 		{classBelowBox}
+		{classValidationBox}
 		{validation}
 		{style}
 	>

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -3,6 +3,7 @@ import { type ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 import { type THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 export type FieldAssetUrlObj = {
     thumb: string;
     full: string;
@@ -23,7 +24,7 @@ export declare function getAssetIcon(ext?: string): CallableFunction;
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     value: string;
     label?: SnippetWithId | THC;
     type?: string;
@@ -42,13 +43,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the hidden <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classOption?: string;
     classOptionActive?: string;
     classOptgroup?: string;