includio-cms 0.25.0 → 0.26.0

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

@@ -6,7 +6,16 @@
 	} from 'sveltekit-superforms';
 	import { onMount } from 'svelte';
 	import Input from '../../../components/ui/input/input.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { Switch } from '../../../components/ui/switch/index.js';
+	import RequiredLabel from './required-label.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import slugify from '../../imports/slugify.js';
+	import { UseClipboard } from '../../../components/hooks/use-clipboard.svelte.js';
+	import { toast } from 'svelte-sonner';
+	import Copy from '@tabler/icons-svelte/icons/copy';
+	import Check from '@tabler/icons-svelte/icons/check';
 	import type { SlugField } from '../../../types/fields.js';
 
 	type Props = {
@@ -17,45 +26,28 @@
 
 	let { field, form, path, ...props }: Props = $props();
 
+	const interfaceLanguage = useInterfaceLanguage();
+
 	let effectivePattern = field.pattern || (field.sourceField ? `{${field.sourceField}}` : undefined);
 	let pattern = effectivePattern;
 
 	const { form: formData } = form;
-
 	const { value } = formFieldProxy(form, path);
 
 	let patternKeys = effectivePattern ? extractPatternKeys(effectivePattern) : [];
+	const clipboard = new UseClipboard();
 
 	function extractPatternKeys(pattern: string): string[] {
 		const matches = [...pattern.matchAll(/{([^}]+)}/g)];
 		return matches.map(([, key]) => key);
 	}
 
-	onMount(() => {
-		if (pattern) {
-			patternKeys.map((key) => {
-				const { value: valueStore } = formFieldProxy(
-					form,
-					key as FormPathLeaves<Record<string, unknown>>
-				);
-				valueStore.subscribe(() => {
-					try {
-						$value = generateSlug(pattern);
-					} catch {
-						// Pattern key not yet filled - ignore
-					}
-				});
-			});
-		}
-	});
-
 	function generateSlug(pattern: string) {
 		const replacedPattern = pattern.replace(/{([^}]+)}/g, (_, key) => {
 			const keyValue = $formData[key];
 			if (keyValue === undefined) {
 				throw new Error(`Key not found in form data: ${key}`);
 			}
-
 			return String(keyValue);
 		});
 
@@ -65,6 +57,139 @@
 			trim: true
 		});
 	}
+
+	// Auto/manual toggle, mirroring the SEO slug UX. Default mode is inferred
+	// from the current value: an empty/exact-match-with-pattern slug stays in
+	// auto mode (source-of-truth = title); anything diverging means the
+	// editor took ownership and we start in manual.
+	let autoMode = $state(
+		(() => {
+			if (!pattern) return false;
+			const current = typeof $value === 'string' ? $value : '';
+			if (current === '') return true;
+			try {
+				return current === generateSlug(pattern);
+			} catch {
+				return false;
+			}
+		})()
+	);
+
+	onMount(() => {
+		if (!pattern) return;
+		const unsubscribers = patternKeys.map((key) => {
+			const { value: valueStore } = formFieldProxy(
+				form,
+				key as FormPathLeaves<Record<string, unknown>>
+			);
+			return valueStore.subscribe(() => {
+				if (!autoMode) return;
+				try {
+					$value = generateSlug(pattern);
+				} catch {
+					// Pattern key not yet filled - ignore
+				}
+			});
+		});
+		return () => unsubscribers.forEach((u) => u());
+	});
+
+	function onSlugInput() {
+		// Manual edit while auto is on flips to manual silently — the toggle
+		// state reflects what the editor actually controls.
+		if (autoMode) autoMode = false;
+	}
+
+	function onAutoToggle(checked: boolean) {
+		autoMode = checked;
+		if (!checked || !pattern) return;
+		try {
+			$value = generateSlug(pattern);
+		} catch {
+			// Source field empty — keep current value, auto will fill once typed
+		}
+	}
+
+	const previewSlug = $derived(
+		typeof $value === 'string' && $value
+			? slugify($value, { lower: true, strict: true, trim: true })
+			: ''
+	);
+	const showPreview = $derived(previewSlug && previewSlug !== $value);
+
+	async function copySlug() {
+		const text = typeof $value === 'string' ? $value : '';
+		if (!text) return;
+		const result = await clipboard.copy(text);
+		if (result === 'success') {
+			toast.success('Skopiowano slug');
+		} else {
+			toast.error('Nie udało się skopiować');
+		}
+	}
 </script>
 
-<Input {...props} bind:value={$value} type="text" placeholder={field.pattern} />
+<!-- space-y-2 = 8px gap (matches other field types via form-field.svelte) -->
+<div class="space-y-2">
+	{#if field.label || pattern}
+		<div class="flex items-center justify-between gap-3">
+			{#if field.label}
+				<RequiredLabel required={field.required}>
+					{getLocalizedLabel(field.label, interfaceLanguage.current)}
+				</RequiredLabel>
+			{:else}
+				<span></span>
+			{/if}
+			{#if pattern}
+				<div class="flex items-center gap-2">
+					<span class="text-muted-foreground text-sm font-medium">Auto</span>
+					<Switch bind:checked={autoMode} onCheckedChange={onAutoToggle} aria-label="Generuj slug automatycznie z tytułu" />
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	<div class="flex items-stretch gap-2">
+		<Input
+			{...props}
+			bind:value={$value}
+			oninput={onSlugInput}
+			type="text"
+			placeholder={field.pattern}
+			readonly={autoMode}
+			aria-readonly={autoMode}
+			class="flex-1"
+		/>
+		{#if typeof $value === 'string' && $value}
+			<Button
+				type="button"
+				variant="outline"
+				size="icon"
+				aria-label="Skopiuj slug"
+				onclick={copySlug}
+			>
+				{#if clipboard.copied}
+					<Check class="size-4" />
+				{:else}
+					<Copy class="size-4" />
+				{/if}
+			</Button>
+		{/if}
+	</div>
+
+	{#if pattern}
+		<p class="text-muted-foreground text-xs">
+			{#if autoMode}
+				Slug generowany automatycznie z tytułu. Wyłącz „Auto", żeby edytować ręcznie.
+			{:else}
+				Slug ustawiony ręcznie. Włącz „Auto", żeby śledził tytuł.
+			{/if}
+		</p>
+	{/if}
+
+	{#if showPreview}
+		<p class="text-muted-foreground text-xs">
+			Wygenerowany: <code class="bg-muted rounded px-1 py-0.5">{previewSlug}</code>
+		</p>
+	{/if}
+</div>

package/dist/admin/components/fields/text-field-wrapper.svelte

@@ -28,8 +28,13 @@
 	const formData = form.form;
 
 	const isText = $derived(field.type === 'text');
+	const patternHintText = $derived(
+		field.type === 'text' && field.patternHint
+			? getLocalizedLabel(field.patternHint, interfaceLanguage.current)
+			: ''
+	);
 	const hasConstraints = $derived(
-		isText && (field.minLength !== undefined || field.maxLength !== undefined || field.pattern !== undefined)
+		isText && (field.minLength !== undefined || field.maxLength !== undefined || !!patternHintText)
 	);
 
 	function resolvePathValue(data: Record<string, unknown>, dotPath: string): unknown {
@@ -80,22 +85,33 @@
 		{@const val = resolvePathValue($formData, path)}
 		{@const charCount = typeof val === 'string' ? val.length : 0}
 		{@const atLimit = field.type === 'text' && field.maxLength !== undefined && charCount >= field.maxLength}
-		<div class="flex items-start justify-between gap-4">
-			{#if field.description || hasConstraints}
-				<Form.Description class="flex-1">
-					{#if field.description}{getLocalizedLabel(field.description, interfaceLanguage.current)}{/if}
-					{#if hasConstraints}
-						{#if field.description && constraintHint()}<br />{/if}
-						{#if constraintHint()}{constraintHint()}{/if}
-						{#if field.type === 'text' && field.pattern}
-							{#if constraintHint()} · {/if}Format: <code class="text-xs bg-muted px-1 py-0.5 rounded">{field.pattern}</code>
+		<!--
+			Error + description share the left cell of one flex row with the char
+			counter on the right — so the error sits right under THIS input instead
+			of dropping a row below the counter (where it reads as the next field's).
+		-->
+		<div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+			<div class="order-2 flex-1 space-y-1 sm:order-1">
+				{#if field.description || hasConstraints}
+					<Form.Description>
+						{#if field.description}{getLocalizedLabel(field.description, interfaceLanguage.current)}{/if}
+						{#if hasConstraints}
+							{#if field.description && (constraintHint() || patternHintText)}<br />{/if}
+							{#if constraintHint()}{constraintHint()}{/if}
+							{#if patternHintText}
+								{#if constraintHint()} · {/if}{patternHintText}
+							{/if}
 						{/if}
-					{/if}
-				</Form.Description>
-			{:else}
-				<div></div>
-			{/if}
-			<span class="shrink-0 text-xs {atLimit ? 'text-destructive' : 'text-muted-foreground'}" aria-live="polite">
+					</Form.Description>
+				{/if}
+				<Form.FieldErrors />
+			</div>
+			<span
+				class="order-1 self-end shrink-0 text-xs sm:order-2 sm:self-auto {atLimit
+					? 'text-destructive'
+					: 'text-muted-foreground'}"
+				aria-live="polite"
+			>
 				{#if field.type === 'text' && field.maxLength !== undefined}
 					{charCount} / {field.maxLength}
 				{:else if field.type === 'text' && field.minLength !== undefined}
@@ -105,9 +121,10 @@
 				{/if}
 			</span>
 		</div>
-	{:else if field.description}
-		<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
+	{:else}
+		{#if field.description}
+			<Form.Description>{getLocalizedLabel(field.description, interfaceLanguage.current)}</Form.Description>
+		{/if}
+		<Form.FieldErrors />
 	{/if}
-
-	<Form.FieldErrors />
 </Form.Field>

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

@@ -22,8 +22,13 @@
 	});
 </script>
 
+<!--
+	No hard `minlength`/`maxlength` attrs: silently blocking input is hostile to
+	cognitive/AT users (COGA, WCAG 3.3). The char counter + schema validation in
+	text-field-wrapper communicate the limit instead.
+-->
 {#if field.multiline}
-	<Textarea {...props} bind:value placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
+	<Textarea {...props} bind:value placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} />
 {:else}
-	<Input {...props} bind:value type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} minlength={field.minLength} maxlength={field.maxLength} />
+	<Input {...props} bind:value type="text" placeholder={getLocalizedLabel(field.placeholder, interfaceLanguage.current)} />
 {/if}

package/dist/admin/components/fields/url-field-wrapper.svelte

@@ -11,6 +11,7 @@
 		type FormPathLeaves,
 		type SuperForm
 	} from 'sveltekit-superforms';
+	import * as Form from '../../../components/ui/form/index.js';
 	import UrlFieldComponent from './url-field.svelte';
 
 	type Props = {
@@ -59,4 +60,13 @@
 
 {#if fieldValid && $value}
 	<UrlFieldComponent {field} bind:value={$value} {...props} />
+	<!--
+		Schema reports issues at `<path>.url` (the actual string field inside the
+		composite url object). The outer Form.Field in field-renderer is on `path`
+		(root), so its FieldErrors never sees the nested issue. A scoped sibling
+		Field surfaces it at the input.
+	-->
+	<Form.Field {form} name={`${path}.url` as FormPathLeaves<T>}>
+		<Form.FieldErrors />
+	</Form.Field>
 {/if}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SeoFieldData, UrlField, UrlFieldData } from '../../../types/fields.js';
+	import type { UrlField, UrlFieldData } from '../../../types/fields.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { Entry } from '../../../types/entries.js';
 	import * as InputGroup from '../../../components/ui/input-group/index.js';
@@ -7,6 +7,7 @@
 	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
 	import Label from '../../../components/ui/label/label.svelte';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { debounce } from '../../utils/debounce.js';
 	import { isExternalUrl } from '../../../core/fields/urlUtils.js';
@@ -20,6 +21,7 @@
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	const labels = {
 		linkText: { en: 'Displayed link text', pl: 'Tekst wyświetlany jako link' },
@@ -38,11 +40,14 @@
 		internal: { en: 'Internal', pl: 'Wewnętrzny' }
 	};
 
-	type EntryWithSeo = {
+	type LinkSuggestion = {
 		_id: string;
 		_slug: string;
-		seo?: SeoFieldData;
+		_url?: string;
+		title: string;
+		slug: string;
 	};
+	type LinkedDisplay = { _id: string; title: string; slug: string };
 
 	type Props = {
 		field: UrlField;
@@ -60,9 +65,9 @@
 	// Autocomplete state
 	let popoverOpen = $state(false);
 	let activeIndex = $state(-1);
-	let linkedEntry = $state<EntryWithSeo | null>(null);
+	let linkedEntry = $state<LinkedDisplay | null>(null);
 	let searchTerm = $state('');
-	let autocompleteSuggestions = $state<EntryWithSeo[]>([]);
+	let autocompleteSuggestions = $state<LinkSuggestion[]>([]);
 
 	$effect(() => {
 		const term = searchTerm;
@@ -73,16 +78,12 @@
 		let cancelled = false;
 		(async () => {
 			try {
-				const [slugResults, titleResults] = (await Promise.all([
-					remotes.getEntries({ dataLike: { seo: { slug: term } } }),
-					remotes.getEntries({ dataLike: { seo: { title: term } } })
-				])) as [EntryWithSeo[], EntryWithSeo[]];
+				const results = (await remotes.searchLinkableEntries({
+					term,
+					language: contentLanguage.current
+				})) as LinkSuggestion[];
 				if (cancelled) return;
-				const combined = [...slugResults, ...titleResults];
-				const deduped = combined.filter(
-					(entry, index, self) => index === self.findIndex((e) => e._id === entry._id)
-				);
-				autocompleteSuggestions = deduped.slice(0, 5);
+				autocompleteSuggestions = results;
 			} catch {
 				if (!cancelled) autocompleteSuggestions = [];
 			}
@@ -107,9 +108,20 @@
 		}
 	});
 
-	async function fetchLinkedEntry(id: string | undefined): Promise<EntryWithSeo | null> {
+	async function fetchLinkedEntry(id: string | undefined): Promise<LinkedDisplay | null> {
 		if (!id) return null;
-		return remotes.getEntry({ id }) as Promise<EntryWithSeo | null>;
+		const entry = (await remotes.getEntry({
+			id,
+			language: contentLanguage.current
+		})) as
+			| { _id: string; seo?: { title?: string; slug?: string } }
+			| null;
+		if (!entry) return null;
+		return {
+			_id: entry._id,
+			title: typeof entry.seo?.title === 'string' ? entry.seo.title : '',
+			slug: typeof entry.seo?.slug === 'string' ? entry.seo.slug : ''
+		};
 	}
 
 	const applySearchTerm = debounce((url: string) => {
@@ -130,9 +142,9 @@
 		activeIndex = -1;
 	}
 
-	function linkEntry(entry: EntryWithSeo) {
+	function linkEntry(entry: LinkSuggestion) {
 		value.id = entry._id;
-		linkedEntry = entry;
+		linkedEntry = { _id: entry._id, title: entry.title, slug: entry.slug };
 		searchTerm = '';
 		popoverOpen = false;
 	}
@@ -191,11 +203,11 @@
 			<div class="flex min-w-0 flex-1 items-center gap-2 py-1.5">
 				<Badge variant="secondary" class="max-w-full gap-1.5 truncate">
 					<span class="truncate font-medium">
-						{linkedEntry.seo?.title || linkedEntry._id}
+						{linkedEntry.title || linkedEntry._id}
 					</span>
-					{#if linkedEntry.seo?.slug}
+					{#if linkedEntry.slug}
 						<span class="text-muted-foreground truncate text-[10px] font-normal">
-							{linkedEntry.seo.slug}
+							{linkedEntry.slug}
 						</span>
 					{/if}
 				</Badge>
@@ -217,6 +229,7 @@
 				<GlobeIcon class="size-4" />
 			</InputGroup.Addon>
 			<InputGroup.Input
+				{...props}
 				bind:value={value.url}
 				type="text"
 				placeholder={getLocalizedLabel(labels.placeholder, interfaceLanguage.current)}
@@ -264,10 +277,10 @@
 				>
 					<LinkIcon class="text-muted-foreground size-3.5 shrink-0" />
 					<span class="truncate text-sm">
-						{suggestion.seo?.title || getLocalizedLabel(labels.noTitle, interfaceLanguage.current)}
+						{suggestion.title || getLocalizedLabel(labels.noTitle, interfaceLanguage.current)}
 					</span>
 					<span class="text-muted-foreground ml-auto shrink-0 text-xs">
-						{suggestion.seo?.slug || ''}
+						{suggestion.slug || suggestion._url || ''}
 					</span>
 				</button>
 			{/each}

package/dist/admin/components/forms/form-error-summary.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+	/**
+	 * @internal
+	 * Form error summary banner — renders above forms when validation fails.
+	 * Aria-live alert announces errors to screen readers; click anchor scrolls
+	 * to `[data-field-path="…"]` and focuses the input inside.
+	 *
+	 * Used by entry-page (S8), coupon-form, shipping-method-form, shop-order-detail.
+	 */
+	export type FormErrorEntry = {
+		/** Dot/bracket path matching `data-field-path` in the form. */
+		path: string;
+		/** Localized error message. */
+		message: string;
+		/** Optional human-readable field label; falls back to `path`. */
+		label?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { tick } from 'svelte';
+	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
+	import XIcon from '@tabler/icons-svelte/icons/x';
+	import { cn } from '../../../utils.js';
+	import { scrollIntoViewWithin } from '../../utils/scrollWithin.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type Props = {
+		errors?: FormErrorEntry[];
+		title?: string;
+		onFocusField?: (path: string) => void;
+		/** When provided, shows a close button that calls this. */
+		onDismiss?: () => void;
+		class?: string;
+	};
+
+	let { errors = [], title, onFocusField, onDismiss, class: className }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<InterfaceLanguage, { title: string; jumpTo: string; dismiss: string }> = {
+		pl: {
+			title: 'Sprawdź te pola, żebyśmy mogli zapisać',
+			jumpTo: 'Przejdź do pola',
+			dismiss: 'Zamknij'
+		},
+		en: {
+			title: 'Check these fields so we can save',
+			jumpTo: 'Jump to field',
+			dismiss: 'Dismiss'
+		}
+	};
+
+	const resolvedTitle = $derived(title ?? lang[interfaceLanguage.current].title);
+
+	let prevCount = $state(0);
+	let rootEl = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		const count = errors.length;
+		if (count > 0 && prevCount === 0) {
+			// Move focus to the summary itself (not to a field) so the user reviews
+			// the whole list first; `role="alert"` also announces it to AT. The
+			// user then clicks an entry to jump to a specific field.
+			tick().then(() => {
+				if (!rootEl) return;
+				rootEl.focus({ preventScroll: true });
+				scrollIntoViewWithin(rootEl);
+			});
+		}
+		prevCount = count;
+	});
+
+	function focusField(path: string | undefined) {
+		if (!path) return;
+		if (typeof document === 'undefined') return;
+		const target = document.querySelector<HTMLElement>(`[data-field-path="${cssEscape(path)}"]`);
+		if (!target) {
+			onFocusField?.(path);
+			return;
+		}
+		scrollIntoViewWithin(target);
+		const focusable = target.querySelector<HTMLElement>(
+			'input, textarea, select, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
+		);
+		focusable?.focus({ preventScroll: true });
+		onFocusField?.(path);
+	}
+
+	function cssEscape(value: string): string {
+		if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(value);
+		return value.replace(/(["\\])/g, '\\$1');
+	}
+
+	function handleClick(event: MouseEvent, path: string) {
+		event.preventDefault();
+		focusField(path);
+	}
+</script>
+
+{#if errors.length > 0}
+	<div
+		bind:this={rootEl}
+		role="alert"
+		tabindex="-1"
+		aria-live="assertive"
+		aria-atomic="true"
+		data-testid="form-error-summary"
+		class={cn(
+			'border-destructive/40 bg-destructive-bg text-destructive flex flex-col gap-2 rounded-xl border p-4',
+			className
+		)}
+	>
+		<div class="flex items-start gap-2">
+			<AlertCircle class="mt-0.5 size-5 shrink-0" aria-hidden="true" />
+			<h2 class="flex-1 text-sm font-semibold">{resolvedTitle}</h2>
+			{#if onDismiss}
+				<button
+					type="button"
+					class="text-destructive/70 hover:text-destructive hover:bg-destructive/10 -my-1 -mr-1 shrink-0 rounded p-1 transition-colors"
+					aria-label={lang[interfaceLanguage.current].dismiss}
+					onclick={() => onDismiss?.()}
+				>
+					<XIcon class="size-4" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+		<ul class="ml-7 flex list-disc flex-col gap-1 text-sm">
+			{#each errors as error, i (i)}
+				<li>
+					<a
+						href={`#${cssEscape(error.path)}`}
+						class="hover:text-destructive/80 underline underline-offset-2"
+						onclick={(e) => handleClick(e, error.path)}
+					>
+						<span class="font-medium">{error.label ?? error.path}</span>: {error.message}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}

package/dist/admin/components/forms/form-error-summary.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @internal
+ * Form error summary banner — renders above forms when validation fails.
+ * Aria-live alert announces errors to screen readers; click anchor scrolls
+ * to `[data-field-path="…"]` and focuses the input inside.
+ *
+ * Used by entry-page (S8), coupon-form, shipping-method-form, shop-order-detail.
+ */
+export type FormErrorEntry = {
+    /** Dot/bracket path matching `data-field-path` in the form. */
+    path: string;
+    /** Localized error message. */
+    message: string;
+    /** Optional human-readable field label; falls back to `path`. */
+    label?: string;
+};
+type Props = {
+    errors?: FormErrorEntry[];
+    title?: string;
+    onFocusField?: (path: string) => void;
+    /** When provided, shows a close button that calls this. */
+    onDismiss?: () => void;
+    class?: string;
+};
+declare const FormErrorSummary: import("svelte").Component<Props, {}, "">;
+type FormErrorSummary = ReturnType<typeof FormErrorSummary>;
+export default FormErrorSummary;

package/dist/admin/components/layout/app-sidebar.svelte

@@ -9,7 +9,12 @@
 	import NavShop from './nav-shop.svelte';
 	import NavSearch from './nav-search.svelte';
 	import { resolve } from '$app/paths';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { sidebarLang } from './lang.js';
+
 	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
 </script>
 
 <Sidebar.Root collapsible="icon" class="bg-sidebar" {...restProps}>
@@ -30,13 +35,13 @@
 	</Sidebar.Header>
 	<Sidebar.Content class="gap-0">
 		<NavSearch />
-		<div class="py-1">
+		<nav id="admin-nav" aria-label={sidebarLang[interfaceLanguage.current].nav.primary} class="py-1">
 			<NavMain />
 			<NavSingletons />
 			<NavCollections />
 			<NavForms />
 			<NavShop />
-		</div>
+		</nav>
 	</Sidebar.Content>
 	<Sidebar.Footer class="p-0">
 		<NavFooter />