@widgetic/design-system 0.5.23 → 0.5.24

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/SettingsDialog.svelte

@@ -26,9 +26,11 @@
 	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),
@@ -46,19 +48,62 @@
 		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

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/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/calendar/calendar.svelte.d.ts

@@ -6,6 +6,6 @@ export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps>
     nextLabel?: string;
 };
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "ref" | "value">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/command/command-item.svelte

@@ -15,7 +15,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		"text-body aria-selected:bg-accent aria-selected:text-foreground relative flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		"text-body aria-selected:bg-accent aria-selected:text-foreground relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		className
 	)}
 	bind:ref

package/dist/components/ui/command/command-link-item.svelte

@@ -15,7 +15,7 @@
 
 <CommandPrimitive.LinkItem
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	bind:ref

package/dist/components/ui/dialog/dialog-content.svelte

@@ -4,6 +4,10 @@
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn } from "../../../utils.js";
+	import {
+		overlayDialogContentClasses,
+		overlayReducedMotionClasses
+	} from "../../../utils/overlayMotion.js";
 
 	let {
 		ref = $bindable(null),
@@ -24,8 +28,11 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		data-widgetic-overlay="dialog-panel"
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background border-border fixed start-1/2 top-1/2 z-50 grid w-dialog max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-panel border p-6 duration-base",
+			"bg-background border-border fixed start-1/2 top-1/2 z-50 grid w-dialog max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-panel border p-6",
+			overlayDialogContentClasses,
+			overlayReducedMotionClasses,
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -5,6 +5,10 @@
 
 <script lang="ts">
 		import { cn } from "../../../utils.js";
+	import {
+		overlayDialogOverlayClasses,
+		overlayReducedMotionClasses
+	} from "../../../utils/overlayMotion.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +19,11 @@
 
 <DialogPrimitive.Overlay
 	bind:ref
+	data-widgetic-overlay="dialog-backdrop"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm",
+		"fixed inset-0 z-50",
+		overlayDialogOverlayClasses,
+		overlayReducedMotionClasses,
 		className
 	)}
 	{...restProps}

package/dist/components/ui/drawer/drawer-overlay.svelte

@@ -15,6 +15,6 @@
 
 <DrawerPrimitive.Overlay
 	bind:ref
-	class={cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm", className)}
+	class={cn("fixed inset-0 z-50 bg-muted-foreground/80 backdrop-blur-[3px]", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-pointer select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -22,7 +22,7 @@
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] data-[variant=destructive]:text-destructive data-highlighted:data-[variant=destructive]:text-destructive",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] data-[variant=destructive]:text-destructive data-highlighted:data-[variant=destructive]:text-destructive",
 		description ? "min-h-12" : "min-h-8",
 		inset && "ps-8",
 		className

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -18,7 +18,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-pointer select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		inset && "ps-8",
 		className
 	)}

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -6,6 +6,6 @@ export type RangeCalendarProps = WithoutChildrenOrChild<RangeCalendarPrimitive.R
     nextLabel?: string;
 };
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "placeholder" | "ref" | "value">;
+declare const RangeCalendar: import("svelte").Component<RangeCalendarProps, {}, "ref" | "value" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/select/select-item.svelte

@@ -22,7 +22,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		"relative flex h-8 w-full cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[highlighted]:bg-accent data-[selected]:bg-brand-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"relative flex h-8 w-full cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[highlighted]:bg-accent data-[selected]:bg-brand-subtle data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}

package/dist/styles/global.css

@@ -609,10 +609,11 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Modal System */
+  /* The scrim of every overlay: the muted foreground token at 80%, set on the colour, with a 3px blur (Figma `Overlay/Scrim blur`) */
   .modal-overlay {
     @apply fixed inset-0 z-50;
-    backdrop-filter: blur(30px);
-    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(3px);
+    background-color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
   }
 
   .modal-shadow {