@marianmeres/stuic 3.66.0 → 3.67.0

package/dist/components/DataTable/DataTable.svelte

@@ -19,7 +19,7 @@
 			next_page: "Next",
 			page_x_of_y: "Page {page} of {pageCount}",
 			no_data: "No data",
-			select_all_rows: "Select all rows",
+			select_all_rows: "Select all rows on this page",
 			select_row: "Select row",
 		};
 		let out = m[k] ?? fallback ?? k;
@@ -71,6 +71,8 @@
 		selected?: Set<string | number>;
 		/** Toggle row selection when clicking anywhere on the row */
 		selectOnRowClick?: boolean;
+		/** Return true to disable selection for a specific row */
+		selectDisabledBy?: (row: T, index: number) => boolean;
 
 		/** Callback when a row is clicked */
 		onRowClick?: (row: T, index: number) => void;
@@ -78,9 +80,28 @@
 		/** Show loading state (spinner overlay + reduced opacity) */
 		loading?: boolean;
 
-		/** Custom cell renderer snippet */
+		/** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */
 		cell?: Snippet<
-			[{ column: DataTableColumn<T>; row: T; value: any; rowIndex: number }]
+			[
+				{
+					column: DataTableColumn<T>;
+					row: T;
+					value: any;
+					rowIndex: number;
+					variant: "desktop" | "mobile";
+				},
+			]
+		>;
+		/** Custom desktop row renderer — replaces the entire `<tr>` */
+		row?: Snippet<
+			[
+				{
+					row: T;
+					columns: DataTableColumn<T>[];
+					rowIndex: number;
+					isSelected: boolean;
+				},
+			]
 		>;
 		/** Batch actions bar snippet (shown when items are selected) */
 		batchActions?: Snippet<
@@ -96,8 +117,6 @@
 		empty?: Snippet;
 		/** Custom mobile row card snippet */
 		mobileRow?: Snippet<[{ row: T; columns: DataTableColumn<T>[]; rowIndex: number }]>;
-		/** Default children snippet (not used directly) */
-		children?: Snippet;
 
 		/** Optional translate function */
 		t?: TranslateFn;
@@ -130,13 +149,14 @@
 		selectable = false,
 		selected = $bindable(new Set()),
 		selectOnRowClick = false,
+		selectDisabledBy,
 		onRowClick,
 		loading = false,
 		cell,
+		row,
 		batchActions,
 		empty,
 		mobileRow,
-		children,
 		t = t_default,
 		small = false,
 		unstyled = false,
@@ -154,15 +174,21 @@
 
 	// --- Selection ---
 	let allRowIds = $derived(data.map((row, i) => getRowId(row, i)));
+	let selectableRowIds = $derived.by(() => {
+		if (!selectDisabledBy) return allRowIds;
+		return data
+			.map((row, i) => (selectDisabledBy(row, i) ? null : getRowId(row, i)))
+			.filter((id): id is string | number => id !== null);
+	});
 
 	let allOnPageSelected = $derived.by(() => {
-		if (!selectable || allRowIds.length === 0) return false;
-		return allRowIds.every((id) => selected.has(id));
+		if (!selectable || selectableRowIds.length === 0) return false;
+		return selectableRowIds.every((id) => selected.has(id));
 	});
 
 	let someOnPageSelected = $derived.by(() => {
-		if (!selectable || allRowIds.length === 0) return false;
-		return allRowIds.some((id) => selected.has(id)) && !allOnPageSelected;
+		if (!selectable || selectableRowIds.length === 0) return false;
+		return selectableRowIds.some((id) => selected.has(id)) && !allOnPageSelected;
 	});
 
 	let selectedRows = $derived.by(() => {
@@ -173,11 +199,11 @@
 	function toggleSelectAll() {
 		if (allOnPageSelected) {
 			const next = new Set(selected);
-			for (const id of allRowIds) next.delete(id);
+			for (const id of selectableRowIds) next.delete(id);
 			selected = next;
 		} else {
 			const next = new Set(selected);
-			for (const id of allRowIds) next.add(id);
+			for (const id of selectableRowIds) next.add(id);
 			selected = next;
 		}
 	}
@@ -248,7 +274,7 @@
 				<thead>
 					<tr>
 						{#if selectable}
-							<th data-checkbox class="stuic-checkbox">
+							<th scope="col" data-checkbox class="stuic-checkbox">
 								<input
 									type="checkbox"
 									checked={allOnPageSelected}
@@ -260,6 +286,7 @@
 						{/if}
 						{#each columns as col (col.key)}
 							<th
+								scope="col"
 								class={col.classHeader}
 								data-align={!unstyled && col.align ? col.align : undefined}
 								style={col.width ? `width: ${col.width}` : undefined}
@@ -274,46 +301,53 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#each data as row, rowIndex (getRowId(row, rowIndex))}
-						{@const rowId = getRowId(row, rowIndex)}
+					{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
+						{@const rowId = getRowId(rowData, rowIndex)}
 						{@const isSelected = selectable && selected.has(rowId)}
-						<tr
-							data-hoverable={!unstyled ? "true" : undefined}
-							data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-								? "true"
-								: undefined}
-							data-selected={!unstyled && isSelected ? "true" : undefined}
-							onclick={(e) => handleRowClick(row, rowIndex, e)}
-						>
-							{#if selectable}
-								<td data-checkbox class="stuic-checkbox">
-									<input
-										type="checkbox"
-										checked={isSelected}
-										onchange={() => toggleSelectRow(rowId)}
-										aria-label={t("select_row")}
-									/>
-								</td>
-							{/if}
-							{#each columns as col (col.key)}
-								{@const value = getCellValue(row, col)}
-								<td
-									class={col.class}
-									data-align={!unstyled && col.align ? col.align : undefined}
-								>
-									{#if cell}
-										{@render cell({
-											column: col,
-											row,
-											value,
-											rowIndex,
-										})}
-									{:else}
-										{getCellDisplay(row, col)}
-									{/if}
-								</td>
-							{/each}
-						</tr>
+						{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+						{#if row}
+							{@render row({ row: rowData, columns, rowIndex, isSelected })}
+						{:else}
+							<tr
+								data-hoverable={!unstyled ? "true" : undefined}
+								data-clickable={!unstyled && (onRowClick || selectOnRowClick)
+									? "true"
+									: undefined}
+								data-selected={!unstyled && isSelected ? "true" : undefined}
+								onclick={(e) => handleRowClick(rowData, rowIndex, e)}
+							>
+								{#if selectable}
+									<td data-checkbox class="stuic-checkbox">
+										<input
+											type="checkbox"
+											checked={isSelected}
+											disabled={selectDisabled}
+											onchange={() => toggleSelectRow(rowId)}
+											aria-label={t("select_row")}
+										/>
+									</td>
+								{/if}
+								{#each columns as col (col.key)}
+									{@const value = getCellValue(rowData, col)}
+									<td
+										class={col.class}
+										data-align={!unstyled && col.align ? col.align : undefined}
+									>
+										{#if cell}
+											{@render cell({
+												column: col,
+												row: rowData,
+												value,
+												rowIndex,
+												variant: "desktop",
+											})}
+										{:else}
+											{getCellDisplay(rowData, col)}
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/if}
 					{:else}
 						<tr>
 							<td
@@ -337,12 +371,13 @@
 			class={!unstyled ? "stuic-data-table-cards" : undefined}
 			data-loading={!unstyled && loading ? "true" : undefined}
 		>
-			{#each data as row, rowIndex (getRowId(row, rowIndex))}
-				{@const rowId = getRowId(row, rowIndex)}
+			{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
+				{@const rowId = getRowId(rowData, rowIndex)}
 				{@const isSelected = selectable && selected.has(rowId)}
+				{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
 				{#if mobileRow}
 					{@render mobileRow({
-						row,
+						row: rowData,
 						columns: mobileColumns,
 						rowIndex,
 					})}
@@ -357,7 +392,7 @@
 						data-selected={!unstyled && isSelected ? "true" : undefined}
 						role={onRowClick || selectOnRowClick ? "button" : undefined}
 						tabindex={onRowClick || selectOnRowClick ? 0 : undefined}
-						onclick={(e) => handleRowClick(row, rowIndex, e)}
+						onclick={(e) => handleRowClick(rowData, rowIndex, e)}
 						onkeydown={(e) => {
 							if (
 								(onRowClick || selectOnRowClick) &&
@@ -367,22 +402,23 @@
 								if (selectable && selectOnRowClick) {
 									toggleSelectRow(rowId);
 								}
-								onRowClick?.(row, rowIndex);
+								onRowClick?.(rowData, rowIndex);
 							}
 						}}
 					>
 						{#if selectable}
-							<div class="stuic-checkbox flex items-center gap-2 mb-1">
+							<div class={!unstyled ? "stuic-checkbox stuic-data-table-card-checkbox" : undefined}>
 								<input
 									type="checkbox"
 									checked={isSelected}
+									disabled={selectDisabled}
 									onchange={() => toggleSelectRow(rowId)}
 									aria-label={t("select_row")}
 								/>
 							</div>
 						{/if}
 						{#each mobileColumns as col (col.key)}
-							{@const value = getCellValue(row, col)}
+							{@const value = getCellValue(rowData, col)}
 							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
 								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
 									{#if isTHCNotEmpty(col.label)}
@@ -395,12 +431,13 @@
 									{#if cell}
 										{@render cell({
 											column: col,
-											row,
+											row: rowData,
 											value,
 											rowIndex,
+											variant: "mobile",
 										})}
 									{:else}
-										{getCellDisplay(row, col)}
+										{getCellDisplay(rowData, col)}
 									{/if}
 								</span>
 							</div>
@@ -412,7 +449,7 @@
 					{#if empty}
 						{@render empty()}
 					{:else}
-						No data
+						{t("no_data")}
 					{/if}
 				</div>
 			{/each}

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

@@ -38,17 +38,29 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     selected?: Set<string | number>;
     /** Toggle row selection when clicking anywhere on the row */
     selectOnRowClick?: boolean;
+    /** Return true to disable selection for a specific row */
+    selectDisabledBy?: (row: T, index: number) => boolean;
     /** Callback when a row is clicked */
     onRowClick?: (row: T, index: number) => void;
     /** Show loading state (spinner overlay + reduced opacity) */
     loading?: boolean;
-    /** Custom cell renderer snippet */
+    /** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */
     cell?: Snippet<[
         {
             column: DataTableColumn<T>;
             row: T;
             value: any;
             rowIndex: number;
+            variant: "desktop" | "mobile";
+        }
+    ]>;
+    /** Custom desktop row renderer — replaces the entire `<tr>` */
+    row?: Snippet<[
+        {
+            row: T;
+            columns: DataTableColumn<T>[];
+            rowIndex: number;
+            isSelected: boolean;
         }
     ]>;
     /** Batch actions bar snippet (shown when items are selected) */
@@ -67,8 +79,6 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         columns: DataTableColumn<T>[];
         rowIndex: number;
     }]>;
-    /** Default children snippet (not used directly) */
-    children?: Snippet;
     /** Optional translate function */
     t?: TranslateFn;
     /** Force mobile/card layout regardless of breakpoint */

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)}
 />
 ```
 
@@ -57,11 +64,15 @@ loading state, and mobile card layout.
 
 ### 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 +80,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 +123,41 @@ 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             |
+| `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                                          |
+| `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, 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".
 
 ## DataTableColumn
 

package/dist/components/DataTable/index.css

@@ -278,6 +278,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>