@dryui/ui 3.0.0 → 4.0.0

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -18,11 +18,14 @@
 
 	// 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) {
-		node.style.cssText = style || '';
-		node.style.setProperty('filter', `url(#${filterId})`);
-	}
+	// is in the same template, so the $effect runs synchronously after first paint.
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('filter', `url(#${filterId})`);
+	});
 </script>
 
 <svg data-chromatic-aberration-svg width="0" height="0" aria-hidden="true">
@@ -53,7 +56,7 @@
 		</filter>
 	</defs>
 </svg>
-<div data-chromatic-aberration class={className} {@attach applyFilterStyles} {...rest}>
+<div bind:this={el} data-chromatic-aberration class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/chromatic-shift/chromatic-shift.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
 		observeInViewport,
 		observePageVisibility,
 		observeReducedMotionPreference
-	} from '@dryui/primitives/internal/motion';
+	} from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		offset?: number;
@@ -50,7 +49,7 @@
 
 	const offsetValue = $derived(`${Math.max(0, offset)}px`);
 
-	onMount(() =>
+	$effect(() =>
 		observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 		})
@@ -137,15 +136,15 @@
 
 	[data-chromatic-shift][data-channels='rgb'][data-active] {
 		text-shadow:
-			var(--dry-chromatic-offset) 0 rgba(255, 0, 0, 0.3),
-			calc(var(--dry-chromatic-offset) * -1) 0 rgba(0, 0, 255, 0.3),
-			0 var(--dry-chromatic-offset) rgba(0, 255, 0, 0.2);
+			var(--dry-chromatic-offset) 0 var(--dry-chromatic-shift-r, rgba(255, 0, 0, 0.3)),
+			calc(var(--dry-chromatic-offset) * -1) 0 var(--dry-chromatic-shift-b, rgba(0, 0, 255, 0.3)),
+			0 var(--dry-chromatic-offset) var(--dry-chromatic-shift-g, rgba(0, 255, 0, 0.2));
 	}
 
 	[data-chromatic-shift][data-channels='rb'][data-active] {
 		text-shadow:
-			var(--dry-chromatic-offset) 0 rgba(255, 0, 0, 0.3),
-			calc(var(--dry-chromatic-offset) * -1) 0 rgba(0, 0, 255, 0.3);
+			var(--dry-chromatic-offset) 0 var(--dry-chromatic-shift-r, rgba(255, 0, 0, 0.3)),
+			calc(var(--dry-chromatic-offset) * -1) 0 var(--dry-chromatic-shift-b, rgba(0, 0, 255, 0.3));
 	}
 
 	[data-chromatic-shift]:not([data-active])::before,

package/dist/code-block/code-block-button.svelte

@@ -35,14 +35,53 @@
 	const isSingleLine = $derived(!code.includes('\n'));
 	const lineBreak = '\n';
 
-	function handleCopy() {
-		navigator.clipboard.writeText(code).then(() => {
-			copied = true;
-			clearTimeout(copyTimer);
-			copyTimer = setTimeout(() => {
-				copied = false;
-			}, 2000);
-		});
+	function showCopiedFeedback() {
+		copied = true;
+		clearTimeout(copyTimer);
+		copyTimer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	function copyWithTextarea(value: string) {
+		const textarea = document.createElement('textarea');
+		textarea.value = value;
+		textarea.setAttribute('readonly', '');
+		textarea.style.position = 'fixed';
+		textarea.style.inset = '0 auto auto 0';
+		textarea.style.opacity = '0';
+
+		document.body.appendChild(textarea);
+		textarea.select();
+		const copiedToClipboard = document.execCommand('copy');
+		textarea.remove();
+
+		if (!copiedToClipboard) {
+			throw new Error('Unable to copy code block contents');
+		}
+	}
+
+	async function copyText(value: string) {
+		if (navigator.clipboard?.writeText) {
+			try {
+				await navigator.clipboard.writeText(value);
+				return;
+			} catch {
+				copyWithTextarea(value);
+				return;
+			}
+		}
+
+		copyWithTextarea(value);
+	}
+
+	async function handleCopy() {
+		try {
+			await copyText(code);
+			showCopiedFeedback();
+		} catch (error) {
+			console.warn('Failed to copy code block contents', error);
+		}
 	}
 
 	function renderLine(
@@ -165,21 +204,14 @@
 
 <style>
 	[data-code-block] {
-		--dry-code-bg: #0d1117;
-		--dry-code-color: #e6edf3;
-		--dry-code-border: #30363d;
 		--dry-code-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		--dry-code-line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
 		--dry-code-padding: var(--dry-space-4);
 		--dry-code-radius: var(--dry-radius-lg);
-		--dry-code-header-bg: #161b22;
-		--dry-code-header-color: #8b949e;
-		--dry-code-copy-color: #8b949e;
-		--dry-code-copy-hover-color: #e6edf3;
 
 		position: relative;
-		background: var(--dry-code-bg);
-		border: 1px solid var(--dry-code-border);
+		background: var(--dry-code-bg, #0d1117);
+		border: 1px solid var(--dry-code-border, #30363d);
 		border-radius: var(--dry-code-radius);
 		overflow: hidden;
 	}
@@ -190,14 +222,14 @@
 		grid-auto-columns: max-content;
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-code-padding);
-		background: var(--dry-code-header-bg);
-		border-bottom: 1px solid var(--dry-code-border);
+		background: var(--dry-code-header-bg, #161b22);
+		border-bottom: 1px solid var(--dry-code-border, #30363d);
 	}
 
 	[data-code-block-language] {
 		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
 		font-family: var(--dry-font-sans);
-		color: var(--dry-code-header-color);
+		color: var(--dry-code-header-color, #8b949e);
 		text-transform: lowercase;
 		user-select: none;
 	}
@@ -208,17 +240,17 @@
 		right: var(--dry-space-2);
 		z-index: 1;
 		display: inline-grid;
-		color: var(--dry-code-copy-color);
-		background: var(--dry-code-bg);
+		color: var(--dry-code-copy-color, #8b949e);
+		background: var(--dry-code-bg, #0d1117);
 		border-radius: var(--dry-radius-md);
-		--dry-btn-color: var(--dry-code-copy-color);
+		--dry-btn-color: var(--dry-code-copy-color, #8b949e);
 	}
 
 	[data-code-block]:hover .copy-btn-slot,
 	[data-code-block]:focus-within .copy-btn-slot,
 	[data-code-block][data-copied] .copy-btn-slot {
-		color: var(--dry-code-copy-hover-color);
-		--dry-btn-color: var(--dry-code-copy-hover-color);
+		color: var(--dry-code-copy-hover-color, #e6edf3);
+		--dry-btn-color: var(--dry-code-copy-hover-color, #e6edf3);
 	}
 
 	[data-code-block]:has([data-code-block-header]) .copy-btn-slot {
@@ -265,7 +297,7 @@
 		font-family: var(--dry-font-mono);
 		font-size: var(--dry-code-font-size);
 		line-height: var(--dry-code-line-height);
-		color: var(--dry-code-color);
+		color: var(--dry-code-color, #e6edf3);
 		background: transparent;
 		padding: 0;
 		border-radius: 0;
@@ -280,50 +312,50 @@
 
 	[data-code-block-line-number] {
 		margin-right: var(--dry-space-3);
-		color: #484f58;
+		color: var(--dry-code-token-line-number, #484f58);
 		text-align: right;
 		user-select: none;
 	}
 
 	[data-token-type='comment'] {
-		color: #6e7681;
+		color: var(--dry-code-token-comment, #6e7681);
 		font-style: italic;
 	}
 	[data-token-type='string'] {
-		color: #7ee787;
+		color: var(--dry-code-token-string, #7ee787);
 	}
 	[data-token-type='keyword'] {
-		color: #c084fc;
+		color: var(--dry-code-token-keyword, #c084fc);
 	}
 	[data-token-type='number'] {
-		color: #fb923c;
+		color: var(--dry-code-token-number, #fb923c);
 	}
 	[data-token-type='tag'] {
-		color: #60a5fa;
+		color: var(--dry-code-token-tag, #60a5fa);
 	}
 	[data-token-type='component'] {
-		color: #fde68a;
+		color: var(--dry-code-token-component, #fde68a);
 	}
 	[data-token-type='attribute'] {
-		color: #93c5fd;
+		color: var(--dry-code-token-attribute, #93c5fd);
 	}
 	[data-token-type='svelte-keyword'] {
-		color: #d8b4fe;
+		color: var(--dry-code-token-svelte-keyword, #d8b4fe);
 	}
 	[data-token-type='rune'] {
-		color: #f87171;
+		color: var(--dry-code-token-rune, #f87171);
 	}
 	[data-token-type='function'] {
-		color: #facc15;
+		color: var(--dry-code-token-function, #facc15);
 	}
 	[data-token-type='type'] {
-		color: #86efac;
+		color: var(--dry-code-token-type, #86efac);
 	}
 	[data-token-type='operator'] {
-		color: #8b949e;
+		color: var(--dry-code-token-operator, #8b949e);
 	}
 	[data-token-type='punctuation'] {
-		color: #6e7681;
+		color: var(--dry-code-token-punctuation, #6e7681);
 	}
 
 	[data-code-block-token-link] {

package/dist/color-picker/color-picker-area.svelte

@@ -12,16 +12,10 @@
 
 	const ctx = getColorPickerCtx();
 
-	let canvasEl = $state<HTMLCanvasElement | null>(null);
+	let canvasEl = $state<HTMLCanvasElement>();
+	let rootEl = $state<HTMLDivElement>();
 	let isDragging = $state(false);
 
-	function setCanvas(node: HTMLCanvasElement) {
-		canvasEl = node;
-		return () => {
-			if (canvasEl === node) canvasEl = null;
-		};
-	}
-
 	$effect(() => {
 		const node = canvasEl;
 		const hue = ctx.hsv.h;
@@ -64,12 +58,15 @@
 		`Saturation ${Math.round(ctx.hsv.s)}%, Brightness ${Math.round(ctx.hsv.v)}%`
 	);
 
-	function pointerInteraction(node: HTMLElement) {
+	$effect(() => {
+		const node = rootEl;
+		if (!node) return;
+
 		function handlePointerDown(e: PointerEvent) {
 			if (ctx.disabled) return;
 			e.preventDefault();
 			isDragging = true;
-			node.setPointerCapture(e.pointerId);
+			node!.setPointerCapture(e.pointerId);
 			const { s, v } = getPositionFromEvent(e);
 			ctx.setSaturationValue(s, v);
 		}
@@ -82,7 +79,7 @@
 
 		function handlePointerUp(e: PointerEvent) {
 			isDragging = false;
-			node.releasePointerCapture(e.pointerId);
+			node!.releasePointerCapture(e.pointerId);
 		}
 
 		function handleKeydown(e: KeyboardEvent) {
@@ -104,22 +101,21 @@
 			node.removeEventListener('pointerup', handlePointerUp);
 			node.removeEventListener('keydown', handleKeydown);
 		};
-	}
+	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--_area-w', `${width}px`);
-			node.style.setProperty('--_area-h', `${height}px`);
-			node.style.setProperty('--_ind-left', `${indicatorX}px`);
-			node.style.setProperty('--_ind-top', `${indicatorY}px`);
-			node.style.setProperty('--_ind-color', ctx.hex);
-		});
-	}
+	$effect(() => {
+		if (!rootEl) return;
+		rootEl.style.cssText = style || '';
+		rootEl.style.setProperty('--_area-w', `${width}px`);
+		rootEl.style.setProperty('--_area-h', `${height}px`);
+		rootEl.style.setProperty('--_ind-left', `${indicatorX}px`);
+		rootEl.style.setProperty('--_ind-top', `${indicatorY}px`);
+		rootEl.style.setProperty('--_ind-color', ctx.hex);
+	});
 </script>
 
 <div
-	{@attach pointerInteraction}
+	bind:this={rootEl}
 	role="slider"
 	aria-label="Color saturation and brightness"
 	aria-valuetext={valueText}
@@ -129,9 +125,8 @@
 	data-disabled={ctx.disabled || undefined}
 	class={className}
 	{...rest}
-	use:applyStyles
 >
-	<canvas {@attach setCanvas} {width} {height} data-cp-area-canvas aria-hidden="true"></canvas>
+	<canvas bind:this={canvasEl} {width} {height} data-cp-area-canvas aria-hidden="true"></canvas>
 	<div aria-hidden="true" data-cp-area-indicator></div>
 </div>
 

package/dist/color-picker/color-picker-input-hue-slider.svelte

@@ -62,15 +62,18 @@
 		padding: 0;
 		border: none;
 		outline: none;
-		background: linear-gradient(
-			to right,
-			hsl(0 100% 50%),
-			hsl(60 100% 50%),
-			hsl(120 100% 50%),
-			hsl(180 100% 50%),
-			hsl(240 100% 50%),
-			hsl(300 100% 50%),
-			hsl(360 100% 50%)
+		background: var(
+			--dry-color-picker-slider-track-bg,
+			linear-gradient(
+				to right,
+				hsl(0 100% 50%),
+				hsl(60 100% 50%),
+				hsl(120 100% 50%),
+				hsl(180 100% 50%),
+				hsl(240 100% 50%),
+				hsl(300 100% 50%),
+				hsl(360 100% 50%)
+			)
 		);
 	}
 

package/dist/color-picker/color-picker-root.svelte

@@ -114,26 +114,27 @@
 		}
 	});
 
-	function setPickerDimensions(node: HTMLElement) {
-		$effect(() => {
-			if (width !== undefined) {
-				node.style.setProperty('--dry-color-picker-width', `${width}px`);
-				node.style.setProperty('--dry-color-picker-area-width', `${width}px`);
-			} else {
-				node.style.removeProperty('--dry-color-picker-width');
-				node.style.removeProperty('--dry-color-picker-area-width');
-			}
-			if (areaHeight !== undefined) {
-				node.style.setProperty('--dry-color-picker-area-height', `${areaHeight}px`);
-			} else {
-				node.style.removeProperty('--dry-color-picker-area-height');
-			}
-		});
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		if (width !== undefined) {
+			el.style.setProperty('--dry-color-picker-width', `${width}px`);
+			el.style.setProperty('--dry-color-picker-area-width', `${width}px`);
+		} else {
+			el.style.removeProperty('--dry-color-picker-width');
+			el.style.removeProperty('--dry-color-picker-area-width');
+		}
+		if (areaHeight !== undefined) {
+			el.style.setProperty('--dry-color-picker-area-height', `${areaHeight}px`);
+		} else {
+			el.style.removeProperty('--dry-color-picker-area-height');
+		}
+	});
 </script>
 
 <div
-	{@attach setPickerDimensions}
+	bind:this={el}
 	data-color-picker
 	data-disabled={disabled || undefined}
 	class={className}

package/dist/color-picker/color-picker-swatch.svelte

@@ -13,7 +13,12 @@
 	const displayColor = $derived(color ?? ctx.hex);
 	const displayAlpha = $derived(color ? 1 : ctx.alpha);
 
-	function interactive(node: HTMLElement) {
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		const node = el;
+		if (!node) return;
+
 		function handleClick() {
 			if (color && !ctx.disabled) ctx.setFromHex(color);
 		}
@@ -25,26 +30,23 @@
 		}
 		node.addEventListener('click', handleClick);
 		node.addEventListener('keydown', handleKeydown);
-		return {
-			destroy() {
-				node.removeEventListener('click', handleClick);
-				node.removeEventListener('keydown', handleKeydown);
-			}
+		return () => {
+			node.removeEventListener('click', handleClick);
+			node.removeEventListener('keydown', handleKeydown);
 		};
-	}
+	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--_swatch-color', displayColor);
-			node.style.setProperty('--_swatch-opacity', String(displayAlpha));
-		});
-	}
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--_swatch-color', displayColor);
+		el.style.setProperty('--_swatch-opacity', String(displayAlpha));
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
-	{@attach interactive}
+	bind:this={el}
 	role={color ? 'button' : 'img'}
 	tabindex={color && !ctx.disabled ? 0 : undefined}
 	aria-label={color ? `Select color ${color}` : 'Current color'}
@@ -53,7 +55,6 @@
 	data-disabled={ctx.disabled || undefined}
 	class={className}
 	{...rest}
-	use:applyStyles
 ></div>
 
 <style>

package/dist/combobox/combobox-content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { createAnchoredPopover, createDismiss, type Placement } from '@dryui/primitives';
@@ -27,17 +26,7 @@
 	const ctx = getComboboxCtx();
 	const getTriggerEl = () => ctx.triggerEl ?? ctx.inputEl;
 
-	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: getTriggerEl,
@@ -57,8 +46,8 @@
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
+	bind:this={el}
+	use:popover.applyPosition={style}
 	popover="manual"
 	role="listbox"
 	id={ctx.contentId}
@@ -97,6 +86,7 @@
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-lg);
+		font-family: var(--dry-font-sans);
 		padding: var(--dry-space-1);
 		max-height: 200px;
 		overflow-y: auto;

package/dist/combobox/combobox-input-root.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { setComboboxCtx } from './context.svelte.js';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		open?: boolean;
 		value?: string;
 		disabled?: boolean;
@@ -15,7 +16,9 @@
 		value = $bindable(''),
 		disabled = false,
 		name,
-		children
+		class: className,
+		children,
+		...rest
 	}: Props = $props();
 
 	const uid = $props.id();
@@ -88,7 +91,7 @@
 	});
 </script>
 
-<div data-combobox-wrapper>
+<div data-combobox-wrapper class={className} {...rest}>
 	{@render children()}
 
 	{#if name}

package/dist/combobox/combobox-input-root.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     value?: string;
     disabled?: boolean;

package/dist/combobox/combobox-input.svelte

@@ -38,23 +38,26 @@
 		return value != null && value !== false && value !== 'false';
 	}
 
-	function attachInput(node: HTMLInputElement) {
-		ctx.inputEl = node;
+	let inputEl = $state<HTMLInputElement>();
+	let triggerEl = $state<HTMLLabelElement>();
+
+	$effect(() => {
+		ctx.inputEl = inputEl ?? null;
 		return () => {
-			if (ctx.inputEl === node) {
+			if (ctx.inputEl === inputEl) {
 				ctx.inputEl = null;
 			}
 		};
-	}
+	});
 
-	function attachTrigger(node: HTMLElement) {
-		ctx.triggerEl = node;
+	$effect(() => {
+		ctx.triggerEl = triggerEl ?? null;
 		return () => {
-			if (ctx.triggerEl === node) {
+			if (ctx.triggerEl === triggerEl) {
 				ctx.triggerEl = null;
 			}
 		};
-	}
+	});
 
 	function getOptionItems(contentEl: HTMLElement | null): HTMLElement[] {
 		if (!contentEl) return [];
@@ -154,7 +157,7 @@
 </script>
 
 <label
-	{@attach attachTrigger}
+	bind:this={triggerEl}
 	data-combobox-input
 	data-size={size}
 	data-state={ctx.open ? 'open' : 'closed'}
@@ -170,7 +173,7 @@
 	{/if}
 
 	<input
-		{@attach attachInput}
+		bind:this={inputEl}
 		id={ctx.inputId}
 		type="text"
 		role="combobox"

package/dist/combobox/combobox-item.svelte

@@ -50,13 +50,17 @@
 		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
 	}
 
-	function keepHighlightedItemVisible(node: HTMLDivElement) {
-		node.scrollIntoView({ block: 'nearest' });
-	}
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (isHighlighted && el) {
+			el.scrollIntoView({ block: 'nearest' });
+		}
+	});
 </script>
 
 <div
-	{@attach isHighlighted && keepHighlightedItemVisible}
+	bind:this={el}
 	role="option"
 	id={`${ctx.contentId}-item-${index}`}
 	tabindex={disabled ? undefined : -1}
@@ -91,6 +95,7 @@
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-space-3);
 		border-radius: var(--dry-combobox-item-radius);
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size);
 		cursor: pointer;
 		user-select: none;

package/dist/command-palette/command-palette-dialog-root.svelte

@@ -150,6 +150,7 @@
 		box-shadow: var(--dry-cmd-shadow);
 		margin: auto;
 		padding: 0;
+		font-family: var(--dry-font-sans);
 		overflow: hidden;
 		max-height: 24rem;
 		display: grid;