includio-cms 0.14.4 → 0.14.6

package/dist/admin/components/fields/media-field.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import * as Tooltip from '../../../components/ui/tooltip/index.js';
 	import { onMount } from 'svelte';
 	import Button from '../../../components/ui/button/button.svelte';
 	import type { MediaField } from '../../../types/fields.js';
@@ -9,9 +10,9 @@
 	import X from '@tabler/icons-svelte/icons/x';
 	import ChevronLeft from '@tabler/icons-svelte/icons/chevron-left';
 	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
-	import Upload from '@tabler/icons-svelte/icons/upload';
-	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
 	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import Video from '@tabler/icons-svelte/icons/video';
+	import Photo from '@tabler/icons-svelte/icons/photo';
 	import FileMiniature from '../media/file/file-miniature.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import MediaSelector from '../media/media-selector.svelte';
@@ -24,11 +25,11 @@
 			remove: string;
 			change: string;
 			of: string;
-			transcript: string;
-			audioDescription: string;
-			addTranscript: string;
-			addAudioDescription: string;
-			removeFile: string;
+			a11yBadge: string;
+			a11yMissingTranscript: string;
+			a11yMissingAudioDesc: string;
+			a11yMissingBoth: string;
+			a11yHint: string;
 		}
 	> = {
 		pl: {
@@ -36,22 +37,22 @@
 			remove: 'Usuń',
 			change: 'Zmień',
 			of: 'z',
-			transcript: 'Transkrypcja',
-			audioDescription: 'Audiodeskrypcja',
-			addTranscript: 'Dodaj transkrypcję',
-			addAudioDescription: 'Dodaj audiodeskrypcję',
-			removeFile: 'Usuń'
+			a11yBadge: 'Dostępność',
+			a11yMissingTranscript: 'Brakuje transkrypcji',
+			a11yMissingAudioDesc: 'Brakuje audiodeskrypcji',
+			a11yMissingBoth: 'Brakuje transkrypcji i audiodeskrypcji',
+			a11yHint: 'Uzupełnij w bibliotece mediów'
 		},
 		en: {
 			selectMedia: 'Select media',
 			remove: 'Remove',
 			change: 'Change',
 			of: 'of',
-			transcript: 'Transcript',
-			audioDescription: 'Audio description',
-			addTranscript: 'Add transcript',
-			addAudioDescription: 'Add audio description',
-			removeFile: 'Remove'
+			a11yBadge: 'Accessibility',
+			a11yMissingTranscript: 'Transcript missing',
+			a11yMissingAudioDesc: 'Audio description missing',
+			a11yMissingBoth: 'Transcript and audio description missing',
+			a11yHint: 'Add it in the media library'
 		}
 	};
 
@@ -61,49 +62,74 @@
 	let currentIndex = $state(0);
 	let lightboxOpen = $state(false);
 	let lightboxFile = $state<MediaFile | null>(null);
-
-	// Accessibility dialogs
-	let transcriptDialogOpen = $state(false);
-	let audioDescDialogOpen = $state(false);
-	let transcriptSelected = $state<string>('');
-	let audioDescSelected = $state<string>('');
-	let currentVideoFile = $state<MediaFile | null>(null);
+	let dialogOpen = $state(false);
 
 	function openLightbox(file: MediaFile) {
 		lightboxFile = file;
 		lightboxOpen = true;
 	}
 
-	$effect(() => {
-		if (transcriptSelected && currentVideoFile) {
-			remotes.updateMediaAccessibility({
-				fileId: currentVideoFile.id,
-				transcriptFileId: transcriptSelected
-			});
-			currentVideoFile.transcriptFileId = transcriptSelected;
-			transcriptDialogOpen = false;
-			transcriptSelected = '';
-		}
-	});
+	function openPicker() {
+		dialogOpen = true;
+	}
 
-	$effect(() => {
-		if (audioDescSelected && currentVideoFile) {
-			remotes.updateMediaAccessibility({
-				fileId: currentVideoFile.id,
-				audioDescriptionFileId: audioDescSelected
-			});
-			currentVideoFile.audioDescriptionFileId = audioDescSelected;
-			audioDescDialogOpen = false;
-			audioDescSelected = '';
-		}
-	});
+	function a11yMissingText(file: MediaFile): string {
+		const t = lang[interfaceLanguage.current];
+		const noTranscript = !file.transcriptFileId;
+		const noAudioDesc = !file.audioDescriptionFileId;
+		if (noTranscript && noAudioDesc) return t.a11yMissingBoth;
+		if (noTranscript) return t.a11yMissingTranscript;
+		return t.a11yMissingAudioDesc;
+	}
 
 	type Props = {
 		field: MediaField;
 		value: string | string[] | undefined;
 	};
 
-	let { field, value = $bindable(), ...props }: Props = $props();
+	let { field, value = $bindable() }: Props = $props();
+
+	// Single-file state: fetch MediaFile via a plain fetch inside an $effect instead of
+	// `$derived(remotes.getFileById(value))`. Reason: wrapping the remote query in a
+	// $derived couples its lifecycle to the derivation's refcounting — rapid toggling
+	// of value ('' → id) around dialog unmount triggered "query instance is no longer
+	// active" errors. A plain fetch bypasses the SvelteKit remote query cache
+	// refcounting entirely.
+	let singleFile = $state<MediaFile | null>(null);
+	let singleFileReady = $state(false);
+	$effect(() => {
+		const v = value;
+		if (typeof v !== 'string' || !v) {
+			singleFile = null;
+			singleFileReady = true;
+			return;
+		}
+		singleFileReady = false;
+		let cancelled = false;
+		(async () => {
+			try {
+				const data = await remotes.getFileById(v);
+				if (!cancelled) {
+					singleFile = data as MediaFile;
+					singleFileReady = true;
+				}
+			} catch {
+				if (!cancelled) {
+					singleFile = null;
+					singleFileReady = true;
+				}
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const mFilesQuery = $derived(
+		Array.isArray(value) && value.length > 0
+			? remotes.getMediaFiles({ data: { ids: value as string[] } })
+			: null
+	);
 
 	onMount(() => {
 		if (value === undefined) {
@@ -112,213 +138,156 @@
 	});
 </script>
 
+{#snippet typeBadge(file: MediaFile)}
+	<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5 pointer-events-none">
+		{#if file.type === 'video'}
+			<Video class="text-muted-foreground" />
+		{:else if file.type === 'image'}
+			<Photo class="text-muted-foreground" />
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet a11yBadge(file: MediaFile)}
+	{#if file.type === 'video' && (!file.transcriptFileId || !file.audioDescriptionFileId)}
+		<Tooltip.Provider>
+			<Tooltip.Root>
+				<Tooltip.Trigger
+					type="button"
+					onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}
+					aria-label={`${lang[interfaceLanguage.current].a11yBadge}: ${a11yMissingText(file)}. ${lang[interfaceLanguage.current].a11yHint}`}
+					class="absolute top-1 left-1 inline-flex items-center gap-1 rounded-full bg-background/85 backdrop-blur-sm px-2 py-0.5 text-[11px] font-medium text-warning border border-warning/40 shadow-sm cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-warning/40"
+				>
+					<AlertTriangle class="h-3 w-3" />
+					<span>{lang[interfaceLanguage.current].a11yBadge}</span>
+				</Tooltip.Trigger>
+				<Tooltip.Content class="max-w-[220px] text-xs">
+					<div class="font-medium">{a11yMissingText(file)}</div>
+					<div class="text-[11px] opacity-80 mt-0.5">{lang[interfaceLanguage.current].a11yHint}</div>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	{/if}
+{/snippet}
+
 {#snippet videoPreview(file: MediaFile)}
-	<div class="w-full h-full">
-tt<!-- svelte-ignore a11y_media_has_caption -->
+	<div class="ml-checkered-bg relative aspect-square w-full overflow-hidden rounded-2xl border">
+		<!-- svelte-ignore a11y_media_has_caption -->
 		<video
 			controls
 			poster={file.posterUrl || file.thumbnailUrl || undefined}
-			class="w-full h-full object-contain bg-black rounded-xl"
+			class="w-full h-full object-contain"
 		>
 			<source src={file.url} type={file.mimeType || undefined} />
 		</video>
+		{@render typeBadge(file)}
+		{@render a11yBadge(file)}
 	</div>
 {/snippet}
 
-{#snippet accessibilityPanel(file: MediaFile)}
-	{#if file.type === 'video'}
-		<div class="mt-2 space-y-1.5">
-			<!-- Transcript -->
-			<div class="flex items-center justify-between gap-2 rounded-lg border p-1.5">
-				<div class="flex items-center gap-1.5 text-xs">
-					{#if file.transcriptFileId}
-						<CircleCheck class="h-3.5 w-3.5 text-green-500" />
-					{:else}
-						<AlertTriangle class="h-3.5 w-3.5 text-yellow-500" />
-					{/if}
-					<span class={file.transcriptFileId ? '' : 'text-muted-foreground'}>{lang[interfaceLanguage.current].transcript}</span>
-				</div>
-				<div class="flex gap-1">
-					{#if file.transcriptFileId}
-						<Button size="sm" variant="ghost" class="h-5 text-[10px] px-1.5" onclick={() => {
-							remotes.updateMediaAccessibility({ fileId: file.id, transcriptFileId: null });
-							file.transcriptFileId = null;
-						}}>
-							{lang[interfaceLanguage.current].removeFile}
-						</Button>
-					{/if}
-					<Button size="sm" variant="outline" class="h-5 text-[10px] px-1.5" onclick={() => {
-						currentVideoFile = file;
-						transcriptDialogOpen = true;
-					}}>
-						<Upload class="h-3 w-3 mr-0.5" />
-						{lang[interfaceLanguage.current].addTranscript}
-					</Button>
-				</div>
-			</div>
+{#snippet imagePreview(file: MediaFile)}
+	<button
+		type="button"
+		class="relative aspect-square w-full overflow-hidden rounded-2xl border cursor-zoom-in"
+		onclick={() => openLightbox(file)}
+	>
+		<FileMiniature {file} />
+	</button>
+{/snippet}
 
-			<!-- Audio Description -->
-			<div class="flex items-center justify-between gap-2 rounded-lg border p-1.5">
-				<div class="flex items-center gap-1.5 text-xs">
-					{#if file.audioDescriptionFileId}
-						<CircleCheck class="h-3.5 w-3.5 text-green-500" />
-					{:else}
-						<AlertTriangle class="h-3.5 w-3.5 text-yellow-500" />
-					{/if}
-					<span class={file.audioDescriptionFileId ? '' : 'text-muted-foreground'}>{lang[interfaceLanguage.current].audioDescription}</span>
-				</div>
-				<div class="flex gap-1">
-					{#if file.audioDescriptionFileId}
-						<Button size="sm" variant="ghost" class="h-5 text-[10px] px-1.5" onclick={() => {
-							remotes.updateMediaAccessibility({ fileId: file.id, audioDescriptionFileId: null });
-							file.audioDescriptionFileId = null;
-						}}>
-							{lang[interfaceLanguage.current].removeFile}
-						</Button>
-					{/if}
-					<Button size="sm" variant="outline" class="h-5 text-[10px] px-1.5" onclick={() => {
-						currentVideoFile = file;
-						audioDescDialogOpen = true;
-					}}>
-						<Upload class="h-3 w-3 mr-0.5" />
-						{lang[interfaceLanguage.current].addAudioDescription}
-					</Button>
-				</div>
-			</div>
-		</div>
-	{/if}
+{#snippet mediaActions(onRemove: () => void)}
+	<div class="flex items-center justify-between gap-2 mt-1.5">
+		<Button size="sm" variant="secondary" class="h-8" onclick={openPicker}>
+			<Plus class="h-4 w-4" />
+			{lang[interfaceLanguage.current].change}
+		</Button>
+		{#if !field.required}
+			<Button variant="destructive" size="sm" class="h-8" onclick={onRemove}>
+				<X class="h-4 w-4" />
+				{lang[interfaceLanguage.current].remove}
+			</Button>
+		{/if}
+	</div>
 {/snippet}
 
 {#if value !== undefined}
-	<Dialog.Root>
-		<Dialog.Trigger>
-			{#snippet child({ props })}
-				{#if value && ((typeof value === 'string' && value !== '') || (Array.isArray(value) && value.length > 0))}
-					<div class="max-w-96">
-						{#if typeof value === 'string'}
-							{@const fileQuery = remotes.getFileById(value)}
-							{#if !fileQuery.ready}
-								<div class="animate-pulse bg-muted w-full aspect-video rounded-xl"></div>
-							{:else if fileQuery.current}
-								{@const file = fileQuery.current}
-								{#if file.type === 'video'}
-									<div class="overflow-hidden rounded-2xl border">
-										{@render videoPreview(file)}
-										<div class="flex items-center justify-between gap-2 p-2 bg-gradient-to-t from-muted/50">
-											<Button {...props} size="sm" variant="secondary" class="h-8">
-												<Plus class="h-4 w-4" />
-												{lang[interfaceLanguage.current].change}
-											</Button>
-											{#if !field.required}
-												<Button variant="destructive" size="sm" class="h-8" onclick={(e) => { e.stopPropagation(); value = ''; }}>
-													<X class="h-4 w-4" />
-													{lang[interfaceLanguage.current].remove}
-												</Button>
-											{/if}
-										</div>
-										{@render accessibilityPanel(file)}
-									</div>
-								{:else}
-									<div class="group/dialog-trigger relative aspect-square max-w-64 overflow-hidden rounded-2xl border">
-										<button
-											type="button"
-											class="p-1 w-full h-full cursor-zoom-in"
-											onclick={(e) => { e.stopPropagation(); e.preventDefault(); openLightbox(file); }}
-										>
-											<FileMiniature {file} />
-										</button>
-										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-plum-darker/50 to-transparent p-2 pt-8">
-											<Button {...props} size="sm" variant="secondary" class="h-8">
-												<Plus class="h-4 w-4" />
-												{lang[interfaceLanguage.current].change}
-											</Button>
-											{#if !field.required}
-												<Button variant="destructive" size="sm" class="h-8" onclick={(e) => { e.stopPropagation(); value = ''; }}>
-													<X class="h-4 w-4" />
-													{lang[interfaceLanguage.current].remove}
-												</Button>
-											{/if}
-										</div>
-									</div>
-								{/if}
+	{#if value && ((typeof value === 'string' && value !== '') || (Array.isArray(value) && value.length > 0))}
+		<div class="max-w-64">
+			{#if typeof value === 'string'}
+				{#if !singleFileReady}
+					<div class="animate-pulse bg-muted w-full aspect-square rounded-2xl"></div>
+				{:else if singleFile}
+					{@const file = singleFile}
+					{#if file.type === 'video'}
+						{@render videoPreview(file)}
+					{:else}
+						{@render imagePreview(file)}
+					{/if}
+					{@render mediaActions(() => { value = ''; })}
+				{/if}
+			{:else if Array.isArray(value) && value.length > 0}
+				{@const valueArr = value}
+				{#if !mFilesQuery?.ready}
+					<div class="animate-pulse bg-muted w-full aspect-square rounded-2xl"></div>
+				{:else if mFilesQuery?.current}
+					{@const file = mFilesQuery.current[currentIndex]}
+					{#if file}
+						<div class="relative">
+							{#if file.type === 'video'}
+								{@render videoPreview(file)}
+							{:else}
+								{@render imagePreview(file)}
 							{/if}
-						{:else if Array.isArray(value) && value.length > 0}
-							{@const valueArr = value}
-							{@const mFilesQuery = remotes.getMediaFiles({ data: { ids: valueArr } })}
-							{#if !mFilesQuery.ready}
-								<div class="animate-pulse bg-muted w-full aspect-video rounded-xl"></div>
-							{:else if mFilesQuery.current}
-								{@const file = mFilesQuery.current[currentIndex]}
-								{#if file}
-									<div class="group/dialog-trigger relative overflow-hidden rounded-2xl border">
-										{#if file.type === 'video'}
-											{@render videoPreview(file)}
-										{:else}
-											<button
-												type="button"
-												class="p-1 w-full aspect-square cursor-zoom-in"
-												onclick={(e) => { e.stopPropagation(); e.preventDefault(); openLightbox(file); }}
-											>
-												<FileMiniature {file} />
-											</button>
-										{/if}
-
-										{#if valueArr.length > 1}
-											<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
-												<button
-													type="button"
-													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
-													onclick={(e) => { e.stopPropagation(); currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1; }}
-												>
-													<ChevronLeft class="h-5 w-5" />
-												</button>
-												<button
-													type="button"
-													class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
-													onclick={(e) => { e.stopPropagation(); currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0; }}
-												>
-													<ChevronRight class="h-5 w-5" />
-												</button>
-											</div>
-											<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
-												{currentIndex + 1} / {valueArr.length}
-											</div>
-										{/if}
 
-										<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-plum-darker/50 to-transparent p-2 pt-8">
-											<Button {...props} size="sm" variant="secondary" class="h-8">
-												<Plus class="h-4 w-4" />
-												{lang[interfaceLanguage.current].change}
-											</Button>
-											{#if !field.required}
-												<Button variant="destructive" size="sm" class="h-8" onclick={(e) => { e.stopPropagation(); value = field.multiple ? [] : ''; }}>
-													<X class="h-4 w-4" />
-													{lang[interfaceLanguage.current].remove}
-												</Button>
-											{/if}
-										</div>
-									</div>
-									{@render accessibilityPanel(file)}
-								{/if}
+							{#if valueArr.length > 1}
+								<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1; }}
+									>
+										<ChevronLeft class="h-5 w-5" />
+									</button>
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0; }}
+									>
+										<ChevronRight class="h-5 w-5" />
+									</button>
+								</div>
+								<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
+									{currentIndex + 1} / {valueArr.length}
+								</div>
 							{/if}
-						{/if}
-					</div>
-				{:else}
-					<button
-						{...props}
-						type="button"
-						class="flex aspect-video max-w-64 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border bg-card/80 p-6 transition-colors hover:border-primary/50 hover:bg-card"
-					>
-						<div class="rounded-full bg-muted p-3">
-							<Plus class="h-6 w-6 text-muted-foreground" />
 						</div>
-						<span class="text-sm text-muted-foreground">{lang[interfaceLanguage.current].selectMedia}</span>
-					</button>
+						{@render mediaActions(() => { value = field.multiple ? [] : ''; })}
+					{/if}
 				{/if}
-			{/snippet}
-		</Dialog.Trigger>
+			{/if}
+		</div>
+	{:else}
+		<button
+			type="button"
+			class="flex aspect-square max-w-64 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border bg-card/80 p-6 transition-colors hover:border-primary/50 hover:bg-card"
+			onclick={openPicker}
+		>
+			<div class="rounded-full bg-muted p-3">
+				<Plus class="h-6 w-6 text-muted-foreground" />
+			</div>
+			<span class="text-sm text-muted-foreground">{lang[interfaceLanguage.current].selectMedia}</span>
+		</button>
+	{/if}
+
+	<Dialog.Root bind:open={dialogOpen}>
 		<Dialog.Content class="h-[85vh] w-full max-w-6xl! sm:max-w-6xl! overflow-hidden p-0 flex flex-col">
-			<MediaSelector bind:selected={value} multiple={field.multiple} accept={field.accept} />
+			<MediaSelector
+				bind:selected={value}
+				multiple={field.multiple}
+				accept={field.accept}
+				onConfirm={() => (dialogOpen = false)}
+				onCancel={() => (dialogOpen = false)}
+			/>
 		</Dialog.Content>
 	</Dialog.Root>
 
@@ -336,25 +305,6 @@ tt<!-- svelte-ignore a11y_media_has_caption -->
 			{/if}
 		</Dialog.Content>
 	</Dialog.Root>
-
-	<!-- Accessibility dialogs -->
-	<Dialog.Root bind:open={transcriptDialogOpen}>
-		<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
-			<Dialog.Header>
-				<Dialog.Title>{lang[interfaceLanguage.current].addTranscript}</Dialog.Title>
-			</Dialog.Header>
-			<MediaSelector bind:selected={transcriptSelected} />
-		</Dialog.Content>
-	</Dialog.Root>
-
-	<Dialog.Root bind:open={audioDescDialogOpen}>
-		<Dialog.Content class="max-w-5xl! sm:max-w-5xl!">
-			<Dialog.Header>
-				<Dialog.Title>{lang[interfaceLanguage.current].addAudioDescription}</Dialog.Title>
-			</Dialog.Header>
-			<MediaSelector bind:selected={audioDescSelected} accept="audio/*" />
-		</Dialog.Content>
-	</Dialog.Root>
 {/if}
 
 <style>

package/dist/admin/components/fields/relation-field.svelte

@@ -19,6 +19,7 @@
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { droppable, draggable } from '@thisux/sveltednd';
 	import { arrayMove } from '../../utils/arrayMove.js';
+	import { debounce } from '../../utils/debounce.js';
 	import { flip } from 'svelte/animate';
 	import { fade } from 'svelte/transition';
 	import RelationPickerDialog from './relation-picker-dialog.svelte';
@@ -171,13 +172,7 @@
 	// Auto-detect mode: <=30 published → inline popover, >30 → dialog
 	let useDialog = $state(false);
 
-	// Debounced search
-	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
-
-	function debouncedSearch(query: string) {
-		if (searchTimeout) clearTimeout(searchTimeout);
-		searchTimeout = setTimeout(() => fetchOptions(query), 300);
-	}
+	const debouncedSearch = debounce((query: string) => fetchOptions(query), 300);
 
 	async function fetchOptions(search?: string) {
 		pickerLoading = true;
@@ -475,7 +470,7 @@
 			aria-haspopup="dialog"
 			{...props}
 		>
-			{t.select} {singularLabel}
+			{`${t.select} ${singularLabel}`}
 			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
 		</button>
 
@@ -508,7 +503,7 @@
 				aria-expanded={popoverOpen}
 				{...props}
 			>
-				{t.select} {singularLabel}
+				{`${t.select} ${singularLabel}`}
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
 			</Popover.Trigger>