@dryui/ui 0.1.3 → 0.1.5

package/dist/accordion/accordion-trigger.svelte

@@ -26,6 +26,7 @@
 	{...rest}
 >
 	{@render children()}
+	<svg data-indicator xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
 </button>
 
 <style>
@@ -33,6 +34,7 @@
 		display: grid;
 		grid-template-columns: 1fr 1rem;
 		align-items: center;
+		gap: var(--dry-space-2);
 		padding: var(--dry-space-4);
 		background: none;
 		border: none;
@@ -65,17 +67,14 @@
 			cursor: not-allowed;
 		}
 
-		&[data-state='open']::after {
+		&[data-state='open'] [data-indicator] {
 			transform: rotate(180deg);
 		}
 
-		&::after {
-			content: '';
+		& [data-indicator] {
 			height: 1rem;
 			aspect-ratio: 1;
-			background: currentColor;
-			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-			mask-size: contain;
+			opacity: 0.5;
 			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
 		}
 	}

package/dist/alert-dialog/alert-dialog-action.svelte

@@ -15,24 +15,60 @@
 
 <style>
 	[data-alert-dialog-action] {
+		--dry-btn-accent: var(--dry-color-fill-error);
+		--dry-btn-accent-hover: var(--dry-color-fill-error-hover);
+		--dry-btn-accent-active: var(--dry-color-fill-error-hover);
+		--dry-btn-on-accent: var(--dry-color-on-error);
+		--dry-btn-border: transparent;
+
 		cursor: pointer;
-		background: var(--dry-color-fill-error);
-		color: var(--dry-color-on-brand);
-		border: none;
-		padding: var(--dry-space-2) var(--dry-space-4);
+		background: var(--dry-btn-accent);
+		color: var(--dry-btn-on-accent);
+		border: 1px solid var(--dry-btn-border);
+		padding: var(--dry-space-2_5) var(--dry-space-4);
 		border-radius: var(--dry-radius-md);
+		box-shadow: var(--dry-shadow-raised);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		font-weight: 500;
-		min-height: var(--dry-space-11);
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		min-height: var(--dry-space-12);
 		display: inline-grid;
+		grid-auto-flow: column;
 		place-items: center;
+		gap: var(--dry-space-2);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-alert-dialog-action]:hover {
-		background: var(--dry-color-fill-error-hover);
+		background: var(--dry-btn-accent-hover);
+	}
+
+	[data-alert-dialog-action]:active:not(:disabled) {
+		background: var(--dry-btn-accent-active);
+		transform: translateY(1px);
 	}
 
 	[data-alert-dialog-action]:focus-visible {
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: 2px;
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-alert-dialog-action]:disabled {
+		background: var(--dry-color-fill-disabled);
+		color: var(--dry-color-text-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		cursor: not-allowed;
+		box-shadow: none;
 	}
 </style>

package/dist/alert-dialog/alert-dialog-cancel.svelte

@@ -24,23 +24,62 @@
 
 <style>
 	[data-alert-dialog-cancel] {
+		--dry-btn-accent-fg: var(--dry-color-text-brand);
+		--dry-btn-accent-stroke: var(--dry-color-stroke-brand);
+
 		cursor: pointer;
-		background: none;
-		border: none;
-		padding: var(--dry-space-2);
-		color: var(--dry-color-text-weak);
+		background: transparent;
+		border: 1px solid var(--dry-btn-accent-stroke);
+		padding: var(--dry-space-2_5) var(--dry-space-4);
+		color: var(--dry-btn-accent-fg);
 		border-radius: var(--dry-radius-sm);
-		min-height: var(--dry-space-11);
+		box-shadow: var(--dry-shadow-raised);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		font-weight: 500;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		min-height: var(--dry-space-12);
 		display: inline-grid;
+		grid-auto-flow: column;
 		place-items: center;
+		gap: var(--dry-space-2);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default),
+			opacity var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
 	[data-alert-dialog-cancel]:hover {
+		background: var(--dry-color-bg-alternate);
+		border-color: var(--dry-color-stroke-strong);
+		color: var(--dry-color-text-strong);
+		box-shadow: var(--dry-shadow-sm);
+	}
+
+	[data-alert-dialog-cancel]:active:not(:disabled) {
+		background: var(--dry-color-fill);
+		border-color: var(--dry-color-stroke-strong);
 		color: var(--dry-color-text-strong);
+		transform: translateY(1px);
 	}
 
 	[data-alert-dialog-cancel]:focus-visible {
 		outline: 2px solid var(--dry-color-focus-ring);
 		outline-offset: 2px;
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-alert-dialog-cancel]:disabled {
+		background: var(--dry-color-fill-disabled);
+		color: var(--dry-color-text-disabled);
+		border-color: var(--dry-color-stroke-disabled);
+		cursor: not-allowed;
+		box-shadow: none;
 	}
 </style>

package/dist/alert-dialog/alert-dialog-footer.svelte

@@ -22,7 +22,8 @@
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		gap: var(--dry-space-2);
-		justify-self: end;
+		gap: var(--dry-space-4);
+		justify-content: start;
+		justify-items: start;
 	}
 </style>

package/dist/aurora/aurora.svelte.d.ts

@@ -1,8 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { BlendMode } from '@dryui/primitives/aurora';
 interface Props extends HTMLAttributes<HTMLDivElement> {
 	palette?: 'sunrise' | 'ocean' | 'forest' | 'cosmic' | readonly [string, string, string];
 	speed?: 'slow' | 'normal' | 'fast' | number;
+	intensity?: number;
+	waviness?: number;
+	colorSpace?: 'srgb' | 'oklch' | 'oklab';
+	blendMode?: BlendMode;
+	layerOpacity?: number;
 	children?: Snippet;
 }
 declare const Aurora: import('svelte').Component<Props, {}, ''>;

package/dist/beam/beam.svelte

@@ -19,7 +19,7 @@
 		angle = 45,
 		speed = 3,
 		intensity = 70,
-		blendMode = 'screen',
+		blendMode,
 		children,
 		class: className,
 		style,
@@ -31,26 +31,33 @@
 	const gradientString = $derived(
 		`linear-gradient(${angle}deg, transparent 0%, transparent calc(50% - ${width}px), ${color} 50%, transparent calc(50% + ${width}px), transparent 100%)`
 	);
+	const rootStyle = $derived.by(() => {
+		const declarations = [
+			style,
+			`--dry-beam-speed: ${speedValue}`,
+			`--dry-beam-intensity: ${clampedIntensity}`,
+			`--dry-beam-width: ${width}px`,
+			blendMode ? `--dry-beam-blend: ${blendMode}` : null
+		].filter(Boolean);
+		return declarations.join('; ');
+	});
+	const layerStyle = $derived(`background-image: ${gradientString};`);
 
 	function applyRootStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-beam-speed', speedValue);
-			node.style.setProperty('--dry-beam-intensity', clampedIntensity);
-			node.style.setProperty('--dry-beam-blend', blendMode);
-			node.style.setProperty('--dry-beam-width', `${width}px`);
+			node.style.cssText = rootStyle;
 		});
 	}
 
 	function applyLayerStyles(node: HTMLElement) {
 		$effect(() => {
-			node.style.setProperty('background-image', gradientString);
+			node.style.cssText = layerStyle;
 		});
 	}
 </script>
 
-<div data-beam class={className} {...rest} use:applyRootStyles>
-	<div data-beam-layer use:applyLayerStyles></div>
+<div data-beam class={className} {...rest} {@attach applyRootStyles}>
+	<div data-beam-layer {@attach applyLayerStyles}></div>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -69,7 +76,7 @@
 		pointer-events: none;
 		background-size: 300% 300%;
 		opacity: calc(var(--dry-beam-intensity, 70) / 100);
-		mix-blend-mode: var(--dry-beam-blend, screen);
+		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;
 	}

package/dist/chromatic-aberration/chromatic-aberration.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { createId } from '@dryui/primitives';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -8,24 +9,20 @@
 		children: Snippet;
 	}
 
-	let instanceCounter = 0;
-
 	let { offset = 3, angle = 0, children, class: className, style, ...rest }: Props = $props();
 
-	const filterId = `dry-chromatic-${instanceCounter++}`;
+	const filterId = createId('dry-chromatic');
 
 	const offsetX = $derived(Math.round(offset * Math.cos((angle * Math.PI) / 180)));
 	const offsetY = $derived(Math.round(offset * Math.sin((angle * Math.PI) / 180)));
 
 	function applyFilterStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('filter', `url(#${filterId})`);
-		});
+		node.style.cssText = style || '';
+		node.style.setProperty('filter', `url(#${filterId})`);
 	}
 </script>
 
-<svg data-chromatic-aberration-svg aria-hidden="true">
+<svg data-chromatic-aberration-svg width="0" height="0" aria-hidden="true">
 	<defs>
 		<filter id={filterId} color-interpolation-filters="sRGB">
 			<feOffset in="SourceGraphic" dx={offsetX} dy={offsetY} result="red" />
@@ -53,7 +50,7 @@
 		</filter>
 	</defs>
 </svg>
-<div data-chromatic-aberration class={className} use:applyFilterStyles {...rest}>
+<div data-chromatic-aberration class={className} {@attach applyFilterStyles} {...rest}>
 	{@render children()}
 </div>
 
@@ -62,6 +59,7 @@
 		position: absolute;
 		height: 0;
 		overflow: hidden;
+		pointer-events: none;
 	}
 
 	[data-chromatic-aberration] {

package/dist/collapsible/collapsible-trigger.svelte

@@ -25,6 +25,7 @@
 	{...rest}
 >
 	{@render children()}
+	<svg data-indicator xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
 </button>
 
 <style>
@@ -32,6 +33,7 @@
 		display: grid;
 		grid-template-columns: 1fr 1rem;
 		align-items: center;
+		gap: var(--dry-space-2);
 		padding: var(--dry-space-3) var(--dry-space-4);
 		background: none;
 		border: 1px solid var(--dry-color-stroke-weak);
@@ -41,19 +43,14 @@
 		cursor: pointer;
 		color: var(--dry-color-text-strong);
 
-		&::after {
-			content: '';
+		& [data-indicator] {
 			height: 1rem;
 			aspect-ratio: 1;
-			background: currentColor;
-			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-			mask-size: contain;
-			mask-repeat: no-repeat;
 			opacity: 0.5;
 			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
 		}
 
-		&[data-state='open']::after {
+		&[data-state='open'] [data-indicator] {
 			transform: rotate(180deg);
 		}
 

package/dist/color-picker/color-picker-eyedropper.svelte

@@ -42,6 +42,8 @@
 	>
 		{#if children}
 			{@render children()}
+		{:else}
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4"/></svg>
 		{/if}
 	</button>
 {/if}
@@ -65,18 +67,9 @@
 			border-color var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-cp-eyedropper]::before {
-		content: '';
-		display: inline-block;
-		height: 16px;
+	[data-cp-eyedropper] svg {
+		height: 1rem;
 		aspect-ratio: 1;
-		background-color: currentColor;
-		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4'/%3E%3C/svg%3E");
-		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3l8 8M3 9l8 8m-8-8 1.5 1.5M11 17l-1 4-4 1 1-4'/%3E%3C/svg%3E");
-		-webkit-mask-repeat: no-repeat;
-		mask-repeat: no-repeat;
-		-webkit-mask-size: contain;
-		mask-size: contain;
 	}
 
 	[data-cp-eyedropper]:hover:not([data-disabled]):not(:disabled) {

package/dist/data-grid/data-grid-pagination.svelte

@@ -82,8 +82,10 @@
 <style>
 	[data-dg-pagination] {
 		display: grid;
-		grid-template-columns: max-content 1fr max-content;
+		grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
+		grid-template-areas: 'prev info next';
 		align-items: center;
+		column-gap: var(--dry-data-grid-pagination-gap);
 		padding: var(--dry-space-3) var(--dry-data-grid-padding-x);
 		border-top: 1px solid var(--dry-data-grid-border);
 		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
@@ -122,18 +124,34 @@
 		outline-offset: 2px;
 	}
 
+	[data-dg-pagination] button[data-pagination-prev] {
+		grid-area: prev;
+		justify-self: start;
+	}
+
+	[data-dg-pagination] button[data-pagination-next] {
+		grid-area: next;
+		justify-self: end;
+	}
+
 	[data-dg-pagination] button:disabled {
 		opacity: 0.4;
 		cursor: not-allowed;
 	}
 
 	[data-dg-pagination] [data-pagination-info] {
+		grid-area: info;
+		justify-self: center;
+		text-align: center;
 		font-variant-numeric: tabular-nums;
 	}
 
 	@container (max-width: 400px) {
 		[data-dg-pagination] {
-			grid-template-columns: 1fr;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			grid-template-areas:
+				'info info'
+				'prev next';
 			gap: var(--dry-space-2);
 		}
 	}

package/dist/data-grid/data-grid-root.svelte

@@ -214,6 +214,7 @@
 		--dry-data-grid-sort-color: var(--dry-color-fill-brand);
 		--dry-data-grid-pagination-gap: var(--dry-space-2);
 
+		display: grid;
 		container-type: inline-size;
 		overflow-x: auto;
 	}

package/dist/date-field/date-field-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteMap } from 'svelte/reactivity';
 	import { setDateFieldCtx, getLocaleFormat, type DateSegmentType } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -14,6 +15,12 @@
 		children: Snippet;
 	}
 
+	interface SegmentValues {
+		month: number | null;
+		day: number | null;
+		year: number | null;
+	}
+
 	let {
 		value = $bindable<Date | null>(null),
 		name,
@@ -27,37 +34,61 @@
 		...rest
 	}: Props = $props();
 
-	let month = $state<number | null>(value ? value.getMonth() + 1 : null);
-	let day = $state<number | null>(value ? value.getDate() : null);
-	let year = $state<number | null>(value ? value.getFullYear() : null);
+	let draftValues = $state<SegmentValues | null>(null);
 
-	// Sync from value prop
-	$effect(() => {
-		if (value) {
-			month = value.getMonth() + 1;
-			day = value.getDate();
-			year = value.getFullYear();
+	function getSegmentValues(date: Date | null): SegmentValues {
+		if (!date) {
+			return { month: null, day: null, year: null };
 		}
-	});
 
-	function tryBuildDate() {
-		if (month !== null && day !== null && year !== null && year >= 1000) {
-			const d = new Date(year, month - 1, day);
-			if (d.getMonth() === month - 1 && d.getDate() === day) {
+		return {
+			month: date.getMonth() + 1,
+			day: date.getDate(),
+			year: date.getFullYear()
+		};
+	}
+
+	function commitSegments(nextValues: SegmentValues) {
+		if (
+			nextValues.month !== null &&
+			nextValues.day !== null &&
+			nextValues.year !== null &&
+			nextValues.year >= 1000
+		) {
+			const d = new Date(nextValues.year, nextValues.month - 1, nextValues.day);
+			if (d.getMonth() === nextValues.month - 1 && d.getDate() === nextValues.day) {
 				value = d;
+				draftValues = null;
+				return;
 			}
 		}
+
+		draftValues = nextValues;
 	}
 
 	const localeFormat = $derived(getLocaleFormat(locale));
+	const committedValues = $derived(getSegmentValues(value));
+	const activeValues = $derived(draftValues ?? committedValues);
 
 	const segments = $derived(
 		localeFormat.order.map((type) => ({
 			type,
-			value: type === 'month' ? month : type === 'day' ? day : year
+			value:
+				type === 'month'
+					? activeValues.month
+					: type === 'day'
+						? activeValues.day
+						: activeValues.year
 		}))
 	);
 
+	function focusPreferredSegment() {
+		const targetType =
+			segments.find((segment) => segment.value === null)?.type ?? localeFormat.order[0];
+		if (!targetType) return;
+		segmentElements.get(targetType)?.focus();
+	}
+
 	function serializeDateValue(date: Date | null): string {
 		if (!date) return '';
 
@@ -69,7 +100,7 @@
 	}
 
 	// Segment element registry for index-based navigation
-	const segmentElements = new Map<DateSegmentType, HTMLElement>();
+	const segmentElements = new SvelteMap<DateSegmentType, HTMLElement>();
 
 	setDateFieldCtx({
 		get value() {
@@ -97,10 +128,11 @@
 			return segments;
 		},
 		updateSegment(type: DateSegmentType, val: number) {
-			if (type === 'month') month = val;
-			else if (type === 'day') day = val;
-			else if (type === 'year') year = val;
-			tryBuildDate();
+			commitSegments({
+				month: type === 'month' ? val : activeValues.month,
+				day: type === 'day' ? val : activeValues.day,
+				year: type === 'year' ? val : activeValues.year
+			});
 		},
 		registerSegment(type: DateSegmentType, el: HTMLElement) {
 			segmentElements.set(type, el);
@@ -119,12 +151,26 @@
 			}
 		}
 	});
+
+	function handleMousedown(event: MouseEvent) {
+		if (disabled) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement)) return;
+		if (target.closest('[data-df-segment]')) return;
+
+		event.preventDefault();
+		focusPreferredSegment();
+	}
 </script>
 
 <div
 	role="group"
 	aria-label="Date"
+	data-df-wrapper
+	data-df-root
+	data-size={size}
 	data-disabled={disabled || undefined}
+	onmousedown={handleMousedown}
 	{...rest}
 	class={className}
 >

package/dist/date-field/date-field-segment.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getDateFieldCtx, type DateSegmentType } from './context.svelte.js';
-	import { onMount } from 'svelte';
 
 	interface Props extends HTMLAttributes<HTMLSpanElement> {
 		type: DateSegmentType;
@@ -11,13 +10,6 @@
 
 	const ctx = getDateFieldCtx();
 
-	let el: HTMLSpanElement;
-
-	onMount(() => {
-		ctx.registerSegment(type, el);
-		return () => ctx.unregisterSegment(type);
-	});
-
 	const segmentData = $derived(ctx.segments.find((s) => s.type === type));
 
 	const minValue = $derived(type === 'month' ? 1 : type === 'day' ? 1 : 1000);
@@ -35,6 +27,15 @@
 	let inputBuffer = '';
 	let bufferTimeout: ReturnType<typeof setTimeout>;
 
+	function registerSegment(node: HTMLSpanElement) {
+		ctx.registerSegment(type, node);
+		return {
+			destroy() {
+				ctx.unregisterSegment(type);
+			}
+		};
+	}
+
 	function increment() {
 		const current = segmentData?.value ?? minValue - 1;
 		const next = current >= maxValue ? minValue : current + 1;
@@ -111,7 +112,7 @@
 </script>
 
 <span
-	bind:this={el}
+	{@attach registerSegment}
 	role="spinbutton"
 	tabindex={ctx.disabled ? undefined : 0}
 	aria-label={type}
@@ -119,6 +120,7 @@
 	aria-valuemax={maxValue}
 	aria-valuenow={segmentData?.value ?? undefined}
 	aria-valuetext={displayValue}
+	data-df-segment
 	data-segment={type}
 	data-placeholder={segmentData?.value === null ? '' : undefined}
 	data-disabled={ctx.disabled || undefined}

package/dist/date-field/date-field-separator.svelte

@@ -13,7 +13,15 @@
 	const display = $derived(separator ?? ctx.separator);
 </script>
 
-<span aria-hidden="true" data-separator="" {...rest} class={className}>{display}</span>
+<span
+	aria-hidden="true"
+	data-df-separator
+	data-separator=""
+	{...rest}
+	class={className}
+>
+	{display}
+</span>
 
 <style>
 	[data-df-separator] {