@x33025/sveltely 0.0.53 → 0.0.55

package/dist/components/Popover/Popover.svelte

@@ -139,44 +139,44 @@
 		return Number.isFinite(parsed) ? parsed : 0;
 	};
 
-	const updateComputedPanelRadius = () => {
+	const updateRadiusFromSource = () => {
 		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) {
+		const sourceEl = contentEl.querySelector<HTMLElement>('[data-popover-radius-source]');
+		if (!sourceEl) {
 			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 sourceStyle = getComputedStyle(sourceEl);
+		const sourceRadius = parsePx(sourceStyle.borderTopLeftRadius);
+		const sourceRect = sourceEl.getBoundingClientRect();
+		const effectiveSourceRadius = Math.min(
+			sourceRadius,
+			sourceRect.height / 2,
+			sourceRect.width / 2
+		);
 		const panelRect = panelEl.getBoundingClientRect();
-		const outerRadius = Math.min(
-			effectiveItemRadius + panelPadding,
+		const insetTop = Math.max(0, sourceRect.top - panelRect.top);
+		const insetLeft = Math.max(0, sourceRect.left - panelRect.left);
+		const sourceInset = Math.min(insetTop, insetLeft);
+		const panelRadius = Math.min(
+			Math.max(0, effectiveSourceRadius + sourceInset),
 			panelRect.height / 2,
 			panelRect.width / 2
 		);
 
-		computedPanelRadius = `${outerRadius}px`;
+		computedPanelRadius = `${panelRadius}px`;
 	};
 
 	const positionAndMeasure = async () => {
 		await tick();
 		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 		positionPanel();
-		updateComputedPanelRadius();
+		updateRadiusFromSource();
 	};
 
 	const getPopoverIdsFromEvent = (event: Event) => {
@@ -256,11 +256,6 @@
 		if (!open) return;
 		void positionAndMeasure();
 	});
-
-	$effect(() => {
-		if (!open) return;
-		updateComputedPanelRadius();
-	});
 </script>
 
 <svelte:window
@@ -297,7 +292,7 @@
 			data-popover-id={popoverId}
 			data-popover-parent-id={parentPopoverId ?? ''}
 			style="top: {panelCoords.top}px; left: {panelCoords.left}px; transform: {panelTransform}; border-radius: {computedPanelRadius ??
-				'0.375rem'};"
+				''};"
 			role="dialog"
 			aria-modal="false"
 			tabindex="-1"

package/dist/style/index.css

@@ -95,9 +95,15 @@
 	}
 
 	.popover {
-		@apply rounded-md border border-gray-200 bg-white p-1 shadow-md;
+		@apply border border-gray-200 bg-white p-1 shadow-md;
 	}
 
+	.popover-item {
+		@apply rounded-md px-2 py-1;
+	}
+	.popover-item:hover {
+		@apply bg-zinc-200;
+	}
 	.sheet {
 		@apply rounded-md bg-white p-4 shadow-md;
 	}

package/dist/style.css

@@ -7,8 +7,11 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-900: oklch(21% 0.034 264.665);
@@ -390,12 +393,18 @@
   .border-zinc-300 {
     border-color: var(--color-zinc-300);
   }
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
   .bg-white {
     background-color: var(--color-white);
   }
   .bg-zinc-50 {
     background-color: var(--color-zinc-50);
   }
+  .bg-zinc-100 {
+    background-color: var(--color-zinc-100);
+  }
   .bg-zinc-900 {
     background-color: var(--color-zinc-900);
   }
@@ -456,6 +465,9 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -524,6 +536,13 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .hover\:bg-red-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-200);
+      }
+    }
+  }
   .hover\:bg-zinc-100 {
     &:hover {
       @media (hover: hover) {
@@ -531,6 +550,13 @@
       }
     }
   }
+  .hover\:bg-zinc-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-zinc-200);
+      }
+    }
+  }
   .focus\:border-zinc-400 {
     &:focus {
       border-color: var(--color-zinc-400);
@@ -686,7 +712,6 @@
     }
   }
   .popover {
-    border-radius: var(--radius-md);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-gray-200);
@@ -695,6 +720,14 @@
     --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);
   }
+  .popover-item {
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .popover-item:hover {
+    background-color: var(--color-zinc-200);
+  }
   .sheet {
     border-radius: var(--radius-md);
     background-color: var(--color-white);

package/package.json

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