@r2digisolutions/components 0.15.1 → 0.15.3

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,41 +16,65 @@
 		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);
 
-	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 key = item.group || dialogLabel;
 			const list = map.get(key) ?? [];
 			list.push(item);
 			map.set(key, list);
@@ -50,19 +83,19 @@
 	});
 
 	const flat = $derived(filtered);
+	const showIconColumn = $derived(flat.some((item) => item.icon));
 
 	$effect(() => {
 		if (open) {
 			query = '';
 			activeIndex = 0;
-			queueMicrotask(() => inputEl?.focus());
+			untrack(() => onquery?.(''));
 		}
 	});
 
-	$effect(() => {
-		query;
-		activeIndex = 0;
-	});
+	function focusInput(node: HTMLInputElement) {
+		queueMicrotask(() => node.focus());
+	}
 
 	function close() {
 		open = false;
@@ -84,7 +117,7 @@
 		}
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
-			activeIndex = Math.min(flat.length - 1, activeIndex + 1);
+			activeIndex = Math.min(Math.max(flat.length - 1, 0), activeIndex + 1);
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
 			activeIndex = Math.max(0, activeIndex - 1);
@@ -94,51 +127,81 @@
 			if (item) choose(item);
 		}
 	}
+
+	function onInput() {
+		activeIndex = 0;
+		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>
+	<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>
 
+	<div
+		class="px-4 inset-0 pointer-events-none fixed z-[51] flex items-start justify-center pt-[12vh]"
+	>
 		<div
 			role="dialog"
 			aria-modal="true"
-			aria-label="Command palette"
+			aria-label={dialogLabel}
+			tabindex="-1"
 			class={[
-				'relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-2xl',
+				'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="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" />
+			<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:this={inputEl}
 					bind:value={query}
-					{placeholder}
-					class="h-12 w-full bg-transparent text-sm text-primary outline-none placeholder:text-muted"
+					{@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}
 				/>
+				{#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 overflow-y-auto p-2">
+			<div class="max-h-80 p-2 overflow-y-auto">
 				{#if flat.length === 0}
-					<p class="px-3 py-6 text-center text-sm text-muted">No results</p>
+					<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 text-[11px] font-semibold uppercase tracking-wide text-muted">
+						<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
 							{groupName}
 						</p>
-						<ul class="mb-2 flex flex-col gap-0.5">
+						<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"
@@ -146,14 +209,38 @@
 										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',
+											'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>{item.label}</span>
+										<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
+													>
+												{/if}
+											</span>
+										</span>
 										{#if item.shortcut?.length}
 											<Kbd keys={item.shortcut} size="sm" />
 										{/if}

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.1",
+	"version": "0.15.3",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",
@@ -66,38 +66,38 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
-		"@lucide/svelte": "^1.35.0",
+		"@lucide/svelte": "^1.39.0",
 		"@playwright/test": "^1.62.1",
-		"@storybook/addon-a11y": "^10.5.10",
-		"@storybook/addon-docs": "^10.5.10",
-		"@storybook/addon-svelte-csf": "^5.1.2",
-		"@storybook/addon-themes": "^10.5.10",
-		"@storybook/svelte": "^10.5.10",
-		"@storybook/sveltekit": "^10.5.10",
+		"@storybook/addon-a11y": "^10.6.0",
+		"@storybook/addon-docs": "^10.6.0",
+		"@storybook/addon-svelte-csf": "^5.1.3",
+		"@storybook/addon-themes": "^10.6.0",
+		"@storybook/svelte": "^10.6.0",
+		"@storybook/sveltekit": "^10.6.0",
 		"@sveltejs/adapter-static": "next",
 		"@sveltejs/kit": "next",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/vite": "^4.3.3",
-		"@types/node": "^26.4.0",
+		"@types/node": "^26.4.1",
 		"@vitest/browser-playwright": "^4.1.11",
-		"bumpp": "~12.2.2",
+		"bumpp": "~12.3.0",
 		"eslint": "^10.9.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
-		"globals": "^17.11.0",
+		"globals": "^17.12.0",
 		"mdsvex": "^0.12.8",
 		"playwright": "^1.62.1",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
 		"publint": "^0.3.24",
-		"storybook": "^10.5.10",
-		"svelte": "^5.56.10",
+		"storybook": "^10.6.0",
+		"svelte": "^5.57.0",
 		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"typescript": "6.0.3",
-		"typescript-eslint": "^8.68.0",
+		"typescript-eslint": "^8.69.0",
 		"vite": "^8.2.2",
 		"vitest": "^4.1.11",
 		"vitest-browser-svelte": "^3.0.0"
@@ -111,6 +111,6 @@
 		"atomic-design"
 	],
 	"dependencies": {
-		"@xyflow/svelte": "^1.6.5"
+		"@xyflow/svelte": "^1.6.6"
 	}
 }