@marianmeres/stuic 2.54.0 → 2.56.0

package/dist/actions/popover/index.css

@@ -51,6 +51,8 @@
 @supports (anchor-name: --anchor) {
 	.stuic-popover {
 		/* position-area is set via inline style based on position param */
+		/* prefer fallback position with most available width (helps on narrow mobile screens) */
+		position-try-order: most-width;
 		/* fallbacks ensure popover stays within viewport */
 		position-try-fallbacks:
 			--pop-top-span-right, --pop-top-span-left, flip-block, --pop-bottom-span-right,

package/dist/actions/popover/popover.svelte.js

@@ -1,6 +1,7 @@
 import { mount, unmount } from "svelte";
 import { twMerge } from "../../utils/tw-merge.js";
 import { addAnchorName, removeAnchorName } from "../../utils/anchor-name.js";
+import { BodyScroll } from "../../utils/body-scroll-locker.js";
 import PopoverContent from "./PopoverContent.svelte";
 //
 import "./index.css";
@@ -215,6 +216,7 @@ export function popover(anchorEl, fn) {
     let isVisible = false;
     let do_debug = false;
     let prevOpen = undefined;
+    let switchingToFallback = false; // flag to prevent recursion during fallback switch
     // Unique identifiers
     const rnd = Math.random().toString(36).slice(2);
     const id = `popover-${rnd}`;
@@ -382,6 +384,8 @@ export function popover(anchorEl, fn) {
             popoverEl.classList.add(...twMerge("stuic-popover-fallback", _classPopover, currentOptions.class).split(/\s/));
             wrapperEl.appendChild(popoverEl);
             document.body.appendChild(wrapperEl);
+            // Lock body scroll in fallback (modal) mode
+            BodyScroll.lock();
             // Click on wrapper (outside popover) closes
             if (currentOptions.closeOnClickOutside !== false) {
                 wrapperEl.addEventListener("click", (e) => {
@@ -419,6 +423,35 @@ export function popover(anchorEl, fn) {
         requestAnimationFrame(() => {
             popoverEl?.classList.add("pop-visible");
             backdropEl?.classList.add("pop-visible");
+            // Check for viewport overflow and switch to fallback if needed
+            if (useAnchorPositioning && popoverEl && !switchingToFallback) {
+                // Use another RAF to let browser finalize positioning
+                requestAnimationFrame(() => {
+                    if (!popoverEl)
+                        return;
+                    const rect = popoverEl.getBoundingClientRect();
+                    const viewportWidth = window.innerWidth;
+                    if (rect.left < 0 || rect.right > viewportWidth) {
+                        debug("overflow detected, switching to fallback mode");
+                        switchingToFallback = true;
+                        // Quick cleanup (skip transition)
+                        if (mountedComponent) {
+                            unmount(mountedComponent);
+                            mountedComponent = null;
+                        }
+                        popoverEl.remove();
+                        popoverEl = null;
+                        isVisible = false;
+                        // Re-show in fallback mode
+                        const originalForceFallback = currentOptions.forceFallback;
+                        currentOptions.forceFallback = true;
+                        show();
+                        currentOptions.forceFallback = originalForceFallback;
+                        switchingToFallback = false;
+                        return;
+                    }
+                });
+            }
             currentOptions.onShow?.();
         });
         // Add event listeners
@@ -454,6 +487,10 @@ export function popover(anchorEl, fn) {
         // Remove event listeners
         document.removeEventListener("keydown", onEscape);
         document.removeEventListener("click", onClickOutside);
+        // Unlock body scroll if we were in fallback mode (wrapperEl only exists in fallback)
+        if (wrapperEl) {
+            BodyScroll.unlock();
+        }
         // Transition out
         popoverEl?.classList.remove("pop-visible");
         backdropEl?.classList.remove("pop-visible");
@@ -577,6 +614,10 @@ export function popover(anchorEl, fn) {
                 unmount(mountedComponent);
                 mountedComponent = null;
             }
+            // Unlock body scroll if we were in fallback mode
+            if (wrapperEl) {
+                BodyScroll.unlock();
+            }
             popoverEl?.remove();
             backdropEl?.remove();
             wrapperEl?.remove();

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -231,7 +231,7 @@
 		flex items-center gap-2
 		px-3 py-1.5
 		min-h-[44px]
-		text-left text-sm
+		text-left 
 		rounded-md
 		cursor-pointer
 		touch-action-manipulation

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

@@ -145,7 +145,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-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 text-sm\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_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/utils/body-scroll-locker.d.ts

@@ -20,8 +20,7 @@
  * ```
  */
 export declare class BodyScroll {
+    #private;
     static lock(): void;
     static unlock(): void;
-    private static _get_body_style;
-    private static _restore_body_styles;
 }

package/dist/utils/body-scroll-locker.js

@@ -31,7 +31,7 @@ export class BodyScroll {
         if (data.originalScrollY === undefined) {
             const scrollY = window.scrollY || window.pageYOffset;
             // Save body styles as serialized json
-            data.originalScrollStyleBackup = BodyScroll._get_body_style();
+            data.originalScrollStyleBackup = BodyScroll.#get_body_style();
             // Save the original scroll position in dataset
             data.originalScrollY = `${scrollY}`;
             data.scrollLockCount = "1";
@@ -64,7 +64,7 @@ export class BodyScroll {
             else {
                 // This is the last component, restore everything
                 const originalScrollY = parseInt(data.originalScrollY, 10);
-                BodyScroll._restore_body_styles(data.originalScrollStyleBackup);
+                BodyScroll.#restore_body_styles(data.originalScrollStyleBackup);
                 // Remove our data attributes
                 delete data.originalScrollY;
                 delete data.originalScrollStyleBackup;
@@ -74,7 +74,7 @@ export class BodyScroll {
             }
         }
     }
-    static _get_body_style() {
+    static #get_body_style() {
         // we want only explicitly defined, not computed
         const style = document.body.style;
         return JSON.stringify({
@@ -86,7 +86,7 @@ export class BodyScroll {
             right: style.left || null,
         });
     }
-    static _restore_body_styles(originalJsonString) {
+    static #restore_body_styles(originalJsonString) {
         let original = {
             position: null,
             top: null,

package/dist/utils/breakpoint.svelte.d.ts

@@ -29,6 +29,7 @@ interface BreakpointValue {
  */
 export declare class Breakpoint {
     #private;
+    static get instance(): Breakpoint;
     get current(): string | null;
     get sm(): boolean;
     get md(): boolean;

package/dist/utils/breakpoint.svelte.js

@@ -29,6 +29,7 @@ const _breakpoints = [
  * ```
  */
 export class Breakpoint {
+    static #singleton;
     #bp = $derived.by(() => {
         const w = innerWidth.current || 0;
         return _breakpoints.reduce((m, [k, v]) => {
@@ -37,6 +38,9 @@ export class Breakpoint {
             return m;
         }, { current: null, sm: false, md: false, lg: false, xl: false, "2xl": false });
     });
+    static get instance() {
+        return (Breakpoint.#singleton ??= new Breakpoint());
+    }
     get current() {
         return this.#bp.current;
     }

package/package.json

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