noph-ui 0.9.2 → 0.9.4

package/dist/menu/Menu.svelte

@@ -8,7 +8,6 @@
 		element = $bindable(),
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
-		position = 'bottom',
 		...attributes
 	}: MenuProps = $props()
 
@@ -16,9 +15,6 @@
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
 	let innerWidth = $state(0)
-	let scrollY = $state(0)
-	let scrollX = $state(0)
-	let anchorId = anchor?.style.getPropertyValue('anchor-name')
 
 	showPopover = () => {
 		element?.showPopover()
@@ -30,6 +26,7 @@
 
 	const refreshValues = () => {
 		if (element && anchor && !('anchorName' in document.documentElement.style)) {
+			const docClientWidth = document.documentElement.clientWidth
 			const anchorRect = anchor.getBoundingClientRect()
 			if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {
 				element.style.top = `${anchorRect.top - clientHeight - 2}px`
@@ -37,10 +34,10 @@
 				element.style.top = `${anchorRect.bottom + 2}px`
 			}
 			const left = anchorRect.left + anchorRect.width / 2 - clientWidth / 2
-			if (left > innerWidth - clientWidth) {
-				element.style.left = `${innerWidth - clientWidth - 8}px`
-			} else if (left < 8) {
-				element.style.left = '8px'
+			if (left < 2) {
+				element.style.left = '2px'
+			} else if (left > docClientWidth - clientWidth) {
+				element.style.left = `${docClientWidth - clientWidth - 4}px`
 			} else {
 				element.style.left = `${anchorRect.left + anchorRect.width / 2 - clientWidth / 2}px`
 			}
@@ -78,7 +75,7 @@
 					},
 					{ passive: true },
 				)
-			} else if (!anchorId) {
+			} else if (!anchor.style.getPropertyValue('anchor-name')) {
 				const generatedId = `--${generateUUIDv4()}`
 				element.style.setProperty('position-anchor', generatedId)
 				anchor.style.setProperty('anchor-name', generatedId)
@@ -87,13 +84,7 @@
 	})
 </script>
 
-<svelte:window
-	bind:scrollX
-	bind:scrollY
-	bind:innerHeight
-	bind:innerWidth
-	onresize={refreshValues}
-/>
+<svelte:window bind:innerHeight onresize={refreshValues} />
 
 <div
 	{...attributes}
@@ -101,7 +92,7 @@
 	bind:clientWidth
 	bind:clientHeight
 	popover="auto"
-	class={[position, 'np-menu', attributes.class]}
+	class={['np-menu', attributes.class]}
 	role="menu"
 >
 	{@render children()}
@@ -116,9 +107,7 @@
 		border-radius: var(--np-menu-container-shape, var(--np-shape-corner-extra-small));
 		padding: 0.5rem 0;
 		box-shadow: var(--np-elevation-2);
-		margin: 0;
-		margin-bottom: 2px;
-		margin-top: 2px;
+		margin: var(--np-menu-margin, 2px);
 		max-height: 80dvh;
 		scrollbar-color: var(--np-color-on-surface-variant) transparent;
 		scrollbar-width: thin;
@@ -126,19 +115,9 @@
 			display 0.2s allow-discrete,
 			opacity 0.2s linear;
 		opacity: 0;
-		z-index: 1;
-	}
-	.bottom-left.np-menu[popover] {
-		top: anchor(bottom);
-		left: anchor(left);
-		justify-self: anchor-center;
-		position-try-fallbacks: --menu-top-left;
-	}
-
-	.bottom.np-menu[popover] {
-		top: anchor(bottom);
-		position-try-fallbacks: --menu-top;
-		justify-self: anchor-center;
+		justify-self: var(--np-menu-justify-self, anchor-center);
+		position-area: var(--np-menu-position-area, bottom center);
+		position-try-fallbacks: --np-menu-position-fallback;
 	}
 
 	.np-menu:popover-open {
@@ -147,13 +126,7 @@
 			opacity: 0;
 		}
 	}
-	@position-try --menu-top {
-		inset: auto;
-		bottom: anchor(top);
-	}
-	@position-try --menu-top-left {
-		inset: auto;
-		bottom: anchor(top);
-		left: anchor(left);
+	@position-try --np-menu-position-fallback {
+		position-area: var(--np-menu-position-area-fallback, top center);
 	}
 </style>

package/dist/menu/types.d.ts

@@ -5,7 +5,6 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     anchor?: HTMLElement | undefined;
     showPopover?: () => void;
     hidePopover?: () => void;
-    position?: 'bottom-left' | 'bottom';
     element?: HTMLDivElement;
 }
 interface ButtonProps extends HTMLButtonAttributes {

package/dist/select/Select.svelte

@@ -197,9 +197,12 @@
 </div>
 
 <Menu
-	style="position-anchor:{menuId};min-width: {clientWidth}px;"
+	style="position-anchor:{menuId};min-width: 300px;"
 	popover="manual"
-	position="bottom-left"
+	--np-menu-justify-self="none"
+	--np-menu-position-area-fallback="top span-right"
+	--np-menu-position-area="bottom span-right"
+	--np-menu-margin="2px 0"
 	anchor={element}
 	ontoggle={({ newState }) => {
 		if (newState === 'open') {

package/dist/tooltip/Tooltip.svelte

@@ -1,51 +1,54 @@
 <script lang="ts">
+	import { generateUUIDv4 } from '../utils.ts'
 	import type { TooltipProps } from './types.ts'
 
 	let { children, element = $bindable(), id, ...attributes }: TooltipProps = $props()
 	let clientWidth = $state(0)
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
-	let innerWidth = $state(0)
 	let anchor: HTMLElement | undefined = $state()
-	let anchorRect: DOMRect | undefined = $state()
 
-	const distanceToBorder = 8
-
-	let calculateLeftPos = $derived.by(() => {
-		if (!anchor || !anchorRect) {
-			return 0
-		}
-		const left = anchorRect.left + anchorRect.width / 2 - clientWidth / 2
-		if (left < distanceToBorder) {
-			return distanceToBorder
-		}
-		if (innerWidth < left + clientWidth + distanceToBorder) {
-			return innerWidth - clientWidth - distanceToBorder
-		}
-		return anchorRect.left + anchorRect.width / 2 - clientWidth / 2
-	})
-
-	let calculateTopPos = $derived.by(() => {
-		if (!anchorRect) {
-			return 0
+	const refreshValues = () => {
+		if (element && anchor && !('anchorName' in document.documentElement.style)) {
+			const docClientWidth = document.documentElement.clientWidth
+			const anchorRect = anchor.getBoundingClientRect()
+			if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {
+				element.style.top = `${anchorRect.top - clientHeight - 8}px`
+			} else {
+				element.style.top = `${anchorRect.bottom}px`
+			}
+			const left = anchorRect.left + anchorRect.width / 2 - clientWidth / 2
+			if (left < 2) {
+				element.style.left = '2px'
+			} else if (left > docClientWidth - clientWidth) {
+				element.style.left = `${docClientWidth - clientWidth - 2}px`
+			} else {
+				element.style.left = `${anchorRect.left + anchorRect.width / 2 - clientWidth / 2}px`
+			}
 		}
-		const top = anchorRect.bottom + 4
-		if (top + clientHeight > innerHeight) {
-			return anchorRect.top - clientHeight - 4
-		}
-		return top
-	})
+	}
+	$effect(refreshValues)
 	let setAnchor = (document: Document) => {
 		anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
 	}
 
 	$effect(() => {
-		if (anchor) {
-			anchor.addEventListener('pointerenter', () => {
-				anchorRect = anchor?.getBoundingClientRect() ?? undefined
+		if (anchor && element) {
+			if ('anchorName' in document.documentElement.style) {
+				const anchorName = anchor.style.getPropertyValue('anchor-name')
+				const generatedId = anchorName || `--${generateUUIDv4()}`
+				element.style.setProperty('position-anchor', generatedId)
+				if (!anchorName) {
+					anchor.style.setProperty('anchor-name', generatedId)
+				}
+			}
+			anchor.addEventListener('mouseenter', () => {
 				element?.showPopover()
 			})
-			anchor.addEventListener('pointerleave', () => {
+			anchor.addEventListener('mouseleave', () => {
+				element?.hidePopover()
+			})
+			anchor.addEventListener('click', () => {
 				element?.hidePopover()
 			})
 		}
@@ -53,13 +56,12 @@
 </script>
 
 <svelte:document use:setAnchor />
-<svelte:window bind:innerHeight bind:innerWidth />
+<svelte:window bind:innerHeight />
 
 <div
 	{...attributes}
 	{id}
 	class={['np-tooltip', attributes.class]}
-	style="top:{calculateTopPos}px;left:{calculateLeftPos}px;{attributes.style}"
 	role="tooltip"
 	popover="manual"
 	bind:this={element}
@@ -70,25 +72,31 @@
 </div>
 
 <style>
-	.np-tooltip {
+	.np-tooltip[popover] {
 		width: max-content;
-		margin: 0;
+		margin: 4px 0;
 		background: var(--np-color-inverse-surface);
 		color: var(--np-color-inverse-on-surface);
 		padding: 0.25rem 0.5rem;
+		border: none;
 		border-radius: 0.25rem;
 		line-height: 1rem;
 		font-size: 0.75rem;
 		opacity: 0;
 		transition:
-			overlay 0.3s allow-discrete,
 			display 0.3s allow-discrete,
 			opacity 0.3s ease;
+		justify-self: var(--np-tooltip-justify-self, anchor-center);
+		position-area: var(--np-tooltip-position-area, top);
+		position-try-fallbacks: --np-tooltip-position-fallback;
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
 		animation: scaleIn 0.3s ease;
 	}
+	@position-try --np-tooltip-position-fallback {
+		position-area: var(--np-tooltip-position-area-fallback, bottom);
+	}
 
 	@keyframes scaleIn {
 		from {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {