@dryui/ui 0.1.2 → 0.1.4

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

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;
 	}