@dryui/ui 1.3.0 → 1.4.0

package/dist/menubar/menubar-content.svelte

@@ -1,5 +1,6 @@
 <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 { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
@@ -22,14 +23,21 @@
 	const ctx = getMenubarCtx();
 	const menuCtx = getMenubarMenuCtx();
 
-	let el = $state<HTMLDivElement>();
-	let triggerEl = $state<HTMLElement | null>(null);
+	let el = $state<HTMLDivElement | null>(null);
+	const triggerEl = $derived(
+		ctx.rootElement?.querySelector<HTMLElement>(`[data-menubar-trigger="${menuCtx.menuId}"]`) ??
+			null
+	);
 
-	$effect(() => {
-		const root = ctx.rootElement;
-		triggerEl =
-			root?.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,
@@ -61,12 +69,12 @@
 		switch (e.key) {
 			case 'ArrowRight': {
 				e.preventDefault();
-				ctx.focusNextMenu(menuCtx.menuId);
+				ctx.focusNextMenu(menuCtx.menuId, true);
 				return;
 			}
 			case 'ArrowLeft': {
 				e.preventDefault();
-				ctx.focusPrevMenu(menuCtx.menuId);
+				ctx.focusPrevMenu(menuCtx.menuId, true);
 				return;
 			}
 			case 'Escape': {
@@ -84,15 +92,15 @@
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="auto"
 	role="menu"
 	tabindex="-1"
-	aria-labelledby={`menubar-trigger-${menuCtx.menuId}`}
+	aria-labelledby={triggerEl?.id}
 	data-menubar-content
 	data-state={menuCtx.open ? 'open' : 'closed'}
 	class={className}
-	use:popover.applyPosition={style}
 	ontoggle={(e) => {
 		const newState = (e as ToggleEvent).newState === 'open';
 		if (!newState && menuCtx.open) {

package/dist/menubar/menubar-root.svelte

@@ -48,20 +48,20 @@
 		getMenuIds() {
 			return menuIds;
 		},
-		focusNextMenu(currentId) {
+		focusNextMenu(currentId, open = false) {
 			const idx = menuIds.indexOf(currentId);
 			const nextIdx = (idx + 1) % menuIds.length;
 			const nextId = menuIds[nextIdx] ?? null;
-			activeMenu = nextId;
+			activeMenu = open ? nextId : null;
 			requestAnimationFrame(() => {
 				rootEl?.querySelector<HTMLButtonElement>(`[data-menubar-trigger="${nextId}"]`)?.focus();
 			});
 		},
-		focusPrevMenu(currentId) {
+		focusPrevMenu(currentId, open = false) {
 			const idx = menuIds.indexOf(currentId);
 			const prevIdx = (idx - 1 + menuIds.length) % menuIds.length;
 			const prevId = menuIds[prevIdx] ?? null;
-			activeMenu = prevId;
+			activeMenu = open ? prevId : null;
 			requestAnimationFrame(() => {
 				rootEl?.querySelector<HTMLButtonElement>(`[data-menubar-trigger="${prevId}"]`)?.focus();
 			});

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchorPosition } from '@dryui/primitives';
-	import type { Placement } from '@dryui/primitives';
+	import { createAnchoredPopover, createDismiss, type Placement } from '@dryui/primitives';
 	import { getMultiSelectComboboxCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -28,29 +28,6 @@
 
 	let el = $state<HTMLDivElement | null>(null);
 
-	const anchor = createAnchorPosition(
-		() => ctx.anchorEl,
-		() => el ?? null,
-		{
-			get placement() {
-				return placement;
-			},
-			get offset() {
-				return offset;
-			}
-		}
-	);
-
-	$effect(() => {
-		if (!el) return;
-
-		el.style.cssText = typeof style === 'string' ? style : '';
-		const positionStyles = anchor.styles;
-		for (const [key, value] of Object.entries(positionStyles)) {
-			el.style.setProperty(key, value);
-		}
-	});
-
 	function attachContent(node: HTMLDivElement) {
 		el = node;
 
@@ -61,41 +38,26 @@
 		};
 	}
 
-	function syncPopover(isOpen: boolean) {
-		return (node: HTMLDivElement) => {
-			if (isOpen && !node.matches(':popover-open')) {
-				node.showPopover();
-			} else if (!isOpen && node.matches(':popover-open')) {
-				node.hidePopover();
-			}
-		};
-	}
-
-	function dismissOnOutsidePointerDown(node: HTMLDivElement) {
-		function handlePointerDown(event: PointerEvent) {
-			const target = event.target;
-			if (!(target instanceof Node)) {
-				return;
-			}
-
-			if (ctx.anchorEl?.contains(target) || node.contains(target)) {
-				return;
-			}
-
-			ctx.close();
-		}
+	const popover = createAnchoredPopover({
+		triggerEl: () => ctx.anchorEl,
+		contentEl: () => el ?? null,
+		open: () => ctx.open,
+		placement: () => placement,
+		offset: () => offset
+	});
 
-		document.addEventListener('pointerdown', handlePointerDown);
-		return () => {
-			document.removeEventListener('pointerdown', handlePointerDown);
-		};
-	}
+	createDismiss({
+		enabled: () => ctx.open,
+		escapeKey: false,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => ctx.anchorEl
+	});
 </script>
 
 <div
 	{@attach attachContent}
-	{@attach syncPopover(ctx.open)}
-	{@attach ctx.open && dismissOnOutsidePointerDown}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="manual"
 	role="listbox"
 	id={ctx.contentId}
@@ -123,6 +85,7 @@
 	[data-multi-select-content] {
 		inset: unset;
 		margin: 0;
+		grid-template-columns: minmax(anchor-size(inline), max-content);
 		background: var(--dry-color-bg-overlay);
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);

package/dist/multi-select-combobox/multi-select-combobox-content.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Placement } from '@dryui/primitives';
+import { type Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     placement?: Placement;
     offset?: number;

package/dist/noise/noise.svelte

@@ -2,7 +2,11 @@
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { observeReducedMotionPreference } from '@dryui/primitives/internal/motion';
+	import {
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference
+	} from '@dryui/primitives/internal/motion';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		opacity?: number;
@@ -24,15 +28,25 @@
 	}: Props = $props();
 
 	let prefersReducedMotion = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
 
-	onMount(() =>
-		observeReducedMotionPreference((matches) => {
+	onMount(() => {
+		const stopMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
-		})
-	);
+		});
+		const stopVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+		});
+		return () => {
+			stopMotion();
+			stopVisibility();
+		};
+	});
 
 	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
 	const shouldAnimate = $derived(animated && !prefersReducedMotion);
+	const paused = $derived(!onScreen || !tabVisible);
 
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
@@ -40,6 +54,16 @@
 			node.style.setProperty('--dry-noise-opacity', normalizedOpacity);
 			node.style.setProperty('--dry-noise-blend', blend);
 		});
+
+		$effect(() =>
+			observeInViewport(
+				node,
+				(inView) => {
+					onScreen = inView;
+				},
+				{ rootMargin: '200px' }
+			)
+		);
 	}
 </script>
 
@@ -48,6 +72,7 @@
 	data-noise
 	data-animated={shouldAnimate || undefined}
 	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
 	data-grain={grain}
 	{...rest}
 	{@attach applyStyles}
@@ -95,10 +120,17 @@
 	}
 
 	[data-noise][data-animated] [data-noise-texture] {
-		will-change: transform;
 		animation: noise-drift 1.6s steps(6) infinite;
 	}
 
+	[data-noise][data-animated]:not([data-paused]) [data-noise-texture] {
+		will-change: transform;
+	}
+
+	[data-noise][data-animated][data-paused] [data-noise-texture] {
+		animation-play-state: paused;
+	}
+
 	[data-noise][data-reduced-motion] [data-noise-texture] {
 		animation: none;
 	}

package/dist/notification-center/context.svelte.d.ts

@@ -10,7 +10,6 @@ export interface NotificationCenterContext {
     readonly open: boolean;
     readonly triggerId: string;
     readonly panelId: string;
-    triggerEl: HTMLElement | null;
     markAllRead: () => void;
     markRead: (id: string) => void;
     remove: (id: string) => void;

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { useAnchorStyles } from '../utils/use-anchor-styles.svelte.js';
+	import { createAnchoredPopover } from '@dryui/primitives';
 	import { getNotificationCenterCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -33,54 +34,68 @@
 
 	const ctx = getNotificationCenterCtx();
 
-	let panelEl = $state<HTMLDivElement>();
+	let panelEl = $state<HTMLDivElement | null>(null);
+	const triggerEl = $derived(document.getElementById(ctx.triggerId) as HTMLElement | null);
 
-	const anchor = useAnchorStyles({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => panelEl ?? null,
-		placement: () => placement,
-		offset: () => offset
-	});
+	function attachPanel(node: HTMLDivElement) {
+		panelEl = node;
 
-	$effect(() => {
-		if (!panelEl) return;
+		return () => {
+			if (panelEl === node) {
+				panelEl = null;
+			}
+		};
+	}
 
+	function focusTrigger() {
+		if (triggerEl instanceof HTMLElement) {
+			triggerEl.focus();
+		}
+	}
+
+	function handleClose(restoreFocus: boolean) {
 		if (ctx.open) {
-			try {
-				if (!panelEl.matches(':popover-open')) {
-					panelEl.showPopover();
-				}
-			} catch {
-				// Already shown
-			}
+			ctx.close();
+		}
+		if (restoreFocus) {
+			requestAnimationFrame(() => focusTrigger());
+		}
+	}
 
-			// Nudge panel into viewport if anchor positioning overflows
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		handleClose(true);
+	}
+
+	const popover = createAnchoredPopover({
+		triggerEl: () => triggerEl,
+		contentEl: () => panelEl ?? null,
+		open: () => ctx.open,
+		placement: () => placement,
+		offset: () => offset,
+		onAfterShow: (node) => {
 			requestAnimationFrame(() => {
-				if (!panelEl) return;
-				panelEl.style.translate = '';
-				const rect = panelEl.getBoundingClientRect();
+				node.style.translate = '';
+				const rect = node.getBoundingClientRect();
 				const pad = 8;
 				if (rect.left < pad) {
-					panelEl.style.translate = `${pad - rect.left}px 0`;
+					node.style.translate = `${pad - rect.left}px 0`;
 				} else if (rect.right > window.innerWidth - pad) {
-					panelEl.style.translate = `${window.innerWidth - pad - rect.right}px 0`;
+					node.style.translate = `${window.innerWidth - pad - rect.right}px 0`;
 				}
 			});
-		} else {
-			try {
-				if (panelEl.matches(':popover-open')) {
-					panelEl.hidePopover();
-				}
-			} catch {
-				// Already hidden
-			}
-			if (panelEl) panelEl.style.translate = '';
+		},
+		onAfterHide: (node) => {
+			node.style.translate = '';
 		}
 	});
 </script>
 
 <div
-	bind:this={panelEl}
+	{@attach attachPanel}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	id={ctx.panelId}
 	popover="auto"
 	role="region"
@@ -88,15 +103,19 @@
 	data-notification-center-panel
 	data-state={ctx.open ? 'open' : 'closed'}
 	class={className}
-	use:anchor.applyPosition={style}
 	ontoggle={(e) => {
 		const event = /** @type {ToggleEvent} */ (e);
 		if (event.newState === 'open') {
 			ctx.show();
 		} else {
-			ctx.close();
+			const restoreFocus =
+				panelEl instanceof HTMLElement &&
+				document.activeElement instanceof HTMLElement &&
+				panelEl.contains(document.activeElement);
+			handleClose(restoreFocus);
 		}
 	}}
+	onkeydown={handleKeydown}
 	{...rest}
 >
 	{@render children()}

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

@@ -36,7 +36,6 @@
 		get panelId() {
 			return panelId;
 		},
-		triggerEl: null,
 		markAllRead() {
 			items = items.map((item) => ({ ...item, read: true }));
 		},

package/dist/notification-center/notification-center-trigger-button.svelte

@@ -11,13 +11,6 @@
 	let { children, onclick, ...rest }: Props = $props();
 
 	const ctx = getNotificationCenterCtx();
-
-	$effect(() => {
-		const el = document.getElementById(ctx.triggerId);
-		if (el) {
-			ctx.triggerEl = el as HTMLButtonElement;
-		}
-	});
 </script>
 
 <Button
@@ -25,8 +18,8 @@
 	type="button"
 	id={ctx.triggerId}
 	popovertarget={ctx.panelId}
+	aria-controls={ctx.panelId}
 	aria-expanded={ctx.open}
-	aria-haspopup="dialog"
 	data-notification-center-trigger
 	{onclick}
 	{...rest}

package/dist/option-picker/option-picker-description.svelte

@@ -17,8 +17,8 @@
 	[data-option-picker-description] {
 		grid-column: var(--dry-option-picker-description-column, 2);
 		grid-row: var(--dry-option-picker-description-row, 2);
-		font-size: var(--dry-type-small-size);
-		line-height: 1.35;
+		font-size: var(--dry-option-picker-description-size, var(--dry-type-small-size));
+		line-height: var(--dry-option-picker-description-line-height, 1.35);
 		color: var(--dry-color-text-weak);
 		text-wrap: pretty;
 	}

package/dist/option-picker/option-picker-item.svelte

@@ -193,9 +193,16 @@
 	.content {
 		display: grid;
 		grid-template-columns: auto minmax(0, 1fr);
-		align-items: center;
+		align-items: var(--dry-option-picker-content-align, center);
 		justify-items: start;
-		gap: var(--dry-option-picker-item-gap, var(--dry-space-3));
+		column-gap: var(
+			--dry-option-picker-item-column-gap,
+			var(--dry-option-picker-item-gap, var(--dry-space-3))
+		);
+		row-gap: var(
+			--dry-option-picker-item-row-gap,
+			var(--dry-option-picker-item-gap, var(--dry-space-3))
+		);
 		padding: var(--dry-option-picker-padding-y, var(--dry-space-3))
 			var(--dry-option-picker-padding-x, var(--dry-space-3));
 		min-block-size: var(--dry-option-picker-min-block-size, 3.5rem);
@@ -227,7 +234,7 @@
 	}
 
 	.root[data-size='compact'] .content {
-		min-block-size: 2.75rem;
+		min-block-size: var(--dry-option-picker-compact-min-block-size, 2.75rem);
 	}
 
 	.root[data-size='visual'] .content {

package/dist/option-picker/option-picker-label.svelte

@@ -17,8 +17,8 @@
 	[data-option-picker-label] {
 		grid-column: var(--dry-option-picker-label-column, 2);
 		grid-row: var(--dry-option-picker-label-row, 1);
-		font-size: var(--dry-type-small-size);
+		font-size: var(--dry-option-picker-label-size, var(--dry-type-small-size));
 		font-weight: 600;
-		line-height: 1.2;
+		line-height: var(--dry-option-picker-label-line-height, 1.2);
 	}
 </style>

package/dist/option-picker/option-picker-preview.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
@@ -11,20 +12,23 @@
 
 	let { color, shape = 'rounded', variant = 'default', children, ...rest }: Props = $props();
 
-	let el: HTMLSpanElement | undefined = $state();
-
-	$effect(() => {
-		if (!el) return;
-		if (color) {
-			el.style.setProperty('--dry-option-picker-preview-bg', color);
-		} else {
-			el.style.removeProperty('--dry-option-picker-preview-bg');
-		}
-	});
+	function applyColor(value?: string): Attachment<HTMLSpanElement> {
+		return (node) => {
+			if (value) {
+				node.style.setProperty('--dry-option-picker-preview-bg', value);
+			} else {
+				node.style.removeProperty('--dry-option-picker-preview-bg');
+			}
+
+			return () => {
+				node.style.removeProperty('--dry-option-picker-preview-bg');
+			};
+		};
+	}
 </script>
 
 <span
-	bind:this={el}
+	{@attach applyColor(color)}
 	data-option-picker-preview
 	data-option-picker-preview-shape={shape}
 	data-variant={variant !== 'default' ? variant : undefined}
@@ -39,9 +43,10 @@
 		grid-column: var(--dry-option-picker-preview-column, 1);
 		grid-row: var(--dry-option-picker-preview-row, 1 / span 3);
 		place-items: center;
-		align-self: center;
+		align-self: var(--dry-option-picker-preview-align-self, center);
 		block-size: var(--dry-option-picker-preview-size, 2.25rem);
 		aspect-ratio: 1;
+		margin-block-start: var(--dry-option-picker-preview-offset-block-start, 0);
 		padding: var(--dry-option-picker-preview-padding, 0);
 		border: 1px solid var(--dry-option-picker-preview-border, var(--dry-color-stroke-weak));
 		border-radius: var(--dry-option-picker-preview-radius, var(--dry-radius-md));
@@ -75,7 +80,7 @@
 			var(--_preset-color) 46%,
 			var(--dry-color-stroke-weak) 54%
 		);
-		--dry-option-picker-preview-size: 2.75rem;
+		--dry-option-picker-preview-size: var(--dry-option-picker-preview-preset-size, 2.75rem);
 		background: linear-gradient(
 			155deg,
 			color-mix(in srgb, white 18%, var(--_preset-color) 82%) 0%,