@x33025/sveltely 0.0.52 → 0.0.53

package/dist/components/Popover/Popover.svelte

@@ -39,9 +39,11 @@
 
 	let triggerEl = $state<HTMLElement | null>(null);
 	let panelEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
 	let panelCoords = $state({ top: 0, left: 0 });
 	let panelTransform = $state('none');
 	let resolvedAnchor = $state<Anchor>('bottom');
+	let computedPanelRadius = $state<string | null>(null);
 
 	const popoverId = createPopoverId();
 	let parentPopoverId = $state<string | null>(null);
@@ -131,10 +133,50 @@
 		];
 	};
 
+	const parsePx = (value: string) => {
+		const first = value.split(' ')[0];
+		const parsed = Number.parseFloat(first);
+		return Number.isFinite(parsed) ? parsed : 0;
+	};
+
+	const updateComputedPanelRadius = () => {
+		if (!panelEl || !contentEl) {
+			computedPanelRadius = null;
+			return;
+		}
+
+		const itemEl =
+			contentEl.querySelector<HTMLElement>('[data-popover-radius-item]') ||
+			contentEl.querySelector<HTMLElement>('.popover-item') ||
+			contentEl.querySelector<HTMLElement>('.dropdown-item');
+		if (!itemEl) {
+			computedPanelRadius = 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 panelStyle = getComputedStyle(panelEl);
+		const panelPadding = Math.min(parsePx(panelStyle.paddingTop), parsePx(panelStyle.paddingLeft));
+
+		const panelRect = panelEl.getBoundingClientRect();
+		const outerRadius = Math.min(
+			effectiveItemRadius + panelPadding,
+			panelRect.height / 2,
+			panelRect.width / 2
+		);
+
+		computedPanelRadius = `${outerRadius}px`;
+	};
+
 	const positionAndMeasure = async () => {
 		await tick();
 		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 		positionPanel();
+		updateComputedPanelRadius();
 	};
 
 	const getPopoverIdsFromEvent = (event: Event) => {
@@ -171,6 +213,7 @@
 
 	function closePanel() {
 		open = false;
+		computedPanelRadius = null;
 	}
 
 	function toggle() {
@@ -213,6 +256,11 @@
 		if (!open) return;
 		void positionAndMeasure();
 	});
+
+	$effect(() => {
+		if (!open) return;
+		updateComputedPanelRadius();
+	});
 </script>
 
 <svelte:window
@@ -248,13 +296,16 @@
 			data-popover
 			data-popover-id={popoverId}
 			data-popover-parent-id={parentPopoverId ?? ''}
-			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform};"
+			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform}; border-radius: {computedPanelRadius ??
+				'0.375rem'};"
 			role="dialog"
 			aria-modal="false"
 			tabindex="-1"
 			bind:this={panelEl}
 		>
-			{@render children()}
+			<div role="none" bind:this={contentEl}>
+				{@render children()}
+			</div>
 		</div>
 	{/if}
 </div>

package/dist/style/index.css

@@ -94,20 +94,8 @@
 		@apply rounded p-1.5 hover:bg-zinc-100;
 	}
 
-	.dropdown {
-		@apply rounded-md border border-gray-200 bg-white p-1 shadow-md;
-	}
-
-	.dropdown-item {
-		@apply rounded-md;
-	}
-
-	.dropdown-item:hover {
-		@apply bg-zinc-100;
-	}
-
 	.popover {
-		@apply rounded-md border border-gray-200 bg-white p-2 shadow-md;
+		@apply rounded-md border border-gray-200 bg-white p-1 shadow-md;
 	}
 
 	.sheet {

package/dist/style.css

@@ -685,29 +685,13 @@
       }
     }
   }
-  .dropdown {
-    border-radius: var(--radius-md);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-gray-200);
-    background-color: var(--color-white);
-    padding: calc(var(--spacing) * 1);
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .dropdown-item {
-    border-radius: var(--radius-md);
-  }
-  .dropdown-item:hover {
-    background-color: var(--color-zinc-100);
-  }
   .popover {
     border-radius: var(--radius-md);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-gray-200);
     background-color: var(--color-white);
-    padding: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 1);
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }

package/package.json

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