@dryui/ui 3.0.0 → 4.0.0

package/dist/menubar/menubar-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 { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -23,22 +22,12 @@
 	const ctx = getMenubarCtx();
 	const menuCtx = getMenubarMenuCtx();
 
-	let el = $state<HTMLDivElement | null>(null);
+	let el = $state<HTMLDivElement>();
 	const triggerEl = $derived(
 		ctx.rootElement?.querySelector<HTMLElement>(`[data-menubar-trigger="${menuCtx.menuId}"]`) ??
 			null
 	);
 
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
-
 	const popover = createAnchoredPopover({
 		triggerEl: () => triggerEl,
 		contentEl: () => el ?? null,
@@ -64,6 +53,15 @@
 		orientation: 'vertical'
 	});
 
+	createDismiss({
+		enabled: () => menuCtx.open,
+		onDismiss: () => ctx.closeMenu(),
+		contentEl: () => el ?? null,
+		triggerEl: () => triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => triggerEl
+	});
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (!el) return;
 		switch (e.key) {
@@ -92,9 +90,9 @@
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
-	popover="auto"
+	bind:this={el}
+	use:popover.applyPosition={style}
+	popover="manual"
 	role="menu"
 	tabindex="-1"
 	aria-labelledby={triggerEl?.id}
@@ -121,11 +119,12 @@
 		inset: unset;
 		margin: 0;
 
-		background: var(--dry-color-bg-overlay);
+		background: var(--dry-menubar-bg, var(--dry-color-bg-overlay));
 		color: var(--dry-color-text-strong);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-popover);
+		border: 1px solid var(--dry-menubar-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-menubar-radius, var(--dry-radius-popover));
 		box-shadow: var(--dry-shadow-overlay);
+		font-family: var(--dry-font-sans);
 		padding: var(--dry-space-1);
 
 		transition:

package/dist/menubar/menubar-item.svelte

@@ -60,6 +60,7 @@
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
 		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/menubar/menubar-menu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { getMenubarCtx, setMenubarMenuCtx } from './context.svelte.js';
 
@@ -13,7 +12,7 @@
 	const menuId = `menubar-menu-${uid}`;
 	const ctx = getMenubarCtx();
 
-	onMount(() => {
+	$effect(() => {
 		ctx.registerMenu(menuId);
 		return () => ctx.unregisterMenu(menuId);
 	});

package/dist/menubar/menubar-root.svelte

@@ -13,16 +13,6 @@
 	let menuIds: string[] = [];
 	let rootEl = $state<HTMLDivElement>();
 
-	function setRootElement(element: HTMLDivElement) {
-		rootEl = element;
-
-		return () => {
-			if (rootEl === element) {
-				rootEl = undefined;
-			}
-		};
-	}
-
 	setMenubarCtx({
 		get activeMenu() {
 			return activeMenu;
@@ -69,7 +59,7 @@
 	});
 </script>
 
-<div role="menubar" data-menubar-root class={className} {@attach setRootElement} {...rest}>
+<div bind:this={rootEl} role="menubar" data-menubar-root class={className} {...rest}>
 	{@render children()}
 </div>
 

package/dist/motion/enter.svelte

@@ -1,28 +1,29 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLElement> {
 		index?: number;
 		duration?: string;
 		as?: string;
 		children?: Snippet;
 	}
 
-	let { index = 0, duration, as = 'div', children }: Props = $props();
+	let { index = 0, duration, as = 'div', class: className, children, ...rest }: Props = $props();
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('--dry-enter-index', String(index));
-			if (duration) {
-				node.style.setProperty('--dry-enter-duration', duration);
-			} else {
-				node.style.removeProperty('--dry-enter-duration');
-			}
-		});
-	}
+	let el = $state<HTMLElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-enter-index', String(index));
+		if (duration) {
+			el.style.setProperty('--dry-enter-duration', duration);
+		} else {
+			el.style.removeProperty('--dry-enter-duration');
+		}
+	});
 </script>
 
-<!-- dryui-allow svelte-element -->
-<svelte:element this={as} class="dry-enter" {@attach applyStyles}>
+<svelte:element this={as} bind:this={el} class={['dry-enter', className]} {...rest}>
 	{@render children?.()}
 </svelte:element>

package/dist/motion/enter.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
     index?: number;
     duration?: string;
     as?: string;

package/dist/motion/exit.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { leave } from './leave.js';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children?: Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div out:leave>
+<div out:leave data-dry-exit class={className} {...rest}>
 	{@render children?.()}
 </div>
 
 <style>
-	div {
-		display: contents;
+	[data-dry-exit] {
+		display: grid;
 	}
 </style>

package/dist/motion/exit.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> {
     children?: Snippet;
 }
 declare const Exit: import("svelte").Component<Props, {}, "">;

package/dist/motion/stagger.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLElement> {
 		step?: 'section' | 'word' | 'letter' | number;
 		as?: string;
 		children?: Snippet;
 	}
 
-	let { step = 'section', as = 'div', children }: Props = $props();
+	let { step = 'section', as = 'div', class: className, children, ...rest }: Props = $props();
 
 	const stepValue = $derived.by(() => {
 		if (typeof step === 'number') return `${step}ms`;
@@ -16,14 +17,14 @@
 		return 'var(--dry-enter-stagger-section)';
 	});
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.setProperty('--dry-stagger-step', stepValue);
-		});
-	}
+	let el = $state<HTMLElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-stagger-step', stepValue);
+	});
 </script>
 
-<!-- dryui-allow svelte-element -->
-<svelte:element this={as} data-dry-stagger {@attach applyStyles}>
+<svelte:element this={as} bind:this={el} data-dry-stagger class={className} {...rest}>
 	{@render children?.()}
 </svelte:element>

package/dist/motion/stagger.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
     step?: 'section' | 'word' | 'letter' | number;
     as?: string;
     children?: Snippet;

package/dist/multi-select-combobox/multi-select-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';
@@ -26,17 +25,7 @@
 
 	const ctx = getMultiSelectComboboxCtx();
 
-	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.anchorEl,
@@ -56,8 +45,8 @@
 </script>
 
 <div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
+	bind:this={el}
+	use:popover.applyPosition={style}
 	popover="manual"
 	role="listbox"
 	id={ctx.contentId}
@@ -90,6 +79,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: 240px;
 		overflow-y: auto;

package/dist/multi-select-combobox/multi-select-combobox-input.svelte

@@ -17,15 +17,16 @@
 
 	const ctx = getMultiSelectComboboxCtx();
 
-	function attachInput(node: HTMLInputElement) {
-		ctx.inputEl = node;
+	let inputEl = $state<HTMLInputElement>();
 
+	$effect(() => {
+		ctx.inputEl = inputEl ?? null;
 		return () => {
-			if (ctx.inputEl === node) {
+			if (ctx.inputEl === inputEl) {
 				ctx.inputEl = null;
 			}
 		};
-	}
+	});
 
 	function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
 		const nextQuery = event.currentTarget.value;
@@ -116,7 +117,7 @@
 </script>
 
 <input
-	{@attach attachInput}
+	bind:this={inputEl}
 	id={ctx.inputId}
 	type="text"
 	role="combobox"

package/dist/multi-select-combobox/multi-select-combobox-item.svelte

@@ -30,48 +30,41 @@
 	const isUnavailable = $derived(disabled || !ctx.canSelect(value));
 	const isHighlighted = $derived(ctx.activeItemId === id);
 
-	function attachItem(node: HTMLDivElement) {
-		ctx.registerItem(id);
+	let el = $state<HTMLDivElement>();
 
-		function handlePointerEnter(event: PointerEvent) {
-			if (!isUnavailable) {
-				ctx.setActiveItem(id);
-			}
+	$effect(() => {
+		ctx.registerItem(id);
+		return () => ctx.unregisterItem(id);
+	});
 
-			if (onpointerenter) {
-				(onpointerenter as (event: PointerEvent & { currentTarget: HTMLDivElement }) => void)(
-					event as PointerEvent & { currentTarget: HTMLDivElement }
-				);
-			}
+	$effect(() => {
+		if (isHighlighted && el) {
+			el.scrollIntoView({ block: 'nearest' });
 		}
+	});
 
-		function handleClick() {
-			if (isUnavailable) {
-				ctx.focusInput();
-				return;
-			}
-
-			ctx.selectValue(value);
+	function handlePointerEnter(event: PointerEvent & { currentTarget: HTMLDivElement }) {
+		if (!isUnavailable) {
+			ctx.setActiveItem(id);
+		}
+		if (onpointerenter) {
+			(onpointerenter as (event: PointerEvent & { currentTarget: HTMLDivElement }) => void)(event);
 		}
-
-		node.addEventListener('pointerenter', handlePointerEnter);
-		node.addEventListener('click', handleClick);
-
-		return () => {
-			node.removeEventListener('pointerenter', handlePointerEnter);
-			node.removeEventListener('click', handleClick);
-			ctx.unregisterItem(id);
-		};
 	}
 
-	function keepHighlightedItemVisible(node: HTMLDivElement) {
-		node.scrollIntoView({ block: 'nearest' });
+	function handleClick() {
+		if (isUnavailable) {
+			ctx.focusInput();
+			return;
+		}
+		ctx.selectValue(value);
 	}
 </script>
 
 <div
-	{@attach attachItem}
-	{@attach isHighlighted && keepHighlightedItemVisible}
+	bind:this={el}
+	onpointerenter={handlePointerEnter}
+	onclick={handleClick}
 	role="option"
 	{id}
 	tabindex={-1}
@@ -108,6 +101,7 @@
 		gap: var(--dry-space-2);
 		padding: var(--dry-space-2) var(--dry-space-3);
 		border-radius: var(--dry-multi-select-item-radius);
+		font-family: var(--dry-font-sans);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

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

@@ -34,7 +34,7 @@
 	const inputId = `multi-select-combobox-input-${uid}`;
 	const contentId = `multi-select-combobox-content-${uid}`;
 
-	let rootEl = $state<HTMLDivElement | null>(null);
+	let rootEl = $state<HTMLDivElement>();
 	let inputEl = $state<HTMLInputElement | null>(null);
 	let activeItemId = $state('');
 	let itemIds = $state<string[]>([]);
@@ -113,8 +113,9 @@
 		}
 	}
 
-	function attachRoot(node: HTMLDivElement) {
-		rootEl = node;
+	$effect(() => {
+		const node = rootEl;
+		if (!node) return;
 
 		function handlePointerDown(event: PointerEvent) {
 			if (event.button !== 0) {
@@ -138,11 +139,8 @@
 		node.addEventListener('pointerdown', handlePointerDown);
 		return () => {
 			node.removeEventListener('pointerdown', handlePointerDown);
-			if (rootEl === node) {
-				rootEl = null;
-			}
 		};
-	}
+	});
 
 	setMultiSelectComboboxCtx({
 		get open() {
@@ -218,15 +216,13 @@
 	});
 </script>
 
-<div data-multi-select-wrapper>
+<div data-multi-select-wrapper class={className} {...rest}>
 	<div
-		{@attach attachRoot}
+		bind:this={rootEl}
 		role="group"
 		data-multi-select-root
 		data-state={open ? 'open' : 'closed'}
 		data-disabled={disabled || undefined}
-		class={className}
-		{...rest}
 	>
 		{@render children()}
 
@@ -254,11 +250,11 @@
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(48px, max-content));
 		justify-content: start;
-		gap: var(--dry-space-1_5);
-		padding: var(--dry-space-2);
-		border: 1px solid var(--dry-color-stroke-strong);
-		border-radius: var(--dry-radius-md);
-		background: var(--dry-color-bg-raised);
+		gap: var(--dry-multi-select-gap, var(--dry-space-1_5));
+		padding: var(--dry-multi-select-padding, var(--dry-space-2));
+		border: 1px solid var(--dry-multi-select-border, var(--dry-color-stroke-strong));
+		border-radius: var(--dry-multi-select-radius, var(--dry-radius-md));
+		background: var(--dry-multi-select-bg, var(--dry-color-bg-raised));
 		min-height: 44px;
 		align-items: center;
 		box-sizing: border-box;

package/dist/noise/noise.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> {
 		opacity?: number;
@@ -31,7 +30,7 @@
 	let onScreen = $state(true);
 	let tabVisible = $state(true);
 
-	onMount(() => {
+	$effect(() => {
 		const stopMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 		});
@@ -48,26 +47,29 @@
 	const shouldAnimate = $derived(animated && !prefersReducedMotion);
 	const paused = $derived(!onScreen || !tabVisible);
 
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-noise-opacity', normalizedOpacity);
-			node.style.setProperty('--dry-noise-blend', blend);
-		});
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.cssText = style || '';
+		el.style.setProperty('--dry-noise-opacity', normalizedOpacity);
+		el.style.setProperty('--dry-noise-blend', blend);
+	});
 
-		$effect(() =>
-			observeInViewport(
-				node,
-				(inView) => {
-					onScreen = inView;
-				},
-				{ rootMargin: '200px' }
-			)
+	$effect(() => {
+		if (!el) return;
+		return observeInViewport(
+			el,
+			(inView) => {
+				onScreen = inView;
+			},
+			{ rootMargin: '200px' }
 		);
-	}
+	});
 </script>
 
 <div
+	bind:this={el}
 	class={className}
 	data-noise
 	data-animated={shouldAnimate || undefined}
@@ -75,7 +77,6 @@
 	data-paused={paused || undefined}
 	data-grain={grain}
 	{...rest}
-	{@attach applyStyles}
 >
 	<span data-noise-texture aria-hidden="true"></span>
 

package/dist/notification-center/notification-center-item.svelte

@@ -44,7 +44,7 @@
 	[data-notification-center-item] {
 		padding: var(--dry-nc-item-padding, 0.75rem);
 		color: var(--dry-color-text-strong);
-		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		border-bottom: 1px solid var(--dry-color-stroke-weak);
 		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 

package/dist/notification-center/notification-center-panel.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 } from '@dryui/primitives';
+	import { createAnchoredPopover, createDismiss } from '@dryui/primitives';
 	import { getNotificationCenterCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -34,19 +33,9 @@
 
 	const ctx = getNotificationCenterCtx();
 
-	let panelEl = $state<HTMLDivElement | null>(null);
+	let panelEl = $state<HTMLDivElement>();
 	const triggerEl = $derived(document.getElementById(ctx.triggerId) as HTMLElement | null);
 
-	function attachPanel(node: HTMLDivElement) {
-		panelEl = node;
-
-		return () => {
-			if (panelEl === node) {
-				panelEl = null;
-			}
-		};
-	}
-
 	function focusTrigger() {
 		if (triggerEl instanceof HTMLElement) {
 			triggerEl.focus();
@@ -91,13 +80,22 @@
 			node.style.translate = '';
 		}
 	});
+
+	createDismiss({
+		enabled: () => ctx.open,
+		onDismiss: () => handleClose(false),
+		contentEl: () => panelEl ?? null,
+		triggerEl: () => triggerEl,
+		preventDefaultOnEscape: true,
+		returnFocusTo: () => triggerEl
+	});
 </script>
 
 <div
-	{@attach attachPanel}
-	{@attach fromAction(popover.applyPosition, () => style)}
+	bind:this={panelEl}
+	use:popover.applyPosition={style}
 	id={ctx.panelId}
-	popover="auto"
+	popover="manual"
 	role="region"
 	aria-label="Notifications"
 	data-notification-center-panel
@@ -138,11 +136,11 @@
 		);
 		max-height: 28rem;
 		overflow-y: auto;
-		background: var(--dry-color-bg-overlay, #f1f3f5);
+		background: var(--dry-color-bg-overlay);
 		color: var(--dry-color-text-strong);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg, 0.5rem);
-		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+		box-shadow: var(--dry-shadow-lg);
 		padding: 0;
 
 		&:popover-open {