lutra 0.1.39 → 0.1.41

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,8 +9,7 @@
 	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",
@@ -30,19 +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[];
-		/** When to hide: "always" (never hide), "anchors-visible" (hide when anchor hidden), "no-overflow" (hide if overflows) */
+		/** CSS position-visibility value */
 		visibility?: "always" | "anchors-visible" | "no-overflow";
-		/** Order for trying fallback positions */
+		/** 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;
@@ -136,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,

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

@@ -4,19 +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[];
-    /** When to hide: "always" (never hide), "anchors-visible" (hide when anchor hidden), "no-overflow" (hide if overflows) */
+    /** CSS position-visibility value */
     visibility?: "always" | "anchors-visible" | "no-overflow";
-    /** Order for trying fallback positions */
+    /** 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.39",
+	"version": "0.1.41",
 	"scripts": {
 		"dev": "vite dev",
 		"bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",