@widgetic/design-system 0.5.23 → 0.5.25

package/dist/components/modals/Portal.svelte

@@ -53,7 +53,7 @@
 			// also carries (e.g. target `app-header-widget-picker` for a dropdown
 			// whose root div has that same class, so outside-click detection can
 			// find it). The slot is already rendered inside `portal` when onMount
-			// runs, so the class lookup above can return that inner div. Moving
+			// runs, so the class lookup can return that inner div. Moving
 			// `portal` into it then throws
 			// "HierarchyRequestError: The new child element contains the parent".
 			// Anything equal to, inside, or containing `portal` is not a host.
@@ -79,13 +79,15 @@
 	});
 
 	onDestroy(() => {
-		// Additional cleanup on component destroy
-		if (portal && host && host.contains(portal)) {
-			host.removeChild(portal);
+		const portalEl = portal;
+		const hostEl = host;
+		// Remove as soon as Svelte tears this Portal down (after global outros on portalled content have finished).
+		// Deferring removal with setTimeout left detached DOM on screen at full opacity after transitions were torn down.
+		if (portalEl && hostEl && hostEl.contains(portalEl)) {
+			hostEl.removeChild(portalEl);
 		}
-		// Only remove hosts Portal created on body — never delete editor portal slots
-		if (hostCreatedByPortal && host?.parentNode) {
-			host.remove();
+		if (hostCreatedByPortal && hostEl?.parentNode) {
+			hostEl.remove();
 		}
 	});
 </script>

package/dist/components/modals/RenameDialog.svelte

@@ -209,14 +209,12 @@
 				class={validationMessage ? 'border-destructive' : ''}
 				oninput={handleInput}
 				onkeydown={(e) => {
-					if (e.key === 'Escape') {
-						handleClose();
-					} else {
+					if (e.key !== 'Escape') {
 						e.stopPropagation();
-						if (e.key === 'Enter') {
-							e.preventDefault();
-							handleRename();
-						}
+					}
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						handleRename();
 					}
 				}}
 				onfocus={(e) => {

package/dist/components/modals/modalStore.d.ts

@@ -1,10 +1,18 @@
 interface ModalState {
     isOpen: boolean;
+    /** Top-most open modal generation; used with `openModal` / `closeModal` for restore and global `modalState`. */
+    generation?: number;
     modalType?: string;
     data?: any;
 }
 export declare const modalState: import("svelte/store").Writable<ModalState>;
 export declare const isModalOpen: import("svelte/store").Writable<boolean>;
-export declare function openModal(modalType?: string, data?: any): void;
+export declare function openModal(modalType?: string, data?: any): number;
 export declare function closeModal(): void;
+/** Call when a BaseModal instance opens — returns an opaque token used with `isTopModalInstance` / `unregisterModalInstance`. */
+export declare function registerModalInstance(): symbol;
+/** Remove this instance from the stack (e.g. closed or destroyed). Safe if already removed. */
+export declare function unregisterModalInstance(token: symbol): void;
+/** True when this instance should handle backdrop / Escape while several modals are stacked. */
+export declare function isTopModalInstance(token: symbol): boolean;
 export {};

package/dist/components/modals/modalStore.js

@@ -1,7 +1,4 @@
 import { writable } from 'svelte/store';
-// import { browser } from '$app/environment';
-// Determine if running in browser (avoids reference errors during SSR)
-const browser = typeof window !== 'undefined';
 // Debug flag – set to true when you need to trace modal behaviour
 const showLogs = false;
 /*
@@ -12,26 +9,62 @@ const showLogs = false;
  * clean slate after any refresh.
  */
 // Always start with a closed modal on fresh page loads
-const getInitialState = () => ({ isOpen: false });
+const getInitialState = () => ({ isOpen: false, generation: 0 });
 // Central writable store for runtime modal state
 export const modalState = writable(getInitialState());
 // Backwards-compatibility helper – exposes only the boolean flag
 export const isModalOpen = writable(getInitialState().isOpen);
 // Keep `isModalOpen` in sync (without persisting to localStorage)
-modalState.subscribe(state => {
+modalState.subscribe((state) => {
     // if (showLogs) console.log('Modal state updated:', state);
     isModalOpen.set(state.isOpen);
 });
+let generationCounter = 0;
+const openStack = [];
+/** Which BaseModal instance is top-most for backdrop + Escape (independent of `generation` timing). */
+const modalInstanceStack = [];
+function syncStoreFromStack() {
+    const top = openStack[openStack.length - 1];
+    if (!top) {
+        modalState.set(getInitialState());
+    }
+    else {
+        modalState.set({
+            isOpen: true,
+            generation: top.generation,
+            modalType: top.modalType,
+            data: top.data
+        });
+    }
+}
 // Helper functions to manage modal state
 export function openModal(modalType, data) {
     // if (showLogs) console.log('Opening modal:', { modalType, data });
-    modalState.set({
-        isOpen: true,
-        modalType,
-        data,
-    });
+    generationCounter += 1;
+    const entry = { generation: generationCounter, modalType, data };
+    openStack.push(entry);
+    syncStoreFromStack();
+    return entry.generation;
 }
 export function closeModal() {
     // if (showLogs) console.log('Closing modal');
-    modalState.set({ isOpen: false });
+    openStack.pop();
+    syncStoreFromStack();
+}
+/** Call when a BaseModal instance opens — returns an opaque token used with `isTopModalInstance` / `unregisterModalInstance`. */
+export function registerModalInstance() {
+    const token = Symbol('base-modal-instance');
+    modalInstanceStack.push(token);
+    return token;
+}
+/** Remove this instance from the stack (e.g. closed or destroyed). Safe if already removed. */
+export function unregisterModalInstance(token) {
+    const idx = modalInstanceStack.lastIndexOf(token);
+    if (idx >= 0)
+        modalInstanceStack.splice(idx, 1);
+}
+/** True when this instance should handle backdrop / Escape while several modals are stacked. */
+export function isTopModalInstance(token) {
+    const n = modalInstanceStack.length;
+    return n > 0 && modalInstanceStack[n - 1] === token;
 }

package/dist/components/navigation/Breadcrumbs.svelte

@@ -15,6 +15,7 @@
 	// Types Import
 	import type { BreadcrumbsProps } from './types.js';
 	import { dirForUserText, useTextDirection } from '../textDirection.js';
+	import { breadcrumbsAvailableWidthPx } from './breadcrumbsAvailableWidth.js';
 
 	// Environment Import
 	// import { browser } from '$app/environment';
@@ -106,8 +107,8 @@
 	function updateAvailableWidth() {
 		if (!browser || !navElement || !breadcrumbsContainer) return;
 
-		// First try to get the header from FileBrowser structure
-		const containerElement = navElement.closest('header') || navElement;
+		const headerAncestor = navElement.closest('header');
+		const containerElement = headerAncestor || navElement;
 		headerElement = containerElement;
 
 		// Get all the measurements we need
@@ -127,7 +128,12 @@
 		const rightOffset = measurements.rightContent ? measurements.rightContent.width : 24;
 
 		// Calculate available width for breadcrumbs
-		availableWidth = measurements.container.width - leftOffset - rightOffset - 72; // 72px for padding
+		availableWidth = breadcrumbsAvailableWidthPx({
+			containerWidthPx: measurements.container.width,
+			leftOffsetPx: leftOffset,
+			rightOffsetPx: rightOffset,
+			headerAncestor
+		});
 	}
 
 	function handleMediaQuery(e: MediaQueryListEvent | MediaQueryList) {
@@ -162,7 +168,7 @@
 		handleMediaQuery(mediaQuery);
 		mediaQuery.addEventListener('change', handleMediaQuery);
 
-		// Get the header from FileBrowser structure
+		// First try to get the header from FileBrowser structure
 		if (navElement) {
 			const header = navElement.closest('header');
 			if (header) {

package/dist/components/navigation/breadcrumbsAvailableWidth.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Pure helpers for Breadcrumbs width math (header vs non-header container).
+ */
+export declare function breadcrumbsLayoutPaddingPx(headerAncestor: HTMLElement | null): number;
+export declare function breadcrumbsAvailableWidthPx(options: {
+    containerWidthPx: number;
+    leftOffsetPx: number;
+    rightOffsetPx: number;
+    headerAncestor: HTMLElement | null;
+}): number;

package/dist/components/navigation/breadcrumbsAvailableWidth.js

@@ -0,0 +1,10 @@
+/**
+ * Pure helpers for Breadcrumbs width math (header vs non-header container).
+ */
+export function breadcrumbsLayoutPaddingPx(headerAncestor) {
+    return headerAncestor ? 72 : 0;
+}
+export function breadcrumbsAvailableWidthPx(options) {
+    const layoutPaddingPx = breadcrumbsLayoutPaddingPx(options.headerAncestor);
+    return options.containerWidthPx - options.leftOffsetPx - options.rightOffsetPx - layoutPaddingPx;
+}

package/dist/components/search-input/SearchInput.svelte

@@ -1,52 +1,64 @@
 <!--
   Figma: Search Field (component set 189:1138, node 189:1138).
+  The same field works as a plain search control and as the textbox of a combobox: pass `inputAttributes` (role, aria-*,
+  autocomplete) from the parent; `type`, `value`, and the input `class` always come from this component so the look stays one.
 -->
 <script lang="ts">
-	import IconSearch from "@tabler/icons-svelte/icons/search";
-	import IconX from "@tabler/icons-svelte/icons/x";
+	import IconSearch from '@tabler/icons-svelte/icons/search';
+	import IconX from '@tabler/icons-svelte/icons/x';
 
-	export let placeholder = "Search…";
-	export let value = "";
+	export let placeholder = 'Search…';
+	export let value = '';
 	export let onInput: (event: Event) => Promise<void> | void = () => {};
 	export let onKeydown: (event: KeyboardEvent) => void = () => {};
 	export let onClear: () => void = () => {
-		value = "";
+		value = '';
 	};
 	export let onPaste: (event: ClipboardEvent) => void = () => {};
-	export let containerClass = "";
-	export let inputClass = "";
-	export let clearLabel = "Clear search";
+	export let onFocus: (event: FocusEvent) => void = () => {};
+	export let onBlur: (event: FocusEvent) => void = () => {};
+	export let containerClass = '';
+	export let inputClass = '';
+	export let clearLabel = 'Clear search';
+	/** Bindable ref to the native input (e.g. combobox controllers call focus()). */
+	export let inputElement: HTMLInputElement | null = null;
+	/** Spread first; this component’s `type`, `value`, and `class` are set after so they override clashing keys from the spread. */
+	export let inputAttributes: Record<string, unknown> = {};
 </script>
 
 <div class="w-full {containerClass}">
 	<div
-		class="group relative flex h-9 w-full items-center gap-2 rounded-lg bg-accent px-3 transition-colors duration-fast focus-within:bg-accent hover:bg-accent-hover"
+		class="group bg-accent duration-fast focus-within:bg-accent hover:bg-accent-hover relative flex h-9 w-full items-center gap-2 rounded-lg px-3 transition-colors"
 	>
 		<IconSearch
-			class="size-4 shrink-0 stroke-[1.333] text-muted-foreground transition-colors duration-fast group-focus-within:text-foreground {value
+			class="text-muted-foreground duration-fast group-focus-within:text-foreground size-4 shrink-0 stroke-[1.333] transition-colors {value
 				? 'text-foreground'
 				: ''}"
 			aria-hidden="true"
 		/>
 		<input
+			{...inputAttributes}
 			type="search"
+			bind:this={inputElement}
 			{placeholder}
 			bind:value
 			oninput={onInput}
 			onkeydown={(e) => {
-				if (e.key === "Backspace" && !value) {
+				if (e.key === 'Backspace' && !value) {
 					e.preventDefault();
 					return;
 				}
 				onKeydown(e);
 			}}
 			onpaste={onPaste}
-			class="min-w-0 flex-1 border-0 bg-transparent text-body text-foreground placeholder:text-muted-foreground focus:outline-hidden {inputClass}"
+			onfocus={onFocus}
+			onblur={onBlur}
+			class="text-body text-foreground placeholder:text-muted-foreground min-w-0 flex-1 border-0 bg-transparent focus:outline-hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden {inputClass}"
 		/>
 		{#if value}
 			<button
 				type="button"
-				class="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground transition-colors duration-fast hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="text-muted-foreground duration-fast hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-4 shrink-0 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"
 				aria-label={clearLabel}
 				onclick={onClear}
 			>

package/dist/components/search-input/SearchInput.svelte.d.ts

@@ -18,9 +18,13 @@ declare const SearchInput: $$__sveltets_2_IsomorphicComponent<{
     onKeydown?: (event: KeyboardEvent) => void;
     onClear?: () => void;
     onPaste?: (event: ClipboardEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
     containerClass?: string;
     inputClass?: string;
     clearLabel?: string;
+    /** Bindable ref to the native input (e.g. combobox controllers call focus()). */ inputElement?: HTMLInputElement | null;
+    /** Spread first; this component’s `type`, `value`, and `class` are set after so they override clashing keys from the spread. */ inputAttributes?: Record<string, unknown>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/search-input/index2.d.ts

@@ -1,14 +1,19 @@
 import { SvelteComponent } from 'svelte';
 
 export interface SearchInputProps {
-  placeholder?: string;
-  value?: string;
-  onInput?: (event: Event) => Promise<void> | void;
-  onKeydown?: (event: KeyboardEvent) => void;
-  onClear?: () => void;
-  onPaste?: (event: ClipboardEvent) => void;
-  containerClass?: string;
-  inputClass?: string;
+	placeholder?: string;
+	value?: string;
+	onInput?: (event: Event) => Promise<void> | void;
+	onKeydown?: (event: KeyboardEvent) => void;
+	onClear?: () => void;
+	onPaste?: (event: ClipboardEvent) => void;
+	onFocus?: (event: FocusEvent) => void;
+	onBlur?: (event: FocusEvent) => void;
+	containerClass?: string;
+	inputClass?: string;
+	clearLabel?: string;
+	inputElement?: HTMLInputElement | null;
+	inputAttributes?: Record<string, unknown>;
 }
 
-export default class SearchInput extends SvelteComponent<SearchInputProps> {} 
+export default class SearchInput extends SvelteComponent<SearchInputProps> {}

package/dist/components/shell/NavDrawer.svelte

@@ -91,7 +91,7 @@
 		<button
 			type="button"
 			class={cn(
-				'bg-foreground/50 absolute inset-0 motion-reduce:transition-none',
+				'bg-muted-foreground/80 absolute inset-0 backdrop-blur-[3px] motion-reduce:transition-none',
 				visible ? 'opacity-100' : 'opacity-0'
 			)}
 			style="transition: opacity {transitionMs}ms {transitionEase};"

package/dist/components/shell/NavRow.svelte

@@ -8,7 +8,10 @@
 		variants: {
 			active: {
 				true: 'bg-sidebar-accent text-sidebar-accent-foreground text-body-medium',
-				false: 'text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+				// The inactive row carries its own type style (14/20 regular, Figma Nav Row): without it the label took the size
+				// of whatever it sat in (16px in a dialog), bigger than the active row's 14/20 medium.
+				false:
+					'text-body text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
 			}
 		},
 		defaultVariants: {

package/dist/components/shell/SettingsDialog.svelte

@@ -11,10 +11,6 @@
 		groups: import('./settings-nav-types.js').SettingsNavGroup[];
 		onSelect?: (id: string) => void;
 		closeLabel?: string;
-		messages?: import('./messages.js').SettingsDialogMessages;
-		privacyHref?: string;
-		termsHref?: string;
-		cookieHref?: string;
 		children: import('svelte').Snippet;
 		descriptionSlot?: import('svelte').Snippet;
 	};
@@ -26,9 +22,10 @@
 	import type { Snippet } from 'svelte';
 	import * as Dialog from '../ui/dialog/index.js';
 	import { cn } from '../../utils.js';
+	import { modalState } from '../modals/modalStore.js';
 	import SettingsNav from './SettingsNav.svelte';
-	import { defaultSettingsDialogMessages, type SettingsDialogMessages } from './messages.js';
 	import type { SettingsNavGroup } from './settings-nav-types.js';
+	import { createNestedModalTracker } from './nested-modal-guard.js';
 
 	let {
 		open = $bindable(false),
@@ -39,49 +36,71 @@
 		groups,
 		onSelect,
 		closeLabel = 'Close',
-		messages = defaultSettingsDialogMessages,
-		privacyHref = '#',
-		termsHref = '#',
-		cookieHref = '#',
 		children,
 		descriptionSlot
 	}: SettingsDialogProps = $props();
+
+	// bits-ui sets `contain: layout style` inline on every dialog content, and `contain: layout` makes that box the containing
+	// block of every `position: fixed` element inside it. A pane can hold an inline overlay of its own (a confirm dialog written
+	// as `fixed inset-0`): with containment on it would be drawn, and clipped, inside this box instead of over the viewport.
+	// The Content below therefore carries `contain-none!`.
+
+	// A modal a pane opens (ActionModal, RenameDialog, ...) is drawn outside this dialog: while one is open, a click or
+	// Escape in it must not close the settings dialog, and the focus trap must let its fields take the focus.
+	const nestedModalTracker = createNestedModalTracker();
+	const nestedModalOpen = $derived($modalState.isOpen);
+	$effect(() => {
+		nestedModalTracker.update(nestedModalOpen);
+	});
+
+	// Every way the dialog closes (X, Escape, a click outside) arrives here. The request is refused while a nested modal
+	// holds the dialog; the click itself is left alone so the modal still reads its own click.
+	function requestOpenChange(nextOpen: boolean): void {
+		if (!nextOpen && nestedModalTracker.holdsDialog()) return;
+		open = nextOpen;
+	}
+
+	// bits-ui marks the original Escape key event as handled before BaseModal (a window listener) reads it, and BaseModal
+	// leaves a handled Escape alone. While a nested modal is open the key therefore belongs to the modal: this dialog
+	// stays open and hands the modal a fresh Escape, so one press closes the modal only.
+	function handleEscapeKeydown(event: KeyboardEvent): void {
+		if (!nestedModalTracker.open) return;
+		event.preventDefault();
+		window.dispatchEvent(
+			new KeyboardEvent('keydown', {
+				key: 'Escape',
+				code: 'Escape',
+				bubbles: true,
+				cancelable: true
+			})
+		);
+	}
 </script>
 
-<Dialog.Root bind:open>
+<Dialog.Root bind:open={() => open, requestOpenChange}>
 	<Dialog.Portal>
-		<Dialog.Overlay class="bg-foreground/50 backdrop-blur-sm" />
+		<!-- The scrim is the shared one of every overlay (muted foreground at 80%, 3px blur), set by the dialog overlay itself -->
+		<Dialog.Overlay />
 		<DialogPrimitive.Content
 			class={cn(
 				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border bg-background duration-base fixed z-50 flex overflow-hidden border',
 				'inset-0 h-full max-h-none w-full rounded-none',
-				'lg:h-settings-modal lg:w-settings-modal lg:rounded-panel lg:start-1/2 lg:top-1/2 lg:max-h-[calc(100vh-2rem)] lg:max-w-[calc(100vw-2rem)] lg:-translate-x-1/2 lg:-translate-y-1/2',
+				// Centred with auto margins, not with a translate: a CSS transform would make this box the containing block
+				// of every `position: fixed` element inside a pane (a legacy confirm dialog would be drawn, and clipped, inside it).
+				'lg:h-settings-modal lg:w-settings-modal lg:rounded-panel lg:m-auto lg:max-h-[calc(100vh-2rem)] lg:max-w-[calc(100vw-2rem)]',
+				// bits-ui's inline `contain: layout style` wins over a `style` prop, so the override has to be `!important`.
+				'contain-none!',
 				className
 			)}
 			aria-describedby={description || descriptionSlot ? 'settings-dialog-description' : undefined}
+			trapFocus={!nestedModalOpen}
+			onEscapeKeydown={handleEscapeKeydown}
 		>
 			<div class="flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row">
 				<aside
 					class="border-border bg-sidebar flex w-full shrink-0 flex-col border-b p-3 lg:w-64 lg:border-e lg:border-b-0"
 				>
 					<SettingsNav {groups} {activeId} {onSelect} class="flex-1" />
-					<div class="mt-auto flex flex-col gap-1 px-2 pt-4 pb-1">
-						<a
-							href={privacyHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.privacyPolicy}</a
-						>
-						<a
-							href={termsHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.termsOfService}</a
-						>
-						<a
-							href={cookieHref}
-							class="text-caption text-muted-foreground duration-fast hover:text-foreground w-fit transition-colors"
-							>{messages.cookieSettings}</a
-						>
-					</div>
 				</aside>
 				<div class="flex min-h-0 min-w-0 flex-1 flex-col gap-6 overflow-y-auto p-8">
 					<header class="flex flex-col gap-1 pe-10">

package/dist/components/shell/SettingsDialog.svelte.d.ts

@@ -7,10 +7,6 @@ export type SettingsDialogProps = {
     groups: import('./settings-nav-types.js').SettingsNavGroup[];
     onSelect?: (id: string) => void;
     closeLabel?: string;
-    messages?: import('./messages.js').SettingsDialogMessages;
-    privacyHref?: string;
-    termsHref?: string;
-    cookieHref?: string;
     children: import('svelte').Snippet;
     descriptionSlot?: import('svelte').Snippet;
 };

package/dist/components/shell/WidgetRow.svelte.d.ts

@@ -9,8 +9,8 @@ export declare const widgetRowVariants: import("tailwind-variants").TVReturnType
     };
 }, undefined, "group/widget-row flex min-h-16 w-full max-w-content items-center gap-4 rounded-xl py-3 ps-4 pe-4 transition-colors duration-fast focus-within:outline-hidden", {
     responsiveVariants?: boolean | (string | number | symbol)[] | {
-        selected?: boolean | (string | number | symbol)[] | undefined;
         loading?: boolean | (string | number | symbol)[] | undefined;
+        selected?: boolean | (string | number | symbol)[] | undefined;
     } | undefined;
 } & import("tailwind-variants/dist/config.js").TWMConfig & {
     twMergeConfig: {

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

@@ -19,4 +19,3 @@ export { default as Link, type LinkProps, type LinkSize, linkVariants } from './
 export { type SettingsNavGroup, type SettingsNavItem, settingsNavItemIsActive } from './settings-nav-types.js';
 export { externalLinkAttributes } from './link-external.js';
 export { statHintClass, type StatTone } from './stat-tone.js';
-export { type SettingsDialogMessages, defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/index.js

@@ -22,4 +22,3 @@ export { default as Link, linkVariants } from './Link.svelte';
 export { settingsNavItemIsActive } from './settings-nav-types.js';
 export { externalLinkAttributes } from './link-external.js';
 export { statHintClass } from './stat-tone.js';
-export { defaultSettingsDialogMessages } from './messages.js';

package/dist/components/shell/nested-modal-guard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A settings pane often opens a modal of its own (rename, confirm, a form): the `BaseModal` family
+ * (`ActionModal`, `NewItemDialog`, `RenameDialog`). Those are drawn in a portal on the body, outside the content of the
+ * settings dialog, so the dialog's dismissible layer reads a click in them as a click outside (it would close the
+ * settings dialog under the modal), its focus trap pulls the focus out of their fields, and one Escape would close both.
+ *
+ * The dialog asks this tracker, which is told what `modalState` (the stack every `BaseModal` pushes itself on) says,
+ * whether a modal of that family is open, so it can refuse a close request and release its focus trap while one is.
+ *
+ * It refuses the close request itself and never calls `preventDefault()` on the click. The Escape key is the one
+ * exception to "leave the event alone": bits-ui marks the original key event as handled before `BaseModal` reads it, and
+ * `BaseModal` closes on Escape only when the key event is not default-prevented, so the dialog hands the modal a fresh
+ * Escape (see `SettingsDialog`).
+ */
+/** How long after the last such modal closed a click or a key still belongs to it (its own click closes it first). */
+export declare const NESTED_MODAL_CLOSE_GRACE_MS = 300;
+export type NestedModalTracker = {
+    /** Tell the tracker whether a modal of the family is open right now. */
+    update(modalIsOpen: boolean): void;
+    /** True while a modal of the family is open. */
+    readonly open: boolean;
+    /** True while one is open, and for a moment after the last one closed. */
+    holdsDialog(): boolean;
+};
+export declare function createNestedModalTracker(now?: () => number): NestedModalTracker;

package/dist/components/shell/nested-modal-guard.js

@@ -0,0 +1,33 @@
+/**
+ * A settings pane often opens a modal of its own (rename, confirm, a form): the `BaseModal` family
+ * (`ActionModal`, `NewItemDialog`, `RenameDialog`). Those are drawn in a portal on the body, outside the content of the
+ * settings dialog, so the dialog's dismissible layer reads a click in them as a click outside (it would close the
+ * settings dialog under the modal), its focus trap pulls the focus out of their fields, and one Escape would close both.
+ *
+ * The dialog asks this tracker, which is told what `modalState` (the stack every `BaseModal` pushes itself on) says,
+ * whether a modal of that family is open, so it can refuse a close request and release its focus trap while one is.
+ *
+ * It refuses the close request itself and never calls `preventDefault()` on the click. The Escape key is the one
+ * exception to "leave the event alone": bits-ui marks the original key event as handled before `BaseModal` reads it, and
+ * `BaseModal` closes on Escape only when the key event is not default-prevented, so the dialog hands the modal a fresh
+ * Escape (see `SettingsDialog`).
+ */
+/** How long after the last such modal closed a click or a key still belongs to it (its own click closes it first). */
+export const NESTED_MODAL_CLOSE_GRACE_MS = 300;
+export function createNestedModalTracker(now = Date.now) {
+    let open = false;
+    let closedAtMs = Number.NEGATIVE_INFINITY;
+    return {
+        update(modalIsOpen) {
+            if (open && !modalIsOpen)
+                closedAtMs = now();
+            open = modalIsOpen;
+        },
+        get open() {
+            return open;
+        },
+        holdsDialog() {
+            return open || now() - closedAtMs < NESTED_MODAL_CLOSE_GRACE_MS;
+        }
+    };
+}

package/dist/components/ui/alert/index.d.ts

@@ -7,7 +7,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", {
+}, undefined, "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2", {
     responsiveVariants?: boolean | (string | number | symbol)[] | {
         variant?: boolean | (string | number | symbol)[] | undefined;
     } | undefined;
@@ -29,7 +29,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/alert/index.js

@@ -3,7 +3,10 @@ import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export const alertVariants = tv({
-    base: "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2",
+    // The icon column exists only when the alert has an icon (a direct <svg> child): an alert without one starts its text at
+    // the left padding instead of leaving the empty icon column and its 12px gap in front of the text. The description sits
+    // on the second row only under a title: alone (an icon and a sentence, or a sentence) it shares the first row with the icon.
+    base: "relative grid w-full grid-cols-1 gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground has-[>svg]:grid-cols-[auto_1fr] [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:row-start-1 has-[[data-slot=alert-title]]:[&_[data-slot=alert-description]]:row-start-2 has-[>svg]:[&_[data-slot=alert-title]]:col-start-2 has-[>svg]:[&_[data-slot=alert-description]]:col-start-2",
     variants: {
         variant: {
             default: "text-foreground [&>svg]:text-foreground",