@dryui/ui 1.3.0 → 1.4.0

package/dist/displacement/displacement.svelte

@@ -2,6 +2,11 @@
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference
+	} from '@dryui/primitives/internal/motion';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		scale?: number;
@@ -48,17 +53,12 @@
 	}
 
 	onMount(() => {
-		const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-		prefersReducedMotion = mql.matches;
-		const handler = (e: MediaQueryListEvent) => {
-			prefersReducedMotion = e.matches;
-		};
-		mql.addEventListener('change', handler);
-		documentVisible = !document.hidden;
-		const handleVisibilityChange = () => {
-			documentVisible = !document.hidden;
-		};
-		document.addEventListener('visibilitychange', handleVisibilityChange);
+		const stopMotion = observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+		});
+		const stopVisibility = observePageVisibility((visible) => {
+			documentVisible = visible;
+		});
 
 		let frameId: number | undefined;
 		let lastTime = 0;
@@ -86,21 +86,15 @@
 		});
 
 		$effect(() => {
-			if (!element || typeof IntersectionObserver === 'undefined') return;
-
-			const observer = new IntersectionObserver((entries) => {
-				const entry = entries[0];
-				inViewport = entry?.isIntersecting ?? true;
+			if (!element) return;
+			return observeInViewport(element, (inView) => {
+				inViewport = inView;
 			});
-
-			observer.observe(element);
-
-			return () => observer.disconnect();
 		});
 
 		return () => {
-			document.removeEventListener('visibilitychange', handleVisibilityChange);
-			mql.removeEventListener('change', handler);
+			stopMotion();
+			stopVisibility();
 		};
 	});
 

package/dist/drag-and-drop/context.svelte.d.ts

@@ -5,6 +5,8 @@ export interface DragAndDropContext {
     readonly orientation: 'vertical' | 'horizontal';
     readonly hasHandle: boolean;
     readonly foreignOverIndex: number | null;
+    readonly instructionsId: string;
+    readonly itemCount: number;
     registerHandle: () => void;
     startDrag: (index: number, event: PointerEvent) => void;
     handleDragOver: (index: number) => void;

package/dist/drag-and-drop/drag-and-drop-handle.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeIds } from '@dryui/primitives';
 	import { getDragAndDropCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -8,11 +9,17 @@
 		children?: Snippet | undefined;
 	}
 
-	let { index, children, class: className, ...rest }: Props = $props();
+	let {
+		index,
+		children,
+		'aria-describedby': ariaDescribedBy,
+		'aria-label': ariaLabel,
+		class: className,
+		...rest
+	}: Props = $props();
 
 	const ctx = getDragAndDropCtx();
 
-	// Register that a handle exists so items don't initiate drag themselves
 	ctx.registerHandle();
 
 	function handlePointerDown(e: PointerEvent) {
@@ -28,18 +35,40 @@
 			ctx.endDrag();
 		}
 	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		const upKey = ctx.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+		const downKey = ctx.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+
+		if (e.key === upKey) {
+			e.preventDefault();
+			ctx.moveItem(index, 'up');
+		}
+
+		if (e.key === downKey) {
+			e.preventDefault();
+			ctx.moveItem(index, 'down');
+		}
+
+		if (e.key === 'Escape' && ctx.isDragging) {
+			e.preventDefault();
+			ctx.cancelDrag();
+		}
+	}
 </script>
 
 <div
 	role="button"
 	tabindex="0"
-	aria-roledescription="drag handle"
-	aria-label="Drag to reorder"
-	aria-pressed={ctx.isDragging && ctx.draggedIndex === index ? 'true' : undefined}
+	aria-roledescription="reorder handle"
+	aria-label={ariaLabel ?? `Reorder item ${index + 1}`}
+	aria-describedby={mergeIds(ariaDescribedBy, ctx.instructionsId)}
+	aria-keyshortcuts={ctx.orientation === 'vertical' ? 'ArrowUp ArrowDown' : 'ArrowLeft ArrowRight'}
 	data-dnd-handle
 	data-dragging={ctx.isDragging && ctx.draggedIndex === index ? '' : undefined}
 	onpointerdown={handlePointerDown}
 	onpointerup={handlePointerUp}
+	onkeydown={handleKeydown}
 	{...rest}
 	class={className}
 >

package/dist/drag-and-drop/drag-and-drop-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { mergeIds } from '@dryui/primitives';
 	import { getDragAndDropCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -8,7 +9,13 @@
 		children: Snippet<[{ isDragging: boolean; isOver: boolean }]>;
 	}
 
-	let { index, children, class: className, ...rest }: Props = $props();
+	let {
+		index,
+		children,
+		'aria-describedby': ariaDescribedBy,
+		class: className,
+		...rest
+	}: Props = $props();
 
 	const ctx = getDragAndDropCtx();
 
@@ -18,22 +25,17 @@
 			ctx.foreignOverIndex === index
 	);
 
-	let grabbing = $state(false);
-
 	function handlePointerDown(e: PointerEvent) {
 		// Only start drag if there's no handle registered (drag from whole item)
 		if (!ctx.hasHandle) {
 			e.preventDefault();
 			ctx.startDrag(index, e);
-			grabbing = true;
 		}
 	}
 
-	function handlePointerUp() {
-		grabbing = false;
-	}
-
 	function handleKeydown(e: KeyboardEvent) {
+		if (ctx.hasHandle) return;
+
 		if (e.key === ' ' || e.key === 'Enter') {
 			e.preventDefault();
 			if (ctx.isDragging && ctx.draggedIndex === index) {
@@ -54,25 +56,32 @@
 			ctx.moveItem(index, 'down');
 		}
 
-		if (e.key === 'Escape') {
+		if (e.key === 'Escape' && ctx.isDragging) {
 			e.preventDefault();
 			ctx.cancelDrag();
 		}
 	}
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (keyboard reordering keeps the item itself focusable when there is no separate handle) -->
 <div
-	role="option"
-	tabindex="0"
-	aria-roledescription="sortable"
-	aria-label="Item {index + 1}, press Space to grab, arrow keys to move"
+	role="listitem"
+	tabindex={ctx.hasHandle ? undefined : 0}
+	aria-roledescription="sortable item"
+	aria-posinset={index + 1}
+	aria-setsize={ctx.itemCount}
+	aria-describedby={mergeIds(ariaDescribedBy, !ctx.hasHandle ? ctx.instructionsId : undefined)}
+	aria-keyshortcuts={!ctx.hasHandle
+		? ctx.orientation === 'vertical'
+			? 'ArrowUp ArrowDown'
+			: 'ArrowLeft ArrowRight'
+		: undefined}
 	data-dnd-item
 	data-index={index}
 	data-dragging={itemIsDragging ? '' : undefined}
 	data-drag-active={ctx.isDragging ? '' : undefined}
 	data-over={isOver ? '' : undefined}
 	onpointerdown={handlePointerDown}
-	onpointerup={handlePointerUp}
 	onkeydown={handleKeydown}
 	{...rest}
 	class={className}

package/dist/drag-and-drop/drag-and-drop-root.svelte

@@ -2,6 +2,7 @@
 	import { flushSync } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createId, mergeIds } from '@dryui/primitives';
 	import { setDragAndDropCtx } from './context.svelte.js';
 	import { getGroupCtx } from './group-context.svelte.js';
 
@@ -19,6 +20,7 @@
 		orientation = 'vertical',
 		listId,
 		children,
+		'aria-describedby': ariaDescribedBy,
 		class: className,
 		...rest
 	}: Props = $props();
@@ -46,6 +48,16 @@
 	let crossListIndex: number | null = null;
 
 	const groupCtx = getGroupCtx();
+	const instructionsId = createId('dry-dnd-instructions');
+
+	let keyboardInstructions = $derived.by(() => {
+		const arrowKeys =
+			orientation === 'vertical' ? 'Arrow Up and Arrow Down' : 'Arrow Left and Arrow Right';
+		if (hasHandle) {
+			return `Use the reorder handle and ${arrowKeys} to move items. Drag with a pointer to reorder, and press Escape to cancel an active drag.`;
+		}
+		return `Focus an item and use ${arrowKeys} to move it. Drag with a pointer to reorder, and press Escape to cancel an active drag.`;
+	});
 
 	// Register with group when inside one
 	$effect(() => {
@@ -71,6 +83,30 @@
 	const FLIP_DURATION = 200;
 	const FLIP_EASING = 'cubic-bezier(0.2, 0, 0, 1)';
 
+	function getInsertAt(from: number, to: number) {
+		return to > from ? to - 1 : to;
+	}
+
+	function announceReorder(from: number, to: number) {
+		if (to === from || to === from + 1) return;
+		const insertAt = getInsertAt(from, to);
+		announce(`Item moved to position ${insertAt + 1} of ${items.length}`);
+	}
+
+	function focusReorderedControl(index: number) {
+		const targetItem = rootElement?.querySelector<HTMLElement>(
+			`[data-dnd-item][data-index="${index}"]`
+		);
+		if (!targetItem) return;
+
+		if (hasHandle) {
+			targetItem.querySelector<HTMLElement>('[data-dnd-handle]')?.focus();
+			return;
+		}
+
+		targetItem.focus();
+	}
+
 	function captureRects(): Map<number, DOMRect> {
 		const rects = new Map<number, DOMRect>();
 		if (!rootElement) return rects;
@@ -85,7 +121,7 @@
 		if (to === from || to === from + 1) return;
 
 		const firstRects = captureRects();
-		const insertAt = to > from ? to - 1 : to;
+		const insertAt = getInsertAt(from, to);
 
 		const newItems = [...items];
 		const removed = newItems.splice(from, 1);
@@ -337,7 +373,9 @@
 			isPending = false;
 			isDragging = true;
 			createPreview();
-			announce(`Grabbed item at position ${(draggedIndex ?? 0) + 1}. Use arrow keys to move.`);
+			announce(
+				`Grabbed item at position ${(draggedIndex ?? 0) + 1} of ${items.length}. Drag to move and release to drop.`
+			);
 		}
 
 		if (isDragging) {
@@ -360,7 +398,7 @@
 			) {
 				resetState();
 				groupCtx.move(listId, from, toListId, toIdx);
-				announce('Item moved to another list');
+				announce(`Item moved to position ${toIdx + 1} in another list`);
 				return;
 			}
 			animateCrossListDrop(from, toListId, toIdx);
@@ -379,6 +417,7 @@
 			) {
 				resetState();
 				applyReorder(from, to);
+				announceReorder(from, to);
 				return;
 			}
 			animateDrop(from, to);
@@ -490,6 +529,7 @@
 				isAnimating = false;
 				resetState();
 				applyReorder(from, to);
+				announceReorder(from, to);
 			})
 			.catch(() => {
 				if (placeholderEl) placeholderEl.style.removeProperty('display');
@@ -607,7 +647,7 @@
 				isAnimating = false;
 				resetState();
 				flushSync(() => groupCtx!.move(listId!, from, toListId, toIdx));
-				announce('Item moved to another list');
+				announce(`Item moved to position ${toIdx + 1} in another list`);
 			})
 			.catch(() => {
 				if (placeholderEl) placeholderEl.style.removeProperty('display');
@@ -645,14 +685,6 @@
 		isPending = false;
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && isDragging && !isAnimating) {
-			e.preventDefault();
-			announce('Reorder cancelled');
-			resetState();
-		}
-	}
-
 	setDragAndDropCtx({
 		get draggedIndex() {
 			return draggedIndex;
@@ -672,6 +704,12 @@
 		get foreignOverIndex() {
 			return foreignOverIndex;
 		},
+		get instructionsId() {
+			return instructionsId;
+		},
+		get itemCount() {
+			return items.length;
+		},
 		registerHandle() {
 			hasHandle = true;
 		},
@@ -711,6 +749,7 @@
 			if (toGap !== fromIndex && toGap !== fromIndex + 1) {
 				reorder(fromIndex, toGap);
 				const insertAt = toGap > fromIndex ? toGap - 1 : toGap;
+				focusReorderedControl(insertAt);
 				announce(`Item moved to position ${insertAt + 1} of ${items.length}`);
 			}
 		},
@@ -729,10 +768,13 @@
 
 <div
 	bind:this={rootElement}
-	role="listbox"
+	role="list"
+	aria-roledescription="sortable list"
+	aria-describedby={mergeIds(ariaDescribedBy, instructionsId)}
 	data-dnd-root
 	data-orientation={orientation}
 	data-dragging={isDragging ? '' : undefined}
+	data-handle={hasHandle ? '' : undefined}
 	data-over-end={(isDragging && overIndex !== null && overIndex >= items.length) ||
 	(foreignOverIndex !== null && foreignOverIndex >= items.length)
 		? ''
@@ -740,18 +782,20 @@
 	onpointermove={handlePointerMove}
 	onpointerup={handlePointerUp}
 	onpointercancel={handlePointerCancel}
-	onkeydown={handleKeydown}
 	{...rest}
 	class={className}
 >
 	{@render children()}
-	<div aria-live="assertive" aria-atomic="true" class="liveRegion">
+	<div id={instructionsId} data-dnd-instructions class="assistiveText">
+		{keyboardInstructions}
+	</div>
+	<div data-dnd-live-region aria-live="assertive" aria-atomic="true" class="assistiveText">
 		{liveRegionMessage}
 	</div>
 </div>
 
 <style>
-	.liveRegion {
+	.assistiveText {
 		position: absolute;
 		aspect-ratio: 1;
 		height: 1px;

package/dist/god-rays/god-rays.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { observeOffscreenState } from '@dryui/primitives/internal/motion';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		color?: string | undefined;
@@ -55,6 +56,8 @@
 			node.style.setProperty('--dry-rays-blend', blendMode);
 			node.style.setProperty('--dry-rays-speed', speedValue);
 		});
+
+		$effect(() => observeOffscreenState(node, { rootMargin: '200px' }));
 	}
 
 	// Flash-on-load: background is a computed conic-gradient with a dynamic number of stops
@@ -107,6 +110,14 @@
 		animation: god-rays-rotate var(--dry-rays-speed, 30s) linear infinite;
 	}
 
+	[data-god-rays][data-animated]:not([data-offscreen]) [data-god-rays-layer] {
+		will-change: transform, filter;
+	}
+
+	[data-god-rays][data-offscreen] [data-god-rays-layer] {
+		animation-play-state: paused;
+	}
+
 	@keyframes god-rays-rotate {
 		to {
 			transform: rotate(360deg);

package/dist/gradient-mesh/gradient-mesh.svelte

@@ -4,6 +4,8 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		getReducedMotionPreference,
+		observeInViewport,
+		observePageVisibility,
 		observeReducedMotionPreference,
 		registerPropertyOnce,
 		supportsPropertyRegistration,
@@ -30,6 +32,9 @@
 	let element = $state<HTMLDivElement | null>(null);
 	let prefersReducedMotion = $state(false);
 	let animated = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
+	const paused = $derived(!onScreen || !tabVisible);
 	let pointerX = $state('50%');
 	let pointerY = $state('50%');
 	let pointerFrame = $state<number | null>(null);
@@ -126,19 +131,31 @@
 		};
 
 		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
+		const stopVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+		});
+		let stopViewport = () => {};
+		if (element) {
+			stopViewport = observeInViewport(
+				element,
+				(inView) => {
+					onScreen = inView;
+				},
+				{ rootMargin: '200px' }
+			);
+		}
 
 		if (!supportsPropertyRegistration() || getReducedMotionPreference()) {
 			animated = false;
-			return () => {
-				cancelQueuedPointerPosition();
-				stopMotionObserver();
-			};
+		} else {
+			animated = true;
 		}
 
-		animated = true;
 		return () => {
 			cancelQueuedPointerPosition();
 			stopMotionObserver();
+			stopVisibility();
+			stopViewport();
 		};
 	});
 
@@ -164,6 +181,7 @@
 	data-animated={animated || undefined}
 	data-interactive={interactive || undefined}
 	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
 	onpointermove={interactive ? handlePointerMove : undefined}
 	onpointerleave={interactive ? handlePointerLeave : undefined}
 	{...rest}
@@ -213,6 +231,10 @@
 		animation: mesh-cycle var(--dry-mesh-duration) ease-in-out infinite alternate;
 	}
 
+	[data-gradient-mesh][data-animated][data-paused] {
+		animation-play-state: paused;
+	}
+
 	[data-gradient-mesh][data-interactive] {
 		background:
 			radial-gradient(

package/dist/hover-card/context.svelte.d.ts

@@ -1,10 +1 @@
-interface HoverCardContext {
-    readonly open: boolean;
-    readonly triggerId: string;
-    readonly contentId: string;
-    triggerEl: HTMLElement | null;
-    show: () => void;
-    close: () => void;
-}
-export declare const setHoverCardCtx: (ctx: HoverCardContext) => HoverCardContext, getHoverCardCtx: () => HoverCardContext;
-export {};
+export { setHoverCardCtx, getHoverCardCtx, type HoverCardContext } from '@dryui/primitives';

package/dist/hover-card/context.svelte.js

@@ -1,2 +1 @@
-import { createContext } from '@dryui/primitives';
-export const [setHoverCardCtx, getHoverCardCtx] = createContext('hover-card');
+export { setHoverCardCtx, getHoverCardCtx } from '@dryui/primitives';

package/dist/hover-card/hover-card-content.svelte

@@ -24,6 +24,18 @@
 
 	let contentEl = $state<HTMLDivElement>();
 
+	$effect(() => {
+		if (contentEl) {
+			ctx.contentEl = contentEl;
+
+			return () => {
+				if (ctx.contentEl === contentEl) {
+					ctx.contentEl = null;
+				}
+			};
+		}
+	});
+
 	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
 		contentEl: () => contentEl ?? null,
@@ -35,20 +47,46 @@
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			e.preventDefault();
-			ctx.close();
+			ctx.forceClose();
+			ctx.ignoreNextTriggerFocusOpen = true;
+			ctx.triggerEl?.focus();
 		}
 	}
+
+	function handlePointerEnter() {
+		ctx.contentHovered = true;
+		ctx.showImmediate();
+	}
+
+	function handlePointerLeave() {
+		ctx.contentHovered = false;
+		ctx.close();
+	}
+
+	function handleFocusIn() {
+		ctx.contentFocused = true;
+		ctx.showImmediate();
+	}
+
+	function handleFocusOut() {
+		ctx.contentFocused = false;
+		ctx.close();
+	}
 </script>
 
 <div
 	bind:this={contentEl}
 	id={ctx.contentId}
 	popover="manual"
+	role="dialog"
+	aria-labelledby={ctx.triggerId}
 	data-hover-card-content
 	data-state={ctx.open ? 'open' : 'closed'}
 	use:popover.applyPosition={style}
-	onpointerenter={() => ctx.show()}
-	onpointerleave={() => ctx.close()}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
 	onkeydown={handleKeydown}
 	class={className}
 	{...rest}

package/dist/hover-card/hover-card-root.svelte

@@ -1,59 +1,11 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
-	import { setHoverCardCtx } from './context.svelte.js';
+	import type { ComponentProps } from 'svelte';
+	import { HoverCard as PrimitiveHoverCard } from '@dryui/primitives';
 
-	interface Props {
-		openDelay?: number;
-		closeDelay?: number;
-		children: Snippet;
-	}
-
-	let { openDelay = 700, closeDelay = 300, children }: Props = $props();
-
-	let open = $state(false);
-
-	const triggerId = generateFormId('hovercard-trigger');
-	const contentId = generateFormId('hovercard-content');
-
-	let openTimeout: ReturnType<typeof setTimeout>;
-	let closeTimeout: ReturnType<typeof setTimeout>;
-
-	function show() {
-		clearTimeout(closeTimeout);
-		openTimeout = setTimeout(() => {
-			open = true;
-		}, openDelay);
-	}
-
-	function close() {
-		clearTimeout(openTimeout);
-		closeTimeout = setTimeout(() => {
-			open = false;
-		}, closeDelay);
-	}
-
-	setHoverCardCtx({
-		get open() {
-			return open;
-		},
-		get triggerId() {
-			return triggerId;
-		},
-		get contentId() {
-			return contentId;
-		},
-		triggerEl: null,
-		show,
-		close
-	});
-
-	$effect(() => {
-		return () => {
-			clearTimeout(openTimeout);
-			clearTimeout(closeTimeout);
-		};
-	});
+	// The styled hover-card only adds theme tokens to trigger/content, so root
+	// is a pure re-export of the primitives implementation. The ctx set here is
+	// consumed by the ui trigger/content via the shared primitives ctx key.
+	let props: ComponentProps<typeof PrimitiveHoverCard.Root> = $props();
 </script>
 
-{@render children()}
+<PrimitiveHoverCard.Root {...props} />