lutra 0.1.47 → 0.1.49

package/dist/components/Dialog.svelte

@@ -62,6 +62,7 @@
         margin: auto;
         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);

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}
@@ -254,16 +256,6 @@
         overflow: visible;
     }
 
-    dialog.Modal::backdrop {
-        background: var(--scrim-background);
-        backdrop-filter: var(--scrim-backdrop-filter);
-    }
-
-    dialog.Modal.noScrim::backdrop {
-        background: transparent;
-        backdrop-filter: none;
-    }
-
     .ModalContent {
         overflow: auto;
         scrollbar-gutter: stable;

package/dist/components/Popover.svelte

@@ -196,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));
@@ -224,7 +217,6 @@
 		box-shadow: none;
 	}
 
-	/* Animation */
 	.Popover:popover-open {
 		animation: popover-show 0.15s ease-out;
 	}

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/components/modals.svelte.js

@@ -51,7 +51,7 @@ export function openModal(opts) {
         dialog.classList.add('contained');
     if (opts.unstyled)
         dialog.classList.add('unstyled');
-    if (!opts.showScrim)
+    if (opts.showScrim === false)
         dialog.classList.add('noScrim');
     // Apply custom styles
     if (opts.width)

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);
@@ -358,9 +358,23 @@ input:disabled, textarea:disabled, select:disabled {
     order: var(--button-icon-order);
 }
 
+/**
+ * Dialog Backdrop (shared by Modal and ProgrammaticModal)
+ */
+dialog.Modal::backdrop,
+dialog.ProgrammaticModal::backdrop {
+    background: var(--scrim-background);
+    backdrop-filter: var(--scrim-backdrop-filter);
+}
+
+dialog.Modal.noScrim::backdrop,
+dialog.ProgrammaticModal.noScrim::backdrop {
+    background: transparent;
+    backdrop-filter: none;
+}
+
 /**
  * Programmatic Modal (openModal API)
- * Uses native <dialog> element
  */
 dialog.ProgrammaticModal {
     margin: auto;
@@ -372,16 +386,6 @@ dialog.ProgrammaticModal {
     overflow: visible;
 }
 
-dialog.ProgrammaticModal::backdrop {
-    background: var(--scrim-background);
-    backdrop-filter: var(--scrim-backdrop-filter);
-}
-
-dialog.ProgrammaticModal.noScrim::backdrop {
-    background: transparent;
-    backdrop-filter: none;
-}
-
 dialog.ProgrammaticModal .ModalContentWrapper {
     display: contents;
 }

package/package.json

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