noph-ui 0.35.0 → 0.36.1

package/README.md

@@ -52,30 +52,30 @@ body {
 
 ## Roadmap
 
-Beta (No breaking changes expected)
+Beta
 
+- Auto complete
+- Badges
 - Buttons
 - Cards
 - Checkbox
+- Chips
+- Dialogs
 - Divider
 - Icon buttons
-- Lists (Docs missing)
+- Lists
+- Loading indicator
+- Menus
+- Navigation Drawer
+- Navigation Rail
 - Progress indicators
 - Radio
 - Ripple
 - Segmented buttons
 - Select
+- Slider
 - Snackbar
 - Switch
-- Text fields
 - Tabs
-
-In progress (Breaking changes expected)
-
-- Auto complete
-- Chips (Docs missing)
-- Dialogs (Fullscreen + Docs missing)
-- Menus (Positioning missing + Docs missing)
-- Navigation Drawer (Docs missing)
-- Navigation Rail (Badge is missing + Docs missing)
-- Tooltips (Positioning missing)
+- Text fields
+- Tooltips

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './chip/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
+export * from './loading-indicator/index.js';
 export * from './menu/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './chip/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
+export * from './loading-indicator/index.js';
 export * from './menu/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';

package/dist/loading-indicator/LoadingIndicator.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import {
+		DETERMINATE_SCALE,
+		DETERMINATE_SHAPES,
+		INDETERMINATE_SCALE,
+		INDETERMINATE_SHAPES,
+		VIEWBOX,
+		outlinePath,
+	} from './shapes.ts'
+	import type { LoadingIndicatorProps } from './types.ts'
+
+	let {
+		value = 0,
+		max = 1,
+		indeterminate = false,
+		contained = false,
+		...attributes
+	}: LoadingIndicatorProps = $props()
+
+	const MORPH_DURATION = 650
+	const ROTATION_DURATION = 4666
+	const QUARTER_TURN = 90
+	const CENTER = VIEWBOX / 2
+	const DAMPING_RATIO = 0.6
+	const NATURAL_FREQUENCY = Math.sqrt(200)
+	const DAMPED_FREQUENCY = NATURAL_FREQUENCY * Math.sqrt(1 - DAMPING_RATIO * DAMPING_RATIO)
+	const springValue = (seconds: number) =>
+		1 -
+		Math.exp(-DAMPING_RATIO * NATURAL_FREQUENCY * seconds) *
+			(Math.cos(DAMPED_FREQUENCY * seconds) +
+				((DAMPING_RATIO * NATURAL_FREQUENCY) / DAMPED_FREQUENCY) *
+					Math.sin(DAMPED_FREQUENCY * seconds))
+
+	const clamp = (n: number) => (n > 0 ? Math.min(n, 1) : 0)
+	const rotate = (degrees: number) => `rotate(${(degrees % 360).toFixed(2)} ${CENTER} ${CENTER})`
+
+	const initialPath = outlinePath(
+		INDETERMINATE_SHAPES[0],
+		INDETERMINATE_SHAPES[1],
+		0,
+		INDETERMINATE_SCALE,
+	)
+
+	let progress = $derived(clamp(value / max))
+	let determinatePath = $derived(
+		outlinePath(DETERMINATE_SHAPES[0], DETERMINATE_SHAPES[1], progress, DETERMINATE_SCALE),
+	)
+
+	let indicator = $state<SVGPathElement>()
+
+	$effect(() => {
+		if (!indicator) return
+		const path = indicator
+		const start = performance.now()
+		let raf = 0
+		const frame = (now: number) => {
+			raf = requestAnimationFrame(frame)
+			const elapsed = Math.max(0, now - start)
+			const index = Math.floor(elapsed / MORPH_DURATION)
+			const morph = springValue((elapsed % MORPH_DURATION) / 1000)
+			path.setAttribute(
+				'd',
+				outlinePath(
+					INDETERMINATE_SHAPES[index % INDETERMINATE_SHAPES.length],
+					INDETERMINATE_SHAPES[(index + 1) % INDETERMINATE_SHAPES.length],
+					clamp(morph),
+					INDETERMINATE_SCALE,
+				),
+			)
+			path.setAttribute(
+				'transform',
+				rotate((elapsed / ROTATION_DURATION) * 360 + (index + morph) * QUARTER_TURN),
+			)
+		}
+		raf = requestAnimationFrame(frame)
+		return () => cancelAnimationFrame(raf)
+	})
+</script>
+
+<div
+	{...attributes}
+	class={['np-loading-indicator', contained && 'contained']}
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax={max}
+	aria-valuenow={indeterminate ? undefined : value}
+>
+	<svg viewBox="0 0 {VIEWBOX} {VIEWBOX}" aria-hidden="true">
+		{#if indeterminate}
+			<path bind:this={indicator} class="indicator" d={initialPath}></path>
+		{:else}
+			<path class="indicator" d={determinatePath} transform={rotate(-progress * 180)}></path>
+		{/if}
+	</svg>
+</div>
+
+<style>
+	.np-loading-indicator {
+		all: unset;
+		--_color: var(--np-color-primary);
+		display: inline-flex;
+		vertical-align: middle;
+		align-items: center;
+		justify-content: center;
+		inline-size: var(--np-loading-indicator-size, 3rem);
+		block-size: var(--np-loading-indicator-size, 3rem);
+		border-radius: var(--np-shape-corner-full);
+		contain: strict;
+		content-visibility: auto;
+	}
+
+	.contained {
+		--_color: var(--np-color-on-primary-container);
+		background-color: var(
+			--np-loading-indicator-container-color,
+			var(--np-color-primary-container)
+		);
+	}
+
+	svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	.indicator {
+		fill: var(--np-loading-indicator-color, var(--_color));
+	}
+
+	@media (forced-colors: active) {
+		.indicator {
+			fill: CanvasText;
+		}
+	}
+</style>

package/dist/loading-indicator/LoadingIndicator.svelte.d.ts

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

package/dist/loading-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';

package/dist/loading-indicator/index.js

@@ -0,0 +1 @@
+export { default as LoadingIndicator } from './LoadingIndicator.svelte';

package/dist/loading-indicator/shapes.d.ts

@@ -0,0 +1,6 @@
+export declare const INDETERMINATE_SHAPES: number[][];
+export declare const DETERMINATE_SHAPES: number[][];
+export declare const INDETERMINATE_SCALE = 0.6853;
+export declare const DETERMINATE_SCALE = 0.7917;
+export declare const VIEWBOX = 48;
+export declare const outlinePath: (from: number[], to: number[], progress: number, scale: number) => string;

package/dist/loading-indicator/shapes.js

@@ -0,0 +1,49 @@
+const SAMPLE_COUNT = 128;
+const decode = (encoded) => {
+    const radii = [];
+    for (let i = 0; i < SAMPLE_COUNT; i++) {
+        radii.push(parseInt(encoded.slice(i * 3, i * 3 + 3), 36) / 10000);
+    }
+    return radii;
+};
+export const INDETERMINATE_SHAPES = [
+    // MaterialShapes.SoftBurst
+    '2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q',
+    // MaterialShapes.Cookie9Sided
+    '3ne3kp3hr3g53fr3gl3iq3m33ot3qq3rw3sa3rz3qx3p33mg3jc3hi3gz3hn3jn3my3pp3rn3st3t73sv3rs3pw3n73jz3i23hg3i23jz3n73pw3rs3sv3t73st3rn3pp3my3jn3hn3gz3hi3jc3mg3p33qx3rz3sa3rw3qq3ot3m33iq3gl3fr3g53hr3kp3ne3pb3qg3qw3qm3pm3nv3lc3i13fk3eg3ei3fr3ie3lc3nh3ov3pk3pk3ou3ne3l83i93fb3dr3df3e83gb3jh3lz3nr3os3p53os3nr3lz3jh3gb3e83df3dr3fb3i93l83ne3ou3pk3pk3ov3nh3lc3ie3fr3ei3eg3fk3i13lc3nv3pm3qm3qw3qg3pb',
+    // MaterialShapes.Pentagon
+    '3ng3lh3jw3im3ho3h23gq3gq3h03hl3ih3jp3l93n63ph3s73vc3y23zz41241e40z3zr3xr3uz3se3q73od3mx3lt3l13kk3kf3kk3l13lt3mx3od3q73se3uz3xr3zr40z41e4123zz3y23vc3s73ph3n63l93jp3ih3hl3h03gq3gq3h23ho3im3jw3lh3ng3pp3rf3se3sp3sb3r93pg3mx3jm3gc3dh3b138z37935u34r33x33e33533533f33y34s35w37b3913b43df3f93gk3hb3hl3hb3gk3f93df3b439137b35w34s33y33f33533533e33x34r35u37938z3b13dh3gc3jm3mx3pg3r93sb3sp3se3rf3pp',
+    // MaterialShapes.Pill
+    '3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua',
+    // MaterialShapes.Sunny
+    '3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa',
+    // MaterialShapes.Cookie4Sided
+    '2yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z4',
+    // MaterialShapes.Oval
+    '3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx',
+].map(decode);
+export const DETERMINATE_SHAPES = [
+    // MaterialShapes.Circle
+    '3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so',
+    // MaterialShapes.SoftBurst
+    '2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q',
+].map(decode);
+export const INDETERMINATE_SCALE = 0.6853;
+export const DETERMINATE_SCALE = 0.7917;
+export const VIEWBOX = 48;
+const CENTER = VIEWBOX / 2;
+const COS = Array.from({ length: SAMPLE_COUNT }, (_, i) => Math.cos((2 * Math.PI * i) / SAMPLE_COUNT));
+const SIN = Array.from({ length: SAMPLE_COUNT }, (_, i) => Math.sin((2 * Math.PI * i) / SAMPLE_COUNT));
+export const outlinePath = (from, to, progress, scale) => {
+    const size = VIEWBOX * scale;
+    let d = '';
+    for (let i = 0; i < SAMPLE_COUNT; i++) {
+        const radius = (from[i] + (to[i] - from[i]) * progress) * size;
+        d +=
+            (i === 0 ? 'M' : 'L') +
+                (CENTER + radius * COS[i]).toFixed(2) +
+                ',' +
+                (CENTER + radius * SIN[i]).toFixed(2);
+    }
+    return d + 'Z';
+};

package/dist/loading-indicator/types.d.ts

@@ -0,0 +1,7 @@
+export interface LoadingIndicatorProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    contained?: boolean;
+    'aria-label'?: string | undefined | null;
+}

package/dist/loading-indicator/types.js

@@ -0,0 +1 @@
+export {};

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -86,7 +86,7 @@
 		transition-property: transform, opacity;
 		transition-timing-function: linear;
 		background-color: var(--np-color-secondary-container);
-		border-radius: var(--np-shape-corner-full);
+		border-radius: var(--np-navigation-drawer-item-container-shape, var(--np-shape-corner-full));
 		z-index: -1;
 	}
 

package/dist/progress/LinearProgress.svelte

@@ -22,9 +22,8 @@
 	let wave = $derived(wavy && !reducedMotion.current)
 
 	let wavelength = $derived(indeterminate ? INDETERMINATE_WAVELENGTH : DETERMINATE_WAVELENGTH)
-	let amplitude = $derived(
-		!wave ? 0 : indeterminate || (value / max > 0.1 && value / max < 0.95) ? 1 : 0,
-	)
+	const amplitudeFor = (fraction: number) =>
+		!wave ? 0 : indeterminate || (fraction > 0.1 && fraction < 0.95) ? 1 : 0
 
 	const cubicBezier = (x1: number, y1: number, x2: number, y2: number) => {
 		const A = (a: number, b: number) => 1 - 3 * b + 3 * a
@@ -112,6 +111,10 @@
 		const len = wavelength
 		const width = containerWidth
 		const host = wavePathA?.closest('.progress') as HTMLElement | null
+		// Live declaration: --np-lp-percent is a registered custom property that carries
+		// the same transition as the track, so reading it each frame gives the wave the
+		// eased position instead of jumping straight to the new value.
+		const hostStyles = host && getComputedStyle(host)
 		let raf = 0
 		let last = 0
 		const frame = (now: number) => {
@@ -119,7 +122,12 @@
 			const dt = last ? Math.min(64, now - last) : 16
 			last = now
 			const phase = ((now / 1000) % 1) * len
-			renderedAmplitude += (amplitude - renderedAmplitude) * Math.min(1, dt / 500)
+			const eased =
+				hostStyles && !indeterminate
+					? parseFloat(hostStyles.getPropertyValue('--np-lp-percent'))
+					: percent
+			const shown = Number.isFinite(eased) ? eased : percent
+			renderedAmplitude += (amplitudeFor(shown / 100) - renderedAmplitude) * Math.min(1, dt / 500)
 			const wave = buildWave(width, len, renderedAmplitude, phase)
 			if (indeterminate) {
 				const t = now % CYCLE
@@ -131,7 +139,7 @@
 				trim(wavePathA, wave, t1 * width, h1 * width)
 				trim(wavePathB, wave, t2 * width, h2 * width)
 			} else {
-				trim(wavePathA, wave, 0, (percent / 100) * width)
+				trim(wavePathA, wave, 0, (shown / 100) * width)
 			}
 		}
 		raf = requestAnimationFrame(frame)
@@ -148,7 +156,7 @@
 	let gapOn = $derived(percent > 0 ? 1 : 0)
 
 	let trackStyles = $derived(
-		`--_percent:${percent}%;--_buffer-percent:${bufferPercent}%;--_gap-on:${gapOn}`,
+		`--_percent:${percent}%;--np-lp-percent:${percent}%;--_buffer-percent:${bufferPercent}%;--_gap-on:${gapOn}`,
 	)
 
 	let hideDots = $derived(indeterminate || !hasBuffer || bufferValue >= max || value >= max)
@@ -328,6 +336,18 @@
 		inherits: true;
 		initial-value: 0%;
 	}
+	@property --np-lp-percent {
+		syntax: '<percentage>';
+		inherits: true;
+		initial-value: 0%;
+	}
+
+	/* The wave is trimmed in script, so it cannot transition the way the track does.
+	   Transitioning the value it is trimmed from on the same token keeps the two in
+	   lockstep: same start, same duration, same curve. */
+	.progress.wavy:not(.indeterminate) {
+		transition: --np-lp-percent var(--np-motion-expressive-default-effects);
+	}
 
 	.progress.indeterminate {
 		animation:

package/dist/select/Option.svelte

@@ -30,7 +30,6 @@
 		padding: 0.5rem 1rem;
 		gap: 0.75rem;
 		height: 2rem;
-		background: var(--np-surface);
 		align-items: center;
 
 		&:checked {

package/dist/slider/Slider.svelte

@@ -99,8 +99,32 @@
 	const isActive = (t: number) => t >= activeFrom && t <= activeTo
 
 	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)
+	let pointerOrigin: { x: number; y: number } | null = null
+
+	const DRAG_THRESHOLD = 3
+
+	$effect(() => {
+		if (!icon || !activeLaneElement) return
+		const lane = activeLaneElement
+		const inlineOf = (r: DOMRect) => (orientation === 'vertical' ? r.height : r.width)
+		const measure = () => {
+			if (!iconElement) return
+			const padding = parseFloat(getComputedStyle(iconElement).insetInlineStart) || 0
+			iconFits =
+				inlineOf(lane.getBoundingClientRect()) >=
+				inlineOf(iconElement.getBoundingClientRect()) + 2 * padding
+		}
+		const observer = new ResizeObserver(measure)
+		observer.observe(lane)
+		measure()
+		return () => observer.disconnect()
+	})
 
 	const fractionFromEvent = (e: PointerEvent) => {
 		if (!trackElement) return 0
@@ -131,9 +155,23 @@
 		}
 	}
 
+	const onpointermove = (e: PointerEvent) => {
+		if (!dragging) return
+		if (!tracking) {
+			const d = pointerOrigin
+				? Math.hypot(e.clientX - pointerOrigin.x, e.clientY - pointerOrigin.y)
+				: Infinity
+			if (d <= DRAG_THRESHOLD) return
+			tracking = true
+		}
+		moveTo(e)
+	}
+
 	const onpointerdown = (e: PointerEvent) => {
 		if (disabled || e.button !== 0) return
 		const v = min + clamp(fractionFromEvent(e), 0, 1) * span
+		pointerOrigin = { x: e.clientX, y: e.clientY }
+		tracking = false
 		dragging = !range
 			? 'start'
 			: lo === hi
@@ -154,6 +192,8 @@
 		if (!dragging) return
 		const input = dragging === 'start' ? inputElement : endInputElement
 		dragging = null
+		tracking = false
+		pointerOrigin = null
 		element?.releasePointerCapture(e.pointerId)
 		input?.dispatchEvent(new Event('change', { bubbles: true }))
 	}
@@ -173,12 +213,13 @@
 		labeled && 'np-labeled',
 		disabled && 'np-disabled',
 		dragging && 'np-dragging',
+		tracking && 'np-tracking',
 		pointerFocused && 'np-pointer-focused',
 		attributes.class,
 	]}
 	role="presentation"
 	{onpointerdown}
-	onpointermove={moveTo}
+	{onpointermove}
 	onpointerup={endDrag}
 	onpointercancel={endDrag}
 	onkeydown={() => (pointerFocused = false)}
@@ -190,12 +231,15 @@
 				<span class="np-slider-stop np-slider-stop-start"></span>
 			</div>
 		{/if}
-		<div class="np-slider-lane np-slider-active">
-			{#if icon}
-				<span class="np-slider-icon">{@render icon()}</span>
+		<div class="np-slider-lane np-slider-active" bind:this={activeLaneElement}>
+			{#if icon && iconFits}
+				<span class="np-slider-icon" bind:this={iconElement}>{@render icon()}</span>
 			{/if}
 		</div>
 		<div class="np-slider-lane np-slider-inactive-end">
+			{#if icon && !iconFits}
+				<span class="np-slider-icon np-on-inactive" bind:this={iconElement}>{@render icon()}</span>
+			{/if}
 			<span class="np-slider-stop np-slider-stop-end"></span>
 		</div>
 
@@ -266,6 +310,8 @@
 		--_inside: var(--np-slider-track-inside-shape, 0.125rem);
 		--_stop: var(--np-slider-stop-indicator-size, 0.25rem);
 		--_gap: calc(var(--_hw) / 2 + 0.375rem);
+		--_ring: 3px;
+		--_ring-gap: 0.4rem;
 
 		position: relative;
 		display: block;
@@ -320,8 +366,7 @@
 			inset-inline-end var(--np-motion-expressive-fast-effects);
 	}
 
-	.np-dragging .np-slider-lane,
-	.np-dragging .np-slider-handle {
+	.np-tracking .np-slider-lane {
 		transition: none;
 	}
 
@@ -372,6 +417,10 @@
 		writing-mode: horizontal-tb;
 	}
 
+	.np-slider-icon.np-on-inactive {
+		color: var(--np-slider-icon-inactive-color, var(--np-color-on-secondary-container));
+	}
+
 	.np-slider-icon :global(svg) {
 		inline-size: var(--_icon-size);
 		block-size: var(--_icon-size);
@@ -387,6 +436,7 @@
 		border-radius: var(--np-shape-corner-full);
 		background: var(--np-slider-inactive-stop-color, var(--np-color-on-secondary-container));
 		pointer-events: none;
+		transition: background-color var(--np-motion-expressive-fast-effects);
 	}
 
 	.np-slider-stop-end {
@@ -408,15 +458,21 @@
 	}
 
 	.np-slider-handle {
+		/* The current handle box drives both size and offset, so a handle that
+		   narrows or shortens stays centred on the value it points at. */
+		--_cw: var(--_hw);
+		--_ch: var(--_handle-height);
+
 		position: absolute;
-		inset-inline-start: calc(var(--_p) - var(--_hw) / 2);
-		inset-block-start: calc((var(--_track-height) - var(--_handle-height)) / 2);
-		inline-size: var(--_hw);
-		block-size: var(--_handle-height);
+		inset-inline-start: calc(var(--_p) - var(--_cw) / 2);
+		inset-block-start: calc((var(--_track-height) - var(--_ch)) / 2);
+		inline-size: var(--_cw);
+		block-size: var(--_ch);
 		border-radius: var(--np-slider-handle-shape, var(--np-shape-corner-full));
 		background: var(--np-slider-handle-color, var(--np-color-primary));
 		transition:
 			inset-inline-start var(--np-motion-expressive-fast-effects),
+			inset-block-start var(--np-motion-expressive-fast-effects),
 			inline-size var(--np-motion-expressive-fast-effects),
 			block-size var(--np-motion-expressive-fast-effects);
 	}
@@ -429,18 +485,25 @@
 		--_p: var(--_p2);
 	}
 
+	/* Focus narrows the handle the same way a press does and keeps its full height;
+	   the ring stands clear of it instead of hugging it. */
 	.np-slider:not(.np-disabled, .np-pointer-focused):has(.np-slider-input-start:focus-visible)
 		.np-slider-handle-start,
 	.np-slider:not(.np-disabled, .np-pointer-focused):has(.np-slider-input-end:focus-visible)
 		.np-slider-handle-end {
-		inline-size: var(--np-slider-handle-width-focus, 0.125rem);
-		block-size: calc(var(--_handle-height) - 0.375rem);
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: 0.125rem;
+		--_cw: var(--np-slider-handle-width-focus, 0.125rem);
+		outline: var(--_ring) solid var(--np-color-secondary);
+		outline-offset: var(--_ring-gap);
 	}
 
 	.np-dragging .np-slider-handle {
-		inline-size: var(--np-slider-handle-width-focus, 0.125rem);
+		--_cw: var(--np-slider-handle-width-focus, 0.125rem);
+	}
+
+	.np-tracking .np-slider-handle {
+		transition:
+			inline-size var(--np-motion-expressive-fast-effects),
+			block-size var(--np-motion-expressive-fast-effects);
 	}
 
 	.np-slider-label-anchor {
@@ -530,10 +593,15 @@
 		color: var(--np-color-surface);
 	}
 
+	.np-slider.np-disabled .np-slider-icon.np-on-inactive {
+		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
+	}
+
 	@media (prefers-reduced-motion: reduce) {
-		.np-slider-lane,
-		.np-slider-handle,
-		.np-slider-label {
+		.np-slider .np-slider-lane,
+		.np-slider .np-slider-handle,
+		.np-slider .np-slider-tick,
+		.np-slider .np-slider-label {
 			transition: none;
 		}
 	}

package/dist/types.d.ts

@@ -6,6 +6,7 @@ export * from './chip/types.ts';
 export * from './dialog/types.ts';
 export * from './divider/types.ts';
 export * from './list/types.ts';
+export * from './loading-indicator/types.ts';
 export * from './menu/types.ts';
 export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';

package/dist/types.js

@@ -6,6 +6,7 @@ export * from './chip/types.ts';
 export * from './dialog/types.ts';
 export * from './divider/types.ts';
 export * from './list/types.ts';
+export * from './loading-indicator/types.ts';
 export * from './menu/types.ts';
 export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';

package/package.json

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