noph-ui 0.46.1 → 0.47.0

package/dist/progress/CircularProgress.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { MediaQuery } from 'svelte/reactivity'
+	import { reducedMotion } from '../media.js'
+	import type { Attachment } from 'svelte/attachments'
 	import type { CircularProgressProps } from './types.js'
 
 	let {
@@ -44,15 +45,13 @@
 		return d + 'Z'
 	}
 
-	let waveEl = $state<SVGPathElement>()
 	const wavePath = buildWavePath(0, DEFAULT_STROKE_PERCENT)
 
-	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
 	let wave = $derived(wavy && !reducedMotion.current)
 
-	$effect(() => {
-		if (!wave || !waveEl) return
-		const path = waveEl
+	// Attached to the path itself, so the loop starts and stops with the node the two branches render
+	// rather than racing a shared `bind:this` when the determinate branch swaps.
+	const animateWave: Attachment<SVGPathElement> = (path) => {
 		const strokePercent =
 			parseFloat(
 				getComputedStyle(path).getPropertyValue('--np-circular-progress-active-indicator-width'),
@@ -64,7 +63,7 @@
 		}
 		raf = requestAnimationFrame(frame)
 		return () => cancelAnimationFrame(raf)
-	})
+	}
 
 	const clamp = (n: number) => Math.min(100, Math.max(0, n))
 	let activeLength = $derived(clamp((value / max) * 100))
@@ -93,7 +92,7 @@
 				{/if}
 				{#if wave}
 					<path
-						bind:this={waveEl}
+						{@attach animateWave}
 						class="active-track spinner-arc wave"
 						d={wavePath}
 						pathLength="100"
@@ -108,7 +107,8 @@
 					<circle class="track" pathLength="100"></circle>
 				{/if}
 				{#if wave}
-					<path bind:this={waveEl} class="active-track wave" d={wavePath} pathLength="100"></path>
+					<path {@attach animateWave} class="active-track wave" d={wavePath} pathLength="100"
+					></path>
 				{:else}
 					<circle class="active-track" pathLength="100"></circle>
 				{/if}

package/dist/progress/LinearProgress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MediaQuery } from 'svelte/reactivity'
+	import { reducedMotion } from '../media.js'
 	import type { LinearProgressProps } from './types.js'
 
 	let {
@@ -21,7 +21,6 @@
 	const DETERMINATE_WAVELENGTH = 40
 	const INDETERMINATE_WAVELENGTH = 20
 
-	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
 	let wave = $derived(wavy && !reducedMotion.current)
 
 	let wavelength = $derived(indeterminate ? INDETERMINATE_WAVELENGTH : DETERMINATE_WAVELENGTH)

package/dist/ripple/Ripple.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { forcedColors, reducedMotion } from '../media.js'
+	import type { Attachment } from 'svelte/attachments'
 	import { on } from 'svelte/events'
-	import { MediaQuery } from 'svelte/reactivity'
 	import type { RippleProps } from './types.js'
 
 	let {
@@ -23,8 +24,6 @@
 	const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)'
 	const TOUCH_DELAY_MS = 150
 
-	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
-
 	let rippleSize = $state('')
 	let rippleScale = $state('')
 	let initialSize = $state(0)
@@ -280,14 +279,13 @@
 		}
 	}
 
-	$effect(() => {
-		const forcedColors = window?.matchMedia('(forced-colors: active)')
-		if (forcedColors.matches) return
-		const target = forElement ?? element?.parentElement
+	const listen: Attachment<HTMLElement> = (node) => {
+		if (forcedColors.current) return
+		const target = forElement ?? node.parentElement
 		if (target) {
 			return addEvents(target)
 		}
-	})
+	}
 </script>
 
 <div
@@ -300,6 +298,7 @@
 		attributes.class,
 	]}
 	bind:this={element}
+	{@attach listen}
 ></div>
 
 <style>

package/dist/select/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onFormReset } from '../form-reset.js'
+	import { formReset } from '../form-reset.js'
 	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import Item from '../list/Item.svelte'
 	import Menu from '../menu/Menu.svelte'
@@ -63,15 +63,12 @@
 	let menuElement = $state<HTMLDivElement>()
 	let anchorElement = $state<HTMLDivElement>()
 
-	$effect(() =>
-		onFormReset(selectElement, () => {
-			queueMicrotask(() => {
-				value = multiple
-					? options.filter((option) => option.selected).map((option) => option.value)
-					: options.find((option) => option.selected)?.value
-			})
-		}),
-	)
+	const restoreDefault = () =>
+		queueMicrotask(() => {
+			value = multiple
+				? options.filter((option) => option.selected).map((option) => option.value)
+				: options.find((option) => option.selected)?.value
+		})
 
 	let field = $state<HTMLDivElement>()
 	let menuOpen = $state(false)
@@ -421,6 +418,7 @@
 								{oninput}
 								bind:value
 								bind:this={selectElement}
+								{@attach formReset(restoreDefault)}
 							>
 								{#each selectedOption as option, index (index)}
 									<option class="np-option" value={option.value} selected={option.selected}
@@ -440,6 +438,7 @@
 								{oninput}
 								bind:value
 								bind:this={selectElement}
+								{@attach formReset(restoreDefault)}
 							>
 								{#each selectedOption as option, index (index)}
 									<option value={option.value} selected={option.selected}>{option.label}</option>

package/dist/select/VirtualList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-	import { onMount, tick, type Snippet } from 'svelte'
+	import { tick, type Snippet } from 'svelte'
+	import type { Attachment } from 'svelte/attachments'
 	import type { HTMLAttributes } from 'svelte/elements'
 
 	interface VirtualListProps extends HTMLAttributes<HTMLDivElement> {
@@ -28,16 +29,19 @@
 
 	let rows: HTMLCollectionOf<HTMLElement> | undefined = $state()
 	let viewport: HTMLElement | undefined = $state()
-	let contents: HTMLDivElement | undefined = $state()
 	let viewport_height: number = $state(0)
-	let mounted = $state()
 
 	let top = $state(0)
 	let bottom = $state(0)
-	let average_height: number = $derived(itemHeight || 0)
+	let measured_height = $state(0)
+	let average_height: number = $derived(itemHeight || measured_height)
+
+	const collectRows: Attachment<HTMLDivElement> = (node) => {
+		rows = node.children as HTMLCollectionOf<HTMLElement>
+	}
 
 	$effect(() => {
-		if (mounted) {
+		if (rows) {
 			refresh(items, viewport_height, itemHeight)
 		}
 	})
@@ -77,7 +81,7 @@
 		end = i
 
 		const remaining = items.length - end
-		average_height = end ? (top + content_height) / end : average_height || itemHeight || 0
+		measured_height = end ? (top + content_height) / end : average_height || itemHeight || 0
 
 		bottom = remaining * average_height
 		height_map.length = items.length
@@ -134,7 +138,7 @@
 		end = i
 
 		const remaining = items.length - end
-		average_height = end ? y / end : average_height || itemHeight || 0
+		measured_height = end ? y / end : average_height || itemHeight || 0
 
 		height_map.fill(average_height, i, items.length)
 		bottom = remaining * average_height
@@ -158,11 +162,6 @@
 		await tick()
 		rendered?.({ start, end })
 	}
-
-	onMount(() => {
-		rows = contents?.children as HTMLCollectionOf<HTMLElement>
-		mounted = true
-	})
 </script>
 
 <svelte-virtual-list-viewport
@@ -172,7 +171,7 @@
 	tabindex="-1"
 	style="height: {height};"
 >
-	<div bind:this={contents} style="padding-top: {top}px; padding-bottom: {bottom}px;">
+	<div {@attach collectRows} style="padding-top: {top}px; padding-bottom: {bottom}px;">
 		{#each visible as entry (entry.index)}
 			{@render row(entry.data, entry.index)}
 		{/each}

package/dist/slider/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Attachment } from 'svelte/attachments'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { SliderProps } from './types.js'
 
@@ -107,7 +108,6 @@
 	let dragging = $state<'start' | 'end' | null>(null)
 	let tracking = $state(false)
 	let trackElement = $state<HTMLDivElement>()
-	let activeLaneElement = $state<HTMLDivElement>()
 	let iconElement = $state<HTMLSpanElement>()
 	let iconFits = $state(true)
 	let pointerFocused = $state(false)
@@ -133,9 +133,8 @@
 	bindLabel(() => startLabelElement, 'start')
 	bindLabel(() => endLabelElement, 'end')
 
-	$effect(() => {
-		if (!icon || !activeLaneElement) return
-		const lane = activeLaneElement
+	const fitIcon: Attachment<HTMLDivElement> = (lane) => {
+		if (!icon) return
 		const inlineOf = (r: DOMRect) => (orientation === 'vertical' ? r.height : r.width)
 		const measure = () => {
 			if (!iconElement) return
@@ -148,7 +147,7 @@
 		observer.observe(lane)
 		measure()
 		return () => observer.disconnect()
-	})
+	}
 
 	const fractionFromEvent = (e: PointerEvent) => {
 		if (!trackElement) return 0
@@ -279,7 +278,7 @@
 				<span class="np-slider-stop np-slider-stop-start"></span>
 			</div>
 		{/if}
-		<div class="np-slider-lane np-slider-active" bind:this={activeLaneElement}>
+		<div class="np-slider-lane np-slider-active" {@attach fitIcon}>
 			{#if icon && iconFits}
 				<span class="np-slider-icon" bind:this={iconElement}>{@render icon()}</span>
 			{/if}

package/dist/tabs/Tabs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte'
 	import Divider from '../divider/Divider.svelte'
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { setTabsContext } from './context.js'
@@ -13,19 +12,27 @@
 		...attributes
 	}: TabsProps = $props()
 
-	let tabsContext = $state<TabsContext>({
-		value,
-		indicatorValue: value,
-		variant: untrack(() => variant),
-	})
-	$effect(() => {
-		value = tabsContext.value
-	})
-
-	$effect(() => {
-		tabsContext.value = value
-		tabsContext.variant = variant
-	})
+	let indicatorValue = $state(value)
+	const tabsContext: TabsContext = {
+		get value() {
+			return value
+		},
+		set value(next) {
+			value = next
+		},
+		get indicatorValue() {
+			return indicatorValue
+		},
+		set indicatorValue(next) {
+			indicatorValue = next
+		},
+		get variant() {
+			return variant
+		},
+		set variant(next) {
+			variant = next
+		},
+	}
 	setTabsContext(tabsContext)
 
 	const secondaryStyle = $derived(