noph-ui 0.25.2 → 0.25.4

package/dist/checkbox/Checkbox.svelte

@@ -38,6 +38,12 @@
 </script>
 
 <div {style} class={['np-container', attributes.class]} bind:this={element}>
+	<div class="np-outline"></div>
+	<div class="np-background"></div>
+	<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
+		<rect class="mark short" />
+		<rect class="mark long" />
+	</svg>
 	<div class="np-input-wrapper">
 		{#if !attributes.disabled}
 			<Ripple forElement={inputEl} />
@@ -53,12 +59,6 @@
 			aria-checked={indeterminate ? 'mixed' : undefined}
 		/>
 	</div>
-	<div class="np-outline"></div>
-	<div class="np-background"></div>
-	<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
-		<rect class="mark short" />
-		<rect class="mark long" />
-	</svg>
 </div>
 
 <style>
@@ -95,7 +95,6 @@
 		height: 40px;
 		position: absolute;
 		width: 40px;
-		z-index: 1;
 		border-radius: var(--np-shape-corner-full);
 		cursor: inherit;
 	}

package/dist/dialog/Dialog.svelte

@@ -70,7 +70,6 @@
 		border: none;
 		margin: auto;
 		padding: 9px 14px 20px 14px;
-		z-index: 1000;
 		padding: 2rem 1rem;
 	}
 	.np-dialog {

package/dist/menu/Menu.svelte

@@ -11,6 +11,7 @@
 		style,
 		popover = 'auto',
 		anchor,
+		ontoggle,
 		...attributes
 	}: MenuProps = $props()
 
@@ -97,7 +98,7 @@
 	})
 </script>
 
-<svelte:window bind:innerHeight onresize={refreshValues} />
+<!-- <svelte:window bind:innerHeight onresize={refreshValues} /> -->
 <div
 	role="menu"
 	{...attributes}
@@ -108,7 +109,7 @@
 	ontoggle={(event) => {
 		let { newState } = event
 		open = newState === 'open'
-		attributes.ontoggle?.(event)
+		ontoggle?.(event)
 	}}
 	{popover}
 	class={['np-menu-container', attributes.class]}
@@ -139,22 +140,21 @@
 		padding: 0;
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
-		inset: auto;
-		transition:
-			display 0.2s allow-discrete,
-			opacity 0.2s linear;
-		opacity: 0;
+	}
+
+	.np-menu-container[popover]:popover-open {
+		opacity: 1;
+		animation: fadeIn 0.2s linear;
 		justify-self: var(--np-menu-justify-self, anchor-center);
 		position-area: var(--np-menu-position-area, bottom center);
 		position-try: normal flip-block;
-		z-index: 1000;
 	}
-
-	.np-menu-container:popover-open {
-		opacity: 1;
-		display: flex;
-		@starting-style {
+	@keyframes fadeIn {
+		0% {
 			opacity: 0;
 		}
+		100% {
+			opacity: 1;
+		}
 	}
 </style>

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -48,9 +48,6 @@
 		padding: 0;
 		background-color: transparent;
 	}
-	.np-navigation-drawer-container-modal {
-		z-index: 1000;
-	}
 	.np-navigation-wrapper {
 		background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
 		border-top-right-radius: var(--np-shape-corner-large);

package/dist/snackbar/Snackbar.svelte

@@ -124,7 +124,6 @@
 			display 0.2s allow-discrete,
 			opacity 0.2s linear;
 		opacity: 0;
-		z-index: 1;
 	}
 
 	.np-snackbar:popover-open {

package/dist/tooltip/Tooltip.svelte

@@ -49,8 +49,8 @@
 				anchor.style.setProperty('anchor-name', generatedId)
 			}
 		}
-		anchor.addEventListener('pointerenter', showPopover)
-		anchor.addEventListener('pointerleave', hidePopover)
+		anchor.addEventListener('mouseenter', showPopover)
+		anchor.addEventListener('mouseleave', onLeave)
 		anchor.addEventListener('focus', onAnchorFocus)
 		anchor.addEventListener('blur', hidePopover)
 	}
@@ -70,11 +70,19 @@
 		element?.hidePopover()
 	}
 
+	const onLeave = () => {
+		hidePopover()
+		// TODO Use delay as soons as popover="hint" is supported in all browsers
+		// setTimeout(() => {
+		// 	hidePopover()
+		// }, 500)
+	}
+
 	onMount(() => {
 		return () => {
 			if (anchor) {
-				anchor.removeEventListener('pointerenter', showPopover)
-				anchor.removeEventListener('pointerleave', hidePopover)
+				anchor.removeEventListener('mouseenter', showPopover)
+				anchor.removeEventListener('mouseleave', onLeave)
 				anchor.removeEventListener('focus', onAnchorFocus)
 				anchor.removeEventListener('blur', hidePopover)
 			}
@@ -91,7 +99,7 @@
 		{@attach attachAnchor}
 		class={['np-tooltip', attributes.class]}
 		role="tooltip"
-		popover="manual"
+		popover="hint"
 		bind:this={element}
 		bind:clientWidth
 		bind:clientHeight
@@ -108,7 +116,6 @@
 	.np-tooltip[popover] {
 		width: max-content;
 		margin: 4px 0;
-		inset: auto;
 		background: var(--np-color-inverse-surface);
 		color: var(--np-color-inverse-on-surface);
 		padding: 0.25rem 0.5rem;
@@ -116,18 +123,13 @@
 		border-radius: 0.25rem;
 		line-height: 1rem;
 		font-size: 0.75rem;
-		opacity: 0;
-		z-index: 1000;
-		transition:
-			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: normal flip-block;
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
 		animation: scaleIn 0.3s ease;
+		justify-self: var(--np-tooltip-justify-self, anchor-center);
+		position-area: var(--np-tooltip-position-area, top);
+		position-try: normal flip-block;
 	}
 
 	@keyframes scaleIn {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.25.2",
+  "version": "0.25.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -58,8 +58,8 @@
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.55.0",
     "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.39.0",
-    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/kit": "^2.39.1",
+    "@sveltejs/package": "^2.5.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.35.0",