@x33025/sveltely 0.0.52 → 0.0.54

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,49 @@
 		];
 	};
 
+	const parsePx = (value: string) => {
+		const first = value.split(' ')[0];
+		const parsed = Number.parseFloat(first);
+		return Number.isFinite(parsed) ? parsed : 0;
+	};
+
+	const updateRadiusFromSource = () => {
+		if (!panelEl || !contentEl) {
+			computedPanelRadius = null;
+			return;
+		}
+
+		const sourceEl = contentEl.querySelector<HTMLElement>('[data-popover-radius-source]');
+		if (!sourceEl) {
+			computedPanelRadius = null;
+			return;
+		}
+
+		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 panelStyle = getComputedStyle(panelEl);
+		const panelPadding = Math.min(parsePx(panelStyle.paddingTop), parsePx(panelStyle.paddingLeft));
+		const panelRect = panelEl.getBoundingClientRect();
+		const panelRadius = Math.min(
+			Math.max(0, effectiveSourceRadius + panelPadding),
+			panelRect.height / 2,
+			panelRect.width / 2
+		);
+
+		computedPanelRadius = `${panelRadius}px`;
+	};
+
 	const positionAndMeasure = async () => {
 		await tick();
 		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 		positionPanel();
+		updateRadiusFromSource();
 	};
 
 	const getPopoverIdsFromEvent = (event: Event) => {
@@ -171,6 +212,7 @@
 
 	function closePanel() {
 		open = false;
+		computedPanelRadius = null;
 	}
 
 	function toggle() {
@@ -248,13 +290,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 ??
+				''};"
 			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,22 +94,16 @@
 		@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;
+	.popover {
+		@apply border border-gray-200 bg-white p-1 shadow-md;
 	}
 
-	.dropdown-item:hover {
-		@apply bg-zinc-100;
+	.popover-item {
+		@apply rounded-md px-2 py-1;
 	}
-
-	.popover {
-		@apply rounded-md border border-gray-200 bg-white p-2 shadow-md;
+	.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);
@@ -685,8 +711,7 @@
       }
     }
   }
-  .dropdown {
-    border-radius: var(--radius-md);
+  .popover {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-gray-200);
@@ -695,21 +720,13 @@
     --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 {
+  .popover-item {
     border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
   }
-  .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);
-    --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:hover {
+    background-color: var(--color-zinc-200);
   }
   .sheet {
     border-radius: var(--radius-md);

package/package.json

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