noph-ui 0.24.15 → 0.24.17

package/dist/autocomplete/AutoComplete.svelte

@@ -212,15 +212,14 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
+	bind:open={menuOpen}
 	ontoggle={(e) => {
 		if (e.newState === 'closed') {
-			menuOpen = false
 			activeIndex = NO_INDEX
 			if (!populated && finalPopulated && !value) {
 				finalPopulated = false
 			}
 		} else {
-			menuOpen = true
 			if (activeIndex >= displayOptions.length) {
 				activeIndex = NO_INDEX
 			}

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',
@@ -34,7 +33,7 @@
 		<span class="np-touch" bind:this={touchEl}></span>
 	{/if}
 	{#if loading}
-		<div class="circular-progress">
+		<div class="np-icon-button-circular-progress">
 			<CircularProgress aria-label={loadingAriaLabel} indeterminate />
 		</div>
 	{/if}
@@ -100,7 +99,7 @@
 {/if}
 
 {#if title && !disabled && !loading}
-	<Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
+	<Tooltip id={uid}>{title}</Tooltip>
 {/if}
 
 <style>
@@ -365,7 +364,7 @@
 		width: max(calc(var(--_button-width, 40px) + 8px), 100%);
 	}
 
-	.circular-progress {
+	.np-icon-button-circular-progress {
 		--np-circular-progress-color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 		position: absolute;
 	}

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 {
@@ -6,6 +7,8 @@
 		element = $bindable(),
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
+		open = $bindable(),
+		quick = false,
 		style,
 		popover = 'auto',
 		anchor,
@@ -15,7 +18,6 @@
 	let clientWidth = $state(0)
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
-	let menuOpen = $state(false)
 
 	showPopover = () => {
 		element?.showPopover()
@@ -25,7 +27,7 @@
 		element?.hidePopover()
 	}
 	const refreshValues = () => {
-		if (element && anchor && menuOpen) {
+		if (element && anchor && open) {
 			const anchorRect = anchor.getBoundingClientRect()
 			let maxHeight: number
 			if (innerHeight - anchorRect.bottom > anchorRect.top) {
@@ -81,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)
@@ -97,16 +102,17 @@
 <div
 	role="menu"
 	{...attributes}
+	{@attach attachScrollableParent}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
 	ontoggle={(event) => {
 		let { newState } = event
-		menuOpen = newState === 'open'
+		open = newState === 'open'
 		attributes.ontoggle?.(event)
 	}}
 	{popover}
-	class={['np-menu-container', attributes.class]}
+	class={['np-menu-container', !quick && 'np-animate', attributes.class]}
 	{style}
 >
 	<div class="np-menu">
@@ -115,18 +121,7 @@
 </div>
 
 <style>
-	.np-menu {
-		overflow-y: auto;
-		overflow-x: hidden;
-		flex: 1;
-		padding: 0.5rem 0;
-		scrollbar-color: var(--np-color-on-surface-variant) transparent;
-		scrollbar-width: thin;
-	}
-	:global(.np-menu .np-divider) {
-		margin-block: 0.5rem;
-	}
-	.np-menu-container[popover] {
+	.np-menu-container {
 		color: var(--np-menu-text-color, var(--np-color-on-surface));
 		background-color: var(--np-menu-container-color, var(--np-color-surface-container));
 		border: none;
@@ -135,21 +130,37 @@
 		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;
+		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-menu-container:popover-open {
+	.np-animate[popover]:popover-open {
 		opacity: 1;
-		display: flex;
-		@starting-style {
+		animation: fadeIn 0.2s linear;
+	}
+
+	@keyframes fadeIn {
+		from {
 			opacity: 0;
 		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	.np-menu {
+		overflow-y: auto;
+		overflow-x: hidden;
+		flex: 1;
+		padding: 0.5rem 0;
+		scrollbar-color: var(--np-color-on-surface-variant) transparent;
+		scrollbar-width: thin;
+	}
+	:global(.np-menu .np-divider) {
+		margin-block: 0.5rem;
 	}
 </style>

package/dist/menu/Menu.svelte.d.ts

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

package/dist/menu/types.d.ts

@@ -6,6 +6,8 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     showPopover?: () => void;
     hidePopover?: () => void;
     element?: HTMLDivElement;
+    quick?: boolean;
+    open?: boolean;
 }
 interface ButtonProps extends HTMLButtonAttributes {
     selected?: boolean;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -31,6 +31,7 @@
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
+		aria-current={selected ? 'page' : undefined}
 	>
 		{@render content()}
 	</a>
@@ -42,6 +43,8 @@
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
+		type="button"
+		aria-pressed={selected ? 'true' : undefined}
 	>
 		{@render content()}
 	</button>

package/dist/select/Select.svelte

@@ -577,9 +577,9 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={anchorElement}
+	bind:open={menuOpen}
 	ontoggle={async ({ newState }) => {
 		if (newState === 'open') {
-			menuOpen = true
 			let idx = -1
 			if (multiple) {
 				if (Array.isArray(value) && value.length) {
@@ -594,7 +594,6 @@
 			if (idx < 0) idx = 0
 			focusIndex = idx
 		} else {
-			menuOpen = false
 			focusIndex = -1
 		}
 	}}

package/dist/tooltip/Tooltip.svelte

@@ -1,20 +1,25 @@
 <script lang="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()
+
+	let isTouch = new MediaQuery('(hover: none) and (pointer: coarse)', false)
 
 	const refreshValues = () => {
-		if (element && anchor && !('positionArea' in document.documentElement.style)) {
+		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) {
@@ -33,73 +38,64 @@
 		}
 	}
 	$effect(refreshValues)
-	let setAnchor = (document: Document) => {
+	let attachAnchor = (el: HTMLDivElement) => {
 		anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
-	}
-
-	const isTouch = (event: PointerEvent) => {
-		return event.pointerType === 'touch'
-	}
-
-	const onPointerenter = (event: PointerEvent) => {
-		if (!isTouch(event)) {
-			element?.showPopover()
+		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()
 	}
 
-	$effect(() => {
-		if (anchor && element) {
-			if ('anchorName' in document.documentElement.style) {
-				const anchorName = anchor.style.getPropertyValue('anchor-name')
-				const generatedId = anchorName || `--${crypto.randomUUID()}`
-				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)
-			}
-		}
+	onMount(() => {
 		return () => {
 			if (anchor) {
-				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>
 
-<svelte:document use:setAnchor />
 <svelte:window bind:innerHeight />
 
-<div
-	{...attributes}
-	{id}
-	class={['np-tooltip', attributes.class]}
-	role="tooltip"
-	popover="manual"
-	bind:this={element}
-	bind:clientWidth
-	bind:clientHeight
->
-	{#if children}{@render children()}{/if}
-</div>
+{#if !isTouch.current}
+	<div
+		{...attributes}
+		{id}
+		{@attach attachAnchor}
+		class={['np-tooltip', attributes.class]}
+		role="tooltip"
+		popover="manual"
+		bind:this={element}
+		bind:clientWidth
+		bind:clientHeight
+		ontoggle={(event) => {
+			let { newState } = event
+			open = newState === 'open'
+		}}
+	>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}
 
 <style>
 	.np-tooltip[popover] {

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.15",
+  "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",