@dryui/ui 2.0.2 → 4.0.0

package/dist/displacement/displacement.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
+		getReducedMotionPreference,
 		observeInViewport,
 		observePageVisibility,
 		observeReducedMotionPreference
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		scale?: number;
@@ -26,9 +26,9 @@
 	}: Props = $props();
 
 	const filterId = `dry-displacement-${Math.random().toString(36).slice(2, 8)}`;
-	let element = $state<HTMLElement | null>(null);
+	let element = $state<HTMLDivElement>();
 	let seed = $state(1);
-	let prefersReducedMotion = $state(false);
+	let prefersReducedMotion = $state(getReducedMotionPreference());
 	let documentVisible = $state(true);
 	let inViewport = $state(true);
 
@@ -43,23 +43,21 @@
 		animated && !prefersReducedMotion && documentVisible && inViewport
 	);
 
-	function captureElement(node: HTMLElement) {
-		element = node;
-		return {
-			destroy() {
-				if (element === node) element = null;
-			}
-		};
-	}
-
-	onMount(() => {
+	$effect(() => {
 		const stopMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 		});
 		const stopVisibility = observePageVisibility((visible) => {
 			documentVisible = visible;
 		});
+		return () => {
+			stopMotion();
+			stopVisibility();
+		};
+	});
 
+	$effect(() => {
+		if (!shouldAnimate) return;
 		let frameId: number | undefined;
 		let lastTime = 0;
 		const FPS_INTERVAL = 1000 / 12;
@@ -73,40 +71,29 @@
 			frameId = requestAnimationFrame(animate);
 		}
 
-		$effect(() => {
-			if (shouldAnimate) {
-				frameId = requestAnimationFrame(animate);
+		frameId = requestAnimationFrame(animate);
+		return () => {
+			if (frameId !== undefined) {
+				cancelAnimationFrame(frameId);
 			}
-			return () => {
-				if (frameId !== undefined) {
-					cancelAnimationFrame(frameId);
-					frameId = undefined;
-				}
-			};
-		});
+		};
+	});
 
-		$effect(() => {
-			if (!element) return;
-			return observeInViewport(element, (inView) => {
-				inViewport = inView;
-			});
+	$effect(() => {
+		if (!element) return;
+		return observeInViewport(element, (inView) => {
+			inViewport = inView;
 		});
-
-		return () => {
-			stopMotion();
-			stopVisibility();
-		};
 	});
 
 	// Flash-on-load: filter references a runtime-generated SVG filter ID (url(#${filterId})),
 	// so no CSS default is possible — the ID isn't known until mount. The SVG <filter> element
-	// is in the same template, so the @attach sets it immediately on first paint.
-	function applyFilterStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('filter', `url(#${filterId})`);
-		});
-	}
+	// is in the same template, so the $effect sets it immediately on first paint.
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		element.style.setProperty('filter', `url(#${filterId})`);
+	});
 </script>
 
 <svg data-displacement-svg width="0" height="0" aria-hidden="true">
@@ -125,8 +112,7 @@
 </svg>
 
 <div
-	{@attach captureElement}
-	{@attach applyFilterStyles}
+	bind:this={element}
 	data-displacement
 	class={className}
 	data-turbulence={turbulence}

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

@@ -42,6 +42,8 @@
 	let previewEl: HTMLElement | null = null;
 	let rafId: number | null = null;
 	let isAnimating = false;
+	let liftShadow = '';
+	let dropShadow = '';
 
 	// Cross-list state
 	let crossListTarget: string | null = null;
@@ -161,6 +163,14 @@
 		});
 	}
 
+	function readShadowTokens() {
+		const root = document.documentElement;
+		const md = getComputedStyle(root).getPropertyValue('--dry-shadow-md').trim();
+		const lg = getComputedStyle(root).getPropertyValue('--dry-shadow-lg').trim();
+		liftShadow = lg || '0 24px 48px -12px rgba(0,0,0,0.18), 0 12px 24px -8px rgba(0,0,0,0.1)';
+		dropShadow = md || '0 1px 3px rgba(0,0,0,0.1)';
+	}
+
 	function createPreview() {
 		if (!rootElement || draggedIndex === null) return;
 
@@ -169,6 +179,8 @@
 		);
 		if (!draggedEl) return;
 
+		readShadowTokens();
+
 		const rect = draggedEl.getBoundingClientRect();
 
 		const clone = draggedEl.cloneNode(true) as HTMLElement;
@@ -197,7 +209,7 @@
 			pointerEvents: 'none',
 			willChange: 'transform',
 			zIndex: '9999',
-			boxShadow: '0 24px 48px -12px rgba(0,0,0,0.18), 0 12px 24px -8px rgba(0,0,0,0.1)',
+			boxShadow: liftShadow,
 			transition: 'none'
 		});
 
@@ -542,11 +554,11 @@
 				[
 					{
 						transform: `translate3d(${currentDx}px, ${currentDy}px, 0) rotate(3deg) scale(1.04)`,
-						boxShadow: '0 24px 48px -12px rgba(0,0,0,0.18), 0 12px 24px -8px rgba(0,0,0,0.1)'
+						boxShadow: liftShadow
 					},
 					{
 						transform: `translate3d(${finalDx}px, ${finalDy}px, 0) rotate(0deg) scale(1)`,
-						boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
+						boxShadow: dropShadow
 					}
 				],
 				{ duration: FLIP_DURATION, easing: FLIP_EASING, fill: 'forwards' }
@@ -660,11 +672,11 @@
 				[
 					{
 						transform: `translate3d(${currentDx}px, ${currentDy}px, 0) rotate(3deg) scale(1.04)`,
-						boxShadow: '0 24px 48px -12px rgba(0,0,0,0.18), 0 12px 24px -8px rgba(0,0,0,0.1)'
+						boxShadow: liftShadow
 					},
 					{
 						transform: `translate3d(${finalDx}px, ${finalDy}px, 0) rotate(0deg) scale(1)`,
-						boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
+						boxShadow: dropShadow
 					}
 				],
 				{ duration: FLIP_DURATION, easing: FLIP_EASING, fill: 'forwards' }

package/dist/drag-and-drop/index.d.ts

@@ -1,4 +1,17 @@
-export type { DragAndDropRootProps, DragAndDropItemProps, DragAndDropHandleProps } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type { DragAndDropItemProps, DragAndDropHandleProps } from '@dryui/primitives';
+export interface DragAndDropRootProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    items: T[];
+    onReorder: (items: T[]) => void;
+    orientation?: 'vertical' | 'horizontal';
+    listId?: string;
+    children: Snippet;
+}
+export interface DragAndDropGroupProps {
+    onMove: (fromListId: string, fromIndex: number, toListId: string, toIndex: number) => void;
+    children: Snippet;
+}
 import DragAndDropRoot from './drag-and-drop-root.svelte';
 import DragAndDropItem from './drag-and-drop-item.svelte';
 import DragAndDropHandle from './drag-and-drop-handle.svelte';

package/dist/drop-zone/drop-zone.svelte

@@ -70,9 +70,9 @@
 
 <style>
 	[data-drop-zone] {
-		padding: var(--dry-space-6) var(--dry-space-8);
-		border: 1px dashed var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-md);
+		padding: var(--dry-drop-zone-padding, var(--dry-space-6) var(--dry-space-8));
+		border: 1px dashed var(--dry-drop-zone-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-drop-zone-radius, var(--dry-radius-md));
 		text-align: center;
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
@@ -82,7 +82,10 @@
 
 	[data-drop-zone][data-active] {
 		border-color: var(--dry-color-stroke-strong);
-		background: color-mix(in srgb, var(--dry-color-fill-brand) 5%, transparent);
+		background: var(
+			--dry-drop-zone-active-bg,
+			color-mix(in srgb, var(--dry-color-fill-brand) 5%, transparent)
+		);
 	}
 
 	[data-drop-zone-text] {

package/dist/dropdown-menu/dropdown-menu-content.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover, createMenuNavigation } from '@dryui/primitives';
+	import { createAnchoredPopover, createDismiss, createMenuNavigation } from '@dryui/primitives';
 	import type { Placement } from '@dryui/primitives';
 	import { getDropdownMenuCtx } from './context.svelte.js';
 
@@ -23,17 +22,7 @@
 
 	const ctx = getDropdownMenuCtx();
 
-	let el = $state<HTMLDivElement | null>(null);
-
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
+	let el = $state<HTMLDivElement>();
 
 	const popover = createAnchoredPopover({
 		triggerEl: () => ctx.triggerEl,
@@ -47,12 +36,21 @@
 		container: () => el ?? null,
 		orientation: 'vertical'
 	});
+
+	createDismiss({
+		enabled: () => ctx.open,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => ctx.triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => ctx.triggerEl
+	});
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
-	popover="auto"
+	bind:this={el}
+	use:popover.applyPosition={style}
+	popover="manual"
 	role="menu"
 	tabindex="-1"
 	id={ctx.contentId}
@@ -91,6 +89,7 @@
 		border-radius: var(--dry-menu-radius, var(--dry-overlay-radius, var(--dry-radius-popover)));
 		box-shadow: var(--dry-menu-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
 		display: grid;
+		font-family: var(--dry-font-sans);
 		grid-template-columns: minmax(12rem, auto);
 		padding: var(--dry-menu-padding, var(--dry-space-2));
 		--dry-radius-nested: max(

package/dist/field/field-description.svelte

@@ -11,21 +11,18 @@
 
 	const ctx = getFormControlCtx();
 
-	function registerDescription() {
+	let el = $state<HTMLParagraphElement>();
+
+	$effect(() => {
+		if (!el) return;
 		ctx?.registerDescription(true);
 		return () => {
 			ctx?.registerDescription(false);
 		};
-	}
+	});
 </script>
 
-<p
-	{@attach registerDescription}
-	id={ctx?.descriptionId}
-	data-field-description
-	class={className}
-	{...rest}
->
+<p bind:this={el} id={ctx?.descriptionId} data-field-description class={className} {...rest}>
 	{@render children()}
 </p>
 

package/dist/field/field-error.svelte

@@ -11,23 +11,19 @@
 
 	const ctx = getFormControlCtx();
 
-	function registerError() {
+	let el = $state<HTMLParagraphElement>();
+
+	$effect(() => {
+		if (!el) return;
 		ctx?.registerError(true);
 		return () => {
 			ctx?.registerError(false);
 		};
-	}
+	});
 </script>
 
 {#if ctx?.hasError}
-	<p
-		{@attach registerError}
-		id={ctx.errorId}
-		role="alert"
-		data-field-error
-		class={className}
-		{...rest}
-	>
+	<p bind:this={el} id={ctx.errorId} role="alert" data-field-error class={className} {...rest}>
 		{@render children()}
 	</p>
 {/if}

package/dist/file-select/file-select-root.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { setFileSelectCtx } from './context.svelte.js';
 
-	interface Props {
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
 		value?: string | null;
+		accept?: string | undefined;
+		directory?: boolean | undefined;
 		onrequest?: (() => Promise<string | null>) | undefined;
 		onchange?: ((value: string | null) => void) | undefined;
 		disabled?: boolean | undefined;
@@ -12,27 +15,58 @@
 
 	let {
 		value = $bindable(null),
+		accept = '',
+		directory = true,
 		onrequest,
 		onchange,
 		disabled = false,
-		children
+		class: className,
+		children,
+		...rest
 	}: Props = $props();
 
 	let loading = $state(false);
+	let fallbackInputEl = $state<HTMLInputElement>();
+
+	function commitValue(nextValue: string | null) {
+		if (nextValue === null) return;
+
+		value = nextValue;
+		onchange?.(nextValue);
+	}
+
+	function getFallbackInputValue(files: FileList | null): string | null {
+		const file = files?.[0];
+		if (!file) return null;
+
+		const directoryName = file.webkitRelativePath.split('/').find(Boolean);
+		return directory && directoryName ? directoryName : file.name;
+	}
+
+	function openFallbackInput() {
+		if (!fallbackInputEl) return;
+
+		fallbackInputEl.value = '';
+		fallbackInputEl.click();
+	}
 
 	async function defaultRequest(): Promise<string | null> {
 		if (typeof window === 'undefined') return null;
-		if (!('showDirectoryPicker' in window)) return null;
-		try {
-			const handle = await (
-				window as unknown as {
-					showDirectoryPicker: (opts: { mode: string }) => Promise<{ name: string }>;
-				}
-			).showDirectoryPicker({ mode: 'read' });
-			return handle.name;
-		} catch {
-			return null;
+		if (directory && 'showDirectoryPicker' in window) {
+			try {
+				const handle = await (
+					window as unknown as {
+						showDirectoryPicker: (opts: { mode: string }) => Promise<{ name: string }>;
+					}
+				).showDirectoryPicker({ mode: 'read' });
+				return handle.name;
+			} catch (error) {
+				if (error instanceof DOMException && error.name === 'AbortError') return null;
+			}
 		}
+
+		openFallbackInput();
+		return null;
 	}
 
 	async function request() {
@@ -41,15 +75,17 @@
 		try {
 			const pick = onrequest ?? defaultRequest;
 			const result = await pick();
-			if (result !== null) {
-				value = result;
-				onchange?.(result);
-			}
+			commitValue(result);
 		} finally {
 			loading = false;
 		}
 	}
 
+	function handleFallbackInputChange(event: Event & { currentTarget: HTMLInputElement }) {
+		commitValue(getFallbackInputValue(event.currentTarget.files));
+		event.currentTarget.value = '';
+	}
+
 	function clear() {
 		if (disabled) return;
 		value = null;
@@ -71,23 +107,42 @@
 	});
 </script>
 
-<div data-file-select data-disabled={disabled || undefined}>
+<div data-file-select data-disabled={disabled || undefined} class={className} {...rest}>
+	<input
+		bind:this={fallbackInputEl}
+		type="file"
+		{accept}
+		webkitdirectory={directory}
+		disabled={disabled || undefined}
+		aria-hidden="true"
+		tabindex="-1"
+		class="file-select-hidden-input"
+		onchange={handleFallbackInputChange}
+	/>
+
 	{@render children()}
 </div>
 
 <style>
+	.file-select-hidden-input {
+		display: none;
+		position: absolute;
+		height: 0;
+		overflow: hidden;
+	}
+
 	[data-file-select] {
 		container-type: inline-size;
 		display: grid;
 		grid-template-columns: max-content minmax(0, 1fr) max-content;
 		align-items: center;
 		gap: var(--dry-space-2);
-		padding: var(--dry-space-2) var(--dry-space-3);
+		padding: var(--dry-file-select-padding-y, var(--dry-space-2))
+			var(--dry-file-select-padding-x, var(--dry-space-3));
 		font-family: var(--dry-font-sans);
-		background: var(--dry-color-bg-raised);
-		/* dryui-allow solid-border-on-raised: file select is a form control and needs a persistent field edge. */
-		border: 1px solid var(--dry-color-stroke-strong);
-		border-radius: var(--dry-radius-md);
+		background: var(--dry-file-select-bg, var(--dry-color-bg-raised));
+		border: 1px solid var(--dry-file-select-border, var(--dry-color-stroke-strong));
+		border-radius: var(--dry-file-select-radius, var(--dry-radius-md));
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			background var(--dry-duration-fast) var(--dry-ease-default);

package/dist/file-select/file-select-root.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
     value?: string | null;
+    accept?: string | undefined;
+    directory?: boolean | undefined;
     onrequest?: (() => Promise<string | null>) | undefined;
     onchange?: ((value: string | null) => void) | undefined;
     disabled?: boolean | undefined;

package/dist/file-upload/file-upload-dropzone.svelte

@@ -81,22 +81,22 @@
 
 <style>
 	[data-fu-dropzone] {
-		--dry-fu-border: var(--dry-color-stroke-strong);
-		--dry-fu-bg: var(--dry-color-fill-weaker);
-		--dry-fu-padding: var(--dry-space-6);
-		--dry-fu-min-height: 120px;
-		--dry-fu-font-size: var(--dry-type-small-size);
+		--_fu-border-default: var(--dry-color-stroke-strong);
+		--_fu-bg-default: var(--dry-color-fill-weaker);
+		--_fu-padding-default: var(--dry-space-6);
+		--_fu-min-height-default: 120px;
+		--_fu-font-size-default: var(--dry-type-small-size);
 
 		display: grid;
 		place-items: center;
 		gap: var(--dry-space-2);
-		min-height: var(--dry-fu-min-height);
-		padding: var(--dry-fu-padding);
-		font-size: var(--dry-fu-font-size);
+		min-height: var(--dry-fu-min-height, var(--_fu-min-height-default));
+		padding: var(--dry-fu-padding, var(--_fu-padding-default));
+		font-size: var(--dry-fu-font-size, var(--_fu-font-size-default));
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-weak);
-		background: var(--dry-fu-bg);
-		border: 2px dashed var(--dry-fu-border);
+		background: var(--dry-fu-bg, var(--_fu-bg-default));
+		border: 2px dashed var(--dry-fu-border, var(--_fu-border-default));
 		border-radius: var(--dry-fu-radius, var(--dry-radius-xl));
 		cursor: pointer;
 		text-align: center;
@@ -109,12 +109,12 @@
 	[data-fu-dropzone]:focus-visible {
 		outline: var(--dry-focus-ring);
 		outline-offset: 2px;
-		--dry-fu-border: var(--dry-color-focus-ring);
+		--_fu-border-default: var(--dry-color-focus-ring);
 	}
 
 	[data-fu-dropzone][data-dragging] {
-		--dry-fu-border: var(--dry-color-fill-brand);
-		--dry-fu-bg: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
+		--_fu-border-default: var(--dry-color-fill-brand);
+		--_fu-bg-default: color-mix(in srgb, var(--dry-color-fill-brand) 8%, transparent);
 		color: var(--dry-color-fill-brand);
 	}
 
@@ -125,21 +125,21 @@
 	}
 
 	[data-fu-dropzone][data-size='sm'] {
-		--dry-fu-padding: var(--dry-space-4);
-		--dry-fu-min-height: 80px;
-		--dry-fu-font-size: var(--dry-type-tiny-size);
+		--_fu-padding-default: var(--dry-space-4);
+		--_fu-min-height-default: 80px;
+		--_fu-font-size-default: var(--dry-type-tiny-size);
 	}
 
 	[data-fu-dropzone][data-size='lg'] {
-		--dry-fu-padding: var(--dry-space-8);
-		--dry-fu-min-height: 160px;
-		--dry-fu-font-size: var(--dry-type-heading-4-size);
+		--_fu-padding-default: var(--dry-space-8);
+		--_fu-min-height-default: 160px;
+		--_fu-font-size-default: var(--dry-type-heading-4-size);
 	}
 
 	@container (max-width: 300px) {
 		[data-fu-dropzone] {
-			--dry-fu-padding: var(--dry-space-4);
-			--dry-fu-min-height: 80px;
+			--_fu-padding-default: var(--dry-space-4);
+			--_fu-min-height-default: 80px;
 		}
 	}
 </style>

package/dist/file-upload/file-upload-item.svelte

@@ -12,7 +12,7 @@
 	let { file, index, children, class: className, size = 'md', ...rest }: Props = $props();
 </script>
 
-<li class={className} data-index={index} {...rest}>
+<li data-fu-item data-size={size} class={className} data-index={index} {...rest}>
 	{@render children()}
 </li>
 
@@ -27,7 +27,6 @@
 		font-family: var(--dry-font-sans);
 		color: var(--dry-color-text-strong);
 		background: var(--dry-color-bg-raised);
-		/* dryui-allow solid-border-on-raised: uploaded file rows need a visible item boundary in dense lists. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);
 	}

package/dist/file-upload/file-upload-list.svelte

@@ -13,7 +13,7 @@
 	const ctx = getFileUploadCtx();
 </script>
 
-<ul class={className} {...rest}>
+<ul data-fu-list data-size={size} class={className} {...rest}>
 	{#each ctx.files as file, index}
 		{@render children({ file, index })}
 	{/each}

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

@@ -89,8 +89,8 @@
 		z-index: 3;
 		display: grid;
 		border-radius: inherit;
-		--dry-btn-bg: transparent;
-		--dry-btn-border: transparent;
+		--dry-btn-bg: var(--dry-flip-card-toggle-overlay-bg, transparent);
+		--dry-btn-border: var(--dry-flip-card-toggle-overlay-border, transparent);
 		--dry-btn-color: inherit;
 		--dry-btn-padding-x: 0;
 		--dry-btn-padding-y: 0;

package/dist/float-button/context.svelte.d.ts

@@ -1,6 +1,8 @@
 interface FloatButtonContext {
     readonly open: boolean;
+    readonly menuId: string;
     toggle: () => void;
+    close: () => void;
 }
 export declare const setFloatButtonCtx: (ctx: FloatButtonContext) => FloatButtonContext, getFloatButtonCtx: () => FloatButtonContext;
 export {};