lutra 0.1.49 → 0.1.51

package/dist/components/Dialog.svelte

@@ -63,16 +63,17 @@
         padding: 0;
         border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
         width: var(--modal-width, fit-content);
+        min-width: var(--modal-min-width, auto);
         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(
             var(--modal-max-width, 40rem),
-            calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
+            calc(100svw - 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))
+            var(--modal-max-height, 80svh),
+            calc(100svh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
         );
         box-shadow: var(--modal-shadow, var(--surface-shadow));
     }
@@ -82,11 +83,6 @@
         grid-template-rows: auto 1fr;
     }
 
-    .Dialog::backdrop {
-        background: var(--scrim-background);
-        backdrop-filter: var(--scrim-backdrop-filter);
-    }
-
     .DialogHeader {
         padding: var(--modal-padding-block) var(--modal-padding-inline);
         border-bottom: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);

package/dist/components/Modal.svelte

@@ -45,6 +45,7 @@
         closeOnScrim = true,
         dismissOnEsc = true,
         width,
+        minWidth,
         maxWidth,
         maxHeight,
         onclose,
@@ -78,6 +79,8 @@
         dismissOnEsc?: boolean;
         /** Width of the modal */
         width?: string;
+        /** Minimum width of the modal */
+        minWidth?: string;
         /** Maximum width of the modal */
         maxWidth?: string;
         /** Maximum height of the modal */
@@ -178,6 +181,7 @@
     oncancel={handleDialogCancel}
     onclick={handleBackdropClick}
     style:--modal-width={width}
+    style:--modal-min-width={minWidth}
     style:--modal-max-width={maxWidth}
     style:--modal-max-height={maxHeight}
 >
@@ -221,13 +225,14 @@
         border-radius: var(--modal-border-radius, var(--surface-border-radius));
         box-shadow: var(--modal-shadow, var(--surface-shadow));
         width: var(--modal-width, fit-content);
+        min-width: var(--modal-min-width, auto);
         max-width: min(
             var(--modal-max-width, 40rem),
-            calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
+            calc(100svw - 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))
+            var(--modal-max-height, 80svh),
+            calc(100svh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
         );
         overflow: hidden;
         gap: var(--modal-gap);

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

@@ -30,6 +30,8 @@ type $$ComponentProps = {
     dismissOnEsc?: boolean;
     /** Width of the modal */
     width?: string;
+    /** Minimum width of the modal */
+    minWidth?: string;
     /** Maximum width of the modal */
     maxWidth?: string;
     /** Maximum height of the modal */

package/dist/components/ModalContent.svelte

@@ -66,8 +66,6 @@
 	class="ModalContent {shape}"
 	class:contained
 	class:unstyled
-	role="dialog"
-	aria-modal="true"
 	aria-labelledby={titleId}
 >
 	<div class="ModalContentArea">
@@ -112,6 +110,7 @@
 		grid-template-rows: 1fr auto;
 		gap: var(--modal-gap);
 		width: var(--modal-width, fit-content);
+		min-width: var(--modal-min-width, auto);
 		max-width: min(
 			var(--modal-max-width, 40rem),
 			calc(100svw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))

package/dist/components/ModalTypes.d.ts

@@ -24,6 +24,8 @@ export type ModalOptions = {
     buttons?: ModalButton[] | 'ok-cancel' | 'none';
     /** Width of the modal */
     width?: string;
+    /** Minimum width of the modal */
+    minWidth?: string;
     /** Maximum width of the modal */
     maxWidth?: string;
     /** Maximum height of the modal */
@@ -38,14 +40,12 @@ export type ModalOptions = {
     showScrim?: boolean;
     /** Whether clicking the scrim closes the modal */
     closeOnScrim?: boolean;
-    /** Whether to trap focus within the modal */
-    trapFocus?: boolean;
     /** Whether pressing Escape closes the modal */
     dismissOnEsc?: boolean;
     /** Callback when the modal closes */
-    onClose?: () => void;
+    onclose?: () => void;
     /** Callback when the modal opens */
-    onOpen?: () => void;
+    onopen?: () => void;
 };
 export declare const cancelButton: ModalButton;
 export declare const okButton: ModalButton;

package/dist/components/Toast.svelte

@@ -78,21 +78,23 @@
 		display: grid;
 		grid-template-columns: 1fr;
 		gap: var(--toast-gap, var(--space-sm));
-		
-		/* Surface styling - consistent with Popover and Modal */
 		background: var(--toast-background, var(--surface-background));
 		border: var(--toast-border, var(--surface-border));
 		border-radius: var(--toast-border-radius, var(--surface-border-radius));
 		box-shadow: var(--toast-shadow, var(--surface-shadow));
-		
 		padding-block: var(--toast-padding-block, var(--space-md));
 		padding-inline: var(--toast-padding-inline, var(--space-lg));
 		min-width: var(--toast-min-width, 20rem);
 		max-width: var(--toast-max-width, 28rem);
-		
 		animation: toast-enter 0.2s ease-out;
 	}
 
+	@media (prefers-reduced-motion: reduce) {
+		.Toast {
+			animation: none;
+		}
+	}
+
 	.Toast.has-icon {
 		grid-template-columns: auto 1fr;
 	}
@@ -135,21 +137,4 @@
 		align-items: center;
 		gap: var(--space-xs);
 	}
-
-	@keyframes toast-enter {
-		from {
-			opacity: 0;
-			translate: 0 0.5rem;
-		}
-		to {
-			opacity: 1;
-			translate: 0 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.Toast {
-			animation: none;
-		}
-	}
 </style>

package/dist/components/ToastContainer.svelte

@@ -108,17 +108,6 @@
 		animation: toast-enter 0.2s ease-out;
 	}
 
-	@keyframes toast-enter {
-		from {
-			opacity: 0;
-			translate: 0 0.5rem;
-		}
-		to {
-			opacity: 1;
-			translate: 0 0;
-		}
-	}
-
 	@media (prefers-reduced-motion: reduce) {
 		.ToastItem {
 			animation: none;

package/dist/components/modals.svelte.js

@@ -3,13 +3,13 @@ import ModalContent from './ModalContent.svelte';
 import { cancelButton, okButton } from './ModalTypes.js';
 let modalCount = $state(0);
 let activeElement = null;
-function lockScroll() {
+function trackModalOpen() {
     if (modalCount === 0) {
         activeElement = document.activeElement;
     }
     modalCount++;
 }
-function unlockScroll() {
+function trackModalClose() {
     modalCount--;
     if (modalCount === 0) {
         activeElement?.focus();
@@ -56,6 +56,8 @@ export function openModal(opts) {
     // Apply custom styles
     if (opts.width)
         dialog.style.setProperty('--modal-width', opts.width);
+    if (opts.minWidth)
+        dialog.style.setProperty('--modal-min-width', opts.minWidth);
     if (opts.maxWidth)
         dialog.style.setProperty('--modal-max-width', opts.maxWidth);
     if (opts.maxHeight)
@@ -99,8 +101,8 @@ export function openModal(opts) {
     dialog.addEventListener('close', () => {
         unmount(component);
         dialog.remove();
-        unlockScroll();
-        opts.onClose?.();
+        trackModalClose();
+        opts.onclose?.();
     });
     dialog.addEventListener('cancel', (e) => {
         if (opts.dismissOnEsc === false) {
@@ -114,8 +116,8 @@ export function openModal(opts) {
     });
     // Add to DOM and show
     document.body.appendChild(dialog);
-    lockScroll();
-    opts.onOpen?.();
+    trackModalOpen();
+    opts.onopen?.();
     dialog.showModal();
     return { id, close };
 }

package/dist/css/1-props.css

@@ -483,6 +483,7 @@
 @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: "*"; inherits: true; initial-value: fit-content; }
+@property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
 @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; }

package/dist/css/2-base.css

@@ -362,13 +362,15 @@ input:disabled, textarea:disabled, select:disabled {
  * Dialog Backdrop (shared by Modal and ProgrammaticModal)
  */
 dialog.Modal::backdrop,
-dialog.ProgrammaticModal::backdrop {
+dialog.ProgrammaticModal::backdrop,
+dialog.Dialog::backdrop {
     background: var(--scrim-background);
     backdrop-filter: var(--scrim-backdrop-filter);
 }
 
 dialog.Modal.noScrim::backdrop,
-dialog.ProgrammaticModal.noScrim::backdrop {
+dialog.ProgrammaticModal.noScrim::backdrop,
+dialog.Dialog.noScrim::backdrop {
     background: transparent;
     backdrop-filter: none;
 }
@@ -389,3 +391,17 @@ dialog.ProgrammaticModal {
 dialog.ProgrammaticModal .ModalContentWrapper {
     display: contents;
 }
+
+/**
+ * Toast Animation (shared)
+ */
+@keyframes toast-enter {
+    from {
+        opacity: 0;
+        translate: 0 0.5rem;
+    }
+    to {
+        opacity: 1;
+        translate: 0 0;
+    }
+}

package/package.json

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