@dryui/ui 3.0.0 → 4.0.1

package/dist/date-range-picker/date-range-picker-button-trigger.svelte

@@ -1,28 +1,27 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import Button from '../button/button.svelte';
+	import { variantAttrs } from '@dryui/primitives';
 	import { getDateRangePickerCtx } from './context.svelte.js';
 	import { formatDate } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		size?: 'sm' | 'md' | 'lg';
 		placeholder?: string;
 		children?: Snippet | undefined;
 	}
 
-	let { placeholder = 'Select date range', children, ...rest }: Props = $props();
+	let { size = 'md', placeholder = 'Select date range', children, ...rest }: Props = $props();
 
 	const ctx = getDateRangePickerCtx();
 
+	let triggerEl = $state<HTMLButtonElement>();
+
 	$effect(() => {
-		const node = document.getElementById(ctx.triggerId);
-		if (node) {
-			ctx.triggerEl = node as HTMLButtonElement;
-		}
+		if (!triggerEl) return;
+		ctx.triggerEl = triggerEl;
 		return () => {
-			if (ctx.triggerEl && ctx.triggerEl.id === ctx.triggerId) {
-				ctx.triggerEl = null;
-			}
+			if (ctx.triggerEl === triggerEl) ctx.triggerEl = null;
 		};
 	});
 
@@ -43,35 +42,147 @@
 	});
 </script>
 
-<Button
-	variant="outline"
-	type="button"
-	id={ctx.triggerId}
-	aria-haspopup="dialog"
-	aria-expanded={ctx.open}
-	aria-controls={ctx.contentId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-disabled={ctx.disabled ? '' : undefined}
-	disabled={ctx.disabled}
-	popovertarget={ctx.contentId}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<span data-placeholder={!ctx.startDate ? '' : undefined}>
-			{displayText || placeholder}
-		</span>
-	{/if}
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		aria-hidden="true"
-		><rect x="3" y="4" width="18" height="17" rx="2" ry="2" /><path
-			d="M16 2v4M8 2v4M3 10h18"
-		/></svg
+<span class="wrapper">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		id={ctx.triggerId}
+		popovertarget={ctx.contentId}
+		aria-haspopup="dialog"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.contentId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-date-range-trigger
+		disabled={ctx.disabled}
+		data-disabled={ctx.disabled || undefined}
+		{...variantAttrs({ size })}
+		{...rest}
 	>
-</Button>
+		<span data-content>
+			{#if children}
+				{@render children()}
+			{:else}
+				<span data-placeholder={!ctx.startDate ? '' : undefined}>
+					{displayText || placeholder}
+				</span>
+			{/if}
+		</span>
+		<svg
+			data-indicator
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+			><rect x="3" y="4" width="18" height="17" rx="2" ry="2" /><path
+				d="M16 2v4M8 2v4M3 10h18"
+			/></svg
+		>
+	</button>
+</span>
+
+<style>
+	.wrapper {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	[data-date-range-trigger] {
+		/* Form-control surface — derives from --dry-form-control-* so it stays
+		   visually consistent with <Input>/<Select.Trigger>, regardless of
+		   ambient --dry-btn-* overrides from a surrounding container's nested radius. */
+		--_drt-bg: var(--dry-date-range-trigger-bg, var(--dry-form-control-bg));
+		--_drt-border: var(--dry-date-range-trigger-border, var(--dry-form-control-border));
+		--_drt-color: var(--dry-date-range-trigger-color, var(--dry-form-control-color));
+		--_drt-radius: var(--dry-date-range-trigger-radius, var(--dry-form-control-radius));
+		--_drt-padding-x: var(
+			--dry-date-range-trigger-padding-x,
+			var(--dry-form-control-padding-inline)
+		);
+		--_drt-padding-y: var(
+			--dry-date-range-trigger-padding-y,
+			var(--dry-form-control-padding-block)
+		);
+		--_drt-font-size: var(--dry-date-range-trigger-font-size, var(--dry-form-control-font-size));
+
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding-block: var(--_drt-padding-y);
+		padding-inline: var(--_drt-padding-x);
+		font-size: var(--_drt-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--_drt-color);
+		background: var(--_drt-bg);
+		border: 1px solid var(--_drt-border);
+		border-radius: var(--_drt-radius);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: start;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-date-range-trigger] [data-content] {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-date-range-trigger] [data-placeholder] {
+		color: var(--dry-form-control-color-placeholder);
+	}
+
+	[data-date-range-trigger]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-date-range-trigger]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-date-range-trigger][data-disabled] {
+		--dry-date-range-trigger-bg: var(--dry-color-bg-sunken);
+		--dry-date-range-trigger-border: var(--dry-color-stroke-disabled);
+		--dry-date-range-trigger-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-date-range-trigger][data-size='sm'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-2);
+		--dry-date-range-trigger-padding-y: var(--dry-space-1);
+		--dry-date-range-trigger-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-date-range-trigger][data-size='md'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-3);
+		--dry-date-range-trigger-padding-y: var(--dry-space-2);
+		--dry-date-range-trigger-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-date-range-trigger][data-size='lg'] {
+		--dry-date-range-trigger-padding-x: var(--dry-space-4);
+		--dry-date-range-trigger-padding-y: var(--dry-space-2_5);
+		--dry-date-range-trigger-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	svg[data-indicator] {
+		height: 1em;
+		aspect-ratio: 1;
+		place-self: center;
+		opacity: 0.7;
+	}
+</style>

package/dist/date-range-picker/date-range-picker-button-trigger.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+    size?: 'sm' | 'md' | 'lg';
     placeholder?: string;
     children?: Snippet | undefined;
 }

package/dist/date-range-picker/index.d.ts

@@ -1,4 +1,7 @@
-export type { DateRangePickerRootProps, DateRangePickerTriggerProps, DateRangePickerContentProps, DateRangePickerCalendarProps, DateRangePickerPresetProps } from '@dryui/primitives';
+import type { CalendarEventGridProps } from '../internal/calendar-event-layout.js';
+export type { DateRangePickerRootProps, DateRangePickerTriggerProps, DateRangePickerContentProps, DateRangePickerPresetProps } from '@dryui/primitives';
+export interface DateRangePickerCalendarProps extends CalendarEventGridProps {
+}
 import DateRangePickerRoot from './date-range-picker-root.svelte';
 import DateRangePickerTrigger from './date-range-picker-button-trigger.svelte';
 import DateRangePickerContent from './date-range-picker-content.svelte';

package/dist/diagram/edge-routing.js

@@ -57,8 +57,8 @@ export function computeEdgePaths(edges, positions, nodeDims, direction, opts = {
             const midpoint = getMidpointFromCollapsed(collapsed);
             const labelOffset = side === 'over' ? -10 : side === 'under' ? 14 : 0;
             out.push({
-                from: edge.from,
-                to: edge.to,
+                from: sourceId,
+                to: targetId,
                 path,
                 label: edge.label,
                 labelX: midpoint.x,
@@ -71,14 +71,25 @@ export function computeEdgePaths(edges, positions, nodeDims, direction, opts = {
             collapsedOut.push(collapsed);
             return;
         }
-        const endpoints = getEndpoints(edge, positions, nodeDims, horizontal);
+        // For forward cross-cluster edges where BOTH endpoints sit inside
+        // directed clusters, anchor to the inner nodes so the arrow points at
+        // the specific item rather than the cluster super-node center. If only
+        // one endpoint is inside a cluster, keep super-node anchoring — that
+        // keeps `outer → inner` edges reading as "enter the cluster" instead
+        // of forcing a Z-shape that conflicts with the inner flow.
+        const overrides = backEdgeAnchorOverrides?.get(edgeKey(edge));
+        const useInnerAnchors = !!(overrides?.source && overrides?.target);
+        const routedEdge = useInnerAnchors
+            ? { ...edge, from: overrides.source, to: overrides.target }
+            : edge;
+        const endpoints = getEndpoints(routedEdge, positions, nodeDims, horizontal);
         if (!endpoints) {
             out.push(emptyEdge(edge));
             collapsedOut.push(null);
             return;
         }
-        const sourceSiblings = bySource.get(edge.from) || [];
-        const targetSiblings = byTarget.get(edge.to) || [];
+        const sourceSiblings = bySource.get(routedEdge.from) || [];
+        const targetSiblings = byTarget.get(routedEdge.to) || [];
         let points;
         if (horizontal) {
             if (sourceSiblings.length > 1) {
@@ -124,8 +135,8 @@ export function computeEdgePaths(edges, positions, nodeDims, direction, opts = {
         const path = buildPathFromCollapsed(collapsed, cornerRadius);
         const labelPoint = computeLabelAnchor(edge, collapsed, superNodeIds);
         out.push({
-            from: edge.from,
-            to: edge.to,
+            from: routedEdge.from,
+            to: routedEdge.to,
             path,
             label: edge.label,
             labelX: labelPoint.x,

package/dist/diagram/layout.js

@@ -86,10 +86,19 @@ function buildGraph(nodeIds, edges) {
     return { adjacencyOut, adjacencyIn, order, reversedEdges };
 }
 // ── Layer Assignment (longest-path) ────────────────────────
-function assignLayers(order, adjacencyOut) {
+function assignLayers(order, adjacencyOut, options) {
     const layer = new Map();
-    for (const id of order)
-        layer.set(id, 0);
+    if (options?.sequenceMode && options.inputOrder) {
+        // Inside a directed cluster: array order seeds initial layers, so a
+        // cluster like { direction: 'TB', nodes: [a, b, c] } stacks a→b→c by
+        // array order even when the user provides no internal edges.
+        for (const [i, id] of options.inputOrder.entries())
+            layer.set(id, i);
+    }
+    else {
+        for (const id of order)
+            layer.set(id, 0);
+    }
     for (const id of order) {
         const currentLayer = layer.get(id);
         for (const succ of adjacencyOut.get(id)) {
@@ -532,7 +541,7 @@ function resolveAnnotations(config, positions, nodeDims) {
  *  to `finishLayeredPass` to compute edges and waypoints. The split lets the
  *  recursive orchestrator inject inner-node positions between these phases
  *  for cross-boundary back-edge re-anchoring. */
-function computeLayeredPositions(nodes, edges, clusters, direction, spacing) {
+function computeLayeredPositions(nodes, edges, clusters, direction, spacing, sequenceMode = false) {
     const nodeIds = nodes.map((n) => n.id);
     const nodeDims = buildNodeDims(nodes);
     const clusterMap = new Map();
@@ -543,7 +552,10 @@ function computeLayeredPositions(nodes, edges, clusters, direction, spacing) {
         }
     }
     const graph = buildGraph(nodeIds, edges);
-    const layerMap = assignLayers(graph.order, graph.adjacencyOut);
+    const layerMap = assignLayers(graph.order, graph.adjacencyOut, {
+        sequenceMode,
+        inputOrder: nodeIds
+    });
     const maxLayer = Math.max(0, ...layerMap.values());
     const layers = Array.from({ length: maxLayer + 1 }, () => []);
     for (const id of graph.order) {
@@ -604,8 +616,8 @@ function finishLayeredPass(edges, pos, direction, spacing, superNodeIds, extras)
 }
 /** Layered layout for a flat node/edge/cluster slice in local coordinates.
  *  Annotations and the global non-negative shift stay in layoutLayered. */
-function layoutLayeredPass(nodes, edges, clusters, direction, spacing, superNodeIds) {
-    const pos = computeLayeredPositions(nodes, edges, clusters, direction, spacing);
+function layoutLayeredPass(nodes, edges, clusters, direction, spacing, superNodeIds, sequenceMode = false) {
+    const pos = computeLayeredPositions(nodes, edges, clusters, direction, spacing, sequenceMode);
     return finishLayeredPass(edges, pos, direction, spacing, superNodeIds);
 }
 function computeFullPassBounds(nodes, clusters, edges, waypoints) {
@@ -704,13 +716,13 @@ function isContainedIn(inner, outer) {
  *   2. Run an outer pass with super-nodes for those top-level directed
  *      clusters and any flat clusters that live at this level.
  *   3. Merge inner sub-layouts back into outer coordinates. */
-function layoutNested(nodes, edges, allClusters, direction, spacing) {
+function layoutNested(nodes, edges, allClusters, direction, spacing, sequenceMode = false) {
     const nodeIdSet = new Set(nodes.map((n) => n.id));
     const localClusters = allClusters.filter((c) => c.nodes.every((n) => nodeIdSet.has(n)));
     const directedLocal = localClusters.filter((c) => c.direction);
     if (directedLocal.length === 0) {
         const flatLocal = localClusters.filter((c) => !c.direction);
-        return layoutLayeredPass(nodes, edges, flatLocal, direction, spacing);
+        return layoutLayeredPass(nodes, edges, flatLocal, direction, spacing, undefined, sequenceMode);
     }
     // Top-level directed clusters at this scope: not strictly contained in any
     // other directed cluster from the same scope.
@@ -751,12 +763,12 @@ function layoutNested(nodes, edges, allClusters, direction, spacing) {
                 subResult = cached;
             }
             else {
-                subResult = layoutNested(subNodes, subEdges, [], cluster.direction, subSpacing);
+                subResult = layoutNested(subNodes, subEdges, [], cluster.direction, subSpacing, true);
                 setSubLayoutInCache(key, subResult);
             }
         }
         else {
-            subResult = layoutNested(subNodes, subEdges, nestedClusters, cluster.direction, subSpacing);
+            subResult = layoutNested(subNodes, subEdges, nestedClusters, cluster.direction, subSpacing, true);
         }
         subLayouts.set(cluster.id, subResult);
     }
@@ -812,7 +824,7 @@ function layoutNested(nodes, edges, allClusters, direction, spacing) {
     // can derive global inner-node positions from the super-node placements,
     // THEN run edge routing with overrides that re-anchor cross-boundary back
     // edges to the actual inner nodes instead of the cluster super-node.
-    const outerPositions = computeLayeredPositions(outerNodes, outerEdges, flatLocal, direction, spacing);
+    const outerPositions = computeLayeredPositions(outerNodes, outerEdges, flatLocal, direction, spacing, sequenceMode);
     const innerExtraPositions = new Map();
     const innerExtraDims = new Map();
     for (const outerNode of outerPositions.positionedNodes) {
@@ -833,10 +845,13 @@ function layoutNested(nodes, edges, allClusters, direction, spacing) {
             innerExtraDims.set(inner.id, { w: inner.width, h: inner.height });
         }
     }
-    // Build back-edge anchor overrides: each cross-boundary edge is keyed by
-    // its outer-pass form (super-node IDs), with the override pointing back at
-    // the original inner node ID. The router applies these only to back edges,
-    // so forward cross-boundary edges keep the super-node anchoring.
+    // Build cross-cluster anchor overrides: each cross-boundary edge is keyed
+    // by its outer-pass form (super-node IDs), with the override pointing back
+    // at the original inner node IDs. The router applies these to back edges
+    // always, and to forward edges when both endpoints sit inside (different)
+    // directed clusters — so the forward arrow points at the specific inner
+    // node rather than the cluster super-node center. When only one endpoint
+    // is inside a cluster, the forward edge keeps super-node anchoring.
     const backEdgeAnchorOverrides = new Map();
     for (const edge of edges) {
         const fromCluster = memberToDirectedCluster.get(edge.from);

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}
@@ -147,6 +133,7 @@
 
 	[data-displacement] {
 		position: relative;
+		block-size: 100%;
 		border-radius: inherit;
 		overflow: hidden;
 	}

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] {