@dryui/ui 1.3.1 → 1.4.1

package/dist/carousel/carousel-slide.svelte

@@ -10,6 +10,7 @@
 	let { class: className, children, ...rest }: Props = $props();
 	const ctx = getCarouselCtx();
 	const index = ctx.registerSlide();
+	const slideId = ctx.getSlideId(index);
 
 	$effect(() => {
 		return () => ctx.unregisterSlide();
@@ -17,11 +18,14 @@
 </script>
 
 <div
+	id={slideId}
 	role="group"
 	aria-roledescription="slide"
-	aria-label="Slide {index + 1} of {ctx.totalSlides}"
+	aria-hidden={ctx.activeIndex === index ? undefined : true}
+	aria-label={`${index + 1} of ${ctx.totalSlides}`}
 	data-carousel-slide=""
 	data-active={ctx.activeIndex === index ? '' : undefined}
+	inert={ctx.activeIndex !== index}
 	class={className}
 	{...rest}
 >

package/dist/carousel/carousel-viewport.svelte

@@ -35,6 +35,8 @@
 
 <div
 	bind:this={el}
+	aria-atomic="false"
+	aria-live={ctx.autoplayRunning ? 'off' : 'polite'}
 	data-carousel-viewport=""
 	data-orientation={ctx.orientation}
 	class={className}

package/dist/carousel/context.svelte.d.ts

@@ -4,10 +4,15 @@ interface CarouselContext {
     readonly orientation: 'horizontal' | 'vertical';
     readonly canScrollPrev: boolean;
     readonly canScrollNext: boolean;
+    readonly autoplayEnabled: boolean;
+    readonly autoplayPaused: boolean;
+    readonly autoplayRunning: boolean;
     scrollTo: (index: number) => void;
     syncActiveIndex: (index: number) => void;
     scrollPrev: () => void;
     scrollNext: () => void;
+    toggleAutoplay: () => void;
+    getSlideId: (index: number) => string;
     registerViewport: (el: HTMLElement) => void;
     registerSlide: () => number;
     unregisterSlide: () => void;

package/dist/chart/chart-bars.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SVGAttributes } from 'svelte/elements';
-	import { getChartCtx } from './context.svelte.js';
+	import { getChartCtx, registerChartInteractive } from './context.svelte.js';
 
 	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
 		radius?: number;
@@ -31,12 +31,32 @@
 	function handleClick(bar: (typeof bars)[number]) {
 		onclick?.({ label: bar.point.label, value: bar.point.value, index: bar.index });
 	}
+
+	function attachBarClick(bar: (typeof bars)[number]) {
+		if (!onclick) return undefined;
+
+		return (node: SVGRectElement) => {
+			const handleNodeClick = () => handleClick(bar);
+			node.addEventListener('click', handleNodeClick);
+			return () => node.removeEventListener('click', handleNodeClick);
+		};
+	}
+
+	const registeredHandler = $derived(
+		onclick
+			? (index: number) => {
+					const point = ctx.data[index];
+					if (!point) return;
+					onclick({ label: point.label, value: point.value, index });
+				}
+			: undefined
+	);
+
+	registerChartInteractive(ctx, () => registeredHandler);
 </script>
 
 <g role="list" aria-label="Bar chart data" data-chart-bars class={className} {...rest}>
-	{#each bars as bar}
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	{#each bars as bar (bar.index)}
 		<rect
 			x={bar.x}
 			y={bar.y}
@@ -44,20 +64,9 @@
 			height={bar.height}
 			rx={radius}
 			fill={bar.point.color ?? 'currentColor'}
-			role={onclick ? 'button' : 'listitem'}
-			tabindex={onclick ? 0 : undefined}
-			aria-label="{bar.point.label}: {bar.point.value}"
 			data-part="bar"
 			data-clickable={onclick ? '' : undefined}
-			onclick={onclick ? () => handleClick(bar) : undefined}
-			onkeydown={onclick
-				? (e: KeyboardEvent) => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault();
-							handleClick(bar);
-						}
-					}
-				: undefined}
+			{@attach attachBarClick(bar)}
 		/>
 	{/each}
 </g>

package/dist/chart/chart-donut.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { SVGAttributes } from 'svelte/elements';
-	import { getChartCtx } from './context.svelte.js';
+	import { getChartCtx, registerChartInteractive } from './context.svelte.js';
 
 	interface Props extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {
 		innerRadius?: number;
@@ -50,12 +50,32 @@
 	function handleClick(seg: (typeof segments)[number]) {
 		onclick?.({ label: seg.point.label, value: seg.point.value, index: seg.index });
 	}
+
+	function attachSegmentClick(seg: (typeof segments)[number]) {
+		if (!onclick) return undefined;
+
+		return (node: SVGCircleElement) => {
+			const handleNodeClick = () => handleClick(seg);
+			node.addEventListener('click', handleNodeClick);
+			return () => node.removeEventListener('click', handleNodeClick);
+		};
+	}
+
+	const registeredHandler = $derived(
+		onclick
+			? (index: number) => {
+					const point = ctx.data[index];
+					if (!point) return;
+					onclick({ label: point.label, value: point.value, index });
+				}
+			: undefined
+	);
+
+	registerChartInteractive(ctx, () => registeredHandler);
 </script>
 
 <g role="list" aria-label="Donut chart data" data-chart-donut class={className} {...rest}>
-	{#each segments as seg}
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	{#each segments as seg (seg.index)}
 		<circle
 			{cx}
 			{cy}
@@ -66,20 +86,9 @@
 			stroke-dasharray={seg.dasharray}
 			stroke-dashoffset={seg.dashoffset}
 			transform="rotate(-90 {cx} {cy})"
-			role={onclick ? 'button' : 'listitem'}
-			tabindex={onclick ? 0 : undefined}
-			aria-label="{seg.point.label}: {seg.point.value}"
 			data-part="donut-segment"
 			data-clickable={onclick ? '' : undefined}
-			onclick={onclick ? () => handleClick(seg) : undefined}
-			onkeydown={onclick
-				? (e: KeyboardEvent) => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault();
-							handleClick(seg);
-						}
-					}
-				: undefined}
+			{@attach attachSegmentClick(seg)}
 		/>
 	{/each}
 	{#if label}

package/dist/chart/chart-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { SVGAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { setChartCtx, type ChartDataPoint } from './context.svelte.js';
 
 	interface Props extends SVGAttributes<SVGSVGElement> {
@@ -8,6 +9,7 @@
 		width?: number;
 		height?: number;
 		padding?: { top?: number; right?: number; bottom?: number; left?: number };
+		summary?: string;
 		children: Snippet;
 	}
 
@@ -16,22 +18,24 @@
 		width: widthProp,
 		height: heightProp,
 		padding: paddingProp,
+		summary,
+		'aria-label': ariaLabel = 'Chart',
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
-	let containerEl: HTMLDivElement | undefined = $state();
+	const chartId = $props.id();
+
 	let observedWidth = $state(400);
 	let observedHeight = $state(300);
+	let interactiveHandler: ((index: number) => void) | undefined = $state();
+	let interactiveOwner: symbol | undefined = $state();
 
 	const width = $derived(widthProp ?? observedWidth);
 	const height = $derived(heightProp ?? observedHeight);
 
-	$effect(() => {
-		if (widthProp !== undefined && heightProp !== undefined) return;
-		if (!containerEl) return;
-
+	function observeSize(node: HTMLDivElement) {
 		const ro = new ResizeObserver((entries) => {
 			for (const entry of entries) {
 				const cr = entry.contentRect;
@@ -40,9 +44,9 @@
 			}
 		});
 
-		ro.observe(containerEl);
+		ro.observe(node);
 		return () => ro.disconnect();
-	});
+	}
 
 	const padding = $derived({
 		top: paddingProp?.top ?? 20,
@@ -51,9 +55,34 @@
 		left: paddingProp?.left ?? 50
 	});
 
-	const minValue = $derived(Math.min(0, ...data.map((d) => d.value)));
-	const maxValue = $derived(Math.max(...data.map((d) => d.value)));
-	const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
+	const stats = $derived.by(() => {
+		let min = 0;
+		let max = -Infinity;
+		let total = 0;
+		let highest: ChartDataPoint | undefined;
+		let lowest: ChartDataPoint | undefined;
+		for (const point of data) {
+			const value = point.value;
+			if (value < min) min = value;
+			if (value > max) max = value;
+			total += value;
+			if (!highest || value > highest.value) highest = point;
+			if (!lowest || value < lowest.value) lowest = point;
+		}
+		return { min, max, total, highest, lowest };
+	});
+	const minValue = $derived(stats.min);
+	const maxValue = $derived(stats.max);
+	const total = $derived(stats.total);
+	const summaryText = $derived.by(() => {
+		if (summary?.trim()) return summary;
+		if (data.length === 0) return 'No data points available.';
+		if (data.length === 1) return `${data[0]!.label}: ${data[0]!.value}.`;
+		const { highest, lowest } = stats;
+		if (!highest || !lowest) return `${data.length} data points available.`;
+		return `${data.length} data points. Highest is ${highest.label} at ${highest.value}. Lowest is ${lowest.label} at ${lowest.value}. Total is ${stats.total}.`;
+	});
+	const isInteractive = $derived(Boolean(interactiveHandler));
 
 	setChartCtx({
 		get data() {
@@ -78,41 +107,116 @@
 			return padding;
 		},
 		hasBars: false,
-		hasHorizontalBars: false
+		hasHorizontalBars: false,
+		get interactiveHandler() {
+			return interactiveHandler;
+		},
+		set interactiveHandler(handler) {
+			interactiveHandler = handler;
+		},
+		get interactiveOwner() {
+			return interactiveOwner;
+		},
+		set interactiveOwner(owner) {
+			interactiveOwner = owner;
+		}
 	});
 </script>
 
-{#if widthProp === undefined || heightProp === undefined}
-	<div bind:this={containerEl} data-chart-container>
+<div data-chart-root>
+	<div data-chart-a11y data-interactive={isInteractive || undefined}>
+		<p id={`${chartId}-summary`} data-chart-summary>
+			<strong>{ariaLabel}</strong>
+			<span>{summaryText}</span>
+		</p>
+		<ul data-chart-data-list>
+			{#each data as point, index (point.label)}
+				<li>
+					{#if interactiveHandler}
+						<Button variant="bare" type="button" onclick={() => interactiveHandler?.(index)}>
+							{point.label}: {point.value}
+						</Button>
+					{:else}
+						<span>{point.label}: {point.value}</span>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	{#if widthProp === undefined || heightProp === undefined}
+		<div data-chart-container {@attach observeSize}>
+			<svg
+				viewBox="0 0 {width} {height}"
+				{width}
+				{height}
+				data-chart
+				class={className}
+				{...rest}
+				aria-hidden="true"
+				focusable="false"
+			>
+				{@render children()}
+			</svg>
+		</div>
+	{:else}
 		<svg
 			viewBox="0 0 {width} {height}"
-			role="img"
 			{width}
 			{height}
-			aria-label="Chart"
 			data-chart
 			class={className}
 			{...rest}
+			aria-hidden="true"
+			focusable="false"
 		>
 			{@render children()}
 		</svg>
-	</div>
-{:else}
-	<svg
-		viewBox="0 0 {width} {height}"
-		role="img"
-		{width}
-		{height}
-		aria-label="Chart"
-		data-chart
-		class={className}
-		{...rest}
-	>
-		{@render children()}
-	</svg>
-{/if}
+	{/if}
+</div>
 
 <style>
+	[data-chart-root] {
+		display: grid;
+	}
+
+	[data-chart-a11y] {
+		position: absolute;
+		height: 1px;
+		aspect-ratio: 1;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		clip-path: inset(50%);
+		border: 0;
+		white-space: nowrap;
+	}
+
+	[data-chart-a11y][data-interactive]:focus-within {
+		position: static;
+		height: auto;
+		aspect-ratio: auto;
+		margin: 0 0 var(--dry-space-3);
+		overflow: visible;
+		clip: auto;
+		clip-path: none;
+		white-space: normal;
+	}
+
+	[data-chart-summary] {
+		margin: 0;
+	}
+
+	[data-chart-summary] strong {
+		margin-inline-end: var(--dry-space-1);
+	}
+
+	[data-chart-data-list] {
+		margin: var(--dry-space-2) 0 0;
+		padding-inline-start: 1.25rem;
+	}
+
 	[data-chart-container] {
 		display: grid;
 		min-height: 200px;

package/dist/chart/chart-root.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props extends SVGAttributes<SVGSVGElement> {
         bottom?: number;
         left?: number;
     };
+    summary?: string;
     children: Snippet;
 }
 declare const ChartRoot: import("svelte").Component<Props, {}, "">;

package/dist/chart/context.svelte.d.ts

@@ -1,3 +1,4 @@
+export { registerChartInteractive } from '@dryui/primitives';
 export interface ChartDataPoint {
     label: string;
     value: number;
@@ -25,6 +26,7 @@ interface ChartContext {
     };
     hasBars: boolean;
     hasHorizontalBars: boolean;
+    interactiveHandler?: (index: number) => void;
+    interactiveOwner?: symbol;
 }
 export declare const setChartCtx: (ctx: ChartContext) => ChartContext, getChartCtx: () => ChartContext;
-export {};

package/dist/chart/context.svelte.js

@@ -1,2 +1,3 @@
 import { createContext } from '@dryui/primitives';
+export { registerChartInteractive } from '@dryui/primitives';
 export const [setChartCtx, getChartCtx] = createContext('chart');

package/dist/chart/index.d.ts

@@ -11,6 +11,7 @@ export interface ChartRootProps extends SVGAttributes<SVGSVGElement> {
         bottom?: number;
         left?: number;
     };
+    summary?: string;
     children: Snippet;
 }
 export interface ChartBarsProps extends Omit<SVGAttributes<SVGGElement>, 'onclick'> {

package/dist/chromatic-shift/chromatic-shift.svelte

@@ -2,6 +2,11 @@
 	import { onMount } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference
+	} from '@dryui/primitives/internal/motion';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		offset?: number;
@@ -24,6 +29,9 @@
 
 	let active = $state(false);
 	let prefersReducedMotion = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
+	const paused = $derived(!onScreen || !tabVisible);
 
 	const shouldActivate = $derived.by(() => {
 		if (prefersReducedMotion) return false;
@@ -42,21 +50,34 @@
 
 	const offsetValue = $derived(`${Math.max(0, offset)}px`);
 
-	onMount(() => {
-		const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-		prefersReducedMotion = mql.matches;
-		const handler = (e: MediaQueryListEvent) => {
-			prefersReducedMotion = e.matches;
-		};
-		mql.addEventListener('change', handler);
-		return () => mql.removeEventListener('change', handler);
-	});
+	onMount(() =>
+		observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+		})
+	);
 
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
 			node.style.cssText = style || '';
 			node.style.setProperty('--dry-chromatic-offset', offsetValue);
 		});
+
+		$effect(() => {
+			const stopViewport = observeInViewport(
+				node,
+				(inView) => {
+					onScreen = inView;
+				},
+				{ rootMargin: '200px' }
+			);
+			const stopVisibility = observePageVisibility((visible) => {
+				tabVisible = visible;
+			});
+			return () => {
+				stopViewport();
+				stopVisibility();
+			};
+		});
 	}
 </script>
 
@@ -67,6 +88,7 @@
 	data-channels={channels}
 	data-animated={(animated && !prefersReducedMotion) || undefined}
 	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
 	onpointerenter={trigger === 'hover' ? handlePointerEnter : undefined}
 	onpointerleave={trigger === 'hover' ? handlePointerLeave : undefined}
 	{...rest}
@@ -143,6 +165,11 @@
 		animation: chromatic-drift-b 4s ease-in-out infinite alternate-reverse;
 	}
 
+	[data-chromatic-shift][data-animated][data-paused]::before,
+	[data-chromatic-shift][data-animated][data-paused]::after {
+		animation-play-state: paused;
+	}
+
 	@keyframes chromatic-drift-r {
 		0% {
 			transform: translate(var(--dry-chromatic-offset), 0);

package/dist/collapsible/collapsible-content.svelte

@@ -22,7 +22,8 @@
 <div
 	class={className}
 	id={ctx.contentId}
-	role="region"
+	aria-hidden={!ctx.open}
+	inert={!ctx.open}
 	data-state={ctx.open ? 'open' : 'closed'}
 	data-collapsible-content
 	{...rest}

package/dist/combobox/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 { getComboboxCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -26,56 +26,38 @@
 
 	const ctx = getComboboxCtx();
 
-	let el = $state<HTMLDivElement>();
-
-	const anchor = createAnchorPosition(
-		() => ctx.inputEl,
-		() => el ?? null,
-		{
-			get placement() {
-				return placement;
-			},
-			get offset() {
-				return offset;
-			}
-		}
-	);
+	let el = $state<HTMLDivElement | null>(null);
 
-	$effect(() => {
-		if (!el) return;
+	function attachContent(node: HTMLDivElement) {
+		el = node;
 
-		el.style.cssText = typeof style === 'string' ? style : '';
-		const positionStyles = anchor.styles;
-		for (const [key, value] of Object.entries(positionStyles)) {
-			el.style.setProperty(key, value);
-		}
-	});
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
 
-	$effect(() => {
-		if (ctx.open && el && !el.matches(':popover-open')) {
-			el.showPopover();
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
-		}
+	const popover = createAnchoredPopover({
+		triggerEl: () => ctx.inputEl,
+		contentEl: () => el ?? null,
+		open: () => ctx.open,
+		placement: () => placement,
+		offset: () => offset
 	});
 
-	// Manual dismiss: close on click outside input+popover
-	$effect(() => {
-		if (!ctx.open) return;
-
-		function handlePointerDown(e: PointerEvent) {
-			const target = e.target as Node;
-			if (ctx.inputEl?.contains(target) || el?.contains(target)) return;
-			ctx.close();
-		}
-
-		document.addEventListener('pointerdown', handlePointerDown);
-		return () => document.removeEventListener('pointerdown', handlePointerDown);
+	createDismiss({
+		enabled: () => ctx.open,
+		escapeKey: false,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		triggerEl: () => ctx.inputEl
 	});
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach fromAction(popover.applyPosition, () => style)}
 	popover="manual"
 	role="listbox"
 	id={ctx.contentId}
@@ -105,7 +87,7 @@
 		margin: 0;
 
 		display: grid;
-		grid-template-columns: minmax(12rem, max-content);
+		grid-template-columns: minmax(max(12rem, 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/combobox/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/combobox/combobox-input-root.svelte

@@ -25,6 +25,7 @@
 	let displayText = $state('');
 	let inputValue = $state('');
 	let activeIndex = $state(-1);
+	let inputEl = $state<HTMLInputElement | null>(null);
 
 	setComboboxCtx({
 		get open() {
@@ -47,7 +48,12 @@
 		},
 		inputId,
 		contentId,
-		inputEl: null,
+		get inputEl() {
+			return inputEl;
+		},
+		set inputEl(element: HTMLInputElement | null) {
+			inputEl = element;
+		},
 		show() {
 			if (!disabled) open = true;
 		},