@marianmeres/stuic 2.56.0 → 2.58.0

package/dist/components/Avatar/Avatar.svelte

@@ -22,7 +22,7 @@
 		/** Optional string for color hash calculation (e.g., email, user ID). Falls back to `initials` */
 		hashSource?: string;
 		/** Size preset or custom Tailwind size class */
-		size?: "sm" | "md" | "lg" | "xl" | string;
+		size?: "sm" | "md" | "lg" | "xl" | "2xl" | string;
 		/** Click handler - when provided, renders as a button */
 		onclick?: (event: MouseEvent) => void;
 		/** Background color (Tailwind class). Ignored if autoColor=true */
@@ -62,9 +62,10 @@
 
 	const SIZE_PRESETS: Record<string, { container: string; icon: number }> = {
 		sm: { container: "size-8 text-xs", icon: 16 },
-		md: { container: "size-10 text-sm", icon: 20 },
-		lg: { container: "size-14 text-base", icon: 28 },
-		xl: { container: "size-16 text-lg", icon: 32 },
+		md: { container: "size-10 text-base", icon: 20 },
+		lg: { container: "size-12 text-lg", icon: 28 },
+		xl: { container: "size-14 text-xl", icon: 32 },
+		"2xl": { container: "size-16 text-2xl", icon: 36 },
 	};
 
 	// Extract initials from input string (email, name, or raw initials)

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

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

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -101,7 +101,7 @@
         border-button-group-border dark:border-button-group-border-dark
 		flex justify-between
         
-        focus-within:border-button-group-accent focus-within:dark:border-button-group-accent-dark
+        focus-within:border-button-group-accent  focus-within:dark:border-button-group-accent-dark
         focus-within:ring-button-group-accent/20 focus-within:dark:ring-button-group-accent-dark/20
         focus-within:ring-4
     `;

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -210,9 +210,9 @@
 		text-neutral-900 dark:text-neutral-100
 		border-neutral-200 dark:border-neutral-700
 		hover:brightness-95 dark:hover:brightness-110
-		focus-visible:outline-2 focus-visible:outline-offset-2
 		cursor-pointer
-	`;
+		`;
+	// focus-visible:outline-2 focus-visible:outline-offset-2
 
 	export const DROPDOWN_MENU_DROPDOWN_CLASSES = `
 		stuic-dropdown-menu-dropdown
@@ -271,11 +271,12 @@
 	import Thc from "../Thc/Thc.svelte";
 	import "./index.css";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
+	import { waitForTwoRepaints } from "../../utils/paint.js";
 
 	let {
 		items,
 		isOpen = $bindable(false),
-		position = "bottom-span-left",
+		position = "bottom-span-right",
 		offset = "0.25rem",
 		maxHeight = "300px",
 		closeOnSelect = true,
@@ -314,7 +315,14 @@
 	let wrapperEl: HTMLDivElement = $state()!;
 	let activeItemEl: HTMLButtonElement | undefined = $state();
 	const reducedMotion = prefersReducedMotion();
-	const isSupported = untrack(() => !forceFallback && isAnchorPositioningSupported());
+
+	// Runtime overflow detection state
+	let runtimeFallback = $state(false);
+	let switchingToFallback = false; // Non-reactive flag to prevent recursion
+
+	const isSupported = $derived(
+		!forceFallback && !runtimeFallback && isAnchorPositioningSupported()
+	);
 
 	// Track expanded sections (independent toggle - multiple can be open)
 	let expandedSections = $state<Set<string | number>>(new Set());
@@ -380,6 +388,50 @@
 		}
 	});
 
+	// Reset runtime fallback when menu closes
+	$effect(() => {
+		if (!isOpen) {
+			// Unlock body scroll if we were in runtime fallback mode
+			// (must do this before resetting runtimeFallback, otherwise isSupported
+			// becomes true and the main body scroll effect skips the unlock)
+			if (runtimeFallback && !noScrollLock) {
+				BodyScroll.unlock();
+			}
+			runtimeFallback = false;
+		}
+	});
+
+	// Runtime viewport overflow detection
+	$effect(() => {
+		if (!isOpen || !dropdownEl || forceFallback || runtimeFallback) return;
+		if (!isAnchorPositioningSupported()) return;
+		if (switchingToFallback) return;
+
+		const checkOverflow = async () => {
+			await waitForTwoRepaints();
+			if (!dropdownEl || !isOpen) return;
+
+			const rect = dropdownEl.getBoundingClientRect();
+			const viewportWidth = window.innerWidth;
+			const viewportHeight = window.innerHeight;
+
+			if (
+				rect.left < 0 ||
+				rect.right > viewportWidth ||
+				rect.top < 0 ||
+				rect.bottom > viewportHeight
+			) {
+				switchingToFallback = true;
+				runtimeFallback = true;
+				requestAnimationFrame(() => {
+					switchingToFallback = false;
+				});
+			}
+		};
+
+		checkOverflow();
+	});
+
 	// Scroll active item into view
 	$effect(() => {
 		if (isOpen && _navItems.active?.id) {
@@ -651,12 +703,12 @@
 						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,
-							classItem,
-							item.class
+							item.disabled && classItemDisabled
 						)}
 						onclick={() => selectItem(item)}
 						onmouseenter={() => navItems.setActive(item)}
@@ -709,12 +761,12 @@
 							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,
-								classExpandable,
-								item.class
+								item.disabled && classItemDisabled
 							)}
 							onclick={() => toggleExpanded(item.id)}
 							onmouseenter={() =>
@@ -763,13 +815,13 @@
 											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,
-												classItem,
-												childItem.class
+												childItem.disabled && classItemDisabled
 											)}
 											onclick={() => selectItem(childItem)}
 											onmouseenter={() => navItems.setActive(childItem)}

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

@@ -143,7 +143,7 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     noScrollLock?: boolean;
 }
 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_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";

package/dist/components/DropdownMenu/index.css

@@ -3,10 +3,44 @@
 	scrollbar-width: thin;
 }
 
+@position-try --pop-top {
+	position-area: top; /* above, centered */
+}
+@position-try --pop-top-span-right {
+	position-area: top span-right; /* above, aligned to anchor's left edge */
+}
+@position-try --pop-top-span-left {
+	position-area: top span-left; /* above, aligned to anchor's right edge */
+}
+@position-try --pop-bottom {
+	position-area: bottom; /* below, centered */
+}
+@position-try --pop-bottom-span-right {
+	position-area: bottom span-right;
+}
+@position-try --pop-bottom-span-left {
+	position-area: bottom span-left;
+}
+@position-try --pop-left {
+	position-area: left;
+}
+@position-try --pop-right {
+	position-area: right;
+}
+
 /* CSS Anchor Positioning supported mode - flip only when viewport overflow */
 @supports (anchor-name: --anchor) {
 	.stuic-dropdown-menu-dropdown {
-		position-try-fallbacks: flip-block, flip-inline;
+		/* position-try-fallbacks: flip-block, flip-inline; */
+
+		/* position-area is set via inline style based on position param */
+
+		/* fallbacks ensure popover stays within viewport */
+		/* 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;
 	}
 }
 

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -75,7 +75,7 @@
 
 <kbd
 	class={twMerge(
-		"text-xs leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
+		"text-sm leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
 		classProp
 	)}
 >

package/dist/icons/index.d.ts

@@ -35,3 +35,4 @@ export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
+export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";

package/dist/icons/index.js

@@ -39,3 +39,4 @@ export { iconLucideCircle as iconCircle } from "@marianmeres/icons-fns/lucide/ic
 export { iconLucideSquare as iconSquare } from "@marianmeres/icons-fns/lucide/iconLucideSquare.js";
 export { iconLucideMenu as iconMenu } from "@marianmeres/icons-fns/lucide/iconLucideMenu.js";
 export { iconLucideUser as iconUser } from "@marianmeres/icons-fns/lucide/iconLucideUser.js";
+export { iconLucideEllipsisVertical as iconEllipsisVertical } from "@marianmeres/icons-fns/lucide/iconLucideEllipsisVertical.js";

package/dist/utils/breakpoint.svelte.js

@@ -29,7 +29,8 @@ const _breakpoints = [
  * ```
  */
 export class Breakpoint {
-    static #singleton;
+    /** Singleton */
+    static #instance;
     #bp = $derived.by(() => {
         const w = innerWidth.current || 0;
         return _breakpoints.reduce((m, [k, v]) => {
@@ -39,7 +40,11 @@ export class Breakpoint {
         }, { current: null, sm: false, md: false, lg: false, xl: false, "2xl": false });
     });
     static get instance() {
-        return (Breakpoint.#singleton ??= new Breakpoint());
+        // return (Breakpoint.#instance ??= new Breakpoint();) // does not work with Svelte correctly...
+        if (!Breakpoint.#instance) {
+            Breakpoint.#instance = new Breakpoint();
+        }
+        return Breakpoint.#instance;
     }
     get current() {
         return this.#bp.current;

package/package.json

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