@dryui/ui 0.1.3 → 0.1.4

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] {

package/dist/date-picker/datepicker-calendar.svelte

@@ -24,6 +24,16 @@
 
 	let containerEl = $state<HTMLDivElement>();
 
+	function bindContainer(node: HTMLDivElement) {
+		containerEl = node;
+
+		return () => {
+			if (containerEl === node) {
+				containerEl = undefined;
+			}
+		};
+	}
+
 	const weekdayLabels = $derived(generateWeekdayLabels(ctx.locale, ctx.weekStartDay));
 
 	const calendarDays = $derived(getCalendarDays(ctx.viewYear, ctx.viewMonth, ctx.weekStartDay));
@@ -70,38 +80,54 @@
 	}
 </script>
 
-<div bind:this={containerEl} class={className} {...rest} data-dp-calendar>
+<div {@attach bindContainer} class={className} {...rest} data-dp-calendar>
 	<!-- Calendar header: month/year + navigation -->
-	<div role="group" aria-label={monthYearLabel}>
-		<div class="dp-header">
-			<button type="button" aria-label="Previous month" onclick={() => ctx.prevMonth()}> ‹ </button>
-			<span aria-live="polite" aria-atomic="true">
+	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
+		<div class="dp-header" data-calendar-header>
+			<button
+				type="button"
+				aria-label="Previous month"
+				data-calendar-nav
+				disabled={ctx.disabled}
+				onclick={() => ctx.prevMonth()}
+			>
+				‹
+			</button>
+			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
 				{monthYearLabel}
 			</span>
-			<button type="button" aria-label="Next month" onclick={() => ctx.nextMonth()}> › </button>
+			<button
+				type="button"
+				aria-label="Next month"
+				data-calendar-nav
+				disabled={ctx.disabled}
+				onclick={() => ctx.nextMonth()}
+			>
+				›
+			</button>
 		</div>
 
 		<!-- Day-of-week header row -->
 		<div role="grid" aria-label={monthYearLabel}>
-			<div role="row">
-				{#each weekdayLabels as label}
-					<div role="columnheader" aria-label={label}>
+			<div role="row" data-calendar-row>
+				{#each weekdayLabels as label (label)}
+					<div role="columnheader" aria-label={label} data-calendar-columnheader>
 						<span aria-hidden="true">{label}</span>
 					</div>
 				{/each}
 			</div>
 
 			<!-- Calendar day grid -->
-			{#each weeks as week}
-				<div role="row">
-					{#each week as day}
+			{#each weeks as week, weekIndex (weekIndex)}
+				<div role="row" data-calendar-row>
+					{#each week as day (getDayISOString(day))}
 						{@const isCurrent = day.getMonth() === ctx.viewMonth}
 						{@const selected = ctx.value ? isSameDay(day, ctx.value) : false}
 						{@const today = isToday(day)}
 						{@const disabled = isDayDisabled(day)}
 						{@const focused = isSameDay(day, ctx.focusedDate)}
 						{@const isoStr = getDayISOString(day)}
-						<div role="gridcell">
+						<div role="gridcell" data-calendar-cell>
 							<button
 								type="button"
 								tabindex={focused ? 0 : -1}
@@ -112,6 +138,7 @@
 								})}
 								aria-pressed={selected}
 								aria-disabled={disabled}
+								data-calendar-day-button
 								data-calendar-day={isoStr}
 								data-today={today ? '' : undefined}
 								data-selected={selected ? '' : undefined}
@@ -132,7 +159,135 @@
 
 <style>
 	[data-dp-calendar] {
+		--dry-calendar-grid-gap: 1px;
 		container-type: inline-size;
+		display: grid;
+		gap: var(--dry-space-2);
 		user-select: none;
+		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
+		font-family: var(--dry-font-sans);
+	}
+
+	[data-dp-calendar] [data-calendar-panel] {
+		display: grid;
+		gap: var(--dry-space-2);
+	}
+
+	[data-dp-calendar] [data-calendar-header] {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	[data-dp-calendar] [data-calendar-nav] {
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-space-8);
+		aspect-ratio: 1;
+		border: 1px solid transparent;
+		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-calendar-header-color, var(--dry-color-text-strong));
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-dp-calendar] [data-calendar-nav]:hover:not([disabled]) {
+		background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-dp-calendar] [data-calendar-nav]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 1px;
+	}
+
+	[data-dp-calendar] [data-calendar-heading] {
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	[data-dp-calendar] [role='grid'] {
+		display: grid;
+		gap: var(--dry-calendar-grid-gap);
+	}
+
+	[data-dp-calendar] [data-calendar-row] {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		gap: var(--dry-calendar-grid-gap);
+	}
+
+	[data-dp-calendar] [data-calendar-columnheader] {
+		display: grid;
+		place-items: center;
+		min-height: var(--dry-space-8);
+		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		color: var(--dry-calendar-muted-color, var(--dry-color-text-weak));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	[data-dp-calendar] [data-calendar-cell] {
+		display: grid;
+		grid-template-columns: var(--dry-calendar-day-size, 2.25rem);
+		place-items: center;
+	}
+
+	[data-dp-calendar] [data-calendar-day-button] {
+		display: inline-grid;
+		place-items: center;
+		min-height: var(--dry-calendar-day-size, 2.25rem);
+		aspect-ratio: 1;
+		border: none;
+		border-radius: var(--dry-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font: inherit;
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-dp-calendar] [data-calendar-day-button]:hover:not([data-disabled]) {
+		background: var(--dry-calendar-day-hover-bg, var(--dry-color-bg-raised));
+	}
+
+	[data-dp-calendar] [data-calendar-day-button]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 1px;
+	}
+
+	[data-dp-calendar] [data-calendar-day-button][data-today]:not([data-selected]) {
+		color: var(--dry-calendar-today-color, var(--dry-color-fill-brand));
+		font-weight: 600;
+	}
+
+	[data-dp-calendar] [data-calendar-day-button][data-selected] {
+		background: var(--dry-calendar-selected-bg, var(--dry-color-fill-brand));
+		color: var(--dry-calendar-selected-color, var(--dry-color-on-brand));
+		font-weight: 600;
+	}
+
+	[data-dp-calendar] [data-calendar-day-button][data-selected]:hover:not([data-disabled]) {
+		background: var(--dry-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
+	}
+
+	[data-dp-calendar] [data-calendar-day-button][data-outside-month] {
+		color: var(--dry-calendar-outside-color, var(--dry-color-text-weak));
+		opacity: 0.6;
+	}
+
+	[data-dp-calendar] [data-calendar-day-button][data-disabled] {
+		cursor: not-allowed;
+		opacity: 0.4;
+		pointer-events: none;
 	}
 </style>

package/dist/date-picker/datepicker-trigger.svelte

@@ -61,6 +61,7 @@
 			{displayText || placeholder}
 		</span>
 	{/if}
+	<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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
 </button>
 
 <style>
@@ -94,15 +95,9 @@
 			transform var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-dp-trigger]::after {
-		content: '';
-		aspect-ratio: 1;
+	[data-dp-trigger] [data-indicator] {
 		height: 1rem;
-		background: currentColor;
-		mask-image: 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%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
-		mask-size: contain;
-		mask-repeat: no-repeat;
-		mask-position: center;
+		aspect-ratio: 1;
 		opacity: 0.6;
 	}
 

package/dist/date-range-picker/date-range-picker-calendar.svelte

@@ -24,6 +24,16 @@
 
 	let containerEl = $state<HTMLDivElement>();
 
+	function bindContainer(node: HTMLDivElement) {
+		containerEl = node;
+
+		return () => {
+			if (containerEl === node) {
+				containerEl = undefined;
+			}
+		};
+	}
+
 	const weekdayLabels = $derived(generateWeekdayLabels(ctx.locale, ctx.weekStartDay));
 
 	const calendarDays = $derived(getCalendarDays(ctx.viewYear, ctx.viewMonth, ctx.weekStartDay));
@@ -116,35 +126,47 @@
 	}
 </script>
 
-<div bind:this={containerEl} class={className} {...rest} data-drp-calendar>
+<div {@attach bindContainer} class={className} {...rest} data-drp-calendar>
 	<!-- Calendar header: month/year + navigation -->
-	<div role="group" aria-label={monthYearLabel}>
-		<div>
-			<button type="button" aria-label="Previous month" onclick={() => ctx.prevMonth()}>
+	<div role="group" aria-label={monthYearLabel} data-calendar-panel>
+		<div data-calendar-header>
+			<button
+				type="button"
+				aria-label="Previous month"
+				data-calendar-nav
+				disabled={ctx.disabled}
+				onclick={() => ctx.prevMonth()}
+			>
 				&#8249;
 			</button>
-			<span aria-live="polite" aria-atomic="true">
+			<span aria-live="polite" aria-atomic="true" data-calendar-heading>
 				{monthYearLabel}
 			</span>
-			<button type="button" aria-label="Next month" onclick={() => ctx.nextMonth()}>
+			<button
+				type="button"
+				aria-label="Next month"
+				data-calendar-nav
+				disabled={ctx.disabled}
+				onclick={() => ctx.nextMonth()}
+			>
 				&#8250;
 			</button>
 		</div>
 
 		<!-- Day-of-week header row -->
 		<div role="grid" aria-label={monthYearLabel}>
-			<div role="row">
-				{#each weekdayLabels as label}
-					<div role="columnheader" aria-label={label}>
+			<div role="row" data-calendar-row>
+				{#each weekdayLabels as label (label)}
+					<div role="columnheader" aria-label={label} data-calendar-columnheader>
 						<span aria-hidden="true">{label}</span>
 					</div>
 				{/each}
 			</div>
 
 			<!-- Calendar day grid -->
-			{#each weeks as week}
-				<div role="row">
-					{#each week as day}
+			{#each weeks as week, weekIndex (weekIndex)}
+				<div role="row" data-calendar-row>
+					{#each week as day (getDayISOString(day))}
 						{@const isCurrent = day.getMonth() === ctx.viewMonth}
 						{@const selected = isSelected(day)}
 						{@const today = isToday(day)}
@@ -154,7 +176,7 @@
 						{@const inRange = isInSelectedRange(day) || isInPreviewRange(day)}
 						{@const rangeStart = isRangeStart(day)}
 						{@const rangeEnd = isRangeEnd(day)}
-						<div role="gridcell">
+						<div role="gridcell" data-calendar-cell>
 							<button
 								type="button"
 								tabindex={focused ? 0 : -1}
@@ -165,6 +187,7 @@
 								})}
 								aria-pressed={selected}
 								aria-disabled={disabled}
+								data-calendar-day-button
 								data-calendar-day={isoStr}
 								data-today={today ? '' : undefined}
 								data-selected={selected ? '' : undefined}
@@ -200,5 +223,146 @@
 	[data-drp-calendar] {
 		display: grid;
 		gap: var(--dry-space-2);
+		user-select: none;
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-sans);
+	}
+
+	[data-drp-calendar] [data-calendar-panel] {
+		display: grid;
+		gap: var(--dry-space-2);
+	}
+
+	[data-drp-calendar] [data-calendar-header] {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+
+	[data-drp-calendar] [data-calendar-nav] {
+		display: inline-grid;
+		place-items: center;
+		height: var(--dry-space-8);
+		aspect-ratio: 1;
+		border: 1px solid transparent;
+		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			border-color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-drp-calendar] [data-calendar-nav]:hover:not([disabled]) {
+		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-bg-raised));
+		border-color: var(--dry-color-stroke-strong);
+	}
+
+	[data-drp-calendar] [data-calendar-nav]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 1px;
+	}
+
+	[data-drp-calendar] [data-calendar-heading] {
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-weight: 600;
+		letter-spacing: -0.01em;
+	}
+
+	[data-drp-calendar] [role='grid'] {
+		display: grid;
+		gap: 1px;
+	}
+
+	[data-drp-calendar] [data-calendar-row] {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		gap: 1px;
+	}
+
+	[data-drp-calendar] [data-calendar-columnheader] {
+		display: grid;
+		place-items: center;
+		min-height: var(--dry-space-8);
+		font-size: var(--dry-type-tiny-size, var(--dry-type-tiny-size));
+		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+
+	[data-drp-calendar] [data-calendar-cell] {
+		display: grid;
+		place-items: center;
+	}
+
+	[data-drp-calendar] [data-calendar-day-button] {
+		display: inline-grid;
+		place-items: center;
+		min-height: var(--dry-range-calendar-day-size, 2.25rem);
+		aspect-ratio: 1;
+		border: none;
+		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		font: inherit;
+		font-size: var(--dry-type-small-size, var(--dry-type-small-size));
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-drp-calendar] [data-calendar-day-button]:hover:not([data-disabled]) {
+		background: var(--dry-range-calendar-day-hover-bg, var(--dry-color-bg-raised));
+	}
+
+	[data-drp-calendar] [data-calendar-day-button]:focus-visible {
+		outline: 2px solid var(--dry-color-focus-ring);
+		outline-offset: 1px;
+	}
+
+	[data-drp-calendar]
+		[data-calendar-day-button][data-today]:not([data-range-start]):not([data-range-end]) {
+		color: var(--dry-range-calendar-today-color, var(--dry-color-fill-brand));
+		font-weight: 600;
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-range-start],
+	[data-drp-calendar] [data-calendar-day-button][data-range-end] {
+		background: var(--dry-range-calendar-selected-bg, var(--dry-color-fill-brand));
+		color: var(--dry-range-calendar-selected-color, var(--dry-color-on-brand));
+		font-weight: 600;
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-range-start]:hover:not([data-disabled]),
+	[data-drp-calendar] [data-calendar-day-button][data-range-end]:hover:not([data-disabled]) {
+		background: var(--dry-range-calendar-selected-hover-bg, var(--dry-color-fill-brand-hover));
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-in-range] {
+		background: var(
+			--dry-range-calendar-range-bg,
+			color-mix(in srgb, var(--dry-color-fill-brand) 15%, transparent)
+		);
+		border-radius: 0;
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-range-start],
+	[data-drp-calendar] [data-calendar-day-button][data-range-end] {
+		border-radius: var(--dry-range-calendar-day-radius, var(--dry-radius-md));
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-outside-month] {
+		color: var(--dry-range-calendar-outside-color, var(--dry-color-text-weak));
+		opacity: 0.6;
+	}
+
+	[data-drp-calendar] [data-calendar-day-button][data-disabled] {
+		cursor: not-allowed;
+		opacity: 0.4;
+		pointer-events: none;
 	}
 </style>

package/dist/date-range-picker/date-range-picker-trigger.svelte

@@ -15,10 +15,19 @@
 
 	let buttonEl = $state<HTMLButtonElement>();
 
-	$effect(() => {
-		if (!buttonEl) return;
-		ctx.triggerEl = buttonEl;
-	});
+	function bindTrigger(node: HTMLButtonElement) {
+		buttonEl = node;
+		ctx.triggerEl = node;
+
+		return () => {
+			if (buttonEl === node) {
+				buttonEl = undefined;
+			}
+			if (ctx.triggerEl === node) {
+				ctx.triggerEl = null;
+			}
+		};
+	}
 
 	const formatOpts: Intl.DateTimeFormatOptions = {
 		year: 'numeric',
@@ -38,7 +47,7 @@
 </script>
 
 <button
-	bind:this={buttonEl}
+	{@attach bindTrigger}
 	id={ctx.triggerId}
 	type="button"
 	aria-haspopup="dialog"
@@ -46,6 +55,7 @@
 	aria-controls={ctx.contentId}
 	data-state={ctx.open ? 'open' : 'closed'}
 	data-disabled={ctx.disabled ? '' : undefined}
+	data-drp-trigger
 	disabled={ctx.disabled}
 	popovertarget={ctx.contentId}
 	class={className}
@@ -58,6 +68,7 @@
 			{displayText || placeholder}
 		</span>
 	{/if}
+	<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"><rect x="3" y="4" width="18" height="17" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
 </button>
 
 <style>
@@ -83,14 +94,9 @@
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-drp-trigger]::after {
-		content: '';
-		aspect-ratio: 1;
+	[data-drp-trigger] [data-indicator] {
 		height: 1rem;
-		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%3Crect x='3' y='4' width='18' height='17' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
-		mask-size: contain;
-		mask-repeat: no-repeat;
+		aspect-ratio: 1;
 		opacity: 0.75;
 	}
 

package/dist/dialog/dialog-content.svelte

@@ -82,6 +82,7 @@
 		);
 
 		container-type: inline-size;
+		justify-self: stretch;
 		border: 1px solid var(--dry-dialog-border);
 		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
 		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));

package/dist/field/field-root.svelte

@@ -76,7 +76,6 @@
 <style>
 	[data-field] {
 		--dry-field-gap: var(--dry-space-1_5);
-		--dry-field-label-order: 1;
 		display: grid;
 		gap: var(--dry-field-gap);
 

package/dist/file-select/file-select-clear.svelte

@@ -25,7 +25,7 @@
 		{#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" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
 		{/if}
 	</button>
 {/if}
@@ -47,15 +47,9 @@
 			background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-fs-clear]::before {
-		content: '';
-		display: block;
+	[data-fs-clear] svg {
 		height: 0.875rem;
 		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='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
-		mask-size: contain;
-		mask-repeat: no-repeat;
 	}
 
 	[data-fs-clear]:hover {