@marianmeres/stuic 2.63.0 → 2.65.0

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -9,6 +9,7 @@
 	import { Debounced, watch } from "runed";
 	import { NotificationsStack } from "../Notifications/index.js";
 	import { Spinner } from "../Spinner/index.js";
+	import { ListItemButton } from "../ListItemButton/index.js";
 	import { strHash } from "../../utils/str-hash.js";
 	import { qsa } from "../../utils/qsa.js";
 	import { replaceMap } from "../../utils/index.js";
@@ -61,6 +62,8 @@
 </script>
 
 <script lang="ts">
+	import "./index.css";
+
 	const clog = createClog("CommandMenu");
 
 	let {
@@ -242,7 +245,9 @@
 				autocomplete="off"
 				aria-autocomplete="list"
 				aria-controls={options.size ? listId : undefined}
-				aria-activedescendant={options.active ? btn_id(options.active[itemIdPropName]) : undefined}
+				aria-activedescendant={options.active
+					? btn_id(options.active[itemIdPropName])
+					: undefined}
 				placeholder={searchPlaceholder ?? t("search_placeholder")}
 				classInputBoxWrap={twMerge(
 					// always look like focused
@@ -298,6 +303,7 @@
 					{#if options.size}
 						<div
 							class={twMerge(
+								"stuic-command-menu-options",
 								"options block space-y-1 p-1",
 								"overflow-y-auto overflow-x-hidden mb-1",
 								"border-t border-black/20",
@@ -314,43 +320,33 @@
 								<div class="p-1">
 									{#if _optgroup}
 										<div
-											class="text-sm capitalize opacity-50 border-b border-black/10 mb-1 p-1"
+											class={[
+												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
+												"text-neutral-500 dark:text-neutral-400",
+											]}
 										>
 											{_optgroup}
 										</div>
 									{/if}
-									<ul role="presentation">
+									<ul role="presentation" class="space-y-1">
 										{#each _opts as item (item[itemIdPropName])}
 											{@const active =
 												item[itemIdPropName] === options.active?.[itemIdPropName]}
 											<!-- {@const isSelected = false} -->
 											<li class:active role="presentation">
-												<button
-													class:active
-													type="button"
+												<ListItemButton
+													id={btn_id(item[itemIdPropName])}
 													role="option"
 													aria-selected={active}
-													class={twMerge(
-														"no-focus-visible",
-														"text-left rounded-md py-2 px-2.5",
-														"min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap",
-														"border border-transparent",
-														"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
-														"focus-visible:outline-0 focus-visible:ring-0",
-														"hover:border-neutral-400 dark:hover:border-neutral-500",
-														active && "bg-neutral-200 dark:bg-neutral-800",
-														classOption,
-														active && classOptionActive
-													)}
-													id={btn_id(item[itemIdPropName])}
-													tabindex="-1"
+													{active}
+													tabindex={-1}
+													class={classOption}
+													classActive={classOptionActive}
 													onclick={() => {
 														_optionsColl.setActive(item);
 														submit();
 													}}
 													onkeydown={(e) => {
-														// need to handle tab here, because the tabindex="-1" is ignored
-														// in the focus-trap selectors... so, on Tab, manually focusin input
 														if (e.key === "Tab") {
 															e.preventDefault();
 															input?.focus();
@@ -358,7 +354,7 @@
 													}}
 												>
 													{_renderOptionLabel(item)}
-												</button>
+												</ListItemButton>
 											</li>
 										{/each}
 									</ul>

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

@@ -17,6 +17,7 @@ export interface Props {
     classOptionActive?: string;
     showAllOnEmptyQ?: boolean;
 }
+import "./index.css";
 declare const CommandMenu: import("svelte").Component<Props, {
     close: () => void;
     open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;

package/dist/components/CommandMenu/index.css

@@ -0,0 +1,3 @@
+/* Override ListItemButton defaults for CommandMenu context */
+.stuic-command-menu-options .stuic-list-item-button {
+}

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -37,10 +37,10 @@
 		type: "action";
 		/** Label displayed - supports THC for icons, HTML, etc. */
 		label: THC;
-		/** Shortcut hint displayed on the right (e.g., "Cmd+K") */
-		shortcut?: string;
-		/** Icon displayed before label - supports THC */
-		icon?: THC;
+		/** Content displayed before label (e.g., icon) - supports THC */
+		contentBefore?: THC;
+		/** Content displayed after label (e.g., shortcut hint, badge) - supports THC */
+		contentAfter?: THC;
 		/** Callback when item is selected */
 		onSelect?: () => void | boolean;
 	}
@@ -74,7 +74,8 @@
 		type: "expandable";
 		/** Label for the expandable header */
 		label: THC;
-		icon?: THC;
+		/** Content displayed before label (e.g., icon) - supports THC */
+		contentBefore?: THC;
 		/** Nested items (single level only - no nested expandables) */
 		items: DropdownMenuFlatItem[];
 		/** Whether section starts expanded */
@@ -130,6 +131,10 @@
 		classItemActive?: string;
 		/** Classes for disabled items */
 		classItemDisabled?: string;
+		/** Classes for content before label (contentBefore slot) */
+		classItemBefore?: string;
+		/** Classes for content after label (contentAfter slot) */
+		classItemAfter?: string;
 		/** Classes for dividers */
 		classDivider?: string;
 		/** Classes for header items */
@@ -226,20 +231,6 @@
 		min-w-48
 	`;
 
-	export const DROPDOWN_MENU_ITEM_CLASSES = `
-		w-full
-		flex items-center gap-2
-		px-3 py-1.5
-		min-h-[44px]
-		text-left 
-		rounded-md
-		cursor-pointer
-		touch-action-manipulation
-		hover:bg-neutral-100 dark:hover:bg-neutral-700
-		focus:outline-none
-		focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600
-	`;
-
 	export const DROPDOWN_MENU_DIVIDER_CLASSES = `
 		h-px my-1
 		bg-neutral-200 dark:bg-neutral-700
@@ -269,6 +260,7 @@
 	import { slide, fade } from "svelte/transition";
 	import { untrack } from "svelte";
 	import Thc from "../Thc/Thc.svelte";
+	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
 	import "./index.css";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
@@ -289,6 +281,8 @@
 		classItem,
 		classItemActive,
 		classItemDisabled,
+		classItemBefore,
+		classItemAfter,
 		classDivider,
 		classHeader,
 		classExpandable,
@@ -698,40 +692,23 @@
 			{#each items as item}
 				{#if item.type === "action"}
 					{@const isActive = _navItems.active?.id === item.id}
-					<button
+					<ListItemButton
 						id={itemId(item.id)}
 						role="menuitem"
-						class={twMerge(
-							DROPDOWN_MENU_ITEM_CLASSES,
-							classItem,
-							item.class,
-							isActive && "bg-neutral-200 dark:bg-neutral-600",
-							isActive && classItemActive,
-							item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
-							item.disabled && classItemDisabled
-						)}
+						focused={isActive}
+						contentBefore={item.contentBefore}
+						contentAfter={item.contentAfter}
+						class={twMerge(classItem, item.class)}
+						classFocused={classItemActive}
+						classContentBefore={classItemBefore}
+						classContentAfter={classItemAfter}
 						onclick={() => selectItem(item)}
 						onmouseenter={() => navItems.setActive(item)}
-						aria-disabled={item.disabled || undefined}
+						disabled={item.disabled}
 						tabindex={-1}
-						type="button"
 					>
-						{#if item.icon}
-							<span class="shrink-0">
-								<Thc thc={item.icon} />
-							</span>
-						{/if}
-						<span class="flex-1">
-							<Thc thc={item.label} />
-						</span>
-						{#if item.shortcut}
-							<span
-								class="text-xs text-dropdown-header dark:text-dropdown-header-dark ml-auto"
-							>
-								{item.shortcut}
-							</span>
-						{/if}
-					</button>
+						<Thc thc={item.label} />
+					</ListItemButton>
 				{:else if item.type === "divider"}
 					<div
 						role="separator"
@@ -755,19 +732,16 @@
 						_navItems.active?.id === item.id}
 					<div role="group" aria-labelledby={expandableHeaderId(item.id)}>
 						<!-- Expandable header -->
-						<button
+						<ListItemButton
 							id={expandableHeaderId(item.id)}
 							role="menuitem"
-							class={twMerge(
-								DROPDOWN_MENU_ITEM_CLASSES,
-								"font-medium",
-								classExpandable,
-								item.class,
-								isExpandableActive && "bg-neutral-200 dark:bg-neutral-600",
-								isExpandableActive && classItemActive,
-								item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
-								item.disabled && classItemDisabled
-							)}
+							focused={isExpandableActive}
+							contentBefore={item.contentBefore}
+							contentAfter={{ html: iconChevronRight({ size: 16 }) }}
+							class={twMerge("font-medium", classExpandable, item.class)}
+							classFocused={classItemActive}
+							classContentBefore={classItemBefore}
+							classContentAfter={twMerge("transition-transform", isExpanded && "rotate-90")}
 							onclick={() => toggleExpanded(item.id)}
 							onmouseenter={() =>
 								navItems.setActive({
@@ -776,27 +750,11 @@
 									expandableItem: item,
 								})}
 							aria-expanded={isExpanded}
-							aria-disabled={item.disabled || undefined}
+							disabled={item.disabled}
 							tabindex={-1}
-							type="button"
 						>
-							{#if item.icon}
-								<span class="shrink-0">
-									<Thc thc={item.icon} />
-								</span>
-							{/if}
-							<span class="flex-1">
-								<Thc thc={item.label} />
-							</span>
-							<span
-								class={twMerge(
-									"transition-transform inline-block",
-									isExpanded && "rotate-90"
-								)}
-							>
-								{@html iconChevronRight({ size: 16 })}
-							</span>
-						</button>
+							<Thc thc={item.label} />
+						</ListItemButton>
 
 						<!-- Expandable content -->
 						{#if isExpanded}
@@ -810,41 +768,23 @@
 								{#each item.items as childItem}
 									{#if childItem.type === "action"}
 										{@const isChildActive = _navItems.active?.id === childItem.id}
-										<button
+										<ListItemButton
 											id={itemId(childItem.id)}
 											role="menuitem"
-											class={twMerge(
-												DROPDOWN_MENU_ITEM_CLASSES,
-												classItem,
-												childItem.class,
-												isChildActive && "bg-neutral-200 dark:bg-neutral-600",
-												isChildActive && classItemActive,
-												childItem.disabled &&
-													"opacity-50 cursor-not-allowed pointer-events-none",
-												childItem.disabled && classItemDisabled
-											)}
+											focused={isChildActive}
+											contentBefore={childItem.contentBefore}
+											contentAfter={childItem.contentAfter}
+											class={twMerge(classItem, childItem.class)}
+											classFocused={classItemActive}
+											classContentBefore={classItemBefore}
+											classContentAfter={classItemAfter}
 											onclick={() => selectItem(childItem)}
 											onmouseenter={() => navItems.setActive(childItem)}
-											aria-disabled={childItem.disabled || undefined}
+											disabled={childItem.disabled}
 											tabindex={-1}
-											type="button"
 										>
-											{#if childItem.icon}
-												<span class="shrink-0">
-													<Thc thc={childItem.icon} />
-												</span>
-											{/if}
-											<span class="flex-1">
-												<Thc thc={childItem.label} />
-											</span>
-											{#if childItem.shortcut}
-												<span
-													class="text-xs text-dropdown-header dark:text-dropdown-header-dark ml-auto"
-												>
-													{childItem.shortcut}
-												</span>
-											{/if}
-										</button>
+											<Thc thc={childItem.label} />
+										</ListItemButton>
 									{:else if childItem.type === "divider"}
 										<div
 											role="separator"

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

@@ -21,10 +21,10 @@ export interface DropdownMenuActionItem extends DropdownMenuItemBase {
     type: "action";
     /** Label displayed - supports THC for icons, HTML, etc. */
     label: THC;
-    /** Shortcut hint displayed on the right (e.g., "Cmd+K") */
-    shortcut?: string;
-    /** Icon displayed before label - supports THC */
-    icon?: THC;
+    /** Content displayed before label (e.g., icon) - supports THC */
+    contentBefore?: THC;
+    /** Content displayed after label (e.g., shortcut hint, badge) - supports THC */
+    contentAfter?: THC;
     /** Callback when item is selected */
     onSelect?: () => void | boolean;
 }
@@ -54,7 +54,8 @@ export interface DropdownMenuExpandableItem extends DropdownMenuItemBase {
     type: "expandable";
     /** Label for the expandable header */
     label: THC;
-    icon?: THC;
+    /** Content displayed before label (e.g., icon) - supports THC */
+    contentBefore?: THC;
     /** Nested items (single level only - no nested expandables) */
     items: DropdownMenuFlatItem[];
     /** Whether section starts expanded */
@@ -102,6 +103,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     classItemActive?: string;
     /** Classes for disabled items */
     classItemDisabled?: string;
+    /** Classes for content before label (contentBefore slot) */
+    classItemBefore?: string;
+    /** Classes for content after label (contentAfter slot) */
+    classItemAfter?: string;
     /** Classes for dividers */
     classDivider?: string;
     /** Classes for header items */
@@ -145,7 +150,6 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
 export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
 export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tcursor-pointer\n\t\t";
 export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
-export declare const DROPDOWN_MENU_ITEM_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\tpx-3 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left \n\t\trounded-md\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\t\thover:bg-neutral-100 dark:hover:bg-neutral-700\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-600\n\t";
 export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
 export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";
 export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "\n\t\tstuic-dropdown-menu-backdrop\n\t\tfixed inset-0 bg-black/25\n\t\tz-40\n\t";

package/dist/components/DropdownMenu/index.css

@@ -3,6 +3,14 @@
 	scrollbar-width: thin;
 }
 
+/* Override ListItemButton defaults for dropdown context */
+.stuic-dropdown-menu-dropdown .stuic-list-item-button {
+	--color-lib-bg: transparent;
+	--color-lib-bg-dark: transparent;
+	--color-lib-border: transparent;
+	--color-lib-border-dark: transparent;
+}
+
 @position-try --pop-top {
 	position-area: top; /* above, centered */
 }
@@ -39,8 +47,8 @@
 		/* order: try other bottom positions first, then top, then left/right */
 		position-try-fallbacks:
 			flip-inline, --pop-bottom-span-right, --pop-bottom-span-left, --pop-bottom,
-			flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top,
-			--pop-left, --pop-right;
+			flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top, --pop-left,
+			--pop-right;
 	}
 }
 

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

@@ -1 +1 @@
-export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_ITEM_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";
+export { default as DropdownMenu, type Props as DropdownMenuProps, type DropdownMenuItem, type DropdownMenuActionItem, type DropdownMenuDividerItem, type DropdownMenuHeaderItem, type DropdownMenuCustomItem, type DropdownMenuExpandableItem, type DropdownMenuFlatItem, type DropdownMenuPosition, type NavigableItem, type NavigableExpandable, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/DropdownMenu/index.js

@@ -1 +1 @@
-export { default as DropdownMenu, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_ITEM_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";
+export { default as DropdownMenu, DROPDOWN_MENU_BASE_CLASSES, DROPDOWN_MENU_TRIGGER_CLASSES, DROPDOWN_MENU_DROPDOWN_CLASSES, DROPDOWN_MENU_DIVIDER_CLASSES, DROPDOWN_MENU_HEADER_CLASSES, } from "./DropdownMenu.svelte";

package/dist/components/Input/FieldOptions.svelte

@@ -23,6 +23,7 @@
 	import X from "../X/X.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import FieldLikeButton from "./FieldLikeButton.svelte";
+	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
 
 	export interface Option {
 		label: string;
@@ -33,6 +34,7 @@
 
 	export interface Props extends Record<string, any> {
 		trigger?: Snippet<[{ value: string; modal: ModalDialog }]>;
+		modal?: ModalDialog;
 		input?: HTMLInputElement;
 		value: string;
 		label?: SnippetWithId | THC;
@@ -96,7 +98,7 @@
 			clear_all: "Clear selected",
 			clear: "Clear",
 			search_placeholder: "Type to search...",
-			search_submit_placeholder: "Type to search and/or submit...",
+			search_submit_placeholder: "Type to search and submit...",
 			cardinality_full: "Max selection reached",
 			select_from_list: "Please select from the list only",
 			x_close: "Clear input or close [esc]",
@@ -123,6 +125,7 @@
 
 	let {
 		trigger,
+		modal = $bindable(),
 		input = $bindable(),
 		value = $bindable(), //
 		label = "",
@@ -181,6 +184,10 @@
 	}: Props = $props();
 
 	let modalDialog: ModalDialog = $state()!;
+	// Sync internal modal state to bindable prop for external access
+	$effect(() => {
+		modal = modalDialog;
+	});
 	let innerValue = $state("");
 	let isFetching = $state(false);
 	let isUnmounted = false;
@@ -220,6 +227,13 @@
 		return renderOptionLabel?.(item) || `${item[itemIdPropName]}`;
 	}
 
+	function getIconThc(isSelected: boolean): { html: string } {
+		if (isMultiple) {
+			return { html: isSelected ? iconCheckboxCheck() : iconCheckboxEmpty() };
+		}
+		return { html: isSelected ? iconRadioCheck() : iconRadioEmpty() };
+	}
+
 	function sortFn(a: Item, b: Item) {
 		const withOptGroup = (i: Item) => `${i.optgroup || ""}__${_renderOptionLabel(i)}`;
 		return withOptGroup(a).localeCompare(withOptGroup(b), undefined, {
@@ -418,16 +432,6 @@
 
 	let groupedOptions = $derived(_normalize_and_group_options(options.items));
 
-	const BTN_CLS = [
-		"no-focus-visible",
-		"text-left rounded-md py-2 px-2.5 flex items-center space-x-2",
-		"w-full",
-		"border border-transparent",
-		"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
-		"focus-visible:outline-0 focus-visible:ring-0",
-		"hover:border-neutral-400 dark:hover:border-neutral-500",
-	];
-
 	// add new dance
 	$effect(() => {
 		if (addNewBtn && isAddNewBtnActive) {
@@ -662,18 +666,15 @@
 
 								{#if !isFetching && allowUnknown && innerValue && !have_option_label_like(options.items, innerValue)}
 									<div class="px-1">
-										<button
-											type="button"
-											bind:this={addNewBtn}
+										<ListItemButton
+											bind:el={addNewBtn}
 											onclick={add_new}
-											class={twMerge(
-												BTN_CLS,
-												classOption,
-												isAddNewBtnActive && classOptionActive
-											)}
+											focused={isAddNewBtnActive}
+											class={classOption}
+											classFocused={classOptionActive}
 										>
 											{t("add_new", { value: innerValue })}
-										</button>
+										</ListItemButton>
 									</div>
 								{/if}
 
@@ -681,23 +682,23 @@
 									{#if _optgroup}
 										<div
 											class={twMerge(
-												"text-sm capitalize opacity-50 border-b border-black/10 mb-0.5 p-1 mx-1",
+												"mb-1 p-1 text-xs font-semibold uppercase tracking-wide",
+												"text-neutral-500 dark:text-neutral-400",
 												classOptgroup
 											)}
 										>
 											{_optgroup}
 										</div>
 									{/if}
-									<ul class="space-y-0.5">
+									<ul role="presentation" class="space-y-1">
 										<!-- {#each options.items as item} -->
 										{#each _opts as item (item[itemIdPropName])}
 											{@const active =
 												item[itemIdPropName] === options.active?.[itemIdPropName]}
 											{@const isSelected =
 												selected.items && _selectedColl.exists(item[itemIdPropName])}
-											<li class:active class="px-1">
-												<button
-													type="button"
+											<li class:active role="presentation" class="px-1">
+												<ListItemButton
 													id={btn_id(item[itemIdPropName])}
 													onclick={() => {
 														if (isMultiple) {
@@ -713,40 +714,19 @@
 															submit();
 														}
 													}}
-													class:active
-													class:selected={isSelected}
-													class={twMerge(
-														BTN_CLS,
-														isSelected && "bg-neutral-200 dark:bg-neutral-800",
-														classOption,
-														// active && "border-neutral-400",
-														active && classOptionActive
-													)}
-													tabindex="-1"
+													active={isSelected}
+													focused={active}
+													contentBefore={showIcons ? getIconThc(isSelected) : undefined}
+													classContentBefore={isSelected ? "opacity-100" : "opacity-50"}
+													class={classOption}
+													classActive={classOptionActive}
+													classFocused={classOptionActive}
+													tabindex={-1}
 													role={isMultiple ? "checkbox" : "radio"}
 													aria-checked={isSelected}
 												>
-													{#if showIcons}
-														<span class={isSelected ? "opacity-100" : "opacity-25"}>
-															{#if isMultiple}
-																{#if isSelected}
-																	{@html iconCheckboxCheck()}
-																{:else}
-																	{@html iconCheckboxEmpty()}
-																{/if}
-															{:else if isSelected}
-																{@html iconRadioCheck()}
-															{:else}
-																{@html iconRadioEmpty()}
-															{/if}
-														</span>
-													{/if}
-													<span
-														class={twMerge(
-															"min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-														)}>{_renderOptionLabel(item)}</span
-													>
-												</button>
+													{_renderOptionLabel(item)}
+												</ListItemButton>
 											</li>
 										{/each}
 									</ul>

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

@@ -17,6 +17,7 @@ export interface Props extends Record<string, any> {
         value: string;
         modal: ModalDialog;
     }]>;
+    modal?: ModalDialog;
     input?: HTMLInputElement;
     value: string;
     label?: SnippetWithId | THC;
@@ -65,6 +66,6 @@ export interface Props extends Record<string, any> {
     itemIdPropName?: string;
     onChange?: (value: string) => void;
 }
-declare const FieldOptions: import("svelte").Component<Props, {}, "value" | "input">;
+declare const FieldOptions: import("svelte").Component<Props, {}, "value" | "input" | "modal">;
 type FieldOptions = ReturnType<typeof FieldOptions>;
 export default FieldOptions;

package/dist/components/ListItemButton/ListItemButton.svelte

@@ -0,0 +1,170 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { THC } from "../Thc/Thc.svelte";
+
+	export interface Props extends Omit<HTMLButtonAttributes, "children" | "class"> {
+		/** Content displayed in the button */
+		children?: Snippet;
+		/** Whether this item is currently active/selected (visual state) */
+		active?: boolean;
+		/** Whether this item is currently focused via keyboard navigation */
+		focused?: boolean;
+		/** Size preset affecting padding and min-height (sm, md, lg) */
+		size?: "sm" | "md" | "lg" | string;
+		/** Skip all default styling, use only custom classes */
+		unstyled?: boolean;
+		/** Enable touch-friendly sizing (larger tap targets). "auto" detects coarse pointer. */
+		touchFriendly?: boolean | "auto";
+		/** Icon/content displayed before the main content */
+		contentBefore?: THC;
+		/** Icon/content displayed after the main content */
+		contentAfter?: THC;
+		/** Render as anchor tag instead of button */
+		href?: string;
+		/** CSS classes for the button element */
+		class?: string;
+		/** CSS classes for the icon before slot */
+		classContentBefore?: string;
+		/** CSS classes for the icon after slot */
+		classContentAfter?: string;
+		/** CSS classes applied when active */
+		classActive?: string;
+		/** CSS classes applied when focused */
+		classFocused?: string;
+		/** Bindable element reference */
+		el?: HTMLButtonElement | HTMLAnchorElement;
+	}
+
+	export interface ListItemButtonPresetClasses {
+		size: Record<string, string>;
+		touchFriendly: string;
+	}
+
+	export const LIST_ITEM_BUTTON_STUIC_BASE_CLASSES = `
+		w-full
+		flex items-center gap-2
+		text-left
+		rounded-[var(--lib-radius)]
+		cursor-pointer
+		touch-action-manipulation
+
+		bg-lib-bg dark:bg-lib-bg-dark
+		text-lib-text dark:text-lib-text-dark
+
+		border border-lib-border dark:border-lib-border-dark
+
+		hover:bg-lib-hover-bg dark:hover:bg-lib-hover-bg-dark
+		hover:text-lib-hover-text dark:hover:text-lib-hover-text-dark
+		hover:border-lib-hover-border dark:hover:border-lib-hover-border-dark
+
+		focus:outline-none
+		focus-visible:bg-lib-focus-bg dark:focus-visible:bg-lib-focus-bg-dark
+		focus-visible:text-lib-focus-text dark:focus-visible:text-lib-focus-text-dark
+		focus-visible:border-lib-focus-border dark:focus-visible:border-lib-focus-border-dark
+
+		disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none
+	`;
+
+	export const LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES: ListItemButtonPresetClasses = {
+		size: {
+			sm: `px-2 py-1.5 text-sm min-h-[36px]`,
+			md: `px-2.5 py-2 text-base min-h-[40px]`,
+			lg: `px-3 py-2.5 text-base min-h-[44px]`,
+		},
+		touchFriendly: `min-h-[44px] py-2.5`,
+	};
+
+	export const LIST_ITEM_BUTTON_ACTIVE_CLASSES = `
+		bg-lib-active-bg dark:bg-lib-active-bg-dark
+		text-lib-active-text dark:text-lib-active-text-dark
+		border-lib-active-border dark:border-lib-active-border-dark
+	`;
+
+	export const LIST_ITEM_BUTTON_FOCUSED_CLASSES = `
+		bg-lib-focus-bg dark:bg-lib-focus-bg-dark
+		text-lib-focus-text dark:text-lib-focus-text-dark
+		border-lib-focus-border dark:border-lib-focus-border-dark
+	`;
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { DevicePointer } from "../../utils/device-pointer.svelte.js";
+	import Thc from "../Thc/Thc.svelte";
+	import "./index.css";
+
+	let {
+		children,
+		active = false,
+		focused = false,
+		size = "md",
+		unstyled = false,
+		touchFriendly = false,
+		contentBefore,
+		contentAfter,
+		href,
+		class: classProp,
+		classContentBefore,
+		classContentAfter,
+		classActive,
+		classFocused,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	const devicePointer = new DevicePointer();
+
+	const _base = LIST_ITEM_BUTTON_STUIC_BASE_CLASSES;
+	const _preset = LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES;
+
+	let _touchClasses = $derived.by(() => {
+		if (touchFriendly === true) return _preset.touchFriendly;
+		if (touchFriendly === "auto" && devicePointer.isCoarse) return _preset.touchFriendly;
+		return "";
+	});
+
+	let _class = $derived(
+		[
+			"stuic-list-item-button",
+			size,
+			active && "active",
+			focused && "focused",
+			!unstyled && _base,
+			!unstyled && size && _preset.size[size],
+			!unstyled && _touchClasses,
+			!unstyled && active && LIST_ITEM_BUTTON_ACTIVE_CLASSES,
+			!unstyled && focused && !active && LIST_ITEM_BUTTON_FOCUSED_CLASSES,
+			active && classActive,
+			focused && !active && classFocused,
+		]
+			.filter(Boolean)
+			.join(" ")
+	);
+</script>
+
+{#snippet content()}
+	{#if contentBefore}
+		<span class={twMerge("shrink-0", classContentBefore)}>
+			<Thc thc={contentBefore} />
+		</span>
+	{/if}
+	<span class="flex-1 min-w-0">
+		{@render children?.()}
+	</span>
+	{#if contentAfter}
+		<span class={twMerge("shrink-0", classContentAfter)}>
+			<Thc thc={contentAfter} />
+		</span>
+	{/if}
+{/snippet}
+
+{#if href}
+	<a {href} bind:this={el} class={twMerge(_class, classProp)} {...rest as any}>
+		{@render content()}
+	</a>
+{:else}
+	<button bind:this={el} class={twMerge(_class, classProp)} type="button" {...rest}>
+		{@render content()}
+	</button>
+{/if}

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

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { THC } from "../Thc/Thc.svelte";
+export interface Props extends Omit<HTMLButtonAttributes, "children" | "class"> {
+    /** Content displayed in the button */
+    children?: Snippet;
+    /** Whether this item is currently active/selected (visual state) */
+    active?: boolean;
+    /** Whether this item is currently focused via keyboard navigation */
+    focused?: boolean;
+    /** Size preset affecting padding and min-height (sm, md, lg) */
+    size?: "sm" | "md" | "lg" | string;
+    /** Skip all default styling, use only custom classes */
+    unstyled?: boolean;
+    /** Enable touch-friendly sizing (larger tap targets). "auto" detects coarse pointer. */
+    touchFriendly?: boolean | "auto";
+    /** Icon/content displayed before the main content */
+    contentBefore?: THC;
+    /** Icon/content displayed after the main content */
+    contentAfter?: THC;
+    /** Render as anchor tag instead of button */
+    href?: string;
+    /** CSS classes for the button element */
+    class?: string;
+    /** CSS classes for the icon before slot */
+    classContentBefore?: string;
+    /** CSS classes for the icon after slot */
+    classContentAfter?: string;
+    /** CSS classes applied when active */
+    classActive?: string;
+    /** CSS classes applied when focused */
+    classFocused?: string;
+    /** Bindable element reference */
+    el?: HTMLButtonElement | HTMLAnchorElement;
+}
+export interface ListItemButtonPresetClasses {
+    size: Record<string, string>;
+    touchFriendly: string;
+}
+export declare const LIST_ITEM_BUTTON_STUIC_BASE_CLASSES = "\n\t\tw-full\n\t\tflex items-center gap-2\n\t\ttext-left\n\t\trounded-[var(--lib-radius)]\n\t\tcursor-pointer\n\t\ttouch-action-manipulation\n\n\t\tbg-lib-bg dark:bg-lib-bg-dark\n\t\ttext-lib-text dark:text-lib-text-dark\n\n\t\tborder border-lib-border dark:border-lib-border-dark\n\n\t\thover:bg-lib-hover-bg dark:hover:bg-lib-hover-bg-dark\n\t\thover:text-lib-hover-text dark:hover:text-lib-hover-text-dark\n\t\thover:border-lib-hover-border dark:hover:border-lib-hover-border-dark\n\n\t\tfocus:outline-none\n\t\tfocus-visible:bg-lib-focus-bg dark:focus-visible:bg-lib-focus-bg-dark\n\t\tfocus-visible:text-lib-focus-text dark:focus-visible:text-lib-focus-text-dark\n\t\tfocus-visible:border-lib-focus-border dark:focus-visible:border-lib-focus-border-dark\n\n\t\tdisabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\n\t";
+export declare const LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES: ListItemButtonPresetClasses;
+export declare const LIST_ITEM_BUTTON_ACTIVE_CLASSES = "\n\t\tbg-lib-active-bg dark:bg-lib-active-bg-dark\n\t\ttext-lib-active-text dark:text-lib-active-text-dark\n\t\tborder-lib-active-border dark:border-lib-active-border-dark\n\t";
+export declare const LIST_ITEM_BUTTON_FOCUSED_CLASSES = "\n\t\tbg-lib-focus-bg dark:bg-lib-focus-bg-dark\n\t\ttext-lib-focus-text dark:text-lib-focus-text-dark\n\t\tborder-lib-focus-border dark:border-lib-focus-border-dark\n\t";
+import "./index.css";
+declare const ListItemButton: import("svelte").Component<Props, {}, "el">;
+type ListItemButton = ReturnType<typeof ListItemButton>;
+export default ListItemButton;

package/dist/components/ListItemButton/README.md

@@ -0,0 +1,180 @@
+# ListItemButton
+
+A versatile button component for list-like contexts such as dropdown menus, command palettes, and option lists. Supports multiple visual states, touch-friendly sizing, and full CSS variable customization.
+
+## Usage
+
+```svelte
+<script>
+  import { ListItemButton } from "stuic";
+</script>
+
+<ListItemButton>Click me</ListItemButton>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `Snippet` | - | Content displayed in the button |
+| `active` | `boolean` | `false` | Whether this item is currently active/selected |
+| `focused` | `boolean` | `false` | Whether this item is focused via keyboard navigation |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset affecting padding and min-height |
+| `unstyled` | `boolean` | `false` | Skip all default styling, use only custom classes |
+| `touchFriendly` | `boolean \| "auto"` | `false` | Enable touch-friendly sizing. `"auto"` detects coarse pointer. |
+| `contentBefore` | `THC` | - | Icon/content displayed before the main content |
+| `contentAfter` | `THC` | - | Icon/content displayed after the main content |
+| `href` | `string` | - | Render as anchor tag instead of button |
+| `class` | `string` | - | CSS classes for the button element |
+| `classContentBefore` | `string` | - | CSS classes for the icon before slot |
+| `classContentAfter` | `string` | - | CSS classes for the icon after slot |
+| `classActive` | `string` | - | CSS classes applied when active |
+| `classFocused` | `string` | - | CSS classes applied when focused |
+| `el` | `HTMLButtonElement \| HTMLAnchorElement` | - | Bindable element reference |
+
+## Examples
+
+### Basic States
+
+```svelte
+<ListItemButton>Default</ListItemButton>
+<ListItemButton active>Active (selected)</ListItemButton>
+<ListItemButton focused>Focused (keyboard nav)</ListItemButton>
+<ListItemButton disabled>Disabled</ListItemButton>
+```
+
+### Sizes
+
+```svelte
+<ListItemButton size="sm">Small</ListItemButton>
+<ListItemButton size="md">Medium (default)</ListItemButton>
+<ListItemButton size="lg">Large</ListItemButton>
+```
+
+### Touch Friendly
+
+```svelte
+<!-- Always use touch-friendly sizing (min-height 44px) -->
+<ListItemButton touchFriendly>Touch friendly</ListItemButton>
+
+<!-- Auto-detect coarse pointer (touch screens) -->
+<ListItemButton touchFriendly="auto">Auto detect</ListItemButton>
+```
+
+### With Icons
+
+```svelte
+<script>
+  import { ListItemButton, iconUser, iconChevronRight } from "stuic";
+</script>
+
+<ListItemButton contentBefore={{ html: iconUser({}) }}>
+  User Profile
+</ListItemButton>
+
+<ListItemButton contentAfter={{ html: iconChevronRight({}) }}>
+  Settings
+</ListItemButton>
+
+<ListItemButton
+  contentBefore={{ html: iconUser({}) }}
+  contentAfter={{ html: iconChevronRight({}) }}
+>
+  Both icons
+</ListItemButton>
+```
+
+### As Link
+
+```svelte
+<ListItemButton href="/settings">Settings</ListItemButton>
+```
+
+### Unstyled
+
+```svelte
+<ListItemButton unstyled class="my-custom-classes">
+  Custom styled
+</ListItemButton>
+```
+
+## CSS Variables
+
+All colors support customization via CSS variables. Define them on a parent element to override defaults.
+
+### Border Radius
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--lib-radius` | `var(--radius-md)` | Border radius |
+
+### Base State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--color-lib-bg` | `neutral-200` | Background color |
+| `--color-lib-bg-dark` | `neutral-600` | Background color (dark mode) |
+| `--color-lib-text` | `black` | Text color |
+| `--color-lib-text-dark` | `neutral-100` | Text color (dark mode) |
+| `--color-lib-border` | `transparent` | Border color |
+| `--color-lib-border-dark` | `transparent` | Border color (dark mode) |
+
+### Hover State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--color-lib-hover-bg` | `neutral-500` | Hover background |
+| `--color-lib-hover-bg-dark` | `neutral-200` | Hover background (dark mode) |
+| `--color-lib-hover-text` | `white` | Hover text color |
+| `--color-lib-hover-text-dark` | `neutral-900` | Hover text color (dark mode) |
+| `--color-lib-hover-border` | `transparent` | Hover border color |
+| `--color-lib-hover-border-dark` | `transparent` | Hover border color (dark mode) |
+
+### Active State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--color-lib-active-bg` | `neutral-500` | Active background |
+| `--color-lib-active-bg-dark` | `neutral-200` | Active background (dark mode) |
+| `--color-lib-active-text` | `white` | Active text color |
+| `--color-lib-active-text-dark` | `neutral-900` | Active text color (dark mode) |
+| `--color-lib-active-border` | `transparent` | Active border color |
+| `--color-lib-active-border-dark` | `transparent` | Active border color (dark mode) |
+
+### Focus State
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--color-lib-focus-bg` | `neutral-500` | Focus background |
+| `--color-lib-focus-bg-dark` | `neutral-200` | Focus background (dark mode) |
+| `--color-lib-focus-text` | `white` | Focus text color |
+| `--color-lib-focus-text-dark` | `neutral-900` | Focus text color (dark mode) |
+| `--color-lib-focus-border` | `transparent` | Focus border color |
+| `--color-lib-focus-border-dark` | `transparent` | Focus border color (dark mode) |
+
+### Custom Theme Example
+
+```svelte
+<div style="
+  --color-lib-hover-bg: var(--color-blue-500);
+  --color-lib-hover-bg-dark: var(--color-blue-600);
+  --color-lib-active-bg: var(--color-blue-600);
+  --color-lib-active-bg-dark: var(--color-blue-500);
+">
+  <ListItemButton>Blue theme</ListItemButton>
+  <ListItemButton active>Active blue</ListItemButton>
+</div>
+```
+
+## Exported Constants
+
+The component exports several class constants for advanced customization:
+
+```typescript
+import {
+  LIST_ITEM_BUTTON_STUIC_BASE_CLASSES,
+  LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES,
+  LIST_ITEM_BUTTON_ACTIVE_CLASSES,
+  LIST_ITEM_BUTTON_FOCUSED_CLASSES,
+} from "stuic";
+```

package/dist/components/ListItemButton/index.css

@@ -0,0 +1,58 @@
+/* Border radius (0.375rem = rounded-md) */
+:root {
+	--lib-radius: var(--radius-md);
+}
+
+/* prettier-ignore */
+@theme inline {
+
+	/* "lib" -> list item button */
+
+	/* Private defaults (for human readability) */
+	--_lib-bg: var(--color-neutral-200);
+	--_lib-bg-hi: var(--color-neutral-500);
+	--_lib-bg-dark: var(--color-neutral-600);
+	--_lib-bg-hi-dark: var(--color-neutral-200);
+
+	--_lib-text: var(--color-black);
+	--_lib-text-hi: var(--color-white);
+	--_lib-text-dark: var(--color-neutral-100);
+	--_lib-text-hi-dark: var(--color-neutral-900);
+	
+	--_lib-border: transparent;
+	--_lib-border-hi: transparent;
+	--_lib-border-dark: transparent;
+	--_lib-border-hi-dark: transparent;
+
+	/* Base state */
+	--color-lib-bg:          var(--color-lib-bg,          var(--_lib-bg));
+	--color-lib-bg-dark:     var(--color-lib-bg-dark,     var(--_lib-bg-dark));
+	--color-lib-text:        var(--color-lib-text,        var(--_lib-text));
+	--color-lib-text-dark:   var(--color-lib-text-dark,   var(--_lib-text-dark));
+	--color-lib-border:      var(--color-lib-border,      var(--_lib-border));
+	--color-lib-border-dark: var(--color-lib-border-dark, var(--_lib-border-dark));
+
+	/* Hover state */
+	--color-lib-hover-bg:          var(--color-lib-hover-bg,          var(--_lib-bg-hi));
+	--color-lib-hover-bg-dark:     var(--color-lib-hover-bg-dark,     var(--_lib-bg-hi-dark));
+	--color-lib-hover-text:        var(--color-lib-hover-text,        var(--_lib-text-hi));
+	--color-lib-hover-text-dark:   var(--color-lib-hover-text-dark,   var(--_lib-text-hi-dark));
+	--color-lib-hover-border:      var(--color-lib-hover-border,      var(--_lib-border-hi));
+	--color-lib-hover-border-dark: var(--color-lib-hover-border-dark, var(--_lib-border-hi-dark));
+
+	/* Active/Selected state */
+	--color-lib-active-bg:          var(--color-lib-active-bg,          var(--_lib-bg-hi));
+	--color-lib-active-bg-dark:     var(--color-lib-active-bg-dark,     var(--_lib-bg-hi-dark));
+	--color-lib-active-text:        var(--color-lib-active-text,        var(--_lib-text-hi));
+	--color-lib-active-text-dark:   var(--color-lib-active-text-dark,   var(--_lib-text-hi-dark));
+	--color-lib-active-border:      var(--color-lib-active-border,      var(--_lib-border-hi));
+	--color-lib-active-border-dark: var(--color-lib-active-border-dark, var(--_lib-border-hi-dark));
+
+	/* Focus-visible state (keyboard focus) */
+	--color-lib-focus-bg:          var(--color-lib-focus-bg,          var(--_lib-bg-hi));
+	--color-lib-focus-bg-dark:     var(--color-lib-focus-bg-dark,     var(--_lib-bg-hi-dark));
+	--color-lib-focus-text:        var(--color-lib-focus-text,        var(--_lib-text-hi));
+	--color-lib-focus-text-dark:   var(--color-lib-focus-text-dark,   var(--_lib-text-hi-dark));
+	--color-lib-focus-border:      var(--color-lib-focus-border,      var(--_lib-border-hi));
+	--color-lib-focus-border-dark: var(--color-lib-focus-border-dark, var(--_lib-border-hi-dark));
+}

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

@@ -0,0 +1 @@
+export { default as ListItemButton, type Props as ListItemButtonProps, type ListItemButtonPresetClasses, LIST_ITEM_BUTTON_STUIC_BASE_CLASSES, LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES, LIST_ITEM_BUTTON_ACTIVE_CLASSES, LIST_ITEM_BUTTON_FOCUSED_CLASSES, } from "./ListItemButton.svelte";

package/dist/components/ListItemButton/index.js

@@ -0,0 +1 @@
+export { default as ListItemButton, LIST_ITEM_BUTTON_STUIC_BASE_CLASSES, LIST_ITEM_BUTTON_STUIC_PRESET_CLASSES, LIST_ITEM_BUTTON_ACTIVE_CLASSES, LIST_ITEM_BUTTON_FOCUSED_CLASSES, } from "./ListItemButton.svelte";

package/dist/index.css

@@ -20,6 +20,7 @@ so, since we need to override, sticking with that */
 	@import "./components/ButtonGroupRadio/index.css";
 	@import "./components/DismissibleMessage/index.css";
 	@import "./components/Input/index.css";
+	@import "./components/ListItemButton/index.css";
 	@import "./components/Notifications/index.css";
 	@import "./components/Progress/index.css";
 	@import "./components/Switch/index.css";

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from "./components/DropdownMenu/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";
+export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";

package/dist/index.js

@@ -39,6 +39,7 @@ export * from "./components/DropdownMenu/index.js";
 export * from "./components/HoverExpandableWidth/index.js";
 export * from "./components/Input/index.js";
 export * from "./components/KbdShortcut/index.js";
+export * from "./components/ListItemButton/index.js";
 export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.63.0",
+  "version": "2.65.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",