@marianmeres/stuic 2.61.0 → 2.63.0

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

@@ -146,6 +146,18 @@ function getStringContent(content) {
     }
     return "";
 }
+/**
+ * Find the appropriate container for the popover element.
+ * If the anchor is inside an open dialog (modal), append to the dialog
+ * so the popover renders in the same top layer as the modal.
+ */
+function getPopoverContainer(anchorEl) {
+    const dialog = anchorEl.closest("dialog[open]");
+    if (dialog) {
+        return dialog;
+    }
+    return document.body;
+}
 /**
  * A Svelte action that displays a popover anchored to an element using CSS Anchor Positioning.
  *
@@ -329,7 +341,9 @@ export function popover(anchorEl, fn) {
         anchorEl.setAttribute("aria-expanded", "true");
         const offsetValue = currentOptions.offset || "0.25rem";
         const useAnchorPositioning = isSupported && !currentOptions.forceFallback;
-        // Create elements
+        // Get appropriate container (dialog if inside one, otherwise body)
+        // This ensures popover renders in same stacking context as modal dialogs
+        const container = getPopoverContainer(anchorEl);
         if (useAnchorPositioning) {
             // CSS Anchor Positioning mode
             popoverEl = document.createElement("div");
@@ -343,7 +357,7 @@ export function popover(anchorEl, fn) {
 				margin: ${offsetValue};
 			`;
             popoverEl.classList.add(...twMerge("stuic-popover", _classPopover, currentOptions.class).split(/\s/));
-            document.body.appendChild(popoverEl);
+            container.appendChild(popoverEl);
         }
         else {
             // Fallback centered modal mode
@@ -351,7 +365,7 @@ export function popover(anchorEl, fn) {
                 backdropEl = document.createElement("div");
                 backdropEl.classList.add(...twMerge("stuic-popover-backdrop", _classBackdrop).split(/\s/));
                 backdropEl.style.cssText = `transition-duration: ${TRANSITION}ms;`;
-                document.body.appendChild(backdropEl);
+                container.appendChild(backdropEl);
                 // Backdrop click closes popover
                 if (currentOptions.closeOnClickOutside !== false) {
                     backdropEl.addEventListener("click", hide);
@@ -383,7 +397,7 @@ export function popover(anchorEl, fn) {
 			`;
             popoverEl.classList.add(...twMerge("stuic-popover-fallback", _classPopover, currentOptions.class).split(/\s/));
             wrapperEl.appendChild(popoverEl);
-            document.body.appendChild(wrapperEl);
+            container.appendChild(wrapperEl);
             // Lock body scroll in fallback (modal) mode
             BodyScroll.lock();
             // Click on wrapper (outside popover) closes

package/dist/actions/tooltip/tooltip.svelte.js

@@ -48,6 +48,18 @@ const POSITION_MAP = {
     left: "left",
     right: "right",
 };
+/**
+ * Find the appropriate container for the tooltip element.
+ * If the anchor is inside an open dialog (modal), append to the dialog
+ * so the tooltip renders in the same top layer as the modal.
+ */
+function getTooltipContainer(anchorEl) {
+    const dialog = anchorEl.closest("dialog[open]");
+    if (dialog) {
+        return dialog;
+    }
+    return document.body;
+}
 // Global tooltip configuration - allows disabling all tooltips at runtime
 const globalTooltipConfig = $state({ enabled: true });
 // Touch device auto-detection (runs once on first tooltip init)
@@ -164,7 +176,9 @@ export function tooltip(anchorEl, fn) {
             tooltipEl.setAttribute("role", "tooltip");
             tooltipEl.style.cssText += `position-anchor: ${anchorName}; transition-duration: ${TRANSITION}ms; position-area: ${POSITION_MAP[position] || "top"};`;
             tooltipEl.classList.add(...twMerge("stuic-tooltip", _classTooltip).split(/\s/));
-            document.body.appendChild(tooltipEl);
+            // Append to dialog if inside one, otherwise body (for proper top-layer rendering in modals)
+            const container = getTooltipContainer(anchorEl);
+            container.appendChild(tooltipEl);
             //
             tooltipEl.addEventListener("mouseenter", schedule_show);
             tooltipEl.addEventListener("mouseleave", schedule_hide);
@@ -216,11 +230,6 @@ export function tooltip(anchorEl, fn) {
                     tooltipEl.classList.add("tt-visible");
                     on_show?.();
                 });
-                // waitForTwoRepaints().then(() => {
-                // 	tooltipEl.classList.add("tt-visible");
-                // this approach is nicer, but I have a suspicion of the event handlers not being destroyed properly (maybe just a hot-reload issues...)
-                // 	waitForTransitionEnd(tooltipEl).then(() => on_show?.());
-                // });
             }
         }, TIMEOUT);
     }
@@ -239,11 +248,6 @@ export function tooltip(anchorEl, fn) {
                 tooltipEl.classList.remove("tt-block");
                 on_hide?.();
             }, TRANSITION);
-            // this approach is nicer, but I have a suspicion of the event handlers not being destroyed properly (maybe just a hot-reload issues...)
-            // waitForTransitionEnd(tooltipEl).then(() => {
-            // 	tooltipEl.classList.remove("tt-block");
-            // 	on_hide?.();
-            // });
         }, TIMEOUT);
     }
     // "reactive" params re/set

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -21,7 +21,7 @@
 		iconZoomOut,
 	} from "../../icons/index.js";
 	import { getFileTypeLabel } from "../../utils/get-file-type-label.js";
-	import { Modal } from "../Modal/index.js";
+	import { ModalDialog } from "../ModalDialog/index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { isImage } from "../../utils/is-image.js";
 	import { isPlainObject } from "../../utils/is-plain-object.js";
@@ -60,10 +60,8 @@
 		assets: string[] | AssetPreview[];
 		classControls?: string;
 		//
-		modalClassBackdrop?: string;
-		modalClassInner?: string;
+		modalClassDialog?: string;
 		modalClass?: string;
-		modalClassMain?: string;
 		//
 		/** Optional translate function */
 		t?: TranslateFn;
@@ -176,10 +174,8 @@
 	const clog = createClog("AssetsPreview", { color: "auto" });
 
 	let {
-		modalClassBackdrop = "",
-		modalClassInner = "",
+		modalClassDialog = "",
 		modalClass = "",
-		modalClassMain = "",
 		assets: _assets,
 		t = t_default,
 		classControls = "",
@@ -192,7 +188,7 @@
 		(_assets ?? []).map(normalizeInput).filter(Boolean) as AssetPreviewNormalized[]
 	);
 	let previewIdx = $state<number>(0);
-	let modal: Modal | undefined = $state();
+	let modal: ModalDialog | undefined = $state();
 	let dotTooltip: string | undefined = $state();
 
 	// Zoom state
@@ -478,13 +474,15 @@
 />
 
 {#if assets.length}
-	<Modal
+	<ModalDialog
 		bind:this={modal}
-		onEscape={modal?.close}
-		classBackdrop="p-2 md:p-2 {modalClassBackdrop}"
-		classInner="max-w-full h-full {modalClassInner}"
-		class="max-h-full md:max-h-full rounded-lg {modalClass}"
-		classMain="flex items-center justify-center relative stuic-assets-preview stuic-assets-preview-open {modalClassMain}"
+		classDialog={modalClassDialog}
+		class={twMerge(
+			"max-w-full max-h-full h-full rounded-lg",
+			"flex items-center justify-center relative",
+			"stuic-assets-preview stuic-assets-preview-open",
+			modalClass
+		)}
 	>
 		{@const previewAsset = assets?.[previewIdx]}
 		{#if previewAsset}
@@ -561,7 +559,7 @@
 						onclick={zoomOut}
 						disabled={zoomLevelIdx === 0}
 						aria-label={t("zoom_out")}
-						use:tooltip
+						use:tooltip={() => ({ content: t("zoom_out") })}
 					>
 						{@html iconZoomOut({ class: "size-6" })}
 					</button>
@@ -572,7 +570,7 @@
 						onclick={zoomIn}
 						disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
 						aria-label={t("zoom_in")}
-						use:tooltip
+						use:tooltip={() => ({ content: t("zoom_in") })}
 					>
 						{@html iconZoomIn({ class: "size-6" })}
 					</button>
@@ -651,5 +649,5 @@
 				</div>
 			{/if}
 		{/if}
-	</Modal>
+	</ModalDialog>
 {/if}

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

@@ -12,10 +12,8 @@ export interface AssetPreview {
 export interface Props {
     assets: string[] | AssetPreview[];
     classControls?: string;
-    modalClassBackdrop?: string;
-    modalClassInner?: string;
+    modalClassDialog?: string;
     modalClass?: string;
-    modalClassMain?: string;
     /** Optional translate function */
     t?: TranslateFn;
     /** Optional delete handler - receives the current asset and its index */
@@ -32,7 +30,7 @@ declare const AssetsPreview: import("svelte").Component<Props, {
     open: (index?: number) => void;
     close: () => void;
     visibility: () => {
-        readonly visible: boolean;
+        readonly visible: boolean | undefined;
     };
     setOpener: (opener?: null | HTMLElement) => void;
 }, "">;

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
 	import { ItemCollection, type Item } from "@marianmeres/item-collection";
-	import { Modal } from "../Modal/index.js";
+	import { ModalDialog } from "../ModalDialog/index.js";
 	import { createClog } from "@marianmeres/clog";
 	import { FieldInput } from "../Input/index.js";
 	import { twMerge } from "../../utils/tw-merge.js";
@@ -91,11 +91,11 @@
 		});
 	}
 
-	let modal: Modal = $state()!;
+	let modalDialog: ModalDialog = $state()!;
 	let isFetching = $state(false);
-	let modalEl: HTMLDivElement | undefined = $state();
 	let optionsBox: HTMLDivElement | undefined = $state();
 	let activeEl: HTMLButtonElement | undefined = $state();
+	let fetchRequestId = 0;
 
 	//
 	// svelte-ignore state_referenced_locally
@@ -109,7 +109,7 @@
 
 	// scroll the active option into view
 	$effect(() => {
-		if (modal.visibility().visible && options.active?.[itemIdPropName]) {
+		if (modalDialog.visibility().visible && options.active?.[itemIdPropName]) {
 			activeEl = qsa(`#${btn_id(options.active[itemIdPropName])}`, optionsBox)[0] as any;
 			activeEl?.scrollIntoView({ behavior: "smooth", block: "center" });
 			activeEl?.focus();
@@ -120,15 +120,18 @@
 
 	//
 	const debounced = new Debounced(() => q, 150);
-	watch([() => debounced.current], ([currQ], [oldQ]) => {
+	watch([() => debounced.current], ([currQ], [_oldQ]) => {
 		if (!currQ && !showAllOnEmptyQ) {
 			_optionsColl.clear();
 			return;
 		}
 
 		isFetching = true;
+		const currentRequest = ++fetchRequestId;
 		getOptions(`${currQ}`, [])
 			.then((res) => {
+				// Ignore stale responses
+				if (currentRequest !== fetchRequestId) return;
 				_optionsColl.clear().addMany(res);
 			})
 			.catch((e) => {
@@ -151,15 +154,16 @@
 	}
 
 	export function close() {
-		modal.close();
+		modalDialog.close();
 	}
 
 	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
-		modal.open(openerOrEvent);
+		modalDialog.open(openerOrEvent);
 	}
 
 	// internal DRY
 	const rand = Math.random().toString(36).slice(2);
+	const listId = `cmd-menu-list-${rand}`;
 	function btn_id(id: string | number, prefix = "btn-") {
 		return prefix + rand + strHash(`${id}`.repeat(3));
 	}
@@ -195,7 +199,7 @@
 <!-- this must be on window as we're catching any typing anywhere -->
 <svelte:window
 	onkeydown={(e) => {
-		if (modal.visibility().visible) {
+		if (modalDialog.visibility().visible) {
 			// arrow navigation
 			if (["ArrowDown", "ArrowUp"].includes(e.key)) {
 				e.preventDefault();
@@ -213,154 +217,174 @@
 	}}
 />
 
-<Modal
-	bind:this={modal}
-	onEscape={modal?.close}
-	class="bg-transparent dark:bg-transparent"
-	classInner="max-w-2xl"
-	bind:el={modalEl}
+<ModalDialog
+	bind:this={modalDialog}
+	classDialog="items-start"
+	class="w-full max-w-3xl bg-transparent pointer-events-none"
 	{noScrollLock}
 >
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-			// collection.setQuery(`${q}`.trim());
-			modal.close();
-			// clog("TODO save", `${q}`.trim());
-		}}
-		class=""
-	>
-		<FieldInput
-			type="text"
-			name="q"
-			bind:input
-			bind:value={q}
-			class="search m-4 mb-12 shadow-xl"
-			classLabelBox="m-0"
-			autocomplete="off"
-			placeholder={searchPlaceholder ?? t("search_placeholder")}
-			classInputBoxWrap={twMerge(
-				// always look like focused
-				`border-primary border-input-accent dark:border-input-accent-dark`,
-				`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
-			)}
-			onkeydown={(e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					submit();
-				}
+	<div class="pt-0 md:pt-[20vh] w-full">
+		<form
+			class="pointer-events-auto"
+			onsubmit={(e) => {
+				e.preventDefault();
+				modalDialog.close();
 			}}
 		>
-			{#snippet inputBefore()}
-				<div class="flex flex-col items-center justify-center pl-3 opacity-50">
-					{@html iconSearch({ size: 14 })}
-				</div>
-			{/snippet}
-			{#snippet inputAfter()}
-				<div class="flex pl-2 items-center justify-center opacity-50">
-					{#if isFetching}
-						<Spinner class="w-4" />
-					{/if}
-				</div>
-				<div class="flex items-center justify-center">
-					<button
-						type="button"
-						class={twMerge(
-							"opacity-50 rounded m-1",
-							"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
-							"focus-visible:opacity-100 focus-visible:outline-0",
-							"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
-						)}
-						onclick={(e) => {
-							e.preventDefault();
-							if (!`${q || ""}`.trim()) {
-								return modal.close();
-							}
-							q = "";
-							input?.focus();
-						}}
-					>
-						<X class="m-2 size-4 " />
-					</button>
-				</div>
-			{/snippet}
-			{#snippet inputBelow()}
-				{#if options.size}
-					<div
-						class={twMerge(
-							"options block space-y-1 p-1",
-							"overflow-y-auto overflow-x-hidden mb-1",
-							"border-t border-black/20",
-							"max-h-60"
-						)}
-						bind:this={optionsBox}
-						tabindex="-1"
-					>
-						{#each _normalize_and_group_options(options.items) as [_optgroup, _opts]}
-							<!-- {console.log(11111, _optgroup, _opts)} -->
-							<div class="p-1">
-								{#if _optgroup}
-									<div
-										class="text-sm capitalize opacity-50 border-b border-black/10 mb-1 p-1"
-									>
-										{_optgroup}
-									</div>
-								{/if}
-								<ul>
-									{#each _opts as item (item.id)}
-										{@const active =
-											item[itemIdPropName] === options.active?.[itemIdPropName]}
-										<!-- {@const isSelected = false} -->
-										<li class:active>
-											<button
-												class:active
-												type="button"
-												class={twMerge(
-													"no-focus-visible",
-													"text-left rounded-md py-2 px-2.5",
-													"min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap",
-													"border border-transparent",
-													"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
-													"focus-visible:outline-0 focus-visible:ring-0",
-													"hover:border-neutral-400 dark:hover:border-neutral-500",
-													active && "bg-neutral-200 dark:bg-neutral-800",
-													classOption,
-													// active && "border-neutral-400",
-													active && classOptionActive
-												)}
-												id={btn_id(item[itemIdPropName])}
-												tabindex="-1"
-												onclick={() => {
-													_optionsColl.setActive(item);
-													submit();
-												}}
-												onkeydown={(e) => {
-													// need to handle tab here, because the tabindex="-1" is ignored
-													// in the focus-trap selectors... so, on Tab, manually focusin input
-													if (e.key === "Tab") {
-														e.preventDefault();
-														input?.focus();
-													}
-												}}
-											>
-												<!-- role="checkbox"
-											aria-checked={active} -->
-												{_renderOptionLabel(item)}
-											</button>
-										</li>
-									{/each}
-								</ul>
-							</div>
-						{/each}
+			<FieldInput
+				type="text"
+				name="q"
+				renderSize="lg"
+				bind:input
+				bind:value={q}
+				class="search m-2 shadow-xl"
+				classLabelBox="m-0"
+				autocomplete="off"
+				aria-autocomplete="list"
+				aria-controls={options.size ? listId : undefined}
+				aria-activedescendant={options.active ? btn_id(options.active[itemIdPropName]) : undefined}
+				placeholder={searchPlaceholder ?? t("search_placeholder")}
+				classInputBoxWrap={twMerge(
+					// always look like focused
+					`border-primary border-input-accent dark:border-input-accent-dark`,
+					`ring-input-accent/20 dark:ring-input-accent-dark/20 ring-4`
+				)}
+				onkeydown={(e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						submit();
+					}
+				}}
+			>
+				{#snippet inputBefore()}
+					<div class="flex flex-col items-center justify-center pl-3 opacity-75">
+						{@html iconSearch({ size: 19, strokeWidth: 3 })}
+					</div>
+				{/snippet}
+				{#snippet inputAfter()}
+					<div class="flex pl-2 items-center justify-center opacity-50">
+						{#if isFetching}
+							<Spinner class="w-4" />
+						{/if}
 					</div>
-				{/if}
-			{/snippet}
-		</FieldInput>
-	</form>
-</Modal>
+					<div class="flex items-center justify-center">
+						<button
+							type="button"
+							class={twMerge(
+								"rounded m-1 opacity-75",
+								"hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-800",
+								"focus-visible:opacity-100 focus-visible:outline-0",
+								"focus-visible:bg-neutral-200 dark:focus-visible:bg-neutral-800"
+							)}
+							onclick={(e) => {
+								e.preventDefault();
+								if (!`${q || ""}`.trim()) {
+									return modalDialog.close();
+								}
+								q = "";
+								input?.focus();
+							}}
+						>
+							<X class="m-2 size-6" />
+						</button>
+					</div>
+				{/snippet}
+				{#snippet inputBelow()}
+					<div class="sr-only" aria-live="polite" aria-atomic="true">
+						{#if options.size}
+							{options.size} results available
+						{/if}
+					</div>
+					{#if options.size}
+						<div
+							class={twMerge(
+								"options block space-y-1 p-1",
+								"overflow-y-auto overflow-x-hidden mb-1",
+								"border-t border-black/20",
+								"max-h-60"
+							)}
+							bind:this={optionsBox}
+							tabindex="-1"
+							role="listbox"
+							id={listId}
+							aria-label="Search results"
+						>
+							{#each _normalize_and_group_options(options.items) as [_optgroup, _opts]}
+								<!-- {console.log(11111, _optgroup, _opts)} -->
+								<div class="p-1">
+									{#if _optgroup}
+										<div
+											class="text-sm capitalize opacity-50 border-b border-black/10 mb-1 p-1"
+										>
+											{_optgroup}
+										</div>
+									{/if}
+									<ul role="presentation">
+										{#each _opts as item (item[itemIdPropName])}
+											{@const active =
+												item[itemIdPropName] === options.active?.[itemIdPropName]}
+											<!-- {@const isSelected = false} -->
+											<li class:active role="presentation">
+												<button
+													class:active
+													type="button"
+													role="option"
+													aria-selected={active}
+													class={twMerge(
+														"no-focus-visible",
+														"text-left rounded-md py-2 px-2.5",
+														"min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap",
+														"border border-transparent",
+														"focus:outline-0 focus:border-neutral-400 dark:focus:border-neutral-500",
+														"focus-visible:outline-0 focus-visible:ring-0",
+														"hover:border-neutral-400 dark:hover:border-neutral-500",
+														active && "bg-neutral-200 dark:bg-neutral-800",
+														classOption,
+														active && classOptionActive
+													)}
+													id={btn_id(item[itemIdPropName])}
+													tabindex="-1"
+													onclick={() => {
+														_optionsColl.setActive(item);
+														submit();
+													}}
+													onkeydown={(e) => {
+														// need to handle tab here, because the tabindex="-1" is ignored
+														// in the focus-trap selectors... so, on Tab, manually focusin input
+														if (e.key === "Tab") {
+															e.preventDefault();
+															input?.focus();
+														}
+													}}
+												>
+													{_renderOptionLabel(item)}
+												</button>
+											</li>
+										{/each}
+									</ul>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				{/snippet}
+			</FieldInput>
+		</form>
+	</div>
+</ModalDialog>
 
 <style>
 	.options {
 		scrollbar-width: thin;
 	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
 </style>

package/dist/components/CommandMenu/README.md

@@ -87,6 +87,12 @@ A searchable command palette/menu modal for quick navigation and selection. Supp
 />
 ```
 
+## Layout
+
+The command menu uses `ModalDialog` internally with top-aligned positioning:
+- **Mobile**: Input at top of screen with 1rem margins from edges
+- **Desktop (md+)**: Input positioned at ~20% from top, max-width 768px, centered horizontally
+
 ## Keyboard Navigation
 
 - **Arrow Up/Down**: Navigate options

package/dist/components/DropdownMenu/README.md

@@ -241,7 +241,7 @@ interface DropdownMenuExpandableItem {
 
 ```svelte
 <script lang="ts">
-  import { AvatarInitials, DropdownMenu } from 'stuic';
+  import { Avatar, DropdownMenu } from 'stuic';
 </script>
 
 <DropdownMenu
@@ -252,7 +252,7 @@ interface DropdownMenuExpandableItem {
 >
   {#snippet trigger({ isOpen, toggle, triggerProps })}
     <button {...triggerProps} onclick={toggle}>
-      <AvatarInitials input="john.doe@example.com" autoColor />
+      <Avatar input="john.doe@example.com" autoColor />
     </button>
   {/snippet}
 </DropdownMenu>