@dorsk/tsumikit 0.44.1 → 0.46.0

package/README.md

@@ -164,7 +164,8 @@ Tabs, RadioGroup (`variant="rows"`: bordered rows, per-option `note`/`descriptio
 `action(option)` trailing control that never toggles, `below(option)` inline panel),
 Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
-ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
+ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme),
+EmojiPicker (popover with a searchable EN+FR glyph catalogue, grouped tabs, roving-tabindex grid; pass `groups` to swap the catalogue), FontScalePicker (popover with a stepped slider across the five text sizes), SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
 CapBar (consumption track with a draggable, keyboard-steppable cap handle that

package/dist/components/atoms/Select.svelte

@@ -9,6 +9,10 @@
 		/** Muted, right-aligned secondary text (e.g. "62%"). */
 		hint?: string;
 		disabled?: boolean;
+		/** Section heading this option belongs under. Options sharing a group are
+		 *  emitted inside one `<optgroup label={group}>`, in first-seen group order.
+		 *  Ungrouped options render at the top level. */
+		group?: string;
 	};
 </script>
 
@@ -42,6 +46,7 @@
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
+	import { sectionOptions } from '../../select-options';
 
 	// `size` shadows the native option-count attribute (unused in token layouts) to
 	// expose the sm|md height scale instead.
@@ -99,14 +104,26 @@
 	const selected = $derived(options?.find((o) => o.value === value));
 	const hasFace = $derived(!!options && variant !== 'ghost');
 
+	const sections = $derived(sectionOptions(options ?? []));
+
 	const optionText = (o: SelectOption) =>
 		[o.emoji, o.label, o.hint && `· ${o.hint}`].filter(Boolean).join(' ');
 </script>
 
 {#snippet optionList()}
 	{#if options}
-		{#each options as o (o.value)}
-			<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+		{#each sections as section, i (section.group ?? `-${i}`)}
+			{#if section.group === undefined}
+				{#each section.options as o (o.value)}
+					<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+				{/each}
+			{:else}
+				<optgroup label={section.group}>
+					{#each section.options as o (o.value)}
+						<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+					{/each}
+				</optgroup>
+			{/if}
 		{/each}
 	{:else}
 		{@render children?.()}
@@ -251,7 +268,8 @@
 	.select.has-face {
 		color: transparent;
 	}
-	.select.has-face option {
+	.select.has-face option,
+	.select.has-face optgroup {
 		color: var(--text);
 		background: var(--bg);
 	}

package/dist/components/atoms/Select.svelte.d.ts

@@ -7,6 +7,10 @@ export type SelectOption = {
     /** Muted, right-aligned secondary text (e.g. "62%"). */
     hint?: string;
     disabled?: boolean;
+    /** Section heading this option belongs under. Options sharing a group are
+     *  emitted inside one `<optgroup label={group}>`, in first-seen group order.
+     *  Ungrouped options render at the top level. */
+    group?: string;
 };
 import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';

package/dist/components/molecules/EmojiPicker.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	// Emoji chooser: a Popover holding a search box, a tab strip of catalogue
+	// groups and a grid of glyphs. Desktop browsers have no emoji keyboard, so
+	// this is the click-only path next to a plain text field.
+	import Input from '../atoms/Input.svelte';
+	import Popover from './Popover.svelte';
+	import { type EmojiGroup, EMOJI_GROUPS, searchEmoji } from '../../emoji';
+
+	let {
+		value = '',
+		onselect,
+		groups = EMOJI_GROUPS,
+		columns = 8,
+		label = 'Choose an emoji',
+		searchLabel = 'Search an emoji…',
+		emptyLabel = 'No emoji matches.',
+		placement = 'bottom-start',
+		triggerClass = '',
+		disabled = false,
+		class: klass = '',
+		style: styleProp = '',
+	}: {
+		/** The current glyph, highlighted in the grid. */
+		value?: string;
+		onselect: (emoji: string) => void;
+		/** Catalogue to browse; defaults to the kit's EN+FR keyword set. */
+		groups?: readonly EmojiGroup[];
+		columns?: number;
+		/** Accessible name of the trigger and of the glyph grid. */
+		label?: string;
+		searchLabel?: string;
+		emptyLabel?: string;
+		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+		triggerClass?: string;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const uid = `emoji-${Math.random().toString(36).slice(2, 8)}`;
+	const tabId = (id: string) => `${uid}-tab-${id}`;
+	const panelId = `${uid}-panel`;
+
+	let query = $state('');
+	let groupId = $state<string | null>(null);
+	let cursor = $state(0);
+	let gridEl = $state<HTMLDivElement | null>(null);
+
+	const current = $derived(groups.find((g) => g.id === groupId) ?? groups[0]);
+	const searching = $derived(query.trim().length > 0);
+	const shown = $derived(searching ? searchEmoji(query, groups) : (current?.entries ?? []));
+	const active = $derived(Math.min(cursor, Math.max(shown.length - 1, 0)));
+	const picked = $derived(value.trim());
+
+	function focusCell(i: number) {
+		const cells = gridEl?.querySelectorAll<HTMLElement>('[role="option"]');
+		if (!cells?.length) return;
+		cursor = Math.max(0, Math.min(i, cells.length - 1));
+		cells[cursor].focus();
+	}
+
+	function pick(emoji: string, close: () => void) {
+		onselect(emoji);
+		query = '';
+		close();
+	}
+
+	function onGridClick(e: MouseEvent, close: () => void) {
+		const cell = (e.target as HTMLElement | null)?.closest<HTMLElement>('[role="option"]');
+		if (cell?.dataset.emoji) pick(cell.dataset.emoji, close);
+	}
+
+	function onGridKeydown(e: KeyboardEvent, close: () => void) {
+		const keys: Record<string, number> = {
+			ArrowRight: active + 1,
+			ArrowLeft: active - 1,
+			ArrowDown: active + columns,
+			ArrowUp: active - columns,
+			Home: 0,
+			End: shown.length - 1,
+		};
+		if (e.key in keys) {
+			e.preventDefault();
+			focusCell(keys[e.key]);
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			const emoji = shown[active]?.emoji;
+			if (emoji) pick(emoji, close);
+		}
+	}
+
+	function onTabsKeydown(e: KeyboardEvent) {
+		const i = groups.findIndex((g) => g.id === current?.id);
+		const next = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : null;
+		if (next === null) return;
+		e.preventDefault();
+		const g = groups[(next + groups.length) % groups.length];
+		groupId = g.id;
+		cursor = 0;
+		document.getElementById(tabId(g.id))?.focus();
+	}
+</script>
+
+<Popover
+	{label}
+	{placement}
+	{triggerClass}
+	{disabled}
+	class={klass}
+	style={styleProp}
+	control
+	role="dialog"
+	onopen={() => {
+		query = '';
+		cursor = 0;
+	}}
+>
+	{#snippet trigger()}
+		<span class="emoji-trigger" aria-hidden="true">{picked || '🙂'}</span>
+	{/snippet}
+
+	{#snippet children({ close }: { close: () => void })}
+		<div class="picker">
+			<Input
+				bind:value={query}
+				placeholder={searchLabel}
+				aria-label={searchLabel}
+				size="sm"
+				clearable
+				onclear={() => (query = '')}
+				style="width:100%"
+			/>
+
+			{#if !searching}
+				<div class="tabs" role="tablist" tabindex={-1} aria-label={label} onkeydown={onTabsKeydown}>
+					{#each groups as g (g.id)}
+						<button
+							type="button"
+							role="tab"
+							id={tabId(g.id)}
+							class="tab"
+							class:on={g.id === current?.id}
+							aria-selected={g.id === current?.id}
+							aria-controls={panelId}
+							aria-label={g.label}
+							tabindex={g.id === current?.id ? 0 : -1}
+							onclick={() => {
+								groupId = g.id;
+								cursor = 0;
+							}}
+						>
+							<span aria-hidden="true">{g.icon}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<div
+				id={panelId}
+				role={searching ? undefined : 'tabpanel'}
+				aria-labelledby={searching || !current ? undefined : tabId(current.id)}
+			>
+				{#if shown.length}
+					<!-- Options are not buttons: `option` is only valid as a listbox child,
+					     and a roving tabindex keeps the grid to one tab stop. -->
+					<div
+						bind:this={gridEl}
+						class="grid"
+						role="listbox"
+						tabindex={-1}
+						aria-label={label}
+						style:--emoji-columns={columns}
+						onclick={(e) => onGridClick(e, close)}
+						onkeydown={(e) => onGridKeydown(e, close)}
+					>
+						{#each shown as x, i (x.emoji)}
+							<div
+								role="option"
+								class="cell"
+								class:on={x.emoji === picked}
+								aria-selected={x.emoji === picked}
+								data-emoji={x.emoji}
+								title={x.keys}
+								tabindex={i === active ? 0 : -1}
+							>
+								{x.emoji}
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<p class="empty">{emptyLabel}</p>
+				{/if}
+			</div>
+		</div>
+	{/snippet}
+</Popover>
+
+<style>
+	.emoji-trigger {
+		font-size: var(--fs-md);
+		line-height: 1;
+	}
+	.picker {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		width: min(20rem, calc(100vw - var(--sp-6)));
+	}
+	.tabs {
+		display: flex;
+		gap: var(--sp-1);
+	}
+	.tab,
+	.cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--sp-1);
+		border: 1px solid transparent;
+		border-radius: var(--r-sm);
+		background: none;
+		color: inherit;
+		font-size: var(--fs-lg);
+		line-height: 1;
+		cursor: pointer;
+	}
+	.tab.on,
+	.cell.on {
+		border-color: var(--accent);
+		background: var(--bg-elevated-2);
+	}
+	.tab:hover,
+	.cell:hover,
+	.tab:focus-visible,
+	.cell:focus-visible {
+		background: var(--bg-elevated-2);
+	}
+	.tab:focus-visible,
+	.cell:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(var(--emoji-columns), 1fr);
+		gap: var(--sp-1);
+		max-height: 14rem;
+		overflow-y: auto;
+	}
+	.empty {
+		margin: var(--sp-2) 0;
+		color: var(--text-muted);
+		font-size: var(--fs-xs);
+		text-align: center;
+	}
+</style>

package/dist/components/molecules/EmojiPicker.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type EmojiGroup } from '../../emoji';
+type $$ComponentProps = {
+    /** The current glyph, highlighted in the grid. */
+    value?: string;
+    onselect: (emoji: string) => void;
+    /** Catalogue to browse; defaults to the kit's EN+FR keyword set. */
+    groups?: readonly EmojiGroup[];
+    columns?: number;
+    /** Accessible name of the trigger and of the glyph grid. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    triggerClass?: string;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+};
+declare const EmojiPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;

package/dist/emoji.d.ts

@@ -0,0 +1,18 @@
+export interface EmojiEntry {
+    emoji: string;
+    /** Search keywords, lower-case, both languages. */
+    keys: string;
+}
+export interface EmojiGroup {
+    id: string;
+    /** Group glyph shown in the tab strip. */
+    icon: string;
+    /** Accessible name of the tab. Translate it by supplying your own `groups`. */
+    label: string;
+    entries: EmojiEntry[];
+}
+export declare const EMOJI_GROUPS: readonly EmojiGroup[];
+/** Entries matching a free-text query across every group; an empty query
+ *  returns nothing (the caller shows the grouped grid instead). Accent-
+ *  insensitive so « éléphant » and « elephant » both find the elephant. */
+export declare function searchEmoji(query: string, groups?: readonly EmojiGroup[]): EmojiEntry[];

package/dist/emoji.js

@@ -0,0 +1,286 @@
+const e = (emoji, keys) => ({ emoji, keys });
+export const EMOJI_GROUPS = [
+    {
+        id: 'smileys',
+        label: 'Smileys',
+        icon: '😀',
+        entries: [
+            e('😀', 'grin smile sourire content happy'),
+            e('😄', 'smile laugh rire joie'),
+            e('😂', 'joy tears laugh rire larmes'),
+            e('🙂', 'slight smile sourire'),
+            e('😉', 'wink clin oeil'),
+            e('😍', 'heart eyes love amour'),
+            e('😎', 'cool sunglasses lunettes'),
+            e('🤓', 'nerd glasses lunettes geek'),
+            e('🧐', 'monocle inspect examiner'),
+            e('🤔', 'think réfléchir penser'),
+            e('🤖', 'robot bot machine'),
+            e('👻', 'ghost fantôme'),
+            e('💀', 'skull crâne tête de mort'),
+            e('👽', 'alien extraterrestre'),
+            e('🤡', 'clown'),
+            e('😈', 'devil diable démon'),
+            e('🥳', 'party fête célébration'),
+            e('😴', 'sleep dormir zzz'),
+            e('🤯', 'mind blown explosion tête'),
+            e('🫠', 'melt fondre'),
+            e('🙃', 'upside down envers'),
+            e('😇', 'angel ange halo'),
+            e('🤠', 'cowboy'),
+            e('🥸', 'disguise déguisement moustache'),
+            e('😶‍🌫️', 'fog brouillard nuage'),
+        ],
+    },
+    {
+        id: 'people',
+        label: 'People',
+        icon: '🧑‍💻',
+        entries: [
+            e('🧑‍💻', 'technologist developer dev code ordinateur'),
+            e('👩‍💻', 'woman technologist développeuse'),
+            e('👨‍💻', 'man technologist développeur'),
+            e('🧑‍🔬', 'scientist science labo'),
+            e('🧑‍🚀', 'astronaut astronaute espace'),
+            e('🧑‍🎨', 'artist artiste peinture'),
+            e('🧑‍🍳', 'cook chef cuisine'),
+            e('🧑‍🏫', 'teacher prof enseignant'),
+            e('🧑‍⚕️', 'doctor médecin santé'),
+            e('🧑‍🚒', 'firefighter pompier'),
+            e('🕵️', 'detective détective enquête'),
+            e('🧙', 'wizard mage magicien sorcier'),
+            e('🧛', 'vampire'),
+            e('🧟', 'zombie'),
+            e('🦸', 'superhero héros super'),
+            e('🦹', 'villain méchant'),
+            e('🧞', 'genie génie'),
+            e('👑', 'crown couronne roi reine king queen'),
+            e('🎩', 'top hat chapeau haut de forme'),
+            e('🧢', 'cap casquette'),
+            e('👀', 'eyes yeux regarder'),
+            e('🧠', 'brain cerveau'),
+            e('💪', 'muscle biceps force'),
+            e('👋', 'wave hello bonjour salut'),
+            e('👍', 'thumbs up pouce ok'),
+            e('🙏', 'pray please merci thanks'),
+        ],
+    },
+    {
+        id: 'animals',
+        label: 'Animals',
+        icon: '🐙',
+        entries: [
+            e('🐙', 'octopus pieuvre poulpe'),
+            e('🦀', 'crab crabe rust'),
+            e('🐍', 'snake serpent python'),
+            e('🐧', 'penguin pingouin manchot linux'),
+            e('🐳', 'whale baleine docker'),
+            e('🦊', 'fox renard'),
+            e('🐺', 'wolf loup'),
+            e('🦁', 'lion'),
+            e('🐯', 'tiger tigre'),
+            e('🐻', 'bear ours'),
+            e('🐼', 'panda'),
+            e('🐨', 'koala'),
+            e('🐸', 'frog grenouille'),
+            e('🦉', 'owl hibou chouette'),
+            e('🦅', 'eagle aigle'),
+            e('🦜', 'parrot perroquet'),
+            e('🐝', 'bee abeille'),
+            e('🦋', 'butterfly papillon'),
+            e('🐢', 'turtle tortue'),
+            e('🦈', 'shark requin'),
+            e('🐬', 'dolphin dauphin'),
+            e('🦄', 'unicorn licorne'),
+            e('🐉', 'dragon'),
+            e('🦖', 'dinosaur dinosaure t-rex'),
+            e('🐱', 'cat chat'),
+            e('🐶', 'dog chien'),
+            e('🐭', 'mouse souris'),
+            e('🐹', 'hamster'),
+            e('🐰', 'rabbit lapin'),
+            e('🦔', 'hedgehog hérisson'),
+            e('🐘', 'elephant éléphant postgres'),
+            e('🦒', 'giraffe girafe'),
+            e('🐎', 'horse cheval'),
+            e('🐐', 'goat chèvre'),
+            e('🐔', 'chicken poule'),
+            e('🦆', 'duck canard'),
+            e('🐌', 'snail escargot lent'),
+            e('🕷️', 'spider araignée'),
+        ],
+    },
+    {
+        id: 'nature',
+        label: 'Nature',
+        icon: '🌿',
+        entries: [
+            e('🌿', 'herb plante feuille vert'),
+            e('🍀', 'clover trèfle chance luck'),
+            e('🌲', 'tree arbre sapin forêt'),
+            e('🌵', 'cactus'),
+            e('🌸', 'blossom fleur cerisier'),
+            e('🌻', 'sunflower tournesol'),
+            e('🌹', 'rose'),
+            e('🍄', 'mushroom champignon'),
+            e('🌍', 'earth terre monde globe'),
+            e('🌙', 'moon lune nuit'),
+            e('☀️', 'sun soleil jour'),
+            e('⭐', 'star étoile'),
+            e('🌟', 'glowing star étoile brillante'),
+            e('✨', 'sparkles étincelles magie'),
+            e('⚡', 'lightning éclair zap énergie'),
+            e('🔥', 'fire feu flamme hot'),
+            e('🌈', 'rainbow arc-en-ciel'),
+            e('☁️', 'cloud nuage'),
+            e('❄️', 'snowflake flocon neige froid'),
+            e('🌊', 'wave vague mer océan'),
+            e('🌋', 'volcano volcan'),
+            e('🪐', 'planet planète saturne'),
+            e('🚀', 'rocket fusée launch'),
+            e('🛸', 'ufo soucoupe ovni'),
+            e('☄️', 'comet comète'),
+        ],
+    },
+    {
+        id: 'objects',
+        label: 'Objects',
+        icon: '🔧',
+        entries: [
+            e('🔧', 'wrench clé outil tool'),
+            e('🔨', 'hammer marteau build'),
+            e('🛠️', 'tools outils'),
+            e('⚙️', 'gear engrenage réglages settings'),
+            e('🔑', 'key clé password'),
+            e('🔒', 'lock cadenas verrou sécurité'),
+            e('🛡️', 'shield bouclier protection'),
+            e('⚔️', 'swords épées'),
+            e('🧰', 'toolbox boîte à outils'),
+            e('🧪', 'test tube éprouvette labo'),
+            e('🔬', 'microscope'),
+            e('🔭', 'telescope télescope'),
+            e('💻', 'laptop ordinateur portable'),
+            e('🖥️', 'desktop écran ordinateur'),
+            e('⌨️', 'keyboard clavier'),
+            e('🖱️', 'mouse souris'),
+            e('📱', 'phone téléphone mobile'),
+            e('💾', 'floppy disquette save'),
+            e('🗄️', 'cabinet classeur base données database'),
+            e('📦', 'package paquet box colis'),
+            e('📚', 'books livres docs'),
+            e('📝', 'memo note écrire'),
+            e('📌', 'pin punaise épingle'),
+            e('🔖', 'bookmark marque-page'),
+            e('💡', 'bulb idée ampoule'),
+            e('🔦', 'flashlight lampe torche'),
+            e('🧭', 'compass boussole'),
+            e('⏰', 'alarm réveil horloge'),
+            e('⏱️', 'stopwatch chrono'),
+            e('🎯', 'target cible dart'),
+            e('🎲', 'dice dé hasard'),
+            e('🎮', 'game manette jeu'),
+            e('🎸', 'guitar guitare musique'),
+            e('🎵', 'music note musique'),
+            e('🎧', 'headphones casque'),
+            e('📷', 'camera appareil photo'),
+            e('🎬', 'clapper cinéma film'),
+            e('🧩', 'puzzle pièce'),
+            e('🪄', 'magic wand baguette magique'),
+            e('🧲', 'magnet aimant'),
+            e('💎', 'gem diamant'),
+            e('💰', 'money bag argent sac'),
+            e('🪙', 'coin pièce'),
+            e('🏆', 'trophy trophée coupe'),
+            e('🥇', 'medal médaille or'),
+            e('🎁', 'gift cadeau'),
+            e('🎈', 'balloon ballon'),
+            e('☕', 'coffee café'),
+            e('🍕', 'pizza'),
+            e('🍔', 'burger'),
+            e('🍩', 'donut beignet'),
+            e('🍪', 'cookie biscuit'),
+            e('🍺', 'beer bière'),
+            e('🍷', 'wine vin'),
+            e('🚑', 'ambulance secours urgence rescue'),
+            e('🚒', 'fire engine pompiers'),
+            e('🚗', 'car voiture'),
+            e('🚲', 'bike vélo'),
+            e('✈️', 'plane avion'),
+            e('🚂', 'train locomotive'),
+            e('⛵', 'sailboat voilier bateau'),
+            e('🏠', 'house maison home'),
+            e('🏭', 'factory usine'),
+            e('🏰', 'castle château'),
+            e('🗼', 'tower tour'),
+        ],
+    },
+    {
+        id: 'symbols',
+        label: 'Symbols',
+        icon: '❤️',
+        entries: [
+            e('❤️', 'heart coeur rouge love'),
+            e('🧡', 'orange heart coeur'),
+            e('💛', 'yellow heart coeur jaune'),
+            e('💚', 'green heart coeur vert'),
+            e('💙', 'blue heart coeur bleu'),
+            e('💜', 'purple heart coeur violet'),
+            e('🖤', 'black heart coeur noir'),
+            e('🤍', 'white heart coeur blanc'),
+            e('💯', 'hundred cent points'),
+            e('✅', 'check coche ok validé'),
+            e('❌', 'cross croix non erreur'),
+            e('⚠️', 'warning attention'),
+            e('🚫', 'forbidden interdit'),
+            e('♻️', 'recycle recyclage'),
+            e('🔴', 'red circle rond rouge'),
+            e('🟠', 'orange circle rond'),
+            e('🟡', 'yellow circle rond jaune'),
+            e('🟢', 'green circle rond vert'),
+            e('🔵', 'blue circle rond bleu'),
+            e('🟣', 'purple circle rond violet'),
+            e('⚫', 'black circle rond noir'),
+            e('⚪', 'white circle rond blanc'),
+            e('🟥', 'red square carré rouge'),
+            e('🟧', 'orange square carré'),
+            e('🟨', 'yellow square carré jaune'),
+            e('🟩', 'green square carré vert'),
+            e('🟦', 'blue square carré bleu'),
+            e('🟪', 'purple square carré violet'),
+            e('⬛', 'black square carré noir'),
+            e('⬜', 'white square carré blanc'),
+            e('🔶', 'orange diamond losange'),
+            e('🔷', 'blue diamond losange bleu'),
+            e('🔺', 'red triangle'),
+            e('♠️', 'spade pique'),
+            e('♣️', 'club trèfle'),
+            e('♥️', 'heart coeur cartes'),
+            e('♦️', 'diamond carreau'),
+            e('☮️', 'peace paix'),
+            e('☯️', 'yin yang'),
+            e('♾️', 'infinity infini'),
+            e('🔱', 'trident'),
+            e('⚓', 'anchor ancre'),
+            e('🏁', 'checkered flag drapeau arrivée'),
+            e('🚩', 'red flag drapeau rouge'),
+            e('🏴‍☠️', 'pirate flag drapeau pirate'),
+            e('🇫🇷', 'france drapeau flag'),
+            e('🇪🇺', 'europe eu drapeau flag'),
+            e('🇺🇸', 'usa états-unis flag drapeau'),
+            e('🇬🇧', 'uk royaume-uni flag drapeau'),
+            e('🇩🇪', 'germany allemagne flag drapeau'),
+            e('🇯🇵', 'japan japon flag drapeau'),
+        ],
+    },
+];
+const fold = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/** Entries matching a free-text query across every group; an empty query
+ *  returns nothing (the caller shows the grouped grid instead). Accent-
+ *  insensitive so « éléphant » and « elephant » both find the elephant. */
+export function searchEmoji(query, groups = EMOJI_GROUPS) {
+    const q = fold(query.trim());
+    if (!q)
+        return [];
+    const words = q.split(/\s+/);
+    return groups.flatMap((g) => g.entries.filter((x) => words.every((w) => fold(x.keys).includes(w))));
+}

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { default as ConfirmModal } from './components/molecules/ConfirmModal.sve
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 export { default as Field } from './components/molecules/Field.svelte';
 export { default as Fieldset } from './components/molecules/Fieldset.svelte';
@@ -80,9 +81,11 @@ export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
+export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';

package/dist/index.js

@@ -54,6 +54,7 @@ export { default as ConfirmModal } from './components/molecules/ConfirmModal.sve
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
+export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 // ---- molecules ----
 export { default as Field } from './components/molecules/Field.svelte';
@@ -90,10 +91,12 @@ export { default as WorkingDir } from './components/molecules/WorkingDir.svelte'
 // ---- organisms ----
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';
+export { sectionOptions } from './select-options';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';

package/dist/select-options.d.ts

@@ -0,0 +1,6 @@
+import type { SelectOption } from './components/atoms/Select.svelte';
+export type OptionSection = {
+    group?: string;
+    options: SelectOption[];
+};
+export declare function sectionOptions(options: SelectOption[]): OptionSection[];

package/dist/select-options.js

@@ -0,0 +1,22 @@
+export function sectionOptions(options) {
+    const sections = [];
+    const byGroup = new Map();
+    for (const option of options) {
+        if (option.group === undefined) {
+            const tail = sections.at(-1);
+            if (tail && tail.group === undefined)
+                tail.options.push(option);
+            else
+                sections.push({ options: [option] });
+            continue;
+        }
+        let section = byGroup.get(option.group);
+        if (!section) {
+            section = { group: option.group, options: [] };
+            byGroup.set(option.group, section);
+            sections.push(section);
+        }
+        section.options.push(option);
+    }
+    return sections;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.44.1",
+  "version": "0.46.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",