noph-ui 0.35.0 → 0.37.0

package/dist/icons/ChevronLeftIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ChevronLeftIcon;
+type ChevronLeftIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ChevronLeftIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/ChevronRightIcon.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+	><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" /></svg
+>

package/dist/icons/ChevronRightIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ChevronRightIcon;
+type ChevronRightIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ChevronRightIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/EditCalendarIcon.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+	><path
+		d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v200h-80v-40H200v400h280v80H200Zm0-560h560v-80H200v80Zm0 0v-80 80ZM560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"
+	/></svg
+>

package/dist/icons/EditCalendarIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default EditCalendarIcon;
+type EditCalendarIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const EditCalendarIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/index.d.ts

@@ -1,24 +1,28 @@
 export { default as AccountCircleIcon } from './AccountCircleIcon.svelte';
 export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
+export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as ArrowForwardIcon } from './ArrowForwardIcon.svelte';
 export { default as BreakingNewsIcon } from './BreakingNewsIcon.svelte';
 export { default as BrightnessMediumIcon } from './BrightnessMediumIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as ChatIcon } from './ChatIcon.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
+export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as DarkModeIcon } from './DarkModeIcon.svelte';
 export { default as DashboardIcon } from './DashboardIcon.svelte';
 export { default as DownloadIcon } from './DownloadIcon.svelte';
+export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as ErrorIcon } from './ErrorIcon.svelte';
 export { default as GroupsIcon } from './GroupsIcon.svelte';
 export { default as LanguageIcon } from './LanguageIcon.svelte';
 export { default as LightModeIcon } from './LightModeIcon.svelte';
 export { default as MenuIcon } from './MenuIcon.svelte';
 export { default as OpenInNewIcon } from './OpenInNewIcon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';
 export { default as SendIcon } from './SendIcon.svelte';
 export { default as SportsGymnasticsIcon } from './SportsGymnasticsIcon.svelte';
-export { default as SearchIcon } from './SearchIcon.svelte';
 export { default as VisibilityIcon } from './VisibilityIcon.svelte';
 export { default as VisibilityOffIcon } from './VisibilityOffIcon.svelte';
 export { default as Icon } from './Icon.svelte';

package/dist/icons/index.js

@@ -1,24 +1,28 @@
 export { default as AccountCircleIcon } from './AccountCircleIcon.svelte';
 export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
+export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as ArrowForwardIcon } from './ArrowForwardIcon.svelte';
 export { default as BreakingNewsIcon } from './BreakingNewsIcon.svelte';
 export { default as BrightnessMediumIcon } from './BrightnessMediumIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as ChatIcon } from './ChatIcon.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
+export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as DarkModeIcon } from './DarkModeIcon.svelte';
 export { default as DashboardIcon } from './DashboardIcon.svelte';
 export { default as DownloadIcon } from './DownloadIcon.svelte';
+export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as ErrorIcon } from './ErrorIcon.svelte';
 export { default as GroupsIcon } from './GroupsIcon.svelte';
 export { default as LanguageIcon } from './LanguageIcon.svelte';
 export { default as LightModeIcon } from './LightModeIcon.svelte';
 export { default as MenuIcon } from './MenuIcon.svelte';
 export { default as OpenInNewIcon } from './OpenInNewIcon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';
 export { default as SendIcon } from './SendIcon.svelte';
 export { default as SportsGymnasticsIcon } from './SportsGymnasticsIcon.svelte';
-export { default as SearchIcon } from './SearchIcon.svelte';
 export { default as VisibilityIcon } from './VisibilityIcon.svelte';
 export { default as VisibilityOffIcon } from './VisibilityOffIcon.svelte';
 export { default as Icon } from './Icon.svelte';

package/dist/index.d.ts

@@ -4,9 +4,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './date-picker/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

@@ -4,9 +4,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './date-picker/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/list/Item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { ItemProps } from './types.ts'
+	import type { ItemProps } from './types.js'
 
 	let {
 		selected = false,

package/dist/list/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ListProps } from './types.ts'
+	import type { ListProps } from './types.js'
 
 	let { element = $bindable(), children, ...attributes }: ListProps = $props()
 </script>

package/dist/list/ListItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Item from './Item.svelte'
-	import type { ListItemProps } from './types.ts'
+	import type { ListItemProps } from './types.js'
 
 	let { ...attributes }: ListItemProps = $props()
 </script>

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.js'
+	import type { LoadingIndicatorProps } from './types.js'
+
+	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/menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
-	import type { MenuProps } from './types.ts'
+	import type { MenuProps } from './types.js'
 	import { on } from 'svelte/events'
 
 	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
@@ -22,11 +22,11 @@
 	let clientHeight = $state(0)
 	let innerHeight = $state(0)
 
-	export function showPopover() {
+	export const showPopover = () => {
 		element?.showPopover()
 	}
 
-	export function hidePopover() {
+	export const hidePopover = () => {
 		element?.hidePopover()
 	}
 	const refreshValues = () => {

package/dist/menu/MenuItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Item from '../list/Item.svelte'
-	import type { MenuItemProps } from './types.ts'
+	import type { MenuItemProps } from './types.js'
 
 	let { ...attributes }: MenuItemProps = $props()
 </script>

package/dist/menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { ItemProps } from '../list/types.ts';
+import type { ItemProps } from '../list/types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
-	import type { NavigationDrawerProps } from './types.ts'
+	import type { NavigationDrawerProps } from './types.js'
 	let {
 		modal = false,
 		backdrop = false,

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { NavigationDrawerItemProps } from './types.ts'
+	import type { NavigationDrawerItemProps } from './types.js'
 
 	let {
 		selected = false,
@@ -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/navigation-rail/NavigationRail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
-	import type { NavigationRailProps } from './types.ts'
+	import type { NavigationRailProps } from './types.js'
 
 	let { children, onkeydown: userKeydown, ...attributes }: NavigationRailProps = $props()
 

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { NavigationRailItemProps } from './types.ts'
+	import type { NavigationRailItemProps } from './types.js'
 
 	let { selected, icon, label, ...attributes }: NavigationRailItemProps = $props()
 	let touchEl: HTMLSpanElement | undefined = $state()

package/dist/progress/CircularProgress.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { MediaQuery } from 'svelte/reactivity'
-	import type { CircularProgressProps } from './types.ts'
+	import type { CircularProgressProps } from './types.js'
 
 	let {
 		value = 0,

package/dist/progress/LinearProgress.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { MediaQuery } from 'svelte/reactivity'
-	import type { LinearProgressProps } from './types.ts'
+	import type { LinearProgressProps } from './types.js'
 
 	let {
 		value = 0,
@@ -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,15 @@
 		inherits: true;
 		initial-value: 0%;
 	}
+	@property --np-lp-percent {
+		syntax: '<percentage>';
+		inherits: true;
+		initial-value: 0%;
+	}
+
+	.progress.wavy:not(.indeterminate) {
+		transition: --np-lp-percent var(--np-motion-expressive-default-effects);
+	}
 
 	.progress.indeterminate {
 		animation:

package/dist/radio/Radio.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { RadioProps } from './types.ts'
+	import type { RadioProps } from './types.js'
 
 	let {
 		checked,

package/dist/ripple/Ripple.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { on } from 'svelte/events'
-	import type { RippleProps } from './types.ts'
+	import type { RippleProps } from './types.js'
 
 	let {
 		forceHover = false,

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/select/Select.svelte

@@ -4,7 +4,7 @@
 	import Check from './Check.svelte'
 	import VirtualList from './VirtualList.svelte'
 	import { tick } from 'svelte'
-	import type { SelectOption, SelectProps } from './types.ts'
+	import type { SelectOption, SelectProps } from './types.js'
 
 	let {
 		options = [],

package/dist/select/Select.svelte.d.ts

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