noph-ui 0.44.0 → 0.45.1

package/dist/select/Select.svelte

@@ -74,7 +74,6 @@
 	)
 
 	let field = $state<HTMLDivElement>()
-	let clientWidth = $state(0)
 	let menuOpen = $state(false)
 	let focusIndex = $state(-1)
 	let pendingFocus = false
@@ -230,6 +229,30 @@
 		}
 	}
 
+	const optionKeydown = (event: KeyboardEvent, option: SelectOption) => {
+		const key = event.key
+		if (key === 'ArrowDown') {
+			event.preventDefault()
+			moveFocus(1)
+		} else if (key === 'ArrowUp') {
+			event.preventDefault()
+			moveFocus(-1)
+		} else if (key === 'Home') {
+			event.preventDefault()
+			focusEdge(true)
+		} else if (key === 'End') {
+			event.preventDefault()
+			focusEdge(false)
+		} else if (key === 'Enter' || key === ' ') {
+			event.preventDefault()
+			handleOptionSelect(event, option)
+		} else if (key === 'Tab') {
+			menuElement?.hidePopover()
+		} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			performTypeahead(key)
+		}
+	}
+
 	const performTypeahead = (char: string) => {
 		const now = performance.now()
 		if (now - lastTypeTime > 700) typeBuffer = ''
@@ -268,7 +291,7 @@
 		: !label?.length
 			? '--top-space:1rem;--bottom-space:1rem;'
 			: '') + style}
-	class={['text-field', attributes.class]}
+	class={['np-text-field', attributes.class]}
 	bind:this={element}
 >
 	<!-- svelte-ignore a11y_autofocus -->
@@ -291,7 +314,6 @@
 		aria-activedescendant={activeDescendantId}
 		data-testid={attributes['data-testid']}
 		bind:this={field}
-		bind:clientWidth
 		autofocus={disabled ? false : autofocus}
 		onclick={(event) => {
 			const target = event.target as HTMLElement
@@ -453,93 +475,32 @@
 </div>
 
 {#snippet item(option: SelectOption, index: number)}
-	{#if Array.isArray(value) && multiple}
-		<Item
-			id="{uid}-opt-{index}"
-			onclick={(event) => {
-				handleOptionSelect(event, option)
-				field?.focus()
-			}}
-			tabindex={-1}
-			disabled={option.disabled}
-			aria-disabled={option.disabled}
-			role="option"
-			onkeydown={(event) => {
-				const key = event.key
-				if (key === 'ArrowDown') {
-					event.preventDefault()
-					moveFocus(1)
-				} else if (key === 'ArrowUp') {
-					event.preventDefault()
-					moveFocus(-1)
-				} else if (key === 'Home') {
-					event.preventDefault()
-					focusEdge(true)
-				} else if (key === 'End') {
-					event.preventDefault()
-					focusEdge(false)
-				} else if (key === 'Enter' || key === ' ') {
-					event.preventDefault()
-					handleOptionSelect(event, option)
-				} else if (key === 'Tab') {
-					menuElement?.hidePopover()
-				} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-					performTypeahead(key)
-				}
-			}}
-			variant="button"
-			selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
-			aria-selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
-			>{option.label}
-			{#snippet start()}
-				<Check disabled={option.disabled} checked={value.includes(option.value)} />
-			{/snippet}
-		</Item>
-	{:else}
-		<Item
-			id="{uid}-opt-{index}"
-			onclick={(event) => {
-				handleOptionSelect(event, option)
-				field?.focus()
-			}}
-			tabindex={-1}
-			disabled={option.disabled}
-			aria-disabled={option.disabled}
-			role="option"
-			onkeydown={(event) => {
-				const key = event.key
-				if (key === 'ArrowDown') {
-					event.preventDefault()
-					moveFocus(1)
-				} else if (key === 'ArrowUp') {
-					event.preventDefault()
-					moveFocus(-1)
-				} else if (key === 'Home') {
-					event.preventDefault()
-					focusEdge(true)
-				} else if (key === 'End') {
-					event.preventDefault()
-					focusEdge(false)
-				} else if (key === 'Enter' || key === ' ') {
-					event.preventDefault()
-					handleOptionSelect(event, option)
-				} else if (key === 'Tab') {
-					menuElement?.hidePopover()
-				} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-					performTypeahead(key)
-				}
-			}}
-			variant="button"
-			selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
-			aria-selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
-			>{option.label}
-		</Item>
-	{/if}
+	{@const isSelected = selectedSet.has(option.value)}
+	{#snippet check()}
+		<Check disabled={option.disabled} checked={isSelected} />
+	{/snippet}
+	<Item
+		id="{uid}-opt-{index}"
+		onclick={(event) => {
+			handleOptionSelect(event, option)
+			field?.focus()
+		}}
+		tabindex={-1}
+		disabled={option.disabled}
+		aria-disabled={option.disabled}
+		role="option"
+		onkeydown={(event) => optionKeydown(event, option)}
+		variant="button"
+		selected={isSelected}
+		aria-selected={isSelected}
+		start={multiple ? check : undefined}
+		>{option.label}
+	</Item>
 {/snippet}
 
 <Menu
 	id="listbox-{uid}"
-	style={`position-anchor:--${uid};${widthProp}:${clientWidth}px`}
+	style={`position-anchor:--${uid};${widthProp}:anchor-size(width)`}
 	role="listbox"
 	aria-multiselectable={multiple}
 	--np-menu-justify-self="none"
@@ -689,7 +650,7 @@
 		height: 100%;
 		position: relative;
 	}
-	.text-field {
+	.np-text-field {
 		display: inline-flex;
 		resize: both;
 		text-align: start;

package/dist/sheet/Sheet.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import { syncOpenEffect } from '../popover.svelte.js'
+	import type { SheetProps } from './types.js'
+
+	let {
+		open = $bindable(false),
+		modal = true,
+		placement = 'bottom',
+		handle = true,
+		headline,
+		action,
+		children,
+		element = $bindable(),
+		onclose,
+		ontoggle,
+		...attributes
+	}: SheetProps = $props()
+
+	const uid = $props.id()
+	const headlineId = `np-sheet-headline-${uid}`
+
+	export const show = () => {
+		if (!element || element.open) return
+		if (modal) element.showModal()
+		else element.show()
+	}
+
+	export const close = () => {
+		element?.close()
+	}
+
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
+</script>
+
+<dialog
+	{...attributes}
+	bind:this={element}
+	tabindex="-1"
+	closedby={modal ? 'any' : 'none'}
+	aria-labelledby={headline ? headlineId : attributes['aria-labelledby']}
+	class={['np-sheet', `np-sheet-${placement}`, modal && 'np-sheet-modal', attributes.class]}
+	onclose={(event) => {
+		open = false
+		onclose?.(event)
+	}}
+	ontoggle={(event) => {
+		open = event.newState === 'open'
+		if (event.newState === 'open') element?.focus()
+		ontoggle?.(event)
+	}}
+	onclick={(event) => {
+		if (modal && event.target === element) close()
+	}}
+>
+	{#if handle && placement === 'bottom'}
+		<div class="np-sheet-handle" aria-hidden="true"></div>
+	{/if}
+	{#if headline || action}
+		<div class="np-sheet-header">
+			{#if headline}
+				<h2 id={headlineId} class="np-sheet-headline">{headline}</h2>
+			{/if}
+			{#if action}
+				<div class="np-sheet-action">{@render action()}</div>
+			{/if}
+		</div>
+	{/if}
+	<div class="np-sheet-content">
+		{@render children?.()}
+	</div>
+</dialog>
+
+<style>
+	.np-sheet {
+		position: fixed;
+		outline: none;
+		z-index: var(--np-sheet-z-index, 24);
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+		border: none;
+		max-width: none;
+		max-height: none;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		background-color: var(--np-sheet-container-color, var(--np-color-surface-container-low));
+		color: var(--np-color-on-surface);
+		box-shadow: var(--np-sheet-elevation, var(--np-elevation-1));
+	}
+
+	.np-sheet:not([open]) {
+		display: none;
+	}
+
+	.np-sheet-bottom,
+	.np-sheet-top {
+		inset-inline: 0;
+		width: 100%;
+		max-height: var(--np-sheet-size, 50dvh);
+	}
+	.np-sheet-bottom {
+		inset-block-end: 0;
+		inset-block-start: auto;
+		border-start-start-radius: var(--np-sheet-shape, var(--np-shape-corner-extra-large));
+		border-start-end-radius: var(--np-sheet-shape, var(--np-shape-corner-extra-large));
+	}
+	.np-sheet-top {
+		inset-block-start: 0;
+		inset-block-end: auto;
+		border-end-start-radius: var(--np-sheet-shape, var(--np-shape-corner-extra-large));
+		border-end-end-radius: var(--np-sheet-shape, var(--np-shape-corner-extra-large));
+	}
+
+	.np-sheet-start,
+	.np-sheet-end {
+		inset-block: 0;
+		height: 100dvh;
+		width: var(--np-sheet-size, 20rem);
+		max-width: 100%;
+	}
+	.np-sheet-start {
+		inset-inline-start: 0;
+		inset-inline-end: auto;
+		border-start-end-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
+		border-end-end-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
+	}
+	.np-sheet-end {
+		inset-inline-end: 0;
+		inset-inline-start: auto;
+		border-start-start-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
+		border-end-start-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
+	}
+
+	.np-sheet-handle {
+		flex: none;
+		width: 2rem;
+		height: 0.25rem;
+		margin: 1rem auto 0;
+		border-radius: var(--np-shape-corner-full);
+		background-color: var(--np-sheet-handle-color, var(--np-color-outline-variant));
+	}
+
+	.np-sheet-header {
+		flex: none;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 1rem 1.5rem 0;
+	}
+	.np-sheet-headline {
+		flex: 1;
+		margin: 0;
+		font-size: 1.5rem;
+		line-height: 2rem;
+		font-weight: 400;
+	}
+	.np-sheet-action {
+		flex: none;
+		display: flex;
+	}
+
+	.np-sheet-content {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 1rem 1.5rem 1.5rem;
+	}
+
+	.np-sheet-modal::backdrop {
+		background-color: var(--np-color-scrim);
+		opacity: 0.32;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-sheet {
+			transition:
+				translate var(--np-motion-expressive-default-spatial),
+				display var(--np-motion-expressive-default-spatial) allow-discrete,
+				overlay var(--np-motion-expressive-default-spatial) allow-discrete;
+		}
+		.np-sheet::backdrop {
+			transition:
+				opacity var(--np-motion-expressive-fast-effects),
+				display var(--np-motion-expressive-fast-effects) allow-discrete,
+				overlay var(--np-motion-expressive-fast-effects) allow-discrete;
+		}
+
+		.np-sheet-bottom {
+			translate: 0 100%;
+		}
+		.np-sheet-top {
+			translate: 0 -100%;
+		}
+		.np-sheet-start {
+			translate: -100% 0;
+		}
+		.np-sheet-end {
+			translate: 100% 0;
+		}
+		.np-sheet[open] {
+			translate: 0 0;
+		}
+		@starting-style {
+			.np-sheet-bottom[open] {
+				translate: 0 100%;
+			}
+			.np-sheet-top[open] {
+				translate: 0 -100%;
+			}
+			.np-sheet-start[open] {
+				translate: -100% 0;
+			}
+			.np-sheet-end[open] {
+				translate: 100% 0;
+			}
+		}
+
+		.np-sheet-modal::backdrop {
+			opacity: 0;
+		}
+		.np-sheet-modal[open]::backdrop {
+			opacity: 0.32;
+			@starting-style {
+				opacity: 0;
+			}
+		}
+	}
+</style>

package/dist/sheet/Sheet.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SheetProps } from './types.ts';
+declare const Sheet: import("svelte").Component<SheetProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/sheet/index.d.ts

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

package/dist/sheet/index.js

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

package/dist/sheet/types.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export interface SheetProps extends Omit<HTMLDialogAttributes, 'open'> {
+    open?: boolean;
+    modal?: boolean;
+    placement?: 'bottom' | 'top' | 'start' | 'end';
+    handle?: boolean;
+    headline?: string;
+    action?: Snippet;
+    element?: HTMLDialogElement;
+}

package/dist/sheet/types.js

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

package/dist/slider/Slider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { SliderProps } from './types.js'
 
 	let {
@@ -21,9 +22,14 @@
 		element = $bindable(),
 		inputElement = $bindable(),
 		endInputElement = $bindable(),
+		issues,
+		'aria-invalid': ariaInvalid,
 		...attributes
 	}: SliderProps = $props()
 
+	let hasError = $derived(!!issues?.length)
+	const uid = $props.id()
+
 	const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v))
 
 	let span = $derived(max - min || 1)
@@ -109,6 +115,24 @@
 
 	const DRAG_THRESHOLD = 3
 
+	let startLabelElement = $state<HTMLDivElement>()
+	let endLabelElement = $state<HTMLDivElement>()
+	let startHandleElement = $state<HTMLDivElement>()
+	let endHandleElement = $state<HTMLDivElement>()
+	let hovered = $state<'start' | 'end' | null>(null)
+	let focused = $state<'start' | 'end' | null>(null)
+
+	let labelled = $derived(
+		disabled ? null : (dragging ?? hovered ?? (pointerFocused ? null : focused)),
+	)
+
+	const bindLabel = (getElement: () => HTMLDivElement | undefined, side: 'start' | 'end') => {
+		const controller = popoverController(getElement)
+		syncOpenEffect(getElement, () => labelled === side, controller.show, controller.close)
+	}
+	bindLabel(() => startLabelElement, 'start')
+	bindLabel(() => endLabelElement, 'end')
+
 	$effect(() => {
 		if (!icon || !activeLaneElement) return
 		const lane = activeLaneElement
@@ -155,7 +179,24 @@
 		}
 	}
 
+	const HOVER_TOLERANCE = 12
+
+	const distanceTo = (handle: HTMLDivElement | undefined, e: PointerEvent) => {
+		if (!handle) return Infinity
+		const r = handle.getBoundingClientRect()
+		const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right)
+		const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom)
+		return Math.hypot(dx, dy)
+	}
+
+	const updateHover = (e: PointerEvent) => {
+		const toStart = distanceTo(startHandleElement, e)
+		const toEnd = distanceTo(endHandleElement, e)
+		hovered = Math.min(toStart, toEnd) > HOVER_TOLERANCE ? null : toStart <= toEnd ? 'start' : 'end'
+	}
+
 	const onpointermove = (e: PointerEvent) => {
+		updateHover(e)
 		if (!dragging) return
 		if (!tracking) {
 			const d = pointerOrigin
@@ -195,6 +236,7 @@
 		tracking = false
 		pointerOrigin = null
 		element?.releasePointerCapture(e.pointerId)
+		updateHover(e)
 		input?.dispatchEvent(new Event('change', { bubbles: true }))
 	}
 
@@ -215,6 +257,7 @@
 		dragging && 'np-dragging',
 		tracking && 'np-tracking',
 		pointerFocused && 'np-pointer-focused',
+		hasError && !disabled && 'np-error',
 		attributes.class,
 	]}
 	role="presentation"
@@ -222,8 +265,13 @@
 	{onpointermove}
 	onpointerup={endDrag}
 	onpointercancel={endDrag}
+	onpointerleave={() => (hovered = null)}
 	onkeydown={() => (pointerFocused = false)}
-	onfocusout={() => (pointerFocused = false)}
+	onfocusin={(event) => (focused = event.target === endInputElement ? 'end' : 'start')}
+	onfocusout={() => {
+		focused = null
+		pointerFocused = false
+	}}
 >
 	<div class="np-slider-track" bind:this={trackElement}>
 		{#if hasStartStop}
@@ -247,21 +295,37 @@
 			<span class={['np-slider-tick', isActive(t) && 'np-on-active']} style="--_t:{t}"></span>
 		{/each}
 
-		<div class="np-slider-handle np-slider-handle-start">
+		<div
+			bind:this={startHandleElement}
+			class="np-slider-handle np-slider-handle-start"
+			style="anchor-name: --np-slider-{uid}-start"
+		></div>
+		{#if labeled}
+			<div
+				bind:this={startLabelElement}
+				popover="manual"
+				class="np-slider-label-anchor"
+				style="position-anchor: --np-slider-{uid}-start"
+			>
+				<div class="np-slider-label">{labelFor(range ? Math.min(lo, hi) : lo)}</div>
+			</div>
+		{/if}
+		{#if range}
+			<div
+				bind:this={endHandleElement}
+				class="np-slider-handle np-slider-handle-end"
+				style="anchor-name: --np-slider-{uid}-end"
+			></div>
 			{#if labeled}
-				<div class="np-slider-label-anchor">
-					<div class="np-slider-label">{labelFor(range ? Math.min(lo, hi) : lo)}</div>
+				<div
+					bind:this={endLabelElement}
+					popover="manual"
+					class="np-slider-label-anchor"
+					style="position-anchor: --np-slider-{uid}-end"
+				>
+					<div class="np-slider-label">{labelFor(Math.max(lo, hi))}</div>
 				</div>
 			{/if}
-		</div>
-		{#if range}
-			<div class="np-slider-handle np-slider-handle-end">
-				{#if labeled}
-					<div class="np-slider-label-anchor">
-						<div class="np-slider-label">{labelFor(Math.max(lo, hi))}</div>
-					</div>
-				{/if}
-			</div>
 		{/if}
 	</div>
 
@@ -277,6 +341,7 @@
 		{disabled}
 		aria-orientation={orientation}
 		aria-valuetext={format ? labelFor(lo) : attributes['aria-valuetext']}
+		aria-invalid={hasError ? 'true' : ariaInvalid}
 	/>
 	{#if range}
 		<input
@@ -377,6 +442,14 @@
 		background: var(--np-slider-active-track-color, var(--np-color-primary));
 	}
 
+	.np-error {
+		--np-slider-active-track-color: var(--np-color-error);
+		--np-slider-handle-color: var(--np-color-error);
+		--np-slider-active-stop-color: var(--np-color-on-error);
+		--np-slider-label-container-color: var(--np-color-error);
+		--np-slider-label-text-color: var(--np-color-on-error);
+	}
+
 	.np-slider-inactive-start {
 		inset-inline-start: 0;
 		inset-inline-end: calc(100% - var(--_i1));
@@ -502,15 +575,42 @@
 			block-size var(--np-motion-expressive-fast-effects);
 	}
 
-	.np-slider-label-anchor {
-		position: absolute;
-		inset-block-end: calc(100% + 0.375rem);
-		inset-inline: 0;
-		display: flex;
+	.np-slider-label-anchor[popover] {
+		position-area: block-start;
+		justify-self: anchor-center;
+		margin: 0 0 0.375rem 0;
+		border: none;
+		background: none;
+		padding: 0;
 		justify-content: center;
 		pointer-events: none;
 	}
 
+	.np-slider-label-anchor:popover-open {
+		display: flex;
+		opacity: 1;
+		scale: 1;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-slider-label-anchor:popover-open {
+			animation:
+				fadeIn var(--np-motion-expressive-fast-effects),
+				scaleIn var(--np-motion-expressive-fast-spatial);
+		}
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+	}
+	@keyframes scaleIn {
+		from {
+			scale: 0.8;
+		}
+	}
+
 	.np-slider-label {
 		flex: none;
 		writing-mode: horizontal-tb;
@@ -526,18 +626,6 @@
 		font-weight: 500;
 		text-align: center;
 		white-space: nowrap;
-		opacity: 0;
-		transition: opacity var(--np-motion-expressive-fast-effects);
-	}
-
-	.np-slider.np-labeled:hover .np-slider-label,
-	.np-slider.np-labeled.np-dragging .np-slider-label,
-	.np-slider.np-labeled:has(.np-slider-input:focus-visible) .np-slider-label {
-		opacity: 1;
-	}
-
-	.np-slider.np-disabled .np-slider-label {
-		opacity: 0;
 	}
 
 	.np-slider-input {

package/dist/slider/types.d.ts

@@ -20,4 +20,7 @@ export interface SliderProps extends Omit<HTMLInputAttributes, 'type' | 'value'
     element?: HTMLDivElement;
     inputElement?: HTMLInputElement;
     endInputElement?: HTMLInputElement;
+    issues?: {
+        message: string;
+    }[];
 }