@dryui/ui 0.1.2 → 0.1.4

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-root.svelte

@@ -150,9 +150,3 @@
 </script>
 
 {@render children()}
-
-<style>
-	[data-drp-root] {
-		display: contents;
-	}
-</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 {

package/dist/file-upload/file-upload-item-delete.svelte

@@ -23,6 +23,7 @@
 	type="button"
 	disabled={ctx.disabled}
 	data-disabled={ctx.disabled || undefined}
+	data-fu-item-delete
 	aria-label="Remove file"
 	onclick={handleClick}
 	{...rest}
@@ -30,6 +31,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" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
 	{/if}
 </button>
 
@@ -50,15 +53,9 @@
 			background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-fu-item-delete]::before {
-		content: '';
-		display: block;
+	[data-fu-item-delete] svg {
 		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='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
-		mask-size: contain;
-		mask-repeat: no-repeat;
 	}
 
 	[data-fu-item-delete]:hover:not([data-disabled]) {

package/dist/file-upload/file-upload-root.svelte

@@ -142,8 +142,4 @@
 		overflow: hidden;
 	}
 
-	[data-file-upload] {
-		container-type: inline-size;
-		display: grid;
-	}
 </style>

package/dist/flip-card/flip-card-back.svelte

@@ -27,8 +27,8 @@
 		z-index: 1;
 		backface-visibility: hidden;
 		transition: transform var(--dry-flip-card-duration, 0.6s) ease;
-		position: absolute;
-		inset: 0;
+		grid-area: 1 / 1;
 		transform: var(--dry-flip-card-back-transform, rotateY(180deg));
+		transform-origin: center;
 	}
 </style>

package/dist/flip-card/flip-card-front.svelte

@@ -18,8 +18,8 @@
 		z-index: 2;
 		backface-visibility: hidden;
 		transition: transform var(--dry-flip-card-duration, 0.6s) ease;
-		position: absolute;
-		inset: 0;
+		grid-area: 1 / 1;
 		transform: var(--dry-flip-card-front-transform, rotateY(0deg));
+		transform-origin: center;
 	}
 </style>

package/dist/flip-card/flip-card-root.svelte

@@ -66,8 +66,10 @@
 		--dry-flip-card-front-transform: rotateY(0deg);
 		--dry-flip-card-back-transform: rotateY(180deg);
 
+		display: grid;
 		perspective: var(--dry-flip-card-perspective);
 		position: relative;
+		transform-style: preserve-3d;
 	}
 
 	[data-flip-card][data-direction='horizontal'][data-flipped] {

package/dist/float-button/float-button-root.svelte

@@ -35,9 +35,10 @@
 	[data-float-button] {
 		--dry-fab-offset: var(--dry-space-6);
 		--dry-fab-gap: var(--dry-space-3);
+		--dry-fab-position: fixed;
 		--dry-fab-z-index: var(--dry-layer-overlay);
 
-		position: fixed;
+		position: var(--dry-fab-position);
 		z-index: var(--dry-fab-z-index);
 		display: grid;
 		justify-items: center;

package/dist/image-comparison/image-comparison.svelte

@@ -21,20 +21,15 @@
 		...rest
 	}: Props = $props();
 
-	let containerEl = $state<HTMLDivElement>();
 	let dragging = $state(false);
 
-	function setContainer(node: HTMLDivElement) {
-		containerEl = node;
-		return {
-			destroy() {
-				if (containerEl === node) containerEl = undefined;
-			}
-		};
+	function syncStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = `${style ? `${style}; ` : ''}--dry-image-comparison-position: ${position}%`;
+		});
 	}
 
-	function updatePosition(clientX: number, clientY: number) {
-		if (!containerEl) return;
+	function updatePosition(clientX: number, clientY: number, containerEl: HTMLElement) {
 		const rect = containerEl.getBoundingClientRect();
 		let pct: number;
 		if (orientation === 'horizontal') {
@@ -47,13 +42,16 @@
 
 	function onPointerDown(e: PointerEvent) {
 		dragging = true;
-		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-		updatePosition(e.clientX, e.clientY);
+		const handleEl = e.currentTarget as HTMLElement;
+		handleEl.setPointerCapture(e.pointerId);
+		const containerEl = handleEl.closest<HTMLElement>('[data-image-comparison]');
+		if (!containerEl) return;
+		updatePosition(e.clientX, e.clientY, containerEl);
 	}
 
 	function onPointerMove(e: PointerEvent) {
 		if (!dragging) return;
-		updatePosition(e.clientX, e.clientY);
+		updatePosition(e.clientX, e.clientY, e.currentTarget as HTMLElement);
 	}
 
 	function onPointerUp() {
@@ -70,13 +68,6 @@
 			position = Math.min(position + step, 100);
 		}
 	}
-
-	function applyStyles(node: HTMLElement) {
-		$effect(() => {
-			node.style.cssText = style || '';
-			node.style.setProperty('--dry-image-comparison-position', `${position}%`);
-		});
-	}
 </script>
 
 {#snippet defaultHandle()}
@@ -92,7 +83,7 @@
 {/snippet}
 
 <div
-	{@attach setContainer}
+	{@attach syncStyles}
 	class={className}
 	data-image-comparison
 	data-orientation={orientation}
@@ -100,7 +91,6 @@
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 	{...rest}
-	use:applyStyles
 >
 	<div data-part="after" data-ic-layer>
 		{@render after()}
@@ -141,6 +131,8 @@
 		--dry-image-comparison-handle-z-index: 1;
 
 		position: relative;
+		display: grid;
+		height: 100%;
 		overflow: hidden;
 		border-radius: var(--dry-image-comparison-radius);
 		user-select: none;
@@ -148,8 +140,8 @@
 	}
 
 	[data-ic-layer] {
-		position: absolute;
-		inset: 0;
+		grid-area: 1 / 1;
+		min-height: 0;
 	}
 
 	[data-image-comparison][data-orientation='horizontal'] [data-ic-layer-before] {

package/dist/input-group/input-group-action.svelte

@@ -21,6 +21,7 @@
 	data-size={ctx.size}
 	data-disabled={isDisabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-action
 	class={className}
@@ -47,6 +48,10 @@
 		transition: background-color 160ms ease;
 	}
 
+	[data-input-group-action][data-orientation='horizontal'] {
+		grid-column: 5;
+	}
+
 	[data-input-group-action]:hover:not(:disabled) {
 		background: var(--dry-color-fill-weak);
 	}

package/dist/input-group/input-group-input.svelte

@@ -16,6 +16,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	data-input-group-inputWrap
 >
 	<input
@@ -30,11 +31,14 @@
 <style>
 	[data-input-group-inputWrap] {
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: minmax(0, 1fr);
+		grid-template-columns: minmax(0, 1fr);
 		align-items: center;
 	}
 
+	[data-input-group-inputWrap][data-orientation='horizontal'] {
+		grid-column: 2;
+	}
+
 	[data-input-group-input] {
 		border: 0;
 		background: transparent;
@@ -44,6 +48,7 @@
 		line-height: 1.4;
 		padding: var(--dry-input-group-padding-y) var(--dry-input-group-padding-x);
 		outline: none;
+		box-sizing: border-box;
 	}
 
 	[data-input-group-input]::placeholder {

package/dist/input-group/input-group-prefix.svelte

@@ -17,6 +17,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-prefix
 	class={className}
@@ -35,4 +36,8 @@
 		color: var(--dry-input-group-muted);
 		white-space: nowrap;
 	}
+
+	[data-input-group-prefix][data-orientation='horizontal'] {
+		grid-column: 1;
+	}
 </style>

package/dist/input-group/input-group-root.svelte

@@ -65,8 +65,6 @@
 		--dry-input-group-separator: color-mix(in srgb, var(--dry-input-group-border) 80%, transparent);
 
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
 		align-items: stretch;
 		min-height: 3rem;
 		border: 1px solid var(--dry-input-group-border);
@@ -76,6 +74,16 @@
 		overflow: hidden;
 	}
 
+	[data-input-group-root][data-orientation='horizontal'] {
+		grid-template-columns:
+			max-content
+			minmax(0, 1fr)
+			max-content
+			max-content
+			max-content
+			max-content;
+	}
+
 	[data-input-group-root]:focus-within {
 		border-color: var(--dry-input-group-border-strong);
 		box-shadow: 0 0 0 1px var(--dry-input-group-border-strong);

package/dist/input-group/input-group-select.svelte

@@ -19,6 +19,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 >
 	<select bind:value class={className} data-input-group-select {...rest}>
 		{@render children?.()}
@@ -31,6 +32,10 @@
 		position: relative;
 	}
 
+	[data-input-group-selectWrap][data-orientation='horizontal'] {
+		grid-column: 6;
+	}
+
 	[data-input-group-select] {
 		display: inline-grid;
 		grid-auto-flow: column;

package/dist/input-group/input-group-separator.svelte

@@ -15,6 +15,7 @@
 	data-size={ctx.size}
 	data-disabled={ctx.disabled || undefined}
 	data-invalid={ctx.invalid || undefined}
+	data-orientation={ctx.orientation}
 	{...rest}
 	data-input-group-separator
 	class={className}
@@ -25,4 +26,13 @@
 		align-self: stretch;
 		border-inline-start: 1px solid var(--dry-input-group-separator);
 	}
+
+	[data-input-group-separator][data-orientation='horizontal'] {
+		grid-column: 4;
+	}
+
+	[data-input-group-separator][data-orientation='vertical'] {
+		border-inline-start: 0;
+		border-top: 1px solid var(--dry-input-group-separator);
+	}
 </style>