@dryui/ui 1.3.1 → 1.4.0

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%,

package/dist/phone-input/phone-input-select.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface CountryInfo {
-		code: string;
-		name: string;
-		dialCode: string;
-		flag: string;
-		format?: string;
-	}
+	import { COUNTRY_DATA, type CountryInfo } from '@dryui/primitives';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
 		value?: string;
@@ -33,150 +26,7 @@
 		...rest
 	}: Props = $props();
 
-	const defaultCountries: CountryInfo[] = [
-		{
-			code: 'US',
-			name: 'United States',
-			dialCode: '+1',
-			flag: '\u{1F1FA}\u{1F1F8}',
-			format: '### ### ####'
-		},
-		{
-			code: 'GB',
-			name: 'United Kingdom',
-			dialCode: '+44',
-			flag: '\u{1F1EC}\u{1F1E7}',
-			format: '#### ######'
-		},
-		{
-			code: 'CA',
-			name: 'Canada',
-			dialCode: '+1',
-			flag: '\u{1F1E8}\u{1F1E6}',
-			format: '### ### ####'
-		},
-		{
-			code: 'AU',
-			name: 'Australia',
-			dialCode: '+61',
-			flag: '\u{1F1E6}\u{1F1FA}',
-			format: '### ### ###'
-		},
-		{
-			code: 'DE',
-			name: 'Germany',
-			dialCode: '+49',
-			flag: '\u{1F1E9}\u{1F1EA}',
-			format: '### #######'
-		},
-		{
-			code: 'FR',
-			name: 'France',
-			dialCode: '+33',
-			flag: '\u{1F1EB}\u{1F1F7}',
-			format: '# ## ## ## ##'
-		},
-		{
-			code: 'IT',
-			name: 'Italy',
-			dialCode: '+39',
-			flag: '\u{1F1EE}\u{1F1F9}',
-			format: '### ### ####'
-		},
-		{
-			code: 'ES',
-			name: 'Spain',
-			dialCode: '+34',
-			flag: '\u{1F1EA}\u{1F1F8}',
-			format: '### ## ## ##'
-		},
-		{
-			code: 'BR',
-			name: 'Brazil',
-			dialCode: '+55',
-			flag: '\u{1F1E7}\u{1F1F7}',
-			format: '## ##### ####'
-		},
-		{
-			code: 'IN',
-			name: 'India',
-			dialCode: '+91',
-			flag: '\u{1F1EE}\u{1F1F3}',
-			format: '##### #####'
-		},
-		{
-			code: 'CN',
-			name: 'China',
-			dialCode: '+86',
-			flag: '\u{1F1E8}\u{1F1F3}',
-			format: '### #### ####'
-		},
-		{
-			code: 'JP',
-			name: 'Japan',
-			dialCode: '+81',
-			flag: '\u{1F1EF}\u{1F1F5}',
-			format: '## #### ####'
-		},
-		{
-			code: 'KR',
-			name: 'South Korea',
-			dialCode: '+82',
-			flag: '\u{1F1F0}\u{1F1F7}',
-			format: '## #### ####'
-		},
-		{
-			code: 'MX',
-			name: 'Mexico',
-			dialCode: '+52',
-			flag: '\u{1F1F2}\u{1F1FD}',
-			format: '## #### ####'
-		},
-		{
-			code: 'RU',
-			name: 'Russia',
-			dialCode: '+7',
-			flag: '\u{1F1F7}\u{1F1FA}',
-			format: '### ### ## ##'
-		},
-		{
-			code: 'SA',
-			name: 'Saudi Arabia',
-			dialCode: '+966',
-			flag: '\u{1F1F8}\u{1F1E6}',
-			format: '## ### ####'
-		},
-		{
-			code: 'AE',
-			name: 'United Arab Emirates',
-			dialCode: '+971',
-			flag: '\u{1F1E6}\u{1F1EA}',
-			format: '## ### ####'
-		},
-		{
-			code: 'SG',
-			name: 'Singapore',
-			dialCode: '+65',
-			flag: '\u{1F1F8}\u{1F1EC}',
-			format: '#### ####'
-		},
-		{
-			code: 'NL',
-			name: 'Netherlands',
-			dialCode: '+31',
-			flag: '\u{1F1F3}\u{1F1F1}',
-			format: '# ########'
-		},
-		{
-			code: 'SE',
-			name: 'Sweden',
-			dialCode: '+46',
-			flag: '\u{1F1F8}\u{1F1EA}',
-			format: '## ### ## ##'
-		}
-	];
-
-	const countries = $derived(countriesProp ?? defaultCountries);
+	const countries = $derived(countriesProp ?? COUNTRY_DATA);
 	let manualCountryCode = $derived(defaultCountry);
 
 	const orderedCountries = $derived(

package/dist/phone-input/phone-input-select.svelte.d.ts

@@ -1,11 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface CountryInfo {
-    code: string;
-    name: string;
-    dialCode: string;
-    flag: string;
-    format?: string;
-}
+import { type CountryInfo } from '@dryui/primitives';
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
     value?: string;
     defaultCountry?: string;