@joewinke/jatui 0.38.6 → 0.39.0

package/dist/components/NotificationCenter.svelte

@@ -0,0 +1,481 @@
+<!--
+  NotificationCenter — inbox panel: header (title, "N unread", Mark all read),
+  category tabs with count chips, and a date-grouped, keyboard-navigable list.
+
+  MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  Adapted from BoardUI's notification-center.tsx: the header / segmented tabs /
+  card layout, the item data model (category, status, avatar, actions[]),
+  controlled-or-uncontrolled tab, and "an action click marks the item read".
+  jatui additions: configurable `tabs`, Today / Yesterday / This week / Earlier
+  date headers (notificationCenter.ts), listNav roving focus with Enter → onOpen,
+  host callbacks onMarkRead / onMarkAllRead with optimistic local read state,
+  an announced unread marker, and the shared Empty / Avatar components.
+-->
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { createListNav } from '../actions/listNav';
+	import Empty from './basic/Empty.svelte';
+	import Avatar from './messaging/Avatar.svelte';
+	import { formatDateTime, formatRelativeTime } from '../utils/dateFormatters';
+	import {
+		DEFAULT_NOTIFICATION_TABS,
+		filterByTab,
+		groupNotificationsByDate,
+		isNotificationUnread,
+		tabCounts,
+		toTimestampMs,
+		unreadIds,
+		unreadSummary,
+		type NotificationAction,
+		type NotificationItem,
+		type NotificationStatus,
+		type NotificationTab
+	} from './notificationCenter';
+
+	interface Props {
+		items: NotificationItem[];
+		title?: string;
+		/** Tabs across the top. Default All / Mentions / System (by `category`). Pass [] to hide. */
+		tabs?: NotificationTab[];
+		/** Active tab id (bindable). Leave unbound for uncontrolled use with `defaultTab`. */
+		tab?: string;
+		defaultTab?: string;
+		onTabChange?: (tab: string) => void;
+		/** Enter on a focused item, or a click on it / its title. Also marks it read. */
+		onOpen?: (item: NotificationItem) => void;
+		/** Items became read (opened, or an action was used). */
+		onMarkRead?: (ids: string[]) => void;
+		/** "Mark all read". When omitted, `onMarkRead` receives every unread id instead. */
+		onMarkAllRead?: () => void;
+		/** Group the list under Today / Yesterday / This week / Earlier. Default true. */
+		groupByDate?: boolean;
+		/** Reference "now" for the date groups (tests, demos). Default: live clock. */
+		now?: Date | number;
+		/** Scroll-area cap — CSS length or px number. Default '32rem'. */
+		maxHeight?: string | number;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		class?: string;
+	}
+
+	let {
+		items,
+		title = 'Notifications',
+		tabs = DEFAULT_NOTIFICATION_TABS,
+		tab = $bindable(),
+		defaultTab,
+		onTabChange,
+		onOpen,
+		onMarkRead,
+		onMarkAllRead,
+		groupByDate = true,
+		now,
+		maxHeight = '32rem',
+		emptyTitle = "You're all caught up",
+		emptyDescription = 'New activity will show up here.',
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	// ---- tabs (controlled via bind:tab / tab, or uncontrolled) -------------
+	// svelte-ignore state_referenced_locally
+	let internalTab = $state(defaultTab ?? tabs[0]?.id ?? 'all');
+	const activeTabId = $derived.by(() => {
+		const want = tab ?? internalTab;
+		return tabs.some((t) => t.id === want) ? want : (tabs[0]?.id ?? want);
+	});
+	const activeTab = $derived(tabs.find((t) => t.id === activeTabId));
+	const counts = $derived(tabCounts(items, tabs));
+	const tabEls: HTMLButtonElement[] = $state([]);
+
+	function selectTab(id: string, focus = false) {
+		internalTab = id;
+		tab = id;
+		onTabChange?.(id);
+		if (focus) tabEls[tabs.findIndex((t) => t.id === id)]?.focus();
+	}
+
+	function onTabKeydown(e: KeyboardEvent, i: number) {
+		const n = tabs.length;
+		let next = -1;
+		if (e.key === 'ArrowRight') next = (i + 1) % n;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + n) % n;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = n - 1;
+		if (next < 0) return;
+		e.preventDefault();
+		selectTab(tabs[next].id, true);
+	}
+
+	// ---- read state (host-owned, optimistic locally) -----------------------
+	const localRead = new SvelteSet<string>();
+	const unread = $derived(unreadIds(items, localRead));
+
+	function markRead(item: NotificationItem) {
+		if (!isNotificationUnread(item, localRead)) return;
+		localRead.add(item.id);
+		onMarkRead?.([item.id]);
+	}
+
+	function markAllRead() {
+		const ids = unread;
+		if (ids.length === 0) return;
+		for (const id of ids) localRead.add(id);
+		if (onMarkAllRead) onMarkAllRead();
+		else onMarkRead?.(ids);
+	}
+
+	// ---- clock: relative times + date buckets refresh once a minute --------
+	let tick = $state(Date.now());
+	$effect(() => {
+		if (now !== undefined) return;
+		const t = setInterval(() => (tick = Date.now()), 60_000);
+		return () => clearInterval(t);
+	});
+	const refNow = $derived(now ?? tick);
+
+	const visible = $derived(filterByTab(items, activeTab));
+	const groups = $derived(
+		groupByDate
+			? groupNotificationsByDate(visible, refNow)
+			: [{ key: 'all', label: '', items: visible }]
+	);
+	const byId = $derived(new Map(items.map((it) => [it.id, it])));
+
+	// ---- list keyboard nav (listNav, scoped to the list) --------------------
+	let listEl: HTMLElement | null = $state(null);
+	let focusedId = $state<string | null>(null);
+	const firstId = $derived(groups[0]?.items[0]?.id ?? null);
+
+	const nav = createListNav({
+		getItems: () =>
+			listEl ? Array.from(listEl.querySelectorAll<HTMLElement>('[data-nav-id]')) : [],
+		onSelect: (el) => {
+			const item = byId.get(el.dataset.navId ?? '');
+			if (!item) return;
+			const link = el.querySelector<HTMLAnchorElement>('a[data-nc-open]');
+			if (link) link.click();
+			else open(item);
+		},
+		onFocusChange: (el, _i, id) => {
+			focusedId = id;
+			// Move DOM focus with the cursor (roving focus) — but never pull it
+			// off a control inside the item (an action button the user tabbed to).
+			const active = document.activeElement;
+			if (el && !el.contains(active) && listEl?.contains(active)) {
+				el.focus({ preventScroll: true });
+			}
+		},
+		wraparound: false,
+		focusedClass: 'nc-focused'
+	});
+
+	function onListKeydown(e: KeyboardEvent) {
+		// Escape belongs to the host (closing a popover, etc.).
+		if (e.key === 'Escape') return;
+		nav.handleKeydown(e);
+	}
+
+	function onItemFocusIn(id: string) {
+		if (nav.focusedId() === id || !listEl) return;
+		const els = Array.from(listEl.querySelectorAll<HTMLElement>('[data-nav-id]'));
+		const idx = els.findIndex((el) => el.dataset.navId === id);
+		if (idx >= 0) nav.focus(idx);
+	}
+
+	$effect(() => {
+		// Re-paint the cursor after the list changes (tab switch, new items).
+		void groups;
+		untrack(() => nav.refresh());
+	});
+
+	function open(item: NotificationItem) {
+		markRead(item);
+		onOpen?.(item);
+	}
+
+	function onCardClick(e: MouseEvent, item: NotificationItem) {
+		const t = e.target as HTMLElement | null;
+		if (t?.closest('button, a, input, select, textarea')) return;
+		const link = (e.currentTarget as HTMLElement).querySelector<HTMLAnchorElement>('a[data-nc-open]');
+		if (link) link.click();
+		else open(item);
+	}
+
+	function runAction(action: NotificationAction, item: NotificationItem) {
+		markRead(item);
+		action.onSelect(item);
+	}
+
+	const actionClass: Record<NonNullable<NotificationAction['variant']>, string> = {
+		primary: 'btn-primary',
+		secondary: 'btn-soft',
+		ghost: 'btn-ghost',
+		danger: 'btn-soft btn-error'
+	};
+
+	const statusTone: Record<NotificationStatus | 'neutral', string> = {
+		info: 'bg-info/15 text-info',
+		success: 'bg-success/15 text-success',
+		warning: 'bg-warning/15 text-warning',
+		error: 'bg-error/15 text-error',
+		neutral: 'bg-base-200 text-base-content/60'
+	};
+	const statusLabel: Record<NotificationStatus, string> = {
+		info: 'Info',
+		success: 'Success',
+		warning: 'Warning',
+		error: 'Error'
+	};
+
+	const cssLen = (v: string | number) => (typeof v === 'number' ? `${v}px` : v);
+	const iso = (ts: NotificationItem['timestamp']) => {
+		const ms = toTimestampMs(ts);
+		return Number.isNaN(ms) ? undefined : new Date(ms).toISOString();
+	};
+	const asDate = (ts: NotificationItem['timestamp']) => {
+		const ms = toTimestampMs(ts);
+		return Number.isNaN(ms) ? null : new Date(ms);
+	};
+	function relTime(ts: NotificationItem['timestamp'], _tick: number) {
+		return formatRelativeTime(asDate(ts));
+	}
+</script>
+
+<section
+	class="nc bg-base-100 border-base-300 rounded-box flex w-full max-w-md flex-col overflow-hidden border {className}"
+	aria-labelledby="{uid}-title"
+>
+	<header class="flex flex-col gap-3 p-4 pb-2">
+		<div class="flex items-start justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-0.5">
+				<h2 id="{uid}-title" class="text-base-content text-base font-semibold">{title}</h2>
+				<p class="text-base-content/60 text-sm" aria-live="polite">{unreadSummary(unread.length)}</p>
+			</div>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm"
+				onclick={markAllRead}
+				disabled={unread.length === 0}
+			>
+				Mark all read
+			</button>
+		</div>
+
+		{#if tabs.length > 1}
+			<div
+				role="tablist"
+				aria-label="Notification category"
+				class="bg-base-200 rounded-field flex w-full gap-1 p-1"
+			>
+				{#each tabs as t, i (t.id)}
+					{@const selected = t.id === activeTabId}
+					<button
+						bind:this={tabEls[i]}
+						type="button"
+						role="tab"
+						id="{uid}-tab-{t.id}"
+						aria-selected={selected}
+						aria-controls="{uid}-panel"
+						tabindex={selected ? 0 : -1}
+						class="nc-tab rounded-field flex flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-medium"
+						class:nc-tab-active={selected}
+						onclick={() => selectTab(t.id)}
+						onkeydown={(e) => onTabKeydown(e, i)}
+					>
+						{t.label}
+						<span
+							class="bg-base-content/10 text-base-content/70 rounded-selector min-w-5 px-1 text-xs tabular-nums"
+							>{counts[t.id] ?? 0}</span
+						>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</header>
+
+	<div class="bg-base-100 p-1.5 pt-0">
+		<div
+			id="{uid}-panel"
+			role={tabs.length > 1 ? 'tabpanel' : undefined}
+			aria-labelledby={tabs.length > 1 ? `${uid}-tab-${activeTabId}` : `${uid}-title`}
+			class="bg-base-200 rounded-box overflow-y-auto overscroll-contain p-2"
+			style:max-height={cssLen(maxHeight)}
+		>
+			{#if visible.length === 0}
+				<Empty title={emptyTitle} description={emptyDescription} glyph="check" size="sm" />
+			{:else}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div bind:this={listEl} class="flex flex-col gap-3" onkeydown={onListKeydown}>
+					{#each groups as group (group.key)}
+						<div class="flex flex-col gap-1.5">
+							{#if group.label}
+								<h3
+									id="{uid}-g-{group.key}"
+									class="text-base-content/50 px-1 text-xs font-semibold tracking-wide uppercase"
+								>
+									{group.label}
+								</h3>
+							{/if}
+							<ul
+								class="flex flex-col gap-1.5"
+								aria-labelledby={group.label ? `${uid}-g-${group.key}` : `${uid}-title`}
+							>
+								{#each group.items as item (item.id)}
+									{@const isUnread = isNotificationUnread(item, localRead)}
+									{@const status = item.status ?? 'neutral'}
+									{@const date = asDate(item.timestamp)}
+									<li>
+										<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+										<article
+											data-nav-id={item.id}
+											tabindex={(focusedId ?? firstId) === item.id ? 0 : -1}
+											aria-labelledby="{uid}-i-{item.id}"
+											aria-describedby={item.description ? `${uid}-d-${item.id}` : undefined}
+											class="nc-item bg-base-100 rounded-box relative flex cursor-pointer gap-3 p-3"
+											class:nc-unread={isUnread}
+											onfocusin={() => onItemFocusIn(item.id)}
+											onclick={(e) => onCardClick(e, item)}
+										>
+											{#if item.avatar}
+												<Avatar
+													name={item.avatar.name}
+													avatarUrl={item.avatar.src ?? null}
+													size="medium"
+												/>
+											{:else}
+												<span
+													class="flex size-10 shrink-0 items-center justify-center rounded-full {statusTone[status]}"
+												>
+													<svg
+														class="size-5"
+														viewBox="0 0 24 24"
+														fill="none"
+														stroke="currentColor"
+														stroke-width="1.8"
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														aria-hidden="true"
+													>
+														{#if status === 'success'}
+															<circle cx="12" cy="12" r="9" /><path d="m8.5 12.5 2.5 2.5 4.5-5" />
+														{:else if status === 'error'}
+															<circle cx="12" cy="12" r="9" /><path d="M12 7.5v5.5M12 16.5h.01" />
+														{:else if status === 'warning'}
+															<path d="M10.3 4.1 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 4.1a2 2 0 0 0-3.4 0Z" /><path d="M12 9.5v4M12 17h.01" />
+														{:else if status === 'info'}
+															<circle cx="12" cy="12" r="9" /><path d="M12 11v5.5M12 7.5h.01" />
+														{:else}
+															<path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0" />
+														{/if}
+													</svg>
+													{#if item.status}<span class="sr-only">{statusLabel[item.status]}:</span>{/if}
+												</span>
+											{/if}
+
+											<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+												<div class="flex min-w-0 items-start justify-between gap-3">
+													{#if item.href}
+														<a
+															id="{uid}-i-{item.id}"
+															data-nc-open
+															href={item.href}
+															tabindex="-1"
+															class="text-base-content min-w-0 text-sm font-medium hover:underline"
+															class:font-semibold={isUnread}
+															onclick={() => open(item)}>{item.title}</a
+														>
+													{:else}
+														<p
+															id="{uid}-i-{item.id}"
+															class="text-base-content min-w-0 text-sm font-medium"
+															class:font-semibold={isUnread}
+														>
+															{item.title}
+														</p>
+													{/if}
+													<span class="flex shrink-0 items-center gap-2">
+														<time
+															class="text-base-content/50 text-xs whitespace-nowrap tabular-nums"
+															datetime={iso(item.timestamp)}
+															title={date ? formatDateTime(date) : undefined}
+															>{relTime(item.timestamp, tick)}</time
+														>
+														{#if isUnread}
+															<span class="bg-primary size-2 rounded-full" aria-hidden="true"></span>
+															<span class="sr-only">Unread</span>
+														{/if}
+													</span>
+												</div>
+												{#if item.description}
+													<p id="{uid}-d-{item.id}" class="text-base-content/70 text-sm">
+														{item.description}
+													</p>
+												{/if}
+												{#if item.actions?.length}
+													<div class="mt-1.5 flex flex-wrap items-center gap-2">
+														{#each item.actions as action, ai (ai)}
+															<button
+																type="button"
+																class="btn btn-xs {actionClass[action.variant ?? 'secondary']}"
+																onclick={() => runAction(action, item)}
+															>
+																{action.label}
+															</button>
+														{/each}
+													</div>
+												{/if}
+											</div>
+										</article>
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+<style>
+	.nc-tab {
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+		transition:
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.nc-tab:hover {
+		color: var(--color-base-content);
+	}
+	.nc-tab-active {
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+	}
+	.nc-tab:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.nc-item {
+		border-radius: var(--jatui-radius-box);
+		transition: background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.nc-item:hover {
+		background: color-mix(in oklab, var(--color-base-100) 92%, var(--color-base-content));
+	}
+	.nc-item.nc-unread {
+		background: color-mix(in oklab, var(--color-base-100) 94%, var(--color-primary));
+	}
+	.nc-item:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.nc-tab,
+		.nc-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/NotificationCenter.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type NotificationItem, type NotificationTab } from './notificationCenter';
+interface Props {
+    items: NotificationItem[];
+    title?: string;
+    /** Tabs across the top. Default All / Mentions / System (by `category`). Pass [] to hide. */
+    tabs?: NotificationTab[];
+    /** Active tab id (bindable). Leave unbound for uncontrolled use with `defaultTab`. */
+    tab?: string;
+    defaultTab?: string;
+    onTabChange?: (tab: string) => void;
+    /** Enter on a focused item, or a click on it / its title. Also marks it read. */
+    onOpen?: (item: NotificationItem) => void;
+    /** Items became read (opened, or an action was used). */
+    onMarkRead?: (ids: string[]) => void;
+    /** "Mark all read". When omitted, `onMarkRead` receives every unread id instead. */
+    onMarkAllRead?: () => void;
+    /** Group the list under Today / Yesterday / This week / Earlier. Default true. */
+    groupByDate?: boolean;
+    /** Reference "now" for the date groups (tests, demos). Default: live clock. */
+    now?: Date | number;
+    /** Scroll-area cap — CSS length or px number. Default '32rem'. */
+    maxHeight?: string | number;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+}
+declare const NotificationCenter: import("svelte").Component<Props, {}, "tab">;
+type NotificationCenter = ReturnType<typeof NotificationCenter>;
+export default NotificationCenter;

package/dist/components/SearchDropdown.svelte

@@ -40,6 +40,8 @@
 		searchDebounceMs = 250,
 		onCreate,
 		createLabel = (q: string) => `Create "${q}"`,
+		option: optionSnippet,
+		searchLabel,
 	}: {
 		value: string;
 		groups: SearchDropdownGroup[];
@@ -92,8 +94,22 @@
 		onCreate?: (query: string) => void;
 		/** Label for the create row; receives the trimmed query. */
 		createLabel?: (query: string) => string;
+		/**
+		 * Custom body for each option row (replaces the default avatar, label and
+		 * check). The row itself (click, highlight, keyboard) stays the
+		 * component's; the snippet only draws what is inside it — e.g. a colour
+		 * dot, the label with the matched letters marked, and a status note.
+		 */
+		option?: Snippet<[SearchDropdownOption, { highlighted: boolean; selected: boolean }]>;
+		/** Accessible name for the search box and its list (defaults to the placeholder). */
+		searchLabel?: string;
 	} = $props();
 
+	// ARIA combobox wiring: the search box owns the listbox and points at the
+	// highlighted row, so arrows + Enter are announced without moving focus.
+	const listId = `sd-${Math.random().toString(36).slice(2, 9)}`;
+	const optionId = (i: number) => `${listId}-${i}`;
+
 	let open = $state(false);
 	let searchQuery = $state('');
 	let highlightedIndex = $state(-1);
@@ -166,10 +182,18 @@
 		highlightedIndex = idx >= 0 ? idx : 0;
 	});
 
+	// Embedded panels stay open after a pick (several picks in a row): hand
+	// focus back to the search box so the next one is typed straight away,
+	// even when the pick was a click that moved focus onto the row.
+	function refocusEmbedded() {
+		if (embedded) tick().then(() => searchInput?.focus());
+	}
+
 	function select(optionValue: string) {
 		open = false;
 		searchQuery = '';
 		onChange(optionValue);
+		refocusEmbedded();
 	}
 
 	function doCreate() {
@@ -178,6 +202,7 @@
 		open = false;
 		searchQuery = '';
 		onCreate(q);
+		refocusEmbedded();
 	}
 
 	function scrollHighlightedIntoView() {
@@ -202,6 +227,9 @@
 
 	function handleSearchKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
+			// An embedded panel with an empty search has nothing of its own to
+			// close: let Escape reach the host (e.g. close the dialog it sits in).
+			if (embedded && !searchQuery) return;
 			e.stopPropagation();
 			open = false;
 			searchQuery = '';
@@ -319,6 +347,12 @@
 				{placeholder}
 				class="sd-search-input"
 				autocomplete="off"
+				role="combobox"
+				aria-label={searchLabel ?? placeholder}
+				aria-expanded={open || embedded}
+				aria-controls={listId}
+				aria-autocomplete="list"
+				aria-activedescendant={(open || embedded) && highlightedIndex >= 0 && highlightedIndex <= maxIndex ? optionId(highlightedIndex) : undefined}
 			/>
 			{#if searchQuery}
 				<button type="button" aria-label="Clear search" onclick={() => { searchQuery = ''; searchInput?.focus(); }} class="sd-search-clear">
@@ -329,17 +363,21 @@
 	</div>
 
 	<!-- Options list -->
-	<ul class="sd-list" bind:this={optionListRef}>
+	<ul class="sd-list" bind:this={optionListRef} id={listId} role="listbox" aria-label={searchLabel ?? placeholder}>
 		{#if filteredGroups.length > 0}
 			{#each filteredGroups as group, _gi}
-				<li class="sd-group-label">
+				<li class="sd-group-label" role="presentation">
 					<span>{group.label}</span>
 				</li>
 				{#each group.options as option}
 					{@const flatIdx = flatOptions.indexOf(option)}
-					<li>
+					<li role="presentation">
 						<button
 							type="button"
+							id={optionId(flatIdx)}
+							role="option"
+							tabindex="-1"
+							aria-selected={flatIdx === highlightedIndex}
 							onclick={() => select(option.value)}
 							class="sd-option"
 							class:sd-option-selected={value === option.value}
@@ -351,7 +389,9 @@
 									: `border-left-color: ${colorFn(option.value)}; color: ${colorFn(option.value)};`
 								: ''}
 						>
-							{#if option.image}
+							{#if optionSnippet}
+								{@render optionSnippet(option, { highlighted: flatIdx === highlightedIndex, selected: value === option.value })}
+							{:else if option.image}
 								<img src={option.image} alt="" class="sd-avatar" />
 							{:else if option.icon}
 								<span class="sd-option-icon">{option.icon}</span>
@@ -360,12 +400,14 @@
 									{option.label.charAt(0).toUpperCase()}
 								</span>
 							{/if}
-							{#if variant === 'chip' && colorFn && colorFn(option.value)}
+							{#if optionSnippet}
+								<!-- the snippet drew the whole row body -->
+							{:else if variant === 'chip' && colorFn && colorFn(option.value)}
 								<span class="sd-option-chip">{option.label}</span>
 							{:else}
 								<span class="truncate">{option.label}</span>
 							{/if}
-							{#if value === option.value}
+							{#if !optionSnippet && value === option.value}
 								<svg class="sd-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
 							{/if}
 						</button>
@@ -373,13 +415,17 @@
 				{/each}
 			{/each}
 		{:else if !canCreate}
-			<li class="sd-empty">No matches for "{searchQuery}"</li>
+			<li class="sd-empty" role="presentation">No matches for "{searchQuery}"</li>
 		{/if}
 		{#if canCreate}
 			{@const createIdx = flatOptions.length}
-			<li>
+			<li role="presentation">
 				<button
 					type="button"
+					id={optionId(createIdx)}
+					role="option"
+					tabindex="-1"
+					aria-selected={highlightedIndex === createIdx}
 					onclick={doCreate}
 					class="sd-option sd-option-create"
 					class:sd-option-highlighted={highlightedIndex === createIdx}

package/dist/components/SearchDropdown.svelte.d.ts

@@ -61,6 +61,18 @@ type $$ComponentProps = {
     onCreate?: (query: string) => void;
     /** Label for the create row; receives the trimmed query. */
     createLabel?: (query: string) => string;
+    /**
+     * Custom body for each option row (replaces the default avatar, label and
+     * check). The row itself (click, highlight, keyboard) stays the
+     * component's; the snippet only draws what is inside it — e.g. a colour
+     * dot, the label with the matched letters marked, and a status note.
+     */
+    option?: Snippet<[SearchDropdownOption, {
+        highlighted: boolean;
+        selected: boolean;
+    }]>;
+    /** Accessible name for the search box and its list (defaults to the placeholder). */
+    searchLabel?: string;
 };
 declare const SearchDropdown: import("svelte").Component<$$ComponentProps, {
     openDropdown: () => void;