lutra 0.1.46 → 0.1.48

package/dist/components/Dialog.svelte

@@ -60,14 +60,20 @@
 <style>
     .Dialog {
         margin: auto;
-        inset: 1rem;
         padding: 0;
         border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
+        width: var(--modal-width, fit-content);
         border-radius: var(--modal-border-radius, var(--surface-border-radius));
         background: var(--modal-background, var(--surface-background));
         color: var(--text-color-p);
-        max-width: min(calc(100vw - 2rem), 32rem);
-        max-height: min(calc(100vh - 2rem), 80vh);
+        max-width: min(
+            var(--modal-max-width, 40rem),
+            calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
+        );
+        max-height: min(
+            var(--modal-max-height, 80vh),
+            calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
+        );
         box-shadow: var(--modal-shadow, var(--surface-shadow));
     }
 

package/dist/components/Modal.svelte

@@ -177,7 +177,9 @@
     onclose={handleDialogClose}
     oncancel={handleDialogCancel}
     onclick={handleBackdropClick}
-    style="--modal-width: {width}; --modal-max-width: {maxWidth}; --modal-max-height: {maxHeight};"
+    style:--modal-width={width}
+    style:--modal-max-width={maxWidth}
+    style:--modal-max-height={maxHeight}
 >
     <div class="ModalContent">
         {#if title}
@@ -213,15 +215,20 @@
 
     dialog.Modal {
         margin: auto;
-        inset: 1rem;
         border: none;
         padding: 0;
         background: var(--modal-background, var(--surface-background));
         border-radius: var(--modal-border-radius, var(--surface-border-radius));
         box-shadow: var(--modal-shadow, var(--surface-shadow));
         width: var(--modal-width, fit-content);
-        max-width: min(var(--modal-max-width, 40rem), calc(100vw - 2rem));
-        max-height: min(var(--modal-max-height, 80vh), calc(100vh - 2rem));
+        max-width: min(
+            var(--modal-max-width, 40rem),
+            calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
+        );
+        max-height: min(
+            var(--modal-max-height, 80vh),
+            calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
+        );
         overflow: hidden;
         gap: var(--modal-gap);
     }

package/dist/components/ModalContent.svelte

@@ -112,8 +112,14 @@
 		grid-template-rows: 1fr auto;
 		gap: var(--modal-gap);
 		width: var(--modal-width, fit-content);
-		max-width: min(var(--modal-max-width, 40rem), calc(100svw - 2rem));
-		max-height: min(var(--modal-max-height, 80svh), calc(100svh - 2rem));
+		max-width: min(
+			var(--modal-max-width, 40rem),
+			calc(100svw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
+		);
+		max-height: min(
+			var(--modal-max-height, 80svh),
+			calc(100svh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
+		);
 		background: var(--modal-background, var(--surface-background));
 		border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
 		border-radius: var(--modal-border-radius, var(--surface-border-radius));

package/dist/components/Popover.svelte

@@ -66,7 +66,6 @@
 	const anchorName = `--anchor-${id}`;
 	
 	let popoverEl: HTMLDivElement | null = $state(null);
-	let triggerWrapperEl: HTMLElement | null = $state(null);
 
 	// Handle external anchor (not using trigger snippet)
 	$effect(() => {
@@ -197,21 +196,14 @@
 
 <style>
 	.Popover {
-		/* Anchor positioning requires position: fixed or absolute */
 		position: fixed;
-		
-		/* Reset UA popover centering styles */
 		inset: auto;
 		margin: 0;
 		padding: 0;
-		
-		/* Default surface styling */
-		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 */
+		background: var(--popover-background, var(--surface-background));
+		border: var(--popover-border, var(--surface-border));
+		border-radius: var(--popover-border-radius, var(--surface-border-radius));
+		box-shadow: var(--popover-shadow, var(--surface-shadow));
 		width: var(--popover-width, max-content);
 		max-width: var(--popover-max-width, calc(100vw - 2rem));
 		max-height: var(--popover-max-height, calc(100vh - 2rem));
@@ -225,7 +217,6 @@
 		box-shadow: none;
 	}
 
-	/* Animation */
 	.Popover:popover-open {
 		animation: popover-show 0.15s ease-out;
 	}

package/dist/components/ToastContainer.svelte

@@ -81,26 +81,26 @@
 	}
 
 	.top-left {
-		inset: var(--toast-offset, 1rem) auto auto var(--toast-offset, 1rem);
+		inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-left, 0px));
 	}
 	.top-center {
-		inset: var(--toast-offset, 1rem) auto auto 50%;
+		inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) auto auto 50%;
 		translate: -50% 0;
 	}
 	.top-right {
-		inset: var(--toast-offset, 1rem) var(--toast-offset, 1rem) auto auto;
+		inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-right, 0px)) auto auto;
 	}
 	.bottom-left {
-		inset: auto auto var(--toast-offset, 1rem) var(--toast-offset, 1rem);
+		inset: auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-left, 0px));
 		flex-direction: column-reverse;
 	}
 	.bottom-center {
-		inset: auto auto var(--toast-offset, 1rem) 50%;
+		inset: auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) 50%;
 		translate: -50% 0;
 		flex-direction: column-reverse;
 	}
 	.bottom-right {
-		inset: auto var(--toast-offset, 1rem) var(--toast-offset, 1rem) auto;
+		inset: auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-right, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) auto;
 		flex-direction: column-reverse;
 	}
 

package/dist/components/Tooltip.svelte

@@ -54,18 +54,15 @@
     }
 
     .TooltipContent {
-        /* Anchor positioning */
         position: fixed;
         position-area: block-start center;
         position-try-fallbacks: flip-block;
         margin-block-end: 0.5rem;
-        
-        /* Styling */
         background: var(--tooltip-background, var(--surface-background));
-        padding: 0.35rem 0.5rem;
-        border-radius: var(--tooltip-border-radius, var(--surface-border-radius));
         border: var(--tooltip-border, var(--surface-border));
-        box-shadow: var(--tooltip-shadow, 0 0.25rem 0.5rem var(--shadow-color));
+        border-radius: var(--tooltip-border-radius, var(--surface-border-radius));
+        box-shadow: var(--tooltip-shadow, var(--surface-shadow));
+        padding: 0.35rem 0.5rem;
         font-size: max(0.75rem, 11px);
         line-height: 1.35;
         font-weight: 500;
@@ -73,8 +70,6 @@
         max-width: 25ch;
         width: max-content;
         text-align: center;
-        
-        /* Hidden by default */
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.15s ease-out;
@@ -94,19 +89,16 @@
         align-items: center;
     }
 
-    /* Show on hover with delay */
     .Tooltip:has(.TooltipTrigger:hover):not(.open) .TooltipContent {
         opacity: 1;
         transition-delay: var(--delay, 0.5s);
     }
 
-    /* Show on focus immediately */
     .Tooltip:has(.TooltipTrigger:focus-within) .TooltipContent {
         opacity: 1;
         transition-delay: 0s;
     }
 
-    /* Force open */
     .Tooltip.open .TooltipContent {
         opacity: 1;
     }

package/dist/css/1-props.css

@@ -482,9 +482,9 @@
 
 @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
-@property --modal-width { syntax: "<length>"; inherits: true; initial-value: fit-content; }
-@property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 40rem; }
-@property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 80svh; }
+@property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
+@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 40rem; }
+@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 80svh; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }

package/dist/css/2-base.css

@@ -111,7 +111,7 @@
     --tooltip-color: var(--text-color-p);
     --tooltip-border: var(--surface-border);
     --tooltip-border-radius: var(--surface-border-radius);
-    --tooltip-shadow: 0 0.25rem 0.5rem var(--shadow-color);
+    --tooltip-shadow: var(--surface-shadow);
 
     /* Table compound variables */
     --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
@@ -364,7 +364,6 @@ input:disabled, textarea:disabled, select:disabled {
  */
 dialog.ProgrammaticModal {
     margin: auto;
-    inset: 1rem;
     border: none;
     padding: 0;
     background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.1.46",
+	"version": "0.1.48",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",