@r2digisolutions/components 0.15.2 → 0.15.4

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

@@ -1,5 +1,14 @@
 <script lang="ts">
+	import type { Component } from 'svelte';
+	import { untrack } from 'svelte';
 	import Kbd from '../../atoms/Kbd/Kbd.svelte';
+	import { i18n } from '../../../utils/i18n.svelte';
+
+	export type CommandIcon = Component<{
+		class?: string;
+		size?: number | string;
+		strokeWidth?: number | string;
+	}>;
 
 	export interface CommandItem {
 		id: string;
@@ -7,61 +16,127 @@
 		group?: string;
 		shortcut?: string[];
 		disabled?: boolean;
+		subtitle?: string;
+		keywords?: string;
+		href?: string;
+		icon?: CommandIcon;
 	}
 
 	interface CommandPaletteProps {
 		open?: boolean;
 		items?: CommandItem[];
 		placeholder?: string;
+		emptyLabel?: string;
+		loading?: boolean;
 		class?: string;
 		onselect?: (item: CommandItem) => void;
 		onclose?: () => void;
+		onquery?: (query: string) => void;
 	}
 
 	let {
 		open = $bindable(false),
 		items = [],
-		placeholder = 'Type a command or search…',
+		placeholder,
+		emptyLabel,
+		loading = false,
 		class: className = '',
 		onselect,
-		onclose
+		onclose,
+		onquery
 	}: CommandPaletteProps = $props();
 
 	let query = $state('');
 	let activeIndex = $state(0);
-	let inputEl = $state<HTMLInputElement | null>(null);
+	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 filtered = $derived(
-		items.filter((item) => {
-			if (!query.trim()) return true;
-			return item.label.toLowerCase().includes(query.trim().toLowerCase());
-		})
-	);
+	const resolvedPlaceholder = $derived(placeholder ?? i18n.t('commandPalettePlaceholder'));
+	const resolvedEmpty = $derived(emptyLabel ?? i18n.t('noResults'));
+	const dialogLabel = $derived(i18n.t('commandPalette'));
+
+	function normalize(value: string) {
+		return value
+			.normalize('NFD')
+			.replace(/\p{Diacritic}/gu, '')
+			.toLowerCase();
+	}
+
+	function matches(item: CommandItem, haystack: string) {
+		if (!haystack) return true;
+		const blob = normalize([item.label, item.subtitle ?? '', item.keywords ?? ''].join(' '));
+		return blob.includes(haystack);
+	}
+
+	const filtered = $derived.by(() => {
+		const haystack = normalize(query.trim());
+		return items.filter((item) => matches(item, haystack));
+	});
 
 	const groups = $derived.by(() => {
-		const map = new Map<string, CommandItem[]>();
-		for (const item of filtered) {
-			const key = item.group || 'Commands';
+		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);
 
-	$effect(() => {
-		if (open) {
-			query = '';
-			activeIndex = 0;
-			queueMicrotask(() => inputEl?.focus());
+	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(() => {
-		query;
-		activeIndex = 0;
+		if (!dialogEl) return;
+		if (open && !dialogEl.open) {
+			query = '';
+			activeIndex = Math.max(0, firstEnabledIndex());
+			untrack(() => onquery?.(''));
+			ignoreBackdropUntil = Date.now() + 400;
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
+		}
 	});
 
 	function close() {
@@ -69,6 +144,22 @@
 		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);
@@ -76,94 +167,196 @@
 	}
 
 	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(flat.length - 1, 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];
 			if (item) choose(item);
 		}
 	}
+
+	function onInput() {
+		activeIndex = Math.max(0, firstEnabledIndex());
+		onquery?.(query);
+	}
 </script>
 
-{#if open}
-	<div class="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4">
-		<button
-			type="button"
-			class="absolute inset-0 bg-black/40 backdrop-blur-[2px]"
-			aria-label="Close command palette"
-			onclick={close}
-		></button>
-
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label="Command palette"
-			class={[
-				'relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-2xl',
-				className
-			]}
-			onkeydown={onKeydown}
-		>
-			<div class="flex items-center gap-2 border-b border-border px-3">
-				<svg class="h-4 w-4 shrink-0 text-muted" 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:this={inputEl}
-					bind:value={query}
-					{placeholder}
-					class="h-12 w-full bg-transparent text-sm text-primary outline-none placeholder:text-muted"
+<dialog
+	bind:this={dialogEl}
+	class={['command-palette', className]}
+	aria-label={dialogLabel}
+	onclose={handleDialogClose}
+	onclick={handleBackdropClick}
+>
+	<div
+		class="rounded-2xl border-border bg-surface-elevated shadow-2xl w-full overflow-hidden border"
+	>
+		<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"
 				/>
-				<Kbd keys={['Esc']} size="sm" />
-			</div>
-
-			<div class="max-h-80 overflow-y-auto p-2">
-				{#if flat.length === 0}
-					<p class="px-3 py-6 text-center text-sm text-muted">No results</p>
-				{:else}
-					{#each groups as [groupName, groupItems] (groupName)}
-						<p class="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted">
-							{groupName}
-						</p>
-						<ul class="mb-2 flex flex-col gap-0.5">
-							{#each groupItems as item (item.id)}
-								{@const index = flat.findIndex((f) => f.id === item.id)}
-								<li>
-									<button
-										type="button"
-										disabled={item.disabled}
-										onclick={() => choose(item)}
-										onmouseenter={() => (activeIndex = index)}
-										class={[
-											'flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-left text-sm 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>{item.label}</span>
-										{#if item.shortcut?.length}
-											<Kbd keys={item.shortcut} size="sm" />
+			</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 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>
 										{/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/dist/components/organisms/CommandPalette/CommandPalette.svelte.d.ts

@@ -1,18 +1,31 @@
+import type { Component } from 'svelte';
+export type CommandIcon = Component<{
+    class?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
 export interface CommandItem {
     id: string;
     label: string;
     group?: string;
     shortcut?: string[];
     disabled?: boolean;
+    subtitle?: string;
+    keywords?: string;
+    href?: string;
+    icon?: CommandIcon;
 }
 interface CommandPaletteProps {
     open?: boolean;
     items?: CommandItem[];
     placeholder?: string;
+    emptyLabel?: string;
+    loading?: boolean;
     class?: string;
     onselect?: (item: CommandItem) => void;
     onclose?: () => void;
+    onquery?: (query: string) => void;
 }
-declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open">;
+declare const CommandPalette: Component<CommandPaletteProps, {}, "open">;
 type CommandPalette = ReturnType<typeof CommandPalette>;
 export default CommandPalette;

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

@@ -1,14 +1,36 @@
 <script lang="ts">
+	import { FileText, FolderPlus, Search, Settings, UserPlus, Users } from '@lucide/svelte';
 	import CommandPalette, { type CommandItem } from './CommandPalette.svelte';
 	import Button from '../../atoms/Button/Button.svelte';
 	import Kbd from '../../atoms/Kbd/Kbd.svelte';
 
 	const items: CommandItem[] = [
-		{ id: 'new', label: 'Create project', group: 'Actions', shortcut: ['⌘', 'N'] },
-		{ id: 'search', label: 'Search files', group: 'Actions', shortcut: ['⌘', 'P'] },
-		{ id: 'settings', label: 'Open settings', group: 'Navigation', shortcut: ['⌘', ','] },
-		{ id: 'team', label: 'Invite teammate', group: 'Navigation' },
-		{ id: 'billing', label: 'Billing', group: 'Navigation', disabled: true }
+		{
+			id: 'new',
+			label: 'Create project',
+			group: 'Actions',
+			shortcut: ['⌘', 'N'],
+			icon: FolderPlus
+		},
+		{ id: 'search', label: 'Search files', group: 'Actions', shortcut: ['⌘', 'P'], icon: Search },
+		{
+			id: 'invoice',
+			label: 'FAC-2026-0142',
+			subtitle: 'Invoice · Acme S.L.',
+			group: 'Documents',
+			keywords: 'factura invoice',
+			icon: FileText
+		},
+		{
+			id: 'settings',
+			label: 'Open settings',
+			group: 'Navigation',
+			shortcut: ['⌘', ','],
+			href: '/settings',
+			icon: Settings
+		},
+		{ id: 'team', label: 'Invite teammate', group: 'Navigation', icon: UserPlus },
+		{ id: 'billing', label: 'Billing', group: 'Navigation', disabled: true, icon: Users }
 	];
 
 	let open = $state(false);
@@ -24,7 +46,7 @@
 
 <svelte:window onkeydown={onWindowKey} />
 
-<div class="flex flex-col items-center gap-3">
+<div class="gap-3 flex flex-col items-center">
 	<Button size="sm" onclick={() => (open = true)}>
 		Open palette
 		<Kbd keys={['⌘', 'K']} size="sm" />
@@ -34,8 +56,4 @@
 	{/if}
 </div>
 
-<CommandPalette
-	bind:open
-	{items}
-	onselect={(item) => (last = item.label)}
-/>
+<CommandPalette bind:open {items} onselect={(item) => (last = item.label)} />

package/dist/index.d.ts

@@ -666,7 +666,7 @@ export type { NavbarLink } from './components/organisms/Navbar/Navbar.svelte';
 export { default as BottomNav } from './components/organisms/BottomNav/BottomNav.svelte';
 export type { BottomNavItem, BottomNavIcon } from './components/organisms/BottomNav/BottomNav.svelte';
 export { default as CommandPalette } from './components/organisms/CommandPalette/CommandPalette.svelte';
-export type { CommandItem } from './components/organisms/CommandPalette/CommandPalette.svelte';
+export type { CommandItem, CommandIcon } from './components/organisms/CommandPalette/CommandPalette.svelte';
 export { default as AppShell } from './components/organisms/AppShell/AppShell.svelte';
 export { getAppChrome, setAppChrome, AppChrome } from './components/organisms/AppShell/app-chrome.svelte.js';
 export type { AppShellContextual } from './components/organisms/AppShell/app-chrome.svelte.js';

package/dist/utils/i18n.d.ts

@@ -14,6 +14,10 @@ export interface UiMessages {
     addItem: string;
     removeItem: string;
     noItems: string;
+    /** CommandPalette */
+    noResults: string;
+    commandPalette: string;
+    commandPalettePlaceholder: string;
     /** FileUploader */
     uploadFiles: string;
     uploadHelper: string;

package/dist/utils/i18n.js

@@ -12,6 +12,9 @@ const en = {
     addItem: 'Add item',
     removeItem: 'Remove item',
     noItems: 'No items yet',
+    noResults: 'No results',
+    commandPalette: 'Command palette',
+    commandPalettePlaceholder: 'Type a command or search…',
     uploadFiles: 'Upload files',
     uploadHelper: 'SVG, PNG, JPG or GIF (max. 10MB)',
     dropToUpload: 'Drop files to upload',
@@ -56,6 +59,9 @@ const es = {
     addItem: 'Añadir elemento',
     removeItem: 'Eliminar elemento',
     noItems: 'Sin elementos todavía',
+    noResults: 'Sin resultados',
+    commandPalette: 'Paleta de comandos',
+    commandPalettePlaceholder: 'Escribe un comando o busca…',
     uploadFiles: 'Subir archivos',
     uploadHelper: 'SVG, PNG, JPG o GIF (máx. 10MB)',
     dropToUpload: 'Suelta los archivos para subirlos',
@@ -100,6 +106,9 @@ const pt = {
     addItem: 'Adicionar item',
     removeItem: 'Remover item',
     noItems: 'Ainda sem itens',
+    noResults: 'Sem resultados',
+    commandPalette: 'Paleta de comandos',
+    commandPalettePlaceholder: 'Escreve um comando ou pesquisa…',
     uploadFiles: 'Carregar ficheiros',
     uploadHelper: 'SVG, PNG, JPG ou GIF (máx. 10MB)',
     dropToUpload: 'Largue os ficheiros para carregar',
@@ -144,6 +153,9 @@ const fr = {
     addItem: 'Ajouter un élément',
     removeItem: 'Supprimer l’élément',
     noItems: 'Aucun élément pour l’instant',
+    noResults: 'Aucun résultat',
+    commandPalette: 'Palette de commandes',
+    commandPalettePlaceholder: 'Tapez une commande ou recherchez…',
     uploadFiles: 'Téléverser des fichiers',
     uploadHelper: 'SVG, PNG, JPG ou GIF (max. 10MB)',
     dropToUpload: 'Déposez les fichiers pour les téléverser',
@@ -188,6 +200,9 @@ const de = {
     addItem: 'Element hinzufügen',
     removeItem: 'Element entfernen',
     noItems: 'Noch keine Elemente',
+    noResults: 'Keine Ergebnisse',
+    commandPalette: 'Befehlspalette',
+    commandPalettePlaceholder: 'Befehl eingeben oder suchen…',
     uploadFiles: 'Dateien hochladen',
     uploadHelper: 'SVG, PNG, JPG oder GIF (max. 10MB)',
     dropToUpload: 'Dateien zum Hochladen ablegen',
@@ -232,6 +247,9 @@ const ca = {
     addItem: 'Afegir element',
     removeItem: 'Eliminar element',
     noItems: 'Encara sense elements',
+    noResults: 'Sense resultats',
+    commandPalette: 'Paleta de comandes',
+    commandPalettePlaceholder: 'Escriu una comanda o cerca…',
     uploadFiles: 'Pujar fitxers',
     uploadHelper: 'SVG, PNG, JPG o GIF (màx. 10MB)',
     dropToUpload: 'Deixa anar els fitxers per pujar-los',

package/package.json

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