noph-ui 0.24.16 → 0.24.17

package/dist/button/Button.svelte

@@ -14,7 +14,6 @@
 		element = $bindable(),
 		disabled = false,
 		loading = false,
-		keepTooltipOnClick,
 		loadingAriaLabel,
 		size = 's',
 		shape = 'round',
@@ -106,7 +105,7 @@
 {/if}
 
 {#if title && !disabled && !loading}
-	<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
+	<Tooltip id={uid}>{title}</Tooltip>
 {/if}
 
 <style>

package/dist/button/IconButton.svelte

@@ -16,7 +16,6 @@
 		loadingAriaLabel,
 		selected = $bindable(false),
 		selectedIcon,
-		keepTooltipOnClick,
 		width = 'default',
 		size = 's',
 		shape = 'round',
@@ -100,7 +99,7 @@
 {/if}
 
 {#if title && !disabled && !loading}
-	<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
+	<Tooltip id={uid}>{title}</Tooltip>
 {/if}
 
 <style>

package/dist/button/types.d.ts

@@ -8,7 +8,6 @@ interface ButtonButtonProps extends HTMLButtonAttributes {
     disabled?: boolean;
     loading?: boolean;
     loadingAriaLabel?: string;
-    keepTooltipOnClick?: boolean;
     size?: 'xs' | 's' | 'm' | 'l' | 'xl';
     toggle?: boolean;
     shape?: 'round' | 'square';
@@ -19,7 +18,6 @@ interface ButtonAnchorProps extends HTMLAnchorAttributes {
     start?: Snippet;
     end?: Snippet;
     element?: HTMLElement;
-    keepTooltipOnClick?: boolean;
     disabled?: boolean;
     loading?: boolean;
     loadingAriaLabel?: string;
@@ -35,7 +33,6 @@ interface IconButtonButtonProps extends HTMLButtonAttributes {
     selected?: boolean;
     loading?: boolean;
     loadingAriaLabel?: string;
-    keepTooltipOnClick?: boolean;
     selectedIcon?: Snippet;
     shape?: 'round' | 'square';
     size?: 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -49,7 +46,6 @@ interface IconButtonAnchorProps extends HTMLAnchorAttributes {
     loadingAriaLabel?: string;
     toggle?: boolean;
     selected?: boolean;
-    keepTooltipOnClick?: boolean;
     selectedIcon?: Snippet;
     shape?: 'round' | 'square';
     size?: 'xs' | 's' | 'm' | 'l' | 'xl';

package/dist/menu/Menu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte'
 	import type { MenuProps } from './types.ts'
 
 	let {
@@ -82,10 +83,13 @@
 		refreshValues()
 	}
 
-	$effect(() => {
-		if (element && !('anchorName' in document.documentElement.style)) {
-			getScrollableParent(element).addEventListener('scroll', onScroll, { passive: true })
+	const attachScrollableParent = (el: HTMLDivElement) => {
+		if (!('anchorName' in document.documentElement.style)) {
+			getScrollableParent(el).addEventListener('scroll', onScroll, { passive: true })
 		}
+	}
+
+	onMount(() => {
 		return () => {
 			if (element && !('anchorName' in document.documentElement.style)) {
 				getScrollableParent(element).removeEventListener('scroll', onScroll)
@@ -98,6 +102,7 @@
 <div
 	role="menu"
 	{...attributes}
+	{@attach attachScrollableParent}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
@@ -125,24 +130,26 @@
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
 		inset: auto;
+		position: fixed;
+		bottom: anchor(bottom);
 		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-animate[popover] {
-		transition:
-			opacity 0.2s ease,
-			display 0.2s allow-discrete,
-			overlay 0.2s allow-discrete;
-		opacity: 0;
-	}
 	.np-animate[popover]:popover-open {
 		opacity: 1;
-		@starting-style {
+		animation: fadeIn 0.2s linear;
+	}
+
+	@keyframes fadeIn {
+		from {
 			opacity: 0;
 		}
+		to {
+			opacity: 1;
+		}
 	}
 
 	.np-menu {

package/dist/tooltip/Tooltip.svelte

@@ -1,82 +1,97 @@
 <script lang="ts">
-	import { MediaQuery } from 'svelte/reactivity'
-	import type { TooltipProps } from './types.ts'
 	import { onMount } from 'svelte'
+	import type { TooltipProps } from './types.ts'
+	import { MediaQuery } from 'svelte/reactivity'
 
 	let {
 		children,
+		open = $bindable(),
 		element = $bindable(),
 		id,
-		keepTooltipOnClick = false,
 		...attributes
 	}: TooltipProps = $props()
+	let clientWidth = $state(0)
+	let clientHeight = $state(0)
+	let innerHeight = $state(0)
+	let anchor: HTMLElement | undefined = $state()
+	const uid = $props.id()
 
-	const anchorNameFallback = $props.id()
-
-	let touch = new MediaQuery('(pointer: coarse) and (hover: none)', false)
-	let anchor = $state<HTMLElement>()
+	let isTouch = new MediaQuery('(hover: none) and (pointer: coarse)', false)
 
-	const isTouch = (event: PointerEvent) => {
-		return event.pointerType === 'touch'
+	const refreshValues = () => {
+		if (element && anchor && open && !('positionArea' 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 onPointerenter = (event: PointerEvent) => {
-		if (!isTouch(event)) {
-			element?.showPopover()
+	$effect(refreshValues)
+	let attachAnchor = (el: HTMLDivElement) => {
+		anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
+		if (!anchor) return
+		if ('anchorName' in document.documentElement.style) {
+			const anchorName = anchor.style.getPropertyValue('anchor-name')
+			const generatedId = anchorName || `--${uid}`
+			el.style.setProperty('position-anchor', generatedId)
+			if (!anchorName) {
+				anchor.style.setProperty('anchor-name', generatedId)
+			}
 		}
+		anchor.addEventListener('pointerenter', showPopover)
+		anchor.addEventListener('pointerleave', hidePopover)
+		anchor.addEventListener('focus', showPopover)
+		anchor.addEventListener('blur', hidePopover)
 	}
 
-	const onPointerleave = (event: PointerEvent) => {
-		if (!isTouch(event)) {
-			element?.hidePopover()
-		}
+	const showPopover = () => {
+		element?.showPopover()
 	}
 
-	const onPointerup = (event: PointerEvent) => {
-		if (!isTouch(event)) {
-			element?.hidePopover()
-		}
+	const hidePopover = () => {
+		element?.hidePopover()
 	}
+
 	onMount(() => {
 		return () => {
 			if (anchor) {
-				anchor.style.removeProperty('anchor-name')
-				anchor.removeEventListener('pointerenter', onPointerenter)
-				anchor.removeEventListener('pointerleave', onPointerleave)
-				anchor.removeEventListener('pointerup', onPointerup)
+				anchor.removeEventListener('pointerenter', showPopover)
+				anchor.removeEventListener('pointerleave', hidePopover)
+				anchor.removeEventListener('focus', showPopover)
+				anchor.removeEventListener('blur', hidePopover)
 			}
 		}
 	})
 </script>
 
-{#if !touch.current}
+<svelte:window bind:innerHeight />
+
+{#if !isTouch.current}
 	<div
 		{...attributes}
-		{@attach (element) => {
-			if (id && 'positionArea' in document.documentElement.style) {
-				anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
-
-				if ('anchorName' in document.documentElement.style) {
-					const anchorName = anchor.style.getPropertyValue('anchor-name')
-					const generatedId = anchorName || `--${anchorNameFallback}`
-					element.style.setProperty('position-anchor', generatedId)
-					if (!anchorName) {
-						anchor.style.setProperty('anchor-name', generatedId)
-					}
-				}
-				anchor.addEventListener('pointerenter', onPointerenter)
-				anchor.addEventListener('pointerleave', onPointerleave)
-				if (!keepTooltipOnClick) {
-					anchor.addEventListener('pointerup', onPointerup)
-				}
-			}
-		}}
 		{id}
+		{@attach attachAnchor}
 		class={['np-tooltip', attributes.class]}
 		role="tooltip"
-		aria-live="polite"
 		popover="manual"
 		bind:this={element}
+		bind:clientWidth
+		bind:clientHeight
+		ontoggle={(event) => {
+			let { newState } = event
+			open = newState === 'open'
+		}}
 	>
 		{#if children}{@render children()}{/if}
 	</div>

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TooltipProps } from './types.ts';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "element">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "element" | "open">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
-    keepTooltipOnClick?: boolean;
     element?: HTMLDivElement;
+    open?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.24.16",
+  "version": "0.24.17",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -54,26 +54,26 @@
     "svelte": "^5.32.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.55.0",
     "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/kit": "^2.37.1",
     "@sveltejs/package": "^2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.4",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.1",
+    "eslint-plugin-svelte": "^3.12.2",
     "globals": "^16.3.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.38.6",
+    "svelte": "^5.38.7",
     "svelte-check": "^4.3.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^7.1.4",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^7.1.5",
     "vitest": "^3.2.4"
   },
   "svelte": "./dist/index.js",