@getdom/studio 0.2.1 → 0.2.3

package/src/pages/forms/combobox/DomCombobox.vue

@@ -1,8 +1,11 @@
 <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 { useSelectedOptions } from '../_shared/useSelectedOptions.js';
 import DomField from '../field/DomField.vue';
 import { fieldProps } from '../field/fieldProps.js';
 import { useField } from '../field/useField.js';
@@ -15,11 +18,15 @@ defineOptions({
 		tag: '<DomCombobox>',
 		description: 'Select-like combobox with a styled input, floating list, keyboard navigation, and query events for async lookups.',
 		slots: [
-			{ name: 'item', payload: '{ item, index }', description: 'Replaces the rendering of each option.' },
+			{ name: 'item', payload: '{ item, index, selected, query }', description: 'Replaces each option body. The control keeps the selected checkmark.' },
 		],
 		events: [
 			{ name: 'query', payload: '(query: string)', description: 'Fired as the user types. Use it to fetch or replace options.' },
 			{ name: 'select', payload: '({ item, value, label })', description: 'Fired when an option is selected. item is the original option object.' },
+			{ name: 'list-scroll', payload: '(event: Event)', description: 'Fired when the floating option list scrolls.' },
+			{ name: 'load-more', payload: '{ query }', description: 'Request the next page when hasMore is true. The parent owns fetching and appending options.' },
+			{ name: 'open', description: 'Fired when the options open with an empty transient query.' },
+			{ name: 'close', description: 'Fired when the options close.' },
 		],
 	},
 });
@@ -72,11 +79,17 @@ const props = defineProps({
 		default: false,
 		_edit: { group: 'Control props', description: 'Show an inline spinner while async options are being fetched.' },
 	},
+	filterOptions: { type: [Boolean, String], default: true },
+	hasMore: { type: [Boolean, String], default: false },
+	selectedOptions: { type: Array, default: () => [] },
 });
-const emit = defineEmits(['update:modelValue', 'query', 'select', 'focus', 'blur']);
+const emit = defineEmits(['update:modelValue', 'query', 'select', 'list-scroll', 'load-more', '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 field = useField(props, emit, { idPrefix: 'dom-combobox' });
@@ -96,6 +109,11 @@ const inputPaddingClass = computed(() => {
 const loadingPositionClass = computed(() => (isClearable.value && hasSelection.value ? 'right-[4.25rem]' : 'right-9'));
 
 const optionList = computed(() => props.options.map((option) => normalizeOption(option)).filter(Boolean));
+const selectedItems = useSelectedOptions(optionList, computed(() => [field.value.value]), () => props.selectedOptions);
+const hasMoreOptions = computed(() => booleanProp(props.hasMore));
+const filterLocally = computed(() => booleanProp(props.filterOptions, true));
+const matchingOptions = computed(() => optionList.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: optionList, query, open: isOpen });
 
 /**
  * Resolve the user-facing text shown for a committed value.
@@ -104,7 +122,7 @@ const optionList = computed(() => props.options.map((option) => normalizeOption(
  * @returns {string|number} Option label or raw value fallback.
  */
 function displayForValue(value) {
-	const selected = optionList.value.find((option) => String(option.value ?? option.label) === String(value));
+	const selected = selectedItems.value.find((option) => String(option.value) === String(value));
 	return selected ? (selected.label ?? selected.value ?? '') : (value ?? '');
 }
 
@@ -133,6 +151,7 @@ function syncInputAfterOptionsChange() {
 onMounted(async () => {
 	teleportTarget.value = resolveFloatingTeleportTarget(root.value);
 	isMounted.value = true;
+	await nextTick();
 	await import('../../lib/headless/combobox.js');
 	syncInputFromModel();
 	root.value?.addEventListener('dom:change', (event) => field.onInput(event.detail.value));
@@ -146,8 +165,12 @@ onMounted(async () => {
 		});
 	});
 	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());
 });
 
 watch(field.value, syncInputFromModel);
@@ -159,6 +182,7 @@ watch(optionList, syncInputAfterOptionsChange);
  * @returns {void}
  */
 function clearSelection() {
+	if (field.disabled.value || field.readOnly.value) return;
 	field.setValue('');
 	if (root.value) root.value.value = '';
 	if (inputEl.value) inputEl.value.value = '';
@@ -173,8 +197,11 @@ function clearSelection() {
 		<dom-combobox
 			ref="root"
 			:data-menu-id="listId"
+			:value-label="displayForValue(field.value.value)"
 			:placement="placement"
 			:floating-mode="floatingMode"
+			:filter-options="String(filterLocally)"
+			:has-more="hasMoreOptions ? '' : null"
 			class="relative block"
 		>
 			<input
@@ -197,6 +224,7 @@ function clearSelection() {
 				type="button"
 				class="absolute right-9 top-1 inline-flex size-8 items-center justify-center rounded-full text-muted-fg transition hover:bg-secondary hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
 				aria-label="Clear selection"
+				:disabled="field.disabled.value || field.readOnly.value"
 				@click.stop="clearSelection"
 				@mousedown.prevent
 			>
@@ -210,6 +238,7 @@ function clearSelection() {
 				type="button"
 				class="absolute right-1 top-1 inline-flex size-8 items-center justify-center rounded-full text-muted-fg transition hover:bg-secondary hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
 				aria-label="Show options"
+				:disabled="field.disabled.value || field.readOnly.value"
 			>
 				<svg viewBox="0 0 20 20" class="size-4" fill="none">
 					<path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
@@ -218,7 +247,11 @@ function clearSelection() {
 			<Teleport :to="teleportTarget || 'body'" :disabled="!isMounted || !teleportTarget">
 				<ul
 					:id="listId"
+					ref="list"
+					hidden
+					:aria-busy="isLoading"
 					class="dom-floating-transition skin-popover z-50 max-h-[min(15rem,var(--dom-floating-available-height))] overflow-auto rounded-2xl p-1"
+					@scroll="paging.onScroll"
 				>
 					<li
 						v-for="(option, index) in optionList"
@@ -226,10 +259,14 @@ function clearSelection() {
 						:data-value="option.value"
 						:data-label="option.label"
 						:data-index="index"
-						class="cursor-pointer rounded-xl px-3 py-2 text-sm transition data-[active]:bg-accent aria-selected:bg-accent"
+						: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 transition data-[active]:bg-accent aria-selected:bg-accent 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="String(option.value) === String(field.value.value)" :query="query">{{ option.label }}</slot></span>
+						<svg v-if="String(option.value) === String(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-combobox>

package/src/pages/forms/font-picker/DomFontPicker.vue

@@ -0,0 +1,416 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import DomSelect from '../select/DomSelect.vue';
+import FontPreview from './FontPreview.vue';
+import { fieldProps, fieldPropNames } from '../field/fieldProps.js';
+import { buildGoogleFontsStylesheetUrl, filterFonts, fontStack, normalizeFont } from './fontPicker.js';
+import { googleFonts } from './googleFonts.js';
+
+defineOptions({
+	inheritAttrs: false,
+	__doc: {
+		name: 'Font picker',
+		tag: '<DomFontPicker>',
+		description: 'Searchable Google Fonts picker that previews only visible families and keeps font network loading inside the mounted control.',
+		icon: 'M5 5h14M12 5v14M8 19h8',
+		playground: {
+			initial: {
+				label: 'Font family',
+				modelValue: 'Lato',
+				placeholder: 'Search Google Fonts',
+				category: '',
+				pageSize: 24,
+				previewText: '',
+				loadFonts: true,
+			},
+		},
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired with the selected font value.' },
+			{ name: 'select', payload: '{ item, value, label }', description: 'Fired when a font family is selected.' },
+			{ name: 'query', payload: 'string', description: 'Fired as the user searches the catalog.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Selected font family or application-defined font value.' },
+	},
+	fonts: {
+		type: Array,
+		/**
+		 * Return an empty override so the component can fall back to its built-in catalog.
+		 *
+		 * @returns {Array<Record<string, string>>} Empty font override.
+		 */
+		default: () => [],
+		_edit: {
+			group: 'Control props',
+			component: 'DomJsonListInput',
+			description: 'Lightweight family metadata. Font files are never bundled in this array.',
+			props: {
+				compact: true,
+				addLabel: '+ Add font',
+				schema: [
+					{ key: 'family', label: 'Family', placeholder: 'Lato' },
+					{ key: 'value', label: 'Value', placeholder: 'Lato' },
+					{ key: 'category', label: 'Fallback', placeholder: 'sans-serif' },
+				],
+			},
+		},
+	},
+	category: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', options: ['', 'sans-serif', 'serif', 'display', 'handwriting', 'monospace'], description: 'Optionally restrict results to one Google Fonts category.' },
+	},
+	pageSize: {
+		type: Number,
+		default: 24,
+		_edit: { group: 'Control props', min: 6, max: 50, description: 'Number of metadata rows appended near the end. Preview fonts load only near the viewport.' },
+	},
+	previewText: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Optional shared sample. Empty uses each family name as its own preview.' },
+	},
+	loadFonts: {
+		type: Boolean,
+		default: true,
+		_edit: { group: 'Control props', description: 'Load the mounted selected label and visible previews from Google Fonts.' },
+	},
+	stylesheetUrl: {
+		type: String,
+		default: 'https://fonts.googleapis.com/css2',
+		_edit: { group: 'Control props', description: 'Google Fonts CSS v2 endpoint or an application-controlled compatible proxy.' },
+	},
+	clearable: {
+		type: Boolean,
+		default: true,
+		_edit: { group: 'Control props', description: 'Show a clear button after a font is selected.' },
+	},
+	placement: {
+		type: String,
+		default: 'bottom',
+		_edit: { group: 'Control props', options: ['bottom', 'top', 'right', 'left'], description: 'Preferred side before collision handling.' },
+	},
+	floatingMode: {
+		type: String,
+		default: 'viewport',
+		_edit: { group: 'Control props', options: ['viewport', 'anchor'], description: 'viewport keeps the list inside the browser; anchor keeps it attached while scrolling.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'select', 'query', 'focus', 'blur']);
+
+const activated = ref(false);
+const isMounted = ref(false);
+const searchQuery = ref('');
+const resultLimit = ref(props.pageSize);
+const intersectingFonts = ref(new Map());
+const availableFonts = computed(getAvailableFonts);
+const matchingFonts = computed(getMatchingFonts);
+const visibleFonts = computed(getVisibleFonts);
+const selectedFont = computed(getSelectedFont);
+const fontLoadSignature = computed(getFontLoadSignature);
+const selectProps = computed(getSelectProps);
+let loadTimer = null;
+const activeStylesheets = new Set();
+const pendingStylesheets = new Map();
+const loadedFamilies = new Set();
+const pendingFamilies = new Set();
+
+watch(fontLoadSignature, scheduleFontLoad);
+watch(() => props.category, resetResultsAndFonts);
+watch(() => props.fonts, resetResultsAndFonts, { deep: true });
+watch(() => props.pageSize, resetResultsAndFonts);
+watch(() => [props.previewText, props.stylesheetUrl], resetResultsAndFonts);
+onMounted(startFontLoading);
+onBeforeUnmount(removeFontStylesheets);
+
+/**
+ * Allow browser-only preview requests after Vue has mounted the component.
+ *
+ * @returns {void}
+ */
+function startFontLoading() {
+	isMounted.value = true;
+	scheduleFontLoad();
+}
+
+/**
+ * Normalize the supplied metadata without loading any font assets.
+ *
+ * @returns {Array<Record<string, string>>} Normalized font records.
+ */
+function getAvailableFonts() {
+	const fonts = props.fonts.length ? props.fonts : googleFonts;
+	return fonts.map(normalizeFont).filter(Boolean);
+}
+
+/**
+ * Filter the complete metadata catalog without loading font assets.
+ *
+ * @returns {Array<Record<string, string>>} All matching font records.
+ */
+function getMatchingFonts() {
+	return filterFonts(availableFonts.value, searchQuery.value, Number.MAX_SAFE_INTEGER, props.category);
+}
+
+/**
+ * Return the incrementally revealed result window.
+ *
+ * @returns {Array<Record<string, string>>} Visible picker options.
+ */
+function getVisibleFonts() {
+	return matchingFonts.value.slice(0, Math.max(1, resultLimit.value));
+}
+
+/**
+ * Resolve selected font metadata, including application-defined values.
+ *
+ * @returns {Record<string, string>|null} Selected font record.
+ */
+function getSelectedFont() {
+	if (!props.modelValue) return null;
+	return availableFonts.value.find((font) => font.value === props.modelValue || font.family === props.modelValue)
+		|| normalizeFont({ family: props.modelValue, value: props.modelValue });
+}
+
+/**
+ * Create a stable trigger when visible preview families or loading options change.
+ *
+ * @returns {string} Font loading signature.
+ */
+function getFontLoadSignature() {
+	if (!props.loadFonts) return '';
+	const records = getPreviewFontRecords();
+	return `${props.stylesheetUrl}|${props.previewText}|${records.map((font) => font.family).join('\u0000')}`;
+}
+
+/**
+ * Pass field and selection behaviour through to the shared searchable select.
+ *
+ * @returns {Record<string, unknown>} Props for DomSelect.
+ */
+function getSelectProps() {
+	const shared = Object.fromEntries(fieldPropNames.map((name) => [name, props[name]]));
+	return {
+		...shared,
+		modelValue: props.modelValue,
+		options: visibleFonts.value,
+		selectedOptions: selectedFont.value ? [selectedFont.value] : [],
+		searchable: true,
+		filterOptions: false,
+		hasMore: resultLimit.value < matchingFonts.value.length,
+		width: 'w-[min(28rem,calc(100vw-2rem))]',
+		clearable: props.clearable,
+		placement: props.placement,
+		floatingMode: props.floatingMode,
+	};
+}
+
+/**
+ * Update search results and mark preview loading as user-initiated.
+ *
+ * @param {string} query Current transient select-panel query.
+ * @returns {void}
+ */
+function handleQuery(query) {
+	if (searchQuery.value !== query) {
+		resultLimit.value = props.pageSize;
+		clearFontStylesheets();
+	}
+	searchQuery.value = query;
+	if (!query) {
+		const selectedIndex = matchingFonts.value.findIndex((font) => font.value === props.modelValue);
+		resultLimit.value = Math.max(props.pageSize, Math.ceil((selectedIndex + 2) / Math.max(1, props.pageSize)) * Math.max(1, props.pageSize));
+	}
+	scheduleFontLoad();
+	emit('query', query);
+}
+
+/**
+ * Activate visible-row preview loading when the shared select panel opens.
+ *
+ * @returns {void}
+ */
+function handleOpen() {
+	activated.value = true;
+}
+
+/** Stop observing previews when the select closes, leaving the chosen label intact. */
+function handleClose() {
+	activated.value = false;
+	intersectingFonts.value.clear();
+}
+
+/** Track only rows intersecting the select's scroll viewport, plus a small overscan. */
+function handleVisibility(font, visible) {
+	if (visible && activated.value) intersectingFonts.value.set(font.family, font);
+	else intersectingFonts.value.delete(font.family);
+}
+
+/**
+ * Adapt the select's option detail to the font picker's existing item contract.
+ *
+ * @param {Record<string, unknown>} detail Selection detail.
+ * @returns {void}
+ */
+function handleSelect(detail) {
+	emit('select', { ...detail, item: detail.option });
+}
+
+/**
+ * Append metadata when the list nears its end; visibility owns font loading.
+ *
+ * @returns {void}
+ */
+function loadMore() {
+	resultLimit.value = Math.min(matchingFonts.value.length, resultLimit.value + Math.max(1, props.pageSize));
+}
+
+/**
+ * Reset incremental results and component-owned preview stylesheets.
+ *
+ * @returns {void}
+ */
+function resetResultsAndFonts() {
+	resultLimit.value = props.pageSize;
+	clearFontStylesheets();
+	scheduleFontLoad();
+}
+
+/**
+ * Debounce loading for newly revealed preview families while the user types.
+ *
+ * @returns {void}
+ */
+function scheduleFontLoad() {
+	if (!isMounted.value) return;
+	if (loadTimer) window.clearTimeout(loadTimer);
+	if (!props.loadFonts) {
+		clearFontStylesheets();
+		return;
+	}
+	loadTimer = window.setTimeout(loadVisibleFontBatch, 120);
+}
+
+/**
+ * Request one stylesheet for the newly visible family batch.
+ *
+ * @returns {void}
+ */
+function loadVisibleFontBatch() {
+	const records = getPreviewFontRecords().filter((font) => !loadedFamilies.has(font.family) && !pendingFamilies.has(font.family));
+	if (!records.length) return;
+	const families = records.map((font) => font.family);
+	const previewText = props.previewText + records.map((font) => font.label).join('');
+	const url = buildGoogleFontsStylesheetUrl(families, previewText, props.stylesheetUrl);
+	if (!url) return;
+	const link = document.createElement('link');
+	link.rel = 'stylesheet';
+	link.href = url;
+	link.dataset.domFontPicker = '';
+	link.addEventListener('load', () => activateFontStylesheet(link), { once: true });
+	link.addEventListener('error', () => discardPendingStylesheet(link), { once: true });
+	pendingStylesheets.set(link, families);
+	families.forEach((family) => pendingFamilies.add(family));
+	document.head.append(link);
+}
+
+/**
+ * Collect currently visible rows plus a selected family that may be outside the result window.
+ *
+ * @returns {Array<Record<string, string>>} Unique font records eligible for preview loading.
+ */
+function getPreviewFontRecords() {
+	const visibleFamilies = new Set(visibleFonts.value.map((font) => font.family));
+	const records = activated.value ? [...intersectingFonts.value.values()].filter((font) => visibleFamilies.has(font.family)) : [];
+	if (selectedFont.value) records.push(selectedFont.value);
+	return [...new Map(records.map((font) => [font.family, font])).values()];
+}
+
+/**
+ * Keep a successfully loaded batch active for the lifetime of the current query.
+ *
+ * @param {HTMLLinkElement} link Loaded stylesheet element.
+ * @returns {void}
+ */
+function activateFontStylesheet(link) {
+	const families = pendingStylesheets.get(link);
+	if (!families) {
+		link.remove();
+		return;
+	}
+	pendingStylesheets.delete(link);
+	families.forEach((family) => {
+		pendingFamilies.delete(family);
+		loadedFamilies.add(family);
+	});
+	activeStylesheets.add(link);
+}
+
+/**
+ * Remove a failed batch so it can be retried after the result set changes.
+ *
+ * @param {HTMLLinkElement} link Failed stylesheet element.
+ * @returns {void}
+ */
+function discardPendingStylesheet(link) {
+	const families = pendingStylesheets.get(link) || [];
+	link.remove();
+	pendingStylesheets.delete(link);
+	families.forEach((family) => pendingFamilies.delete(family));
+}
+
+/**
+ * Clear current-query stylesheet batches while leaving the component mounted.
+ *
+ * @returns {void}
+ */
+function clearFontStylesheets() {
+	if (loadTimer) window.clearTimeout(loadTimer);
+	loadTimer = null;
+	activeStylesheets.forEach((link) => link.remove());
+	pendingStylesheets.forEach((_families, link) => link.remove());
+	activeStylesheets.clear();
+	pendingStylesheets.clear();
+	loadedFamilies.clear();
+	pendingFamilies.clear();
+}
+
+/**
+ * Clear timers and component-owned stylesheet elements before unmounting.
+ *
+ * @returns {void}
+ */
+function removeFontStylesheets() {
+	isMounted.value = false;
+	clearFontStylesheets();
+}
+</script>
+
+<template>
+	<DomSelect
+		v-bind="{ ...selectProps, ...$attrs }"
+		class="dom-font-picker"
+		@update:model-value="emit('update:modelValue', $event)"
+		@query="handleQuery"
+		@select="handleSelect"
+		@load-more="loadMore"
+		@open="handleOpen"
+		@close="handleClose"
+		@focus="emit('focus', $event)"
+		@blur="emit('blur', $event)"
+	>
+		<template #value="{ label, placeholder }">
+			<span :style="{ fontFamily: fontStack(selectedFont) }">{{ label || placeholder }}</span>
+		</template>
+		<template #option="{ option }">
+			<FontPreview :font="option" :text="previewText" :active="activated" @visibility="handleVisibility" />
+		</template>
+	</DomSelect>
+</template>

package/src/pages/forms/font-picker/FontPreview.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { onBeforeUnmount, ref, watch } from 'vue';
+import { fontStack } from './fontPicker.js';
+
+const props = defineProps({ font: { type: Object, required: true }, text: { type: String, default: '' }, active: Boolean });
+const emit = defineEmits(['visibility']);
+const row = ref(null);
+let observer = null;
+
+/** Observe only this row's scroll viewport; off-screen metadata never requests a font. */
+function observePreview() {
+	observer?.disconnect();
+	if (!props.active || !row.value) return;
+	observer = new IntersectionObserver(([entry]) => emit('visibility', props.font, entry.isIntersecting), {
+		root: row.value.closest('[role="listbox"], dom-listbox'),
+		rootMargin: '48px 0px',
+	});
+	observer.observe(row.value);
+}
+
+/** Release the observer and remove an unmounted row from the pending preview set. */
+function releasePreview() {
+	observer?.disconnect();
+	emit('visibility', props.font, false);
+}
+
+watch([row, () => props.active], observePreview, { flush: 'post' });
+onBeforeUnmount(releasePreview);
+</script>
+
+<template>
+	<span ref="row" class="block">
+		<span class="flex min-w-0 items-center justify-between gap-4">
+			<span class="min-w-0 truncate text-base" :style="{ fontFamily: fontStack(font) }">{{ text || font.label }}</span>
+			<span class="shrink-0 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-fg">{{ font.category }}</span>
+		</span>
+		<span v-if="text" class="mt-0.5 block truncate text-xs text-muted-fg">{{ font.label }}</span>
+	</span>
+</template>