@marianmeres/stuic 2.31.0 → 2.32.1

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

@@ -400,14 +400,14 @@ export function popover(anchorEl, fn) {
             closeBtn.innerHTML = `<svg fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" style="width:1.25rem;height:1.25rem"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>`;
             closeBtn.style.cssText = `
 				position: absolute;
-				top: 0;
-				right: 0;
+				top: 4px;
+				right: 4px;
 				background: black;
 				color: white;
 				border: none;
-				border-bottom-left-radius: 0.5rem;
+				border-radius: 0.25rem;
 				cursor: pointer;
-				opacity: 0.8;
+				opacity: 0.6;
 				padding: 0.33rem;
 				line-height: 1;
 			`;

package/dist/components/AppShell/AppShell.svelte

@@ -1,5 +1,7 @@
 <script module lang="ts">
 	import type { Snippet } from "svelte";
+	import { setContext } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
 
 	export interface Props {
 		id?: string;
@@ -57,9 +59,6 @@
 </script>
 
 <script lang="ts">
-	import { setContext } from "svelte";
-	import { twMerge } from "../../utils/tw-merge.js";
-
 	let {
 		id = "shell",
 		class: classProp,

package/dist/components/AppShell/AppShellSimple.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+	import { setContext, type Snippet } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	export interface Props {
+		class?: string;
+		//
+		headerClass?: string;
+		railClass?: string;
+		asideClass?: string;
+		mainClass?: string;
+		//
+		rail?: Snippet;
+		header?: Snippet;
+		aside?: Snippet;
+		children?: Snippet;
+		//
+		elRail?: HTMLElement;
+		elHeader?: HTMLElement;
+		elAside?: HTMLElement;
+		elMain?: HTMLElement;
+	}
+
+	export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
+</script>
+
+<script lang="ts">
+	let {
+		class: classProp,
+		//
+		headerClass,
+		railClass,
+		asideClass,
+		mainClass,
+		//
+		rail,
+		header,
+		aside,
+		children,
+		//
+		elRail = $bindable(),
+		elHeader = $bindable(),
+		elAside = $bindable(),
+		elMain = $bindable(),
+	}: Props = $props();
+
+	let headerHeight = $state(0);
+
+	// pragmatic use case...
+	let mainWidth: number = $state(0);
+	setContext(MAIN_WIDTH, {
+		get current() {
+			return mainWidth;
+		},
+	});
+</script>
+
+{#if header}
+	<header
+		bind:this={elHeader}
+		bind:clientHeight={headerHeight}
+		data-shell="header"
+		class={twMerge("sticky top-0 z-10", headerClass)}
+	>
+		{@render header()}
+	</header>
+{/if}
+
+<div class={twMerge("flex", classProp)}>
+	{#if rail}
+		<div
+			bind:this={elRail}
+			data-shell="rail"
+			style:top="{headerHeight}px"
+			style:height="calc(100dvh - {headerHeight}px)"
+			class={twMerge(
+				"sticky shrink-0",
+				"flex flex-col items-center",
+				"overflow-x-hidden overflow-y-auto",
+				"scrollbar-thin",
+				railClass
+			)}
+		>
+			{@render rail()}
+		</div>
+	{/if}
+
+	{#if aside}
+		<aside
+			bind:this={elAside}
+			data-shell="aside"
+			style:top="{headerHeight}px"
+			style:height="calc(100dvh - {headerHeight}px)"
+			class={twMerge(
+				"sticky shrink-0",
+				"flex flex-col items-center",
+				"overflow-x-hidden overflow-y-auto",
+				"scrollbar-thin",
+				asideClass
+			)}
+		>
+			{@render aside()}
+		</aside>
+	{/if}
+
+	<main
+		bind:this={elMain}
+		data-shell="main"
+		class={twMerge("flex-1", mainClass)}
+		bind:offsetWidth={mainWidth}
+	>
+		{@render children?.()}
+	</main>
+</div>
+
+<style>
+	.scrollbar-thin {
+		scrollbar-width: thin;
+		scrollbar-gutter: stable;
+	}
+</style>

package/dist/components/AppShell/AppShellSimple.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Snippet } from "svelte";
+export interface Props {
+    class?: string;
+    headerClass?: string;
+    railClass?: string;
+    asideClass?: string;
+    mainClass?: string;
+    rail?: Snippet;
+    header?: Snippet;
+    aside?: Snippet;
+    children?: Snippet;
+    elRail?: HTMLElement;
+    elHeader?: HTMLElement;
+    elAside?: HTMLElement;
+    elMain?: HTMLElement;
+}
+export declare const MAIN_WIDTH: unique symbol;
+declare const AppShellSimple: import("svelte").Component<Props, {}, "elRail" | "elHeader" | "elAside" | "elMain">;
+type AppShellSimple = ReturnType<typeof AppShellSimple>;
+export default AppShellSimple;

package/dist/components/AppShell/README.md

@@ -97,3 +97,8 @@ import { onMount } from 'svelte';
 // Returns cleanup function automatically
 onMount(appShellSetHtmlBodyHeight);
 ```
+
+## AppShellSimple
+
+A simplified approach using a sticky header and a sticky left sidebar, allowing the 
+page body to follow its natural flow (and the chrome UI is adjusted on scroll correctly).

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

@@ -1 +1,2 @@
 export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, type Props as AppShellSimpleProps, } from "./AppShellSimple.svelte";

package/dist/components/AppShell/index.js

@@ -1 +1,2 @@
 export { default as AppShell, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
+export { default as AppShellSimple, } from "./AppShellSimple.svelte";

package/dist/components/Button/Button.svelte

@@ -37,7 +37,7 @@
 	export const BUTTON_STUIC_BASE_CLASSES = `
 		bg-button-bg text-button-text
 		dark:bg-button-bg-dark dark:text-button-text-dark
-		font-mono text-sm text-center
+		text-base text-center
 		leading-none
 		border-1
 		border-button-border dark:border-button-border-dark
@@ -61,7 +61,7 @@
 	export const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses = {
 		size: {
 			sm: `text-sm rounded-md px-3 py-2 min-h-none min-w-none`,
-			lg: `text-base rounded-xl`,
+			lg: `text-lg rounded-xl`,
 		},
 		variant: {
 			primary: `font-medium`,

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

@@ -31,7 +31,7 @@ export interface ButtonPresetClasses {
     shadow: string;
     inverse: string;
 }
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-lg\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-4 py-3\n\t\tselect-none\n\t\tmin-h-[44px] min-w-[44px]\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\ttext-base text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-lg\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-4 py-3\n\t\tselect-none\n\t\tmin-h-[44px] min-w-[44px]\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses;
 import "./index.css";
 import { type TooltipConfig } from "../../actions/index.js";

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -138,6 +138,10 @@
 		classExpandable?: string;
 		/** Classes for expandable section content */
 		classExpandableContent?: string;
+		/** Classes for backdrop (fallback mode only) */
+		classBackdrop?: string;
+		/** Show backdrop in fallback mode (default: true) */
+		showBackdrop?: boolean;
 		/** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */
 		trigger?: Snippet<
 			[
@@ -165,6 +169,8 @@
 		triggerEl?: HTMLButtonElement;
 		/** Reference to dropdown element */
 		dropdownEl?: HTMLDivElement;
+		/** Optional, used only when css positioning not supported (iPhone)*/
+		noScrollLock?: boolean;
 	}
 
 	const POSITION_MAP: Record<string, string> = {
@@ -245,6 +251,12 @@
 		text-neutral-500 dark:text-neutral-400
 		select-none
 	`;
+
+	export const DROPDOWN_MENU_BACKDROP_CLASSES = `
+		stuic-dropdown-menu-backdrop
+		fixed inset-0 bg-black/25
+		z-40
+	`;
 </script>
 
 <script lang="ts">
@@ -255,10 +267,11 @@
 	import { iconLucideChevronDown } from "@marianmeres/icons-fns/lucide/iconLucideChevronDown.js";
 	import { iconLucideChevronRight } from "@marianmeres/icons-fns/lucide/iconLucideChevronRight.js";
 	import { onClickOutside } from "runed";
-	import { slide } from "svelte/transition";
+	import { slide, fade } from "svelte/transition";
 	import { untrack } from "svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import "./index.css";
+	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 
 	let {
 		items,
@@ -280,6 +293,8 @@
 		classHeader,
 		classExpandable,
 		classExpandableContent,
+		classBackdrop,
+		showBackdrop = true,
 		trigger,
 		children,
 		onOpen,
@@ -287,6 +302,7 @@
 		onSelect,
 		triggerEl = $bindable(),
 		dropdownEl = $bindable(),
+		noScrollLock,
 		...rest
 	}: Props = $props();
 
@@ -396,6 +412,11 @@
 		wasOpen = isOpen;
 	});
 
+	$effect(() => {
+		if (noScrollLock || isSupported) return;
+		isOpen ? BodyScroll.lock() : BodyScroll.unlock();
+	});
+
 	// Click outside handler
 	onClickOutside(
 		() => wrapperEl,
@@ -455,22 +476,15 @@
 				max-height: ${maxHeight};
 			`;
 		} else {
-			// Fallback: absolute positioning
-			if (position === "left") {
-				return `position: absolute; right: 100%; top: 0; margin-right: ${offset}; max-height: ${maxHeight};`;
-			} else if (position === "right") {
-				return `position: absolute; left: 100%; top: 0; margin-left: ${offset}; max-height: ${maxHeight};`;
-			}
-			const isTop = position.startsWith("top");
-			const isLeft =
-				position.includes("left") || position === "bottom" || position === "top";
+			// Fallback: centered modal overlay
 			return `
-				position: absolute;
-				${isTop ? "bottom: 100%;" : "top: 100%;"}
-				${isLeft ? "left: 0;" : "right: 0;"}
-				margin-top: ${isTop ? "0" : offset};
-				margin-bottom: ${isTop ? offset : "0"};
+				position: fixed;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				max-width: 90vw;
 				max-height: ${maxHeight};
+				z-index: 50;
 			`;
 		}
 	});
@@ -567,6 +581,22 @@
 		</button>
 	{/if}
 
+	<!-- Backdrop (fallback mode only) -->
+	{#if isOpen && !isSupported && showBackdrop}
+		<div
+			class={twMerge(DROPDOWN_MENU_BACKDROP_CLASSES, classBackdrop)}
+			onclick={() => {
+				if (closeOnClickOutside) {
+					isOpen = false;
+					triggerEl?.focus();
+				}
+			}}
+			onkeydown={() => {}}
+			role="presentation"
+			transition:fade={{ duration: transitionDuration }}
+		></div>
+	{/if}
+
 	<!-- Dropdown Menu -->
 	{#if isOpen}
 		<div
@@ -574,10 +604,46 @@
 			id={dropdownId}
 			role="menu"
 			aria-labelledby={triggerId}
-			class={twMerge(DROPDOWN_MENU_DROPDOWN_CLASSES, classDropdown)}
+			class={twMerge(
+				DROPDOWN_MENU_DROPDOWN_CLASSES,
+				!isSupported && "w-4/5 max-w-32",
+				classDropdown
+			)}
 			style={dropdownStyle}
 			transition:slide={{ duration: transitionDuration }}
 		>
+			<!-- Close button (fallback mode only) -->
+			{#if !isSupported}
+				<div class="sticky top-0 right-0 z-10 flex just pointer-events-none">
+					<button
+						type="button"
+						aria-label="Close"
+						class={[
+							"bg-black text-white rounded-md cursor-pointer opacity-60",
+							"absolute right-0 top-0 p-2",
+							"leading-none hover:opacity-100 pointer-events-auto",
+						]}
+						onclick={() => {
+							isOpen = false;
+							triggerEl?.focus();
+						}}
+					>
+						<svg
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2.5"
+							stroke="currentColor"
+							class="w-5 h-5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M6 18 18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+			{/if}
 			{#each items as item}
 				{#if item.type === "action"}
 					{@const isActive = _navItems.active?.id === item.id}

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

@@ -110,6 +110,10 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     classExpandable?: string;
     /** Classes for expandable section content */
     classExpandableContent?: string;
+    /** Classes for backdrop (fallback mode only) */
+    classBackdrop?: string;
+    /** Show backdrop in fallback mode (default: true) */
+    showBackdrop?: boolean;
     /** Custom trigger snippet - receives isOpen state, toggle function, and ARIA props for full control */
     trigger?: Snippet<[
         {
@@ -135,6 +139,8 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     triggerEl?: HTMLButtonElement;
     /** Reference to dropdown element */
     dropdownEl?: HTMLDivElement;
+    /** Optional, used only when css positioning not supported (iPhone)*/
+    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";
@@ -142,6 +148,7 @@ export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu
 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";
+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";
 import "./index.css";
 declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;

package/dist/components/DropdownMenu/index.css

@@ -14,3 +14,8 @@
 .stuic-dropdown-menu-expandable-content {
 	overflow: hidden;
 }
+
+/* Backdrop for fallback mode */
+.stuic-dropdown-menu-backdrop {
+	transition-property: opacity;
+}

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

@@ -40,6 +40,9 @@ export class BodyScroll {
             document.body.style.top = `-${scrollY}px`;
             document.body.style.width = "100%";
             document.body.style.overflow = "hidden";
+            //
+            document.body.style.left = "0";
+            document.body.style.right = "0";
         }
         else {
             // Another component already locked the scroll, just increment the counter
@@ -79,10 +82,19 @@ export class BodyScroll {
             top: style.position || null,
             width: style.width || null,
             overflow: style.overflow || null,
+            left: style.left || null,
+            right: style.left || null,
         });
     }
     static _restore_body_styles(originalJsonString) {
-        let original = { position: null, top: null, width: null, overflow: null };
+        let original = {
+            position: null,
+            top: null,
+            width: null,
+            overflow: null,
+            left: null,
+            right: null,
+        };
         try {
             original = JSON.parse(originalJsonString);
         }

package/package.json

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