noph-ui 0.44.0 → 0.45.0

package/dist/sheet/Sheet.svelte

@@ -0,0 +1,260 @@
+<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>
+
+<!--
+	A `dialog` rather than a popover. `showModal()` keeps everything outside the sheet inert for as
+	long as it is open, including anything added while it is open, and restores focus on close. A
+	hand-rolled trap can only inert what exists at the moment it runs.
+
+	`closedby="any"` is the light dismiss a popover gets for free. Where it is unsupported the click
+	handler below covers it: a click on the backdrop is reported against the dialog itself.
+-->
+<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'
+		/*
+		 * Without this the browser autofocuses the first focusable descendant, which is the close
+		 * button when `action` puts one in the header, firing its tooltip on open. Focus the sheet
+		 * itself instead, so nothing is focused that the user didn't choose to interact with.
+		 */
+		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;
+		/* Focus lands here on open only to stay off the header action, not as something to show. */
+		outline: none;
+		/*
+		 * `showModal()` puts a modal sheet in the top layer, above normal stacking order regardless
+		 * of z-index. A non-modal sheet (`.show()`) stays in normal flow, so it needs a z-index of
+		 * its own to clear app bars and other overlays.
+		 */
+		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));
+	}
+
+	/* A closed dialog is `display: none` from the user agent, which the enter transition needs. */
+	.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;
+	}
+
+	/* `::backdrop` is the scrim, so a modal sheet needs no backdrop element of its own. */
+	.np-sheet-modal::backdrop {
+		background-color: var(--np-color-scrim);
+		opacity: 0.32;
+	}
+
+	/*
+	 * `display` and `overlay` are discrete properties, so the sheet would appear and vanish without
+	 * `allow-discrete`. `@starting-style` gives the entry a value to move from.
+	 */
+	@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,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+export interface SheetProps extends Omit<HTMLDialogAttributes, 'open'> {
+    /** Bindable. Whether the sheet is showing. */
+    open?: boolean;
+    /**
+     * A modal sheet takes focus and blocks the page behind it; a standard one sits alongside the
+     * content and leaves it usable.
+     */
+    modal?: boolean;
+    /** Which edge the sheet is docked to. `'bottom'` is M3's bottom sheet, the sides are side sheets. */
+    placement?: 'bottom' | 'top' | 'start' | 'end';
+    /** The drag handle M3 puts on a bottom sheet. Ignored on the other edges. */
+    handle?: boolean;
+    headline?: string;
+    /** Trailing action in the header, usually a close button. */
+    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,38 @@
 
 	const DRAG_THRESHOLD = 3
 
+	/*
+	 * The value label is a `manual` popover rather than a plain absolutely positioned element, so it
+	 * renders in the top layer and isn't clipped by an ancestor that scrolls or clips overflow, the
+	 * way a `DemoContainer` or any card with `overflow: hidden` would otherwise cut it off. `manual`
+	 * rather than `hint`, whose open and close the browser drives on its own schedule; this one has
+	 * to follow the drag exactly.
+	 */
+	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)
+
+	/*
+	 * One handle carries the label at a time, the one being interacted with: a drag wins, then the
+	 * pointer, then the keyboard. Focus only counts when it did not come from a pointer, since a
+	 * drag focuses the input and `:focus-visible` does match a range input focused that way, which
+	 * is why the focus ring is suppressed by `np-pointer-focused` too. Without that gate the label
+	 * would stay up after a drag for as long as the input keeps focus, however far the pointer went.
+	 */
+	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 +193,32 @@
 		}
 	}
 
+	/*
+	 * Hover is derived from where the pointer actually is rather than from the handle's own
+	 * mouseenter/mouseleave. A handle is only a few pixels wide, so those events are easy to miss
+	 * between frames, and while a drag holds pointer capture they are routed to the capturing
+	 * element and never reach the handle at all, which left the label stuck open. The tolerance
+	 * gives the thin handle a hit area worth aiming at.
+	 */
+	const HOVER_TOLERANCE = 12
+
+	/** Distance from the pointer to a handle's box, zero while inside it. */
+	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 +258,7 @@
 		tracking = false
 		pointerOrigin = null
 		element?.releasePointerCapture(e.pointerId)
+		updateHover(e)
 		input?.dispatchEvent(new Event('change', { bubbles: true }))
 	}
 
@@ -215,6 +279,7 @@
 		dragging && 'np-dragging',
 		tracking && 'np-tracking',
 		pointerFocused && 'np-pointer-focused',
+		hasError && !disabled && 'np-error',
 		attributes.class,
 	]}
 	role="presentation"
@@ -222,8 +287,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 +317,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 +363,7 @@
 		{disabled}
 		aria-orientation={orientation}
 		aria-valuetext={format ? labelFor(lo) : attributes['aria-valuetext']}
+		aria-invalid={hasError ? 'true' : ariaInvalid}
 	/>
 	{#if range}
 		<input
@@ -377,6 +464,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 +597,56 @@
 			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;
+	/*
+	 * A `manual` popover rather than a plain absolutely positioned element: it renders in the top
+	 * layer, anchored to the handle by `position-anchor`/`position-area` rather than by an inset
+	 * computed from the handle's own box, so it isn't clipped by an ancestor that scrolls or hides
+	 * overflow. It stays a wrapper around the visible label rather than the popover itself carrying
+	 * the styling, so it can keep resolving `position-area` in the slider's own writing mode while
+	 * the label inside always renders horizontally, the same split the previous absolute-positioned
+	 * version needed for a vertical slider's rotated writing mode.
+	 */
+	.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;
 	}
 
+	/*
+	 * `display` only while open. Setting it on the base rule would beat the user agent's
+	 * `display: none` for a closed popover, because author styles win over user agent styles
+	 * whatever the specificity, leaving the label on screen the whole time.
+	 */
+	.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 +662,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;
+    }[];
 }