@x33025/sveltely 0.0.26 → 0.0.28

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { portalContent } from '../../actions/portal';
 
@@ -23,9 +24,11 @@
 	let isOpen = $state(false);
 	let triggerEl = $state<HTMLElement | null>(null);
 	let menuEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
 	let menuCoords = $state({ top: 0, left: 0 });
 	let menuTransform = $state('none');
 	let resolvedAnchor = $state<'top' | 'bottom' | 'leading' | 'trailing'>('bottom');
+	let computedMenuRadius = $state<string | null>(null);
 
 	type Point = { x: number; y: number };
 
@@ -87,7 +90,46 @@
 		];
 	};
 
-	function open() {
+	const parsePx = (value: string) => {
+		const first = value.split(' ')[0];
+		const parsed = Number.parseFloat(first);
+		return Number.isFinite(parsed) ? parsed : 0;
+	};
+
+	function updateComputedMenuRadius() {
+		if (!menuEl || !contentEl) {
+			computedMenuRadius = null;
+			return;
+		}
+
+		const itemEl = contentEl.querySelector<HTMLElement>('.dropdown-item');
+		if (!itemEl) {
+			computedMenuRadius = null;
+			return;
+		}
+
+		const itemRect = itemEl.getBoundingClientRect();
+		const itemStyle = getComputedStyle(itemEl);
+		const itemRadius = parsePx(itemStyle.borderTopLeftRadius);
+		const effectiveItemRadius = Math.min(itemRadius, itemRect.height / 2, itemRect.width / 2);
+
+		const contentStyle = getComputedStyle(contentEl);
+		const contentPadding = Math.min(
+			parsePx(contentStyle.paddingTop),
+			parsePx(contentStyle.paddingLeft)
+		);
+
+		const menuRect = menuEl.getBoundingClientRect();
+		const outerRadius = Math.min(
+			effectiveItemRadius + contentPadding,
+			menuRect.height / 2,
+			menuRect.width / 2
+		);
+
+		computedMenuRadius = `${outerRadius}px`;
+	}
+
+	async function open() {
 		if (triggerEl) {
 			const rect = triggerEl.getBoundingClientRect();
 			const spaceAbove = rect.top;
@@ -125,10 +167,13 @@
 			}
 		}
 		isOpen = true;
+		await tick();
+		updateComputedMenuRadius();
 	}
 
 	function close() {
 		isOpen = false;
+		computedMenuRadius = null;
 	}
 
 	function toggle() {
@@ -170,6 +215,11 @@
 	function handleSelect() {
 		if (closeOnSelect) close();
 	}
+
+	$effect(() => {
+		if (!isOpen) return;
+		updateComputedMenuRadius();
+	});
 </script>
 
 <svelte:window
@@ -197,7 +247,8 @@
 		<div
 			use:portalContent
 			class="dropdown-menu fixed z-50 border border-gray-200 focus:outline-none"
-			style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: var(--dropdown-border-radius); background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
+			style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: {computedMenuRadius ??
+				'var(--dropdown-border-radius)'}; background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
 			role="menu"
 			aria-orientation="vertical"
 			tabindex="-1"
@@ -208,6 +259,7 @@
 				style="padding: var(--dropdown-content-padding);"
 				role="none"
 				onclick={handleSelect}
+				bind:this={contentEl}
 			>
 				{@render children()}
 			</div>

package/dist/style/index.css

@@ -49,7 +49,7 @@
 	}
 
 	.dropdown-item {
-		border-radius: max(0px, calc(var(--dropdown-border-radius) - var(--dropdown-content-padding)));
+		border-radius: var(--dropdown-item-border-radius);
 	}
 
 	.dropdown-item:hover {
@@ -67,8 +67,9 @@
 		--sheet-blur: var(--blur-sm);
 		--sheet-shadow: var(--shadow-md);
 
-		--dropdown-border-radius: var(--radius-md);
 		--dropdown-content-padding: calc(var(--spacing));
+		--dropdown-item-border-radius: var(--radius-md);
+		--dropdown-border-radius: var(--radius-md);
 		--dropdown-background: var(--color-white);
 		--dropdown-shadow: var(--shadow-md);
 		--dropdown-item-highlight: var(--color-zinc-100);

package/dist/style.css

@@ -586,7 +586,7 @@
     padding: 0;
   }
   .dropdown-item {
-    border-radius: max(0px, calc(var(--dropdown-border-radius) - var(--dropdown-content-padding)));
+    border-radius: var(--dropdown-item-border-radius);
   }
   .dropdown-item:hover {
     background: var(--dropdown-item-highlight);
@@ -603,8 +603,9 @@
     }
     --sheet-blur: var(--blur-sm);
     --sheet-shadow: var(--shadow-md);
-    --dropdown-border-radius: var(--radius-md);
     --dropdown-content-padding: calc(var(--spacing));
+    --dropdown-item-border-radius: var(--radius-md);
+    --dropdown-border-radius: var(--radius-md);
     --dropdown-background: var(--color-white);
     --dropdown-shadow: var(--shadow-md);
     --dropdown-item-highlight: var(--color-zinc-100);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.0.26",
+	"version": "0.0.28",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",