includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/entry/header/a11y-header-badge.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
+	import { getContentLanguage } from '../../../state/content-language.svelte.js';
+	import type { Field } from '../../../../types/fields.js';
+	import type { InterfaceLanguage } from '../../../../types/languages.js';
+	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import { validateA11y, a11yLangPl, a11yLangEn } from './a11y-validator.js';
+
+	type Props = {
+		data: Record<string, unknown>;
+		fields: Field[];
+	};
+
+	let { data, fields }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
+
+	const lang: Record<InterfaceLanguage, { title: (n: number) => string }> = {
+		en: {
+			title: (n) => `${n} accessibility issue${n === 1 ? '' : 's'} — open settings to review`
+		},
+		pl: {
+			title: (n) =>
+				`${n} ${n === 1 ? 'kwestia' : n < 5 ? 'kwestie' : 'kwestii'} dostępności — otwórz ustawienia, by zobaczyć`
+		}
+	};
+
+	const warningCount = $derived.by(() => {
+		if (!fields.length) return 0;
+		const a11yLang = interfaceLanguage.current === 'pl' ? a11yLangPl : a11yLangEn;
+		const issues = validateA11y(data, fields, a11yLang, contentLanguage.all);
+		return issues.filter((i) => i.type === 'warning').length;
+	});
+</script>
+
+{#if warningCount > 0}
+	<span
+		class="text-warning inline-flex items-center gap-1 rounded-md bg-[var(--warning-bg)] px-1.5 py-0.5 text-xs font-medium"
+		role="status"
+		aria-label={lang[interfaceLanguage.current].title(warningCount)}
+		title={lang[interfaceLanguage.current].title(warningCount)}
+	>
+		<AlertTriangle class="size-3.5" aria-hidden="true" />
+		<span aria-hidden="true">{warningCount}</span>
+	</span>
+{/if}

package/dist/admin/client/entry/header/a11y-header-badge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Field } from '../../../../types/fields.js';
+type Props = {
+    data: Record<string, unknown>;
+    fields: Field[];
+};
+declare const A11yHeaderBadge: import("svelte").Component<Props, {}, "">;
+type A11yHeaderBadge = ReturnType<typeof A11yHeaderBadge>;
+export default A11yHeaderBadge;

package/dist/admin/client/entry/header/publish-panel.svelte

@@ -6,6 +6,7 @@
 	import type { Field } from '../../../../types/fields.js';
 	import * as Sheet from '../../../../components/ui/sheet/index.js';
 	import Button from '../../../../components/ui/button/button.svelte';
+	import ConfirmationDialog from '../../../components/dialogs/confirmation-dialog.svelte';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import CalendarClock from '@tabler/icons-svelte/icons/calendar-clock';
 	import SquareCheckFilled from '@tabler/icons-svelte/icons/square-check-filled';
@@ -16,7 +17,7 @@
 	import InfoCircle from '@tabler/icons-svelte/icons/info-circle';
 	import Shield from '@tabler/icons-svelte/icons/shield';
 	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
-	import { getEntryStatusForLang } from '../utils.js';
+	import { getLangPublishState } from '../utils.js';
 	import { validateA11y, a11yLangPl, a11yLangEn, type A11yIssue } from './a11y-validator.js';
 	import { getContentLanguage } from '../../../state/content-language.svelte.js';
 	import LanguageIcon from '@tabler/icons-svelte/icons/language';
@@ -32,11 +33,14 @@
 			scheduledFor: string;
 			schedulePublish: string;
 			scheduleUpdate: string;
+			rescheduleUpdate: string;
+			scheduledUpdateAt: string;
 			reschedule: string;
 			schedule: string;
 			cancel: string;
 			unpublish: string;
 			cancelSchedule: string;
+			cancelScheduledUpdate: string;
 			archive: string;
 			dangerZone: string;
 			date: string;
@@ -47,6 +51,9 @@
 			translations: string;
 			translationsHint: string;
 			missingFieldsLabel: (lang: string) => string;
+			confirmArchiveTitle: string;
+			confirmArchiveDescription: string;
+			confirmArchiveAction: string;
 		}
 	> = {
 		en: {
@@ -63,11 +70,14 @@
 			scheduledFor: 'Scheduled for',
 			schedulePublish: 'Schedule Publish',
 			scheduleUpdate: 'Schedule Update',
+			rescheduleUpdate: 'Reschedule Update',
+			scheduledUpdateAt: 'Scheduled update',
 			reschedule: 'Reschedule',
 			schedule: 'Schedule',
 			cancel: 'Cancel',
 			unpublish: 'Unpublish',
 			cancelSchedule: 'Cancel Schedule',
+			cancelScheduledUpdate: 'Cancel scheduled update',
 			archive: 'Archive entry',
 			dangerZone: 'Danger Zone',
 			date: 'Date',
@@ -77,7 +87,11 @@
 			a11yHint: 'Resolve issues before publishing',
 			translations: 'Translations',
 			translationsHint: 'Fill in missing fields to publish',
-			missingFieldsLabel: (lang: string) => `Missing fields (${lang.toUpperCase()})`
+			missingFieldsLabel: (lang: string) => `Missing fields (${lang.toUpperCase()})`,
+			confirmArchiveTitle: 'Archive this entry?',
+			confirmArchiveDescription:
+				'It will disappear from the list and stop being publicly visible. You can restore it from the archive at any time.',
+			confirmArchiveAction: 'Archive'
 		},
 		pl: {
 			title: 'Publikacja',
@@ -93,11 +107,14 @@
 			scheduledFor: 'Zaplanowano na',
 			schedulePublish: 'Zaplanuj publikację',
 			scheduleUpdate: 'Zaplanuj aktualizację',
+			rescheduleUpdate: 'Zmień termin aktualizacji',
+			scheduledUpdateAt: 'Zaplanowana aktualizacja',
 			reschedule: 'Zmień termin',
 			schedule: 'Zaplanuj',
 			cancel: 'Anuluj',
 			unpublish: 'Cofnij publikację',
 			cancelSchedule: 'Anuluj planowanie',
+			cancelScheduledUpdate: 'Anuluj zaplanowaną aktualizację',
 			archive: 'Archiwizuj wpis',
 			dangerZone: 'Strefa zagrożenia',
 			date: 'Data',
@@ -107,7 +124,11 @@
 			a11yHint: 'Rozwiąż problemy przed publikacją',
 			translations: 'Tłumaczenia',
 			translationsHint: 'Uzupełnij brakujące pola, żeby opublikować',
-			missingFieldsLabel: (lang: string) => `Brakujące pola (${lang.toUpperCase()})`
+			missingFieldsLabel: (lang: string) => `Brakujące pola (${lang.toUpperCase()})`,
+			confirmArchiveTitle: 'Zarchiwizować wpis?',
+			confirmArchiveDescription:
+				'Wpis zniknie z listy i przestanie być publicznie widoczny. Możesz go przywrócić z archiwum w każdej chwili.',
+			confirmArchiveAction: 'Zarchiwizuj'
 		}
 	};
 
@@ -132,7 +153,9 @@
 	let a11yIssues = $state<A11yIssue[]>([]);
 
 	// Status is per current language
-	const entryStatus = $derived(getEntryStatusForLang(entry, contentLanguage.current));
+	const langState = $derived(getLangPublishState(entry, contentLanguage.current));
+	const entryStatus = $derived(langState.status);
+	const hasScheduledUpdate = $derived(langState.hasScheduledUpdate);
 	const t = $derived(lang[interfaceLanguage.current]);
 
 	const hasA11yWarnings = $derived(a11yIssues.some((i) => i.type === 'warning'));
@@ -141,7 +164,7 @@
 	const scheduleLabel = $derived.by(() => {
 		switch (entryStatus) {
 			case 'published':
-				return t.scheduleUpdate;
+				return hasScheduledUpdate ? t.rescheduleUpdate : t.scheduleUpdate;
 			case 'scheduled':
 				return t.reschedule;
 			default:
@@ -167,7 +190,7 @@
 
 	function setDefaultValues() {
 		const scheduledVersion = entry.scheduledVersions[contentLanguage.current];
-		if (entryStatus === 'scheduled' && scheduledVersion?.publishedAt) {
+		if (scheduledVersion?.publishedAt && (entryStatus === 'scheduled' || hasScheduledUpdate)) {
 			const scheduled = new Date(scheduledVersion.publishedAt);
 			dateValue = scheduled.toISOString().slice(0, 10);
 			timeValue = `${String(scheduled.getHours()).padStart(2, '0')}:${String(scheduled.getMinutes()).padStart(2, '0')}`;
@@ -194,12 +217,20 @@
 	}
 
 	function handleCancelSchedule() {
-		onSave('cancel-published');
+		// Drafts only the future-dated version(s); a live published version (if any) stays online.
+		onSave('cancel-scheduled');
 		open = false;
 	}
 
+	let archiveConfirmOpen = $state(false);
+
 	function handleArchive() {
+		archiveConfirmOpen = true;
+	}
+
+	function performArchive() {
 		onArchive();
+		archiveConfirmOpen = false;
 		open = false;
 	}
 
@@ -234,7 +265,7 @@
 <Sheet.Root bind:open>
 	<Sheet.Trigger>
 		{#snippet child({ props })}
-			<Button variant="ghost" size="icon-sm" {...props}>
+			<Button variant="ghost" size="icon-sm" aria-label={t.title} {...props}>
 				<SettingsIcon class="size-4" />
 			</Button>
 		{/snippet}
@@ -268,21 +299,28 @@
 					</div>
 				</div>
 
-				{#if entryStatus === 'published' && entry.publishedVersions[contentLanguage.current]?.publishedAt}
+				{#if entryStatus === 'published' && langState.publishedAt}
 					<div class="publish-detail-row">
 						<span>{t.publishedAt}</span>
-						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current]?.publishedAt)}</span>
+						<span class="tabular-nums">{formatDateTime(langState.publishedAt!)}</span>
 					</div>
 				{/if}
 
-				{#if entryStatus === 'scheduled' && entry.publishedVersions[contentLanguage.current]?.publishedAt}
+				{#if entryStatus === 'scheduled' && langState.scheduledAt}
 					<div class="publish-detail-row">
 						<span>{t.scheduledFor}</span>
-						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current]?.publishedAt)}</span>
+						<span class="tabular-nums">{formatDateTime(langState.scheduledAt!)}</span>
 					</div>
 				{/if}
 
-				{#if entry.publishedVersions[contentLanguage.current] && entry.publishedVersions[contentLanguage.current].id !== version.id}
+				{#if entryStatus === 'published' && hasScheduledUpdate && langState.scheduledAt}
+						<div class="publish-detail-row">
+							<span>{t.scheduledUpdateAt}</span>
+							<span class="tabular-nums">{formatDateTime(langState.scheduledAt)}</span>
+						</div>
+					{/if}
+
+					{#if entry.publishedVersions[contentLanguage.current] && entry.publishedVersions[contentLanguage.current].id !== version.id}
 					<div class="publish-detail-row">
 						<span>{t.publishedVersion}</span>
 						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current].createdAt)}</span>
@@ -404,6 +442,12 @@
 							{t.dangerZone}
 						</div>
 
+						{#if entryStatus === 'published' && hasScheduledUpdate}
+							<button class="btn-danger-outline" onclick={handleCancelSchedule}>
+								{t.cancelScheduledUpdate}
+							</button>
+						{/if}
+
 						{#if entryStatus === 'published'}
 							<button class="btn-danger-outline" onclick={handleUnpublish}>
 								{t.unpublish}
@@ -429,6 +473,14 @@
 	</Sheet.Content>
 </Sheet.Root>
 
+<ConfirmationDialog
+	bind:open={archiveConfirmOpen}
+	title={lang[interfaceLanguage.current].confirmArchiveTitle}
+	description={lang[interfaceLanguage.current].confirmArchiveDescription}
+	confirmLabel={lang[interfaceLanguage.current].confirmArchiveAction}
+	onConfirm={performArchive}
+/>
+
 <style>
 	.sheet-body {
 		padding: 18px 20px;
@@ -524,6 +576,10 @@
 	.schedule-input:focus {
 		border-color: var(--primary);
 	}
+	.schedule-input:focus-visible {
+		outline: 2px solid var(--ring);
+		outline-offset: 1px;
+	}
 	.btn-schedule {
 		width: 100%;
 		padding: 8px;

package/dist/admin/client/entry/header/save-indicator.svelte

@@ -1,42 +1,65 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
+	import { formatRelativeDate } from '../../../utils/formatters.js';
 	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
 	import Check from '@tabler/icons-svelte/icons/check';
 	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
 
+	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
+
+	type Props = {
+		status: SaveStatus;
+		lastSavedAt?: Date | null;
+	};
+
+	let { status, lastSavedAt = null }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
 	const lang: Record<
 		InterfaceLanguage,
 		{
 			saving: string;
-			saved: string;
+			savedJustNow: string;
+			savedAgo: (relative: string) => string;
 			unsaved: string;
 			error: string;
 		}
 	> = {
-		en: {
-			saving: 'Saving draft...',
-			saved: 'Draft saved',
-			unsaved: 'Unsaved changes',
-			error: 'Could not save — try again'
-		},
 		pl: {
-			saving: 'Zapisywanie szkicu...',
-			saved: 'Szkic zapisany',
+			saving: 'Zapisuję…',
+			savedJustNow: 'Zapisano przed chwilą',
+			savedAgo: (rel: string) => `Zapisano ${rel}`,
 			unsaved: 'Niezapisane zmiany',
-			error: 'Nie udało się zapisać — spróbuj ponownie'
+			error: 'Błąd zapisu — spróbuj ponownie'
+		},
+		en: {
+			saving: 'Saving…',
+			savedJustNow: 'Saved just now',
+			savedAgo: (rel: string) => `Saved ${rel}`,
+			unsaved: 'Unsaved changes',
+			error: 'Save failed — try again'
 		}
 	};
 
-	const interfaceLanguage = useInterfaceLanguage();
-
-	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
+	let now = $state(new Date());
 
-	type Props = {
-		status: SaveStatus;
-	};
+	$effect(() => {
+		if (status !== 'saved' || !lastSavedAt) return;
+		const interval = setInterval(() => {
+			now = new Date();
+		}, 30000);
+		return () => clearInterval(interval);
+	});
 
-	let { status }: Props = $props();
+	const savedLabel = $derived.by(() => {
+		if (!lastSavedAt) return lang[interfaceLanguage.current].savedJustNow;
+		const diffMs = now.getTime() - lastSavedAt.getTime();
+		if (diffMs < 10000) return lang[interfaceLanguage.current].savedJustNow;
+		const rel = formatRelativeDate(lastSavedAt, interfaceLanguage.current);
+		return lang[interfaceLanguage.current].savedAgo(rel);
+	});
 
 	const isError = $derived(status === 'error');
 </script>
@@ -45,24 +68,30 @@
 	role={isError ? 'alert' : 'status'}
 	aria-live={isError ? 'assertive' : 'polite'}
 	aria-atomic="true"
-	class="flex items-center gap-1.5 text-xs font-medium transition-all duration-200 {status === 'idle' ? 'invisible' : ''}"
+	class="flex items-center gap-1.5 text-xs font-medium transition-all duration-200 {status ===
+	'idle'
+		? 'invisible'
+		: ''}"
 >
 	{#if status === 'saving'}
-		<Loader2 class="size-3.5 animate-spin text-muted-foreground" />
-		<span class="text-muted-foreground">{lang[interfaceLanguage.current].saving}</span>
+		<Loader2 class="text-muted-foreground size-3.5 animate-spin" aria-hidden="true" />
+		<span class="text-muted-foreground max-sm:sr-only"
+			>{lang[interfaceLanguage.current].saving}</span
+		>
 	{:else if status === 'saved'}
-		<Check class="size-3.5 text-emerald-600 dark:text-emerald-400" />
-		<span class="text-emerald-600 dark:text-emerald-400">{lang[interfaceLanguage.current].saved}</span>
+		<Check class="size-3.5 text-emerald-700 dark:text-emerald-400" aria-hidden="true" />
+		<span class="text-emerald-700 max-sm:sr-only dark:text-emerald-400">{savedLabel}</span>
 	{:else if status === 'unsaved'}
-		<span class="size-1.5 rounded-full bg-amber-500 animate-pulse"></span>
-		<span class="text-amber-600 dark:text-amber-400">{lang[interfaceLanguage.current].unsaved}</span>
+		<span class="size-1.5 animate-pulse rounded-full bg-amber-500" aria-hidden="true"></span>
+		<span class="text-amber-700 max-sm:sr-only dark:text-amber-400"
+			>{lang[interfaceLanguage.current].unsaved}</span
+		>
 	{:else if status === 'error'}
-		<span class="flex items-center gap-1.5 rounded-md bg-red-500/10 px-2 py-0.5">
-			<AlertCircle class="size-3.5 text-red-600 dark:text-red-400" />
-			<span class="text-red-600 dark:text-red-400">{lang[interfaceLanguage.current].error}</span>
+		<span class="bg-destructive-bg flex items-center gap-1.5 rounded-md px-2 py-0.5">
+			<AlertCircle class="text-destructive size-3.5" aria-hidden="true" />
+			<span class="text-destructive max-sm:sr-only">{lang[interfaceLanguage.current].error}</span>
 		</span>
 	{:else}
-		<!-- idle: invisible but in DOM so live region is registered -->
 		<span class="sr-only">&nbsp;</span>
 	{/if}
 </div>

package/dist/admin/client/entry/header/save-indicator.svelte.d.ts

@@ -1,6 +1,7 @@
 type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 type Props = {
     status: SaveStatus;
+    lastSavedAt?: Date | null;
 };
 declare const SaveIndicator: import("svelte").Component<Props, {}, "">;
 type SaveIndicator = ReturnType<typeof SaveIndicator>;

package/dist/admin/client/entry/header/status-badge.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
-	import type { DbEntryVersion, EntryVersionStatus, RawEntry } from '../../../../types/entries.js';
+	import { getContentLanguage } from '../../../state/content-language.svelte.js';
+	import type { EntryVersionStatus, RawEntry } from '../../../../types/entries.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
+	import { getLangPublishState } from '../utils.js';
+	import ClockFilled from '@tabler/icons-svelte/icons/clock-filled';
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
 			status: Record<EntryVersionStatus, string>;
 			ariaLabel: Record<EntryVersionStatus, string>;
+			scheduledUpdate: (date: string) => string;
+			scheduledUpdateAria: (date: string) => string;
 		}
 	> = {
 		en: {
@@ -20,7 +25,9 @@
 				draft: 'You are editing a draft — it is not yet visible to readers',
 				scheduled: 'This entry is scheduled for publication',
 				published: 'This entry is published and visible to readers'
-			}
+			},
+			scheduledUpdate: (date) => `update ${date}`,
+			scheduledUpdateAria: (date) => `; a content update is scheduled for ${date}`
 		},
 		pl: {
 			status: {
@@ -32,40 +39,78 @@
 				draft: 'Edytujesz szkic — nie jest jeszcze widoczny dla czytelników',
 				scheduled: 'Ten wpis jest zaplanowany do publikacji',
 				published: 'Ten wpis jest opublikowany i widoczny dla czytelników'
-			}
+			},
+			scheduledUpdate: (date) => `aktualizacja ${date}`,
+			scheduledUpdateAria: (date) => `; zaplanowana aktualizacja treści na ${date}`
 		}
 	};
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	type Props = {
 		entry: RawEntry;
-		version: DbEntryVersion;
 	};
 
-	let { entry, version }: Props = $props();
+	let { entry }: Props = $props();
 
-	const isPublishedVersion = $derived(entry.publishedVersions[version.lang]?.id === version.id);
-	const isScheduledVersion = $derived(entry.scheduledVersions[version.lang]?.id === version.id);
+	const state = $derived(getLangPublishState(entry, contentLanguage.current));
 
-	const currentStatus = $derived.by((): EntryVersionStatus => {
-		if (isPublishedVersion) return 'published';
-		if (isScheduledVersion) return 'scheduled';
-		return 'draft';
-	});
+	// Badge never renders 'archived' here (header hides actions when archived);
+	// fall back to 'draft' styling defensively.
+	const currentStatus = $derived<EntryVersionStatus>(
+		state.status === 'published' || state.status === 'scheduled' ? state.status : 'draft'
+	);
 
 	const dotColor = $derived.by(() => {
 		if (currentStatus === 'published') return 'var(--success)';
 		if (currentStatus === 'scheduled') return 'var(--warning)';
 		return 'var(--text-light)';
 	});
+
+	const showUpdateHint = $derived(
+		state.status === 'published' && state.hasScheduledUpdate && state.scheduledAt != null
+	);
+
+	function formatShort(date: Date): string {
+		return date.toLocaleString(interfaceLanguage.current, {
+			day: '2-digit',
+			month: '2-digit',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	const t = $derived(lang[interfaceLanguage.current]);
+	const scheduledLabel = $derived(
+		showUpdateHint && state.scheduledAt ? formatShort(state.scheduledAt) : ''
+	);
+	const ariaLabel = $derived(
+		t.ariaLabel[currentStatus] +
+			(showUpdateHint ? t.scheduledUpdateAria(scheduledLabel) : '')
+	);
 </script>
 
 <span
 	role="status"
-	aria-label={lang[interfaceLanguage.current].ariaLabel[currentStatus]}
+	aria-label={ariaLabel}
 	class="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-xs font-semibold text-muted-foreground"
 >
-	<span class="size-[7px] rounded-full shrink-0" style="background:{dotColor}" aria-hidden="true"></span>
-	{lang[interfaceLanguage.current].status[currentStatus]}
+	<span
+		class="size-[7px] rounded-full shrink-0"
+		style="background:{dotColor}"
+		aria-hidden="true"
+	></span>
+	{t.status[currentStatus]}
+
+	{#if showUpdateHint}
+		<span
+			class="inline-flex items-center gap-1 border-l border-border/70 pl-1.5"
+			style="color: var(--warning)"
+			aria-hidden="true"
+		>
+			<ClockFilled class="size-3" />
+			{t.scheduledUpdate(scheduledLabel)}
+		</span>
+	{/if}
 </span>

package/dist/admin/client/entry/header/status-badge.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { DbEntryVersion, RawEntry } from '../../../../types/entries.js';
+import type { RawEntry } from '../../../../types/entries.js';
 type Props = {
     entry: RawEntry;
-    version: DbEntryVersion;
 };
 declare const StatusBadge: import("svelte").Component<Props, {}, "">;
 type StatusBadge = ReturnType<typeof StatusBadge>;

package/dist/admin/client/entry/header/version-history-sheet.svelte

@@ -170,7 +170,7 @@
 <Sheet.Root bind:open>
 	<Sheet.Trigger>
 		{#snippet child({ props })}
-			<Button variant="ghost" size="icon-sm" {...props}>
+			<Button variant="ghost" size="icon-sm" aria-label={t.history} {...props}>
 				<HistoryIcon class="size-4" />
 			</Button>
 		{/snippet}