@dryui/ui 1.3.1 → 1.4.0

package/dist/accordion/accordion-content.svelte

@@ -15,7 +15,7 @@
 <div
 	class={className}
 	id={itemCtx.contentId}
-	role="region"
+	aria-hidden={!itemCtx.open}
 	hidden={!itemCtx.open}
 	data-state={itemCtx.open ? 'open' : 'closed'}
 	data-accordion-content

package/dist/alert/alert.svelte

@@ -53,7 +53,7 @@
 
 		<div data-alert-body>
 			{#if title}
-				<h5 data-alert-title>{@render title()}</h5>
+				<div data-alert-title>{@render title()}</div>
 			{/if}
 			{#if description}
 				<p data-alert-description>{@render description()}</p>

package/dist/app-frame/app-frame.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		title?: string;
+		actions?: Snippet;
+		children: Snippet;
+	}
+
+	let { title, actions, children, class: className, ...rest }: Props = $props();
+</script>
+
+<div data-app-frame class={className} {...rest}>
+	<div data-part="chrome" aria-hidden="true">
+		<div data-part="dots">
+			<span data-part="dot" data-tone="close"></span>
+			<span data-part="dot" data-tone="min"></span>
+			<span data-part="dot" data-tone="max"></span>
+		</div>
+		{#if title}
+			<span data-part="title">{title}</span>
+		{/if}
+		{#if actions}
+			<div data-part="actions">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+	<div data-part="content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	[data-app-frame] {
+		--dry-app-frame-bg: var(--dry-color-bg-base);
+		--dry-app-frame-chrome-bg: var(--dry-color-bg-raised);
+		--dry-app-frame-border: var(--dry-color-stroke-weak);
+		--dry-app-frame-radius: var(--dry-radius-xl);
+		--dry-app-frame-dot-size: 0.75rem;
+		--dry-app-frame-dot-close: #ff5f56;
+		--dry-app-frame-dot-min: #ffbd2e;
+		--dry-app-frame-dot-max: #27c93f;
+
+		display: grid;
+		grid-template-rows: auto minmax(0, 1fr);
+		border: 1px solid var(--dry-app-frame-border);
+		border-radius: var(--dry-app-frame-radius);
+		background: var(--dry-app-frame-bg);
+		overflow: clip;
+	}
+
+	[data-part='chrome'] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: auto;
+		align-items: center;
+		padding: var(--dry-app-frame-chrome-padding, var(--dry-space-3) var(--dry-space-4));
+		border-block-end: 1px solid var(--dry-app-frame-border);
+		background: var(--dry-app-frame-chrome-bg);
+	}
+
+	[data-part='chrome'] > * {
+		grid-row: 1;
+		grid-column: 1;
+	}
+
+	[data-part='dots'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: auto;
+		gap: var(--dry-space-1_5);
+		align-items: center;
+		justify-self: start;
+	}
+
+	[data-part='dot'] {
+		display: block;
+		block-size: var(--dry-app-frame-dot-size);
+		aspect-ratio: 1;
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-color-stroke-weak);
+	}
+
+	[data-part='dot'][data-tone='close'] {
+		background: var(--dry-app-frame-dot-close);
+	}
+
+	[data-part='dot'][data-tone='min'] {
+		background: var(--dry-app-frame-dot-min);
+	}
+
+	[data-part='dot'][data-tone='max'] {
+		background: var(--dry-app-frame-dot-max);
+	}
+
+	[data-part='title'] {
+		justify-self: center;
+		color: var(--dry-color-text-weak);
+		font-size: var(--dry-type-small-size, 0.875rem);
+		font-weight: 500;
+		letter-spacing: 0.01em;
+		text-align: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+
+	[data-part='actions'] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: auto;
+		align-items: center;
+		gap: var(--dry-space-2);
+		justify-self: end;
+	}
+
+	[data-part='content'] {
+		display: grid;
+		padding: var(--dry-app-frame-content-padding, 0);
+		min-block-size: 0;
+	}
+</style>

package/dist/app-frame/app-frame.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    actions?: Snippet;
+    children: Snippet;
+}
+declare const AppFrame: import("svelte").Component<Props, {}, "">;
+type AppFrame = ReturnType<typeof AppFrame>;
+export default AppFrame;

package/dist/app-frame/index.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AppFrameProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    actions?: Snippet;
+    children: Snippet;
+}
+export { default as AppFrame } from './app-frame.svelte';

package/dist/app-frame/index.js

@@ -0,0 +1 @@
+export { default as AppFrame } from './app-frame.svelte';

package/dist/aurora/aurora.svelte

@@ -3,6 +3,14 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { BlendMode } from '@dryui/primitives/aurora';
+	import {
+		getReducedMotionPreference,
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference,
+		registerPropertyOnce,
+		supportsPropertyRegistration
+	} from '@dryui/primitives/internal/motion';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
@@ -58,13 +66,6 @@
 	const customPalette = $derived(Array.isArray(palette) ? palette : null);
 
 	onMount(() => {
-		const {
-			registerPropertyOnce,
-			supportsPropertyRegistration,
-			observeReducedMotionPreference,
-			getReducedMotionPreference
-		} = await_motion();
-
 		supportsAnimation = supportsPropertyRegistration();
 		registerPropertyOnce({
 			name: '--dry-aurora-angle',
@@ -79,27 +80,21 @@
 			initialValue: '0%'
 		});
 
-		documentVisible = document.visibilityState === 'visible';
-		const handleVisibilityChange = () => {
-			documentVisible = document.visibilityState === 'visible';
-		};
-		document.addEventListener('visibilitychange', handleVisibilityChange);
-
-		const updateAnimatedState = (matches: boolean) => {
+		const stopVisibility = observePageVisibility((visible) => {
+			documentVisible = visible;
+		});
+		const stopMotion = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
-		};
-		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
-		let stopViewportObserver = () => {};
-
-		if (rootNode && 'IntersectionObserver' in window) {
-			const observer = new IntersectionObserver(
-				([entry]) => {
-					inViewport = entry?.isIntersecting ?? true;
+		});
+		let stopViewport = () => {};
+		if (rootNode) {
+			stopViewport = observeInViewport(
+				rootNode,
+				(inView) => {
+					inViewport = inView;
 				},
 				{ threshold: 0.12 }
 			);
-			observer.observe(rootNode);
-			stopViewportObserver = () => observer.disconnect();
 		}
 
 		if (!supportsAnimation || getReducedMotionPreference()) {
@@ -107,44 +102,12 @@
 		}
 
 		return () => {
-			document.removeEventListener('visibilitychange', handleVisibilityChange);
-			stopMotionObserver();
-			stopViewportObserver();
+			stopVisibility();
+			stopMotion();
+			stopViewport();
 		};
 	});
 
-	function await_motion() {
-		// Dynamic import would be needed for the motion utils from primitives
-		// Instead, inline the logic since we're rendering directly
-		return {
-			registerPropertyOnce(opts: {
-				name: string;
-				syntax: string;
-				inherits: boolean;
-				initialValue: string;
-			}) {
-				try {
-					CSS.registerProperty(opts);
-				} catch {
-					// already registered or not supported
-				}
-			},
-			supportsPropertyRegistration() {
-				return typeof CSS !== 'undefined' && 'registerProperty' in CSS;
-			},
-			observeReducedMotionPreference(cb: (matches: boolean) => void) {
-				const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-				cb(mql.matches);
-				const handler = (e: MediaQueryListEvent) => cb(e.matches);
-				mql.addEventListener('change', handler);
-				return () => mql.removeEventListener('change', handler);
-			},
-			getReducedMotionPreference() {
-				return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-			}
-		};
-	}
-
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';

package/dist/beam/beam.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { BlendMode } from '@dryui/primitives/beam';
+	import { observeOffscreenState } from '@dryui/primitives/internal/motion';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
 		color?: string;
@@ -40,6 +41,8 @@
 			if (blendMode) node.style.setProperty('--dry-beam-blend', blendMode);
 			else node.style.removeProperty('--dry-beam-blend');
 		});
+
+		$effect(() => observeOffscreenState(node, { rootMargin: '200px' }));
 	}
 </script>
 
@@ -61,12 +64,22 @@
 		position: relative;
 		overflow: hidden;
 		border-radius: inherit;
+		contain: content;
 	}
 
 	[data-beam-layer] {
 		position: absolute;
 		inset: 0;
 		pointer-events: none;
+		overflow: hidden;
+		opacity: calc(var(--dry-beam-intensity, 70) / 100);
+		mix-blend-mode: var(--dry-beam-blend, var(--dry-beam-default-blend, multiply));
+	}
+
+	[data-beam-layer]::before {
+		content: '';
+		position: absolute;
+		inset: -100%;
 		background-image: linear-gradient(
 			var(--dry-beam-angle, 45deg),
 			transparent 0%,
@@ -75,26 +88,32 @@
 			transparent calc(50% + var(--dry-beam-width, 2px)),
 			transparent 100%
 		);
-		background-size: 300% 300%;
-		opacity: calc(var(--dry-beam-intensity, 70) / 100);
-		mix-blend-mode: var(--dry-beam-blend, var(--dry-beam-default-blend, multiply));
 		filter: blur(calc(var(--dry-beam-width, 2px) * 2));
 		animation: beam-sweep var(--dry-beam-speed, 3s) ease-in-out infinite;
+		backface-visibility: hidden;
+	}
+
+	[data-beam]:not([data-offscreen]) [data-beam-layer]::before {
+		will-change: transform, filter;
+	}
+
+	[data-beam][data-offscreen] [data-beam-layer]::before {
+		animation-play-state: paused;
 	}
 
 	@keyframes beam-sweep {
-		0% {
-			background-position: -50% -50%;
+		from {
+			transform: translate(-33.333%, -33.333%);
 		}
-		100% {
-			background-position: 150% 150%;
+		to {
+			transform: translate(33.333%, 33.333%);
 		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		[data-beam-layer] {
+		[data-beam-layer]::before {
 			animation: none;
-			background-position: 50% 50%;
+			transform: translate(0, 0);
 		}
 	}
 </style>

package/dist/carousel/carousel-button-dots.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
+	import { VisuallyHidden } from '../visually-hidden/index.js';
 	import { getCarouselCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
@@ -9,19 +10,35 @@
 	const ctx = getCarouselCtx();
 </script>
 
-<div role="tablist" aria-label="Slide indicators" data-carousel-dots class={className} {...rest}>
+<div
+	role="group"
+	aria-label="Choose slide to display"
+	data-carousel-dots
+	class={className}
+	{...rest}
+>
 	{#each Array(ctx.totalSlides) as _, i (i)}
+		{@const isActive = ctx.activeIndex === i}
 		<Button
 			variant="toggle"
 			size="icon-sm"
 			type="button"
-			role="tab"
-			aria-selected={ctx.activeIndex === i}
-			aria-pressed={ctx.activeIndex === i}
-			aria-label="Go to slide {i + 1}"
-			onclick={() => ctx.scrollTo(i)}
+			aria-controls={ctx.getSlideId(i)}
+			aria-disabled={isActive ? true : undefined}
+			data-active={isActive ? '' : undefined}
+			onclick={() => {
+				if (!isActive) {
+					ctx.scrollTo(i);
+				}
+			}}
 		>
-			<span class="dot"></span>
+			<VisuallyHidden>
+				Show slide {i + 1} of {ctx.totalSlides}
+				{#if isActive}
+					(current slide)
+				{/if}
+			</VisuallyHidden>
+			<span class="dot" aria-hidden="true"></span>
 		</Button>
 	{/each}
 </div>
@@ -45,7 +62,7 @@
 		opacity: 0.4;
 	}
 
-	[aria-selected='true'] .dot {
+	[data-active] .dot {
 		opacity: 1;
 	}
 </style>

package/dist/carousel/carousel-button-thumbnails.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Button from '../button/button.svelte';
+	import { VisuallyHidden } from '../visually-hidden/index.js';
 	import { getCarouselCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -14,24 +15,36 @@
 </script>
 
 <div
-	role="tablist"
-	aria-label="Slide thumbnails"
+	role="group"
+	aria-label="Choose slide to display"
 	data-carousel-thumbnails
 	data-position={position}
 	class={className}
 	{...rest}
 >
 	{#each Array(ctx.totalSlides) as _, i (i)}
+		{@const isActive = ctx.activeIndex === i}
 		<Button
 			variant="bare"
 			type="button"
-			role="tab"
-			aria-selected={ctx.activeIndex === i}
-			aria-label="Go to slide {i + 1}"
-			data-active={ctx.activeIndex === i ? '' : undefined}
-			onclick={() => ctx.scrollTo(i)}
+			aria-controls={ctx.getSlideId(i)}
+			aria-disabled={isActive ? true : undefined}
+			data-active={isActive ? '' : undefined}
+			onclick={() => {
+				if (!isActive) {
+					ctx.scrollTo(i);
+				}
+			}}
 		>
-			{@render children({ index: i, isActive: ctx.activeIndex === i, scrollTo: ctx.scrollTo })}
+			<VisuallyHidden>
+				Show slide {i + 1} of {ctx.totalSlides}
+				{#if isActive}
+					(current slide)
+				{/if}
+			</VisuallyHidden>
+			<span class="thumbnail-preview" aria-hidden="true">
+				{@render children({ index: i, isActive, scrollTo: ctx.scrollTo })}
+			</span>
 		</Button>
 	{/each}
 </div>
@@ -62,4 +75,8 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
+
+	.thumbnail-preview {
+		display: inline-grid;
+	}
 </style>

package/dist/carousel/carousel-root.svelte

@@ -1,6 +1,15 @@
+<script module lang="ts">
+	let carouselIds = 0;
+</script>
+
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import {
+		getReducedMotionPreference,
+		observeReducedMotionPreference
+	} from '../internal/motion.js';
 	import { setCarouselCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -23,9 +32,20 @@
 	let totalSlides = $state(0);
 	let slideCounter = $state(0);
 	let viewportEl = $state<HTMLElement | null>(null);
+	let rootEl = $state<HTMLDivElement | null>(null);
+	let prefersReducedMotion = $state(false);
+	let manualPaused = $state(false);
+	let pausedByHover = $state(false);
+	let pausedByFocus = $state(false);
+	const carouselId = `dry-carousel-${++carouselIds}`;
 
 	const canScrollPrev = $derived(loop || activeIndex > 0);
 	const canScrollNext = $derived(loop || activeIndex < totalSlides - 1);
+	const autoplayDelay = $derived(typeof autoplay === 'number' && autoplay > 0 ? autoplay : 0);
+	const autoplayConfigured = $derived(autoplayDelay > 0);
+	const autoplayEnabled = $derived(autoplayConfigured && totalSlides > 1);
+	const autoplayPaused = $derived(manualPaused || pausedByHover || pausedByFocus);
+	const autoplayRunning = $derived(autoplayEnabled && !autoplayPaused);
 
 	function resolveIndex(index: number) {
 		if (totalSlides === 0) return 0;
@@ -40,7 +60,7 @@
 		viewportEl.scrollTo({
 			left: orientation === 'horizontal' ? slide.offsetLeft : 0,
 			top: orientation === 'vertical' ? slide.offsetTop : 0,
-			behavior: 'smooth'
+			behavior: prefersReducedMotion ? 'auto' : 'smooth'
 		});
 	}
 
@@ -54,6 +74,19 @@
 		scrollViewportTo(target);
 	}
 
+	function toggleAutoplay() {
+		if (!autoplayEnabled) return;
+
+		if (autoplayRunning) {
+			manualPaused = true;
+			return;
+		}
+
+		manualPaused = false;
+		pausedByHover = false;
+		pausedByFocus = false;
+	}
+
 	setCarouselCtx({
 		get activeIndex() {
 			return activeIndex;
@@ -70,6 +103,15 @@
 		get canScrollNext() {
 			return canScrollNext;
 		},
+		get autoplayEnabled() {
+			return autoplayEnabled;
+		},
+		get autoplayPaused() {
+			return autoplayPaused;
+		},
+		get autoplayRunning() {
+			return autoplayRunning;
+		},
 		scrollTo,
 		syncActiveIndex,
 		scrollPrev() {
@@ -78,6 +120,10 @@
 		scrollNext() {
 			scrollTo(activeIndex + 1);
 		},
+		toggleAutoplay,
+		getSlideId(index) {
+			return `${carouselId}-slide-${index + 1}`;
+		},
 		registerViewport(el) {
 			viewportEl = el;
 		},
@@ -97,21 +143,67 @@
 	});
 
 	$effect(() => {
-		if (!autoplay) return;
+		if (!autoplayConfigured) {
+			prefersReducedMotion = false;
+			manualPaused = false;
+			pausedByHover = false;
+			pausedByFocus = false;
+			return;
+		}
+
+		prefersReducedMotion = getReducedMotionPreference();
+		if (prefersReducedMotion) {
+			manualPaused = true;
+		}
+
+		return observeReducedMotionPreference((value) => {
+			prefersReducedMotion = value;
+			if (value) {
+				manualPaused = true;
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!autoplayRunning || !autoplayConfigured) return;
 		const interval = setInterval(() => {
 			scrollTo(activeIndex + 1);
-		}, autoplay);
+		}, autoplayDelay);
 		return () => clearInterval(interval);
 	});
 </script>
 
 <div
-	role="region"
+	bind:this={rootEl}
+	role="group"
 	aria-roledescription="carousel"
 	data-carousel-root
 	data-orientation={orientation}
+	data-autoplay-enabled={autoplayEnabled ? '' : undefined}
+	data-autoplay-state={autoplayEnabled ? (autoplayRunning ? 'running' : 'paused') : undefined}
 	class={className}
 	{...rest}
+	onfocusin={() => {
+		if (autoplayEnabled) {
+			pausedByFocus = true;
+		}
+	}}
+	onfocusout={(event) => {
+		const nextTarget = event.relatedTarget;
+		if (rootEl && nextTarget instanceof Node && rootEl.contains(nextTarget)) {
+			return;
+		}
+
+		pausedByFocus = false;
+	}}
+	onpointerenter={() => {
+		if (autoplayEnabled) {
+			pausedByHover = true;
+		}
+	}}
+	onpointerleave={() => {
+		pausedByHover = false;
+	}}
 	onkeydown={(e) => {
 		const prev = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
 		const next = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
@@ -125,6 +217,18 @@
 		}
 	}}
 >
+	{#if autoplayConfigured}
+		<Button
+			variant="outline"
+			size="sm"
+			type="button"
+			data-carousel-rotation-control
+			onclick={() => toggleAutoplay()}
+		>
+			{autoplayRunning ? 'Stop slide rotation' : 'Start slide rotation'}
+		</Button>
+	{/if}
+
 	{@render children()}
 </div>
 
@@ -134,4 +238,11 @@
 
 		position: relative;
 	}
+
+	[data-carousel-rotation-control] {
+		position: absolute;
+		top: var(--dry-space-3);
+		left: var(--dry-space-3);
+		z-index: 1;
+	}
 </style>