noph-ui 0.35.0 → 0.37.0

package/dist/select/VirtualList.svelte

@@ -25,7 +25,7 @@
 	}: VirtualListProps = $props()
 
 	let height_map: number[] = []
-	// eslint-disable-next-line no-undef
+
 	let rows: HTMLCollectionOf<HTMLElement> | undefined = $state()
 	let viewport: HTMLElement | undefined = $state()
 	let contents: HTMLDivElement | undefined = $state()
@@ -48,7 +48,7 @@
 		})),
 	)
 
-	async function refresh(items: T[], viewport_height: number, itemHeight?: number) {
+	const refresh = async (items: T[], viewport_height: number, itemHeight?: number) => {
 		if (!viewport || !rows) {
 			return
 		}
@@ -85,7 +85,7 @@
 		rendered?.({ start, end })
 	}
 
-	async function handle_scroll() {
+	const handle_scroll = async () => {
 		if (!viewport || !rows) {
 			return
 		}
@@ -160,7 +160,6 @@
 	}
 
 	onMount(() => {
-		// eslint-disable-next-line no-undef
 		rows = contents?.children as HTMLCollectionOf<HTMLElement>
 		mounted = true
 	})

package/dist/slider/Slider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SliderProps } from './types.ts'
+	import type { SliderProps } from './types.js'
 
 	let {
 		value = $bindable(0),
@@ -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.25rem;
 
 		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,19 @@
 	}
 
 	.np-slider-handle {
+		--_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);
 	}
@@ -433,14 +487,19 @@
 		.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 +589,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/slider/Slider.svelte.d.ts

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

package/dist/snackbar/Snackbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
-	import type { SnackbarProps } from './types.ts'
+	import type { SnackbarProps } from './types.js'
 
 	let {
 		label,
@@ -23,11 +23,11 @@
 	let timeoutId: ReturnType<typeof setTimeout> | undefined
 	const uid = $props.id()
 
-	export function showPopover() {
+	export const showPopover = () => {
 		element?.showPopover()
 	}
 
-	export function hidePopover() {
+	export const hidePopover = () => {
 		element?.hidePopover()
 	}
 

package/dist/switch/Switch.svelte

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

package/dist/tabs/Tab.svelte

@@ -3,7 +3,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import { tick } from 'svelte'
 	import { getTabsContext } from './context.js'
-	import type { TabProps } from './types.ts'
+	import type { TabProps } from './types.js'
 
 	let {
 		children,

package/dist/tabs/Tabs.svelte

@@ -2,7 +2,7 @@
 	import Divider from '../divider/Divider.svelte'
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { setTabsContext } from './context.js'
-	import type { TabsContext, TabsProps } from './types.ts'
+	import type { TabsContext, TabsProps } from './types.js'
 
 	let {
 		children,

package/dist/tabs/Tabs.svelte.d.ts

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

package/dist/text-field/TextField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { TextFieldProps } from './types.ts'
+	import type { TextFieldProps } from './types.js'
 
 	let {
 		defaultValue,
@@ -149,8 +149,8 @@
 			</div>
 		</div>
 		{#if supportingText || errorText || attributes.maxlength}
-			<div class="supporting-text" role={errorText ? 'alert' : undefined}>
-				<span id="supporting-text-{uid}">
+			<div class="supporting-text">
+				<span id="supporting-text-{uid}" role={errorText ? 'alert' : undefined}>
 					{errorText ?? supportingText}
 				</span>
 				{#if attributes.maxlength}

package/dist/text-field/TextField.svelte.d.ts

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

package/dist/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { on } from 'svelte/events'
 	import { MediaQuery } from 'svelte/reactivity'
-	import type { TooltipProps } from './types.ts'
+	import type { TooltipProps } from './types.js'
 
 	let {
 		children,

package/dist/types.d.ts

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

@@ -1,21 +1,23 @@
-export * from './autocomplete/types.ts';
-export * from './button/types.ts';
-export * from './card/types.ts';
-export * from './checkbox/types.ts';
-export * from './chip/types.ts';
-export * from './dialog/types.ts';
-export * from './divider/types.ts';
-export * from './list/types.ts';
-export * from './menu/types.ts';
-export * from './navigation-drawer/types.ts';
-export * from './navigation-rail/types.ts';
-export * from './progress/types.ts';
-export * from './radio/types.ts';
-export * from './ripple/types.ts';
-export * from './select/types.ts';
-export * from './slider/types.ts';
-export * from './snackbar/types.ts';
-export * from './switch/types.ts';
-export * from './text-field/types.ts';
-export * from './tooltip/types.ts';
-export * from './tabs/types.ts';
+export * from "./autocomplete/types.js";
+export * from "./button/types.js";
+export * from "./card/types.js";
+export * from "./checkbox/types.js";
+export * from "./chip/types.js";
+export * from "./date-picker/types.js";
+export * from "./dialog/types.js";
+export * from "./divider/types.js";
+export * from "./list/types.js";
+export * from "./loading-indicator/types.js";
+export * from "./menu/types.js";
+export * from "./navigation-drawer/types.js";
+export * from "./navigation-rail/types.js";
+export * from "./progress/types.js";
+export * from "./radio/types.js";
+export * from "./ripple/types.js";
+export * from "./select/types.js";
+export * from "./slider/types.js";
+export * from "./snackbar/types.js";
+export * from "./switch/types.js";
+export * from "./text-field/types.js";
+export * from "./tooltip/types.js";
+export * from "./tabs/types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.35.0",
+	"version": "0.37.0",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -31,17 +31,17 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright install && playwright test"
 	},
 	"exports": {
 		".": {
@@ -77,14 +77,16 @@
 		"@materialx/material-color-utilities": "^0.4.8",
 		"@playwright/test": "^1.62.1",
 		"@sveltejs/adapter-vercel": "7.0.0-next.6",
-		"@sveltejs/kit": "3.0.0-next.11",
-		"@sveltejs/package": "3.0.0-next.3",
+		"@sveltejs/kit": "3.0.0-next.23",
+		"@sveltejs/package": "3.0.0-next.7",
 		"@sveltejs/vite-plugin-svelte": "7.3.0",
-		"@types/eslint": "^9.6.1",
+		"@types/node": "^24",
+		"@vitest/browser-playwright": "^4.1.10",
 		"eslint": "^10.8.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.22.0",
 		"globals": "^17.9.0",
+		"playwright": "^1.62.1",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"publint": "^0.3.23",
@@ -93,7 +95,8 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.66.0",
 		"vite": "8.2.1",
-		"vitest": "^4.1.10"
+		"vitest": "^4.1.10",
+		"vitest-browser-svelte": "^2.1.1"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",