lutra 0.1.34 → 0.1.36

package/dist/components/MenuDropdown.svelte

@@ -14,6 +14,7 @@
 		open = $bindable(false),
 		items,
 		trigger: triggerProp,
+		align = "start",
 		width,
 		maxWidth,
 	}: {
@@ -23,6 +24,8 @@
 		items: Item[];
 		/** The trigger snippet or string */
 		trigger: string | Snippet<[{ toggle: () => void; isOpen: boolean; triggerAttrs?: Record<string, string> }]>;
+		/** Horizontal alignment: "start" (default), "center", or "end" */
+		align?: "start" | "center" | "end";
 		/** The width of the menu */
 		width?: string;
 		/** The max width of the menu */
@@ -92,54 +95,60 @@
 <UiContent>
 	<Popover
 		bind:open
-		position="block-end span-inline-end"
-		fallbacks={["flip-block", "flip-inline", "flip-block flip-inline"]}
-		offset="0.5rem 0 0 0"
+		position="block-end"
+		{align}
+		fallbacks={["flip-block", "flip-inline"]}
+		offset="0.5rem"
 		{width}
-		{maxWidth}
+		maxWidth={maxWidth || "50ch"}
+		maxHeight="calc(50vh - 2rem)"
 		onopen={handleOpen}
 		onclose={handleClose}
 		class="MenuDropdownPopover"
+		--popover-background="var(--menu-background-color)"
+		--popover-border="var(--menu-border-size) var(--menu-border-style) var(--menu-border-color)"
+		--popover-border-radius="var(--menu-border-radius)"
+		--popover-shadow="0 0.5rem 1rem var(--shadow-color)"
 	>
-		{#snippet trigger(popoverArgs)}
-			<span class="MenuDropdownTrigger" style={popoverArgs.anchorAttrs.style}>
-				{#if isStringTrigger}
-					<button
-						type="button"
-						class="button"
-						{...popoverArgs.triggerAttrs}
-						aria-haspopup="menu"
-					>
-						{triggerProp}
-					</button>
-				{:else if typeof triggerProp !== "string"}
-					{@render triggerProp({ 
-						toggle: popoverArgs.toggle, 
-						isOpen: popoverArgs.isOpen,
-						triggerAttrs: popoverArgs.triggerAttrs,
-					})}
-				{/if}
-			</span>
-		{/snippet}
-
-		<div
-			class="MenuDropdownContent"
-			class:scrollable
-			role="menu"
-			bind:this={menuEl}
-		>
-			<ul>
-				{#each items as item, index}
-					<MenuItem
-						{keyboardHasFocus}
-						onmouseover={handleMouseover}
-						onselect={handleSelect}
-						{item}
-						{index}
-					/>
-				{/each}
-			</ul>
-		</div>
+			{#snippet trigger(popoverArgs)}
+				<span class="MenuDropdownTrigger" style={popoverArgs.anchorAttrs.style}>
+					{#if isStringTrigger}
+						<button
+							type="button"
+							class="button"
+							{...popoverArgs.triggerAttrs}
+							aria-haspopup="menu"
+						>
+							{triggerProp}
+						</button>
+					{:else if typeof triggerProp !== "string"}
+						{@render triggerProp({ 
+							toggle: popoverArgs.toggle, 
+							isOpen: popoverArgs.isOpen,
+							triggerAttrs: popoverArgs.triggerAttrs,
+						})}
+					{/if}
+				</span>
+			{/snippet}
+
+			<div
+				class="MenuDropdownContent"
+				class:scrollable
+				role="menu"
+				bind:this={menuEl}
+			>
+				<ul>
+					{#each items as item, index}
+						<MenuItem
+							{keyboardHasFocus}
+							onmouseover={handleMouseover}
+							onselect={handleSelect}
+							{item}
+							{index}
+						/>
+					{/each}
+				</ul>
+			</div>
 	</Popover>
 </UiContent>
 
@@ -148,18 +157,7 @@
 		display: inline-block;
 	}
 
-	:global(.MenuDropdownPopover) {
-		/* Override Popover defaults for menu styling */
-		border: var(--menu-border-size) var(--menu-border-style) var(--menu-border-color);
-		border-radius: var(--menu-border-radius);
-		box-shadow: 0 0.5rem 1rem var(--shadow-color);
-		background-color: var(--menu-background-color);
-	}
-
 	.MenuDropdownContent {
-		width: var(--popover-width, fit-content);
-		max-width: var(--popover-max-width, 50ch);
-		max-height: calc(50vh - 2rem);
 		overflow-x: clip;
 		overflow-y: auto;
 		scrollbar-width: thin;

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
         isOpen: boolean;
         triggerAttrs?: Record<string, string>;
     }]>;
+    /** Horizontal alignment: "start" (default), "center", or "end" */
+    align?: "start" | "center" | "end";
     /** The width of the menu */
     width?: string;
     /** The max width of the menu */

package/dist/components/ModalContent.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
 	import type { Component, Snippet } from 'svelte';
-	import { onMount, onDestroy } from 'svelte';
 	import type { ModalButton } from './ModalTypes.js';
 	import type { RenderFn } from '../types.js';
 
+	/**
+	 * Internal component for rendering modal content.
+	 * Used by openModal() - not intended for direct use.
+	 * Use <Modal> or <Dialog> instead.
+	 * 
+	 * Note: Focus trapping, ESC handling, and backdrop are provided
+	 * by the parent <dialog> element, not by this component.
+	 */
 	let {
 		children,
 		text,
@@ -18,13 +25,6 @@
 		shape = 'rounded',
 		contained = true,
 		unstyled = false,
-		showScrim = true,
-		closeOnScrim = true,
-		trapFocus = true,
-		dismissOnEsc = true,
-		width,
-		maxWidth,
-		maxHeight,
 	}: {
 		children?: Snippet<[close: () => void]>;
 		text?: string;
@@ -39,23 +39,17 @@
 		shape?: 'rounded' | 'sharp';
 		contained?: boolean;
 		unstyled?: boolean;
-		showScrim?: boolean;
-		closeOnScrim?: boolean;
-		trapFocus?: boolean;
-		dismissOnEsc?: boolean;
-		width?: string;
-		maxWidth?: string;
-		maxHeight?: string;
 	} = $props();
 
-	let dialogEl: HTMLDivElement | null = $state(null);
-	let previousActiveElement: HTMLElement | null = null;
 	const baseId = crypto.randomUUID();
 	let titleId = $derived(title ? `modal-title-${baseId}` : undefined);
 	let loading: Record<number, boolean> = $state({});
 
 	async function handleButtonClick(btn: ModalButton, index: number) {
-		if (!btn.onclick) return;
+		if (!btn.onclick) {
+			close();
+			return;
+		}
 		const result = btn.onclick(close);
 		if (result instanceof Promise) {
 			loading[index] = true;
@@ -66,76 +60,8 @@
 			}
 		}
 	}
-
-	onMount(() => {
-		previousActiveElement = document.activeElement as HTMLElement;
-		if (dialogEl && trapFocus) {
-			// Focus first focusable element
-			const focusableElements = getFocusableElements();
-			if (focusableElements.length > 0) {
-				focusableElements[0].focus();
-			}
-		}
-		dialogEl?.focus();
-		window.addEventListener('keydown', handleKeydown);
-	});
-
-	onDestroy(() => {
-		// Restore focus on unmount
-		previousActiveElement?.focus();
-		window.removeEventListener('keydown', handleKeydown);
-	});
-
-	function getFocusableElements(): HTMLElement[] {
-		if (!dialogEl) return [];
-		const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-		return Array.from(dialogEl.querySelectorAll(selector));
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (dismissOnEsc && e.key === 'Escape') {
-			e.preventDefault();
-			close();
-			return;
-		}
-
-		if (trapFocus && e.key === 'Tab') {
-			const focusableElements = getFocusableElements();
-			if (focusableElements.length === 0) return;
-
-			const firstElement = focusableElements[0];
-			const lastElement = focusableElements[focusableElements.length - 1];
-			const activeElement = document.activeElement;
-
-			if (e.shiftKey) {
-				// Shift+Tab
-				if (activeElement === firstElement) {
-					e.preventDefault();
-					lastElement.focus();
-				}
-			} else {
-				// Tab
-				if (activeElement === lastElement) {
-					e.preventDefault();
-					firstElement.focus();
-				}
-			}
-		}
-	}
-
-	function handleScrimClick(e: MouseEvent) {
-		if (closeOnScrim && e.target === e.currentTarget) {
-			close();
-		}
-	}
 </script>
 
-{#if showScrim}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="ModalScrim" onclick={handleScrimClick}></div>
-{/if}
-
 <div
 	class="ModalContent {shape}"
 	class:contained
@@ -143,10 +69,6 @@
 	role="dialog"
 	aria-modal="true"
 	aria-labelledby={titleId}
-	tabindex="-1"
-	bind:this={dialogEl}
-	onkeydown={handleKeydown}
-	style="--modal-width: {width}; --modal-max-width: {maxWidth}; --modal-max-height: {maxHeight};"
 >
 	<div class="ModalContentArea">
 		{#if title}
@@ -185,14 +107,6 @@
 </div>
 
 <style>
-	.ModalScrim {
-		background: var(--scrim-background);
-		backdrop-filter: var(--scrim-backdrop-filter);
-		position: fixed;
-		inset: 0;
-		z-index: 0;
-	}
-
 	.ModalContent {
 		display: grid;
 		grid-template-rows: 1fr auto;
@@ -205,8 +119,6 @@
 		border-radius: var(--modal-border-radius);
 		box-shadow: 0 0.5rem 1rem var(--modal-shadow-color);
 		overflow: hidden;
-		position: relative;
-		z-index: 1;
 	}
 
 	.ModalContent.sharp {
@@ -269,11 +181,4 @@
 		border: none;
 		padding: 0;
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.ModalContent {
-			transition: none;
-		}
-	}
 </style>
-

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

@@ -15,13 +15,6 @@ type $$ComponentProps = {
     shape?: 'rounded' | 'sharp';
     contained?: boolean;
     unstyled?: boolean;
-    showScrim?: boolean;
-    closeOnScrim?: boolean;
-    trapFocus?: boolean;
-    dismissOnEsc?: boolean;
-    width?: string;
-    maxWidth?: string;
-    maxHeight?: string;
 };
 declare const ModalContent: Component<$$ComponentProps, {}, "">;
 type ModalContent = ReturnType<typeof ModalContent>;

package/dist/components/Popover.svelte

@@ -5,17 +5,26 @@
 	/**
 	 * A base popover component using the Popover API and CSS Anchor Positioning.
 	 * Use this as a foundation for dropdowns, tooltips, contextual help, etc.
+	 * 
+	 * Styling is controlled via CSS custom properties:
+	 * - `--popover-background` - Background color
+	 * - `--popover-border` - Border shorthand
+	 * - `--popover-border-radius` - Border radius
+	 * - `--popover-shadow` - Box shadow
+	 * - `--popover-padding` - Content padding
 	 */
 	let {
 		open = $bindable(false),
 		anchor,
-		position = "block-end span-inline-start",
+		position = "block-end",
+		align = "center",
 		fallbacks = ["flip-block", "flip-inline"],
 		mode = "auto",
 		offset,
 		width,
 		maxWidth,
 		maxHeight,
+		unstyled = false,
 		trigger,
 		children,
 		class: className = "",
@@ -26,13 +35,15 @@
 		open?: boolean;
 		/** Element to anchor to (if no trigger snippet provided) */
 		anchor?: HTMLElement | string;
-		/** CSS position-area value */
+		/** CSS position-area value for placement */
 		position?: string;
+		/** Alignment: "start", "center", "end", or "anchor-center" */
+		align?: "start" | "center" | "end" | "anchor-center";
 		/** CSS position-try-fallbacks values */
 		fallbacks?: string[];
 		/** Popover mode: "auto" (light dismiss) or "manual" */
 		mode?: "auto" | "manual";
-		/** Gap between anchor and popover */
+		/** Gap between anchor and popover (CSS margin value) */
 		offset?: string;
 		/** Width of the popover */
 		width?: string;
@@ -40,6 +51,8 @@
 		maxWidth?: string;
 		/** Max height of the popover */
 		maxHeight?: string;
+		/** Remove default styling (background, border, shadow) */
+		unstyled?: boolean;
 		/** Optional trigger snippet - receives attrs to spread on trigger element */
 		trigger?: Snippet<[{ 
 			toggle: () => void;
@@ -127,14 +140,6 @@
 		}
 	}
 
-	function show() {
-		popoverEl?.showPopover();
-	}
-
-	function hide() {
-		popoverEl?.hidePopover();
-	}
-
 	// Attrs to spread on trigger element
 	const triggerAttrs = $derived({
 		popovertarget: id,
@@ -148,12 +153,23 @@
 		style: `anchor-name: ${anchorName}`,
 	});
 
+	// Map align to CSS justify-self value
+	const justifySelf = $derived(
+		align === "center" ? "anchor-center" : 
+		align === "anchor-center" ? "anchor-center" :
+		align === "start" ? "self-start" : 
+		align === "end" ? "self-end" : 
+		"anchor-center"
+	);
+
 	// CSS custom properties for the popover
 	const popoverStyle = $derived([
 		`position-anchor: ${anchorName}`,
 		`position-area: ${position}`,
+		`justify-self: ${justifySelf}`,
+		`position-try-order: most-block-size`,
 		fallbacks.length ? `position-try-fallbacks: ${fallbacks.join(", ")}` : "",
-		offset ? `margin: ${offset}` : "",
+		offset ? `--popover-offset: ${offset}` : "",
 		width ? `--popover-width: ${width}` : "",
 		maxWidth ? `--popover-max-width: ${maxWidth}` : "",
 		maxHeight ? `--popover-max-height: ${maxHeight}` : "",
@@ -171,6 +187,7 @@
 	{id}
 	popover={mode}
 	class="Popover {className}"
+	class:unstyled
 	style={popoverStyle}
 >
 	{@render children()}
@@ -182,19 +199,34 @@
 	}
 
 	.Popover {
-		/* Reset browser defaults */
-		margin: 0;
+		/* Reset browser popover defaults */
 		padding: 0;
-		border: none;
-		background: transparent;
-		overflow: visible;
+		
+		/* Default surface styling - can be overridden via CSS custom properties */
+		background: var(--popover-background, var(--surface-background, var(--background-body)));
+		border: var(--popover-border, var(--surface-border, var(--border-size-thin) var(--border-style) var(--border-color)));
+		border-radius: var(--popover-border-radius, var(--surface-border-radius, var(--border-radius-base)));
+		box-shadow: var(--popover-shadow, var(--surface-shadow, 0 0.5rem 1rem var(--shadow-color)));
 		
 		/* Sizing */
-		width: var(--popover-width, auto);
-		max-width: var(--popover-max-width, none);
-		max-height: var(--popover-max-height, none);
+		width: var(--popover-width, max-content);
+		max-width: var(--popover-max-width, calc(100vw - 2rem));
+		max-height: var(--popover-max-height, calc(100vh - 2rem));
+		overflow: auto;
+		
+		/* Offset from anchor */
+		margin-block: var(--popover-offset, 0.25rem);
+		margin-inline: 0;
 		
-		/* Anchor positioning is set via inline style */
+		/* Ensure popover stays in viewport */
+		inset: auto;
+	}
+
+	.Popover.unstyled {
+		background: transparent;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
 	}
 
 	/* Animation */
@@ -219,4 +251,3 @@
 		}
 	}
 </style>
-

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

@@ -4,13 +4,15 @@ type $$ComponentProps = {
     open?: boolean;
     /** Element to anchor to (if no trigger snippet provided) */
     anchor?: HTMLElement | string;
-    /** CSS position-area value */
+    /** CSS position-area value for placement */
     position?: string;
+    /** Alignment: "start", "center", "end", or "anchor-center" */
+    align?: "start" | "center" | "end" | "anchor-center";
     /** CSS position-try-fallbacks values */
     fallbacks?: string[];
     /** Popover mode: "auto" (light dismiss) or "manual" */
     mode?: "auto" | "manual";
-    /** Gap between anchor and popover */
+    /** Gap between anchor and popover (CSS margin value) */
     offset?: string;
     /** Width of the popover */
     width?: string;
@@ -18,6 +20,8 @@ type $$ComponentProps = {
     maxWidth?: string;
     /** Max height of the popover */
     maxHeight?: string;
+    /** Remove default styling (background, border, shadow) */
+    unstyled?: boolean;
     /** Optional trigger snippet - receives attrs to spread on trigger element */
     trigger?: Snippet<[
         {

package/dist/components/Toast.svelte

@@ -6,6 +6,7 @@
 
 	/**
 	 * A styled toast/notification card.
+	 * Uses the same surface styling system as Popover and Modal.
 	 * Typically used via addToast() but can be used standalone.
 	 */
 	let {
@@ -76,14 +77,19 @@
 		position: relative;
 		display: grid;
 		grid-template-columns: 1fr;
-		gap: var(--toast-gap, var(--space-sm));
-		padding: var(--toast-padding, var(--space-md));
-		background: var(--toast-background, var(--surface-color));
-		border: var(--toast-border, 1px solid var(--border-color));
-		border-radius: var(--toast-border-radius, var(--radius-md));
-		box-shadow: var(--toast-shadow, 0 4px 12px var(--shadow-color));
-		min-width: var(--toast-min-width, 16rem);
-		max-width: var(--toast-max-width, 24rem);
+		gap: var(--notification-gap, var(--space-sm));
+		
+		/* Surface styling - consistent with Popover and Modal */
+		background: var(--notification-background-color, var(--background-body));
+		border: var(--notification-border-size) var(--notification-border-style) var(--notification-border-color);
+		border-radius: var(--notification-border-radius);
+		box-shadow: 0 0.25rem 1rem var(--notification-shadow-color);
+		
+		padding-block: var(--notification-padding-block);
+		padding-inline: var(--notification-padding-inline);
+		min-width: var(--notification-min-width);
+		max-width: var(--notification-max-width);
+		
 		animation: toast-enter 0.2s ease-out;
 	}
 
@@ -102,8 +108,8 @@
 	.Icon {
 		display: flex;
 		align-items: flex-start;
-		font-size: var(--toast-icon-size, 1.25rem);
-		color: var(--toast-icon-color, var(--text-color-muted));
+		font-size: var(--notification-icon-size);
+		color: var(--text-color-p-subtle);
 	}
 
 	.Content {
@@ -113,14 +119,14 @@
 	}
 
 	.Title {
-		font-weight: var(--toast-title-weight, 600);
-		color: var(--toast-title-color, var(--text-color));
+		font-weight: var(--notification-title-font-weight);
+		color: var(--notification-title-color);
 		line-height: 1.3;
 	}
 
 	.Text {
 		margin: 0;
-		color: var(--toast-text-color, var(--text-color-muted));
+		color: var(--notification-text-color);
 		line-height: 1.4;
 	}
 
@@ -147,4 +153,3 @@
 		}
 	}
 </style>
-

package/dist/components/index.d.ts

@@ -13,7 +13,6 @@ export { default as MenuDropdown } from './MenuDropdown.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
 export { default as Modal } from './Modal.svelte';
-export { default as ModalContent } from './ModalContent.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Tag } from './Tag.svelte';

package/dist/components/index.js

@@ -13,7 +13,6 @@ export { default as MenuDropdown } from './MenuDropdown.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuItemContent } from './MenuItemContent.svelte';
 export { default as Modal } from './Modal.svelte';
-export { default as ModalContent } from './ModalContent.svelte';
 export { default as PageContent } from './PageContent.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Tag } from './Tag.svelte';

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

@@ -1,8 +1,15 @@
 import type { ModalOptions } from './ModalTypes.js';
 /**
  * Opens a modal programmatically using the native `<dialog>` element.
+ *
+ * The dialog provides:
+ * - Backdrop (::backdrop pseudo-element)
+ * - Focus trapping (native behavior)
+ * - ESC key handling (cancel event)
+ *
  * @param opts - Modal options or a simple string for text content
  * @returns An object with the modal id and a close function
+ *
  * @example
  * // Simple text modal
  * const { close } = openModal('Hello world!');

package/dist/components/modals.svelte.js

@@ -18,8 +18,15 @@ function unlockScroll() {
 }
 /**
  * Opens a modal programmatically using the native `<dialog>` element.
+ *
+ * The dialog provides:
+ * - Backdrop (::backdrop pseudo-element)
+ * - Focus trapping (native behavior)
+ * - ESC key handling (cancel event)
+ *
  * @param opts - Modal options or a simple string for text content
  * @returns An object with the modal id and a close function
+ *
  * @example
  * // Simple text modal
  * const { close } = openModal('Hello world!');
@@ -83,16 +90,9 @@ export function openModal(opts) {
             props: opts.props,
             buttonsConfig,
             title: opts.title,
-            showScrim: false, // Dialog handles backdrop
-            closeOnScrim: opts.closeOnScrim ?? true,
-            trapFocus: opts.trapFocus ?? true,
-            dismissOnEsc: opts.dismissOnEsc ?? true,
             unstyled: opts.unstyled ?? false,
             shape: opts.shape ?? 'rounded',
             contained: opts.contained ?? true,
-            width: opts.width,
-            maxWidth: opts.maxWidth,
-            maxHeight: opts.maxHeight,
         },
     });
     // Handle dialog events

package/dist/css/1-props.css

@@ -496,6 +496,30 @@
 @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
+/**
+ * Shared Surface System
+ * These provide consistent defaults across all overlay components (Popover, Modal, Menu, Toast)
+ */
+
+@property --surface-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --surface-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
+@property --surface-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
+
+/**
+ * Popover Component
+ */
+
+@property --popover-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --popover-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
+@property --popover-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
+@property --popover-padding { syntax: "<length>"; inherits: true; initial-value: 0; }
+@property --popover-offset { syntax: "<length>"; inherits: true; initial-value: 0.25rem; }
+@property --popover-width { syntax: "*"; inherits: true; initial-value: max-content; }
+@property --popover-max-width { syntax: "<length>"; inherits: true; initial-value: calc(100vw - 2rem); }
+@property --popover-max-height { syntax: "<length>"; inherits: true; initial-value: calc(100vh - 2rem); }
+
 /**
  * Overlay System
  */

package/dist/css/themes/DefaultTheme.css

@@ -238,11 +238,29 @@
         --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
         --table-cell-color: var(--text-color-p);
 
+        /**
+         * Shared Surface (for Popover, Modal, Menu, Toast)
+         */
+
+        --surface-background: var(--background-body);
+        --surface-border: var(--border-size-thin) var(--border-style) var(--border-color);
+        --surface-border-radius: var(--border-radius-base);
+        --surface-shadow: 0 0.5rem 1rem var(--shadow-color);
+
+        /**
+         * Popover
+         */
+
+        --popover-background: var(--surface-background);
+        --popover-border: var(--surface-border);
+        --popover-border-radius: var(--surface-border-radius);
+        --popover-shadow: var(--surface-shadow);
+
         /**
          * Modals
          */
 
-        --modal-background: var(--background-body);
+        --modal-background: var(--surface-background);
         --modal-border-color: var(--border-color);
         --modal-shadow-color: var(--shadow-color);
         --modal-actions-background: var(--theme-surface-subtlest);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.34",
+	"version": "0.1.36",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",
@@ -45,7 +45,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@types/node": "^25.0.1",
 		"publint": "^0.3.16",
-		"svelte": "^5.45.10",
+		"svelte": "^5.46.0",
 		"svelte-check": "^4.3.4",
 		"typescript": "^5.9.3",
 		"vite": "^7.2.7"