@r2digisolutions/components 0.14.18 → 0.14.20

package/dist/components/molecules/Calendar/Calendar.svelte

@@ -81,6 +81,10 @@
 	let panel = $state<Panel>('days');
 	/** Which month column owns the month/year picker when months=2. */
 	let pickerOffset = $state(0);
+	/** Range drag: anchor day and live preview end (YYYY-MM-DD). */
+	let dragAnchor = $state<string | null>(null);
+	let dragPreviewEnd = $state<string | null>(null);
+	let isDragging = $state(false);
 
 	const weekDays = $derived(
 		Array.from({ length: 7 }, (_, i) =>
@@ -214,22 +218,105 @@
 		return false;
 	}
 
+	function rangeDisplayStart() {
+		if (mode !== 'range') return start;
+		if (isDragging && dragAnchor) {
+			if (!dragPreviewEnd) return dragAnchor;
+			return dragAnchor <= dragPreviewEnd ? dragAnchor : dragPreviewEnd;
+		}
+		return start;
+	}
+
+	function rangeDisplayEnd() {
+		if (mode !== 'range') return end;
+		if (isDragging && dragAnchor && dragPreviewEnd) {
+			return dragAnchor <= dragPreviewEnd ? dragPreviewEnd : dragAnchor;
+		}
+		return end;
+	}
+
 	function isSelected(iso: string) {
 		if (mode === 'single') return value === iso;
 		if (mode === 'multiple') return values.includes(iso);
-		if (!start) return false;
-		if (!end) return start === iso;
-		return iso >= start && iso <= end;
+		const rangeStart = rangeDisplayStart();
+		const rangeEnd = rangeDisplayEnd();
+		if (!rangeStart) return false;
+		if (!rangeEnd) return rangeStart === iso;
+		return iso >= rangeStart && iso <= rangeEnd;
 	}
 
 	function isRangeEdge(iso: string) {
-		return mode === 'range' && (iso === start || iso === end);
+		if (mode !== 'range') return false;
+		const rangeStart = rangeDisplayStart();
+		const rangeEnd = rangeDisplayEnd();
+		return iso === rangeStart || iso === rangeEnd;
 	}
 
 	function isInRange(iso: string) {
-		return mode === 'range' && !!start && !!end && iso > start && iso < end;
+		if (mode !== 'range') return false;
+		const rangeStart = rangeDisplayStart();
+		const rangeEnd = rangeDisplayEnd();
+		return !!rangeStart && !!rangeEnd && iso > rangeStart && iso < rangeEnd;
+	}
+
+	function dayFromTarget(target: EventTarget | null) {
+		if (!(target instanceof Element)) return null;
+		const button = target.closest('[data-calendar-day]');
+		if (!(button instanceof HTMLElement)) return null;
+		const iso = button.dataset.calendarDay;
+		return iso && !isDisabled(iso) ? iso : null;
+	}
+
+	function beginRangeDrag(iso: string, event: PointerEvent) {
+		if (mode !== 'range' || isDisabled(iso)) return;
+		event.preventDefault();
+		isDragging = true;
+		dragAnchor = iso;
+		dragPreviewEnd = null;
 	}
 
+	function finishRangeDrag(iso: string | null) {
+		if (!dragAnchor) return;
+
+		if (dragPreviewEnd && dragPreviewEnd !== dragAnchor) {
+			const rangeStart = dragAnchor <= dragPreviewEnd ? dragAnchor : dragPreviewEnd;
+			const rangeEnd = dragAnchor <= dragPreviewEnd ? dragPreviewEnd : dragAnchor;
+			start = rangeStart;
+			end = rangeEnd;
+			emit();
+		} else {
+			pick(iso ?? dragAnchor);
+		}
+
+		isDragging = false;
+		dragAnchor = null;
+		dragPreviewEnd = null;
+	}
+
+	$effect(() => {
+		if (!isDragging) return;
+
+		const onMove = (event: PointerEvent) => {
+			const iso = dayFromTarget(document.elementFromPoint(event.clientX, event.clientY));
+			if (iso) dragPreviewEnd = iso;
+		};
+
+		const onUp = (event: PointerEvent) => {
+			const iso =
+				dayFromTarget(document.elementFromPoint(event.clientX, event.clientY)) ?? dragAnchor;
+			finishRangeDrag(iso);
+		};
+
+		window.addEventListener('pointermove', onMove);
+		window.addEventListener('pointerup', onUp);
+		window.addEventListener('pointercancel', onUp);
+		return () => {
+			window.removeEventListener('pointermove', onMove);
+			window.removeEventListener('pointerup', onUp);
+			window.removeEventListener('pointercancel', onUp);
+		};
+	});
+
 	function emit() {
 		onchange?.({ mode, value, values, start, end });
 	}
@@ -275,10 +362,13 @@
 		const mid = isInRange(iso);
 		const disabled = isDisabled(iso);
 		const isToday = iso === todayIso;
+		const rangeStart = rangeDisplayStart();
+		const rangeEnd = rangeDisplayEnd();
 
 		return [
 			'relative flex size-9 items-center justify-center rounded-lg text-sm transition-colors',
 			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			mode === 'range' && !disabled && 'touch-none select-none',
 			disabled && 'cursor-not-allowed opacity-30',
 			!disabled && !selected && !mid && 'text-primary hover:bg-surface-overlay',
 			mid && 'rounded-none bg-brand-500/15 text-primary',
@@ -286,17 +376,17 @@
 			edge && 'bg-brand-500 font-semibold text-white',
 			selected &&
 				mode === 'range' &&
-				start &&
-				end &&
-				iso === start &&
-				end !== start &&
+				rangeStart &&
+				rangeEnd &&
+				iso === rangeStart &&
+				rangeEnd !== rangeStart &&
 				'rounded-r-none',
 			selected &&
 				mode === 'range' &&
-				start &&
-				end &&
-				iso === end &&
-				end !== start &&
+				rangeStart &&
+				rangeEnd &&
+				iso === rangeEnd &&
+				rangeEnd !== rangeStart &&
 				'rounded-l-none',
 			isToday && !selected && !mid && 'ring-1 ring-brand-500/40'
 		];
@@ -319,8 +409,12 @@
 		framed && 'rounded-2xl border border-border p-3 shadow-sm',
 		!framed && 'p-0.5',
 		dual && panel === 'days' ? 'w-fit' : 'w-80',
+		isDragging && 'select-none',
 		className
 	]}
+	onpointerleave={() => {
+		if (isDragging) dragPreviewEnd = null;
+	}}
 >
 	{#if panel === 'days'}
 		<div class={['flex', dual ? 'flex-col gap-4 sm:flex-row sm:gap-2' : 'flex-col']}>
@@ -391,7 +485,22 @@
 									type="button"
 									disabled={isDisabled(cell.date)}
 									aria-pressed={isSelected(cell.date)}
-									onclick={() => pick(cell.date)}
+									data-calendar-day={cell.date}
+									onclick={() => {
+										if (mode !== 'range') pick(cell.date);
+									}}
+									onpointerdown={
+										mode === 'range'
+											? (event) => beginRangeDrag(cell.date, event)
+											: undefined
+									}
+									onpointerenter={
+										mode === 'range' && isDragging && !isDisabled(cell.date)
+											? () => {
+													dragPreviewEnd = cell.date;
+												}
+											: undefined
+									}
 									class={dayClass(cell.date)}
 								>
 									<span class="relative z-10">{cell.day}</span>

package/dist/components/molecules/ComboboxItem/ComboboxItem.svelte

@@ -79,9 +79,11 @@
 			'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
 			disabled && 'cursor-not-allowed opacity-40',
 			!disabled &&
-				(item.isHighlighted || item.isSelected
+				(item.isHighlighted
 					? 'bg-brand-500 text-white'
-					: 'text-primary hover:bg-surface-overlay'),
+					: item.isSelected
+						? 'bg-brand-500/10 font-medium text-primary'
+						: 'text-primary hover:bg-surface-overlay'),
 			className
 		]}
 	>

package/dist/components/molecules/Select/Select.svelte

@@ -196,12 +196,19 @@
 		const spaceAbove = rect.top - gap;
 		const openUp = spaceBelow < Math.min(maxHeight, 160) && spaceAbove > spaceBelow;
 		const available = Math.max(120, openUp ? spaceAbove : spaceBelow);
+		const maxWidth = Math.min(320, window.innerWidth - 16);
+		let left = rect.left;
+		if (left + maxWidth > window.innerWidth - 8) {
+			left = Math.max(8, window.innerWidth - maxWidth - 8);
+		}
 
 		listboxStyle = [
 			`top: ${openUp ? 'auto' : `${rect.bottom + gap}px`}`,
 			`bottom: ${openUp ? `${window.innerHeight - rect.top + gap}px` : 'auto'}`,
-			`left: ${rect.left}px`,
-			`width: ${rect.width}px`,
+			`left: ${left}px`,
+			`min-width: ${rect.width}px`,
+			`width: max-content`,
+			`max-width: ${maxWidth}px`,
 			`max-height: ${Math.min(maxHeight, available)}px`
 		].join('; ');
 	}
@@ -577,7 +584,7 @@
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
 					</svg>
-					<span class="truncate">{currentLevel.title}</span>
+					<span class="whitespace-nowrap">{currentLevel.title}</span>
 				</button>
 				<div class="border-border mx-1.5 mb-0.5 h-px border-b" role="separator"></div>
 			{/if}
@@ -605,33 +612,41 @@
 							onpointerdown={(e) => handleOptionPointerDown(e, option)}
 							onclick={() => selectOption(option)}
 							onpointerenter={() => {
-								if (ignoreHover || option.disabled) return;
+								if (option.disabled) return;
+								ignoreHover = false;
 								highlightedIndex = index;
 							}}
 							class={[
 								'group gap-2.5 rounded-lg px-2.5 py-2 text-sm relative flex w-full items-center text-left outline-none select-none',
 								'transition-[background-color,color,box-shadow] duration-75',
 								option.disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
-								(isHighlighted || isSelected) && !option.disabled
+								isHighlighted && !option.disabled
 									? 'bg-brand-500 text-white shadow-sm'
-									: 'text-primary'
+									: isSelected && !option.disabled
+										? 'bg-brand-500/10 text-primary font-medium'
+										: 'text-primary hover:bg-surface-overlay'
 							]}
 						>
 							{#if !hasChildren}
 								<span
 									class={[
 										'h-4 w-4 flex shrink-0 items-center justify-center rounded-full border transition-colors duration-75',
-										(isHighlighted || isSelected) && !option.disabled
+										isHighlighted && !option.disabled
 											? isSelected
 												? 'border-white bg-white'
 												: 'border-white/60 bg-transparent'
-											: 'border-border-strong bg-transparent'
+											: isSelected && !option.disabled
+												? 'border-brand-500 bg-brand-500'
+												: 'border-border-strong bg-transparent'
 									]}
 									aria-hidden="true"
 								>
 									{#if isSelected}
 										<svg
-											class="h-2.5 w-2.5 text-brand-600"
+											class={[
+												'h-2.5 w-2.5',
+												isHighlighted ? 'text-brand-600' : 'text-white'
+											]}
 											viewBox="0 0 24 24"
 											fill="none"
 											stroke="currentColor"
@@ -644,14 +659,12 @@
 							{/if}
 
 							<span class="min-w-0 flex-1">
-								<span class={['block truncate', isSelected && 'font-medium']}>
-									{option.label}
-								</span>
+								<span class="block whitespace-nowrap">{option.label}</span>
 								{#if secondary}
 									<span
 										class={[
-											'mt-0.5 block truncate text-[11px]',
-											(isHighlighted || isSelected) && !option.disabled
+											'mt-0.5 block text-[11px] whitespace-nowrap',
+											isHighlighted && !option.disabled
 												? 'text-white/75'
 												: 'text-secondary'
 										]}
@@ -665,7 +678,7 @@
 								<svg
 									class={[
 										'h-4 w-4 shrink-0',
-										(isHighlighted || isSelected) && !option.disabled
+										isHighlighted && !option.disabled
 											? 'text-white/80'
 											: 'text-secondary'
 									]}

package/dist/components/organisms/Dialog/Dialog.svelte

@@ -76,6 +76,8 @@
 	}: DialogProps = $props();
 
 	let dialogEl = $state<HTMLDialogElement | null>(null);
+	/** Ignora clics en backdrop justo tras cerrar un diálogo nativo (p. ej. selector de archivos). */
+	let suppressBackdropUntil = 0;
 	const titleId = $derived(`${id}-title`);
 	const descriptionId = $derived(`${id}-description`);
 
@@ -152,6 +154,15 @@
 		};
 	});
 
+	$effect(() => {
+		if (!open || typeof window === 'undefined') return;
+		const onWindowFocus = () => {
+			suppressBackdropUntil = Date.now() + 400;
+		};
+		window.addEventListener('focus', onWindowFocus);
+		return () => window.removeEventListener('focus', onWindowFocus);
+	});
+
 	function close(reason: 'close' | 'cancel' | 'confirm' | 'backdrop' | 'escape' = 'close') {
 		if (!open) return;
 		open = false;
@@ -186,6 +197,7 @@
 
 	function handleBackdropClick(event: MouseEvent) {
 		if (!dialogEl) return;
+		if (Date.now() < suppressBackdropUntil) return;
 		const rect = dialogEl.getBoundingClientRect();
 		const clickedInDialog =
 			event.clientX >= rect.left &&

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.14.18",
+	"version": "0.14.20",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",