@dryui/ui 3.0.0 → 4.0.1

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,8 +1,9 @@
 <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;
@@ -19,11 +20,13 @@
 		onrequest,
 		onchange,
 		disabled = false,
-		children
+		class: className,
+		children,
+		...rest
 	}: Props = $props();
 
 	let loading = $state(false);
-	let fallbackInputEl: HTMLInputElement | null = null;
+	let fallbackInputEl = $state<HTMLInputElement>();
 
 	function commitValue(nextValue: string | null) {
 		if (nextValue === null) return;
@@ -47,15 +50,6 @@
 		fallbackInputEl.click();
 	}
 
-	function attachFallbackInput(node: HTMLInputElement) {
-		fallbackInputEl = node;
-		return () => {
-			if (fallbackInputEl === node) {
-				fallbackInputEl = null;
-			}
-		};
-	}
-
 	async function defaultRequest(): Promise<string | null> {
 		if (typeof window === 'undefined') return null;
 		if (directory && 'showDirectoryPicker' in window) {
@@ -113,9 +107,9 @@
 	});
 </script>
 
-<div data-file-select data-disabled={disabled || undefined}>
+<div data-file-select data-disabled={disabled || undefined} class={className} {...rest}>
 	<input
-		{@attach attachFallbackInput}
+		bind:this={fallbackInputEl}
 		type="file"
 		{accept}
 		webkitdirectory={directory}
@@ -143,11 +137,12 @@
 		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);
-		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,5 +1,6 @@
 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;

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,13 +109,13 @@
 	[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);
-		color: var(--dry-color-fill-brand);
+		--_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-text-brand);
 	}
 
 	[data-fu-dropzone][data-disabled] {
@@ -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>
 

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 {};

package/dist/float-button/float-button-action.svelte

@@ -13,14 +13,44 @@
 	const ctx = getFloatButtonCtx();
 </script>
 
-<Button
-	variant="nav"
-	size="icon-sm"
-	type="button"
-	data-float-button-action
-	data-state={ctx.open ? 'open' : 'closed'}
-	tabindex={ctx.open ? 0 : -1}
-	{...rest}
->
-	{@render children()}
-</Button>
+<div class="action-slot" data-state={ctx.open ? 'open' : 'closed'}>
+	<Button
+		variant="solid"
+		size="sm"
+		type="button"
+		data-float-button-action
+		aria-hidden={!ctx.open}
+		tabindex={ctx.open ? 0 : -1}
+		{...rest}
+	>
+		{@render children()}
+	</Button>
+</div>
+
+<style>
+	.action-slot {
+		--dry-fab-action-scale-closed: 0.85;
+		--dry-fab-action-origin: 50% 100%;
+		/* Floor the action to a comfortable 44px touch target. Cascades into Button
+		   via its --dry-btn-min-height variable so the value applies on every
+		   pointer (DryUI lint blocks pointer-media queries). */
+		--dry-btn-min-height: 44px;
+
+		display: grid;
+		transform-origin: var(--dry-fab-action-origin);
+	}
+
+	.action-slot[data-state='closed'] {
+		opacity: 0;
+		transform: scale(var(--dry-fab-action-scale-closed));
+		pointer-events: none;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.action-slot {
+			transition:
+				opacity var(--dry-duration-fast, 0.15s) var(--dry-ease-default, ease-out),
+				transform var(--dry-duration-fast, 0.15s) var(--dry-ease-default, ease-out);
+		}
+	}
+</style>

package/dist/float-button/float-button-root.svelte

@@ -14,20 +14,60 @@
 		children,
 		class: className,
 		position = 'bottom-right',
+		id,
 		...rest
 	}: Props = $props();
 
+	const generatedId = `dry-fab-${Math.random().toString(36).slice(2, 10)}`;
+	const menuId = $derived(id ?? generatedId);
+
+	let rootEl = $state<HTMLDivElement>();
+
 	setFloatButtonCtx({
 		get open() {
 			return open;
 		},
+		get menuId() {
+			return menuId;
+		},
 		toggle() {
 			open = !open;
+		},
+		close() {
+			open = false;
 		}
 	});
+
+	function focusFirstAction() {
+		rootEl
+			?.querySelector<HTMLElement>('[data-float-button-action]:not([aria-hidden="true"])')
+			?.focus();
+	}
+
+	function focusTrigger() {
+		rootEl?.querySelector<HTMLElement>('[data-float-button-trigger]')?.focus();
+	}
+
+	$effect(() => {
+		if (!open || !rootEl) return;
+		const handle = requestAnimationFrame(focusFirstAction);
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key !== 'Escape') return;
+			e.preventDefault();
+			open = false;
+			requestAnimationFrame(focusTrigger);
+		};
+		window.addEventListener('keydown', onKey);
+		return () => {
+			cancelAnimationFrame(handle);
+			window.removeEventListener('keydown', onKey);
+		};
+	});
 </script>
 
 <div
+	bind:this={rootEl}
+	id={menuId}
 	data-float-button
 	data-position={position}
 	data-state={open ? 'open' : 'closed'}
@@ -39,25 +79,24 @@
 
 <style>
 	[data-float-button] {
-		--dry-fab-offset: var(--dry-space-6);
-		--dry-fab-gap: var(--dry-space-3);
-		--dry-fab-position: fixed;
-		--dry-fab-z-index: var(--dry-layer-overlay);
-
-		position: var(--dry-fab-position);
-		z-index: var(--dry-fab-z-index);
+		position: var(--dry-fab-position, fixed);
+		z-index: var(--dry-fab-z-index, var(--dry-layer-overlay));
+		/* Grid stack with the trigger pinned visually last via `order` (set on
+		   .trigger-slot) so it sits closest to the anchored corner; DOM order
+		   keeps the trigger first for keyboard focus order. */
 		display: grid;
-		justify-items: center;
-		gap: var(--dry-fab-gap);
+		gap: var(--dry-fab-gap, var(--dry-space-3));
 	}
 
 	[data-float-button][data-position='bottom-right'] {
-		bottom: var(--dry-fab-offset);
-		right: var(--dry-fab-offset);
+		bottom: var(--dry-fab-offset, var(--dry-space-6));
+		right: var(--dry-fab-offset, var(--dry-space-6));
+		justify-items: end;
 	}
 
 	[data-float-button][data-position='bottom-left'] {
-		bottom: var(--dry-fab-offset);
-		left: var(--dry-fab-offset);
+		bottom: var(--dry-fab-offset, var(--dry-space-6));
+		left: var(--dry-fab-offset, var(--dry-space-6));
+		justify-items: start;
 	}
 </style>

package/dist/float-button/float-button-trigger.svelte

@@ -16,15 +16,28 @@
 	const btnSize = $derived(size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon');
 </script>
 
-<Button
-	variant="solid"
-	size={btnSize}
-	type="button"
-	aria-expanded={ctx.open}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-float-button-trigger
-	onclick={() => ctx.toggle()}
-	{...rest}
->
-	{@render children()}
-</Button>
+<div class="trigger-slot">
+	<Button
+		variant="solid"
+		size={btnSize}
+		type="button"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.menuId}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-float-button-trigger
+		onclick={() => ctx.toggle()}
+		{...rest}
+	>
+		{@render children()}
+	</Button>
+</div>
+
+<style>
+	.trigger-slot {
+		display: grid;
+		/* `order` lets the trigger sit visually last (closest to the anchored
+		   corner) while keeping it first in the DOM for keyboard focus order.
+		   Auto-flow places the actions in rows 1..n above it. */
+		order: 1;
+	}
+</style>

package/dist/format-bytes/format-bytes.svelte

@@ -51,11 +51,8 @@
 
 <style>
 	[data-format-bytes] {
-		--dry-format-bytes-color: var(--dry-color-text-weak);
-		--dry-format-bytes-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-bytes-color);
-		font-size: var(--dry-format-bytes-font-size);
+		color: var(--dry-format-bytes-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-bytes-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: tabular-nums;
 		line-height: var(--dry-type-small-leading);

package/dist/format-date/format-date.svelte

@@ -71,12 +71,8 @@
 
 <style>
 	[data-format-date] {
-		/* Component tokens (Tier 3) */
-		--dry-format-date-color: var(--dry-color-text-weak);
-		--dry-format-date-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-date-color);
-		font-size: var(--dry-format-date-font-size);
+		color: var(--dry-format-date-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-date-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: var(--dry-numeric-variant);
 		line-height: var(--dry-type-small-leading);

package/dist/format-number/format-number.svelte

@@ -50,12 +50,8 @@
 
 <style>
 	[data-format-number] {
-		/* Component tokens (Tier 3) */
-		--dry-format-number-color: var(--dry-color-text-weak);
-		--dry-format-number-font-size: var(--dry-type-small-size);
-
-		color: var(--dry-format-number-color);
-		font-size: var(--dry-format-number-font-size);
+		color: var(--dry-format-number-color, var(--dry-color-text-weak));
+		font-size: var(--dry-format-number-font-size, var(--dry-type-small-size));
 		font-family: var(--dry-font-sans);
 		font-variant-numeric: tabular-nums;
 		line-height: var(--dry-type-small-leading);

package/dist/gauge/gauge.svelte

@@ -97,10 +97,17 @@
 	[data-gauge] {
 		/* Component tokens (Tier 3) */
 		--dry-gauge-size: 8rem;
-		--dry-gauge-track-color: var(--dry-color-stroke-weak, #e2e8f0);
-		--dry-gauge-fill-color: var(--dry-color-fill-brand, #3b82f6);
+		--dry-gauge-track-color: var(--dry-color-stroke-weak);
+		--dry-gauge-fill-color: var(--dry-color-fill-brand);
 		--dry-gauge-stroke-width: 8;
 
+		/* Threshold zone palette. Consumers can override any slot to retheme
+		   the arc segmentation. Default order: brand, success, warning, error. */
+		--dry-gauge-zone-1: var(--dry-color-fill-brand);
+		--dry-gauge-zone-2: var(--dry-color-fill-success);
+		--dry-gauge-zone-3: var(--dry-color-fill-warning);
+		--dry-gauge-zone-4: var(--dry-color-fill-error);
+
 		aspect-ratio: 1;
 		height: var(--dry-gauge-size);
 	}

package/dist/glass/glass.svelte

@@ -11,7 +11,7 @@
 
 	let {
 		blur = 12,
-		tint = 'rgba(255,255,255,0.08)',
+		tint,
 		saturation = 120,
 		children,
 		class: className,
@@ -23,7 +23,8 @@
 		$effect(() => {
 			node.style.cssText = style || '';
 			node.style.setProperty('--dry-glass-blur', `${Math.max(0, blur)}px`);
-			node.style.setProperty('--dry-glass-tint', tint);
+			if (tint) node.style.setProperty('--dry-glass-tint', tint);
+			else node.style.removeProperty('--dry-glass-tint');
 			node.style.setProperty(
 				'--dry-glass-saturation',
 				`${Math.max(0, Math.min(200, saturation))}%`
@@ -42,7 +43,7 @@
 		backdrop-filter: blur(var(--dry-glass-blur, 12px)) saturate(var(--dry-glass-saturation, 120%));
 		-webkit-backdrop-filter: blur(var(--dry-glass-blur, 12px))
 			saturate(var(--dry-glass-saturation, 120%));
-		background: var(--dry-glass-tint, rgba(255, 255, 255, 0.08));
+		background: var(--dry-glass-tint, var(--dry-color-glass-tint, rgba(255, 255, 255, 0.08)));
 		border-radius: inherit;
 	}
 </style>

package/dist/glow/glow.svelte

@@ -41,11 +41,6 @@
 
 <style>
 	[data-glow] {
-		--dry-glow-color: var(--dry-color-fill-brand);
-		--dry-glow-intensity: 50;
-		--dry-glow-radius: 20px;
-		--dry-glow-blend: screen;
-
 		position: relative;
 		border-radius: inherit;
 	}