@marianmeres/stuic 2.14.0 → 2.17.0

package/dist/components/AvatarInitials/AvatarInitials.svelte

@@ -5,7 +5,7 @@
 		/** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
 		hashSource?: string;
 		/** Size preset or custom Tailwind size class */
-		size?: "sm" | "md" | "lg" | string;
+		size?: "sm" | "md" | "lg" | "xl" | string;
 		/** Click handler - when provided, renders as a button */
 		onclick?: (event: MouseEvent) => void;
 		/** Background color (Tailwind class). Ignored if autoColor=true */
@@ -41,6 +41,7 @@
 		sm: "size-8 text-xs",
 		md: "size-10 text-sm",
 		lg: "size-14 text-base",
+		xl: "size-16 text-lg",
 	};
 
 	let initials = $derived.by(() => {
@@ -52,7 +53,7 @@
 		if (_input.includes("@")) {
 			const username = _input.split("@")[0];
 			// Split by common separators (., _, -)
-			const parts = username.split(/[._-]/).filter(Boolean);
+			const parts = username.split(/[._+-]/).filter(Boolean);
 			if (parts.length > 1) {
 				_input = parts.map((p) => p.charAt(0)).join("");
 			} else {

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

@@ -4,7 +4,7 @@ export interface Props {
     /** Optional string for color hash calculation (e.g., email, user ID). Falls back to `input` */
     hashSource?: string;
     /** Size preset or custom Tailwind size class */
-    size?: "sm" | "md" | "lg" | string;
+    size?: "sm" | "md" | "lg" | "xl" | string;
     /** Click handler - when provided, renders as a button */
     onclick?: (event: MouseEvent) => void;
     /** Background color (Tailwind class). Ignored if autoColor=true */

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -159,8 +159,8 @@
 		onOpen?: () => void;
 		/** Called when menu closes */
 		onClose?: () => void;
-		/** Called when any action item is selected */
-		onSelect?: (item: DropdownMenuActionItem) => void;
+		/** Called when any action item is selected (fallback if item has no onSelect) */
+		onSelect?: (item: DropdownMenuActionItem) => void | boolean;
 		/** Reference to trigger element */
 		triggerEl?: HTMLButtonElement;
 		/** Reference to dropdown element */
@@ -213,7 +213,7 @@
 		bg-white dark:bg-neutral-800
 		text-neutral-900 dark:text-neutral-100
 		border border-neutral-200 dark:border-neutral-700
-		rounded-md shadow-lg
+		rounded-md shadow-sm
 		p-1
 		overflow-y-auto
 		z-50
@@ -299,7 +299,7 @@
 	let wrapperEl: HTMLDivElement = $state()!;
 	let activeItemEl: HTMLButtonElement | undefined = $state();
 	const reducedMotion = prefersReducedMotion();
-	const isSupported = !forceFallback && isAnchorPositioningSupported();
+	const isSupported = untrack(() => !forceFallback && isAnchorPositioningSupported());
 
 	// Track expanded sections (independent toggle - multiple can be open)
 	let expandedSections = $state<Set<string | number>>(new Set());
@@ -432,8 +432,8 @@
 	function selectItem(item: DropdownMenuActionItem) {
 		if (item.disabled) return;
 
-		const result = item.onSelect?.();
-		onSelect?.(item);
+		// Call item's onSelect if defined, otherwise fall back to component's onSelect
+		const result = item.onSelect ? item.onSelect() : onSelect?.(item);
 
 		if (result !== false && closeOnSelect) {
 			isOpen = false;

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

@@ -129,8 +129,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     onOpen?: () => void;
     /** Called when menu closes */
     onClose?: () => void;
-    /** Called when any action item is selected */
-    onSelect?: (item: DropdownMenuActionItem) => void;
+    /** Called when any action item is selected (fallback if item has no onSelect) */
+    onSelect?: (item: DropdownMenuActionItem) => void | boolean;
     /** Reference to trigger element */
     triggerEl?: HTMLButtonElement;
     /** Reference to dropdown element */
@@ -138,7 +138,7 @@ 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\tfocus-visible:outline-2 focus-visible:outline-offset-2\n\t\tcursor-pointer\n\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-lg\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_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-2 py-1.5\n\t\tmin-h-[44px]\n\t\ttext-left text-sm\n\t\trounded-sm\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";

package/dist/utils/observe-exists.svelte.js

@@ -28,7 +28,7 @@ export function observeExists(selector, options = {}) {
         throw new TypeError("Expecting non empty selector");
     const { rootElement = document.body } = options;
     const ns = `[observeExists] [${selector}]`;
-    const clog = (...args) => console.debug(ns, ...args);
+    const clogDebug = (...args) => console.debug(ns, ...args);
     const check = () => rootElement.querySelector(selector) !== null;
     let current = $state(check());
     //
@@ -47,14 +47,14 @@ export function observeExists(selector, options = {}) {
             current = check();
     });
     // start observing now
-    clog(`connecting...`);
+    clogDebug(`connecting...`);
     observer.observe(rootElement, { childList: true, subtree: true });
     return {
         get current() {
             return current;
         },
         disconnect() {
-            clog(`disconnecting...`);
+            clogDebug(`disconnecting...`);
             observer.disconnect();
         },
         forceCheck() {

package/package.json

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