lutra 0.1.38 → 0.1.40

package/dist/components/MenuDropdown.svelte

@@ -14,7 +14,7 @@
 		open = $bindable(false),
 		items,
 		trigger: triggerProp,
-		align = "start",
+		align = "inline-start",
 		width,
 		maxWidth,
 	}: {
@@ -24,14 +24,18 @@
 		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";
+		/** Inline alignment: "inline-start" (default), "center", or "inline-end" */
+		align?: "inline-start" | "center" | "inline-end";
 		/** The width of the menu */
 		width?: string;
 		/** The max width of the menu */
 		maxWidth?: string;
 	} = $props();
 
+	const positionArea = $derived(
+		align === "center" ? "block-end" : `block-end ${align}`
+	);
+
 	let menuEl: HTMLDivElement | null = $state(null);
 	let keyboardHasFocus: boolean = $state(false);
 
@@ -95,8 +99,7 @@
 <UiContent>
 	<Popover
 		bind:open
-		position="block-end"
-		{align}
+		{positionArea}
 		fallbacks={["flip-block", "flip-inline"]}
 		offset="0.5rem"
 		{width}

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

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

package/dist/components/Popover.svelte

@@ -9,9 +9,10 @@
 	let {
 		open = $bindable(false),
 		anchor,
-		position = "block-end",
-		align = "start",
+		positionArea = "block-end inline-start",
 		fallbacks = ["flip-block", "flip-inline"],
+		visibility = "anchors-visible",
+		tryOrder = "most-block-size",
 		mode = "auto",
 		offset,
 		width,
@@ -28,15 +29,17 @@
 		open?: boolean;
 		/** Element to anchor to (if no trigger snippet provided) */
 		anchor?: HTMLElement | string;
-		/** Block position: "block-end" (below) or "block-start" (above) */
-		position?: "block-end" | "block-start";
-		/** Inline alignment: "start", "center", or "end" */
-		align?: "start" | "center" | "end";
+		/** CSS position-area value (e.g., "block-end inline-start", "block-start center") */
+		positionArea?: string;
 		/** CSS position-try-fallbacks values */
 		fallbacks?: string[];
+		/** CSS position-visibility value */
+		visibility?: "always" | "anchors-visible" | "no-overflow";
+		/** CSS position-try-order value */
+		tryOrder?: "normal" | "most-block-size" | "most-inline-size";
 		/** Popover mode: "auto" (light dismiss) or "manual" */
 		mode?: "auto" | "manual";
-		/** Gap between anchor and popover (CSS margin value) */
+		/** Gap between anchor and popover (CSS length value) */
 		offset?: string;
 		/** Width of the popover */
 		width?: string;
@@ -130,14 +133,6 @@
 		}
 	}
 
-	// Compute position-area value: combines block position with inline alignment
-	// e.g., "block-end start" means below anchor, aligned to start
-	const positionArea = $derived(
-		align === "center" 
-			? position  // Just "block-end" centers by default
-			: `${position} ${align}`  // "block-end start" or "block-end end"
-	);
-
 	// Attrs to spread on trigger element
 	const triggerAttrs = $derived({
 		popovertarget: id,
@@ -151,7 +146,8 @@
 	const popoverStyle = $derived([
 		`position-anchor: ${anchorName}`,
 		`position-area: ${positionArea}`,
-		`position-try-order: most-block-size`,
+		`position-visibility: ${visibility}`,
+		`position-try-order: ${tryOrder}`,
 		fallbacks.length ? `position-try-fallbacks: ${fallbacks.join(", ")}` : "",
 		offset ? `--popover-offset: ${offset}` : "",
 		width ? `--popover-width: ${width}` : "",

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

@@ -4,15 +4,17 @@ type $$ComponentProps = {
     open?: boolean;
     /** Element to anchor to (if no trigger snippet provided) */
     anchor?: HTMLElement | string;
-    /** Block position: "block-end" (below) or "block-start" (above) */
-    position?: "block-end" | "block-start";
-    /** Inline alignment: "start", "center", or "end" */
-    align?: "start" | "center" | "end";
+    /** CSS position-area value (e.g., "block-end inline-start", "block-start center") */
+    positionArea?: string;
     /** CSS position-try-fallbacks values */
     fallbacks?: string[];
+    /** CSS position-visibility value */
+    visibility?: "always" | "anchors-visible" | "no-overflow";
+    /** CSS position-try-order value */
+    tryOrder?: "normal" | "most-block-size" | "most-inline-size";
     /** Popover mode: "auto" (light dismiss) or "manual" */
     mode?: "auto" | "manual";
-    /** Gap between anchor and popover (CSS margin value) */
+    /** Gap between anchor and popover (CSS length value) */
     offset?: string;
     /** Width of the popover */
     width?: string;

package/package.json

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