@r2digisolutions/components 0.15.3 → 0.15.4

package/dist/components/organisms/CommandPalette/CommandPalette.svelte

@@ -48,6 +48,11 @@
 
 	let query = $state('');
 	let activeIndex = $state(0);
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+	let listEl = $state<HTMLDivElement | null>(null);
+	/** El click que abre la paleta llega al ::backdrop y la cerraría al instante. */
+	let ignoreBackdropUntil = 0;
+	const listId = 'command-palette-list';
 
 	const resolvedPlaceholder = $derived(placeholder ?? i18n.t('commandPalettePlaceholder'));
 	const resolvedEmpty = $derived(emptyLabel ?? i18n.t('noResults'));
@@ -72,36 +77,89 @@
 	});
 
 	const groups = $derived.by(() => {
-		const map = new Map<string, CommandItem[]>();
-		for (const item of filtered) {
+		const map = new Map<string, { item: CommandItem; index: number }[]>();
+		filtered.forEach((item, index) => {
 			const key = item.group || dialogLabel;
 			const list = map.get(key) ?? [];
-			list.push(item);
+			list.push({ item, index });
 			map.set(key, list);
-		}
+		});
 		return [...map.entries()];
 	});
 
 	const flat = $derived(filtered);
 	const showIconColumn = $derived(flat.some((item) => item.icon));
+	const activeItem = $derived(flat[activeIndex] ?? null);
+	const activeOptionId = $derived(activeItem ? optionId(activeItem.id) : undefined);
+
+	function optionId(id: string) {
+		return `${listId}-${id}`;
+	}
+
+	function firstEnabledIndex() {
+		return flat.findIndex((item) => !item.disabled);
+	}
+
+	function nextEnabled(from: number, dir: 1 | -1) {
+		if (!flat.length) return 0;
+		let i = from;
+		for (let n = 0; n < flat.length; n++) {
+			i = (i + dir + flat.length) % flat.length;
+			if (!flat[i]?.disabled) return i;
+		}
+		return from;
+	}
+
+	/** Desplaza solo el listado, no el <dialog> (scrollIntoView arrastra ancestros). */
+	function keepVisible(node: HTMLElement) {
+		const frame = requestAnimationFrame(() => {
+			const list = listEl;
+			if (!list) return;
+			const listRect = list.getBoundingClientRect();
+			const rect = node.getBoundingClientRect();
+			if (rect.bottom > listRect.bottom) {
+				list.scrollTop += rect.bottom - listRect.bottom;
+			} else if (rect.top < listRect.top) {
+				list.scrollTop -= listRect.top - rect.top;
+			}
+		});
+		return () => cancelAnimationFrame(frame);
+	}
 
 	$effect(() => {
-		if (open) {
+		if (!dialogEl) return;
+		if (open && !dialogEl.open) {
 			query = '';
-			activeIndex = 0;
+			activeIndex = Math.max(0, firstEnabledIndex());
 			untrack(() => onquery?.(''));
+			ignoreBackdropUntil = Date.now() + 400;
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
 		}
 	});
 
-	function focusInput(node: HTMLInputElement) {
-		queueMicrotask(() => node.focus());
-	}
-
 	function close() {
 		open = false;
 		onclose?.();
 	}
 
+	function handleDialogClose() {
+		if (open) close();
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (!dialogEl) return;
+		if (Date.now() < ignoreBackdropUntil) return;
+		const rect = dialogEl.getBoundingClientRect();
+		const inside =
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom;
+		if (!inside) close();
+	}
+
 	function choose(item: CommandItem) {
 		if (item.disabled) return;
 		onselect?.(item);
@@ -109,18 +167,19 @@
 	}
 
 	function onKeydown(e: KeyboardEvent) {
-		if (!open) return;
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			close();
-			return;
-		}
+		if (!open || !flat.length) return;
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
-			activeIndex = Math.min(Math.max(flat.length - 1, 0), activeIndex + 1);
+			activeIndex = nextEnabled(activeIndex, 1);
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
-			activeIndex = Math.max(0, activeIndex - 1);
+			activeIndex = nextEnabled(activeIndex, -1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			activeIndex = nextEnabled(-1, 1);
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			activeIndex = nextEnabled(flat.length, -1);
 		} else if (e.key === 'Enter') {
 			e.preventDefault();
 			const item = flat[activeIndex];
@@ -129,128 +188,175 @@
 	}
 
 	function onInput() {
-		activeIndex = 0;
+		activeIndex = Math.max(0, firstEnabledIndex());
 		onquery?.(query);
 	}
 </script>
 
-{#if open}
-	<button
-		type="button"
-		class="inset-0 bg-black/60 p-0 dark:bg-black/70 backdrop-blur-sm fixed z-50 border-0"
-		aria-label={i18n.t('close')}
-		onclick={close}
-	></button>
-
+<dialog
+	bind:this={dialogEl}
+	class={['command-palette', className]}
+	aria-label={dialogLabel}
+	onclose={handleDialogClose}
+	onclick={handleBackdropClick}
+>
 	<div
-		class="px-4 inset-0 pointer-events-none fixed z-[51] flex items-start justify-center pt-[12vh]"
+		class="rounded-2xl border-border bg-surface-elevated shadow-2xl w-full overflow-hidden border"
 	>
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={dialogLabel}
-			tabindex="-1"
-			class={[
-				'max-w-xl rounded-2xl border-border bg-surface-elevated shadow-2xl pointer-events-auto w-full overflow-hidden border',
-				className
-			]}
-			onkeydown={onKeydown}
-		>
-			<div class="gap-2 border-border px-3 flex items-center border-b">
-				<svg
-					class="h-4 w-4 text-muted shrink-0"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					aria-hidden="true"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"
-					/>
-				</svg>
-				<input
-					bind:value={query}
-					{@attach focusInput}
-					placeholder={resolvedPlaceholder}
-					class="h-12 text-sm text-primary placeholder:text-muted w-full bg-transparent outline-none"
-					autocomplete="off"
-					spellcheck="false"
-					aria-autocomplete="list"
-					oninput={onInput}
+		<div class="gap-2 border-border px-3 flex items-center border-b">
+			<svg
+				class="h-4 w-4 text-muted shrink-0"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"
 				/>
-				{#if loading}
-					<span
-						class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"
-						aria-hidden="true"
-					></span>
-				{/if}
-				<Kbd keys={['Esc']} size="sm" />
-			</div>
+			</svg>
+			<input
+				bind:value={query}
+				placeholder={resolvedPlaceholder}
+				class="h-12 text-sm text-primary placeholder:text-muted w-full bg-transparent outline-none"
+				autocomplete="off"
+				spellcheck="false"
+				role="combobox"
+				aria-autocomplete="list"
+				aria-expanded="true"
+				aria-controls={listId}
+				aria-activedescendant={activeOptionId}
+				oninput={onInput}
+				onkeydown={onKeydown}
+			/>
+			{#if loading}
+				<span
+					class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"
+					aria-hidden="true"
+				></span>
+			{/if}
+			<Kbd keys={['Esc']} size="sm" />
+		</div>
 
-			<div class="max-h-80 p-2 overflow-y-auto">
-				{#if flat.length === 0}
-					<p class="px-3 py-6 text-sm text-muted text-center">{resolvedEmpty}</p>
-				{:else}
-					{#each groups as [groupName, groupItems] (groupName)}
-						<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
-							{groupName}
-						</p>
-						<ul class="mb-2 gap-0.5 flex flex-col">
-							{#each groupItems as item (item.id)}
-								{@const index = flat.findIndex((f) => f.id === item.id)}
-								{@const Icon = item.icon}
-								<li>
-									<button
-										type="button"
-										disabled={item.disabled}
-										onclick={() => choose(item)}
-										onmouseenter={() => (activeIndex = index)}
-										class={[
-											'gap-3 rounded-xl px-3 py-2 text-sm flex w-full items-center justify-between text-left transition-colors',
-											index === activeIndex
-												? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
-												: 'text-primary hover:bg-surface-overlay',
-											item.disabled && 'cursor-not-allowed opacity-40'
-										]}
-									>
-										<span class="gap-3 min-w-0 flex flex-1 items-center">
-											{#if showIconColumn}
-												<span
-													class={[
-														'h-8 w-8 rounded-lg flex shrink-0 items-center justify-center',
-														index === activeIndex
-															? 'bg-brand-100/80 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300'
-															: 'bg-surface-overlay text-muted'
-													]}
-													aria-hidden="true"
-												>
-													{#if Icon}
-														<Icon size={16} strokeWidth={2} />
-													{/if}
-												</span>
-											{/if}
-											<span class="min-w-0 flex-1">
-												<span class="block truncate">{item.label}</span>
-												{#if item.subtitle}
-													<span class="mt-0.5 text-xs text-muted block truncate"
-														>{item.subtitle}</span
-													>
+		<div bind:this={listEl} id={listId} class="max-h-80 p-2 overflow-y-auto" role="listbox">
+			{#if flat.length === 0}
+				<p class="px-3 py-6 text-sm text-muted text-center">{resolvedEmpty}</p>
+			{:else}
+				{#each groups as [groupName, groupItems] (groupName)}
+					<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
+						{groupName}
+					</p>
+					<ul class="mb-2 gap-0.5 flex flex-col">
+						{#each groupItems as { item, index } (item.id)}
+							{@const Icon = item.icon}
+							{@const active = index === activeIndex}
+							<li>
+								<button
+									id={optionId(item.id)}
+									type="button"
+									role="option"
+									tabindex="-1"
+									aria-selected={active}
+									disabled={item.disabled}
+									onclick={() => choose(item)}
+									onmouseenter={() => {
+										if (!item.disabled) activeIndex = index;
+									}}
+									{@attach active ? keepVisible : undefined}
+									class={[
+										'gap-3 rounded-xl px-3 py-2 text-sm flex w-full items-center justify-between text-left transition-colors',
+										active
+											? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+											: 'text-primary hover:bg-surface-overlay',
+										item.disabled && 'cursor-not-allowed opacity-40'
+									]}
+								>
+									<span class="gap-3 min-w-0 flex flex-1 items-center">
+										{#if showIconColumn}
+											<span
+												class={[
+													'h-8 w-8 rounded-lg flex shrink-0 items-center justify-center',
+													active
+														? 'bg-brand-100/80 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300'
+														: 'bg-surface-overlay text-muted'
+												]}
+												aria-hidden="true"
+											>
+												{#if Icon}
+													<Icon size={16} strokeWidth={2} />
 												{/if}
 											</span>
-										</span>
-										{#if item.shortcut?.length}
-											<Kbd keys={item.shortcut} size="sm" />
 										{/if}
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{/each}
-				{/if}
-			</div>
+										<span class="min-w-0 flex-1">
+											<span class="block truncate">{item.label}</span>
+											{#if item.subtitle}
+												<span class="mt-0.5 text-xs text-muted block truncate">{item.subtitle}</span
+												>
+											{/if}
+										</span>
+									</span>
+									{#if item.shortcut?.length}
+										<Kbd keys={item.shortcut} size="sm" />
+									{/if}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				{/each}
+			{/if}
 		</div>
 	</div>
-{/if}
+</dialog>
+
+<style>
+	.command-palette {
+		margin: 12vh auto auto;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: inherit;
+		width: calc(100% - 2rem);
+		max-width: 36rem;
+		overflow: visible;
+	}
+
+	.command-palette::backdrop {
+		background: oklch(15% 0.02 265 / 0.45);
+		backdrop-filter: blur(6px);
+	}
+
+	:global(.dark) .command-palette::backdrop {
+		background: oklch(0% 0 0 / 0.65);
+	}
+
+	.command-palette[open] {
+		animation: palette-in 140ms ease-out;
+	}
+
+	.command-palette[open]::backdrop {
+		animation: palette-backdrop-in 140ms ease-out;
+	}
+
+	@keyframes palette-in {
+		from {
+			opacity: 0;
+			transform: translateY(6px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes palette-backdrop-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/package.json

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