@sinequa/atomic-angular 2.14.0 → 2.15.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, ViewContainerRef, 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, finalize, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, BuildingIcon, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, ClockIcon, CollapseIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, ExpandIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileMagnifyingGlassIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilesIcon, FilterIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, GripVerticalIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, LinkIcon, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PanelRightIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PopoverResizeHandleComponent, PresentationIcon, QuestionCircleIcon, QuickFilterIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchBarSuggestionsComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwipeActionComponent, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, injectKeyboardAvailable, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, BuildingIcon, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, ClockIcon, CollapseIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, ExpandIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileMagnifyingGlassIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilesIcon, FilterIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, GripVerticalIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconLeftDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, LinkIcon, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PanelRightIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PopoverResizeHandleComponent, PresentationIcon, QuestionCircleIcon, QuickFilterIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchBarSuggestionsComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwipeActionComponent, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, injectKeyboardAvailable, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@ngrx-toolkit/core";
 import { getState, patchState, signalStore, signalStoreFeature, type, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
@@ -14,7 +14,7 @@ import { cn } from "cn";
 import highlightWords from "highlight-words";
 import { rxResource, takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
 import { cva } from "class-variance-authority";
-import { FormField, FormRoot, applyEach, debounce, form, readonly, required, schema, submit, validate } from "@angular/forms/signals";
+import { FormField, FormRoot, applyEach, debounce, form, maxLength, readonly, required, schema, submit, validate } from "@angular/forms/signals";
 import { injectVirtualizer } from "@tanstack/angular-virtual";
 import { catchError as catchError$1, filter as filter$2, map as map$1, switchMap as switchMap$1 } from "rxjs/operators";
 import { Tab } from "@angular/aria/tabs";
@@ -6686,6 +6686,799 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const AddToCollection = createCallable(CollectionsDialog);
+let nextId = 0;
+var AddToCollectionPanelComponent = class AddToCollectionPanelComponent {
+	articles = input.required(...ngDevMode ? [{ debugName: "articles" }] : /* istanbul ignore next */ []);
+	done = output();
+	changed = output();
+	closeRequested = output();
+	userSettingsStore = inject(UserSettingsStore);
+	injector = inject(Injector);
+	titleId = `add-to-collection-title-${nextId}`;
+	nameId = `add-to-collection-name-${nextId}`;
+	errorId = `add-to-collection-error-${nextId++}`;
+	scrollElement = viewChild("scrollElement", ...ngDevMode ? [{ debugName: "scrollElement" }] : /* istanbul ignore next */ []);
+	searchInput = viewChild("searchInput", ...ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []);
+	nameInput = viewChild("nameInput", ...ngDevMode ? [{ debugName: "nameInput" }] : /* istanbul ignore next */ []);
+	collections = computed(() => this.userSettingsStore.baskets(), ...ngDevMode ? [{ debugName: "collections" }] : /* istanbul ignore next */ []);
+	showSearch = computed(() => this.collections().length > 6, ...ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []);
+	count = computed(() => this.ids().length, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	ids = computed(() => Array.from(new Set(this.articles().map((a) => a.id).filter((id) => !!id))), ...ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []);
+	searchText = signal("", ...ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []);
+	searchField = form(this.searchText);
+	createdHere = signal([], ...ngDevMode ? [{ debugName: "createdHere" }] : /* istanbul ignore next */ []);
+	filteredCollections = computed(() => {
+		const query = this.searchText().trim().toLowerCase();
+		const created = this.createdHere();
+		const all = this.collections();
+		const matching = query ? all.filter((c) => c.name.toLowerCase().includes(query)) : all;
+		const rank = (c) => {
+			const i = created.indexOf(c.name);
+			return i < 0 ? created.length : i;
+		};
+		return created.length ? [...matching].sort((a, b) => rank(a) - rank(b)) : matching;
+	}, ...ngDevMode ? [{ debugName: "filteredCollections" }] : /* istanbul ignore next */ []);
+	status = signal(null, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	creating = signal(false, ...ngDevMode ? [{ debugName: "creating" }] : /* istanbul ignore next */ []);
+	createModel = signal({ name: "" }, ...ngDevMode ? [{ debugName: "createModel" }] : /* istanbul ignore next */ []);
+	createForm = form(this.createModel, (path) => {
+		maxLength(path.name, 50);
+		validate(path.name, ({ value }) => {
+			const name = value().trim();
+			if (!name) return { kind: "nameRequired" };
+			if (this.nameTaken(name)) return { kind: "nameExists" };
+		});
+	}, { submission: { action: async () => this.create() } });
+	nameError = computed(() => {
+		const field = this.createForm.name();
+		const kinds = field.errors().map((e) => e.kind);
+		if (kinds.includes("nameExists")) return "nameExists";
+		if (kinds.includes("nameRequired") && field.touched()) return "nameRequired";
+		return null;
+	}, ...ngDevMode ? [{ debugName: "nameError" }] : /* istanbul ignore next */ []);
+	virtualizer = injectVirtualizer(() => {
+		const list = this.filteredCollections();
+		return {
+			count: list.length,
+			estimateSize: (index) => this.coverageOf(list[index]) === "some" ? 52 : 40,
+			getItemKey: (index) => list[index]?.name ?? index,
+			scrollElement: this.scrollElement()
+		};
+	});
+	doneTimer;
+	constructor() {
+		afterNextRender(() => this.focusFirst());
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.doneTimer));
+	}
+	coverageOf(collection) {
+		if (!collection) return "none";
+		const held = this.heldIn(collection);
+		if (held === 0) return "none";
+		return held === this.count() ? "all" : "some";
+	}
+	heldIn(collection) {
+		const inCollection = new Set(collection.ids ?? []);
+		return this.ids().filter((id) => inCollection.has(id)).length;
+	}
+	async toggle(collection) {
+		const ids = this.ids();
+		if (ids.length === 0) return;
+		const removing = this.coverageOf(collection) === "all";
+		const updated = {
+			...collection,
+			ids: removing ? (collection.ids ?? []).filter((id) => !ids.includes(id)) : Array.from(/* @__PURE__ */ new Set([...collection.ids ?? [], ...ids]))
+		};
+		const index = this.userSettingsStore.baskets().findIndex((b) => b.name === collection.name);
+		if (index < 0) return;
+		try {
+			await this.userSettingsStore.updateBasket(updated, index);
+		} catch (e) {
+			error("Error updating collection:", e);
+			return;
+		}
+		this.changed.emit();
+		if (removing) this.status.set({
+			kind: "removed",
+			name: collection.name
+		});
+		else this.confirmAdded(collection.name);
+	}
+	startCreation() {
+		this.creating.set(true);
+		afterNextRender(() => this.nameInput()?.nativeElement.focus(), { injector: this.injector });
+	}
+	cancelCreation(event) {
+		if (this.collections().length === 0) return;
+		event?.preventDefault();
+		event?.stopPropagation();
+		this.createModel.set({ name: "" });
+		this.createForm().reset();
+		this.creating.set(false);
+		afterNextRender(() => this.focusFirst(), { injector: this.injector });
+	}
+	async create() {
+		const name = this.createModel().name.trim();
+		try {
+			await this.userSettingsStore.createBasket({
+				name,
+				ids: []
+			});
+		} catch (e) {
+			error("Error creating collection:", e);
+			return;
+		}
+		this.createModel.set({ name: "" });
+		this.createForm().reset();
+		this.searchText.set("");
+		this.createdHere.update((names) => [name, ...names.filter((n) => n !== name)]);
+		this.creating.set(false);
+		this.status.set({
+			kind: "created",
+			name
+		});
+		this.changed.emit();
+		afterNextRender(() => {
+			const list = this.scrollElement()?.nativeElement;
+			if (!list) return;
+			list.scrollTop = 0;
+			list.querySelector("button")?.focus();
+		}, { injector: this.injector });
+	}
+	confirmAdded(name) {
+		this.status.set({
+			kind: "added",
+			name
+		});
+		clearTimeout(this.doneTimer);
+		this.doneTimer = setTimeout(() => this.done.emit(name), 900);
+	}
+	nameTaken(name) {
+		const lower = name.toLowerCase();
+		return this.collections().some((c) => c.name.toLowerCase() === lower);
+	}
+	onHostToggle(event) {
+		if (event.newState === "open") this.focusFirst();
+	}
+	focusFirst() {
+		(this.nameInput()?.nativeElement ?? this.searchInput()?.nativeElement ?? this.scrollElement()?.nativeElement.querySelector("button"))?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AddToCollectionPanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AddToCollectionPanelComponent,
+		isStandalone: true,
+		selector: "AddToCollectionPanel, add-to-collection-panel",
+		inputs: { articles: {
+			classPropertyName: "articles",
+			publicName: "articles",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: {
+			done: "done",
+			changed: "changed",
+			closeRequested: "closeRequested"
+		},
+		host: {
+			attributes: { "role": "dialog" },
+			listeners: { "toggle": "onHostToggle($event)" },
+			properties: { "attr.aria-labelledby": "titleId" },
+			classAttribute: "flex w-80 max-w-[calc(100vw-2*var(--spacing-md))] flex-col overflow-hidden rounded-(--radius-xl) border border-(--stroke-neutral-white) bg-(--bg-neutral-white) text-(--font-neutral-black) shadow-(--shadow-3)"
+		},
+		providers: [provideTranslocoScope("collections")],
+		viewQueries: [
+			{
+				propertyName: "scrollElement",
+				first: true,
+				predicate: ["scrollElement"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "searchInput",
+				first: true,
+				predicate: ["searchInput"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "nameInput",
+				first: true,
+				predicate: ["nameInput"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    <div class="flex items-center gap-(--spacing-2xs) py-(--spacing-xs) ps-(--spacing-md) pe-(--spacing-xs)">
+      @if (status()?.kind === 'added') {
+        <circle-check-icon class="shrink-0 text-(--font-success-muted)" aria-hidden="true" />
+      }
+      <!-- The title is also the live region: the confirmation replaces it, and a change of an
+           existing status node is what a screen reader announces. -->
+      <p [id]="titleId" role="status" class="m-0 min-w-0 flex-1 text-(length:--size-base) leading-(--line-height-3)">
+        @switch (status()?.kind) {
+          @case ('added') {
+            {{ 'collections.addedTo' | transloco: { name: status()!.name } }}
+          }
+          @case ('removed') {
+            {{ 'collections.removedFrom' | transloco: { name: status()!.name } }}
+          }
+          @case ('created') {
+            {{ 'collections.createdNamed' | transloco: { name: status()!.name } }}
+          }
+          @default {
+            {{ 'collections.addDocuments' | transloco: { count: count() } }}
+          }
+        }
+      </p>
+      <button
+        type="button"
+        variant="none"
+        class="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) text-(--font-primary-muted) hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid pointer-coarse:size-11"
+        [attr.aria-label]="'collections.close' | transloco"
+        [tooltip]="'collections.close' | transloco"
+        (click)="closeRequested.emit()">
+        <x-mark-icon aria-hidden="true" />
+      </button>
+    </div>
+
+    <div class="flex min-h-0 flex-col gap-(--spacing-2xs) border-t border-(--stroke-neutral-white) pt-(--spacing-xs) pb-(--spacing-2xs)">
+      @if (collections().length === 0) {
+        <div class="flex flex-col items-center gap-(--spacing-3xs) px-(--spacing-md) pt-(--spacing-2xs) text-center">
+            <span class="mb-(--spacing-3xs) inline-flex size-10 items-center justify-center rounded-(--radius-md) bg-(--bg-indigo-base-alt) text-(--font-indigo-base)" aria-hidden="true">
+              <inbox-icon />
+            </span>
+            <p class="m-0 text-(length:--size-base) font-semibold">{{ 'collections.noCollections' | transloco }}</p>
+            <p class="m-0 text-(length:--size-sm) text-(--font-neutral-muted)">{{ 'collections.noCollectionsPanelHint' | transloco }}</p>
+        </div>
+      }
+
+      <!-- As in lexiQ, the name field opens at the top of the list, which stays on screen, dimmed and
+           inert, until the collection is created or the creation cancelled: the user does not leave
+           the list for another screen. -->
+      @if (creating() || collections().length === 0) {
+        <form [formRoot]="createForm" class="flex flex-col gap-(--spacing-3xs) px-(--spacing-xs)">
+          <label [for]="nameId" class="px-(--spacing-3xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
+            {{ 'collections.collectionName' | transloco }}
+          </label>
+          <div class="flex items-center gap-(--spacing-3xs)">
+            <input-group class="min-w-0 flex-1">
+              <input
+                #nameInput
+                input-control
+                type="text"
+                autocomplete="off"
+                spellcheck="false"
+                [id]="nameId"
+                [attr.placeholder]="'collections.collectionNamePlaceholder' | transloco"
+                [formField]="createForm.name"
+                [attr.aria-invalid]="nameError() ? 'true' : null"
+                [attr.aria-describedby]="nameError() ? errorId : null"
+                (keydown.escape)="cancelCreation($event)" />
+            </input-group>
+            @if (collections().length > 0) {
+              <button
+                type="button"
+                variant="secondary"
+                size="md"
+                [iconOnly]="true"
+                class="shrink-0 pointer-coarse:size-11"
+                [attr.aria-label]="'collections.cancelCreation' | transloco"
+                [tooltip]="'collections.cancelCreation' | transloco"
+                (click)="cancelCreation()">
+                <x-mark-icon aria-hidden="true" />
+              </button>
+              <button
+                type="submit"
+                size="md"
+                [iconOnly]="true"
+                class="shrink-0 pointer-coarse:size-11"
+                [attr.aria-label]="'collections.createCollection' | transloco"
+                [tooltip]="'collections.createCollection' | transloco">
+                <check-icon aria-hidden="true" />
+              </button>
+            } @else {
+              <button type="submit" size="md" class="shrink-0 pointer-coarse:h-11">{{ 'collections.create' | transloco }}</button>
+            }
+          </div>
+          <!-- No line kept in reserve for the message: it would leave an empty gap above the list. -->
+          @if (nameError(); as kind) {
+            <p [id]="errorId" class="m-0 px-(--spacing-3xs) text-(length:--size-sm) text-(--font-error-base)">
+              {{ 'collections.' + kind | transloco }}
+            </p>
+          }
+        </form>
+      } @else {
+        @if (showSearch()) {
+          <input-group class="mx-(--spacing-xs) min-w-0">
+            <search-icon input-icon-left aria-hidden="true" />
+            <input
+              #searchInput
+              input-control
+              type="search"
+              autocomplete="off"
+              spellcheck="false"
+              [attr.aria-label]="'collections.searchCollections' | transloco"
+              [attr.placeholder]="'collections.searchCollections' | transloco"
+              [formField]="searchField" />
+          </input-group>
+        }
+
+        <div class="flex items-center ps-(--spacing-md) pe-(--spacing-xs)">
+          <span class="flex-1 text-(length:--size-base) font-medium">{{ 'collections.label' | transloco }}</span>
+          <button type="button" variant="tertiary" size="sm" (click)="startCreation()">
+            <plus-icon aria-hidden="true" />
+            {{ 'collections.newCollection' | transloco }}
+          </button>
+        </div>
+      }
+
+      @if (collections().length > 0) {
+        <div
+          #scrollElement
+          role="group"
+          [attr.aria-label]="'collections.label' | transloco"
+          [attr.inert]="creating() ? '' : null"
+          class="max-h-[min(15rem,var(--panel-max-h,15rem))] overflow-y-auto px-(--spacing-2xs) transition-opacity duration-150 [scrollbar-color:color-mix(in_srgb,currentColor_40%,transparent)_transparent] [scrollbar-width:thin] motion-reduce:transition-none"
+          [class.opacity-40]="creating()">
+          @if (filteredCollections().length) {
+            <div class="relative w-full" [style.height.px]="virtualizer.getTotalSize()">
+              @for (vItem of virtualizer.getVirtualItems(); track vItem.key) {
+                @let collection = filteredCollections()[vItem.index];
+                @let coverage = coverageOf(collection);
+                <div
+                  class="absolute inset-x-0 flex items-center gap-(--spacing-2xs) rounded-(--radius-md) px-(--spacing-2xs) hover:bg-(--bg-primary-lightest) data-[fresh=true]:bg-(--bg-primary-lightest)"
+                  [attr.data-fresh]="status()?.name === collection.name && status()?.kind !== 'removed'"
+                  [style.height.px]="vItem.size"
+                  [style.transform]="'translateY(' + vItem.start + 'px)'">
+                  <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-(--radius-xs) bg-(--bg-primary-lighter) text-(--font-primary-base)" aria-hidden="true">
+                    <folder-icon />
+                  </span>
+                  <span class="min-w-0 flex-1">
+                    <span class="block truncate text-(length:--size-base)">{{ collection.name }}</span>
+                    @if (coverage === 'some') {
+                      <span class="block truncate text-(length:--size-sm) text-(--font-neutral-muted)">
+                        {{ 'collections.alreadyHasSome' | transloco: { count: heldIn(collection), total: count() } }}
+                      </span>
+                    }
+                  </span>
+                  @if (coverage === 'all') {
+                    <button
+                      type="button"
+                      size="sm"
+                      [iconOnly]="true"
+                      class="shrink-0 focus-visible:-outline-offset-2 pointer-coarse:size-11"
+                      aria-pressed="true"
+                      [attr.aria-label]="'collections.removeFrom' | transloco: { name: collection.name }"
+                      (click)="toggle(collection)">
+                      <check-icon aria-hidden="true" />
+                    </button>
+                  } @else {
+                    <button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      [iconOnly]="true"
+                      class="shrink-0 bg-(--bg-neutral-white) focus-visible:-outline-offset-2 pointer-coarse:size-11"
+                      [attr.aria-pressed]="coverage === 'some' ? 'mixed' : 'false'"
+                      [attr.aria-label]="(coverage === 'some' ? 'collections.addMissingTo' : 'collections.addDocumentsTo') | transloco: { count: count(), name: collection.name }"
+                      (click)="toggle(collection)">
+                      <plus-icon aria-hidden="true" />
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <p class="m-0 px-(--spacing-2xs) py-(--spacing-xs) text-(length:--size-sm) text-(--font-neutral-muted)">
+              {{ 'collections.noMatch' | transloco }}
+            </p>
+          }
+        </div>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormRoot,
+				selector: "form[formRoot]",
+				inputs: ["formRoot"]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputComponent,
+				selector: "input-group, inputgroup, InputGroup",
+				inputs: [
+					"class",
+					"size",
+					"scheme",
+					"filled",
+					"numbers",
+					"autoHeight",
+					"textSize"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputControlDirective,
+				selector: "input[input-control], input[inputControl]",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: InputIconLeftDirective,
+				selector: "[input-icon-left], [inputIconLeft]",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[tooltip]",
+				inputs: [
+					"tooltip",
+					"tooltipPosition",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"tooltipOffset",
+					"autoHide",
+					"hideOnEscape",
+					"escape",
+					"tooltipDisabled",
+					"tooltipArrow",
+					"tooltipStyleClass",
+					"tooltipOptions",
+					"tooltip-position",
+					"tooltip-delay",
+					"tooltip-duration",
+					"tooltip-offset"
+				],
+				exportAs: ["tooltip"]
+			},
+			{
+				kind: "component",
+				type: CheckIcon,
+				selector: "check, check-icon, Check, CheckIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: CircleCheckIcon,
+				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: FolderIcon,
+				selector: "folder, folder-icon, Folder, FolderIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: InboxIcon,
+				selector: "inbox, inbox-icon, Inbox, InboxIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: PlusIcon,
+				selector: "plus, plus-icon, Plus, PlusIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SearchIcon,
+				selector: "search, search-icon, Search, SearchIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AddToCollectionPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "AddToCollectionPanel, add-to-collection-panel",
+			imports: [
+				FormRoot,
+				FormField,
+				TranslocoPipe,
+				ButtonComponent,
+				InputComponent,
+				InputControlDirective,
+				InputIconLeftDirective,
+				TooltipDirective,
+				CheckIcon,
+				CircleCheckIcon,
+				FolderIcon,
+				InboxIcon,
+				PlusIcon,
+				SearchIcon,
+				XMarkIcon
+			],
+			providers: [provideTranslocoScope("collections")],
+			host: {
+				role: "dialog",
+				"[attr.aria-labelledby]": "titleId",
+				"(toggle)": "onHostToggle($event)",
+				class: "flex w-80 max-w-[calc(100vw-2*var(--spacing-md))] flex-col overflow-hidden rounded-(--radius-xl) border border-(--stroke-neutral-white) bg-(--bg-neutral-white) text-(--font-neutral-black) shadow-(--shadow-3)"
+			},
+			template: `
+    <div class="flex items-center gap-(--spacing-2xs) py-(--spacing-xs) ps-(--spacing-md) pe-(--spacing-xs)">
+      @if (status()?.kind === 'added') {
+        <circle-check-icon class="shrink-0 text-(--font-success-muted)" aria-hidden="true" />
+      }
+      <!-- The title is also the live region: the confirmation replaces it, and a change of an
+           existing status node is what a screen reader announces. -->
+      <p [id]="titleId" role="status" class="m-0 min-w-0 flex-1 text-(length:--size-base) leading-(--line-height-3)">
+        @switch (status()?.kind) {
+          @case ('added') {
+            {{ 'collections.addedTo' | transloco: { name: status()!.name } }}
+          }
+          @case ('removed') {
+            {{ 'collections.removedFrom' | transloco: { name: status()!.name } }}
+          }
+          @case ('created') {
+            {{ 'collections.createdNamed' | transloco: { name: status()!.name } }}
+          }
+          @default {
+            {{ 'collections.addDocuments' | transloco: { count: count() } }}
+          }
+        }
+      </p>
+      <button
+        type="button"
+        variant="none"
+        class="inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) text-(--font-primary-muted) hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid pointer-coarse:size-11"
+        [attr.aria-label]="'collections.close' | transloco"
+        [tooltip]="'collections.close' | transloco"
+        (click)="closeRequested.emit()">
+        <x-mark-icon aria-hidden="true" />
+      </button>
+    </div>
+
+    <div class="flex min-h-0 flex-col gap-(--spacing-2xs) border-t border-(--stroke-neutral-white) pt-(--spacing-xs) pb-(--spacing-2xs)">
+      @if (collections().length === 0) {
+        <div class="flex flex-col items-center gap-(--spacing-3xs) px-(--spacing-md) pt-(--spacing-2xs) text-center">
+            <span class="mb-(--spacing-3xs) inline-flex size-10 items-center justify-center rounded-(--radius-md) bg-(--bg-indigo-base-alt) text-(--font-indigo-base)" aria-hidden="true">
+              <inbox-icon />
+            </span>
+            <p class="m-0 text-(length:--size-base) font-semibold">{{ 'collections.noCollections' | transloco }}</p>
+            <p class="m-0 text-(length:--size-sm) text-(--font-neutral-muted)">{{ 'collections.noCollectionsPanelHint' | transloco }}</p>
+        </div>
+      }
+
+      <!-- As in lexiQ, the name field opens at the top of the list, which stays on screen, dimmed and
+           inert, until the collection is created or the creation cancelled: the user does not leave
+           the list for another screen. -->
+      @if (creating() || collections().length === 0) {
+        <form [formRoot]="createForm" class="flex flex-col gap-(--spacing-3xs) px-(--spacing-xs)">
+          <label [for]="nameId" class="px-(--spacing-3xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
+            {{ 'collections.collectionName' | transloco }}
+          </label>
+          <div class="flex items-center gap-(--spacing-3xs)">
+            <input-group class="min-w-0 flex-1">
+              <input
+                #nameInput
+                input-control
+                type="text"
+                autocomplete="off"
+                spellcheck="false"
+                [id]="nameId"
+                [attr.placeholder]="'collections.collectionNamePlaceholder' | transloco"
+                [formField]="createForm.name"
+                [attr.aria-invalid]="nameError() ? 'true' : null"
+                [attr.aria-describedby]="nameError() ? errorId : null"
+                (keydown.escape)="cancelCreation($event)" />
+            </input-group>
+            @if (collections().length > 0) {
+              <button
+                type="button"
+                variant="secondary"
+                size="md"
+                [iconOnly]="true"
+                class="shrink-0 pointer-coarse:size-11"
+                [attr.aria-label]="'collections.cancelCreation' | transloco"
+                [tooltip]="'collections.cancelCreation' | transloco"
+                (click)="cancelCreation()">
+                <x-mark-icon aria-hidden="true" />
+              </button>
+              <button
+                type="submit"
+                size="md"
+                [iconOnly]="true"
+                class="shrink-0 pointer-coarse:size-11"
+                [attr.aria-label]="'collections.createCollection' | transloco"
+                [tooltip]="'collections.createCollection' | transloco">
+                <check-icon aria-hidden="true" />
+              </button>
+            } @else {
+              <button type="submit" size="md" class="shrink-0 pointer-coarse:h-11">{{ 'collections.create' | transloco }}</button>
+            }
+          </div>
+          <!-- No line kept in reserve for the message: it would leave an empty gap above the list. -->
+          @if (nameError(); as kind) {
+            <p [id]="errorId" class="m-0 px-(--spacing-3xs) text-(length:--size-sm) text-(--font-error-base)">
+              {{ 'collections.' + kind | transloco }}
+            </p>
+          }
+        </form>
+      } @else {
+        @if (showSearch()) {
+          <input-group class="mx-(--spacing-xs) min-w-0">
+            <search-icon input-icon-left aria-hidden="true" />
+            <input
+              #searchInput
+              input-control
+              type="search"
+              autocomplete="off"
+              spellcheck="false"
+              [attr.aria-label]="'collections.searchCollections' | transloco"
+              [attr.placeholder]="'collections.searchCollections' | transloco"
+              [formField]="searchField" />
+          </input-group>
+        }
+
+        <div class="flex items-center ps-(--spacing-md) pe-(--spacing-xs)">
+          <span class="flex-1 text-(length:--size-base) font-medium">{{ 'collections.label' | transloco }}</span>
+          <button type="button" variant="tertiary" size="sm" (click)="startCreation()">
+            <plus-icon aria-hidden="true" />
+            {{ 'collections.newCollection' | transloco }}
+          </button>
+        </div>
+      }
+
+      @if (collections().length > 0) {
+        <div
+          #scrollElement
+          role="group"
+          [attr.aria-label]="'collections.label' | transloco"
+          [attr.inert]="creating() ? '' : null"
+          class="max-h-[min(15rem,var(--panel-max-h,15rem))] overflow-y-auto px-(--spacing-2xs) transition-opacity duration-150 [scrollbar-color:color-mix(in_srgb,currentColor_40%,transparent)_transparent] [scrollbar-width:thin] motion-reduce:transition-none"
+          [class.opacity-40]="creating()">
+          @if (filteredCollections().length) {
+            <div class="relative w-full" [style.height.px]="virtualizer.getTotalSize()">
+              @for (vItem of virtualizer.getVirtualItems(); track vItem.key) {
+                @let collection = filteredCollections()[vItem.index];
+                @let coverage = coverageOf(collection);
+                <div
+                  class="absolute inset-x-0 flex items-center gap-(--spacing-2xs) rounded-(--radius-md) px-(--spacing-2xs) hover:bg-(--bg-primary-lightest) data-[fresh=true]:bg-(--bg-primary-lightest)"
+                  [attr.data-fresh]="status()?.name === collection.name && status()?.kind !== 'removed'"
+                  [style.height.px]="vItem.size"
+                  [style.transform]="'translateY(' + vItem.start + 'px)'">
+                  <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-(--radius-xs) bg-(--bg-primary-lighter) text-(--font-primary-base)" aria-hidden="true">
+                    <folder-icon />
+                  </span>
+                  <span class="min-w-0 flex-1">
+                    <span class="block truncate text-(length:--size-base)">{{ collection.name }}</span>
+                    @if (coverage === 'some') {
+                      <span class="block truncate text-(length:--size-sm) text-(--font-neutral-muted)">
+                        {{ 'collections.alreadyHasSome' | transloco: { count: heldIn(collection), total: count() } }}
+                      </span>
+                    }
+                  </span>
+                  @if (coverage === 'all') {
+                    <button
+                      type="button"
+                      size="sm"
+                      [iconOnly]="true"
+                      class="shrink-0 focus-visible:-outline-offset-2 pointer-coarse:size-11"
+                      aria-pressed="true"
+                      [attr.aria-label]="'collections.removeFrom' | transloco: { name: collection.name }"
+                      (click)="toggle(collection)">
+                      <check-icon aria-hidden="true" />
+                    </button>
+                  } @else {
+                    <button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      [iconOnly]="true"
+                      class="shrink-0 bg-(--bg-neutral-white) focus-visible:-outline-offset-2 pointer-coarse:size-11"
+                      [attr.aria-pressed]="coverage === 'some' ? 'mixed' : 'false'"
+                      [attr.aria-label]="(coverage === 'some' ? 'collections.addMissingTo' : 'collections.addDocumentsTo') | transloco: { count: count(), name: collection.name }"
+                      (click)="toggle(collection)">
+                      <plus-icon aria-hidden="true" />
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <p class="m-0 px-(--spacing-2xs) py-(--spacing-xs) text-(length:--size-sm) text-(--font-neutral-muted)">
+              {{ 'collections.noMatch' | transloco }}
+            </p>
+          }
+        </div>
+      }
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		articles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "articles",
+				required: true
+			}]
+		}],
+		done: [{
+			type: i0.Output,
+			args: ["done"]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		closeRequested: [{
+			type: i0.Output,
+			args: ["closeRequested"]
+		}],
+		scrollElement: [{
+			type: i0.ViewChild,
+			args: ["scrollElement", { isSignal: true }]
+		}],
+		searchInput: [{
+			type: i0.ViewChild,
+			args: ["searchInput", { isSignal: true }]
+		}],
+		nameInput: [{
+			type: i0.ViewChild,
+			args: ["nameInput", { isSignal: true }]
+		}]
+	}
+});
 var ExportService = class ExportService {
 	client = inject(ATOMIC_CLIENT);
 	download(options) {
@@ -7227,14 +8020,16 @@ 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 [&>div]:px-2", {
+const multiSelectionToolbarVariants = cva("", {
 	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",
-		glassy: "divide-gray-300 bg-white/70 from-transparent to-white text-gray-800 backdrop-blur-[15px]"
+		dark: "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 divide-gray-800 bg-gray-900 from-gray-500 to-gray-900 text-white",
+		light: "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 divide-gray-400 bg-white from-white to-purple-50 text-gray-800",
+		glassy: "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 divide-gray-300 bg-white/70 from-transparent to-white text-gray-800 backdrop-blur-[15px]",
+		floating: "flex flex-wrap items-center justify-end gap-(--spacing-2xs)"
 	} },
 	defaultVariants: { variant: "dark" }
 });
+const FLOATING_BUTTON = "shadow-(--shadow-2) pointer-coarse:h-11";
 var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	cn = cn;
 	appStore = inject(AppStore);
@@ -7246,6 +8041,7 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	hint = input(...ngDevMode ? [void 0, { debugName: "hint" }] : /* istanbul ignore next */ []);
 	updatedCollections = output();
 	cleared = output();
+	addedToCollection = output();
 	count = this.selection.multiSelectCount;
 	variants = computed(() => cn(multiSelectionToolbarVariants({
 		variant: this.variant(),
@@ -7265,6 +8061,25 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	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;
+	floatingButton = FLOATING_BUTTON;
+	hostClass = computed(() => {
+		const active = this.count() > 0;
+		if (this.variant() === "floating") return cn("fixed end-(--spacing-xl) bottom-(--spacing-xl) z-50 transition-[translate,opacity] duration-300 motion-reduce:transition-none", active ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0");
+		return cn("fixed -bottom-20 left-[50%] z-50 translate-x-[-50%] transition-[translate,opacity,discrete] duration-300", active ? "-translate-y-24 opacity-100" : "opacity-0");
+	}, ...ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []);
+	toolbarClass = computed(() => this.variants(), ...ngDevMode ? [{ debugName: "toolbarClass" }] : /* istanbul ignore next */ []);
+	static nextId = 0;
+	panelId = `multi-selection-collections-${MultiSelectionToolbarComponent.nextId++}`;
+	panelOpen = signal(false, ...ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []);
+	panelArticles = signal([], ...ngDevMode ? [{ debugName: "panelArticles" }] : /* istanbul ignore next */ []);
+	lastFiled = signal(null, ...ngDevMode ? [{ debugName: "lastFiled" }] : /* istanbul ignore next */ []);
+	collectionsChanged = false;
+	collectionTrigger = viewChild("collectionTrigger", ...ngDevMode ? [{ debugName: "collectionTrigger" }] : /* istanbul ignore next */ []);
+	panel = viewChild("panel", {
+		...ngDevMode ? { debugName: "panel" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	lastFiledTimer;
 	constructor() {
 		effect(() => {
 			const count = this.count();
@@ -7275,9 +8090,21 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 				} else if (this.armed) {
 					this.armed = false;
 					this.showHint.set(true);
+					this.lastFiled.set(null);
 				} else this.showHint.set(false);
 			});
 		});
+		effect(() => {
+			if (this.count() === 0) untracked(() => this.panelOpen() && this.closePanel());
+		});
+		injectFloatingPanel({
+			panel: () => this.panel()?.nativeElement,
+			anchor: () => this.collectionTrigger()?.nativeElement,
+			placement: "top-end",
+			offset: 8,
+			topLayer: true,
+			maxHeightVariable: "--panel-max-h"
+		});
 	}
 	clearSelection = () => {
 		if (this.count() === 0) return;
@@ -7292,6 +8119,43 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	});
 	openExportDialog = () => void Export.call(this.ids(), { injector: this.injector });
 	attachToAssistant = () => this.selection.update({ assistantIdsToAttach: this.ids() });
+	togglePanel() {
+		if (this.panelOpen()) {
+			this.closePanel();
+			return;
+		}
+		this.panelArticles.set([...getState(this.selection).multiSelection]);
+		this.collectionsChanged = false;
+		this.panelOpen.set(true);
+	}
+	closePanel() {
+		const el = this.panel()?.nativeElement;
+		if (el?.matches(":popover-open")) el.hidePopover();
+		else this.panelClosed();
+	}
+	onPanelToggle(event) {
+		if (event.newState === "closed") this.panelClosed();
+	}
+	onFiled(name) {
+		const count = this.panelArticles().length;
+		this.closePanel();
+		this.clearSelection();
+		this.lastFiled.set({
+			count,
+			name
+		});
+		clearTimeout(this.lastFiledTimer);
+		this.lastFiledTimer = setTimeout(() => this.lastFiled.set(null), 5e3);
+		this.addedToCollection.emit(name);
+	}
+	panelClosed() {
+		if (!this.panelOpen()) return;
+		this.panelOpen.set(false);
+		if (this.collectionsChanged) {
+			this.collectionsChanged = false;
+			this.updatedCollections.emit();
+		}
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -7338,26 +8202,38 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 		},
 		outputs: {
 			updatedCollections: "updatedCollections",
-			cleared: "cleared"
-		},
-		host: {
-			properties: {
-				"class.opacity-100": "count() > 0",
-				"class.-translate-y-24": "count() > 0"
-			},
-			classAttribute: "fixed -bottom-20 left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0"
+			cleared: "cleared",
+			addedToCollection: "addedToCollection"
 		},
+		host: { properties: { "class": "hostClass()" } },
 		providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
+		viewQueries: [{
+			propertyName: "collectionTrigger",
+			first: true,
+			predicate: ["collectionTrigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "panel",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
     <!-- 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. -->
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide, ou juste
+         après un classement en collection (la sélection vient alors d'être vidée). -->
     <span role="status" class="sr-only">
       @if (count() > 0) {
         {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
         @if (showHint() && hint()) {
           . {{ hint() }}
         }
+      } @else if (lastFiled(); as filed) {
+        {{ 'collections.addedDocumentsTo' | transloco: filed }}
       }
     </span>
 
@@ -7370,40 +8246,97 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
       [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 aria-hidden="true" />
-        </button>
-      </div>
-
-      <div>
-        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
-          <inbox-icon aria-hidden="true" />
-          {{ 'collections.label' | transloco }}
+      [class]="toolbarClass()">
+      @if (variant() === 'floating') {
+        <!-- Le décompte n'est pas répété : la page qui affiche les cases à cocher le montre déjà.
+             Échap vide la sélection depuis n'importe quel bouton. -->
+        <button
+          #collectionTrigger
+          type="button"
+          variant="accent"
+          size="md"
+          aria-haspopup="dialog"
+          [class]="floatingButton"
+          [attr.aria-expanded]="panelOpen()"
+          [attr.aria-controls]="panelOpen() ? panelId : null"
+          (click)="togglePanel()">
+          <bookmark-icon aria-hidden="true" />
+          {{ 'multiSelectionToolbar.addToCollection' | transloco }}
         </button>
-      </div>
-
-      <div>
-        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
+        <button type="button" variant="secondary" size="md" [class]="floatingButton + ' bg-(--bg-neutral-white)'" (click)="openExportDialog()">
           <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </div>
-
-      @if (showAssistantAction()) {
-        <div class="pe-0!">
-          <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
+        @if (showAssistantAction()) {
+          <button type="button" variant="secondary" size="md" [class]="floatingButton + ' bg-(--bg-neutral-white)'" (click)="attachToAssistant()">
             <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
+        }
+      } @else {
+        <div class="ps-0!">
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
+            {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+            <x-mark-icon aria-hidden="true" />
+          </button>
+        </div>
+
+        <div>
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+            <inbox-icon aria-hidden="true" />
+            {{ 'collections.label' | transloco }}
+          </button>
+        </div>
+
+        <div>
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
+            <file-output-icon aria-hidden="true" />
+            {{ 'export.title' | transloco }}
+          </button>
         </div>
+
+        @if (showAssistantAction()) {
+          <div class="pe-0!">
+            <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
+              <sparkles-icon aria-hidden="true" />
+              {{ 'article.addToAIOverview' | transloco }}
+            </button>
+          </div>
+        }
       }
     </div>
+
+    <!-- Hors de la barre : un Échap dans le panneau ne doit fermer que lui, pas vider la sélection.
+         popover="auto" : clic à l'extérieur et Échap le ferment, et le navigateur rend alors le focus au
+         bouton qui l'a ouvert. -->
+    @if (panelOpen()) {
+      <AddToCollectionPanel
+        #panel
+        popover="auto"
+        class="fixed m-0 p-0"
+        [id]="panelId"
+        [articles]="panelArticles()"
+        (toggle)="onPanelToggle($event)"
+        (keydown.escape)="$event.stopPropagation()"
+        (changed)="collectionsChanged = true"
+        (done)="onFiled($event)"
+        (closeRequested)="closePanel()" />
+    }
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
 			{
 				kind: "component",
 				type: XMarkIcon,
@@ -7428,6 +8361,23 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 				selector: "file-output, file-output-icon, FileOutput, FileOutputIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: BookmarkIcon,
+				selector: "bookmark, bookmark-icon, Bookmark, BookmarkIcon",
+				inputs: ["class", "solid"]
+			},
+			{
+				kind: "component",
+				type: AddToCollectionPanelComponent,
+				selector: "AddToCollectionPanel, add-to-collection-panel",
+				inputs: ["articles"],
+				outputs: [
+					"done",
+					"changed",
+					"closeRequested"
+				]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -7447,21 +8397,27 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "MultiSelectionToolbar, multi-selection-toolbar",
 			imports: [
 				TranslocoPipe,
+				ButtonComponent,
 				XMarkIcon,
 				InboxIcon,
 				SparklesIcon,
-				FileOutputIcon
+				FileOutputIcon,
+				BookmarkIcon,
+				AddToCollectionPanelComponent
 			],
 			providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
 			template: `
     <!-- 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. -->
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide, ou juste
+         après un classement en collection (la sélection vient alors d'être vidée). -->
     <span role="status" class="sr-only">
       @if (count() > 0) {
         {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
         @if (showHint() && hint()) {
           . {{ hint() }}
         }
+      } @else if (lastFiled(); as filed) {
+        {{ 'collections.addedDocumentsTo' | transloco: filed }}
       }
     </span>
 
@@ -7474,43 +8430,84 @@ i0.ɵɵngDeclareClassMetadata({
       [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 aria-hidden="true" />
-        </button>
-      </div>
-
-      <div>
-        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
-          <inbox-icon aria-hidden="true" />
-          {{ 'collections.label' | transloco }}
+      [class]="toolbarClass()">
+      @if (variant() === 'floating') {
+        <!-- Le décompte n'est pas répété : la page qui affiche les cases à cocher le montre déjà.
+             Échap vide la sélection depuis n'importe quel bouton. -->
+        <button
+          #collectionTrigger
+          type="button"
+          variant="accent"
+          size="md"
+          aria-haspopup="dialog"
+          [class]="floatingButton"
+          [attr.aria-expanded]="panelOpen()"
+          [attr.aria-controls]="panelOpen() ? panelId : null"
+          (click)="togglePanel()">
+          <bookmark-icon aria-hidden="true" />
+          {{ 'multiSelectionToolbar.addToCollection' | transloco }}
         </button>
-      </div>
-
-      <div>
-        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
+        <button type="button" variant="secondary" size="md" [class]="floatingButton + ' bg-(--bg-neutral-white)'" (click)="openExportDialog()">
           <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </div>
-
-      @if (showAssistantAction()) {
-        <div class="pe-0!">
-          <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
+        @if (showAssistantAction()) {
+          <button type="button" variant="secondary" size="md" [class]="floatingButton + ' bg-(--bg-neutral-white)'" (click)="attachToAssistant()">
             <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
+        }
+      } @else {
+        <div class="ps-0!">
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
+            {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+            <x-mark-icon aria-hidden="true" />
+          </button>
+        </div>
+
+        <div>
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+            <inbox-icon aria-hidden="true" />
+            {{ 'collections.label' | transloco }}
+          </button>
         </div>
+
+        <div>
+          <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
+            <file-output-icon aria-hidden="true" />
+            {{ 'export.title' | transloco }}
+          </button>
+        </div>
+
+        @if (showAssistantAction()) {
+          <div class="pe-0!">
+            <button variant="none" class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
+              <sparkles-icon aria-hidden="true" />
+              {{ 'article.addToAIOverview' | transloco }}
+            </button>
+          </div>
+        }
       }
     </div>
+
+    <!-- Hors de la barre : un Échap dans le panneau ne doit fermer que lui, pas vider la sélection.
+         popover="auto" : clic à l'extérieur et Échap le ferment, et le navigateur rend alors le focus au
+         bouton qui l'a ouvert. -->
+    @if (panelOpen()) {
+      <AddToCollectionPanel
+        #panel
+        popover="auto"
+        class="fixed m-0 p-0"
+        [id]="panelId"
+        [articles]="panelArticles()"
+        (toggle)="onPanelToggle($event)"
+        (keydown.escape)="$event.stopPropagation()"
+        (changed)="collectionsChanged = true"
+        (done)="onFiled($event)"
+        (closeRequested)="closePanel()" />
+    }
   `,
-			host: {
-				class: "fixed -bottom-20 left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0",
-				"[class.opacity-100]": "count() > 0",
-				"[class.-translate-y-24]": "count() > 0"
-			}
+			host: { "[class]": "hostClass()" }
 		}]
 	}],
 	ctorParameters: () => [],
@@ -7547,6 +8544,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["cleared"]
 		}],
+		addedToCollection: [{
+			type: i0.Output,
+			args: ["addedToCollection"]
+		}],
 		allowAI: [{
 			type: i0.Input,
 			args: [{
@@ -7554,6 +8555,17 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "allowAI",
 				required: false
 			}]
+		}],
+		collectionTrigger: [{
+			type: i0.ViewChild,
+			args: ["collectionTrigger", { isSignal: true }]
+		}],
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", {
+				read: ElementRef,
+				isSignal: true
+			}]
 		}]
 	}
 });
@@ -7962,11 +8974,16 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 	});
 	target = input(...ngDevMode ? [void 0, { debugName: "target" }] : /* istanbul ignore next */ []);
 	margin = input(4, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
+	fitMargin = input(void 0, ...ngDevMode ? [{ debugName: "fitMargin" }] : /* istanbul ignore next */ []);
 	direction = input("horizontal", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
 	reserveStop = input(false, {
 		...ngDevMode ? { debugName: "reserveStop" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	animate = input(false, {
+		...ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	count = output();
 	el = inject(ElementRef).nativeElement;
 	destroyRef = inject(DestroyRef);
@@ -7974,6 +8991,7 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 	itemsResizeObserver = new ResizeObserver((entries) => {
 		if (entries.some((entry) => entry.target.style.display !== "none")) this.countItems();
 	});
+	hiddenItems = /* @__PURE__ */ new WeakSet();
 	countSub;
 	_lastCount;
 	constructor() {
@@ -8006,7 +9024,8 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 		const containerEnd = (horizontal ? containerRect.right : containerRect.bottom) - this.margin();
 		const itemEnd = (rect) => horizontal ? rect.right : rect.bottom;
 		let count;
-		if (!this.reserveStop() && itemEnd(itemsRects[itemsRects.length - 1]) <= containerEnd) count = itemsRects.length;
+		const fitEnd = (horizontal ? containerRect.right : containerRect.bottom) - (this.fitMargin() ?? this.margin());
+		if (!this.reserveStop() && itemEnd(itemsRects[itemsRects.length - 1]) <= fitEnd) count = itemsRects.length;
 		else {
 			const limit = containerEnd - (horizontal ? stopRect.width : stopRect.height);
 			count = 0;
@@ -8020,7 +9039,19 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 	}
 	toggleToCount(count) {
 		this.items().forEach((item, index) => {
-			item.nativeElement.style.display = index < count ? "" : "none";
+			const el = item.nativeElement;
+			const visible = index < count;
+			el.style.display = visible ? "" : "none";
+			if (!visible) this.hiddenItems.add(el);
+			else if (this.hiddenItems.delete(el) && this.animate()) this.fadeIn(el);
+		});
+	}
+	fadeIn(el) {
+		if (typeof el.animate !== "function") return;
+		if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		el.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: 160,
+			easing: "ease-out"
 		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -8052,6 +9083,13 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 				isRequired: false,
 				transformFunction: null
 			},
+			fitMargin: {
+				classPropertyName: "fitMargin",
+				publicName: "fitMargin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			direction: {
 				classPropertyName: "direction",
 				publicName: "direction",
@@ -8065,6 +9103,13 @@ var OverflowManagerDirective = class OverflowManagerDirective {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			animate: {
+				classPropertyName: "animate",
+				publicName: "animate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { count: "count" },
@@ -8128,6 +9173,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fitMargin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fitMargin",
+				required: false
+			}]
+		}],
 		direction: [{
 			type: i0.Input,
 			args: [{
@@ -8144,6 +9197,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		animate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animate",
+				required: false
+			}]
+		}],
 		count: [{
 			type: i0.Output,
 			args: ["count"]
@@ -8841,8 +9902,10 @@ var NavbarTabsComponent = class NavbarTabsComponent {
 				inputs: [
 					"target",
 					"margin",
+					"fitMargin",
 					"direction",
-					"reserveStop"
+					"reserveStop",
+					"animate"
 				],
 				outputs: ["count"]
 			},
@@ -26208,6 +27271,8 @@ var AggregationDateComponent = class AggregationDateComponent {
 	allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
 	transloco = inject(TranslocoService);
 	injector = inject(Injector);
+	breakpoints = inject(BreakpointObserverService);
+	actionSize = computed(() => this.breakpoints.isTouch() ? "lg" : "md", ...ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	selection = signal(false, ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
 	validSelection = signal(false, ...ngDevMode ? [{ debugName: "validSelection" }] : /* istanbul ignore next */ []);
@@ -26766,7 +27831,7 @@ var AggregationDateComponent = class AggregationDateComponent {
 		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 chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\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    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"lg\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          size=\"lg\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\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 px-1 pt-1 pb-3\"\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 min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\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 items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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 min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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 min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\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 (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=\"md\"\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    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\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 chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\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    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [size]=\"actionSize()\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          [size]=\"actionSize()\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\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 px-1 pt-1 pb-3\"\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 min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\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 items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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 min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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 min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\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 (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=\"md\"\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    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
 		styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n", ":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"],
 		dependencies: [
 			{
@@ -26898,7 +27963,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TooltipDirective
 			],
 			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 chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\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    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"lg\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          size=\"lg\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\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 px-1 pt-1 pb-3\"\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 min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\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 items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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 min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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 min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\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 (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=\"md\"\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    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\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 chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\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    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        [size]=\"actionSize()\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          [size]=\"actionSize()\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\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 px-1 pt-1 pb-3\"\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 min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\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 items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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 min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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 min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 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</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\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 (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=\"md\"\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    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
 			styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n", ":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"]
 		}]
 	}],
@@ -27230,6 +28295,8 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 	searchBox = viewChild(SearchInputComponent, ...ngDevMode ? [{ debugName: "searchBox" }] : /* istanbul ignore next */ []);
 	searchToggle = viewChild("searchToggle", ...ngDevMode ? [{ debugName: "searchToggle" }] : /* istanbul ignore next */ []);
 	injector = inject(Injector);
+	breakpoints = inject(BreakpointObserverService);
+	actionSize = computed(() => this.breakpoints.isTouch() ? "lg" : "md", ...ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []);
 	isInPopover = !!inject(PopoverDirective, { optional: true });
 	static nextId = 0;
 	searchId = `aggregation-search-${AggregationPanelComponent.nextId++}`;
@@ -27434,7 +28501,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 chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) 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 #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\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 (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\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=\"md\"\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 (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\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              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"lg\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"lg\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\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-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\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}\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 chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) 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 #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\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 (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\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=\"md\"\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 (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <!-- `pb-1.5`: the focus ring of the Clear all / Apply buttons just below sits 4px outside them (2px ring, 2px offset): the\n               6px leave 2px between that ring and the field. -->\n          <div [class]=\"headless() ? 'pt-0.5 pb-1.5' : 'pt-2 pb-1.5'\">\n            <SearchInput\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              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [size]=\"actionSize()\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            [size]=\"actionSize()\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\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-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\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}\n",
 		styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n"],
 		dependencies: [
 			{
@@ -27579,7 +28646,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("filters")],
 			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 chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) 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 #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\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 (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\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=\"md\"\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 (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\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              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"lg\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"lg\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\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-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\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}\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 chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) 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 #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\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 (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\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=\"md\"\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 (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <!-- `pb-1.5`: the focus ring of the Clear all / Apply buttons just below sits 4px outside them (2px ring, 2px offset): the\n               6px leave 2px between that ring and the field. -->\n          <div [class]=\"headless() ? 'pt-0.5 pb-1.5' : 'pt-2 pb-1.5'\">\n            <SearchInput\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              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [size]=\"actionSize()\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            [size]=\"actionSize()\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\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-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\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}\n",
 			styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n"]
 		}]
 	}],
@@ -30610,6 +31677,7 @@ function chipsForLeaf(leaf, source) {
 }
 var AppliedFiltersComponent = class AppliedFiltersComponent {
 	queryParamsStore = inject(QueryParamsStore);
+	appStore = inject(AppStore);
 	static nextId = 0;
 	listId = `applied-filters-${AppliedFiltersComponent.nextId++}`;
 	list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
@@ -30630,6 +31698,10 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 		...ngDevMode ? { debugName: "showField" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	fieldIcon = input(true, {
+		...ngDevMode ? { debugName: "fieldIcon" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	variant = input(void 0, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 	scheme = input("grey", ...ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []);
 	size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -30691,7 +31763,15 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 		items.forEach((item) => item.inert = !this.expanded() && item.offsetTop - origin >= folded);
 	}
 	chips = computed(() => {
-		return (this.filters() ?? this.queryParamsStore.filters()).flatMap((source) => filterLeaves(source).flatMap((leaf) => chipsForLeaf(leaf, source)));
+		return (this.filters() ?? this.queryParamsStore.filters()).flatMap((source) => filterLeaves(source).flatMap((leaf) => {
+			const chips = chipsForLeaf(leaf, source);
+			const column = chips[0]?.field;
+			const icon = column ? this.appStore.getAggregationCustomization?.(column, chips[0].name)?.icon : void 0;
+			return icon ? chips.map((chip) => ({
+				...chip,
+				icon
+			})) : chips;
+		}));
 	}, ...ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []);
 	remove(chip) {
 		const rebuilt = rebuildWithout(chip.source, chip);
@@ -30758,6 +31838,13 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			fieldIcon: {
+				classPropertyName: "fieldIcon",
+				publicName: "fieldIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			variant: {
 				classPropertyName: "variant",
 				publicName: "variant",
@@ -30841,7 +31928,15 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
               [class]="'max-w-full items-center gap-1 ' + chipClass()"
             >
               @if (showField()) {
-                <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+                @if (fieldIcon() && chip.icon) {
+                  <!-- The icon stands for the name: the name stays available as a tooltip and to screen readers. -->
+                  <span class="inline-flex shrink-0" [title]="(chip.name ?? chip.field) | syslang">
+                    <fa-icon [faClass]="chip.icon" />
+                    <span class="sr-only">{{ (chip.name ?? chip.field) | syslang }}:</span>
+                  </span>
+                } @else {
+                  <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+                }
               }
               <span class="truncate">{{ chip.display | syslang }}</span>
               <button
@@ -30885,6 +31980,12 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "component",
+				type: FaIconComponent,
+				selector: "fa-icon, FaIcon",
+				inputs: ["faClass", "class"]
+			},
 			{
 				kind: "directive",
 				type: TagComponent,
@@ -30941,6 +32042,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				SyslangPipe,
+				FaIconComponent,
 				TagComponent,
 				ButtonComponent,
 				XMarkIcon
@@ -30970,7 +32072,15 @@ i0.ɵɵngDeclareClassMetadata({
               [class]="'max-w-full items-center gap-1 ' + chipClass()"
             >
               @if (showField()) {
-                <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+                @if (fieldIcon() && chip.icon) {
+                  <!-- The icon stands for the name: the name stays available as a tooltip and to screen readers. -->
+                  <span class="inline-flex shrink-0" [title]="(chip.name ?? chip.field) | syslang">
+                    <fa-icon [faClass]="chip.icon" />
+                    <span class="sr-only">{{ (chip.name ?? chip.field) | syslang }}:</span>
+                  </span>
+                } @else {
+                  <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+                }
               }
               <span class="truncate">{{ chip.display | syslang }}</span>
               <button
@@ -31045,6 +32155,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fieldIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldIcon",
+				required: false
+			}]
+		}],
 		variant: [{
 			type: i0.Input,
 			args: [{
@@ -33808,10 +34926,10 @@ var FiltersBarComponent = class FiltersBarComponent {
          height announced as "Filter controls". Every button in it is a native tab stop (no roving, no arrow keys). -->
     <!-- Something of the host's own (a quick-filters pill, say) leads the bar. It sits beside the group and
          not inside it, and it stays visible when the group below is not rendered. -->
-    <div [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' && 'justify-center')">
+    <div #filtersRow [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' && 'justify-center')">
     <ng-content select="[filtersBarStart]" />
     @if (hasContent()) {
-    <div role="group" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' ? 'flex-initial' : 'flex-1')">
+    <div role="group" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [fitMargin]="-0.5" animate [target]="align() === 'center' ? filtersRow : undefined" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  [class]="cn('relative flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' ? 'flex-initial' : 'flex-1')">
       @if (hasFilters() && showClearButtons()) {
         <button
           [attr.aria-label]="'filters.clearAllFilters' | transloco"
@@ -33862,7 +34980,10 @@ var FiltersBarComponent = class FiltersBarComponent {
       }
     </div>
 
-      <!-- Always mounted so the stop position is stable; hidden when all filters fit -->
+      <!-- Always mounted so the overflow manager can read its size; when all filters fit it is invisible AND out of
+           the flow (absolute), otherwise its reserved width pushes the list aside and an align="center" bar
+           ends up off-center. -->
+
       @if (showMoreFiltersButton()) {
         <!-- No aria-label here: the host is a custom element with no role of its own, where ARIA
              forbids the attribute. The name belongs to the <button> inside MoreButton, which
@@ -33870,7 +34991,7 @@ var FiltersBarComponent = class FiltersBarComponent {
         <MoreButton
           overflowStop
           [disabled]="hasMoreFilters().length === 0"
-          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
+          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none absolute top-0 left-0')"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
           [lockPosition]="lockPosition()"
@@ -33947,8 +35068,10 @@ var FiltersBarComponent = class FiltersBarComponent {
 				inputs: [
 					"target",
 					"margin",
+					"fitMargin",
 					"direction",
-					"reserveStop"
+					"reserveStop",
+					"animate"
 				],
 				outputs: ["count"]
 			},
@@ -34008,10 +35131,10 @@ i0.ɵɵngDeclareClassMetadata({
          height announced as "Filter controls". Every button in it is a native tab stop (no roving, no arrow keys). -->
     <!-- Something of the host's own (a quick-filters pill, say) leads the bar. It sits beside the group and
          not inside it, and it stays visible when the group below is not rendered. -->
-    <div [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' && 'justify-center')">
+    <div #filtersRow [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' && 'justify-center')">
     <ng-content select="[filtersBarStart]" />
     @if (hasContent()) {
-    <div role="group" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  [class]="cn('flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' ? 'flex-initial' : 'flex-1')">
+    <div role="group" [attr.aria-label]="ariaLabel() ?? ('filters.filterControls' | transloco)" overflowManager [direction]="direction()" [fitMargin]="-0.5" animate [target]="align() === 'center' ? filtersRow : undefined" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  [class]="cn('relative flex min-w-0 items-center rounded-[inherit] bg-inherit', pillGap(), align() === 'center' ? 'flex-initial' : 'flex-1')">
       @if (hasFilters() && showClearButtons()) {
         <button
           [attr.aria-label]="'filters.clearAllFilters' | transloco"
@@ -34062,7 +35185,10 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
 
-      <!-- Always mounted so the stop position is stable; hidden when all filters fit -->
+      <!-- Always mounted so the overflow manager can read its size; when all filters fit it is invisible AND out of
+           the flow (absolute), otherwise its reserved width pushes the list aside and an align="center" bar
+           ends up off-center. -->
+
       @if (showMoreFiltersButton()) {
         <!-- No aria-label here: the host is a custom element with no role of its own, where ARIA
              forbids the attribute. The name belongs to the <button> inside MoreButton, which
@@ -34070,7 +35196,7 @@ i0.ɵɵngDeclareClassMetadata({
         <MoreButton
           overflowStop
           [disabled]="hasMoreFilters().length === 0"
-          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
+          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none absolute top-0 left-0')"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
           [lockPosition]="lockPosition()"
@@ -41746,6 +42872,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, AlertFormComponent, 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, EntityNavigationService, 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, FiltersPanelComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, HistoryPanelComponent, HistoryTitleMarqueeDirective, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, LoadingDotsComponent, LocalizedNumberPipe, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OVERFLOW_ACTIONS_CONFIG, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowActionsComponent, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewFindPanelComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, QuickFiltersComponent, QuickFiltersListComponent, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SEARCH_BOX_CATEGORIES_SORT, SEARCH_BOX_CATEGORY_ICONS, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchBoxComponent, SearchBoxPopupDirective, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAlertsPanelComponent, 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, groupSearchesByDate, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, pageNumberFromAnchor, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, provideStartupAggregation, quantileScale, queryNameResolver, rebuildWithout, searchItemKey, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFavoriteSearchesFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withQuickFiltersFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AddToCollectionPanelComponent, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertFormComponent, 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, EntityNavigationService, 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, FiltersPanelComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, HistoryPanelComponent, HistoryTitleMarqueeDirective, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, LoadingDotsComponent, LocalizedNumberPipe, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OVERFLOW_ACTIONS_CONFIG, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowActionsComponent, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewFindPanelComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, QuickFiltersComponent, QuickFiltersListComponent, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SEARCH_BOX_CATEGORIES_SORT, SEARCH_BOX_CATEGORY_ICONS, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchBoxComponent, SearchBoxPopupDirective, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAlertsPanelComponent, 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, groupSearchesByDate, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, pageNumberFromAnchor, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, provideStartupAggregation, quantileScale, queryNameResolver, rebuildWithout, searchItemKey, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFavoriteSearchesFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withQuickFiltersFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map