@sinequa/atomic-angular 2.4.1 → 2.6.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ 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 { ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, 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 } 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, 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 { 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";
@@ -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);
@@ -500,7 +508,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 +537,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;
 				}
@@ -1256,6 +1271,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 +1760,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 +1808,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 +1825,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 +1848,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]) => ({
@@ -6619,7 +6688,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const Export = createCallable(ExportDialog);
-const multiSelectionToolbarVariants = cva("flex divide-x rounded-xl bg-linear-to-b px-3 py-2 shadow [&_ul]:flex [&_ul]:flex-col [&_ul]:p-1 [&>li]:px-2", {
+const multiSelectionToolbarVariants = cva("flex divide-x rounded-xl bg-linear-to-b px-3 py-2 shadow [&_ul]:flex [&_ul]:flex-col [&_ul]:p-1 [&>div]:px-2", {
 	variants: { variant: {
 		dark: "divide-gray-800 bg-gray-900 from-gray-500 to-gray-900 text-white",
 		light: "divide-gray-400 bg-white from-white to-purple-50 text-gray-800",
@@ -6635,7 +6704,9 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	appFeatures = this.appStore.general();
 	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
 	variant = input("dark", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	hint = input(...ngDevMode ? [void 0, { debugName: "hint" }] : /* istanbul ignore next */ []);
 	updatedCollections = output();
+	cleared = output();
 	count = this.selection.multiSelectCount;
 	variants = computed(() => cn(multiSelectionToolbarVariants({
 		variant: this.variant(),
@@ -6650,8 +6721,30 @@ 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 */ []);
-	clearSelection = () => this.selection.clearMultiSelection();
+	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() {
+		effect(() => {
+			const count = this.count();
+			untracked(() => {
+				if (count === 0) {
+					this.armed = true;
+					this.showHint.set(false);
+				} else if (this.armed) {
+					this.armed = false;
+					this.showHint.set(true);
+				} else this.showHint.set(false);
+			});
+		});
+	}
+	clearSelection = () => {
+		if (this.count() === 0) return;
+		this.selection.clearMultiSelection();
+		this.cleared.emit();
+	};
 	openCollectionDialog = () => AddToCollection.call(getState(this.selection).multiSelection, { injector: this.injector }).then((event) => {
 		if (event === "dialog-no" || event === "dialog-yes") {
 			this.updatedCollections.emit();
@@ -6688,9 +6781,26 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowAI: {
+				classPropertyName: "allowAI",
+				publicName: "allowAI",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
-		outputs: { updatedCollections: "updatedCollections" },
+		outputs: {
+			updatedCollections: "updatedCollections",
+			cleared: "cleared"
+		},
 		host: {
 			properties: {
 				"class.opacity-100": "count() > 0",
@@ -6701,37 +6811,57 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 		providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
 		ngImport: i0,
 		template: `
-    <menu id="multi-select-toolbar" [class]="cn(variants(), class())">
-      <li class="ps-0!">
+    <!-- Région de statut hors de la barre : celle-ci est inerte sans sélection, et une région
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide. -->
+    <span role="status" class="sr-only">
+      @if (count() > 0) {
+        {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+        @if (showHint() && hint()) {
+          . {{ hint() }}
+        }
+      }
+    </span>
+
+    <!-- inert sans sélection : la barre n'est que transparente et hors écran, ses boutons resteraient
+         sinon dans l'ordre de tabulation et activables (Entrée ouvrait « Ajouter à une collection » sur
+         un panier vide, ES-31356). -->
+    <div
+      id="multi-select-toolbar"
+      role="toolbar"
+      [attr.aria-label]="'multiSelectionToolbar.label' | transloco"
+      [attr.inert]="count() === 0 ? '' : null"
+      (keydown.escape)="clearSelection()"
+      [class]="cn(variants(), class())">
+      <div class="ps-0!">
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
           {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
-          <x-mark-icon />
+          <x-mark-icon aria-hidden="true" />
         </button>
-      </li>
+      </div>
 
-      <li>
-        <button class="cursor-pointer inline-flex items-center gap-1" title="menu" [attr.aria-label]="'menu'" (click)="openCollectionDialog()">
-          <inbox-icon />
+      <div>
+        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+          <inbox-icon aria-hidden="true" />
           {{ 'collections.label' | transloco }}
         </button>
-      </li>
+      </div>
 
-      <li>
+      <div>
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
-          <file-output-icon />
+          <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </li>
+      </div>
 
-      @if (enabledUserInput()) {
-        <li class="pe-0!">
+      @if (showAssistantAction()) {
+        <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
-            <sparkles-icon />
+            <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
-        </li>
+        </div>
       }
-    </menu>
+    </div>
   `,
 		isInline: true,
 		dependencies: [
@@ -6785,37 +6915,57 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
 			template: `
-    <menu id="multi-select-toolbar" [class]="cn(variants(), class())">
-      <li class="ps-0!">
+    <!-- Région de statut hors de la barre : celle-ci est inerte sans sélection, et une région
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide. -->
+    <span role="status" class="sr-only">
+      @if (count() > 0) {
+        {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+        @if (showHint() && hint()) {
+          . {{ hint() }}
+        }
+      }
+    </span>
+
+    <!-- inert sans sélection : la barre n'est que transparente et hors écran, ses boutons resteraient
+         sinon dans l'ordre de tabulation et activables (Entrée ouvrait « Ajouter à une collection » sur
+         un panier vide, ES-31356). -->
+    <div
+      id="multi-select-toolbar"
+      role="toolbar"
+      [attr.aria-label]="'multiSelectionToolbar.label' | transloco"
+      [attr.inert]="count() === 0 ? '' : null"
+      (keydown.escape)="clearSelection()"
+      [class]="cn(variants(), class())">
+      <div class="ps-0!">
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
           {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
-          <x-mark-icon />
+          <x-mark-icon aria-hidden="true" />
         </button>
-      </li>
+      </div>
 
-      <li>
-        <button class="cursor-pointer inline-flex items-center gap-1" title="menu" [attr.aria-label]="'menu'" (click)="openCollectionDialog()">
-          <inbox-icon />
+      <div>
+        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+          <inbox-icon aria-hidden="true" />
           {{ 'collections.label' | transloco }}
         </button>
-      </li>
+      </div>
 
-      <li>
+      <div>
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
-          <file-output-icon />
+          <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </li>
+      </div>
 
-      @if (enabledUserInput()) {
-        <li class="pe-0!">
+      @if (showAssistantAction()) {
+        <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
-            <sparkles-icon />
+            <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
-        </li>
+        </div>
       }
-    </menu>
+    </div>
   `,
 			host: {
 				class: "fixed -bottom-20 left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0",
@@ -6824,6 +6974,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		class: [{
 			type: i0.Input,
@@ -6841,9 +6992,29 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
 		updatedCollections: [{
 			type: i0.Output,
 			args: ["updatedCollections"]
+		}],
+		cleared: [{
+			type: i0.Output,
+			args: ["cleared"]
+		}],
+		allowAI: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowAI",
+				required: false
+			}]
 		}]
 	}
 });
@@ -18727,11 +18898,18 @@ var ListPanelComponent = class ListPanelComponent {
 	getValue = input.required(...ngDevMode ? [{ debugName: "getValue" }] : /* istanbul ignore next */ []);
 	getLabel = input(...ngDevMode ? [void 0, { debugName: "getLabel" }] : /* istanbul ignore next */ []);
 	deleteButtonTitle = input("remove", ...ngDevMode ? [{ debugName: "deleteButtonTitle" }] : /* istanbul ignore next */ []);
+	deletable = input(true, {
+		...ngDevMode ? { debugName: "deletable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
 	itemClick = output();
 	delete = output();
 	itemTemplate = contentChild(ListPanelItemDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	deleteKeys = isApplePlatform() ? ["Delete", "Backspace"] : ["Delete"];
+	list = viewChild(ListComponent, ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	keyboardFocused = computed(() => this.list()?.keyboardFocused() ?? false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	injector = inject(Injector);
 	pendingFocusIndex = signal(null, ...ngDevMode ? [{ debugName: "pendingFocusIndex" }] : /* istanbul ignore next */ []);
@@ -18807,6 +18985,13 @@ var ListPanelComponent = class ListPanelComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			deletable: {
+				classPropertyName: "deletable",
+				publicName: "deletable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -18827,6 +19012,7 @@ var ListPanelComponent = class ListPanelComponent {
 			delete: "delete"
 		},
 		host: { classAttribute: "block max-h-115 overflow-auto" },
+		providers: [provideTranslocoScope("list-panel")],
 		queries: [{
 			propertyName: "itemTemplate",
 			first: true,
@@ -18834,6 +19020,13 @@ var ListPanelComponent = class ListPanelComponent {
 			descendants: true,
 			isSignal: true
 		}],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ListComponent,
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
     <List variant="list-navigation" size="medium" class="gap-1" selectionMode="explicit" [attr.aria-label]="ariaLabel()">
@@ -18846,9 +19039,13 @@ var ListPanelComponent = class ListPanelComponent {
           (keydown.enter)="activate(item, $event)"
           (keydown.space)="activate(item, $event)">
           <ng-container *ngTemplateOutlet="itemTemplate()?.template; context: { $implicit: item }" />
-          <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" (click)="onDelete(item, i, $event)">
-            <TrashIcon />
-          </ListItemAction>
+          @if (deletable()) {
+            <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
+              [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
+              (click)="onDelete(item, i, $event)">
+              <TrashIcon />
+            </ListItemAction>
+          }
         </ListItem>
       } @empty {
         <span class="py-4 text-center text-neutral-500">
@@ -18903,7 +19100,13 @@ var ListPanelComponent = class ListPanelComponent {
 				kind: "component",
 				type: ListItemActionComponent,
 				selector: "ListItemAction,list-item-action,listitemaction",
-				inputs: ["ariaLabel", "disabled"],
+				inputs: [
+					"ariaLabel",
+					"disabled",
+					"keys",
+					"shortcut",
+					"description"
+				],
 				exportAs: ["listItemAction"]
 			},
 			{
@@ -18923,6 +19126,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "list-panel, ListPanel",
+			providers: [provideTranslocoScope("list-panel")],
 			imports: [
 				NgTemplateOutlet,
 				TrashIcon,
@@ -18942,9 +19146,13 @@ i0.ɵɵngDeclareClassMetadata({
           (keydown.enter)="activate(item, $event)"
           (keydown.space)="activate(item, $event)">
           <ng-container *ngTemplateOutlet="itemTemplate()?.template; context: { $implicit: item }" />
-          <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" (click)="onDelete(item, i, $event)">
-            <TrashIcon />
-          </ListItemAction>
+          @if (deletable()) {
+            <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
+              [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
+              (click)="onDelete(item, i, $event)">
+              <TrashIcon />
+            </ListItemAction>
+          }
         </ListItem>
       } @empty {
         <span class="py-4 text-center text-neutral-500">
@@ -18991,6 +19199,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		deletable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deletable",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -19018,6 +19234,10 @@ i0.ɵɵngDeclareClassMetadata({
 		itemTemplate: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => ListPanelItemDirective), { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => ListComponent), { isSignal: true }]
 		}]
 	}
 });
@@ -19027,6 +19247,10 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 	hasMore = input.required(...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
 	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
 	loadMore = output();
+	navigationHint = input(false, {
+		...ngDevMode ? { debugName: "navigationHint" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	onLoadMore(event) {
 		event.stopPropagation();
 		this.loadMore.emit();
@@ -19066,10 +19290,17 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 				isSignal: true,
 				isRequired: true,
 				transformFunction: null
+			},
+			navigationHint: {
+				classPropertyName: "navigationHint",
+				publicName: "navigationHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { loadMore: "loadMore" },
-		host: { properties: { "class": "cn('flex flex-col px-2 mt-2', class())" } },
+		host: { properties: { "class": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" } },
 		providers: [provideTranslocoScope("list-panel")],
 		ngImport: i0,
 		template: `
@@ -19080,9 +19311,33 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
       </button>
     }
     @let seeMore =  'listPanel.seeMore' | transloco;
-    <button variant="secondary" size="sm" class="ml-auto" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
-      {{ seeMore }}
-    </button>
+    <div class="flex items-center gap-(--spacing-xs)">
+      <!-- Aide de navigation de la liste, tant que navigationHint est vrai (focus clavier dans la liste) : le
+           focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
+           aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
+           d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
+           ligne. -->
+      @if (navigationHint()) {
+        <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
+                 milieu de la ligne de texte, et elle sortait décentrée de sa touche. -->
+            <span class="inline-flex gap-(--spacing-4xs)">
+              <kbd><arrow-up-icon /></kbd>
+              <kbd><arrow-down-icon /></kbd>
+            </span>
+            {{ 'listPanel.hintNavigate' | transloco }}
+          </span>
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <kbd>{{ 'listPanel.keyEnter' | transloco }}</kbd>
+            {{ 'listPanel.hintOpen' | transloco }}
+          </span>
+        </p>
+      }
+      <button variant="secondary" size="sm" class="ml-auto shrink-0" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
+        {{ seeMore }}
+      </button>
+    </div>
   `,
 		isInline: true,
 		dependencies: [
@@ -19117,6 +19372,24 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 					"size"
 				]
 			},
+			{
+				kind: "directive",
+				type: KbdComponent,
+				selector: "kbd, Kbd",
+				inputs: ["class", "size"]
+			},
+			{
+				kind: "component",
+				type: ArrowUpIcon,
+				selector: "arrow-up, arrow-up-icon, ArrowUp, ArrowUpIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: ArrowDownIcon,
+				selector: "arrow-down, arrow-down-icon, ArrowDown, ArrowDownIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -19137,7 +19410,10 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				RouterLink,
-				ButtonComponent
+				ButtonComponent,
+				KbdComponent,
+				ArrowUpIcon,
+				ArrowDownIcon
 			],
 			providers: [provideTranslocoScope("list-panel")],
 			template: `
@@ -19148,11 +19424,35 @@ i0.ɵɵngDeclareClassMetadata({
       </button>
     }
     @let seeMore =  'listPanel.seeMore' | transloco;
-    <button variant="secondary" size="sm" class="ml-auto" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
-      {{ seeMore }}
-    </button>
+    <div class="flex items-center gap-(--spacing-xs)">
+      <!-- Aide de navigation de la liste, tant que navigationHint est vrai (focus clavier dans la liste) : le
+           focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
+           aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
+           d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
+           ligne. -->
+      @if (navigationHint()) {
+        <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
+                 milieu de la ligne de texte, et elle sortait décentrée de sa touche. -->
+            <span class="inline-flex gap-(--spacing-4xs)">
+              <kbd><arrow-up-icon /></kbd>
+              <kbd><arrow-down-icon /></kbd>
+            </span>
+            {{ 'listPanel.hintNavigate' | transloco }}
+          </span>
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <kbd>{{ 'listPanel.keyEnter' | transloco }}</kbd>
+            {{ 'listPanel.hintOpen' | transloco }}
+          </span>
+        </p>
+      }
+      <button variant="secondary" size="sm" class="ml-auto shrink-0" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
+        {{ seeMore }}
+      </button>
+    </div>
   `,
-			host: { "[class]": "cn('flex flex-col px-2 mt-2', class())" }
+			host: { "[class]": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" }
 		}]
 	}],
 	propDecorators: {
@@ -19183,6 +19483,14 @@ i0.ɵɵngDeclareClassMetadata({
 		loadMore: [{
 			type: i0.Output,
 			args: ["loadMore"]
+		}],
+		navigationHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationHint",
+				required: false
+			}]
 		}]
 	}
 });
@@ -19368,7 +19676,7 @@ var BookmarksComponent = class BookmarksComponent {
 		} },
 		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19385,6 +19693,7 @@ var BookmarksComponent = class BookmarksComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -19397,7 +19706,8 @@ var BookmarksComponent = class BookmarksComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -19479,7 +19789,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TagComponent
 			],
 			providers: [provideTranslocoScope("bookmarks")],
-			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -19735,7 +20045,7 @@ var CollectionsComponent = class CollectionsComponent {
 		} },
 		providers: [provideTranslocoScope("collections")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19752,6 +20062,7 @@ var CollectionsComponent = class CollectionsComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -19764,7 +20075,8 @@ var CollectionsComponent = class CollectionsComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -19820,7 +20132,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemTextComponent
 			],
 			providers: [provideTranslocoScope("collections")],
-			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -22795,6 +23107,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 */ []);
@@ -23281,6 +23594,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",
@@ -23396,10 +23716,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: [
 			{
@@ -23533,13 +23853,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: [{
@@ -23865,6 +24193,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",
@@ -23874,7 +24203,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",
@@ -24017,7 +24346,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: () => [],
@@ -24848,7 +25178,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,
@@ -24857,7 +25187,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",
@@ -25031,8 +25361,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: () => [],
@@ -25689,7 +26019,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",
@@ -25721,7 +26051,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",
@@ -25862,10 +26192,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: () => [],
@@ -26312,7 +26642,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,
@@ -26348,6 +26678,7 @@ var AggregationComponent = class AggregationComponent {
     @switch (resolvedType()) {
     @case ("date") {
     <AggregationDate
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26369,6 +26700,7 @@ var AggregationComponent = class AggregationComponent {
     }
     @case ("tree") {
     <AggregationTree
+      class="min-h-0 w-auto flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26395,6 +26727,7 @@ var AggregationComponent = class AggregationComponent {
     }
     @default {
     <AggregationList
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26494,6 +26827,7 @@ var AggregationComponent = class AggregationComponent {
 				type: AggregationDateComponent,
 				selector: "aggregation-date, AggregationDate, aggregationdate",
 				inputs: [
+					"class",
 					"name",
 					"column",
 					"id",
@@ -26541,6 +26875,7 @@ i0.ɵɵngDeclareClassMetadata({
     @switch (resolvedType()) {
     @case ("date") {
     <AggregationDate
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26562,6 +26897,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
     @case ("tree") {
     <AggregationTree
+      class="min-h-0 w-auto flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26588,6 +26924,7 @@ i0.ɵɵngDeclareClassMetadata({
     }
     @default {
     <AggregationList
+      class="min-h-0 flex-1"
       [id]="id()"
       [name]="name()"
       [column]="column()"
@@ -26613,7 +26950,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: {
@@ -27473,6 +27810,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: "",
@@ -27487,6 +27828,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);
@@ -27599,6 +27941,13 @@ var FilterButtonComponent = class FilterButtonComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			overflowed: {
+				classPropertyName: "overflowed",
+				publicName: "overflowed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: {
@@ -27620,13 +27969,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) {
@@ -27646,7 +27989,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
@@ -27660,8 +28031,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"
@@ -27679,21 +28052,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"
@@ -27712,6 +28087,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,
@@ -27819,6 +28211,8 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "filter-button, FilterButton",
 			imports: [
+				NgTemplateOutlet,
+				ToolbarWidget,
 				ButtonComponent,
 				PopoverDirective,
 				OperatorPipe,
@@ -27829,13 +28223,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) {
@@ -27855,7 +28243,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
@@ -27869,8 +28285,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"
@@ -27888,21 +28306,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"
@@ -27979,6 +28399,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 }]
@@ -28102,7 +28530,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
@@ -28205,7 +28633,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
@@ -28293,6 +28721,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
@@ -28346,6 +28783,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",
@@ -28447,10 +28891,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">
@@ -28470,9 +28928,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">
@@ -28492,13 +28948,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:
@@ -28548,6 +28998,13 @@ var MoreButtonComponent = class MoreButtonComponent {
 					"ngTemplateOutletInjector"
 				]
 			},
+			{
+				kind: "directive",
+				type: ToolbarWidget,
+				selector: "[ngToolbarWidget]",
+				inputs: ["id", "disabled"],
+				exportAs: ["ngToolbarWidget"]
+			},
 			{
 				kind: "directive",
 				type: ButtonComponent,
@@ -28693,6 +29150,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "more-button, MoreButton",
 			imports: [
 				NgTemplateOutlet,
+				ToolbarWidget,
 				ButtonComponent,
 				PopoverDirective,
 				TranslocoPipe,
@@ -28720,10 +29178,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">
@@ -28743,9 +29215,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">
@@ -28765,13 +29235,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:
@@ -28813,6 +29277,14 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	propDecorators: {
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
 		count: [{
 			type: i0.Input,
 			args: [{
@@ -29127,7 +29599,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
@@ -29165,10 +29637,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()"
@@ -29184,8 +29659,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()"
@@ -29218,6 +29693,7 @@ var FiltersBarComponent = class FiltersBarComponent {
 				type: MoreButtonComponent,
 				selector: "more-button, MoreButton",
 				inputs: [
+					"disabled",
 					"count",
 					"position",
 					"lockPosition",
@@ -29239,7 +29715,8 @@ var FiltersBarComponent = class FiltersBarComponent {
 					"position",
 					"offset",
 					"lockPosition",
-					"expandedLevel"
+					"expandedLevel",
+					"overflowed"
 				]
 			},
 			{
@@ -29331,7 +29808,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
@@ -29369,10 +29846,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()"
@@ -29388,8 +29868,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()"
@@ -30211,7 +30691,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 		template: `
     <ListPanelHeader [label]="'searches.recent.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedRecentSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30243,7 +30723,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
-      <ListPanelFooter
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()"
         [hasMore]="hasMore()"
         [config]="config"
         (loadMore)="loadMore()" />
@@ -30320,6 +30800,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -30332,7 +30813,8 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -30370,7 +30852,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ListPanelHeader [label]="'searches.recent.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedRecentSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30402,7 +30884,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
-      <ListPanelFooter
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()"
         [hasMore]="hasMore()"
         [config]="config"
         (loadMore)="loadMore()" />
@@ -30487,7 +30969,7 @@ var SavedSearchDialog = class SavedSearchDialog {
               [formField]="nameField"
               [attr.aria-label]="'searches.saved.saveName' | transloco"
               [attr.placeholder]="'searches.saved.saveName' | transloco"
-              (keydown.enter)="saveName().trim() && confirm()" />
+              (keydown.enter)="$event.preventDefault(); saveName().trim() && confirm()" />
           </input-group>
         </DialogBody>
 
@@ -30634,7 +31116,7 @@ i0.ɵɵngDeclareClassMetadata({
               [formField]="nameField"
               [attr.aria-label]="'searches.saved.saveName' | transloco"
               [attr.placeholder]="'searches.saved.saveName' | transloco"
-              (keydown.enter)="saveName().trim() && confirm()" />
+              (keydown.enter)="$event.preventDefault(); saveName().trim() && confirm()" />
           </input-group>
         </DialogBody>
 
@@ -30932,7 +31414,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 		template: `
     <ListPanelHeader [label]="'searches.saved.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30964,7 +31446,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
-      <ListPanelFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()" [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
     }
   `,
 		isInline: true,
@@ -31038,6 +31520,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -31050,7 +31533,8 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -31088,7 +31572,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ListPanelHeader [label]="'searches.saved.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -31120,7 +31604,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
-      <ListPanelFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()" [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
     }
   `
 		}]
@@ -31555,7 +32039,11 @@ function splitPropertyId(id) {
 		key: id.slice(separator + 1)
 	};
 }
+const FIRST_CONTROL = "button:not(:disabled), textarea, input:not([type='file']), a[href]";
 var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
+	focusOnOpen = input(false, ...ngDevMode ? [{ debugName: "focusOnOpen" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
 	principalStore = inject(PrincipalStore);
 	appStore = inject(AppStore);
 	client = inject(ATOMIC_CLIENT);
@@ -31568,6 +32056,13 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
 		const { allowChangePassword = false } = this.appStore.general()?.features || {};
 		return allowChangePassword && useCredentials && (this.principalStore.editablePartition?.() || false);
 	}, ...ngDevMode ? [{ debugName: "allowChangePassword" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			if (!this.focusOnOpen()) return;
+			const frame = requestAnimationFrame(() => focusWhenReady(() => this.host.nativeElement.querySelector(FIRST_CONTROL), "settings-account-panel", { destroyRef: this.destroyRef }));
+			this.destroyRef.onDestroy(() => cancelAnimationFrame(frame));
+		});
+	}
 	resetSettings() {
 		ResetUserSettings.call(void 0, { injector: this.injector });
 	}
@@ -31591,6 +32086,13 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
 		type: SettingsAccountPanelComponent,
 		isStandalone: true,
 		selector: "settings-account-panel",
+		inputs: { focusOnOpen: {
+			classPropertyName: "focusOnOpen",
+			publicName: "focusOnOpen",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
 		providers: [provideTranslocoScope("settings")],
 		ngImport: i0,
 		template: `
@@ -31773,7 +32275,16 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
   `
 		}]
-	}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { focusOnOpen: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "focusOnOpen",
+			required: false
+		}]
+	}] }
 });
 const THEMES$1 = [
 	"light",
@@ -32117,6 +32628,11 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		}
 	];
 	panel = signal(this.call.props()?.panel ?? "account", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	navigated = signal(false, ...ngDevMode ? [{ debugName: "navigated" }] : /* istanbul ignore next */ []);
+	navigate(id) {
+		this.navigated.set(true);
+		this.panel.set(id);
+	}
 	duplicate = active !== void 0;
 	constructor() {
 		if (active) {
@@ -32176,7 +32692,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
                   variant="none"
                   class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
-                  (click)="panel.set(item.id)">
+                  (click)="navigate(item.id)">
                   @switch (item.id) {
                     @case ("account") {
                       <user-icon aria-hidden="true" />
@@ -32197,7 +32713,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
           <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)">
             @switch (panel()) {
               @case ("account") {
-                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
               }
               @case ("appearance") {
                 <settings-appearance-panel />
@@ -32270,7 +32786,8 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 			{
 				kind: "component",
 				type: SettingsAccountPanelComponent,
-				selector: "settings-account-panel"
+				selector: "settings-account-panel",
+				inputs: ["focusOnOpen"]
 			},
 			{
 				kind: "component",
@@ -32336,7 +32853,7 @@ i0.ɵɵngDeclareClassMetadata({
                   variant="none"
                   class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
-                  (click)="panel.set(item.id)">
+                  (click)="navigate(item.id)">
                   @switch (item.id) {
                     @case ("account") {
                       <user-icon aria-hidden="true" />
@@ -32357,7 +32874,7 @@ i0.ɵɵngDeclareClassMetadata({
           <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)">
             @switch (panel()) {
               @case ("account") {
-                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
               }
               @case ("appearance") {
                 <settings-appearance-panel />
@@ -32712,10 +33229,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;
@@ -32753,14 +33272,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();
@@ -32830,6 +33371,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