noph-ui 0.24.14 → 0.24.16

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/IconButton.svelte

@@ -34,7 +34,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}
@@ -365,7 +365,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/menu/Menu.svelte

@@ -6,6 +6,8 @@
 		element = $bindable(),
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
+		open = $bindable(),
+		quick = false,
 		style,
 		popover = 'auto',
 		anchor,
@@ -15,7 +17,6 @@
 	let clientWidth = $state(0)
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
-	let menuOpen = $state(false)
 
 	showPopover = () => {
 		element?.showPopover()
@@ -25,7 +26,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) {
@@ -102,11 +103,11 @@
 	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 +116,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 +125,35 @@
 		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;
 		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] {
+		transition:
+			opacity 0.2s ease,
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete;
+		opacity: 0;
+	}
+	.np-animate[popover]:popover-open {
 		opacity: 1;
-		display: flex;
 		@starting-style {
 			opacity: 0;
 		}
 	}
+
+	.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/text-field/TextField.svelte

@@ -441,7 +441,7 @@
 
 	.input-wrapper {
 		display: flex;
-		flex-wrap: wrap;
+		flex-wrap: wrap-reverse;
 		align-items: baseline;
 		min-width: 0;
 		flex-direction: row-reverse;

package/dist/tooltip/Tooltip.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity'
 	import type { TooltipProps } from './types.ts'
+	import { onMount } from 'svelte'
 
 	let {
 		children,
@@ -8,34 +10,11 @@
 		keepTooltipOnClick = false,
 		...attributes
 	}: TooltipProps = $props()
-	let clientWidth = $state(0)
-	let clientHeight = $state(0)
-	let innerHeight = $state(0)
-	let anchor: HTMLElement | undefined = $state()
 
-	const refreshValues = () => {
-		if (element && anchor && !('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`
-			}
-		}
-	}
-	$effect(refreshValues)
-	let setAnchor = (document: Document) => {
-		anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
-	}
+	const anchorNameFallback = $props.id()
+
+	let touch = new MediaQuery('(pointer: coarse) and (hover: none)', false)
+	let anchor = $state<HTMLElement>()
 
 	const isTouch = (event: PointerEvent) => {
 		return event.pointerType === 'touch'
@@ -58,25 +37,10 @@
 			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.style.removeProperty('anchor-name')
 				anchor.removeEventListener('pointerenter', onPointerenter)
 				anchor.removeEventListener('pointerleave', onPointerleave)
 				anchor.removeEventListener('pointerup', onPointerup)
@@ -85,21 +49,38 @@
 	})
 </script>
 
-<svelte:document use:setAnchor />
-<svelte:window bind:innerHeight />
+{#if !touch.current}
+	<div
+		{...attributes}
+		{@attach (element) => {
+			if (id && 'positionArea' in document.documentElement.style) {
+				anchor = (document.querySelector(`[aria-describedby="${id}"]`) as HTMLElement) ?? undefined
 
-<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 ('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}
+		class={['np-tooltip', attributes.class]}
+		role="tooltip"
+		aria-live="polite"
+		popover="manual"
+		bind:this={element}
+	>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}
 
 <style>
 	.np-tooltip[popover] {

package/package.json

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