@getdom/studio 0.2.1 → 0.2.3

package/src/pages/data/agent-chat/DomAgentConversationList.vue

@@ -46,14 +46,15 @@ export const agentConversationListProps = {
 <script setup>
 import { computed, useId } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
-import DomStatusPill from '../../visual/status-pill/DomStatusPill.vue';
+import DomAvatar from '../../visual/avatar/DomAvatar.vue';
+import DomSkeleton from '../../visual/skeleton/DomSkeleton.vue';
 
 defineOptions({
 	__doc: {
 		nav: { section: 'ai' },
 		name: 'Agent conversation list',
 		tag: '<DomAgentConversationList>',
-		description: 'A reusable AI conversation navigation list with search, agent labels, unread counts, status pills, and active-thread selection.',
+		description: 'A reusable AI conversation navigation list with search, agent labels, unread counts, status indicators, and active-thread selection.',
 		icon: 'M5 6h14M5 12h14M5 18h8',
 		events: [
 			{ name: 'update:search', payload: 'string', description: 'Fired when the sidebar search changes.' },
@@ -148,20 +149,13 @@ function conversationSummary(conversation) {
 }
 
 /**
- * Returns a compact label for the agent avatar.
+ * Returns the agent name used for a conversation avatar.
  *
  * @param {Record<string, unknown>} conversation Conversation summary.
- * @returns {string} Initials.
+ * @returns {string} Agent name.
  */
-function agentInitials(conversation) {
-	const name = agentForConversation(conversation)?.name || 'AI';
-	return name
-		.split(/\s+/)
-		.filter(Boolean)
-		.slice(0, 2)
-		.map(firstCharacter)
-		.join('')
-		.toUpperCase() || 'AI';
+function agentName(conversation) {
+	return agentForConversation(conversation)?.name || 'AI';
 }
 
 /**
@@ -182,18 +176,18 @@ function updatedLabel(conversation) {
 }
 
 /**
- * Resolves a status pill tone for a conversation.
+ * Resolves the status dot class for a conversation.
  *
  * @param {Record<string, unknown>} conversation Conversation summary.
- * @returns {'neutral'|'info'|'success'|'warning'|'danger'} Status tone.
+ * @returns {string} Token-based dot classes.
  */
-function statusTone(conversation) {
+function statusDotClass(conversation) {
 	return {
-		streaming: 'info',
-		waiting: 'warning',
-		error: 'danger',
-		complete: 'success',
-	}[conversation.status] || 'neutral';
+		streaming: 'bg-primary animate-pulse',
+		waiting: 'bg-warning',
+		error: 'bg-destructive',
+		complete: 'bg-success',
+	}[conversation.status] || 'bg-muted-fg/50';
 }
 
 /**
@@ -218,37 +212,27 @@ function conversationMatchesQuery(conversation, query) {
 		.toLowerCase()
 		.includes(query);
 }
-
-/**
- * Returns the first character from a word.
- *
- * @param {string} value Source word.
- * @returns {string} First character.
- */
-function firstCharacter(value) {
-	return value.charAt(0);
-}
 </script>
 
 <template>
 	<aside class="flex h-full min-h-0 w-full min-w-0 flex-col bg-canvas text-canvas-fg">
-		<header class="shrink-0 border-b border-border bg-secondary/25 p-3">
-			<div class="flex items-center justify-between gap-3">
-				<h2 class="truncate text-sm font-semibold text-canvas-fg">{{ title }}</h2>
+		<header class="shrink-0 px-3 pb-2">
+			<div class="flex h-14 items-center justify-between gap-3 px-1">
+				<h2 class="truncate text-sm font-semibold tracking-tight text-canvas-fg">{{ title }}</h2>
 				<div class="flex shrink-0 items-center gap-1">
 					<slot name="actions" :conversations="conversations" />
 					<DomIconButton
 						v-if="showNewButton"
 						label="New conversation"
 						size="sm"
-						variant="secondary"
+						variant="ghost"
 						icon="M12 5v14M5 12h14"
 						@click="createConversation"
 					/>
 				</div>
 			</div>
 			<label :for="searchId" class="sr-only">Search conversations</label>
-			<div class="mt-3 flex items-center gap-2 rounded-md border border-border bg-canvas px-3 py-2">
+			<div class="skin-input flex items-center gap-2 px-2.5 py-1.5 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30">
 				<svg viewBox="0 0 24 24" class="size-4 shrink-0 text-muted-fg" fill="none" aria-hidden="true">
 					<path d="M11 5a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm4.5 10.5L20 20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
 				</svg>
@@ -263,18 +247,19 @@ function firstCharacter(value) {
 			</div>
 		</header>
 
-		<div class="min-h-0 flex-1 overflow-y-auto p-2">
-			<div v-if="loading" class="space-y-2">
-				<div v-for="index in 5" :key="index" class="h-20 animate-pulse rounded-lg border border-border bg-secondary/35"></div>
+		<div class="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+			<div v-if="loading" class="space-y-1">
+				<div v-for="index in 5" :key="index" class="flex gap-2.5 px-2.5 py-2.5">
+					<DomSkeleton variant="circle" width="2rem" height="2rem" class="shrink-0" />
+					<DomSkeleton class="flex-1" variant="text" :lines="2" />
+				</div>
 			</div>
 
 			<slot v-else-if="!filteredConversations.length" name="empty">
-				<div class="grid min-h-40 place-items-center rounded-lg border border-dashed border-border p-4 text-center">
-					<p class="text-sm leading-6 text-muted-fg">{{ emptyText }}</p>
-				</div>
+				<p class="px-3 py-8 text-center text-sm leading-6 text-muted-fg">{{ emptyText }}</p>
 			</slot>
 
-			<div v-else class="space-y-1">
+			<div v-else class="space-y-0.5">
 				<slot
 					v-for="conversation in filteredConversations"
 					:key="conversation.id"
@@ -285,27 +270,38 @@ function firstCharacter(value) {
 				>
 					<button
 						type="button"
-						class="w-full rounded-lg border p-3 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-						:class="isActiveConversation(conversation)
-							? 'border-primary/40 bg-primary/10 shadow-sm'
-							: 'border-transparent hover:border-border hover:bg-secondary/45'"
+						class="w-full rounded-lg px-2.5 py-2.5 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+						:class="isActiveConversation(conversation) ? 'bg-secondary' : 'hover:bg-secondary/50'"
+						:aria-current="isActiveConversation(conversation) ? 'true' : undefined"
 						@click="selectConversation(conversation)"
 					>
-						<div class="flex items-start gap-3">
-							<div class="grid size-9 shrink-0 place-items-center rounded-full border border-border bg-canvas text-xs font-semibold text-muted-fg">
-								{{ agentInitials(conversation) }}
-							</div>
+						<div class="flex items-start gap-2.5">
+							<span class="relative shrink-0">
+								<DomAvatar
+									size="sm"
+									shape="rounded"
+									:src="agentForConversation(conversation)?.avatarUrl || ''"
+									:name="agentName(conversation)"
+								/>
+								<span
+									class="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full ring-2"
+									:class="[statusDotClass(conversation), isActiveConversation(conversation) ? 'ring-secondary' : 'ring-canvas']"
+									:title="conversation.status || 'idle'"
+									aria-hidden="true"
+								></span>
+							</span>
 							<div class="min-w-0 flex-1">
-								<div class="flex min-w-0 items-start justify-between gap-2">
-									<p class="truncate text-sm font-semibold text-canvas-fg">{{ conversationTitle(conversation) }}</p>
+								<div class="flex min-w-0 items-baseline justify-between gap-2">
+									<p class="truncate text-sm font-medium text-canvas-fg">{{ conversationTitle(conversation) }}</p>
 									<span class="shrink-0 text-[11px] text-muted-fg">{{ updatedLabel(conversation) }}</span>
 								</div>
-								<p class="mt-1 line-clamp-2 text-xs leading-5 text-muted-fg">{{ conversationSummary(conversation) }}</p>
-								<div class="mt-2 flex items-center justify-between gap-2">
-									<DomStatusPill size="sm" :tone="statusTone(conversation)" variant="soft">{{ conversation.status || 'idle' }}</DomStatusPill>
+								<div class="mt-0.5 flex min-w-0 items-center gap-2">
+									<p class="min-w-0 flex-1 truncate text-xs leading-5 text-muted-fg">
+										<span class="sr-only">{{ conversation.status || 'idle' }}. </span>{{ conversationSummary(conversation) }}
+									</p>
 									<span
 										v-if="conversation.unreadCount"
-										class="grid min-w-5 place-items-center rounded-full bg-primary px-1.5 py-0.5 text-[11px] font-semibold text-primary-fg"
+										class="grid h-4.5 min-w-4.5 shrink-0 place-items-center rounded-full bg-primary px-1 text-[10px] font-semibold text-primary-fg"
 									>
 										{{ conversation.unreadCount }}
 									</span>

package/src/pages/data/month-calendar/DomMonthCalendar.vue

@@ -264,8 +264,8 @@ export const monthCalendarProps = {
 		 * @param {string} value Requested indicator style.
 		 * @returns {boolean} Whether the indicator is supported.
 		 */
-		validator: (value) => ['cell', 'circle', 'none'].includes(value),
-		_edit: { group: 'Styling', options: ['cell', 'circle', 'none'], description: 'Highlight today with a cell outline, a coloured circle behind the date, or no visual indicator.' },
+		validator: (value) => ['cell', 'circle', 'both', 'none'].includes(value),
+		_edit: { group: 'Styling', options: ['cell', 'circle', 'both', 'none'], description: 'Highlight today with a cell outline, a coloured circle behind the date, both, or no visual indicator.' },
 	},
 	/**
 	 * @type {MonthCalendarDayClass}
@@ -273,7 +273,7 @@ export const monthCalendarProps = {
 	todayDateClass: {
 		type: [String, Array, Object, Function],
 		default: 'bg-primary text-primary-fg',
-		_edit: { group: 'Styling', description: 'Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle.' },
+		_edit: { group: 'Styling', description: 'Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle or both.' },
 	},
 	/**
 	 * @type {MonthCalendarDayClass}
@@ -1632,7 +1632,7 @@ function onDayClick(cell, event) {
 							v-if="hasRowRail"
 							role="rowheader"
 							:aria-label="rowHeaderLabelFor(week)"
-							class="dom-month-calendar__row-rail flex gap-3 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-fg"
+							class="dom-month-calendar__row-rail flex gap-3 px-3 py-[var(--dom-month-calendar-row-rail-padding)] text-xs font-semibold uppercase tracking-wide text-muted-fg"
 							:class="[
 								week.index > 0 && 'border-t border-border',
 								section.continuous ? 'bg-canvas' : 'bg-secondary/35',
@@ -1648,7 +1648,7 @@ function onDayClick(cell, event) {
 									{{ label }}
 								</span>
 							</div>
-							<span v-if="showWeekNumbers" class="text-base leading-none tabular-nums">{{ week.weekNumber }}</span>
+							<span v-if="showWeekNumbers" class="order-[var(--dom-month-calendar-week-number-order)] inline-flex size-7 shrink-0 items-center justify-center text-base leading-none tabular-nums">{{ week.weekNumber }}</span>
 						</div>
 						<component
 							:is="clickable ? 'button' : 'div'"
@@ -1681,7 +1681,7 @@ function onDayClick(cell, event) {
 								clickable && !cell.disabled && hoverableDays && 'hover:bg-secondary/50',
 								clickable && cell.disabled && 'cursor-not-allowed opacity-55',
 								!clickable && 'cursor-default',
-								cell.today && !cell.hidden && todayIndicator === 'cell' && 'ring-2 ring-inset ring-ring/40',
+								cell.today && !cell.hidden && (todayIndicator === 'cell' || todayIndicator === 'both') && 'ring-2 ring-inset ring-ring/40',
 								dayClassFor(cell),
 								dragAndDrop && dragState.active && canDropOnCell(cell) && !isDropTarget(cell) && 'bg-primary/5',
 								dragAndDrop && isDropTarget(cell) && 'bg-primary/10 ring-2 ring-inset ring-ring/60',
@@ -1698,10 +1698,9 @@ function onDayClick(cell, event) {
 							<template v-if="!cell.hidden">
 								<div class="flex items-center justify-between gap-2">
 									<span
-										class="text-base font-bold leading-none tabular-nums"
+										class="inline-flex size-7 shrink-0 items-center justify-center rounded-full text-base font-bold leading-none tabular-nums"
 										:class="[
-											todayIndicator === 'circle' && 'inline-flex size-7 shrink-0 items-center justify-center rounded-full',
-											cell.today && todayIndicator === 'circle' && resolveDayClass(todayDateClass, cell),
+											cell.today && (todayIndicator === 'circle' || todayIndicator === 'both') && resolveDayClass(todayDateClass, cell),
 										]"
 									>{{ cell.day }}</span>
 									<span v-if="showDayNames" class="text-base lowercase leading-none tabular-nums">{{ cell.weekday }}</span>

package/src/pages/forms/_shared/DomOptionStatus.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+	as: { type: String, default: 'div' },
+	loading: Boolean,
+	hasMore: Boolean,
+	empty: Boolean,
+	emptyText: { type: String, default: 'No options found' },
+});
+defineEmits(['load-more']);
+</script>
+
+<template>
+	<component :is="as" v-if="loading || hasMore || empty" role="presentation" class="px-3 py-3 text-center text-sm text-muted-fg">
+		<span v-if="loading" role="status">Loading options…</span>
+		<button v-else-if="hasMore" type="button" class="rounded-lg px-3 py-1 underline underline-offset-4 focus-visible:ring-2 focus-visible:ring-ring" @mousedown.prevent @click.stop="$emit('load-more')">Load more options</button>
+		<span v-else role="status">{{ emptyText }}</span>
+	</component>
+</template>

package/src/pages/forms/_shared/useOptionMenu.js

@@ -1,5 +1,6 @@
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
+/** Manage transient token-query navigation independently from committed selections. */
 export function useOptionMenu(items, options = {}) {
 	const {
 		emitQuery,
@@ -11,6 +12,9 @@ export function useOptionMenu(items, options = {}) {
 	const isOpen = ref(false);
 	const activeIndex = ref(0);
 	const trimmedQuery = computed(() => query.value.trim());
+	let closeTimer = null;
+	onBeforeUnmount(() => clearTimeout(closeTimer));
+	watch(isOpen, (open) => { if (open) clearTimeout(closeTimer); });
 
 	watch(query, (value) => {
 		emitQuery?.(value);
@@ -24,28 +28,39 @@ export function useOptionMenu(items, options = {}) {
 		}
 	});
 
+	/** Wrap keyboard navigation within the currently available entries. */
 	function wrapIndex(index) {
 		if (!items.value.length) return 0;
 		return (index + items.value.length) % items.value.length;
 	}
 
+	/** Open the menu and move its active descendant by one step. */
 	function move(delta) {
 		isOpen.value = true;
 		activeIndex.value = wrapIndex(activeIndex.value + delta);
 	}
 
+	/** Reset transient input without changing any committed tokens. */
 	function reset() {
+		clearTimeout(closeTimer);
 		query.value = '';
 		isOpen.value = false;
 		activeIndex.value = 0;
 	}
 
+	/** Defer blur closure to allow a pointer-driven option click to commit. */
 	function closeSoon() {
-		window.setTimeout(() => {
+		clearTimeout(closeTimer);
+		closeTimer = window.setTimeout(() => {
 			isOpen.value = false;
 		}, closeDelay);
 	}
 
+	/** Cancel an outstanding blur when focus immediately returns to the input. */
+	function cancelClose() {
+		clearTimeout(closeTimer);
+	}
+
 	return {
 		query,
 		isOpen,
@@ -55,5 +70,6 @@ export function useOptionMenu(items, options = {}) {
 		move,
 		reset,
 		closeSoon,
+		cancelClose,
 	};
 }

package/src/pages/forms/_shared/useOptionPaging.js

@@ -0,0 +1,42 @@
+import { nextTick, watch } from 'vue';
+import { booleanProp } from './options.js';
+
+/**
+ * Share incremental-list requests without owning the application's cursor or fetch.
+ * One automatic request is allowed per query/result length; the explicit button
+ * can retry a failed page. Checking after render also fills short scroll viewports.
+ *
+ * @param {Object} props Reactive loading and hasMore props.
+ * @param {Function} emit Component event emitter.
+ * @param {Object} state Refs for list, options, query and open state.
+ * @returns {{ onScroll: Function, requestMore: Function }} Paging event handlers.
+ */
+export function useOptionPaging(props, emit, { list, options, query, open }) {
+	let requestedKey = null;
+
+	/** Request the next application-owned page, suppressing duplicate automatic requests. */
+	function requestMore(force = false) {
+		if (!open.value || booleanProp(props.loading) || !booleanProp(props.hasMore)) return;
+		const key = `${query.value}\u0000${options.value.length}`;
+		if (!force && requestedKey === key) return;
+		requestedKey = key;
+		emit('load-more', { query: query.value });
+	}
+
+	/** Ask for another page only while the open list is near its scroll boundary. */
+	function checkBoundary() {
+		const element = list.value;
+		if (!element || element.clientHeight <= 0) return;
+		if (element.scrollHeight - element.scrollTop - element.clientHeight <= 64) requestMore();
+	}
+
+	/** Forward scroll details for custom previews, then check the shared paging threshold. */
+	function onScroll(event) {
+		emit('list-scroll', event);
+		checkBoundary();
+	}
+
+	watch(query, () => { requestedKey = null; });
+	watch([open, () => props.loading, () => props.hasMore, () => options.value.length], () => nextTick(checkBoundary));
+	return { onScroll, requestMore };
+}

package/src/pages/forms/_shared/useSelectedOptions.js

@@ -0,0 +1,25 @@
+import { computed, shallowRef, watch } from 'vue';
+import { normalizeOption } from './options.js';
+
+/**
+ * Retain only selected records when a remote query replaces the current page.
+ * Applications can supply selectedOptions for initial values outside loaded pages;
+ * this does not insert, reorder or seek options in the application's result set.
+ *
+ * @param {import('vue').ComputedRef<Array>} options Current normalized page records.
+ * @param {import('vue').ComputedRef<Array>} values Committed selected values.
+ * @param {Function} supplied Getter for optional externally resolved selected records.
+ * @returns {import('vue').ComputedRef<Array>} Resolved selections in model order.
+ */
+export function useSelectedOptions(options, values, supplied = () => []) {
+	const cache = shallowRef(new Map());
+	watch([options, values, supplied], () => {
+		const records = new Map(cache.value);
+		for (const row of [...supplied(), ...options.value]) {
+			const option = normalizeOption(row, { allowEmptyValue: true });
+			if (option) records.set(String(option.value), option);
+		}
+		cache.value = new Map(values.value.map((value) => [String(value), records.get(String(value))]));
+	}, { immediate: true, flush: 'sync' });
+	return computed(() => values.value.map((value) => cache.value.get(String(value)) || { value, label: String(value ?? '') }));
+}

package/src/pages/forms/autocomplete/DomAutocomplete.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { computed, onMounted, ref, shallowRef, useId, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, shallowRef, useId, watch } from 'vue';
 import { resolveFloatingTeleportTarget } from '../../lib/vue/floatingTeleportTarget.js';
 import DomFieldLoadingSpinner from '../_shared/DomFieldLoadingSpinner.vue';
-import { booleanProp, normalizeOption } from '../_shared/options.js';
+import { booleanProp, normalizeOption, searchableText } from '../_shared/options.js';
+import DomOptionStatus from '../_shared/DomOptionStatus.vue';
+import { useOptionPaging } from '../_shared/useOptionPaging.js';
 import DomField from '../field/DomField.vue';
 import { fieldProps } from '../field/fieldProps.js';
 import { useField } from '../field/useField.js';
@@ -15,12 +17,15 @@ defineOptions({
 		tag: '<DomAutocomplete>',
 		description: 'Free-text autocomplete with optional suggestions, floating positioning, keyboard navigation, and query events for async lookups.',
 		slots: [
-			{ name: 'item', payload: '{ item, index }', description: 'Replaces the rendering of each suggestion.' },
+			{ name: 'item', payload: '{ item, index, selected, query }', description: 'Replaces each suggestion body without replacing the selection checkmark.' },
 		],
 		events: [
 			{ name: 'query', payload: '(query: string)', description: 'Fired as the user types. Use it to fetch or replace suggestions.' },
 			{ name: 'select', payload: '({ item, value, label, text, query })', description: 'Fired when a suggestion is chosen. item is the original option object.' },
 			{ name: 'commit', payload: '({ value, label, custom })', description: 'Fired when the current text is committed with Enter.' },
+			{ name: 'load-more', payload: '{ query }', description: 'Request the next page when hasMore is true.' },
+			{ name: 'open', description: 'Fired when suggestions open.' },
+			{ name: 'close', description: 'Fired when suggestions close.' },
 		],
 	},
 });
@@ -68,11 +73,16 @@ const props = defineProps({
 		default: false,
 		_edit: { group: 'Control props', description: 'Show an inline spinner while async suggestions are being fetched.' },
 	},
+	filterOptions: { type: [Boolean, String], default: true },
+	hasMore: { type: [Boolean, String], default: false },
 });
-const emit = defineEmits(['update:modelValue', 'query', 'select', 'commit', 'focus', 'blur']);
+const emit = defineEmits(['update:modelValue', 'query', 'select', 'commit', 'load-more', 'list-scroll', 'open', 'close', 'focus', 'blur']);
 
 const root = ref(null);
 const inputEl = ref(null);
+const list = ref(null);
+const query = ref('');
+const isOpen = ref(false);
 const isMounted = ref(false);
 const teleportTarget = shallowRef(null);
 const currentText = ref('');
@@ -80,6 +90,10 @@ const field = useField(props, emit, { idPrefix: 'dom-autocomplete' });
 const isLoading = computed(() => booleanProp(props.loading, false));
 
 const items = computed(() => props.options.map((option) => normalizeOption(option)).filter(Boolean));
+const hasMoreOptions = computed(() => booleanProp(props.hasMore));
+const filterLocally = computed(() => booleanProp(props.filterOptions, true));
+const matchingOptions = computed(() => items.value.filter((option) => !filterLocally.value || searchableText(option, ['label', 'value', 'description', 'group', 'email', 'role']).includes(query.value.trim().toLowerCase())));
+const paging = useOptionPaging(props, emit, { list, options: items, query, open: isOpen });
 
 /**
  * Synchronize the free-text input from the Vue model value.
@@ -94,13 +108,17 @@ function syncInputFromModel() {
 onMounted(async () => {
 	teleportTarget.value = resolveFloatingTeleportTarget(root.value);
 	isMounted.value = true;
+	await nextTick();
 	await import('../../lib/headless/autocomplete.js');
 	syncInputFromModel();
 	root.value?.addEventListener('dom:input', (event) => {
 		currentText.value = event.detail.value;
 		field.onInput(event.detail.value);
 	});
-	root.value?.addEventListener('dom:query', (event) => emit('query', event.detail.query));
+	root.value?.addEventListener('dom:query', (event) => { query.value = event.detail.query; emit('query', event.detail.query); });
+	root.value?.addEventListener('dom:open', () => { isOpen.value = true; emit('open'); });
+	root.value?.addEventListener('dom:close', () => { isOpen.value = false; emit('close'); });
+	root.value?.addEventListener('dom:load-more', () => paging.requestMore());
 	root.value?.addEventListener('dom:select', (event) => {
 		const index = Number(event.detail.option?.dataset.index);
 		const item = Number.isFinite(index) ? items.value[index] : null;
@@ -131,6 +149,8 @@ watch(field.value, syncInputFromModel);
 			:value="field.value.value ?? null"
 			:placement="placement"
 			:floating-mode="floatingMode"
+			:filter-options="String(filterLocally)"
+			:has-more="hasMoreOptions ? '' : null"
 			class="relative block"
 		>
 			<input
@@ -152,7 +172,7 @@ watch(field.value, syncInputFromModel);
 				type="button"
 				class="absolute right-1 top-1 inline-flex size-8 items-center justify-center rounded-md text-muted-fg transition hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed disabled:opacity-50"
 				aria-label="Show suggestions"
-				:disabled="props.disabled || props.readOnly || undefined"
+				:disabled="field.disabled.value || field.readOnly.value || undefined"
 			>
 				<svg viewBox="0 0 20 20" class="size-4" fill="none" aria-hidden="true">
 					<path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
@@ -161,6 +181,10 @@ watch(field.value, syncInputFromModel);
 			<Teleport :to="teleportTarget || 'body'" :disabled="!isMounted || !teleportTarget">
 				<ul
 					:id="listId"
+					ref="list"
+					hidden
+					:aria-busy="isLoading"
+					@scroll="paging.onScroll"
 					class="dom-floating-transition skin-popover z-50 max-h-[min(15rem,var(--dom-floating-available-height))] overflow-auto rounded-2xl p-1"
 				>
 					<li
@@ -169,10 +193,14 @@ watch(field.value, syncInputFromModel);
 						:data-value="option.value"
 						:data-label="option.label"
 						:data-index="index"
-						class="cursor-pointer rounded-xl px-3 py-2 text-sm text-canvas-fg transition hover:bg-accent hover:text-accent-fg data-[active]:bg-accent data-[active]:text-accent-fg aria-selected:bg-accent aria-selected:text-accent-fg"
+						:data-search="searchableText(option, ['label', 'value', 'description', 'group', 'email', 'role'])"
+						:aria-disabled="option.disabled || undefined"
+						class="flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm text-canvas-fg transition hover:bg-accent hover:text-accent-fg data-[active]:bg-accent data-[active]:text-accent-fg aria-selected:bg-accent aria-selected:text-accent-fg aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
 					>
-						<slot name="item" :item="option" :index="index">{{ option.label }}</slot>
+						<span class="min-w-0 flex-1"><slot name="item" :item="option" :index="index" :selected="option.label === field.value.value" :query="query">{{ option.label }}</slot></span>
+						<svg v-if="option.label === field.value.value" viewBox="0 0 20 20" class="size-4 shrink-0" fill="none" aria-hidden="true"><path d="M4.5 10.5 8 14l7.5-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
 					</li>
+					<DomOptionStatus as="li" :loading="isLoading" :has-more="hasMoreOptions" :empty="!matchingOptions.length" @load-more="paging.requestMore(true)" />
 				</ul>
 			</Teleport>
 		</dom-autocomplete>