@sinequa/atomic-angular 2.5.0 → 2.7.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,11 +2,11 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { getState, patchState, signalStore, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
-import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, queryParamsFromUrl, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
+import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
 import { DomSanitizer, Title } from "@angular/platform-browser";
 import MarkdownIt from "markdown-it";
 import { DATE_PIPE_DEFAULT_OPTIONS, DATE_PIPE_DEFAULT_TIMEZONE, DatePipe, Location, NgComponentOutlet, NgStyle, NgTemplateOutlet } from "@angular/common";
@@ -214,47 +214,55 @@ function withAppFeatures() {
 		data: {}
 	}), withMethods((store) => {
 		const client = inject(ATOMIC_CLIENT);
-		return {
-			async initialize() {
-				let app;
-				try {
-					app = await client.api.app.get();
-				} catch (error) {
-					console.error("Error fetching app data:", error);
-					throw error;
-				}
-				patchState(store, app);
-				const columnMap = {};
-				Object.values(extraColumns).forEach((col) => {
-					columnMap[col.name.toLocaleLowerCase()] = col;
+		const hydrate = (app) => {
+			patchState(store, app);
+			const columnMap = {};
+			Object.values(extraColumns).forEach((col) => {
+				columnMap[col.name.toLocaleLowerCase()] = col;
+				if (col.aliases) col.aliases.forEach((alias) => {
+					columnMap[alias.toLocaleLowerCase()] = col;
+				});
+			});
+			const schema = app.indexes._?.columns;
+			if (schema) {
+				Object.keys(schema).forEach((schemaKey) => {
+					const col = schema[schemaKey.toLocaleLowerCase()];
+					if (!col) return;
+					columnMap[schemaKey.toLocaleLowerCase()] = col;
 					if (col.aliases) col.aliases.forEach((alias) => {
 						columnMap[alias.toLocaleLowerCase()] = col;
 					});
 				});
-				const schema = app.indexes._?.columns;
-				if (schema) {
-					Object.keys(schema).forEach((schemaKey) => {
-						const col = schema[schemaKey.toLocaleLowerCase()];
+				Object.keys(app.queries).forEach((queryKey) => {
+					const query = app.queries[queryKey];
+					if (query.columnsInfo?.columns) Object.values(query.columnsInfo.columns).forEach((c) => {
+						const col = schema[c.name.toLocaleLowerCase()];
 						if (!col) return;
-						columnMap[schemaKey.toLocaleLowerCase()] = col;
-						if (col.aliases) col.aliases.forEach((alias) => {
+						columnMap[c.name.toLocaleLowerCase()] = col;
+						if (c.aliases) c.aliases.split(/[,;|]/).map((a) => a.trim()).forEach((alias) => {
 							columnMap[alias.toLocaleLowerCase()] = col;
 						});
 					});
-					Object.keys(app.queries).forEach((queryKey) => {
-						const query = app.queries[queryKey];
-						if (query.columnsInfo?.columns) Object.values(query.columnsInfo.columns).forEach((c) => {
-							const col = schema[c.name.toLocaleLowerCase()];
-							if (!col) return;
-							columnMap[c.name.toLocaleLowerCase()] = col;
-							if (c.aliases) c.aliases.split(/[,;|]/).map((a) => a.trim()).forEach((alias) => {
-								columnMap[alias.toLocaleLowerCase()] = col;
-							});
-						});
-					});
-					patchState(store, { columnMap });
+				});
+				patchState(store, { columnMap });
+			}
+		};
+		const fail = (error) => {
+			console.error("Error fetching app data:", error);
+			throw error;
+		};
+		return {
+			async initialize() {
+				let app;
+				try {
+					app = await client.api.app.get();
+				} catch (error) {
+					return fail(error);
 				}
+				hydrate(app);
 			},
+			hydrate,
+			fail,
 			async initializeWithAppName(appName) {
 				const app = await client.api.app.get(appName);
 				patchState(store, app);
@@ -288,8 +296,9 @@ function withAppFeatures() {
 				};
 			},
 			getQueryByName(name) {
+				if (!name) return void 0;
 				const queries = store.queries();
-				return Object.values(queries).find((query) => query.name.toLowerCase() === name.toLowerCase());
+				return Object.values(queries).find((query) => query.name?.toLowerCase() === name.toLowerCase());
 			},
 			getQueryByIndex(index) {
 				const queries = store.queries();
@@ -500,7 +509,23 @@ const PrincipalStore = signalStore({ providedIn: "root" }, withDevtools("Princip
 })), withMethods((store) => {
 	const client = inject(ATOMIC_CLIENT);
 	let pendingInitialization = null;
+	const hydrate = (principal) => {
+		const { userOverrideActive = false } = client.config;
+		patchState(store, {
+			...initialPrincipal,
+			...principal,
+			userOverrideActive,
+			state: "loaded"
+		});
+	};
+	const fail = (error) => {
+		console.error("Principal fetch failed", error);
+		patchState(store, { state: "error" });
+		throw error;
+	};
 	return {
+		hydrate,
+		fail,
 		principal() {
 			const { userOverrideActive: _, ...rest } = getState(store);
 			return Object.entries(rest).reduce((acc, [k, v]) => {
@@ -513,18 +538,9 @@ const PrincipalStore = signalStore({ providedIn: "root" }, withDevtools("Princip
 			pendingInitialization = (async () => {
 				patchState(store, { state: "loading" });
 				try {
-					const principal = await client.api.principal.get();
-					const { userOverrideActive = false } = client.config;
-					patchState(store, {
-						...initialPrincipal,
-						...principal,
-						userOverrideActive,
-						state: "loaded"
-					});
+					hydrate(await client.api.principal.get());
 				} catch (error) {
-					console.error("Principal fetch failed", error);
-					patchState(store, { state: "error" });
-					throw error;
+					fail(error);
 				} finally {
 					pendingInitialization = null;
 				}
@@ -790,6 +806,9 @@ var QueryService = class QueryService {
 	result = signal({}, ...ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []);
 	failure = computed(() => this.result().$error, ...ngDevMode ? [{ debugName: "failure" }] : /* istanbul ignore next */ []);
 	audit;
+	warnEmptySearch() {
+		firstValueFrom(this.transloco.selectTranslate("emptySearch", {}, "searches")).catch(() => "Please enter a search query.").then((message) => notify.warning(message));
+	}
 	search(q, includeQueryParams = true, audit) {
 		const $auditRecord = { auditEvents: [audit ?? this.audit ?? {
 			type: "Search_Text",
@@ -805,7 +824,7 @@ var QueryService = class QueryService {
 		if (!((this.queryParamsStore.filters?.() || []).length > 0) && !query.basket && query.action !== "open") {
 			if (this.appStore.allowEmptySearch(query?.name || "") === false && query?.text === "") {
 				warn("QueryService.search: Empty search query is not allowed. Returning empty result.");
-				notify.warning(this.transloco.translate("searches.emptySearch"));
+				this.warnEmptySearch();
 				const emptyResult = { records: [] };
 				this.result.set(emptyResult);
 				return of(emptyResult);
@@ -1256,6 +1275,16 @@ function AuthGuard() {
 		return true;
 	};
 }
+const STARTUP_DATA_SOURCE = new InjectionToken("STARTUP_DATA_SOURCE", { factory: () => null });
+function provideStartupAggregation(endpoint = "bff/bootstrap") {
+	return makeEnvironmentProviders([{
+		provide: STARTUP_DATA_SOURCE,
+		useFactory: () => {
+			const client = inject(ATOMIC_CLIENT);
+			return () => client.http.get(endpoint);
+		}
+	}]);
+}
 var UserSettingsPersistence = class UserSettingsPersistence {
 	loaded = signal(false, ...ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []);
 	isLoaded = this.loaded.asReadonly();
@@ -1735,18 +1764,25 @@ function withUserSettingsFeatures() {
 	}), withMethods((store) => {
 		const client = inject(ATOMIC_CLIENT);
 		const persistence = inject(UserSettingsPersistence);
+		const hydrate = (settings) => {
+			patchState(store, {
+				...USER_SETTINGS_DEFAULTS,
+				...settings
+			});
+			persistence.markLoaded();
+		};
+		const fail = (err) => {
+			error("Error fetching user settings:", err);
+			persistence.markUnloaded();
+		};
 		return {
+			hydrate,
+			fail,
 			async initialize() {
 				try {
-					const settings = await client.api.userSettings.get();
-					patchState(store, {
-						...USER_SETTINGS_DEFAULTS,
-						...settings
-					});
-					persistence.markLoaded();
+					hydrate(await client.api.userSettings.get());
 				} catch (err) {
-					error("Error fetching user settings:", err);
-					persistence.markUnloaded();
+					fail(err);
 				}
 			},
 			async reset() {
@@ -1776,6 +1812,14 @@ function withAgentsFeatures() {
 	}));
 }
 const UserSettingsStore = signalStore({ providedIn: "root" }, withDevtools("UserSettings"), withBookmarkFeatures(), withRecentSearchesFeatures(), withSavedSearchesFeatures(), withBasketsFeatures(), withAssistantFeatures(), withUserSettingsFeatures(), withAlertsFeatures(), withAgentsFeatures(), withDarkModeFeatures(), withHighlightCategoriesFeatures());
+const toPart = (result) => result.status === "fulfilled" ? {
+	ok: true,
+	value: result.value
+} : {
+	ok: false,
+	error: result.reason
+};
+const provided = (part) => part && typeof part === "object" && part.ok === true ? Promise.resolve(part.value) : void 0;
 const ROUTE_COMPONENTS = new InjectionToken("ROUTE_COMPONENTS", { factory: () => [] });
 var ApplicationService = class ApplicationService {
 	userSettingsStore = inject(UserSettingsStore);
@@ -1785,6 +1829,7 @@ var ApplicationService = class ApplicationService {
 	router = inject(Router);
 	titleService = inject(Title);
 	client = inject(ATOMIC_CLIENT);
+	startupDataSource = inject(STARTUP_DATA_SOURCE);
 	components = inject(ROUTE_COMPONENTS);
 	defaultComponent = computed(() => this.components.find((c) => c.path === "all")?.component, ...ngDevMode ? [{ debugName: "defaultComponent" }] : /* istanbul ignore next */ []);
 	defaultLayoutComponent = computed(() => this.components.find((c) => c.isRoot)?.component, ...ngDevMode ? [{ debugName: "defaultLayoutComponent" }] : /* istanbul ignore next */ []);
@@ -1807,18 +1852,46 @@ var ApplicationService = class ApplicationService {
 	}
 	async initializeStores(options) {
 		try {
-			await this.appStore.initialize();
+			const data = await this.loadStartupData();
+			this.apply(data.app, this.appStore);
 			info("appStore", getState(this.appStore));
-			await this.principalStore.initialize();
+			this.apply(data.principal, this.principalStore);
 			info("principalStore", getState(this.principalStore));
 			this.queryParamsStore.reset({ syncUrl: options?.syncUrl ?? !options?.isBootstrap });
-			await this.userSettingsStore.initialize();
+			this.apply(data.userSettings, this.userSettingsStore);
 			info("userSettingsStore", getState(this.userSettingsStore));
 		} catch (err) {
 			error("Error during application initialization", err);
 			throw err;
 		}
 	}
+	async loadStartupData() {
+		const source = await this.readStartupDataSource();
+		const [app, principal, userSettings] = await Promise.allSettled([
+			provided(source?.app) ?? this.client.api.app.get(),
+			provided(source?.principal) ?? this.client.api.principal.get(),
+			provided(source?.userSettings) ?? this.client.api.userSettings.get()
+		]);
+		return {
+			app: toPart(app),
+			principal: toPart(principal),
+			userSettings: toPart(userSettings)
+		};
+	}
+	async readStartupDataSource() {
+		if (!this.startupDataSource) return void 0;
+		try {
+			const data = await this.startupDataSource();
+			if (data && typeof data === "object") return data;
+			warn("Start-up aggregation answered no data, reading each part instead", data);
+		} catch (err) {
+			warn("Start-up aggregation failed, reading each part instead", err);
+		}
+	}
+	apply(part, store) {
+		if (part.ok) store.hydrate(part.value);
+		else store.fail(part.error);
+	}
 	createRoutes() {
 		const { queries, data: custom, customJSONs = [] } = getState(this.appStore);
 		const queriesMap = Object.entries(queries).map(([key, value]) => ({
@@ -3174,11 +3247,13 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var UserProfileService = class UserProfileService {
 	client = inject(ATOMIC_CLIENT);
+	injector = inject(Injector);
 	resources = /* @__PURE__ */ new WeakMap();
 	getUserProfile(userId) {
 		let resourceRef = this.resources.get(userId);
 		if (!resourceRef) {
 			resourceRef = resource({
+				injector: this.injector,
 				params: () => {
 					const id = userId();
 					return id ? { id } : void 0;
@@ -3357,17 +3432,61 @@ const QUERY_PARAMS_DEFAULTS = {
 	neuralSearch: void 0,
 	aggregation_overrides: void 0
 };
+function parseHref(href) {
+	let url;
+	try {
+		url = new URL(href, window.location.origin);
+	} catch {
+		return {
+			path: "",
+			params: new URLSearchParams()
+		};
+	}
+	if (url.hash.startsWith("#/")) {
+		const route = url.hash.slice(1);
+		const queryIndex = route.indexOf("?");
+		const path = queryIndex === -1 ? route : route.slice(0, queryIndex);
+		const search = queryIndex === -1 ? "" : route.slice(queryIndex + 1);
+		return {
+			path,
+			params: new URLSearchParams(search)
+		};
+	}
+	return {
+		path: "",
+		params: url.searchParams
+	};
+}
+function parseFilters(raw) {
+	if (!raw) return [];
+	const candidates = [raw];
+	try {
+		const decoded = decodeURIComponent(raw);
+		if (decoded !== raw) candidates.push(decoded);
+	} catch {}
+	for (const candidate of candidates) try {
+		const parsed = JSON.parse(candidate);
+		if (Array.isArray(parsed)) return parsed;
+	} catch {}
+	return [];
+}
 const QueryParamsStore = signalStore({ providedIn: "root" }, withDevtools("QueryParams"), withQueryParamsFeatures());
 function withQueryParamsFeatures() {
 	return signalStoreFeature(withState(QUERY_PARAMS_DEFAULTS), withMethods((store, injector = inject(Injector), router = inject(Router), route = inject(ActivatedRoute), appStore = inject(AppStore)) => ({
 		setFromUrl(href) {
 			if (!href) return;
-			const path = new URL(href, window.location.origin).hash.split("?")[0].replace(/^#/, "");
-			const { q: text, f, id, p, s: sort, c, t: tab, basket, n: name } = queryParamsFromUrl(href);
-			const filters = f ? JSON.parse(decodeURIComponent(f)) : [];
-			const spellingCorrectionMode = c;
-			let page;
-			if (p) page = parseInt(p, 10);
+			const { path, params } = parseHref(href);
+			const text = params.get("q") ?? "";
+			const filters = parseFilters(params.get("f"));
+			const id = params.get("id") ?? "";
+			const sort = params.get("s") ?? "";
+			const tab = params.get("t") ?? "";
+			const basket = params.get("b") ?? "";
+			const name = params.get("n") ?? "";
+			const spellingCorrectionMode = params.get("c") || void 0;
+			const p = params.get("p");
+			const parsedPage = p ? parseInt(p, 10) : NaN;
+			const page = Number.isNaN(parsedPage) ? void 0 : parsedPage;
 			patchState(store, (state) => {
 				return {
 					...state,
@@ -4865,14 +4984,15 @@ var LoadingComponent = class LoadingComponent {
 				clearTimeout(timeout);
 				setTimeout(() => {
 					const url = this.route.snapshot.queryParams["returnUrl"] || null;
-					if (!url) {
-						this.router.navigateByUrl(url);
+					if (url) {
 						this.queryParamsStore.setFromUrl(url);
+						this.router.navigateByUrl(url);
 					} else this.router.navigate(["/"]);
 				}, 700);
 			}
 		});
-		if (!this.client.auth.isAuthenticated()) {
+		if (this.client.auth.isAuthenticated()) this.application.updateReadyState(true);
+		else {
 			this.application.updateReadyState(false);
 			this.client.auth.login().then(() => {
 				this.application.updateReadyState(true);
@@ -6652,7 +6772,9 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 		}
 		return `search-results-assistant`;
 	}, ...ngDevMode ? [{ debugName: "instanceId" }] : /* istanbul ignore next */ []);
-	enabledUserInput = computed(() => this.appStore.assistants()[this.instanceId()]?.modeSettings.enabledUserInput === true, ...ngDevMode ? [{ debugName: "enabledUserInput" }] : /* istanbul ignore next */ []);
+	enabledUserInput = computed(() => this.appStore.assistants()[this.instanceId()]?.modeSettings?.enabledUserInput === true, ...ngDevMode ? [{ debugName: "enabledUserInput" }] : /* istanbul ignore next */ []);
+	allowAI = input(false, ...ngDevMode ? [{ debugName: "allowAI" }] : /* istanbul ignore next */ []);
+	showAssistantAction = computed(() => this.allowAI() && this.appStore.isAssistantAllowed(this.instanceId()) && this.enabledUserInput(), ...ngDevMode ? [{ debugName: "showAssistantAction" }] : /* istanbul ignore next */ []);
 	showHint = signal(false, ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
 	armed = true;
 	constructor() {
@@ -6717,6 +6839,13 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			allowAI: {
+				classPropertyName: "allowAI",
+				publicName: "allowAI",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -6775,7 +6904,7 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
         </button>
       </div>
 
-      @if (enabledUserInput()) {
+      @if (showAssistantAction()) {
         <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
             <sparkles-icon aria-hidden="true" />
@@ -6879,7 +7008,7 @@ i0.ɵɵngDeclareClassMetadata({
         </button>
       </div>
 
-      @if (enabledUserInput()) {
+      @if (showAssistantAction()) {
         <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
             <sparkles-icon aria-hidden="true" />
@@ -6929,6 +7058,14 @@ i0.ɵɵngDeclareClassMetadata({
 		cleared: [{
 			type: i0.Output,
 			args: ["cleared"]
+		}],
+		allowAI: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowAI",
+				required: false
+			}]
 		}]
 	}
 });
@@ -7117,17 +7254,18 @@ var InfinityScrollDirective = class InfinityScrollDirective {
 		alias: "scroll-options"
 	});
 	onScroll = output();
-	observer = new IntersectionObserver(([entry]) => {
-		if (entry.isIntersecting) this.onScroll.emit();
-	}, this.options());
+	observer;
 	el = inject(ElementRef);
 	constructor() {
 		afterNextRender(() => {
+			this.observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting) this.onScroll.emit();
+			}, this.options());
 			this.observer.observe(this.el.nativeElement);
 		});
 	}
 	ngOnDestroy() {
-		this.observer.disconnect();
+		this.observer?.disconnect();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -18606,7 +18744,6 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 	isBookmarked = computed(() => {
 		return this.userSettingsStore.isBookmarked(this.article());
 	}, ...ngDevMode ? [{ debugName: "isBookmarked" }] : /* istanbul ignore next */ []);
-	title = computed(() => this.transloco.translate("bookmarks.bookmarkDocument"), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 	async bookmark(e) {
 		e.stopPropagation();
 		const article = this.article();
@@ -18670,11 +18807,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 			properties: { "class.visible": "isBookmarked()" },
 			classAttribute: "cursor-pointer"
 		},
-		providers: [provideTranslocoScope("bookmark")],
+		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
 		template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18684,7 +18821,7 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 		isInline: true,
@@ -18732,6 +18869,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 					"tooltip-offset"
 				],
 				exportAs: ["tooltip"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
 			}
 		]
 	});
@@ -18748,12 +18890,13 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				BookmarkIcon,
 				ButtonComponent,
-				TooltipDirective
+				TooltipDirective,
+				TranslocoPipe
 			],
-			providers: [provideTranslocoScope("bookmark")],
+			providers: [provideTranslocoScope("bookmarks")],
 			template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18763,7 +18906,7 @@ i0.ɵɵngDeclareClassMetadata({
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 			host: {
@@ -21804,7 +21947,7 @@ var DidYouMeanComponent = class DidYouMeanComponent {
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -21854,7 +21997,7 @@ i0.ɵɵngDeclareClassMetadata({
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -23021,6 +23164,7 @@ var AggregationDateComponent = class AggregationDateComponent {
 	uid = nextAggregationDateId++;
 	startId = `datepicker-range-start-${this.uid}`;
 	endId = `datepicker-range-end-${this.uid}`;
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
 	name = input(null, ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 	column = input.required(...ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []);
 	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
@@ -23507,6 +23651,13 @@ var AggregationDateComponent = class AggregationDateComponent {
 		isStandalone: true,
 		selector: "aggregation-date, AggregationDate, aggregationdate",
 		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			name: {
 				classPropertyName: "name",
 				publicName: "name",
@@ -23622,10 +23773,10 @@ var AggregationDateComponent = class AggregationDateComponent {
 			aggregationOverridesChange: "aggregationOverridesChange",
 			searchText: "searchTextChange"
 		},
-		host: { properties: { "class": "cn(\"@container block\", isEmpty() && \"hidden\")" } },
+		host: { properties: { "class": "cn(\"@container flex h-[inherit] max-h-[inherit] flex-col\", class(), isEmpty() && \"hidden\")" } },
 		providers: [provideTranslocoScope("filters")],
 		ngImport: i0,
-		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's buttons (apply, clear, chevron) are the keyboard stops, see the\n     chevron below. -->\n<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible()\"\n    [class]=\"rowStateClass\"\n    class=\"m-0 flex h-8 w-full scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"clearLabel\"\n        [tooltip]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n    @if (collapsible()) {\n      <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        [aria-label]=\"'filters.toggle' | transloco\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        [tooltip]=\"'filters.toggle' | transloco\"\n        class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevron-right class=\"shrink-0\" />\n      </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form (keydown.enter)=\"onOptionEnter($event)\">\n    <div\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex max-h-(--scroll-height,20rem) snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</details>\n",
+		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's buttons (apply, clear, chevron) are the keyboard stops, see the\n     chevron below. -->\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group flex min-h-0 flex-1 flex-col space-y-2 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\">\n  <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible()\"\n    [class]=\"rowStateClass\"\n    class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"clearLabel\"\n        [tooltip]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n    @if (collapsible()) {\n      <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        [aria-label]=\"'filters.toggle' | transloco\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        [tooltip]=\"'filters.toggle' | transloco\"\n        class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevron-right class=\"shrink-0\" />\n      </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <div\n      class=\"flex min-h-0 flex-1 flex-col\"\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex min-h-0 flex-1 snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</details>\n",
 		styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"],
 		dependencies: [
 			{
@@ -23759,13 +23910,21 @@ i0.ɵɵngDeclareClassMetadata({
 				RadioComponent,
 				TooltipDirective
 			],
-			host: { "[class]": "cn(\"@container block\", isEmpty() && \"hidden\")" },
-			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's buttons (apply, clear, chevron) are the keyboard stops, see the\n     chevron below. -->\n<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible()\"\n    [class]=\"rowStateClass\"\n    class=\"m-0 flex h-8 w-full scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"clearLabel\"\n        [tooltip]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n    @if (collapsible()) {\n      <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        [aria-label]=\"'filters.toggle' | transloco\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        [tooltip]=\"'filters.toggle' | transloco\"\n        class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevron-right class=\"shrink-0\" />\n      </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form (keydown.enter)=\"onOptionEnter($event)\">\n    <div\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex max-h-(--scroll-height,20rem) snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</details>\n",
+			host: { "[class]": "cn(\"@container flex h-[inherit] max-h-[inherit] flex-col\", class(), isEmpty() && \"hidden\")" },
+			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's buttons (apply, clear, chevron) are the keyboard stops, see the\n     chevron below. -->\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group flex min-h-0 flex-1 flex-col space-y-2 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\">\n  <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible()\"\n    [class]=\"rowStateClass\"\n    class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"clearLabel\"\n        [tooltip]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n    @if (collapsible()) {\n      <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        [aria-label]=\"'filters.toggle' | transloco\"\n        [attr.aria-expanded]=\"!isCollapsed()\"\n        [tooltip]=\"'filters.toggle' | transloco\"\n        class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevron-right class=\"shrink-0\" />\n      </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <div\n      class=\"flex min-h-0 flex-1 flex-col\"\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex min-h-0 flex-1 snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</details>\n",
 			styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
 		name: [{
 			type: i0.Input,
 			args: [{
@@ -24091,6 +24250,7 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 			allUnselected: "allUnselected",
 			loadedMore: "loadedMore"
 		},
+		host: { classAttribute: "flex min-h-0 flex-1 flex-col" },
 		providers: [provideTranslocoScope("filters")],
 		viewQueries: [{
 			propertyName: "searchBox",
@@ -24100,7 +24260,7 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's buttons (apply, clear,\n     select-all, chevron), never the header row, and the chevron is the keyboard way to collapse.\n     Label, header actions and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (!isCollapsed()) {\n    @if (hasFilters()) {\n      @let label = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); cleared.emit()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n    @if (selection()) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); applied.emit()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n\n    <!-- Nothing is projected into this box, so it had no accessible name at all (RGAA 11.1) —\n         only its position next to the facet's title said what it selects. The name is stable\n         whichever way it is about to act: `aria-checked` (true / mixed / false) is what tells the\n         user where the selection stands. -->\n    <checkbox\n      class=\"shrink-0\"\n      [checked]=\"isAllSelected()\"\n      [indeterminate]=\"selection() && !isAllSelected()\"\n      [aria-label]=\"'filters.selectAllFilters' | transloco\"\n      (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\" />\n  }\n\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div>\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it. -->\n      <SearchInput\n        class=\"mt-2 mb-3\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group p-0.5\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class]=\"(isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\"\n    class=\"m-0 flex h-8 w-full scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n    <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n  </summary>\n  <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n</details>\n",
+		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's buttons (apply, clear,\n     select-all, chevron), never the header row, and the chevron is the keyboard way to collapse.\n     Label, header actions and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (!isCollapsed()) {\n    @if (hasFilters()) {\n      @let label = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); cleared.emit()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n    @if (selection()) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); applied.emit()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n\n    <!-- Nothing is projected into this box, so it had no accessible name at all (RGAA 11.1) —\n         only its position next to the facet's title said what it selects. The name is stable\n         whichever way it is about to act: `aria-checked` (true / mixed / false) is what tells the\n         user where the selection stands. -->\n    <checkbox\n      class=\"shrink-0\"\n      [checked]=\"isAllSelected()\"\n      [indeterminate]=\"selection() && !isAllSelected()\"\n      [aria-label]=\"'filters.selectAllFilters' | transloco\"\n      (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\" />\n  }\n\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it. -->\n      <SearchInput\n        class=\"mt-2 mb-3 shrink-0\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class]=\"(isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\"\n    class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n    <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n  </summary>\n  <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n</details>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -24243,7 +24403,8 @@ i0.ɵɵngDeclareClassMetadata({
 				TooltipDirective
 			],
 			providers: [provideTranslocoScope("filters")],
-			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's buttons (apply, clear,\n     select-all, chevron), never the header row, and the chevron is the keyboard way to collapse.\n     Label, header actions and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (!isCollapsed()) {\n    @if (hasFilters()) {\n      @let label = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); cleared.emit()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n    @if (selection()) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); applied.emit()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n\n    <!-- Nothing is projected into this box, so it had no accessible name at all (RGAA 11.1) —\n         only its position next to the facet's title said what it selects. The name is stable\n         whichever way it is about to act: `aria-checked` (true / mixed / false) is what tells the\n         user where the selection stands. -->\n    <checkbox\n      class=\"shrink-0\"\n      [checked]=\"isAllSelected()\"\n      [indeterminate]=\"selection() && !isAllSelected()\"\n      [aria-label]=\"'filters.selectAllFilters' | transloco\"\n      (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\" />\n  }\n\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div>\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it. -->\n      <SearchInput\n        class=\"mt-2 mb-3\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group p-0.5\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class]=\"(isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\"\n    class=\"m-0 flex h-8 w-full scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n    <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n  </summary>\n  <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n</details>\n"
+			host: { class: "flex min-h-0 flex-1 flex-col" },
+			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's buttons (apply, clear,\n     select-all, chevron), never the header row, and the chevron is the keyboard way to collapse.\n     Label, header actions and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (!isCollapsed()) {\n    @if (hasFilters()) {\n      @let label = \"filters.clearFilters\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); cleared.emit()\">\n        <filter-x-icon class=\"shrink-0\" />\n      </button>\n    }\n    @if (selection()) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        type=\"button\"\n        variant=\"accent\"\n        size=\"sm\"\n        class=\"overflow-hidden\"\n        [aria-label]=\"label\"\n        [tooltip]=\"label\"\n        (click)=\"$event.stopPropagation(); applied.emit()\">\n        <FilterIcon class=\"shrink-0\" />\n        <span class=\"truncate\">{{ label }}</span>\n      </button>\n    }\n\n    <!-- Nothing is projected into this box, so it had no accessible name at all (RGAA 11.1) —\n         only its position next to the facet's title said what it selects. The name is stable\n         whichever way it is about to act: `aria-checked` (true / mixed / false) is what tells the\n         user where the selection stands. -->\n    <checkbox\n      class=\"shrink-0\"\n      [checked]=\"isAllSelected()\"\n      [indeterminate]=\"selection() && !isAllSelected()\"\n      [aria-label]=\"'filters.selectAllFilters' | transloco\"\n      (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\" />\n  }\n\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it. -->\n      <SearchInput\n        class=\"mt-2 mb-3 shrink-0\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    tabindex=\"-1\"\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class]=\"(isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\"\n    class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n    <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n  </summary>\n  <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n</details>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -25074,7 +25235,7 @@ var AggregationTreeComponent = class AggregationTreeComponent {
 			filtersChange: "filtersChange",
 			searchText: "searchTextChange"
 		},
-		host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" } },
+		host: { properties: { "class": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" } },
 		queries: [{
 			propertyName: "itemDirective",
 			first: true,
@@ -25083,7 +25244,7 @@ var AggregationTreeComponent = class AggregationTreeComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n",
+		template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -25257,8 +25418,8 @@ i0.ɵɵngDeclareClassMetadata({
 				TreeItemGroup,
 				AggregationPanelComponent
 			],
-			host: { "[class]": "cn(\"block h-[inherit] max-h-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" },
-			template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n"
+			host: { "[class]": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" },
+			template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -25915,7 +26076,7 @@ var AggregationListComponent = class AggregationListComponent {
 		},
 		host: {
 			listeners: { "keydown.enter": "onHostEnterKey($event)" },
-			properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" }
+			properties: { "class": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" }
 		},
 		queries: [{
 			propertyName: "itemDirective",
@@ -25947,7 +26108,7 @@ var AggregationListComponent = class AggregationListComponent {
 			}
 		],
 		ngImport: i0,
-		template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n",
+		template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -26088,10 +26249,10 @@ i0.ɵɵngDeclareClassMetadata({
 				CheckboxComponent
 			],
 			host: {
-				"[class]": "cn(\"block h-[inherit] max-h-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")",
+				"[class]": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")",
 				"(keydown.enter)": "onHostEnterKey($event)"
 			},
-			template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n"
+			template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -26538,7 +26699,7 @@ var AggregationComponent = class AggregationComponent {
 			selectionChange: "selectionChange",
 			filtersChange: "filtersChange"
 		},
-		host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" } },
+		host: { properties: { "class": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\",class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" } },
 		queries: [{
 			propertyName: "itemDirective",
 			first: true,
@@ -26574,6 +26735,7 @@ var AggregationComponent = class AggregationComponent {
     @switch (resolvedType()) {
     @case ("date") {
     <AggregationDate
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26595,6 +26757,7 @@ var AggregationComponent = class AggregationComponent {
     }
     @case ("tree") {
     <AggregationTree
+      class="min-h-0 w-auto flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26621,6 +26784,7 @@ var AggregationComponent = class AggregationComponent {
     }
     @default {
     <AggregationList
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26720,6 +26884,7 @@ var AggregationComponent = class AggregationComponent {
 				type: AggregationDateComponent,
 				selector: "aggregation-date, AggregationDate, aggregationdate",
 				inputs: [
+					"class",
 					"name",
 					"column",
 					"id",
@@ -26767,6 +26932,7 @@ i0.ɵɵngDeclareClassMetadata({
     @switch (resolvedType()) {
     @case ("date") {
     <AggregationDate
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26788,6 +26954,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
     @case ("tree") {
     <AggregationTree
+      class="min-h-0 w-auto flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26814,6 +26981,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
     @default {
     <AggregationList
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26839,7 +27007,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
     }
   `,
-			host: { "[class]": "cn(\"block h-[inherit] max-h-[inherit]\",class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" }
+			host: { "[class]": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\",class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")" }
 		}]
 	}],
 	propDecorators: {
@@ -27699,6 +27867,10 @@ var FilterButtonComponent = class FilterButtonComponent {
 		...ngDevMode ? { debugName: "expandedLevel" } : /* istanbul ignore next */ {},
 		transform: numberAttribute
 	});
+	overflowed = input(false, {
+		...ngDevMode ? { debugName: "overflowed" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	variant = signal("tertiary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	filter = signal({
 		name: "",
@@ -27713,6 +27885,7 @@ var FilterButtonComponent = class FilterButtonComponent {
 	popoverId = `filter-popover-${popoverUid++}`;
 	popoverRef = viewChild(PopoverDirective, ...ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []);
 	isOpen = computed(() => this.popoverRef()?.state() === "open", ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	toolbar = inject(Toolbar, { optional: true });
 	nativeElement = inject(ElementRef).nativeElement;
 	aggregationsStore = inject(AggregationsStore);
 	queryParamsStore = inject(QueryParamsStore);
@@ -27825,6 +27998,13 @@ var FilterButtonComponent = class FilterButtonComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			overflowed: {
+				classPropertyName: "overflowed",
+				publicName: "overflowed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: {
@@ -27846,13 +28026,7 @@ var FilterButtonComponent = class FilterButtonComponent {
 		}],
 		ngImport: i0,
 		template: `
-    <button
-      [variant]="variant()"
-      [attr.popovertarget]="popoverId"
-      [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
-      [attr.data-disabled]="filter().disabled"
-      [disabled]="filter().disabled || null"
-      >
+    <ng-template #label>
       <!-- display the filter icon if set -->
       @let icon = filter().icon;
       @if (icon) {
@@ -27872,7 +28046,35 @@ var FilterButtonComponent = class FilterButtonComponent {
       @if (filter().count > 1) {
         <Badge variant="number" fill="secondary" scheme="sage" size="xs">+{{ filter().count - 1 }}</Badge>
       }
-    </button>
+    </ng-template>
+
+    @if (toolbar) {
+      <!-- Inside a toolbar the BUTTON is the roving widget, not the host: the host is an element with
+           no role of its own, so making it the widget gave two tab stops — an inert host that the
+           roving focused, then this button with its own stop. A native disabled attribute would also make a
+           widget unfocusable, so the toolbar's own disabled input (soft: still focusable, aria-disabled)
+           takes over and the popover trigger is simply not wired. The same disabled state removes a filter
+           hidden by the overflow manager (display: none) from the roving: arrow keys must not spend
+           presses on filters nobody can see. -->
+      <button
+        ngToolbarWidget
+        [variant]="variant()"
+        [attr.popovertarget]="filter().disabled ? null : popoverId"
+        [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
+        [attr.data-disabled]="filter().disabled"
+        [disabled]="filter().disabled || overflowed()">
+        <ng-container *ngTemplateOutlet="label" />
+      </button>
+    } @else {
+      <button
+        [variant]="variant()"
+        [attr.popovertarget]="popoverId"
+        [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
+        [attr.data-disabled]="filter().disabled"
+        [disabled]="filter().disabled || null">
+        <ng-container *ngTemplateOutlet="label" />
+      </button>
+    }
 
     <!-- Native HTML Popover (top-layer). The popover content stays a DOM
          descendant of the surrounding @angular/aria toolbar, so pointer/click
@@ -27886,8 +28088,10 @@ var FilterButtonComponent = class FilterButtonComponent {
          trigger-width matching so the panel sizes to its content. overflow-hidden
          resets the browser's default overflow:auto on [popover] elements, which
          would otherwise scroll on its own in addition to Aggregation's own
-         scroll-height-capped list (a double scrollbar) once its fit-content
-         height would otherwise exceed the viewport. -->
+         facet list (a double scrollbar) once its fit-content height would
+         otherwise exceed the viewport. The facet list is the only thing that
+         scrolls: the facet itself is capped by the room the popover has (see
+         below). -->
     <div
       popover
       [id]="popoverId"
@@ -27905,21 +28109,23 @@ var FilterButtonComponent = class FilterButtonComponent {
            rings (2px outlines) of the facet header and its buttons sit flush against the wrapper's edges —
            they were cut off on three sides. The 4px of padding gives them room, the matching negative
            margin leaves the layout unchanged. Width and max-height grow by the 0.5rem of padding
-           (15.5rem = the former w-60 + 0.5rem, 1rem = the former 1.5rem - 0.5rem) because box-sizing is
-           border-box here: the facet keeps its 15rem and the popover its size. -->
-      <!-- Real max-height + overflow-y-auto on a plain wrapper, kept off <Aggregation> itself:
-           size() (added to injectPopover) exposes the actual room available in the chosen
-           direction as the --popover-available-height CSS var. flip()/shift() alone only
-           reposition the popover, they never shrink it, so a facet with many values could
-           otherwise overflow past the viewport with nothing to scroll it back into view. The
-           1.5rem subtracted is this popover's own vertical padding (p-3), which eats into that
-           same available space. Same pattern as more-button.component.ts's own wrapper. -->
-      <div class="-m-1 max-h-[calc(var(--popover-available-height,55vh)_-_1rem)] w-[15.5rem] overflow-y-auto overscroll-contain p-1">
+           (15.5rem = the former w-60 + 0.5rem) because box-sizing is border-box here: the facet keeps
+           its 15rem and the popover its size. The wrapper no longer scrolls (and no longer clips the
+           rings): the facet's own list is the one scrollbar. -->
+      <!-- The facet is capped by the smaller of two heights: its comfortable size (19 lines of list +
+           7rem of header, search box and paddings), and the room the popover really has.
+           size() (added to injectPopover) exposes that room, in the chosen direction, as the
+           --popover-available-height CSS var — flip()/shift() alone only reposition the popover, they
+           never shrink it. The 1.5rem subtracted is this popover's own vertical padding (p-3), which
+           eats into that same available space (this wrapper's p-1 / -m-1 cancel out). The facet is a
+           flex column whose list is min-h-0 flex-1, so it is the list that shrinks and scrolls — a
+           capped wrapper with overflow-y-auto around it would add a second, outer scrollbar. -->
+      <div class="-m-1 w-[15.5rem] p-1">
         @let name = filter().name;
         @let column = filter().column;
         @if (name) {
           <Aggregation
-            class="block w-full [--scroll-height:19lh]"
+            class="w-full max-h-[min(calc(19lh+7rem),calc(var(--popover-available-height,55vh)_-_1.5rem))]"
             id="filter-{{ filter().column }}"
             [name]="name"
             [column]="column"
@@ -27938,6 +28144,23 @@ var FilterButtonComponent = class FilterButtonComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: ToolbarWidget,
+				selector: "[ngToolbarWidget]",
+				inputs: ["id", "disabled"],
+				exportAs: ["ngToolbarWidget"]
+			},
 			{
 				kind: "directive",
 				type: ButtonComponent,
@@ -28045,6 +28268,8 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "filter-button, FilterButton",
 			imports: [
+				NgTemplateOutlet,
+				ToolbarWidget,
 				ButtonComponent,
 				PopoverDirective,
 				OperatorPipe,
@@ -28055,13 +28280,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FaIconComponent
 			],
 			template: `
-    <button
-      [variant]="variant()"
-      [attr.popovertarget]="popoverId"
-      [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
-      [attr.data-disabled]="filter().disabled"
-      [disabled]="filter().disabled || null"
-      >
+    <ng-template #label>
       <!-- display the filter icon if set -->
       @let icon = filter().icon;
       @if (icon) {
@@ -28081,7 +28300,35 @@ i0.ɵɵngDeclareClassMetadata({
       @if (filter().count > 1) {
         <Badge variant="number" fill="secondary" scheme="sage" size="xs">+{{ filter().count - 1 }}</Badge>
       }
-    </button>
+    </ng-template>
+
+    @if (toolbar) {
+      <!-- Inside a toolbar the BUTTON is the roving widget, not the host: the host is an element with
+           no role of its own, so making it the widget gave two tab stops — an inert host that the
+           roving focused, then this button with its own stop. A native disabled attribute would also make a
+           widget unfocusable, so the toolbar's own disabled input (soft: still focusable, aria-disabled)
+           takes over and the popover trigger is simply not wired. The same disabled state removes a filter
+           hidden by the overflow manager (display: none) from the roving: arrow keys must not spend
+           presses on filters nobody can see. -->
+      <button
+        ngToolbarWidget
+        [variant]="variant()"
+        [attr.popovertarget]="filter().disabled ? null : popoverId"
+        [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
+        [attr.data-disabled]="filter().disabled"
+        [disabled]="filter().disabled || overflowed()">
+        <ng-container *ngTemplateOutlet="label" />
+      </button>
+    } @else {
+      <button
+        [variant]="variant()"
+        [attr.popovertarget]="popoverId"
+        [class]="isOpen() ? 'border border-(--stroke-neutral-dark)/50' : ''"
+        [attr.data-disabled]="filter().disabled"
+        [disabled]="filter().disabled || null">
+        <ng-container *ngTemplateOutlet="label" />
+      </button>
+    }
 
     <!-- Native HTML Popover (top-layer). The popover content stays a DOM
          descendant of the surrounding @angular/aria toolbar, so pointer/click
@@ -28095,8 +28342,10 @@ i0.ɵɵngDeclareClassMetadata({
          trigger-width matching so the panel sizes to its content. overflow-hidden
          resets the browser's default overflow:auto on [popover] elements, which
          would otherwise scroll on its own in addition to Aggregation's own
-         scroll-height-capped list (a double scrollbar) once its fit-content
-         height would otherwise exceed the viewport. -->
+         facet list (a double scrollbar) once its fit-content height would
+         otherwise exceed the viewport. The facet list is the only thing that
+         scrolls: the facet itself is capped by the room the popover has (see
+         below). -->
     <div
       popover
       [id]="popoverId"
@@ -28114,21 +28363,23 @@ i0.ɵɵngDeclareClassMetadata({
            rings (2px outlines) of the facet header and its buttons sit flush against the wrapper's edges —
            they were cut off on three sides. The 4px of padding gives them room, the matching negative
            margin leaves the layout unchanged. Width and max-height grow by the 0.5rem of padding
-           (15.5rem = the former w-60 + 0.5rem, 1rem = the former 1.5rem - 0.5rem) because box-sizing is
-           border-box here: the facet keeps its 15rem and the popover its size. -->
-      <!-- Real max-height + overflow-y-auto on a plain wrapper, kept off <Aggregation> itself:
-           size() (added to injectPopover) exposes the actual room available in the chosen
-           direction as the --popover-available-height CSS var. flip()/shift() alone only
-           reposition the popover, they never shrink it, so a facet with many values could
-           otherwise overflow past the viewport with nothing to scroll it back into view. The
-           1.5rem subtracted is this popover's own vertical padding (p-3), which eats into that
-           same available space. Same pattern as more-button.component.ts's own wrapper. -->
-      <div class="-m-1 max-h-[calc(var(--popover-available-height,55vh)_-_1rem)] w-[15.5rem] overflow-y-auto overscroll-contain p-1">
+           (15.5rem = the former w-60 + 0.5rem) because box-sizing is border-box here: the facet keeps
+           its 15rem and the popover its size. The wrapper no longer scrolls (and no longer clips the
+           rings): the facet's own list is the one scrollbar. -->
+      <!-- The facet is capped by the smaller of two heights: its comfortable size (19 lines of list +
+           7rem of header, search box and paddings), and the room the popover really has.
+           size() (added to injectPopover) exposes that room, in the chosen direction, as the
+           --popover-available-height CSS var — flip()/shift() alone only reposition the popover, they
+           never shrink it. The 1.5rem subtracted is this popover's own vertical padding (p-3), which
+           eats into that same available space (this wrapper's p-1 / -m-1 cancel out). The facet is a
+           flex column whose list is min-h-0 flex-1, so it is the list that shrinks and scrolls — a
+           capped wrapper with overflow-y-auto around it would add a second, outer scrollbar. -->
+      <div class="-m-1 w-[15.5rem] p-1">
         @let name = filter().name;
         @let column = filter().column;
         @if (name) {
           <Aggregation
-            class="block w-full [--scroll-height:19lh]"
+            class="w-full max-h-[min(calc(19lh+7rem),calc(var(--popover-available-height,55vh)_-_1.5rem))]"
             id="filter-{{ filter().column }}"
             [name]="name"
             [column]="column"
@@ -28205,6 +28456,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		overflowed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overflowed",
+				required: false
+			}]
+		}],
 		popoverRef: [{
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => PopoverDirective), { isSignal: true }]
@@ -28328,7 +28587,7 @@ var MoreComponent = class MoreComponent {
     <div role="group" [attr.aria-label]="'filters.moreFilters' | transloco" class="divide-y divide-(--font-neutral-muted)/18 pt-1 pb-1">
       @for (filter of filteredFilters(); track filter.name) {
         <Aggregation
-          class="w-full px-1 [--scroll-height:15lh]"
+          class="w-full px-1 max-h-[calc(15lh+7rem)]"
           id="more-filters"
           [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
           showFiltersCount
@@ -28431,7 +28690,7 @@ i0.ɵɵngDeclareClassMetadata({
     <div role="group" [attr.aria-label]="'filters.moreFilters' | transloco" class="divide-y divide-(--font-neutral-muted)/18 pt-1 pb-1">
       @for (filter of filteredFilters(); track filter.name) {
         <Aggregation
-          class="w-full px-1 [--scroll-height:15lh]"
+          class="w-full px-1 max-h-[calc(15lh+7rem)]"
           id="more-filters"
           [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
           showFiltersCount
@@ -28519,6 +28778,15 @@ var MoreButtonComponent = class MoreButtonComponent {
 	nativeElement = inject(ElementRef).nativeElement;
 	breakpointObserver = inject(BreakpointObserverService);
 	aggregationsService = inject(AggregationsService);
+	toolbar = inject(Toolbar, { optional: true });
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	triggerClass = "gap-1 truncate font-semibold";
+	openTriggerClass = "gap-1 truncate font-semibold border border-(--stroke-neutral-dark)/18";
+	openSheet = () => this.sheetRef()?.open();
+	openDialog = () => this.dialogRef()?.showModal();
 	count = input(2, {
 		...ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {},
 		transform: numberAttribute
@@ -28572,6 +28840,13 @@ var MoreButtonComponent = class MoreButtonComponent {
 		isStandalone: true,
 		selector: "more-button, MoreButton",
 		inputs: {
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			count: {
 				classPropertyName: "count",
 				publicName: "count",
@@ -28673,10 +28948,24 @@ var MoreButtonComponent = class MoreButtonComponent {
       }
     </ng-template>
 
+    <!-- The trigger button, shared by the three variants below. Inside a toolbar the BUTTON is the
+         roving widget and not the host: the host is an element with no role of its own and no key
+         handler, so an arrow key landed on a dead element, then the button was a second tab stop.
+         Outside a toolbar it is a plain button. -->
+    <ng-template #button let-onClick="onClick" let-popoverTarget="popoverTarget" let-cls="cls">
+      @if (toolbar) {
+        <button ngToolbarWidget variant="tertiary" [attr.popovertarget]="popoverTarget" [class]="cls" aria-label="more filters" [disabled]="disabled()" (click)="onClick?.()">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+      } @else {
+        <button variant="tertiary" [attr.popovertarget]="popoverTarget" [class]="cls" aria-label="more filters" [disabled]="disabled() || null" (click)="onClick?.()">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+      }
+    </ng-template>
+
     @if (breakpointObserver.isMobile()) {
-      <button variant="tertiary" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="sheetRef()?.open()">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { onClick: openSheet, cls: triggerClass }" />
 
       <Sheet side="bottom" size="lg">
         <SheetHeader [closeLabel]="'filters.close' | transloco">
@@ -28696,9 +28985,7 @@ var MoreButtonComponent = class MoreButtonComponent {
         </SheetBody>
       </Sheet>
     } @else if (isEnriched()) {
-      <button variant="tertiary" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="dialogRef()?.showModal()">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { onClick: openDialog, cls: triggerClass }" />
 
       <dialog>
         <DialogContent size="md">
@@ -28718,13 +29005,7 @@ var MoreButtonComponent = class MoreButtonComponent {
         </DialogContent>
       </dialog>
     } @else {
-      <button
-        variant="tertiary"
-        [attr.popovertarget]="popoverId"
-        [class]="isOpen() ? 'gap-1 truncate font-semibold border border-(--stroke-neutral-dark)/18' : 'gap-1 truncate font-semibold'"
-        aria-label="more filters">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { popoverTarget: popoverId, cls: isOpen() ? openTriggerClass : triggerClass }" />
 
       <!-- Native HTML Popover (top-layer). Fully isolate pointer/click events from
            the surrounding @angular/aria toolbar (see FilterButton for the rationale:
@@ -28774,6 +29055,13 @@ var MoreButtonComponent = class MoreButtonComponent {
 					"ngTemplateOutletInjector"
 				]
 			},
+			{
+				kind: "directive",
+				type: ToolbarWidget,
+				selector: "[ngToolbarWidget]",
+				inputs: ["id", "disabled"],
+				exportAs: ["ngToolbarWidget"]
+			},
 			{
 				kind: "directive",
 				type: ButtonComponent,
@@ -28919,6 +29207,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "more-button, MoreButton",
 			imports: [
 				NgTemplateOutlet,
+				ToolbarWidget,
 				ButtonComponent,
 				PopoverDirective,
 				TranslocoPipe,
@@ -28946,10 +29235,24 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </ng-template>
 
+    <!-- The trigger button, shared by the three variants below. Inside a toolbar the BUTTON is the
+         roving widget and not the host: the host is an element with no role of its own and no key
+         handler, so an arrow key landed on a dead element, then the button was a second tab stop.
+         Outside a toolbar it is a plain button. -->
+    <ng-template #button let-onClick="onClick" let-popoverTarget="popoverTarget" let-cls="cls">
+      @if (toolbar) {
+        <button ngToolbarWidget variant="tertiary" [attr.popovertarget]="popoverTarget" [class]="cls" aria-label="more filters" [disabled]="disabled()" (click)="onClick?.()">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+      } @else {
+        <button variant="tertiary" [attr.popovertarget]="popoverTarget" [class]="cls" aria-label="more filters" [disabled]="disabled() || null" (click)="onClick?.()">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+      }
+    </ng-template>
+
     @if (breakpointObserver.isMobile()) {
-      <button variant="tertiary" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="sheetRef()?.open()">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { onClick: openSheet, cls: triggerClass }" />
 
       <Sheet side="bottom" size="lg">
         <SheetHeader [closeLabel]="'filters.close' | transloco">
@@ -28969,9 +29272,7 @@ i0.ɵɵngDeclareClassMetadata({
         </SheetBody>
       </Sheet>
     } @else if (isEnriched()) {
-      <button variant="tertiary" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="dialogRef()?.showModal()">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { onClick: openDialog, cls: triggerClass }" />
 
       <dialog>
         <DialogContent size="md">
@@ -28991,13 +29292,7 @@ i0.ɵɵngDeclareClassMetadata({
         </DialogContent>
       </dialog>
     } @else {
-      <button
-        variant="tertiary"
-        [attr.popovertarget]="popoverId"
-        [class]="isOpen() ? 'gap-1 truncate font-semibold border border-(--stroke-neutral-dark)/18' : 'gap-1 truncate font-semibold'"
-        aria-label="more filters">
-        <ng-container *ngTemplateOutlet="trigger" />
-      </button>
+      <ng-container *ngTemplateOutlet="button; context: { popoverTarget: popoverId, cls: isOpen() ? openTriggerClass : triggerClass }" />
 
       <!-- Native HTML Popover (top-layer). Fully isolate pointer/click events from
            the surrounding @angular/aria toolbar (see FilterButton for the rationale:
@@ -29039,6 +29334,14 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
 		count: [{
 			type: i0.Input,
 			args: [{
@@ -29353,7 +29656,7 @@ var FiltersBarComponent = class FiltersBarComponent {
          tabindex with it: the keyboard stopped on an invisible strip of zero height, announced
          "Filter controls" and disabled at once. -->
     @if (hasFilters() || currentBasket() || hasAggregations()) {
-    <div ngToolbar [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    <div ngToolbar [softDisabled]="false" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           ngToolbarWidget
@@ -29391,10 +29694,13 @@ var FiltersBarComponent = class FiltersBarComponent {
             : 'flex-row'
         )">
 
-      @for (filter of authorizedFilters(); track filter.name) {
+      @for (filter of authorizedFilters(); track filter.name; let i = $index) {
+        <!-- No ngToolbarWidget here: FilterButton makes its own inner button the roving widget, so the
+             bar has one tab stop per filter and not two (host, then button). A filter hidden by the
+             overflow manager is disabled, hence skipped by the roving (the toolbar is not soft-disabled). -->
         <FilterButton
-          ngToolbarWidget
           overflowItem
+          [overflowed]="i >= visibleFiltersCount()"
           [name]="filter.name"
           [column]="filter.column"
           [position]="position()"
@@ -29410,8 +29716,8 @@ var FiltersBarComponent = class FiltersBarComponent {
              forbids the attribute. The name belongs to the <button> inside MoreButton, which
              already carries it. -->
         <MoreButton
-          ngToolbarWidget
           overflowStop
+          [disabled]="hasMoreFilters().length === 0"
           [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
@@ -29444,6 +29750,7 @@ var FiltersBarComponent = class FiltersBarComponent {
 				type: MoreButtonComponent,
 				selector: "more-button, MoreButton",
 				inputs: [
+					"disabled",
 					"count",
 					"position",
 					"lockPosition",
@@ -29465,7 +29772,8 @@ var FiltersBarComponent = class FiltersBarComponent {
 					"position",
 					"offset",
 					"lockPosition",
-					"expandedLevel"
+					"expandedLevel",
+					"overflowed"
 				]
 			},
 			{
@@ -29557,7 +29865,7 @@ i0.ɵɵngDeclareClassMetadata({
          tabindex with it: the keyboard stopped on an invisible strip of zero height, announced
          "Filter controls" and disabled at once. -->
     @if (hasFilters() || currentBasket() || hasAggregations()) {
-    <div ngToolbar [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    <div ngToolbar [softDisabled]="false" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           ngToolbarWidget
@@ -29595,10 +29903,13 @@ i0.ɵɵngDeclareClassMetadata({
             : 'flex-row'
         )">
 
-      @for (filter of authorizedFilters(); track filter.name) {
+      @for (filter of authorizedFilters(); track filter.name; let i = $index) {
+        <!-- No ngToolbarWidget here: FilterButton makes its own inner button the roving widget, so the
+             bar has one tab stop per filter and not two (host, then button). A filter hidden by the
+             overflow manager is disabled, hence skipped by the roving (the toolbar is not soft-disabled). -->
         <FilterButton
-          ngToolbarWidget
           overflowItem
+          [overflowed]="i >= visibleFiltersCount()"
           [name]="filter.name"
           [column]="filter.column"
           [position]="position()"
@@ -29614,8 +29925,8 @@ i0.ɵɵngDeclareClassMetadata({
              forbids the attribute. The name belongs to the <button> inside MoreButton, which
              already carries it. -->
         <MoreButton
-          ngToolbarWidget
           overflowStop
+          [disabled]="hasMoreFilters().length === 0"
           [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
@@ -31365,6 +31676,36 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const LEAF_SEPARATOR = " › ";
+function flattenLeaves(source, prefix = []) {
+	return Object.entries(source).flatMap(([name, value]) => isPlainObject(value) ? flattenLeaves(value, [...prefix, name]) : [{
+		path: [...prefix, name],
+		value
+	}]);
+}
+function valueAtPath(source, path) {
+	return path.reduce((node, name) => isPlainObject(node) ? node[name] : void 0, source);
+}
+const toFieldText = (value) => {
+	if (value === void 0 || value === null) return "";
+	return Array.isArray(value) ? JSON.stringify(value) : String(value);
+};
+function normalizeCustomData(entries) {
+	const properties = /* @__PURE__ */ new Map();
+	const add = (key, value) => {
+		if (!key || properties.has(key)) return;
+		properties.set(key, value === void 0 || value === null ? { key } : {
+			key,
+			defaultValue: value
+		});
+	};
+	for (const entry of Array.isArray(entries) ? entries : []) if (typeof entry === "string") add(entry);
+	else if (entry && typeof entry === "object" && !Array.isArray(entry)) Object.entries(entry).forEach(([key, value]) => add(key, value));
+	else console.warn("[user-profile] customData: entry ignored, expected a string or an object.", entry);
+	return [...properties.values()];
+}
+const SAVED_FLASH_MS = 3e3;
 const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 const userProfileSchema = (editing) => schema((p) => {
 	applyEach(p.data, (field) => readonly(field, { when: ({ key }) => `data.${key()}` !== editing() }));
@@ -31378,9 +31719,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	transloco = inject(TranslocoService);
 	injector = inject(Injector);
 	document = inject(DOCUMENT);
+	destroyRef = inject(DestroyRef);
 	labelClass = FORM_LABEL_CLASS;
 	errorClass = FORM_ERROR_CLASS;
+	chipClass = "inline-flex items-center rounded-(--radius-rounded) bg-(--bg-accent-base-alt) px-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-accent-base)";
 	statusMessage = signal("", ...ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []);
+	savedProperty = signal(void 0, ...ngDevMode ? [{ debugName: "savedProperty" }] : /* istanbul ignore next */ []);
+	savedTimer;
 	dataKeys = [
 		"fullName",
 		"mail",
@@ -31403,10 +31748,29 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		equal: sameKeys
 	});
 	allowProfilePhoto = computed(() => this.keys().some((key) => key === "profilePhoto"), ...ngDevMode ? [{ debugName: "allowProfilePhoto" }] : /* istanbul ignore next */ []);
-	customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || []).filter((key) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), {
+	customDataConfig = computed(() => normalizeCustomData(this.appStore.general()?.features?.userProfile?.customData).filter(({ key }) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), ...ngDevMode ? [{ debugName: "customDataConfig" }] : /* istanbul ignore next */ []);
+	customRows = computed(() => {
+		const stored = this.user()?.customData;
+		return this.customDataConfig().flatMap(({ key, defaultValue }) => {
+			const shape = isPlainObject(defaultValue) ? defaultValue : isPlainObject(stored?.[key]) ? stored[key] : void 0;
+			if (!shape) return [{
+				key,
+				root: key,
+				defaultValue
+			}];
+			return flattenLeaves(shape).map(({ path, value }) => ({
+				key: [key, ...path].join(LEAF_SEPARATOR),
+				root: key,
+				path: [key, ...path],
+				defaultValue: isPlainObject(defaultValue) ? value : void 0
+			}));
+		});
+	}, ...ngDevMode ? [{ debugName: "customRows" }] : /* istanbul ignore next */ []);
+	customData = computed(() => this.customRows().map(({ key }) => key), {
 		...ngDevMode ? { debugName: "customData" } : /* istanbul ignore next */ {},
 		equal: sameKeys
 	});
+	customRowIndex = computed(() => new Map(this.customRows().map((row) => [row.key, row])), ...ngDevMode ? [{ debugName: "customRowIndex" }] : /* istanbul ignore next */ []);
 	properties = computed(() => [...this.formKeys().map((key) => ({
 		category: "data",
 		key,
@@ -31416,6 +31780,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		key,
 		translated: false
 	}))], ...ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []);
+	sections = computed(() => {
+		const rows = this.properties();
+		return ["data", "customData"].map((category) => ({
+			id: category === "data" ? "information" : "preferences",
+			rows: rows.filter((row) => row.category === category)
+		})).filter((section) => section.rows.length > 0);
+	}, ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 	initials = computed(() => this.principalStore.initials(), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 	username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
 	propertyToEdit = signal(void 0, ...ngDevMode ? [{ debugName: "propertyToEdit" }] : /* istanbul ignore next */ []);
@@ -31441,7 +31812,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const profile = this.user();
 		return {
 			data: toRecord(this.formKeys(), profile?.data),
-			customData: toRecord(this.customData(), profile?.customData)
+			customData: Object.fromEntries(this.customData().map((key) => [key, toFieldText(this.effectiveValue("customData", key))]))
 		};
 	}, ...ngDevMode ? [{ debugName: "profileModel" }] : /* istanbul ignore next */ []);
 	profileForm = form(this.profileModel, userProfileSchema(this.propertyToEdit), {
@@ -31452,6 +31823,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		effect(() => {
 			if (this.userProfileResource.error()?.status === 404) this.createUserProfile();
 		});
+		this.destroyRef.onDestroy(() => clearTimeout(this.savedTimer));
 	}
 	fieldId(category, key) {
 		return `user-profile-${category}-${key.replace(/[^\w-]+/g, "-")}`;
@@ -31480,6 +31852,33 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	getDataValue(category, key) {
 		return this.user()?.[category]?.[key];
 	}
+	defaultValue(category, key) {
+		return category === "customData" ? this.customRowIndex().get(key)?.defaultValue : void 0;
+	}
+	isLeaf(category, key) {
+		return category === "customData" && this.customRowIndex().get(key)?.path !== void 0;
+	}
+	storedValue(category, key) {
+		const bucket = this.user()?.[category];
+		const path = category === "customData" ? this.customRowIndex().get(key)?.path : void 0;
+		return path ? valueAtPath(bucket, path) : bucket?.[key];
+	}
+	isBoolean(category, key) {
+		return !this.isLeaf(category, key) && typeof this.effectiveValue(category, key) === "boolean";
+	}
+	booleanValue(category, key) {
+		return this.effectiveValue(category, key) === true;
+	}
+	isReadOnlyValue(category, key) {
+		return Array.isArray(this.effectiveValue(category, key));
+	}
+	arrayTags(category, key) {
+		const value = this.effectiveValue(category, key);
+		return [...new Set((Array.isArray(value) ? value : []).map((item) => typeof item === "string" ? item : JSON.stringify(item)))];
+	}
+	effectiveValue(category, key) {
+		return this.storedValue(category, key) ?? this.defaultValue(category, key);
+	}
 	onEdit(category, key) {
 		this.propertyToEdit.set(`${category}.${key}`);
 		this.fieldFor(category, key)?.().focusBoundControl();
@@ -31489,19 +31888,43 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const field = event.target;
 		field.setSelectionRange(field.value.length, field.value.length);
 	}
+	onEscape(event, category, key) {
+		if (!this.isEditing(category, key)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.onCancelEdit(category, key);
+	}
 	onCancelEdit(category, key) {
 		if (!this.isEditing(category, key)) return;
 		const state = this.fieldFor(category, key)?.();
-		state?.value.set(this.getDataValue(category, key) ?? "");
+		state?.value.set(toFieldText(this.effectiveValue(category, key)));
 		state?.reset();
 		this.leaveEditMode(category, key);
 		this.announce("editCancelled", category, key);
 	}
-	propertyLabel(category, key) {
-		return category === "data" ? this.transloco.translate(`userProfile.data.${key}`) : key;
+	labelFor(category, key) {
+		if (category === "data") return this.transloco.translate(`userProfile.data.${key}`);
+		const leafPath = this.customRowIndex().get(key)?.path;
+		if (leafPath) return [this.labelFor(category, leafPath[0]), ...leafPath.slice(1)].join(LEAF_SEPARATOR);
+		const path = `userProfile.customData.${key}`;
+		const translated = this.transloco.translate(path);
+		return translated && translated !== path ? translated : key;
+	}
+	isDefault(category, key) {
+		const stored = this.storedValue(category, key);
+		return (stored === void 0 || stored === null) && this.defaultValue(category, key) !== void 0;
+	}
+	isSaved(category, key) {
+		return this.savedProperty() === `${category}.${key}`;
+	}
+	flashSaved(category, key) {
+		this.savedProperty.set(`${category}.${key}`);
+		clearTimeout(this.savedTimer);
+		this.savedTimer = setTimeout(() => this.savedProperty.set(void 0), SAVED_FLASH_MS);
 	}
 	announce(kind, category, key) {
-		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.propertyLabel(category, key) }));
+		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.labelFor(category, key) }));
+		if (kind === "saved") this.flashSaved(category, key);
 	}
 	leaveEditMode(category, key) {
 		this.propertyToEdit.set(void 0);
@@ -31535,6 +31958,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		}
 	}
 	async onDeleteData(category, key) {
+		if (!this.hasStoredValue(category, key)) return;
 		try {
 			const response = await this.client.api.userProfile.deleteProperty(this.user(), category, key);
 			if (!response) {
@@ -31542,14 +31966,46 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 				return;
 			}
 			info("Deleted user profile property", response);
-			const userProfile = JSON.parse(JSON.stringify(this.user()));
-			userProfile[category][key] = "";
-			this.userProfileResource.set(userProfile);
-			this.announce("deleted", category, key);
+			this.forgetProperty(category, key);
 		} catch (err) {
+			if (err?.status === 404) {
+				info("User profile property already absent", {
+					category,
+					key
+				});
+				this.forgetProperty(category, key);
+				return;
+			}
 			notify.error(err.message);
 		}
 	}
+	hasStoredValue(category, key) {
+		const stored = this.storedValue(category, key);
+		return stored !== void 0 && stored !== null;
+	}
+	forgetProperty(category, key) {
+		const userProfile = JSON.parse(JSON.stringify(this.user()));
+		if (this.defaultValue(category, key) === void 0) userProfile[category][key] = "";
+		else delete userProfile[category][key];
+		this.userProfileResource.set(userProfile);
+		this.announce("deleted", category, key);
+	}
+	async onToggleBoolean(category, key, checked, toggle) {
+		const previous = this.user();
+		if (!previous || this.booleanValue(category, key) === checked) return;
+		this.userProfileResource.set({
+			...previous,
+			[category]: {
+				...previous[category],
+				[key]: checked
+			}
+		});
+		if (await this.patchProperty(category, key, checked)) this.announce("saved", category, key);
+		else {
+			this.userProfileResource.set(previous);
+			toggle.checked.set(!checked);
+		}
+	}
 	async patchProperty(category, key, value) {
 		const userProfile = JSON.parse(JSON.stringify(this.user()));
 		userProfile[category] = {
@@ -31603,7 +32059,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		host: { classAttribute: "flex flex-col h-full overflow-hidden" },
 		providers: [provideTranslocoScope("user-profile", "login")],
 		ngImport: i0,
-		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
+		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -31696,24 +32152,75 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 					"size"
 				]
 			},
+			{
+				kind: "component",
+				type: CircleCheckIcon,
+				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: LockIcon,
+				selector: "lock, lock-icon, Lock, LockIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
+			},
+			{
+				kind: "component",
+				type: TagInputComponent,
+				selector: "TagInput, tag-input, taginput",
+				inputs: [
+					"value",
+					"disabled",
+					"readonly",
+					"placeholder",
+					"separator",
+					"addOnBlur",
+					"size",
+					"scheme",
+					"class",
+					"aria-label",
+					"addLabel",
+					"removeLabel",
+					"addedLabel",
+					"removedLabel"
+				],
+				outputs: ["valueChange", "touch"]
+			},
 			{
 				kind: "directive",
-				type: TextareaComponent,
-				selector: "textarea-group, textareagroup, TextareaGroup",
+				type: InputComponent,
+				selector: "input-group, inputgroup, InputGroup",
 				inputs: [
 					"class",
 					"size",
 					"scheme",
-					"resize",
 					"filled",
-					"minRows",
-					"maxRows"
+					"numbers",
+					"autoHeight",
+					"textSize"
 				]
 			},
 			{
 				kind: "directive",
-				type: TextareaControlDirective,
-				selector: "textarea[textarea-control], textarea[textareaControl]",
+				type: InputControlDirective,
+				selector: "input[input-control], input[inputControl]",
 				inputs: ["class"]
 			},
 			{
@@ -31765,18 +32272,22 @@ i0.ɵɵngDeclareClassMetadata({
 				UserIcon,
 				AvatarImageComponent,
 				ButtonComponent,
-				TextareaComponent,
-				TextareaControlDirective,
+				CircleCheckIcon,
+				LockIcon,
+				SwitchComponent,
+				TagInputComponent,
+				InputComponent,
+				InputControlDirective,
 				ChangePasswordComponent
 			],
 			providers: [provideTranslocoScope("user-profile", "login")],
-			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
+			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
 		}]
 	}],
 	ctorParameters: () => []
 });
 function toRecord(keys, source) {
-	return Object.fromEntries(keys.map((key) => [key, String(source?.[key] ?? "")]));
+	return Object.fromEntries(keys.map((key) => [key, toFieldText(source?.[key])]));
 }
 function splitPropertyId(id) {
 	const separator = id.indexOf(".");
@@ -32418,8 +32929,10 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32456,7 +32969,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -32529,6 +33042,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "directive",
+				type: SidebarInsetDirective,
+				selector: "[sidebarInset]",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: SettingsAccountPanelComponent,
@@ -32571,6 +33090,7 @@ i0.ɵɵngDeclareClassMetadata({
 				PaletteIcon,
 				KeyboardIcon,
 				XMarkIcon,
+				SidebarInsetDirective,
 				SettingsAccountPanelComponent,
 				SettingsAppearancePanelComponent,
 				SettingsShortcutsPanelComponent
@@ -32579,8 +33099,10 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32617,7 +33139,7 @@ i0.ɵɵngDeclareClassMetadata({
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -32975,10 +33497,12 @@ const SCOPE = "session-expiry";
 const SCOPE_ALIAS = "sessionExpiry";
 const FALLBACK = {
 	expiringTitle: "Your session is about to expire",
-	expiringDescription: "It expires in about {{minutes}} min. Save your work or sign in again.",
+	expiringDescription: "It expires in about {{minutes}} min. Extend your session to keep it open.",
 	expiredTitle: "Your session has expired",
 	expiredDescription: "Sign in again to continue.",
-	reload: "Sign in again"
+	reload: "Sign in again",
+	extend: "Extend session",
+	extendedTitle: "Your session has been extended"
 };
 function provideSessionExpiry(options = {}) {
 	const warnBeforeMs = options.warnBeforeMs ?? DEFAULT_WARN_BEFORE_MS;
@@ -33016,14 +33540,36 @@ function provideSessionExpiry(options = {}) {
 			await settled;
 			if (!stillDue()) return;
 			const minutes = Math.max(1, Math.ceil((expiresAt - Date.now()) / 6e4));
-			const [title, description] = await Promise.all([translate("expiringTitle"), translate("expiringDescription", { minutes })]);
+			const [title, description, extendLabel] = await Promise.all([
+				translate("expiringTitle"),
+				translate("expiringDescription", { minutes }),
+				translate("extend")
+			]);
 			if (!stillDue()) return;
 			notify.warning(title, {
 				description,
 				closeButton: true,
-				important: true
+				important: true,
+				action: {
+					label: extendLabel,
+					onClick: () => void extend()
+				}
 			});
 		};
+		const extend = async () => {
+			if (options.onExtend) return options.onExtend();
+			const before = expiresAt;
+			try {
+				await client.api.principal.get();
+			} catch {
+				return;
+			}
+			if (before !== null && expiresAt !== null && expiresAt > before) {
+				notify.success(await translate("extendedTitle"), { closeButton: true });
+				return;
+			}
+			onReconnect();
+		};
 		const check = () => {
 			if (expiresAt === null || warned) return;
 			const delay = expiresAt - warnBeforeMs - Date.now();
@@ -33093,6 +33639,6 @@ function provideSessionExpiry(options = {}) {
 const queryNameResolver = () => {
 	return inject(AppStore).getDefaultQuery()?.name || "";
 };
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAppearancePanelComponent, SettingsDialogComponent, SettingsShortcutsPanelComponent, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, quantileScale, queryNameResolver, rebuildWithout, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAppearancePanelComponent, SettingsDialogComponent, SettingsShortcutsPanelComponent, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, provideStartupAggregation, quantileScale, queryNameResolver, rebuildWithout, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map