@marianmeres/stuic 2.56.0 → 2.57.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/DropdownMenu/DropdownMenu.svelte

@@ -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) {

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/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.57.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",