@sinequa/atomic-angular 2.10.0 → 2.12.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { 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, 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, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, ClockIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, 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, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, 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, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, 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, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, ClockIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, 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, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, 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, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, 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";
@@ -5521,6 +5521,39 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ name: "fileSize" }]
 	}]
 });
+var LocalizedNumberPipe = class LocalizedNumberPipe {
+	transloco = inject(TranslocoService);
+	lang = toSignal(this.transloco.langChanges$, { initialValue: this.transloco.getActiveLang() });
+	transform(value) {
+		return new Intl.NumberFormat(this.lang()).format(value ?? 0);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LocalizedNumberPipe,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Pipe
+	});
+	static ɵpipe = i0.ɵɵngDeclarePipe({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: LocalizedNumberPipe,
+		isStandalone: true,
+		name: "localizedNumber"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: LocalizedNumberPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "localizedNumber" }]
+	}]
+});
 var MetadataComponent = class MetadataComponent {
 	click = output();
 	class = input(...ngDevMode ? [void 0, { debugName: "class" }] : /* istanbul ignore next */ []);
@@ -8218,6 +8251,8 @@ var NavbarTabsComponent = class NavbarTabsComponent {
 	appStore = inject(AppStore);
 	class = input(...ngDevMode ? [void 0, { debugName: "class" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	isPill = computed(() => this.variant() === "primary", ...ngDevMode ? [{ debugName: "isPill" }] : /* istanbul ignore next */ []);
 	showCount = input(true, {
 		...ngDevMode ? { debugName: "showCount" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -8325,6 +8360,13 @@ var NavbarTabsComponent = class NavbarTabsComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showCount: {
 				classPropertyName: "showCount",
 				publicName: "showCount",
@@ -8382,10 +8424,11 @@ var NavbarTabsComponent = class NavbarTabsComponent {
                WHICH list it landed in — and a page may hold more than one. The default is translated
                so every consumer gets a named tab list without passing anything.
                (No backticks in this comment: the template is a template literal.) -->
-          <TabList class="w-full" [attr.aria-label]="ariaLabel() ?? ('navbarTabs.tabs' | transloco)" [(selectedTab)]="selectedTab" (selectedTabChange)="onSelectTab($event)" selectionMode="explicit" [softDisabled]="false">
+          <TabList class="w-full" [variant]="variant()" [attr.aria-label]="ariaLabel() ?? ('navbarTabs.tabs' | transloco)" [(selectedTab)]="selectedTab" (selectedTabChange)="onSelectTab($event)" selectionMode="explicit" [softDisabled]="false">
           @for (tab of nav.tabs(); track $index) {
             <Tab
-              [class]="cn('group', !noTruncate() && 'basis-50')"
+              [variant]="variant()"
+              [class]="cn('group', !noTruncate() && 'basis-50', !isPill() && 'h-11 px-(--spacing-xs) text-(length:--size-base) font-semibold')"
               [value]="tab.path"
               overflowItem
               [noTruncate]="noTruncate()"
@@ -8416,315 +8459,11 @@ var NavbarTabsComponent = class NavbarTabsComponent {
               </div>
             </Tab>
           }
-          <!-- The overflow trigger belongs INSIDE the tab list, and it is a tab: a tablist may only
-               contain tab elements, so a plain button here would break the announced tab count and
-               the arrow-key navigation. ngTab gives it the role and enrols it in the roving tabindex
-               — so the list keeps ONE tab stop and the arrows reach it like any other tab.
-
-               It stays a real <button> because that is what menuTrigger needs: it wires the menu
-               through the native popovertarget attribute, which only works on a button.
-
-               ms-auto pins it to the right end of the flex tab list. overflowStop is found by content
-               query, so the measurement is unaffected by where it sits. Always mounted so the stop
-               position is stable; hidden when every tab fits.
-               (No backticks in this comment: the template is a template literal.) -->
-          <button
-            ngTab
-            [value]="MORE_TABS_VALUE"
-            [menuTrigger]="moreTabsMenu"
-            variant="tertiary" [iconOnly]="true"
-            [attr.aria-label]="'navbarTabs.moreTabs' | transloco" [tooltip]="'navbarTabs.moreTabs' | transloco" overflowStop
-            [disabled]="moreTabs().length === 0"
-            class="ms-auto shrink-0"
-            [class.invisible]="moreTabs().length === 0">
-            <EllipsisIcon orientation="vertical"></EllipsisIcon>
-            <span class="sr-only">{{ "navbarTabs.moreTabs" | transloco }}</span>
-          </button>
-          </TabList>
-        </Tabs>
+          <!-- Pill strip: ms-auto pins the trigger to the right end of the strip. Underline variants: no pin, the trigger
+               follows the last visible tab, which is where the eye expects the rest of the list to be. The overflow
+               manager reads only its size, never its position, so both placements measure the same.
 
-        <Menu #moreTabsMenu="menu" placement="bottom-end">
-          <MenuContent class="z-500 w-fit">
-            @for (tab of moreTabs(); track $index) {
-              <MenuItem [value]="tab" [disabled]="isTabDisabled(tab)">
-                <a class="inline-flex items-center gap-1 whitespace-nowrap first-letter:capitalize"
-                  [routerLink]="isTabDisabled(tab) ? null : [tab.routerLink]"
-                  [queryParams]="getQueryParams(tab)"
-                  [queryParamsHandling]="getQueryParamsHandling()"
-                  [attr.aria-selected]="nav.currentPath() === tab.path"
-                  [attr.aria-label]="tab.display | syslang | transloco"
-                  [attr.aria-disabled]="isTabDisabled(tab) ? true : null"
-                  [attr.tabindex]="isTabDisabled(tab) ? -1 : null"
-                  (click)="onOverflowItemClick($event, tab)"
-                  >
-                  @if (tab.icon) {
-                    <FaIcon [faClass]="tab.icon"/>
-                  }
-                  {{ tab.display | syslang | transloco }}
-                </a>
-              </MenuItem>
-            }
-          </MenuContent>
-        </Menu>
-      </div>
-    }
-  `,
-		isInline: true,
-		dependencies: [
-			{
-				kind: "directive",
-				type: RouterLink,
-				selector: "[routerLink]",
-				inputs: [
-					"target",
-					"queryParams",
-					"fragment",
-					"queryParamsHandling",
-					"state",
-					"info",
-					"relativeTo",
-					"preserveFragment",
-					"skipLocationChange",
-					"replaceUrl",
-					"browserUrl",
-					"routerLink"
-				]
-			},
-			{
-				kind: "directive",
-				type: ButtonComponent,
-				selector: "button",
-				inputs: [
-					"class",
-					"variant",
-					"scheme",
-					"iconOnly",
-					"size"
-				]
-			},
-			{
-				kind: "directive",
-				type: TabsComponent,
-				selector: "Tabs",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: TabListComponent,
-				selector: "TabList",
-				inputs: ["class", "variant"]
-			},
-			{
-				kind: "directive",
-				type: TabComponent,
-				selector: "Tab",
-				inputs: [
-					"class",
-					"variant",
-					"size",
-					"noTruncate"
-				]
-			},
-			{
-				kind: "directive",
-				type: Tab,
-				selector: "[ngTab]",
-				inputs: [
-					"id",
-					"disabled",
-					"value"
-				],
-				exportAs: ["ngTab"]
-			},
-			{
-				kind: "directive",
-				type: OverflowManagerDirective,
-				selector: "[overflowManager]",
-				inputs: [
-					"target",
-					"margin",
-					"direction",
-					"reserveStop"
-				],
-				outputs: ["count"]
-			},
-			{
-				kind: "directive",
-				type: OverflowItemDirective,
-				selector: "[overflowItem]"
-			},
-			{
-				kind: "directive",
-				type: OverflowStopDirective,
-				selector: "[overflowStop]"
-			},
-			{
-				kind: "directive",
-				type: BadgeComponent,
-				selector: "badge, Badge",
-				inputs: [
-					"class",
-					"variant",
-					"fill",
-					"scheme",
-					"size",
-					"aria-label"
-				]
-			},
-			{
-				kind: "component",
-				type: EllipsisIcon,
-				selector: "ellipsis-icon, EllipsisIcon, ellipsisicon",
-				inputs: ["class", "orientation"]
-			},
-			{
-				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: FaIconComponent,
-				selector: "fa-icon, FaIcon",
-				inputs: ["faClass", "class"]
-			},
-			{
-				kind: "directive",
-				type: MenuTriggerDirective,
-				selector: "[menuTrigger]",
-				inputs: ["menuTrigger"],
-				exportAs: ["menuTrigger"]
-			},
-			{
-				kind: "directive",
-				type: MenuComponent,
-				selector: "Menu,menu",
-				inputs: ["class"],
-				exportAs: ["menu"]
-			},
-			{
-				kind: "component",
-				type: MenuContentComponent,
-				selector: "menu-content,MenuContent,menucontent",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: MenuItemComponent,
-				selector: "menu-item,MenuItem,menuitem",
-				inputs: ["class", "checked"],
-				exportAs: ["menuitem"]
-			},
-			{
-				kind: "pipe",
-				type: TranslocoPipe,
-				name: "transloco"
-			},
-			{
-				kind: "pipe",
-				type: SyslangPipe,
-				name: "syslang"
-			}
-		]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.1",
-	ngImport: i0,
-	type: NavbarTabsComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "navbar-tabs",
-			imports: [
-				RouterLink,
-				TranslocoPipe,
-				SyslangPipe,
-				ButtonComponent,
-				TabsComponent,
-				TabListComponent,
-				TabComponent,
-				Tab,
-				OverflowManagerDirective,
-				OverflowItemDirective,
-				OverflowStopDirective,
-				BadgeComponent,
-				EllipsisIcon,
-				TooltipDirective,
-				FaIconComponent,
-				MenuTriggerDirective,
-				MenuComponent,
-				MenuContentComponent,
-				MenuItemComponent
-			],
-			providers: [provideTranslocoScope("navbar-tabs")],
-			template: `
-    <!-- do not display the tabs if there are no tabs -->
-    @if (nav.tabs().length > 0) {
-      <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
-        <Tabs class="flex-1 min-w-0 overflow-hidden">
-          <!-- The tab list needs a name of its own: the tablist role announces itself and its item
-               count, but without an accessible name a screen reader has nothing to tell the user
-               WHICH list it landed in — and a page may hold more than one. The default is translated
-               so every consumer gets a named tab list without passing anything.
-               (No backticks in this comment: the template is a template literal.) -->
-          <TabList class="w-full" [attr.aria-label]="ariaLabel() ?? ('navbarTabs.tabs' | transloco)" [(selectedTab)]="selectedTab" (selectedTabChange)="onSelectTab($event)" selectionMode="explicit" [softDisabled]="false">
-          @for (tab of nav.tabs(); track $index) {
-            <Tab
-              [class]="cn('group', !noTruncate() && 'basis-50')"
-              [value]="tab.path"
-              overflowItem
-              [noTruncate]="noTruncate()"
-              [style.--tab-min-width]="tabMinWidth(!!tab.icon)"
-              [disabled]="isTabDisabled(tab) || !isTabVisible($index)"
-              >
-              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && '@container overflow-hidden min-w-0')">
-              @if (tab.icon) {
-                <!-- the icon never shrinks: the label truncates first -->
-                <FaIcon [faClass]="tab.icon" class="shrink-0" aria-hidden="true" />
-              }
-              <!-- when the tab gets too narrow to show anything meaningful next to
-                   the icon, hide the label entirely instead of a clipped sliver.
-                   w-0 + invisible (not display: none) keeps the label's line box,
-                   so the tab height doesn't collapse to the icon's height -->
-              <span [class]="cn(!noTruncate() && 'truncate', !noTruncate() && tab.icon && '@max-[3rem]:w-0 @max-[3rem]:invisible')">{{ tab.display | syslang | transloco }}</span>
-              <!-- Show count badge only if count is > 0 -->
-              @if((tab.count ?? 0) > 0) {
-                <Badge
-                  variant="number"
-                  fill="secondary"
-                  scheme="sage"
-                  size="xs"
-                  [aria-label]="tab.count + ' ' + (tab.count === 1 ? ('navbarTabs.result' | transloco) : ('navbarTabs.results' | transloco))">
-                  {{ tab.count }}
-                </Badge>
-              }
-              </div>
-            </Tab>
-          }
-          <!-- The overflow trigger belongs INSIDE the tab list, and it is a tab: a tablist may only
+               The overflow trigger belongs INSIDE the tab list, and it is a tab: a tablist may only
                contain tab elements, so a plain button here would break the announced tab count and
                the arrow-key navigation. ngTab gives it the role and enrols it in the roving tabindex
                — so the list keeps ONE tab stop and the arrows reach it like any other tab.
@@ -8743,9 +8482,322 @@ i0.ɵɵngDeclareClassMetadata({
             variant="tertiary" [iconOnly]="true"
             [attr.aria-label]="'navbarTabs.moreTabs' | transloco" [tooltip]="'navbarTabs.moreTabs' | transloco" overflowStop
             [disabled]="moreTabs().length === 0"
-            class="ms-auto shrink-0"
+            [class]="cn('shrink-0', isPill() ? 'ms-auto' : 'self-center')"
             [class.invisible]="moreTabs().length === 0">
-            <EllipsisIcon orientation="vertical"></EllipsisIcon>
+            <EllipsisIcon [orientation]="isPill() ? 'vertical' : 'horizontal'"></EllipsisIcon>
+            <span class="sr-only">{{ "navbarTabs.moreTabs" | transloco }}</span>
+          </button>
+          </TabList>
+        </Tabs>
+
+        <Menu #moreTabsMenu="menu" placement="bottom-end">
+          <MenuContent class="z-500 w-fit">
+            @for (tab of moreTabs(); track $index) {
+              <MenuItem [value]="tab" [disabled]="isTabDisabled(tab)">
+                <a class="inline-flex items-center gap-1 whitespace-nowrap first-letter:capitalize"
+                  [routerLink]="isTabDisabled(tab) ? null : [tab.routerLink]"
+                  [queryParams]="getQueryParams(tab)"
+                  [queryParamsHandling]="getQueryParamsHandling()"
+                  [attr.aria-selected]="nav.currentPath() === tab.path"
+                  [attr.aria-label]="tab.display | syslang | transloco"
+                  [attr.aria-disabled]="isTabDisabled(tab) ? true : null"
+                  [attr.tabindex]="isTabDisabled(tab) ? -1 : null"
+                  (click)="onOverflowItemClick($event, tab)"
+                  >
+                  @if (tab.icon) {
+                    <FaIcon [faClass]="tab.icon"/>
+                  }
+                  {{ tab.display | syslang | transloco }}
+                </a>
+              </MenuItem>
+            }
+          </MenuContent>
+        </Menu>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "directive",
+				type: TabsComponent,
+				selector: "Tabs",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: TabListComponent,
+				selector: "TabList",
+				inputs: ["class", "variant"]
+			},
+			{
+				kind: "directive",
+				type: TabComponent,
+				selector: "Tab",
+				inputs: [
+					"class",
+					"variant",
+					"size",
+					"noTruncate"
+				]
+			},
+			{
+				kind: "directive",
+				type: Tab,
+				selector: "[ngTab]",
+				inputs: [
+					"id",
+					"disabled",
+					"value"
+				],
+				exportAs: ["ngTab"]
+			},
+			{
+				kind: "directive",
+				type: OverflowManagerDirective,
+				selector: "[overflowManager]",
+				inputs: [
+					"target",
+					"margin",
+					"direction",
+					"reserveStop"
+				],
+				outputs: ["count"]
+			},
+			{
+				kind: "directive",
+				type: OverflowItemDirective,
+				selector: "[overflowItem]"
+			},
+			{
+				kind: "directive",
+				type: OverflowStopDirective,
+				selector: "[overflowStop]"
+			},
+			{
+				kind: "directive",
+				type: BadgeComponent,
+				selector: "badge, Badge",
+				inputs: [
+					"class",
+					"variant",
+					"fill",
+					"scheme",
+					"size",
+					"aria-label"
+				]
+			},
+			{
+				kind: "component",
+				type: EllipsisIcon,
+				selector: "ellipsis-icon, EllipsisIcon, ellipsisicon",
+				inputs: ["class", "orientation"]
+			},
+			{
+				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: FaIconComponent,
+				selector: "fa-icon, FaIcon",
+				inputs: ["faClass", "class"]
+			},
+			{
+				kind: "directive",
+				type: MenuTriggerDirective,
+				selector: "[menuTrigger]",
+				inputs: ["menuTrigger"],
+				exportAs: ["menuTrigger"]
+			},
+			{
+				kind: "directive",
+				type: MenuComponent,
+				selector: "Menu,menu",
+				inputs: ["class"],
+				exportAs: ["menu"]
+			},
+			{
+				kind: "component",
+				type: MenuContentComponent,
+				selector: "menu-content,MenuContent,menucontent",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: MenuItemComponent,
+				selector: "menu-item,MenuItem,menuitem",
+				inputs: ["class", "checked"],
+				exportAs: ["menuitem"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			},
+			{
+				kind: "pipe",
+				type: SyslangPipe,
+				name: "syslang"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: NavbarTabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "navbar-tabs",
+			imports: [
+				RouterLink,
+				TranslocoPipe,
+				SyslangPipe,
+				ButtonComponent,
+				TabsComponent,
+				TabListComponent,
+				TabComponent,
+				Tab,
+				OverflowManagerDirective,
+				OverflowItemDirective,
+				OverflowStopDirective,
+				BadgeComponent,
+				EllipsisIcon,
+				TooltipDirective,
+				FaIconComponent,
+				MenuTriggerDirective,
+				MenuComponent,
+				MenuContentComponent,
+				MenuItemComponent
+			],
+			providers: [provideTranslocoScope("navbar-tabs")],
+			template: `
+    <!-- do not display the tabs if there are no tabs -->
+    @if (nav.tabs().length > 0) {
+      <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
+        <Tabs class="flex-1 min-w-0 overflow-hidden">
+          <!-- The tab list needs a name of its own: the tablist role announces itself and its item
+               count, but without an accessible name a screen reader has nothing to tell the user
+               WHICH list it landed in — and a page may hold more than one. The default is translated
+               so every consumer gets a named tab list without passing anything.
+               (No backticks in this comment: the template is a template literal.) -->
+          <TabList class="w-full" [variant]="variant()" [attr.aria-label]="ariaLabel() ?? ('navbarTabs.tabs' | transloco)" [(selectedTab)]="selectedTab" (selectedTabChange)="onSelectTab($event)" selectionMode="explicit" [softDisabled]="false">
+          @for (tab of nav.tabs(); track $index) {
+            <Tab
+              [variant]="variant()"
+              [class]="cn('group', !noTruncate() && 'basis-50', !isPill() && 'h-11 px-(--spacing-xs) text-(length:--size-base) font-semibold')"
+              [value]="tab.path"
+              overflowItem
+              [noTruncate]="noTruncate()"
+              [style.--tab-min-width]="tabMinWidth(!!tab.icon)"
+              [disabled]="isTabDisabled(tab) || !isTabVisible($index)"
+              >
+              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && '@container overflow-hidden min-w-0')">
+              @if (tab.icon) {
+                <!-- the icon never shrinks: the label truncates first -->
+                <FaIcon [faClass]="tab.icon" class="shrink-0" aria-hidden="true" />
+              }
+              <!-- when the tab gets too narrow to show anything meaningful next to
+                   the icon, hide the label entirely instead of a clipped sliver.
+                   w-0 + invisible (not display: none) keeps the label's line box,
+                   so the tab height doesn't collapse to the icon's height -->
+              <span [class]="cn(!noTruncate() && 'truncate', !noTruncate() && tab.icon && '@max-[3rem]:w-0 @max-[3rem]:invisible')">{{ tab.display | syslang | transloco }}</span>
+              <!-- Show count badge only if count is > 0 -->
+              @if((tab.count ?? 0) > 0) {
+                <Badge
+                  variant="number"
+                  fill="secondary"
+                  scheme="sage"
+                  size="xs"
+                  [aria-label]="tab.count + ' ' + (tab.count === 1 ? ('navbarTabs.result' | transloco) : ('navbarTabs.results' | transloco))">
+                  {{ tab.count }}
+                </Badge>
+              }
+              </div>
+            </Tab>
+          }
+          <!-- Pill strip: ms-auto pins the trigger to the right end of the strip. Underline variants: no pin, the trigger
+               follows the last visible tab, which is where the eye expects the rest of the list to be. The overflow
+               manager reads only its size, never its position, so both placements measure the same.
+
+               The overflow trigger belongs INSIDE the tab list, and it is a tab: a tablist may only
+               contain tab elements, so a plain button here would break the announced tab count and
+               the arrow-key navigation. ngTab gives it the role and enrols it in the roving tabindex
+               — so the list keeps ONE tab stop and the arrows reach it like any other tab.
+
+               It stays a real <button> because that is what menuTrigger needs: it wires the menu
+               through the native popovertarget attribute, which only works on a button.
+
+               ms-auto pins it to the right end of the flex tab list. overflowStop is found by content
+               query, so the measurement is unaffected by where it sits. Always mounted so the stop
+               position is stable; hidden when every tab fits.
+               (No backticks in this comment: the template is a template literal.) -->
+          <button
+            ngTab
+            [value]="MORE_TABS_VALUE"
+            [menuTrigger]="moreTabsMenu"
+            variant="tertiary" [iconOnly]="true"
+            [attr.aria-label]="'navbarTabs.moreTabs' | transloco" [tooltip]="'navbarTabs.moreTabs' | transloco" overflowStop
+            [disabled]="moreTabs().length === 0"
+            [class]="cn('shrink-0', isPill() ? 'ms-auto' : 'self-center')"
+            [class.invisible]="moreTabs().length === 0">
+            <EllipsisIcon [orientation]="isPill() ? 'vertical' : 'horizontal'"></EllipsisIcon>
             <span class="sr-only">{{ "navbarTabs.moreTabs" | transloco }}</span>
           </button>
           </TabList>
@@ -8802,6 +8854,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
 		showCount: [{
 			type: i0.Input,
 			args: [{
@@ -23041,6 +23101,8 @@ var SearchFeedbackComponent = class SearchFeedbackComponent {
 	injector = inject(Injector);
 	pages = input.required(...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
 	variant = input("secondary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	dismissible = input(true, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 	auditService = inject(AuditService);
 	queryParamsStore = inject(QueryParamsStore);
 	transloco = inject(TranslocoService);
@@ -23160,12 +23222,26 @@ var SearchFeedbackComponent = class SearchFeedbackComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { onClose: "onClose" },
 		providers: [provideTranslocoScope("feedback")],
 		ngImport: i0,
-		template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n",
+		template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [size]=\"size()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    @if (dismissible()) {\n      <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n    }\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -23272,7 +23348,7 @@ i0.ɵɵngDeclareClassMetadata({
 				A11yModule
 			],
 			providers: [provideTranslocoScope("feedback")],
-			template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n"
+			template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [size]=\"size()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    @if (dismissible()) {\n      <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n    }\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n"
 		}]
 	}],
 	propDecorators: {
@@ -23295,6 +23371,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "variant",
 				required: false
 			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
 		}]
 	}
 });
@@ -24533,8 +24625,8 @@ 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=\"sm\"\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=\"sm\"\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 pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</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 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\">\n    <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"sm\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
-		styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\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=\"sm\"\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=\"sm\"\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 pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</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 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"sm\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <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: [
 			{
 				kind: "directive",
@@ -24665,8 +24757,8 @@ 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=\"sm\"\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=\"sm\"\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 pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</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 details-content:flex details-content:min-h-0 details-content:flex-1 details-content:flex-col\">\n    <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"sm\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
-			styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\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=\"sm\"\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=\"sm\"\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 pt-2\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-2 text-sm text-(--font-neutral-base) select-none',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <div class=\"flex flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 max-w-[18ch] min-w-[18ch] has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</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 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"sm\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -24869,12 +24961,30 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 	isCollapsed = linkedSignal(() => this.collapsed(), ...ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []);
 	expanded = computed(() => this.isCollapsed() ? null : "", ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
 	searchBox = viewChild(SearchInputComponent, ...ngDevMode ? [{ debugName: "searchBox" }] : /* istanbul ignore next */ []);
+	searchToggle = viewChild("searchToggle", ...ngDevMode ? [{ debugName: "searchToggle" }] : /* istanbul ignore next */ []);
+	injector = inject(Injector);
 	isInPopover = !!inject(PopoverDirective, { optional: true });
-	constructor() {
-		effect(() => {
-			const searchBox = this.searchBox();
-			if (this.isInPopover && searchBox && this.expanded() !== null) setTimeout(() => searchBox.searchInput().nativeElement.focus(), 0);
-		});
+	static nextId = 0;
+	searchId = `aggregation-search-${AggregationPanelComponent.nextId++}`;
+	searchRequested = signal(false, ...ngDevMode ? [{ debugName: "searchRequested" }] : /* istanbul ignore next */ []);
+	canSearch = computed(() => !!this.aggregation()?.searchable && this.itemsLength() > 0, ...ngDevMode ? [{ debugName: "canSearch" }] : /* istanbul ignore next */ []);
+	showSearch = computed(() => this.canSearch() && (this.searchRequested() || this.searchText() !== ""), ...ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []);
+	toggleSearch(event) {
+		event?.stopPropagation();
+		event?.preventDefault();
+		if (this.showSearch()) {
+			this.searchText.set("");
+			this.searchRequested.set(false);
+			afterNextRender(() => this.searchToggle()?.nativeElement.focus(), { injector: this.injector });
+			return;
+		}
+		this.searchRequested.set(true);
+		afterNextRender(() => this.searchBox()?.searchInput().nativeElement.focus(), { injector: this.injector });
+	}
+	onSearchEscape(event) {
+		if (!this.showSearch()) return;
+		event.stopPropagation();
+		this.toggleSearch();
 	}
 	onHeaderClick(event) {
 		if (!this.isDate() && this.isEmpty()) {
@@ -25039,9 +25149,16 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 			predicate: SearchInputComponent,
 			descendants: true,
 			isSignal: true
+		}, {
+			propertyName: "searchToggle",
+			first: true,
+			predicate: ["searchToggle"],
+			descendants: true,
+			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 #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 (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it.\n           Headless has no <summary>, so nothing to keep apart from: the popover's own space (its resize handle, or the header of\n           the \"more filters\" facet) is enough. SearchInput also hands its class to its inner field, so the margin counts twice. -->\n      <SearchInput\n        [class]=\"headless() ? 'mb-1 shrink-0' : 'mt-2 mb-1 shrink-0'\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: select all (the count of selected items in its tooltip), then clear and apply. Clear is a button\n           with a text, not an icon, and stays in place (disabled) when there is nothing to clear. Apply only shows once\n           something is pending, as it always did, and sits at the same level. The checkbox keeps its own name: the text\n           beside it is a count, not the label of what it does. -->\n      <div class=\"mb-1 flex shrink-0 items-center gap-1 pl-1.5\">\n        <!-- How many are selected is in the tooltip of the checkbox, not written beside it: that room is what clear and apply need.\n             Screen readers keep it as text (the tooltip only shows on hover and focus, and describes). -->\n        <span\n          class=\"inline-flex shrink-0\"\n          [tooltip]=\"\n            'filters.selectedCount' | transloco: { count: selectedCount() }\n          \"\n          tooltipPosition=\"bottom\">\n          <checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n            [aria-label]=\"'filters.selectAllFilters' | transloco\"\n            (checkedChange)=\"\n              $event ? allSelected.emit() : allUnselected.emit()\n            \" />\n        </span>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n        <span class=\"flex-1\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\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=\"sm\"\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    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@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-1 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=\"sm\"\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=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (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        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\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=\"sm\"\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=\"sm\"\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 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 py-1 [&_.checkbox-label]:truncate [&_.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      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@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: [
 			{
 				kind: "directive",
@@ -25084,6 +25201,12 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: SearchIcon,
+				selector: "search, search-icon, Search, SearchIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: SearchInputComponent,
@@ -25164,6 +25287,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				BadgeComponent,
 				ChevronRightIcon,
+				SearchIcon,
 				SearchInputComponent,
 				FaIconComponent,
 				CheckboxComponent,
@@ -25171,10 +25295,10 @@ 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 #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 (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (aggregation()?.searchable && itemsLength() > 0) {\n      <!-- No `hotkey`: this field is one of many facet search boxes on the page, so it must not\n           advertise a global shortcut. It used to pass `''` to neutralize SearchInput's old\n           `\"shift+/\"` default, which left an empty `aria-keyshortcuts` attribute behind; the default\n           is gone, so omitting the input is enough. -->\n      <!-- A placeholder is not a label (RGAA 11.1): it goes away on the first keystroke, and it is\n           the same word in every facet panel of the page. The name says WHICH facet this box\n           filters — the one thing that tells a dozen identical fields apart. -->\n      <!-- mt-2: without it, the search box sits flush under <summary>, and the header's focus ring reads as touching it.\n           Headless has no <summary>, so nothing to keep apart from: the popover's own space (its resize handle, or the header of\n           the \"more filters\" facet) is enough. SearchInput also hands its class to its inner field, so the margin counts twice. -->\n      <SearchInput\n        [class]=\"headless() ? 'mb-1 shrink-0' : 'mt-2 mb-1 shrink-0'\"\n        [placeholder]=\"'search' | transloco\"\n        [clearLabel]=\"'filters.clearSearch' | transloco\"\n        [aria-label]=\"\n          'filters.searchInFacet'\n            | transloco\n              : { facet: (aggregation()?.display | syslang | transloco) }\n        \"\n        [(value)]=\"searchText\">\n        <ng-content select=\"[search-addon]\" />\n      </SearchInput>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: select all (the count of selected items in its tooltip), then clear and apply. Clear is a button\n           with a text, not an icon, and stays in place (disabled) when there is nothing to clear. Apply only shows once\n           something is pending, as it always did, and sits at the same level. The checkbox keeps its own name: the text\n           beside it is a count, not the label of what it does. -->\n      <div class=\"mb-1 flex shrink-0 items-center gap-1 pl-1.5\">\n        <!-- How many are selected is in the tooltip of the checkbox, not written beside it: that room is what clear and apply need.\n             Screen readers keep it as text (the tooltip only shows on hover and focus, and describes). -->\n        <span\n          class=\"inline-flex shrink-0\"\n          [tooltip]=\"\n            'filters.selectedCount' | transloco: { count: selectedCount() }\n          \"\n          tooltipPosition=\"bottom\">\n          <checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n            [aria-label]=\"'filters.selectAllFilters' | transloco\"\n            (checkedChange)=\"\n              $event ? allSelected.emit() : allUnselected.emit()\n            \" />\n        </span>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n        <span class=\"flex-1\" aria-hidden=\"true\"></span>\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\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=\"sm\"\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    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@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-1 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=\"sm\"\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=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (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        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\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=\"sm\"\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=\"sm\"\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 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 py-1 [&_.checkbox-label]:truncate [&_.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      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@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"]
 		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
 		id: [{
 			type: i0.Input,
@@ -25338,6 +25462,10 @@ i0.ɵɵngDeclareClassMetadata({
 		searchBox: [{
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => SearchInputComponent), { isSignal: true }]
+		}],
+		searchToggle: [{
+			type: i0.ViewChild,
+			args: ["searchToggle", { isSignal: true }]
 		}]
 	}
 });
@@ -26038,7 +26166,7 @@ var AggregationTreeComponent = class AggregationTreeComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selected().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne. `ps-0.5`: the checkbox of a list option sits\n           2px further in than a tree's (the option has its own padding), so the checkboxes of the two facets, and the select-all of\n           the bar of a popover, are on the same vertical line. -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 ps-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n",
+		template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selected().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne. `ps-0.5`: the checkbox of a list option sits\n           2px further in than a tree's (the option has its own padding), so the checkboxes of the two facets, and the select-all of\n           the bar of a popover, are on the same vertical line. -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 ps-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <!-- Cut off, the label shows whole in a tooltip; a label that fits needs none. -->\n          <span\n            class=\"grow truncate select-none\"\n            truncated\n            #cutCustom=\"truncated\"\n            [tooltip]=\"label\"\n            [tooltipDisabled]=\"!cutCustom.isTruncated()\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <!-- Cut off, the label shows whole in a tooltip (`truncated` measures it); a label that fits has none. -->\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            truncated\n            #cut=\"truncated\"\n            [tooltip]=\"label\"\n            [tooltipDisabled]=\"!cut.isTruncated()\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -26088,12 +26216,45 @@ var AggregationTreeComponent = class AggregationTreeComponent {
 				selector: "folder, folder-icon, Folder, FolderIcon",
 				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: TriangleAlertIcon,
 				selector: "triangle-alert, triangle-alert-icon, TriangleAlert, TriangleAlertIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "directive",
 				type: Tree,
@@ -26205,7 +26366,9 @@ i0.ɵɵngDeclareClassMetadata({
 				FaIconComponent,
 				FileIcon,
 				FolderIcon,
+				TooltipDirective,
 				TriangleAlertIcon,
+				TruncatedDirective,
 				HighlightWordPipe,
 				SyslangPipe,
 				TranslocoPipe,
@@ -26215,7 +26378,7 @@ i0.ɵɵngDeclareClassMetadata({
 				AggregationPanelComponent
 			],
 			host: { "[class]": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" },
-			template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selected().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne. `ps-0.5`: the checkbox of a list option sits\n           2px further in than a tree's (the option has its own padding), so the checkboxes of the two facets, and the select-all of\n           the bar of a popover, are on the same vertical line. -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 ps-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <span\n            class=\"grow truncate select-none\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            [title]=\"\n              appliesOnLabelClick\n                ? ((isTreeItemFiltered(node)\n                    ? 'filters.removeFilter'\n                    : 'filters.addFilter'\n                  ) | transloco) +\n                  ': ' +\n                  label\n                : label\n            \"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n"
+			template: "@if (!aggregation()?.isTree) {\n  <div role=\"alert\" class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selected().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto pb-3\">\n    <ul\n      ngTree\n      #tree=\"ngTree\"\n      [multi]=\"true\"\n      [(value)]=\"selected\"\n      (valueChange)=\"onSelectionChange($event)\"\n      /* Translated like the flat list's own label (aggregation-list.html): this was the raw\n         `display`, so the accessible name of a whole facet came out in the source language.\n         The pipes apply to the whole nullish chain, `|` being the loosest operator Angular\n         parses — no parentheses needed. */\n      [attr.aria-label]=\"aggregation()?.display ?? name() | syslang | transloco\"\n      class=\"basic-tree m-1\">\n      <ng-template\n        [ngTemplateOutlet]=\"treeNodes\"\n        [ngTemplateOutletContext]=\"{ nodes: nodes(), parent: tree }\" />\n    </ul>\n  </div>\n</aggregation-panel>\n\n<ng-template #treeNodes let-nodes=\"nodes\" let-parent=\"parent\">\n  @for (node of nodes; track node.$path) {\n    @let label = node.display ?? node.value ?? \"\";\n    <li\n      ngTreeItem\n      #treeItem=\"ngTreeItem\"\n      [parent]=\"parent\"\n      [value]=\"node.$path\"\n      [label]=\"label\"\n      [disabled]=\"node.disabled\"\n      [(expanded)]=\"node.$opened\"\n      (expandedChange)=\"onExpandedChange(node, $event)\"\n      [attr.aria-label]=\"label\"\n      [attr.aria-describedby]=\"\n        nodeDescription(node) ? descriptionId(node.$path) : null\n      \"\n      [class]=\"cn('m-0 block w-full p-0', itemStateClass)\"\n      (keydown.enter)=\"onTreeItemEnterKey(node, $event)\"\n      (keydown.space)=\"onTreeItemSpaceKey(node, $event)\">\n      <!-- 2. Ce div prend tout l'espace et intercepte tous les clics de la ligne. `ps-0.5`: the checkbox of a list option sits\n           2px further in than a tree's (the option has its own padding), so the checkboxes of the two facets, and the select-all of\n           the bar of a popover, are on the same vertical line. -->\n      <div\n        class=\"flex w-full cursor-pointer items-center gap-2 py-0.5 ps-0.5 text-sm leading-6\"\n        (click)=\"onTreeItemRowClick(node, $event)\"\n        (mousedown)=\"$event.stopPropagation()\"\n        (pointerdown)=\"$event.stopPropagation()\">\n        @if (showCheckbox()) {\n          <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n               a role=\"treeitem\" admits no focusable descendant, and the click must reach\n               the row handler above. Selection is announced by the <li>'s aria-selected. -->\n          <!-- --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n               (here empty) text block. Set as a custom property rather than a utility\n               class: the CVA already sets gap-(--spacing-xs), and two same-specificity\n               classes would be resolved by stylesheet order, not by us. -->\n          <span\n            inert\n            aria-hidden=\"true\"\n            class=\"inline-flex shrink-0\"\n            style=\"--spacing-xs: 0\">\n            <checkbox\n              [checked]=\"treeItem.selected() || node.$selectedVisually || false\"\n              [disabled]=\"node.disabled\"\n              [class]=\"\n                cn(\n                  'pointer-events-none',\n                  (treeItem.selected() || node.$selectedVisually) &&\n                    'selected-icon'\n                )\n              \" />\n          </span>\n        }\n        <!-- Depth indent sits on the chevron, after the checkbox: the checkboxes of every\n             level stay flush left (aligned with a flat list's), and since this adds no extra\n             flex child, the step between consecutive levels is exactly one indent. -->\n        @let depthIndent =\n          \"calc(var(--agg-tree-indent, 0.5rem) * \" +\n          (treeItem.level() - 1) +\n          \")\";\n        @if (node.hasChildren) {\n          <!-- Expand/collapse affordance for the mouse only, hence a <span> and not a <button>:\n               the keyboard already expands with ArrowRight / ArrowLeft, handled by ngTreeItem, and\n               a role=\"treeitem\" admits no focusable descendant — so this was a <button> nobody\n               could reach, already carrying aria-hidden and tabindex=\"-1\" to say so. Every audit\n               reads it as a button with no accessible name (RGAA 7.1, 11.9). Same shape as the leaf\n               branch below. -->\n          <span\n            aria-hidden=\"true\"\n            (click)=\"toggleTreeNode(treeItem, $event)\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex cursor-pointer items-center justify-center\">\n            <ChevronRightIcon\n              [class]=\"\n                cn('expand-icon shrink-0', node.$opened && 'rotate-90')\n              \" />\n            <FolderIcon class=\"shrink-0\" />\n          </span>\n        } @else {\n          <span\n            aria-hidden=\"true\"\n            [style.marginInlineStart]=\"depthIndent\"\n            class=\"inline-flex items-center justify-center\">\n            <!-- Reserves the chevron's own width (`.expand-icon` is a styling hook with\n                 no rule of its own), so a leaf lines up with its parent nodes. -->\n            <span class=\"expand-icon w-4 shrink-0\"></span>\n            <FileIcon class=\"size-4 shrink-0\" />\n          </span>\n        }\n        @if (resolvedItemTemplate(); as tpl) {\n          <!-- Cut off, the label shows whole in a tooltip; a label that fits needs none. -->\n          <span\n            class=\"grow truncate select-none\"\n            truncated\n            #cutCustom=\"truncated\"\n            [tooltip]=\"label\"\n            [tooltipDisabled]=\"!cutCustom.isTruncated()\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{\n                $implicit: node,\n                field: aggregation()?.column,\n                selected: treeItem.selected() ?? false,\n                count: node.count,\n                name: label,\n                searchText: searchText(),\n                level: node.$level ?? 0,\n                expanded: node.$opened ?? false,\n                hasChildren: node.hasChildren ?? false\n              }\" />\n          </span>\n        } @else {\n          <!-- ce span est essentiel pour le style -->\n          @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n          <!-- Cut off, the label shows whole in a tooltip (`truncated` measures it); a label that fits has none. -->\n          <span\n            [class]=\"\n              cn(\n                'grow truncate select-none',\n                appliesOnLabelClick && 'hover:underline'\n              )\n            \"\n            truncated\n            #cut=\"truncated\"\n            [tooltip]=\"label\"\n            [tooltipDisabled]=\"!cut.isTruncated()\"\n            (click)=\"onTreeItemTextClick(node, $event)\">\n            @for (\n              chunk of label | highlightWord: searchText() : 10;\n              track $index\n            ) {\n              <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n                chunk.text\n              }}</span>\n            }\n          </span>\n          @if (showCount() && node.count > 0) {\n            <span class=\"ml-auto px-1 text-xs\" aria-hidden=\"true\">{{\n              node.count\n            }}</span>\n          }\n        }\n        @let description = nodeDescription(node);\n        @if (description) {\n          <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n               span would also be counted in the treeitem's name (computed from its content). -->\n          <span hidden [id]=\"descriptionId(node.$path)\">{{ description }}</span>\n        }\n      </div>\n    </li>\n    @if (node.hasChildren) {\n      <!-- No indentation here: it would shift the checkbox too. Depth is applied\n           inside the row, after the checkbox, so every checkbox stays flush left. -->\n      <!-- The <ul> sits INSIDE the deferred content, not around it: `ngTreeItemGroup` only\n           instantiates its view when the node opens, so a <ul> declared outside stayed in the DOM,\n           empty, for every collapsed node — a structural tag with nothing to structure (RGAA 8.9).\n           The @if cannot move onto the <ul> either: the directive registers itself with its tree\n           item on init and has to exist for as long as the item does. -->\n      <ng-template\n        ngTreeItemGroup\n        [ownedBy]=\"treeItem\"\n        #group=\"ngTreeItemGroup\">\n        <ul role=\"group\">\n          <ng-template\n            [ngTemplateOutlet]=\"treeNodes\"\n            [ngTemplateOutletContext]=\"{ nodes: node.items, parent: group }\" />\n        </ul>\n      </ng-template>\n    }\n  }\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -26923,7 +27086,7 @@ var AggregationListComponent = class AggregationListComponent {
 			}
 		],
 		ngImport: i0,
-		template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selectedValues().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n",
+		template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selectedValues().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <!-- Cut off, the label shows whole in a tooltip (`truncated` measures it); a label that fits has none. -->\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        truncated\n        #cut=\"truncated\"\n        [tooltip]=\"listItemName(item) | syslang\"\n        [tooltipDisabled]=\"!cut.isTruncated()\"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -26974,12 +27137,45 @@ var AggregationListComponent = class AggregationListComponent {
 				selector: "fa-icon, FaIcon",
 				inputs: ["faClass", "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: TriangleAlertIcon,
 				selector: "triangle-alert, triangle-alert-icon, TriangleAlert, TriangleAlertIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "component",
 				type: AggregationPanelComponent,
@@ -27060,7 +27256,9 @@ i0.ɵɵngDeclareClassMetadata({
 				SyslangPipe,
 				TranslocoPipe,
 				FaIconComponent,
+				TooltipDirective,
 				TriangleAlertIcon,
+				TruncatedDirective,
 				HighlightWordPipe,
 				AggregationPanelComponent,
 				CheckboxComponent
@@ -27069,7 +27267,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class]": "cn(\"flex h-[inherit] max-h-[inherit] flex-col\", class(), (isMissing() || (hideWhenEmpty() && isEmpty())) && \"hidden\")",
 				"(keydown.enter)": "onHostEnterKey($event)"
 			},
-			template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selectedValues().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        [title]=\"\n          appliesOnLabelClick\n            ? ((isListItemFiltered(item, field)\n                ? 'filters.removeFilter'\n                : 'filters.addFilter'\n              ) | transloco) +\n              ': ' +\n              (listItemName(item) | syslang)\n            : (listItemName(item) | syslang)\n        \"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n"
+			template: "@if (aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1 shrink-0\" />\n    The aggregation component no longer supports tree aggregations. Please use\n    the &lt;AggregationTree /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [headless]=\"headless()\"\n  [selectedCount]=\"selectedValues().length\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"min-h-0 w-full flex-1 scrollbar-thin overflow-auto px-1 pt-1 pb-3\">\n    <div\n      ngListbox\n      multi\n      selectionMode=\"explicit\"\n      [value]=\"selectedValues()\"\n      (valueChange)=\"syncListboxValue($event)\"\n      [wrap]=\"false\"\n      [softDisabled]=\"false\"\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n        @let item = items()[vItem.index];\n        @let description = rowDescription(item);\n        <div\n          #row\n          ngOption\n          [attr.aria-describedby]=\"\n            description ? descriptionId(vItem.index) : null\n          \"\n          [attr.data-index]=\"vItem.index\"\n          [value]=\"item.value\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"cn('absolute w-full', menuItemBaseClass)\"\n          (keydown.enter)=\"onOptionEnterKey(item, $event)\"\n          (keydown.space)=\"\n            onListItemRowClick(item, $event); $event.preventDefault()\n          \"\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\n          role=\"option\">\n          <ng-container\n            [ngTemplateOutlet]=\"listItemTpl\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: item,\n              field: aggregation()?.column\n            }\">\n          </ng-container>\n          @if (description) {\n            <!-- `hidden`, not `sr-only`: read through aria-describedby only. A visually-hidden\n                 span would also be counted in the option's name (computed from its content). -->\n            <span hidden [id]=\"descriptionId(vItem.index)\">{{\n              description\n            }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template #listItemTpl let-item let-field=\"field\">\n  <a\n    [attr.aria-label]=\"listItemName(item) | syslang\"\n    [class]=\"\n      cn(\n        '-m-1.5 flex min-w-0 grow items-center gap-2 leading-6',\n        item.count === 0 && 'pointer-events-none text-(--font-neutral-muted)'\n      )\n    \"\n    (click)=\"onListItemRowClick(item, $event)\">\n    @if (showCheckbox()) {\n      <!-- `inert` keeps the native input out of the tab order and out of hit-testing:\n           keyboard navigation belongs to ngListbox/ngOption (roving tabindex), the\n           selection is already exposed by role=\"option\" + aria-selected, and the click\n           must reach the <a> above. Same treatment as the tree.\n           --spacing-xs: 0 kills the gap the checkbox keeps between its box and its\n           (here empty) text block. -->\n      <span\n        inert\n        aria-hidden=\"true\"\n        class=\"inline-flex shrink-0\"\n        style=\"--spacing-xs: 0\">\n        <checkbox\n          [checked]=\"item.$selected ?? false\"\n          [disabled]=\"item.count === 0\"\n          [class]=\"'pointer-events-none'\" />\n      </span>\n    }\n    @if (resolvedItemTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{\n          $implicit: item,\n          field: field,\n          selected: item.$selected ?? false,\n          count: item.count,\n          name: (listItemName(item) | syslang) ?? '',\n          searchText: searchText()\n        }\" />\n    } @else {\n      @let icon = $any(item).icon;\n      @if (icon) {\n        <FaIcon\n          [faClass]=\"icon\"\n          class=\"shrink-0 self-center justify-self-center\" />\n      }\n      @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n      <!-- Cut off, the label shows whole in a tooltip (`truncated` measures it); a label that fits has none. -->\n      <span\n        [class]=\"\n          cn(\n            'line-clamp-1 cursor-pointer break-all text-ellipsis select-none',\n            appliesOnLabelClick && 'hover:underline'\n          )\n        \"\n        truncated\n        #cut=\"truncated\"\n        [tooltip]=\"listItemName(item) | syslang\"\n        [tooltipDisabled]=\"!cut.isTruncated()\"\n        (click)=\"onListItemTextClick(item, $event)\">\n        @for (\n          chunk of (listItemName(item) | syslang) ?? \"\"\n            | highlightWord: searchText() : 10;\n          track $index\n        ) {\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n            chunk.text\n          }}</span>\n        }\n      </span>\n      @if (showCount() && item.count > 0) {\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -28095,6 +28293,17 @@ function chipsForLeaf(leaf, source) {
 }
 var AppliedFiltersComponent = class AppliedFiltersComponent {
 	queryParamsStore = inject(QueryParamsStore);
+	static nextId = 0;
+	listId = `applied-filters-${AppliedFiltersComponent.nextId++}`;
+	list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	foldable = signal(false, ...ngDevMode ? [{ debugName: "foldable" }] : /* istanbul ignore next */ []);
+	expanded = signal(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	foldedHeight = signal(0, ...ngDevMode ? [{ debugName: "foldedHeight" }] : /* istanbul ignore next */ []);
+	fullHeight = signal(0, ...ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []);
+	listHeight = computed(() => this.foldable() ? this.expanded() ? this.fullHeight() : this.foldedHeight() : null, ...ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []);
+	toggle() {
+		this.expanded.update((open) => !open);
+	}
 	filters = input(void 0, ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
 	syncUrl = input(true, {
 		...ngDevMode ? { debugName: "syncUrl" } : /* istanbul ignore next */ {},
@@ -28108,10 +28317,62 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 	scheme = input("grey", ...ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []);
 	size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
 	chipClass = input("", ...ngDevMode ? [{ debugName: "chipClass" }] : /* istanbul ignore next */ []);
+	maxLines = input(2, {
+		...ngDevMode ? { debugName: "maxLines" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	showClearAll = input(true, {
+		...ngDevMode ? { debugName: "showClearAll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	removed = output();
 	cleared = output();
 	filtersChange = output();
 	changed = output();
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterRenderEffect(() => {
+			this.chips();
+			this.maxLines();
+			this.expanded();
+			this.measure();
+		});
+		afterRenderEffect((onCleanup) => {
+			const element = this.list()?.nativeElement;
+			if (!element || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.measure());
+			observer.observe(element);
+			onCleanup(() => observer.disconnect());
+		});
+		destroyRef.onDestroy(() => this.foldable.set(false));
+	}
+	measure() {
+		const element = this.list()?.nativeElement;
+		const max = this.maxLines();
+		if (!element || max <= 0) {
+			this.foldable.set(false);
+			return;
+		}
+		const items = Array.from(element.children);
+		const first = items[0];
+		if (!first) {
+			this.foldable.set(false);
+			return;
+		}
+		const origin = first.offsetTop;
+		const tops = Array.from(new Set(items.map((item) => item.offsetTop - origin))).sort((a, b) => a - b);
+		const gap = Number.parseFloat(getComputedStyle(element).rowGap) || 0;
+		if (tops.length <= max) {
+			this.foldable.set(false);
+			items.forEach((item) => item.inert = false);
+			return;
+		}
+		this.foldable.set(true);
+		this.foldedHeight.set(Math.max(0, tops[max] - gap));
+		this.fullHeight.set(element.scrollHeight);
+		const folded = this.foldedHeight();
+		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)));
 	}, ...ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []);
@@ -28207,6 +28468,20 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			maxLines: {
+				classPropertyName: "maxLines",
+				publicName: "maxLines",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClearAll: {
+				classPropertyName: "showClearAll",
+				publicName: "showClearAll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -28217,39 +28492,75 @@ var AppliedFiltersComponent = class AppliedFiltersComponent {
 		},
 		host: { properties: { "class.hidden": "chips().length === 0" } },
 		providers: [provideTranslocoScope("filters")],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
     @if (chips().length > 0) {
-      <div class="flex flex-wrap items-center gap-1.5" role="list">
-        @for (chip of chips(); track chip.id) {
-          <tag
-            role="listitem"
-            [variant]="variant()"
-            [scheme]="scheme()"
-            [size]="size()"
-            [class]="'max-w-full items-center gap-1 ' + chipClass()"
-          >
-            @if (showField()) {
-              <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
-            }
-            <span class="truncate">{{ chip.display | syslang }}</span>
-            <button
-              variant="none"
-              size="xs"
-              [iconOnly]="true"
-              class="shrink-0"
-              [attr.aria-label]="('filters.removeFilter' | transloco) + ': ' + chip.display"
-              [title]="('filters.removeFilter' | transloco) + ': ' + chip.display"
-              (click)="remove(chip)"
+      <!-- The zone the "show more" button belongs to: it appears when the pointer is on it or the focus is in it. -->
+      <div class="group/applied relative" [class.pb-7]="foldable() && expanded()">
+        <!-- Past maxLines lines the list is folded to that height — the rest is behind a fade, and a height that grows and
+             shrinks shows it. The chips that fall in the folded part are inert (see measure): a remove button nobody can see
+             must not stay in the tab order. The clip keeps a margin of a few pixels, so the focus ring of the visible chips is whole. -->
+        <div
+          #list
+          [id]="listId"
+          class="flex flex-wrap content-start items-center gap-1.5 [overflow-clip-margin:0.25rem] overflow-clip transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"
+          [style.height.px]="listHeight()"
+          [style.mask-image]="foldable() && !expanded() ? 'linear-gradient(to bottom, black calc(100% - 1.5rem), transparent)' : null"
+          role="list"
+        >
+          @for (chip of chips(); track chip.id) {
+            <tag
+              role="listitem"
+              [variant]="variant()"
+              [scheme]="scheme()"
+              [size]="size()"
+              [class]="'max-w-full items-center gap-1 ' + chipClass()"
             >
-              <x-mark-icon class="size-3" />
+              @if (showField()) {
+                <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+              }
+              <span class="truncate">{{ chip.display | syslang }}</span>
+              <button
+                variant="none"
+                size="xs"
+                [iconOnly]="true"
+                class="shrink-0"
+                [attr.aria-label]="('filters.removeFilter' | transloco) + ': ' + chip.display"
+                [title]="('filters.removeFilter' | transloco) + ': ' + chip.display"
+                (click)="remove(chip)"
+              >
+                <x-mark-icon class="size-3" />
+              </button>
+            </tag>
+          }
+
+          @if (showClearAll() && chips().length > 1) {
+            <button variant="tertiary" size="xs" (click)="clear()">
+              {{ "filters.clearAllFilters" | transloco }}
             </button>
-          </tag>
-        }
+          }
+        </div>
 
-        @if (chips().length > 1) {
-          <button variant="tertiary" size="xs" (click)="clear()">
-            {{ "filters.clearAllFilters" | transloco }}
+        @if (foldable()) {
+          <!-- Out of sight until the zone is hovered or holds the focus — and always there on a screen with no hover. Still in the
+               tab order, and revealed by the focus. Its own surface, since it lies over the chips. -->
+          <button
+            type="button"
+            variant="secondary"
+            size="xs"
+            class="absolute right-0 bottom-0 bg-(--bg-neutral-white) opacity-0 shadow-(--shadow-1) transition-opacity duration-150 group-hover/applied:opacity-100 group-focus-within/applied:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100"
+            [attr.aria-expanded]="expanded()"
+            [attr.aria-controls]="listId"
+            (click)="toggle()"
+          >
+            {{ (expanded() ? "filters.showLess" : "filters.showMore") | transloco }}
           </button>
         }
       </div>
@@ -28320,36 +28631,65 @@ i0.ɵɵngDeclareClassMetadata({
 			providers: [provideTranslocoScope("filters")],
 			template: `
     @if (chips().length > 0) {
-      <div class="flex flex-wrap items-center gap-1.5" role="list">
-        @for (chip of chips(); track chip.id) {
-          <tag
-            role="listitem"
-            [variant]="variant()"
-            [scheme]="scheme()"
-            [size]="size()"
-            [class]="'max-w-full items-center gap-1 ' + chipClass()"
-          >
-            @if (showField()) {
-              <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
-            }
-            <span class="truncate">{{ chip.display | syslang }}</span>
-            <button
-              variant="none"
-              size="xs"
-              [iconOnly]="true"
-              class="shrink-0"
-              [attr.aria-label]="('filters.removeFilter' | transloco) + ': ' + chip.display"
-              [title]="('filters.removeFilter' | transloco) + ': ' + chip.display"
-              (click)="remove(chip)"
+      <!-- The zone the "show more" button belongs to: it appears when the pointer is on it or the focus is in it. -->
+      <div class="group/applied relative" [class.pb-7]="foldable() && expanded()">
+        <!-- Past maxLines lines the list is folded to that height — the rest is behind a fade, and a height that grows and
+             shrinks shows it. The chips that fall in the folded part are inert (see measure): a remove button nobody can see
+             must not stay in the tab order. The clip keeps a margin of a few pixels, so the focus ring of the visible chips is whole. -->
+        <div
+          #list
+          [id]="listId"
+          class="flex flex-wrap content-start items-center gap-1.5 [overflow-clip-margin:0.25rem] overflow-clip transition-[height] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"
+          [style.height.px]="listHeight()"
+          [style.mask-image]="foldable() && !expanded() ? 'linear-gradient(to bottom, black calc(100% - 1.5rem), transparent)' : null"
+          role="list"
+        >
+          @for (chip of chips(); track chip.id) {
+            <tag
+              role="listitem"
+              [variant]="variant()"
+              [scheme]="scheme()"
+              [size]="size()"
+              [class]="'max-w-full items-center gap-1 ' + chipClass()"
             >
-              <x-mark-icon class="size-3" />
+              @if (showField()) {
+                <span>{{ (chip.name ?? chip.field) | syslang }}:</span>
+              }
+              <span class="truncate">{{ chip.display | syslang }}</span>
+              <button
+                variant="none"
+                size="xs"
+                [iconOnly]="true"
+                class="shrink-0"
+                [attr.aria-label]="('filters.removeFilter' | transloco) + ': ' + chip.display"
+                [title]="('filters.removeFilter' | transloco) + ': ' + chip.display"
+                (click)="remove(chip)"
+              >
+                <x-mark-icon class="size-3" />
+              </button>
+            </tag>
+          }
+
+          @if (showClearAll() && chips().length > 1) {
+            <button variant="tertiary" size="xs" (click)="clear()">
+              {{ "filters.clearAllFilters" | transloco }}
             </button>
-          </tag>
-        }
+          }
+        </div>
 
-        @if (chips().length > 1) {
-          <button variant="tertiary" size="xs" (click)="clear()">
-            {{ "filters.clearAllFilters" | transloco }}
+        @if (foldable()) {
+          <!-- Out of sight until the zone is hovered or holds the focus — and always there on a screen with no hover. Still in the
+               tab order, and revealed by the focus. Its own surface, since it lies over the chips. -->
+          <button
+            type="button"
+            variant="secondary"
+            size="xs"
+            class="absolute right-0 bottom-0 bg-(--bg-neutral-white) opacity-0 shadow-(--shadow-1) transition-opacity duration-150 group-hover/applied:opacity-100 group-focus-within/applied:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100"
+            [attr.aria-expanded]="expanded()"
+            [attr.aria-controls]="listId"
+            (click)="toggle()"
+          >
+            {{ (expanded() ? "filters.showLess" : "filters.showMore") | transloco }}
           </button>
         }
       </div>
@@ -28358,7 +28698,12 @@ i0.ɵɵngDeclareClassMetadata({
 			host: { "[class.hidden]": "chips().length === 0" }
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}],
 		filters: [{
 			type: i0.Input,
 			args: [{
@@ -28415,6 +28760,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		maxLines: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLines",
+				required: false
+			}]
+		}],
+		showClearAll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClearAll",
+				required: false
+			}]
+		}],
 		removed: [{
 			type: i0.Output,
 			args: ["removed"]
@@ -31619,6 +31980,1049 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+function filterLabel(filter) {
+	return filter.name || filter.field || "";
+}
+function filterValue(filter) {
+	if (filter.filters?.length) return filter.filters.map((f) => filterLabel(f) ? `${filterLabel(f)}: ${filterValue(f)}` : filterValue(f)).join(", ");
+	if (filter.values?.length) return filter.values.join(", ");
+	return filter.display ?? filter.value ?? [filter.start, filter.end].filter((v) => v !== void 0 && v !== "").join(" – ");
+}
+var QuickFiltersListComponent = class QuickFiltersListComponent {
+	searchable = input(false, ...ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []);
+	deletable = input(true, ...ngDevMode ? [{ debugName: "deletable" }] : /* istanbul ignore next */ []);
+	emptyHint = input(...ngDevMode ? [void 0, { debugName: "emptyHint" }] : /* istanbul ignore next */ []);
+	applied = output();
+	deleted = output();
+	userSettingsStore = inject(UserSettingsStore);
+	queryParamsStore = inject(QueryParamsStore);
+	appStore = inject(AppStore);
+	transloco = inject(TranslocoService);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	deleteKeys = isApplePlatform() ? ["Delete", "Backspace"] : ["Delete"];
+	quickFilters = computed(() => this.userSettingsStore.quickFilters() ?? [], ...ngDevMode ? [{ debugName: "quickFilters" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	filtered = computed(() => {
+		const query = this.query().trim().toLowerCase();
+		return query ? this.quickFilters().filter((quickFilter) => quickFilter.name.toLowerCase().includes(query)) : this.quickFilters();
+	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	details = signal(null, ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
+	detailsCard = viewChild("detailsCard", ...ngDevMode ? [{ debugName: "detailsCard" }] : /* istanbul ignore next */ []);
+	hideTimer;
+	deleting = signal(false, ...ngDevMode ? [{ debugName: "deleting" }] : /* istanbul ignore next */ []);
+	constructor() {
+		injectFloatingPanel({
+			panel: () => this.detailsCard()?.nativeElement,
+			anchor: () => this.details()?.anchor,
+			placement: "bottom-start",
+			offset: 4,
+			topLayer: true
+		});
+		inject(DestroyRef).onDestroy(() => this.cancelHideDetails());
+	}
+	chips(quickFilter) {
+		return quickFilter.filters.map((filter) => {
+			const icon = (filter.field ? this.appStore.getAggregationCustomization(filter.field, filter.name) : void 0)?.icon;
+			const value = filterValue(filter);
+			const label = filterLabel(filter);
+			return {
+				text: icon || !label || !value ? value || label : `${label}: ${value}`,
+				icon
+			};
+		}).filter((chip) => chip.text);
+	}
+	showDetails(quickFilter, anchor) {
+		this.cancelHideDetails();
+		this.details.set({
+			quickFilter,
+			anchor
+		});
+	}
+	scheduleHideDetails() {
+		this.cancelHideDetails();
+		this.hideTimer = setTimeout(() => this.details.set(null), 100);
+	}
+	cancelHideDetails() {
+		clearTimeout(this.hideTimer);
+	}
+	onEscape(event) {
+		if (!this.details()) return;
+		event.stopPropagation();
+		this.cancelHideDetails();
+		this.details.set(null);
+	}
+	picked = signal([], ...ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []);
+	pick(values) {
+		const quickFilter = values.at(-1);
+		this.picked.set([]);
+		if (quickFilter) this.apply(quickFilter);
+	}
+	apply(quickFilter) {
+		this.cancelHideDetails();
+		this.details.set(null);
+		this.queryParamsStore.patch({ filters: structuredClone(quickFilter.filters) });
+		this.applied.emit(quickFilter);
+	}
+	async remove(quickFilter, index, event) {
+		event.stopPropagation();
+		if (this.deleting()) return;
+		this.deleting.set(true);
+		this.cancelHideDetails();
+		this.details.set(null);
+		const hadFocus = this.host.nativeElement.contains(document.activeElement);
+		try {
+			await this.userSettingsStore.removeQuickFilter(quickFilter.id);
+			const message = this.transloco.translate("quickFilters.deleted", { name: quickFilter.name });
+			notify.success(message, { duration: 2e3 });
+			this.announcement.set(message);
+			this.deleted.emit(quickFilter);
+			if (hadFocus) afterNextRender(() => {
+				const rows = this.host.nativeElement.querySelectorAll("[role='option']");
+				(rows.length ? rows[Math.min(index, rows.length - 1)] : this.host.nativeElement).focus();
+			}, { injector: this.injector });
+		} finally {
+			this.deleting.set(false);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: QuickFiltersListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: QuickFiltersListComponent,
+		isStandalone: true,
+		selector: "QuickFiltersList, quick-filters-list",
+		inputs: {
+			searchable: {
+				classPropertyName: "searchable",
+				publicName: "searchable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			deletable: {
+				classPropertyName: "deletable",
+				publicName: "deletable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyHint: {
+				classPropertyName: "emptyHint",
+				publicName: "emptyHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			applied: "applied",
+			deleted: "deleted"
+		},
+		host: {
+			attributes: { "tabindex": "-1" },
+			listeners: { "keydown.escape": "onEscape($event)" },
+			classAttribute: "flex min-h-0 flex-col gap-(--spacing-xs) outline-none"
+		},
+		providers: [provideTranslocoScope("quick-filters")],
+		viewQueries: [{
+			propertyName: "detailsCard",
+			first: true,
+			predicate: ["detailsCard"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (searchable() && quickFilters().length > 0) {
+      <SearchInput
+        size="md"
+        class="border-(--stroke-primary-light)"
+        [(value)]="query"
+        [placeholder]="'quickFilters.search' | transloco"
+        [aria-label]="'quickFilters.search' | transloco"
+        [clearLabel]="'quickFilters.clearSearch' | transloco" />
+    }
+
+    @if (filtered().length) {
+      <!-- The galactik List, as the design's List Item: a listbox of menu rows with an icon, the name and the number of filters.
+           Choosing a row (click, Enter) applies it; the selection is not kept. The cross at the end of the row deletes it. -->
+      <List
+        variant="list-menu"
+        size="medium"
+        selectionMode="explicit"
+        class="-mx-1 min-h-0 flex-1 overflow-auto px-1 [scrollbar-color:color-mix(in_srgb,currentColor_40%,transparent)_transparent] [scrollbar-width:thin]"
+        [attr.aria-label]="'quickFilters.list' | transloco"
+        [value]="picked()"
+        (valueChange)="pick($event)">
+        @for (quickFilter of filtered(); track quickFilter.id; let index = $index) {
+          <ListItem
+            [value]="quickFilter"
+            [label]="quickFilter.name"
+            (focusin)="showDetails(quickFilter, count)"
+            (focusout)="scheduleHideDetails()">
+            <ListItemLeft>
+              <ListItemIcon><quick-filter-icon /></ListItemIcon>
+              <ListItemText>
+                <!-- The tooltip shows the whole name, and only when it is cut off: a full name needs none. -->
+                <span truncated #cut="truncated" [tooltip]="quickFilter.name" [tooltipDisabled]="!cut.isTruncated()" class="block truncate">{{ quickFilter.name }}</span>
+                <!-- The line of the count of filters is the one that shows what the quick filter holds, on hover (the row itself only applies
+                     it); on the keyboard, the row having the focus shows it. It takes the look of the subtext of a row. -->
+                <span
+                  #count
+                  data-count
+                  class="list-item-subtext block w-fit! decoration-dotted underline-offset-2 hover:underline"
+                  (mouseenter)="showDetails(quickFilter, count)"
+                  (mouseleave)="scheduleHideDetails()">
+                  {{ (quickFilter.filters.length === 1 ? "quickFilters.countOne" : "quickFilters.countOther") | transloco: { count: quickFilter.filters.length } }}
+                </span>
+              </ListItemText>
+            </ListItemLeft>
+            @if (deletable()) {
+              <ListItemAction
+                [ariaLabel]="'quickFilters.delete' | transloco: { name: quickFilter.name }"
+                [keys]="deleteKeys"
+                [shortcut]="'quickFilters.deleteShortcut' | transloco"
+                [description]="'quickFilters.deleteDescription' | transloco: { key: 'quickFilters.deleteShortcut' | transloco }"
+                (click)="remove(quickFilter, index, $event)">
+                <x-mark-icon />
+              </ListItemAction>
+            }
+          </ListItem>
+        }
+      </List>
+
+      <!-- The hover card of the design: the filters a quick filter holds, as chips, hanging under its row. Placed with Floating UI in
+           the top layer, so it is above whatever clips the list. It stays while the pointer is on it, and while the focus is on the row. -->
+      @if (details(); as shown) {
+        <div
+          #detailsCard
+          role="tooltip"
+          class="fixed m-0 flex max-w-72 flex-wrap gap-(--spacing-3xs) rounded-(--radius-lg) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) shadow-(--shadow-2)"
+          (mouseenter)="cancelHideDetails()"
+          (mouseleave)="scheduleHideDetails()">
+          @for (chip of chips(shown.quickFilter); track $index) {
+            <span
+              data-chip
+              class="inline-flex max-w-full min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-rounded) bg-(--bg-neutral-base) py-(--spacing-4xs) pr-(--spacing-2xs) pl-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
+              <!-- the icon the application gives the aggregation in the filters custom JSON, as on the filter button -->
+              @if (chip.icon) {
+                <fa-icon [faClass]="chip.icon" class="shrink-0" />
+              }
+              <!-- A chip that is cut off shows its whole text in a tooltip; one that fits has none. -->
+              <span class="truncate" truncated #cutChip="truncated" [tooltip]="chip.text" [tooltipDisabled]="!cutChip.isTruncated()">{{ chip.text }}</span>
+            </span>
+          }
+        </div>
+      }
+    } @else {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
+      <div class="flex flex-col items-center gap-(--spacing-xs) px-(--spacing-md) py-(--spacing-lg) text-center">
+        <span class="inline-flex size-12 items-center justify-center rounded-(--radius-md) bg-(--bg-cyan-base-alt) text-(--font-cyan-muted)" aria-hidden="true">
+          <quick-filter-icon class="size-6 opacity-80" />
+        </span>
+        <span class="text-(length:--size-base) font-semibold text-(--font-neutral-base)">{{ (query() ? "quickFilters.noMatch" : "quickFilters.empty") | transloco }}</span>
+        @if (!query()) {
+          <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ emptyHint() ?? ("quickFilters.emptyHint" | transloco) }}</span>
+        }
+      </div>
+    }
+
+    <span role="status" class="sr-only">{{ announcement() }}</span>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: FaIconComponent,
+				selector: "fa-icon, FaIcon",
+				inputs: ["faClass", "class"]
+			},
+			{
+				kind: "directive",
+				type: ListComponent,
+				selector: "List,list",
+				inputs: [
+					"class",
+					"variant",
+					"size"
+				],
+				exportAs: ["list"]
+			},
+			{
+				kind: "directive",
+				type: ListItemComponent,
+				selector: "ListItem,list-item,listitem",
+				inputs: [
+					"class",
+					"variant",
+					"size",
+					"depth"
+				],
+				exportAs: ["listItem"]
+			},
+			{
+				kind: "component",
+				type: ListItemActionComponent,
+				selector: "ListItemAction,list-item-action,listitemaction",
+				inputs: [
+					"ariaLabel",
+					"disabled",
+					"keys",
+					"shortcut",
+					"description"
+				],
+				exportAs: ["listItemAction"]
+			},
+			{
+				kind: "directive",
+				type: ListItemIconDirective,
+				selector: "ListItemIcon,list-item-icon,listitemicon",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: ListItemLeftDirective,
+				selector: "ListItemLeft,list-item-left,listitemleft",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: ListItemTextComponent,
+				selector: "ListItemText,list-item-text,listitemtext",
+				inputs: ["class", "subtext"],
+				exportAs: ["listItemText"]
+			},
+			{
+				kind: "component",
+				type: QuickFilterIcon,
+				selector: "quick-filter, quick-filter-icon, QuickFilter, QuickFilterIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SearchInputComponent,
+				selector: "SearchInput:not([suggestions]), search-input:not([suggestions]), searchinput:not([suggestions])"
+			},
+			{
+				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: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
+			{
+				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: QuickFiltersListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "QuickFiltersList, quick-filters-list",
+			imports: [
+				TranslocoPipe,
+				FaIconComponent,
+				ListComponent,
+				ListItemComponent,
+				ListItemActionComponent,
+				ListItemIconDirective,
+				ListItemLeftDirective,
+				ListItemTextComponent,
+				QuickFilterIcon,
+				SearchInputComponent,
+				TooltipDirective,
+				TruncatedDirective,
+				XMarkIcon
+			],
+			providers: [provideTranslocoScope("quick-filters")],
+			host: {
+				class: "flex min-h-0 flex-col gap-(--spacing-xs) outline-none",
+				tabindex: "-1",
+				"(keydown.escape)": "onEscape($event)"
+			},
+			template: `
+    @if (searchable() && quickFilters().length > 0) {
+      <SearchInput
+        size="md"
+        class="border-(--stroke-primary-light)"
+        [(value)]="query"
+        [placeholder]="'quickFilters.search' | transloco"
+        [aria-label]="'quickFilters.search' | transloco"
+        [clearLabel]="'quickFilters.clearSearch' | transloco" />
+    }
+
+    @if (filtered().length) {
+      <!-- The galactik List, as the design's List Item: a listbox of menu rows with an icon, the name and the number of filters.
+           Choosing a row (click, Enter) applies it; the selection is not kept. The cross at the end of the row deletes it. -->
+      <List
+        variant="list-menu"
+        size="medium"
+        selectionMode="explicit"
+        class="-mx-1 min-h-0 flex-1 overflow-auto px-1 [scrollbar-color:color-mix(in_srgb,currentColor_40%,transparent)_transparent] [scrollbar-width:thin]"
+        [attr.aria-label]="'quickFilters.list' | transloco"
+        [value]="picked()"
+        (valueChange)="pick($event)">
+        @for (quickFilter of filtered(); track quickFilter.id; let index = $index) {
+          <ListItem
+            [value]="quickFilter"
+            [label]="quickFilter.name"
+            (focusin)="showDetails(quickFilter, count)"
+            (focusout)="scheduleHideDetails()">
+            <ListItemLeft>
+              <ListItemIcon><quick-filter-icon /></ListItemIcon>
+              <ListItemText>
+                <!-- The tooltip shows the whole name, and only when it is cut off: a full name needs none. -->
+                <span truncated #cut="truncated" [tooltip]="quickFilter.name" [tooltipDisabled]="!cut.isTruncated()" class="block truncate">{{ quickFilter.name }}</span>
+                <!-- The line of the count of filters is the one that shows what the quick filter holds, on hover (the row itself only applies
+                     it); on the keyboard, the row having the focus shows it. It takes the look of the subtext of a row. -->
+                <span
+                  #count
+                  data-count
+                  class="list-item-subtext block w-fit! decoration-dotted underline-offset-2 hover:underline"
+                  (mouseenter)="showDetails(quickFilter, count)"
+                  (mouseleave)="scheduleHideDetails()">
+                  {{ (quickFilter.filters.length === 1 ? "quickFilters.countOne" : "quickFilters.countOther") | transloco: { count: quickFilter.filters.length } }}
+                </span>
+              </ListItemText>
+            </ListItemLeft>
+            @if (deletable()) {
+              <ListItemAction
+                [ariaLabel]="'quickFilters.delete' | transloco: { name: quickFilter.name }"
+                [keys]="deleteKeys"
+                [shortcut]="'quickFilters.deleteShortcut' | transloco"
+                [description]="'quickFilters.deleteDescription' | transloco: { key: 'quickFilters.deleteShortcut' | transloco }"
+                (click)="remove(quickFilter, index, $event)">
+                <x-mark-icon />
+              </ListItemAction>
+            }
+          </ListItem>
+        }
+      </List>
+
+      <!-- The hover card of the design: the filters a quick filter holds, as chips, hanging under its row. Placed with Floating UI in
+           the top layer, so it is above whatever clips the list. It stays while the pointer is on it, and while the focus is on the row. -->
+      @if (details(); as shown) {
+        <div
+          #detailsCard
+          role="tooltip"
+          class="fixed m-0 flex max-w-72 flex-wrap gap-(--spacing-3xs) rounded-(--radius-lg) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) shadow-(--shadow-2)"
+          (mouseenter)="cancelHideDetails()"
+          (mouseleave)="scheduleHideDetails()">
+          @for (chip of chips(shown.quickFilter); track $index) {
+            <span
+              data-chip
+              class="inline-flex max-w-full min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-rounded) bg-(--bg-neutral-base) py-(--spacing-4xs) pr-(--spacing-2xs) pl-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
+              <!-- the icon the application gives the aggregation in the filters custom JSON, as on the filter button -->
+              @if (chip.icon) {
+                <fa-icon [faClass]="chip.icon" class="shrink-0" />
+              }
+              <!-- A chip that is cut off shows its whole text in a tooltip; one that fits has none. -->
+              <span class="truncate" truncated #cutChip="truncated" [tooltip]="chip.text" [tooltipDisabled]="!cutChip.isTruncated()">{{ chip.text }}</span>
+            </span>
+          }
+        </div>
+      }
+    } @else {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
+      <div class="flex flex-col items-center gap-(--spacing-xs) px-(--spacing-md) py-(--spacing-lg) text-center">
+        <span class="inline-flex size-12 items-center justify-center rounded-(--radius-md) bg-(--bg-cyan-base-alt) text-(--font-cyan-muted)" aria-hidden="true">
+          <quick-filter-icon class="size-6 opacity-80" />
+        </span>
+        <span class="text-(length:--size-base) font-semibold text-(--font-neutral-base)">{{ (query() ? "quickFilters.noMatch" : "quickFilters.empty") | transloco }}</span>
+        @if (!query()) {
+          <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ emptyHint() ?? ("quickFilters.emptyHint" | transloco) }}</span>
+        }
+      </div>
+    }
+
+    <span role="status" class="sr-only">{{ announcement() }}</span>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		searchable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchable",
+				required: false
+			}]
+		}],
+		deletable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deletable",
+				required: false
+			}]
+		}],
+		emptyHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyHint",
+				required: false
+			}]
+		}],
+		applied: [{
+			type: i0.Output,
+			args: ["applied"]
+		}],
+		deleted: [{
+			type: i0.Output,
+			args: ["deleted"]
+		}],
+		detailsCard: [{
+			type: i0.ViewChild,
+			args: ["detailsCard", { isSignal: true }]
+		}]
+	}
+});
+let nextPanelId = 0;
+var FiltersPanelComponent = class FiltersPanelComponent {
+	documentCount = input(0, ...ngDevMode ? [{ debugName: "documentCount" }] : /* istanbul ignore next */ []);
+	closed = output();
+	appStore = inject(AppStore);
+	aggregationsStore = inject(AggregationsStore);
+	queryParamsStore = inject(QueryParamsStore);
+	userSettingsStore = inject(UserSettingsStore);
+	transloco = inject(TranslocoService);
+	injector = inject(Injector);
+	nameId = `filters-panel-quick-filter-name-${nextPanelId++}`;
+	tab = signal("all", ...ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	name = signal("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	appliedCount = computed(() => this.queryParamsStore.filters().flatMap((filter) => this.leaves(filter)).reduce((count, leaf) => count + this.valuesOf(leaf), 0), ...ngDevMode ? [{ debugName: "appliedCount" }] : /* istanbul ignore next */ []);
+	nameInput = viewChild("nameInput", ...ngDevMode ? [{ debugName: "nameInput" }] : /* istanbul ignore next */ []);
+	saveButton = viewChild("saveButton", ...ngDevMode ? [{ debugName: "saveButton" }] : /* istanbul ignore next */ []);
+	matching = computed(() => {
+		const needle = this.query().trim().toLocaleLowerCase();
+		if (!needle) return [];
+		const aside = this.appStore.filters().filter((f) => f.position === "left" || f.position === "both");
+		return this.appStore.getAuthorized(aside).map((f) => this.aggregationsStore.getAggregation(f.name, "name") ?? this.aggregationsStore.getAggregation(f.column, "column")).filter((agg) => !!agg && `${agg.name} ${agg.column}`.toLocaleLowerCase().includes(needle)).map((agg) => agg.name);
+	}, ...ngDevMode ? [{ debugName: "matching" }] : /* istanbul ignore next */ []);
+	selectTab(values) {
+		const next = values.at(-1);
+		if (next) this.tab.set(next);
+	}
+	leaves(filter) {
+		return filter.filters?.length ? filter.filters.flatMap((f) => this.leaves(f)) : [filter];
+	}
+	valuesOf(leaf) {
+		if (leaf.values?.length) return leaf.values.length;
+		return leaf.value !== void 0 && leaf.value !== null ? 1 : 0;
+	}
+	startSaving() {
+		this.name.set("");
+		this.saving.set(true);
+		afterNextRender(() => this.nameInput()?.nativeElement.focus(), { injector: this.injector });
+	}
+	closeSaving() {
+		this.saving.set(false);
+		afterNextRender(() => this.saveButton()?.nativeElement.focus(), { injector: this.injector });
+	}
+	onSaveEscape(event) {
+		event.stopPropagation();
+		this.closeSaving();
+	}
+	async saveQuickFilter(event) {
+		event.preventDefault();
+		const saved = await this.userSettingsStore.addQuickFilter(this.name(), structuredClone(this.queryParamsStore.filters()));
+		if (!saved) return;
+		this.closeSaving();
+		this.announcement.set(this.transloco.translate("filters.panelQuickFilterSaved", { name: saved.name }));
+	}
+	onQuickFilterApplied(quickFilter) {
+		this.announcement.set(this.transloco.translate("filters.panelQuickFilterApplied", { name: quickFilter.name }));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: FiltersPanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: FiltersPanelComponent,
+		isStandalone: true,
+		selector: "filters-panel, FiltersPanel, filterspanel",
+		inputs: { documentCount: {
+			classPropertyName: "documentCount",
+			publicName: "documentCount",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { closed: "closed" },
+		host: { classAttribute: "block h-full min-h-0" },
+		providers: [provideTranslocoScope("filters")],
+		viewQueries: [{
+			propertyName: "nameInput",
+			first: true,
+			predicate: ["nameInput"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "saveButton",
+			first: true,
+			predicate: ["saveButton"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="flex h-full min-h-0 flex-col gap-(--spacing-xs)">
+      <header class="flex items-center justify-between gap-(--spacing-xs)">
+        <h2 class="flex items-center gap-(--spacing-2xs) text-(length:--size-lg) font-semibold">
+          <filter-icon class="text-(length:--icon-sm) [&_svg]:fill-current" aria-hidden="true" />
+          {{ "filters.panelTitle" | transloco }}
+        </h2>
+        <button variant="tertiary" size="sm" [iconOnly]="true" (click)="closed.emit()" [tooltip]="'filters.panelClose' | transloco" tooltipPosition="bottom">
+          <x-mark-icon />
+          <span class="sr-only">{{ "filters.panelClose" | transloco }}</span>
+        </button>
+      </header>
+
+      <!-- A two-way switch that must always have one side on: the group lets a click on the active item
+           clear the selection, which would leave the panel with no content, so that case is ignored. -->
+      <ToggleGroup class="w-full" [attr.aria-label]="'filters.panelViews' | transloco" [value]="[tab()]" (valueChange)="selectTab($event)">
+        <Toggle class="flex-1 text-(length:--size-xs) font-semibold" value="all">{{ "filters.panelTabAll" | transloco }}</Toggle>
+        <Toggle class="flex-1 text-(length:--size-xs) font-semibold" value="quick">{{ "filters.panelTabQuick" | transloco }}</Toggle>
+      </ToggleGroup>
+
+      @if (tab() === "all") {
+        <SearchInput
+          size="md"
+          class="[&>*]:h-8 [&>*]:rounded-full"
+          [(value)]="query"
+          [placeholder]="'filters.panelSearchPlaceholder' | transloco"
+          [aria-label]="'filters.searchFilters' | transloco"
+          [clearLabel]="'filters.clearSearch' | transloco" />
+
+        <!-- The bar is the anchor of the card: the card hangs under the button, as wide as the panel's content, and covers the facets
+             below it until it is closed. -->
+        <div class="relative flex h-8 items-center justify-between gap-(--spacing-xs) text-(length:--size-sm) text-(--font-primary-muted)">
+          <span>{{ (documentCount() === 1 ? "filters.panelDocumentsOne" : "filters.panelDocumentsOther") | transloco: { count: documentCount() | localizedNumber } }}</span>
+          <button
+            #saveButton
+            variant="secondary"
+            size="sm"
+            aria-haspopup="dialog"
+            [attr.aria-expanded]="saving()"
+            [disabled]="appliedCount() === 0"
+            (click)="saving() ? closeSaving() : startSaving()">
+            <quick-filter-icon />
+            {{ "filters.panelSaveQuickFilter" | transloco }}
+          </button>
+
+          @if (saving()) {
+            <form
+              role="dialog"
+              [attr.aria-label]="'filters.panelSaveQuickFilter' | transloco"
+              class="absolute inset-x-0 top-full z-10 mt-(--spacing-2xs) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) text-(--font-neutral-black) shadow-(--shadow-2)"
+              (submit)="saveQuickFilter($event)"
+              (keydown.escape)="onSaveEscape($event)">
+              <div class="flex flex-col gap-(--spacing-3xs)">
+                <div class="flex items-center justify-between">
+                  <label [for]="nameId" class="text-(length:--size-sm) font-medium">{{ "filters.panelNameLabel" | transloco }}</label>
+                  <span class="rounded-(--radius-xs) bg-(--bg-neutral-base) px-1.5 py-px text-(length:--size-xs) text-(--font-neutral-muted)">{{ "filters.panelRequired" | transloco }}</span>
+                </div>
+                <input-group size="sm" class="w-full">
+                  <input
+                    #nameInput
+                    input-control
+                    [id]="nameId"
+                    type="text"
+                    autocomplete="off"
+                    required
+                    [placeholder]="'filters.panelQuickFilterName' | transloco"
+                    [value]="name()"
+                    (input)="name.set(nameInput.value)" />
+                </input-group>
+              </div>
+              <div class="flex justify-end gap-(--spacing-2xs)">
+                <button type="button" variant="secondary" size="sm" (click)="closeSaving()">{{ "filters.panelCancel" | transloco }}</button>
+                <button type="submit" variant="primary" size="sm" [disabled]="!name().trim()">{{ "filters.panelSave" | transloco }}</button>
+              </div>
+            </form>
+          }
+        </div>
+
+        <!-- single outer scroll lives here; aside-filters' own overflow is neutralized so it is not a second, default-styled scroll container.
+             relative, and it is load-bearing: a scroll container only clips the descendants it is a containing block for. The facets hold sr-only
+             elements, which are position: absolute; with this div left static they escaped the clip, sat at their flow position far below the
+             visible part of a long facet, and made the whole page scroll — a second scrollbar next to the facet's own. -->
+        <div class="relative -mx-1 flex min-h-0 flex-1 scrollbar-thin flex-col overflow-y-auto px-1">
+          @if (query() && matching().length === 0) {
+            <p class="py-(--spacing-md) text-center text-(length:--size-sm) text-(--font-neutral-muted)">{{ "filters.noFilterMatch" | transloco }}</p>
+          } @else {
+            <aside-filters class="overflow-visible" [aggregations]="query() ? matching() : []" />
+          }
+        </div>
+      } @else {
+        <!-- The list of the quick filters pill, inline: it owns the rows, the hover card, the cross and the empty state. -->
+        <quick-filters-list
+          class="flex-1"
+          [emptyHint]="'filters.panelNoQuickFiltersHint' | transloco"
+          (applied)="onQuickFilterApplied($event)" />
+      }
+
+      <span role="status" class="sr-only">{{ announcement() }}</span>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: AsideFiltersComponent,
+				selector: "aside-filters, AsideFilters, asidefilters",
+				inputs: [
+					"class",
+					"aggregations",
+					"exclusive",
+					"collapsible",
+					"collapsed",
+					"hideWhenEmpty"
+				]
+			},
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: FilterIcon,
+				selector: "filter, filter-icon, Filter, FilterIcon",
+				inputs: ["class"]
+			},
+			{
+				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: "component",
+				type: QuickFilterIcon,
+				selector: "quick-filter, quick-filter-icon, QuickFilter, QuickFilterIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: QuickFiltersListComponent,
+				selector: "QuickFiltersList, quick-filters-list",
+				inputs: [
+					"searchable",
+					"deletable",
+					"emptyHint"
+				],
+				outputs: ["applied", "deleted"]
+			},
+			{
+				kind: "component",
+				type: SearchInputComponent,
+				selector: "SearchInput:not([suggestions]), search-input:not([suggestions]), searchinput:not([suggestions])"
+			},
+			{
+				kind: "directive",
+				type: ToggleGroupComponent,
+				selector: "ToggleGroup, toggle-group, togglegroup",
+				inputs: [
+					"class",
+					"value",
+					"multi"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["toggleGroup"]
+			},
+			{
+				kind: "directive",
+				type: ToggleItemComponent,
+				selector: "Toggle[value]",
+				inputs: [
+					"value",
+					"class",
+					"variant",
+					"size",
+					"iconOnly",
+					"showIcon"
+				],
+				exportAs: ["toggle"]
+			},
+			{
+				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: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			},
+			{
+				kind: "pipe",
+				type: LocalizedNumberPipe,
+				name: "localizedNumber"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: FiltersPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "filters-panel, FiltersPanel, filterspanel",
+			imports: [
+				TranslocoPipe,
+				LocalizedNumberPipe,
+				AsideFiltersComponent,
+				ButtonComponent,
+				FilterIcon,
+				InputComponent,
+				InputControlDirective,
+				QuickFilterIcon,
+				QuickFiltersListComponent,
+				SearchInputComponent,
+				ToggleGroupComponent,
+				ToggleItemComponent,
+				TooltipDirective,
+				XMarkIcon
+			],
+			providers: [provideTranslocoScope("filters")],
+			host: { class: "block h-full min-h-0" },
+			template: `
+    <div class="flex h-full min-h-0 flex-col gap-(--spacing-xs)">
+      <header class="flex items-center justify-between gap-(--spacing-xs)">
+        <h2 class="flex items-center gap-(--spacing-2xs) text-(length:--size-lg) font-semibold">
+          <filter-icon class="text-(length:--icon-sm) [&_svg]:fill-current" aria-hidden="true" />
+          {{ "filters.panelTitle" | transloco }}
+        </h2>
+        <button variant="tertiary" size="sm" [iconOnly]="true" (click)="closed.emit()" [tooltip]="'filters.panelClose' | transloco" tooltipPosition="bottom">
+          <x-mark-icon />
+          <span class="sr-only">{{ "filters.panelClose" | transloco }}</span>
+        </button>
+      </header>
+
+      <!-- A two-way switch that must always have one side on: the group lets a click on the active item
+           clear the selection, which would leave the panel with no content, so that case is ignored. -->
+      <ToggleGroup class="w-full" [attr.aria-label]="'filters.panelViews' | transloco" [value]="[tab()]" (valueChange)="selectTab($event)">
+        <Toggle class="flex-1 text-(length:--size-xs) font-semibold" value="all">{{ "filters.panelTabAll" | transloco }}</Toggle>
+        <Toggle class="flex-1 text-(length:--size-xs) font-semibold" value="quick">{{ "filters.panelTabQuick" | transloco }}</Toggle>
+      </ToggleGroup>
+
+      @if (tab() === "all") {
+        <SearchInput
+          size="md"
+          class="[&>*]:h-8 [&>*]:rounded-full"
+          [(value)]="query"
+          [placeholder]="'filters.panelSearchPlaceholder' | transloco"
+          [aria-label]="'filters.searchFilters' | transloco"
+          [clearLabel]="'filters.clearSearch' | transloco" />
+
+        <!-- The bar is the anchor of the card: the card hangs under the button, as wide as the panel's content, and covers the facets
+             below it until it is closed. -->
+        <div class="relative flex h-8 items-center justify-between gap-(--spacing-xs) text-(length:--size-sm) text-(--font-primary-muted)">
+          <span>{{ (documentCount() === 1 ? "filters.panelDocumentsOne" : "filters.panelDocumentsOther") | transloco: { count: documentCount() | localizedNumber } }}</span>
+          <button
+            #saveButton
+            variant="secondary"
+            size="sm"
+            aria-haspopup="dialog"
+            [attr.aria-expanded]="saving()"
+            [disabled]="appliedCount() === 0"
+            (click)="saving() ? closeSaving() : startSaving()">
+            <quick-filter-icon />
+            {{ "filters.panelSaveQuickFilter" | transloco }}
+          </button>
+
+          @if (saving()) {
+            <form
+              role="dialog"
+              [attr.aria-label]="'filters.panelSaveQuickFilter' | transloco"
+              class="absolute inset-x-0 top-full z-10 mt-(--spacing-2xs) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) text-(--font-neutral-black) shadow-(--shadow-2)"
+              (submit)="saveQuickFilter($event)"
+              (keydown.escape)="onSaveEscape($event)">
+              <div class="flex flex-col gap-(--spacing-3xs)">
+                <div class="flex items-center justify-between">
+                  <label [for]="nameId" class="text-(length:--size-sm) font-medium">{{ "filters.panelNameLabel" | transloco }}</label>
+                  <span class="rounded-(--radius-xs) bg-(--bg-neutral-base) px-1.5 py-px text-(length:--size-xs) text-(--font-neutral-muted)">{{ "filters.panelRequired" | transloco }}</span>
+                </div>
+                <input-group size="sm" class="w-full">
+                  <input
+                    #nameInput
+                    input-control
+                    [id]="nameId"
+                    type="text"
+                    autocomplete="off"
+                    required
+                    [placeholder]="'filters.panelQuickFilterName' | transloco"
+                    [value]="name()"
+                    (input)="name.set(nameInput.value)" />
+                </input-group>
+              </div>
+              <div class="flex justify-end gap-(--spacing-2xs)">
+                <button type="button" variant="secondary" size="sm" (click)="closeSaving()">{{ "filters.panelCancel" | transloco }}</button>
+                <button type="submit" variant="primary" size="sm" [disabled]="!name().trim()">{{ "filters.panelSave" | transloco }}</button>
+              </div>
+            </form>
+          }
+        </div>
+
+        <!-- single outer scroll lives here; aside-filters' own overflow is neutralized so it is not a second, default-styled scroll container.
+             relative, and it is load-bearing: a scroll container only clips the descendants it is a containing block for. The facets hold sr-only
+             elements, which are position: absolute; with this div left static they escaped the clip, sat at their flow position far below the
+             visible part of a long facet, and made the whole page scroll — a second scrollbar next to the facet's own. -->
+        <div class="relative -mx-1 flex min-h-0 flex-1 scrollbar-thin flex-col overflow-y-auto px-1">
+          @if (query() && matching().length === 0) {
+            <p class="py-(--spacing-md) text-center text-(length:--size-sm) text-(--font-neutral-muted)">{{ "filters.noFilterMatch" | transloco }}</p>
+          } @else {
+            <aside-filters class="overflow-visible" [aggregations]="query() ? matching() : []" />
+          }
+        </div>
+      } @else {
+        <!-- The list of the quick filters pill, inline: it owns the rows, the hover card, the cross and the empty state. -->
+        <quick-filters-list
+          class="flex-1"
+          [emptyHint]="'filters.panelNoQuickFiltersHint' | transloco"
+          (applied)="onQuickFilterApplied($event)" />
+      }
+
+      <span role="status" class="sr-only">{{ announcement() }}</span>
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		documentCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "documentCount",
+				required: false
+			}]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		nameInput: [{
+			type: i0.ViewChild,
+			args: ["nameInput", { isSignal: true }]
+		}],
+		saveButton: [{
+			type: i0.ViewChild,
+			args: ["saveButton", { isSignal: true }]
+		}]
+	}
+});
 var LabelService = class LabelService {
 	appStore = inject(AppStore);
 	client = inject(ATOMIC_CLIENT);
@@ -32901,43 +34305,21 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 let popoverUid = 0;
-function filterLabel(filter) {
-	return filter.name || filter.field || "";
-}
-function filterValue(filter) {
-	if (filter.filters?.length) return filter.filters.map((f) => filterLabel(f) ? `${filterLabel(f)}: ${filterValue(f)}` : filterValue(f)).join(", ");
-	if (filter.values?.length) return filter.values.join(", ");
-	return filter.display ?? filter.value ?? [filter.start, filter.end].filter((v) => v !== void 0 && v !== "").join(" – ");
-}
 var QuickFiltersComponent = class QuickFiltersComponent {
 	scheme = input("sage", ...ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []);
 	appearance = input("pill", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
 	position = input("bottom-start", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
 	offset = input(8, ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
 	applied = output();
-	userSettingsStore = inject(UserSettingsStore);
-	queryParamsStore = inject(QueryParamsStore);
-	appStore = inject(AppStore);
 	transloco = inject(TranslocoService);
 	host = inject(ElementRef);
 	popoverId = `quick-filters-popover-${popoverUid++}`;
 	resized = signal(false, ...ngDevMode ? [{ debugName: "resized" }] : /* istanbul ignore next */ []);
 	flippedAbove = signal(false, ...ngDevMode ? [{ debugName: "flippedAbove" }] : /* istanbul ignore next */ []);
 	placement = computed(() => this.resized() && this.flippedAbove() ? this.position().replace("bottom", "top") : this.position(), ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
-	details = signal(null, ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
-	detailsCard = viewChild("detailsCard", ...ngDevMode ? [{ debugName: "detailsCard" }] : /* istanbul ignore next */ []);
-	hideTimer;
 	popover = viewChild(PopoverDirective, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
 	isOpen = computed(() => this.popover()?.state() === "open", ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
 	constructor() {
-		injectFloatingPanel({
-			panel: () => this.detailsCard()?.nativeElement,
-			anchor: () => this.details()?.anchor,
-			placement: "bottom-start",
-			offset: 4,
-			topLayer: true
-		});
-		inject(DestroyRef).onDestroy(() => this.cancelHideDetails());
 		effect((onCleanup) => {
 			if (!this.resized()) return;
 			const onScroll = (event) => {
@@ -32957,27 +34339,9 @@ var QuickFiltersComponent = class QuickFiltersComponent {
 		selected: false,
 		open: this.isOpen()
 	}) : this.isOpen() ? "border border-(--stroke-neutral-dark)/50" : "", ...ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []);
-	quickFilters = computed(() => this.userSettingsStore.quickFilters() ?? [], ...ngDevMode ? [{ debugName: "quickFilters" }] : /* istanbul ignore next */ []);
-	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
-	filtered = computed(() => {
-		const query = this.query().trim().toLowerCase();
-		return query ? this.quickFilters().filter((quickFilter) => quickFilter.name.toLowerCase().includes(query)) : this.quickFilters();
-	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
 	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
-	chips(quickFilter) {
-		return quickFilter.filters.map((filter) => {
-			const icon = (filter.field ? this.appStore.getAggregationCustomization(filter.field, filter.name) : void 0)?.icon;
-			const value = filterValue(filter);
-			const label = filterLabel(filter);
-			return {
-				text: icon || !label || !value ? value || label : `${label}: ${value}`,
-				icon
-			};
-		}).filter((chip) => chip.text);
-	}
 	onToggle() {
 		if (this.popover()?.state() === "open") return;
-		this.reset();
 		this.unpin();
 	}
 	unpin() {
@@ -32996,44 +34360,12 @@ var QuickFiltersComponent = class QuickFiltersComponent {
 		if (popover && trigger && element) this.flippedAbove.set(element.getBoundingClientRect().bottom <= trigger.getBoundingClientRect().top + 1);
 		this.resized.set(true);
 	}
-	showDetails(quickFilter, event) {
-		this.cancelHideDetails();
-		this.details.set({
-			quickFilter,
-			anchor: event.currentTarget
-		});
-	}
-	scheduleHideDetails() {
-		this.cancelHideDetails();
-		this.hideTimer = setTimeout(() => this.details.set(null), 100);
-	}
-	cancelHideDetails() {
-		clearTimeout(this.hideTimer);
-	}
-	hideDetails() {
-		this.cancelHideDetails();
-		this.details.set(null);
-	}
-	reset() {
-		this.cancelHideDetails();
-		this.details.set(null);
-		this.query.set("");
-	}
 	closeOnFocusLeave(event) {
 		const next = event.relatedTarget;
 		if (!next || !(next instanceof Node) || this.host.nativeElement.contains(next)) return;
 		this.popover()?.close();
 	}
-	picked = signal([], ...ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []);
-	pick(values) {
-		const quickFilter = values.at(-1);
-		this.picked.set([]);
-		if (quickFilter) this.apply(quickFilter);
-	}
 	apply(quickFilter) {
-		this.cancelHideDetails();
-		this.details.set(null);
-		this.queryParamsStore.patch({ filters: structuredClone(quickFilter.filters) });
 		this.popover()?.close();
 		this.applied.emit(quickFilter);
 		this.announcement.set(this.transloco.translate("quickFilters.applied", { name: quickFilter.name }));
@@ -33084,20 +34416,11 @@ var QuickFiltersComponent = class QuickFiltersComponent {
 		},
 		outputs: { applied: "applied" },
 		host: {
-			listeners: {
-				"focusout": "closeOnFocusLeave($event)",
-				"keydown.escape": "hideDetails()"
-			},
+			listeners: { "focusout": "closeOnFocusLeave($event)" },
 			classAttribute: "flex rounded-(--radius-2xl)"
 		},
 		providers: [provideTranslocoScope("quick-filters")],
 		viewQueries: [{
-			propertyName: "detailsCard",
-			first: true,
-			predicate: ["detailsCard"],
-			descendants: true,
-			isSignal: true
-		}, {
 			propertyName: "popover",
 			first: true,
 			predicate: PopoverDirective,
@@ -33137,87 +34460,7 @@ var QuickFiltersComponent = class QuickFiltersComponent {
              there is room under it. The list takes the height the popover is given. The popover has no padding above and under:
              the handles (12px each) are that space, and hug the edges. -->
         <PopoverResizeHandle edge="top" [label]="'quickFilters.resize' | transloco" (resizeStart)="onResizeStart()" />
-        <div class="flex min-h-0 flex-1 flex-col gap-(--spacing-xs)">
-          @if (quickFilters().length > 0) {
-            <SearchInput
-              size="md"
-              class="border-(--stroke-primary-light)"
-              [(value)]="query"
-              [placeholder]="'quickFilters.search' | transloco"
-              [aria-label]="'quickFilters.search' | transloco"
-              [clearLabel]="'quickFilters.clearSearch' | transloco" />
-          }
-
-          @if (filtered().length) {
-            <!-- The galactik List, as the design's List Item: a listbox of menu rows with an icon, the name and the number of
-                 filters. Choosing a row (click, Enter) applies it; the selection is not kept, the popover closes. Hovering a
-                 row lists the filters it holds in a card. -->
-            <List
-              variant="list-menu"
-              size="medium"
-              selectionMode="explicit"
-              class="-mx-1 min-h-0 flex-1 overflow-auto px-1"
-              [attr.aria-label]="'quickFilters.list' | transloco"
-              [value]="picked()"
-              (valueChange)="pick($event)">
-              @for (quickFilter of filtered(); track quickFilter.id) {
-                <ListItem
-                  [value]="quickFilter"
-                  [label]="quickFilter.name"
-                  (mouseenter)="showDetails(quickFilter, $event)"
-                  (mouseleave)="scheduleHideDetails()"
-                  (focusin)="showDetails(quickFilter, $event)"
-                  (focusout)="scheduleHideDetails()">
-                  <ListItemLeft>
-                    <ListItemIcon><quick-filter-icon /></ListItemIcon>
-                    <ListItemText
-                      [subtext]="(quickFilter.filters.length === 1 ? 'quickFilters.countOne' : 'quickFilters.countOther') | transloco: { count: quickFilter.filters.length }">
-                      {{ quickFilter.name }}
-                    </ListItemText>
-                  </ListItemLeft>
-                </ListItem>
-              }
-            </List>
-
-            <!-- The hover card of the design: the filters a quick filter holds, as chips, hanging under its row. Placed with
-                 Floating UI like the popovers, in the top layer so it is above the popover it comes from. It stays while the
-                 pointer is on it, and while the focus is on the row. -->
-            @if (details(); as shown) {
-              <div
-                #detailsCard
-                role="tooltip"
-                class="fixed m-0 flex max-w-72 flex-wrap gap-(--spacing-3xs) rounded-(--radius-lg) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) shadow-(--shadow-2)"
-                (mouseenter)="cancelHideDetails()"
-                (mouseleave)="scheduleHideDetails()">
-                @for (chip of chips(shown.quickFilter); track $index) {
-                  <span
-                    data-chip
-                    class="inline-flex items-center gap-(--spacing-3xs) rounded-(--radius-rounded) bg-(--bg-neutral-base) py-(--spacing-4xs) pr-(--spacing-2xs) pl-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
-                    <!-- the icon the application gives the aggregation in the filters custom JSON, as on the filter button -->
-                    @if (chip.icon) {
-                      <fa-icon [faClass]="chip.icon" class="shrink-0" />
-                    }
-                    {{ chip.text }}
-                  </span>
-                }
-              </div>
-            }
-          } @else {
-            <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
-            <div class="flex flex-col items-center gap-(--spacing-xs) px-(--spacing-md) py-(--spacing-lg) text-center">
-              <span class="inline-flex size-12 items-center justify-center rounded-(--radius-md) bg-(--bg-cyan-base-alt) text-(--font-cyan-muted)" aria-hidden="true">
-                <quick-filter-icon class="size-6 opacity-80" />
-              </span>
-              <span class="text-(length:--size-base) font-semibold text-(--font-neutral-base)">{{
-                (query() ? "quickFilters.noMatch" : "quickFilters.empty") | transloco
-              }}</span>
-              @if (!query()) {
-                <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ "quickFilters.emptyHint" | transloco }}</span>
-              }
-            </div>
-          }
-
-        </div>
+        <quick-filters-list class="flex-1" [searchable]="true" (applied)="apply($event)" />
         <PopoverResizeHandle edge="bottom" [label]="'quickFilters.resize' | transloco" (resizeStart)="onResizeStart()" />
       }
     </div>
@@ -33226,12 +34469,6 @@ var QuickFiltersComponent = class QuickFiltersComponent {
   `,
 		isInline: true,
 		dependencies: [
-			{
-				kind: "component",
-				type: FaIconComponent,
-				selector: "fa-icon, FaIcon",
-				inputs: ["faClass", "class"]
-			},
 			{
 				kind: "directive",
 				type: ButtonComponent,
@@ -33244,48 +34481,6 @@ var QuickFiltersComponent = class QuickFiltersComponent {
 					"size"
 				]
 			},
-			{
-				kind: "directive",
-				type: ListComponent,
-				selector: "List,list",
-				inputs: [
-					"class",
-					"variant",
-					"size"
-				],
-				exportAs: ["list"]
-			},
-			{
-				kind: "directive",
-				type: ListItemComponent,
-				selector: "ListItem,list-item,listitem",
-				inputs: [
-					"class",
-					"variant",
-					"size",
-					"depth"
-				],
-				exportAs: ["listItem"]
-			},
-			{
-				kind: "directive",
-				type: ListItemIconDirective,
-				selector: "ListItemIcon,list-item-icon,listitemicon",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: ListItemLeftDirective,
-				selector: "ListItemLeft,list-item-left,listitemleft",
-				inputs: ["class"]
-			},
-			{
-				kind: "component",
-				type: ListItemTextComponent,
-				selector: "ListItemText,list-item-text,listitemtext",
-				inputs: ["class", "subtext"],
-				exportAs: ["listItemText"]
-			},
 			{
 				kind: "directive",
 				type: PopoverDirective,
@@ -33314,17 +34509,23 @@ var QuickFiltersComponent = class QuickFiltersComponent {
 				],
 				outputs: ["resizeStart"]
 			},
-			{
-				kind: "component",
-				type: SearchInputComponent,
-				selector: "SearchInput:not([suggestions]), search-input:not([suggestions]), searchinput:not([suggestions])"
-			},
 			{
 				kind: "component",
 				type: QuickFilterIcon,
 				selector: "quick-filter, quick-filter-icon, QuickFilter, QuickFilterIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: QuickFiltersListComponent,
+				selector: "QuickFiltersList, quick-filters-list",
+				inputs: [
+					"searchable",
+					"deletable",
+					"emptyHint"
+				],
+				outputs: ["applied", "deleted"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -33344,23 +34545,16 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "QuickFilters, quick-filters",
 			imports: [
 				TranslocoPipe,
-				FaIconComponent,
 				ButtonComponent,
-				ListComponent,
-				ListItemComponent,
-				ListItemIconDirective,
-				ListItemLeftDirective,
-				ListItemTextComponent,
 				PopoverDirective,
 				PopoverResizeHandleComponent,
-				SearchInputComponent,
-				QuickFilterIcon
+				QuickFilterIcon,
+				QuickFiltersListComponent
 			],
 			providers: [provideTranslocoScope("quick-filters")],
 			host: {
 				class: "flex rounded-(--radius-2xl)",
-				"(focusout)": "closeOnFocusLeave($event)",
-				"(keydown.escape)": "hideDetails()"
+				"(focusout)": "closeOnFocusLeave($event)"
 			},
 			template: `
     <button
@@ -33394,87 +34588,7 @@ i0.ɵɵngDeclareClassMetadata({
              there is room under it. The list takes the height the popover is given. The popover has no padding above and under:
              the handles (12px each) are that space, and hug the edges. -->
         <PopoverResizeHandle edge="top" [label]="'quickFilters.resize' | transloco" (resizeStart)="onResizeStart()" />
-        <div class="flex min-h-0 flex-1 flex-col gap-(--spacing-xs)">
-          @if (quickFilters().length > 0) {
-            <SearchInput
-              size="md"
-              class="border-(--stroke-primary-light)"
-              [(value)]="query"
-              [placeholder]="'quickFilters.search' | transloco"
-              [aria-label]="'quickFilters.search' | transloco"
-              [clearLabel]="'quickFilters.clearSearch' | transloco" />
-          }
-
-          @if (filtered().length) {
-            <!-- The galactik List, as the design's List Item: a listbox of menu rows with an icon, the name and the number of
-                 filters. Choosing a row (click, Enter) applies it; the selection is not kept, the popover closes. Hovering a
-                 row lists the filters it holds in a card. -->
-            <List
-              variant="list-menu"
-              size="medium"
-              selectionMode="explicit"
-              class="-mx-1 min-h-0 flex-1 overflow-auto px-1"
-              [attr.aria-label]="'quickFilters.list' | transloco"
-              [value]="picked()"
-              (valueChange)="pick($event)">
-              @for (quickFilter of filtered(); track quickFilter.id) {
-                <ListItem
-                  [value]="quickFilter"
-                  [label]="quickFilter.name"
-                  (mouseenter)="showDetails(quickFilter, $event)"
-                  (mouseleave)="scheduleHideDetails()"
-                  (focusin)="showDetails(quickFilter, $event)"
-                  (focusout)="scheduleHideDetails()">
-                  <ListItemLeft>
-                    <ListItemIcon><quick-filter-icon /></ListItemIcon>
-                    <ListItemText
-                      [subtext]="(quickFilter.filters.length === 1 ? 'quickFilters.countOne' : 'quickFilters.countOther') | transloco: { count: quickFilter.filters.length }">
-                      {{ quickFilter.name }}
-                    </ListItemText>
-                  </ListItemLeft>
-                </ListItem>
-              }
-            </List>
-
-            <!-- The hover card of the design: the filters a quick filter holds, as chips, hanging under its row. Placed with
-                 Floating UI like the popovers, in the top layer so it is above the popover it comes from. It stays while the
-                 pointer is on it, and while the focus is on the row. -->
-            @if (details(); as shown) {
-              <div
-                #detailsCard
-                role="tooltip"
-                class="fixed m-0 flex max-w-72 flex-wrap gap-(--spacing-3xs) rounded-(--radius-lg) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-md) shadow-(--shadow-2)"
-                (mouseenter)="cancelHideDetails()"
-                (mouseleave)="scheduleHideDetails()">
-                @for (chip of chips(shown.quickFilter); track $index) {
-                  <span
-                    data-chip
-                    class="inline-flex items-center gap-(--spacing-3xs) rounded-(--radius-rounded) bg-(--bg-neutral-base) py-(--spacing-4xs) pr-(--spacing-2xs) pl-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-neutral-base)">
-                    <!-- the icon the application gives the aggregation in the filters custom JSON, as on the filter button -->
-                    @if (chip.icon) {
-                      <fa-icon [faClass]="chip.icon" class="shrink-0" />
-                    }
-                    {{ chip.text }}
-                  </span>
-                }
-              </div>
-            }
-          } @else {
-            <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
-            <div class="flex flex-col items-center gap-(--spacing-xs) px-(--spacing-md) py-(--spacing-lg) text-center">
-              <span class="inline-flex size-12 items-center justify-center rounded-(--radius-md) bg-(--bg-cyan-base-alt) text-(--font-cyan-muted)" aria-hidden="true">
-                <quick-filter-icon class="size-6 opacity-80" />
-              </span>
-              <span class="text-(length:--size-base) font-semibold text-(--font-neutral-base)">{{
-                (query() ? "quickFilters.noMatch" : "quickFilters.empty") | transloco
-              }}</span>
-              @if (!query()) {
-                <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ "quickFilters.emptyHint" | transloco }}</span>
-              }
-            </div>
-          }
-
-        </div>
+        <quick-filters-list class="flex-1" [searchable]="true" (applied)="apply($event)" />
         <PopoverResizeHandle edge="bottom" [label]="'quickFilters.resize' | transloco" (resizeStart)="onResizeStart()" />
       }
     </div>
@@ -33521,10 +34635,6 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["applied"]
 		}],
-		detailsCard: [{
-			type: i0.ViewChild,
-			args: ["detailsCard", { isSignal: true }]
-		}],
 		popover: [{
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => PopoverDirective), { isSignal: true }]
@@ -33965,6 +35075,115 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var PopupContentOutlet = class PopupContentOutlet {
+	container = inject(ViewContainerRef);
+	injector = inject(Injector);
+	popupContentOutlet = input.required(...ngDevMode ? [{ debugName: "popupContentOutlet" }] : /* istanbul ignore next */ []);
+	popupContentContext = input.required(...ngDevMode ? [{ debugName: "popupContentContext" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const template = this.popupContentOutlet();
+			const context = this.popupContentContext();
+			untracked(() => {
+				this.container.clear();
+				this.container.createEmbeddedView(template, context, { injector: this.injector });
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PopupContentOutlet,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: PopupContentOutlet,
+		isStandalone: true,
+		selector: "[popupContentOutlet]",
+		inputs: {
+			popupContentOutlet: {
+				classPropertyName: "popupContentOutlet",
+				publicName: "popupContentOutlet",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			popupContentContext: {
+				classPropertyName: "popupContentContext",
+				publicName: "popupContentContext",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PopupContentOutlet,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[popupContentOutlet]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		popupContentOutlet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupContentOutlet",
+				required: true
+			}]
+		}],
+		popupContentContext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupContentContext",
+				required: true
+			}]
+		}]
+	}
+});
+var SearchBoxPopupDirective = class SearchBoxPopupDirective {
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SearchBoxPopupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SearchBoxPopupDirective,
+		isStandalone: true,
+		selector: "ng-template[searchBoxPopup]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SearchBoxPopupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[searchBoxPopup]" }]
+	}]
+});
 let nextHintId = 0;
 const SEARCH_BOX_CATEGORIES_SORT = new InjectionToken("Order by preference for the categories of the suggestions", { factory: () => [
 	"full-text",
@@ -33998,10 +35217,20 @@ var SearchBoxComponent = class SearchBoxComponent {
 		...ngDevMode ? { debugName: "popupOffset" } : /* istanbul ignore next */ {},
 		transform: numberAttribute
 	});
+	popupFitScreen = input(void 0, {
+		...ngDevMode ? { debugName: "popupFitScreen" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
+	popupFlip = input(void 0, {
+		...ngDevMode ? { debugName: "popupFlip" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
 	placeholderOverride = input(void 0, {
 		...ngDevMode ? { debugName: "placeholderOverride" } : /* istanbul ignore next */ {},
 		alias: "placeholder"
 	});
+	suggestionsProvider = input(void 0, ...ngDevMode ? [{ debugName: "suggestionsProvider" }] : /* istanbul ignore next */ []);
+	customPopup = contentChild(SearchBoxPopupDirective, ...ngDevMode ? [{ debugName: "customPopup" }] : /* istanbul ignore next */ []);
 	searched = output();
 	debounced = output();
 	saved = output();
@@ -34043,9 +35272,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 	savedSearches = computed(() => this.userSettingsStore.savedSearches() ?? [], ...ngDevMode ? [{ debugName: "savedSearches" }] : /* istanbul ignore next */ []);
 	savedTexts = computed(() => new Set(this.savedSearches().map((s) => s.display || s.label)), ...ngDevMode ? [{ debugName: "savedTexts" }] : /* istanbul ignore next */ []);
 	inline = computed(() => this.popup() === "inline", ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	fitScreen = computed(() => this.popupFitScreen() ?? (this.inline() && this.size() === "hero"), ...ngDevMode ? [{ debugName: "fitScreen" }] : /* istanbul ignore next */ []);
+	flip = computed(() => this.popupFlip() ?? this.size() !== "hero", ...ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []);
+	floating = computed(() => !this.inline() || this.fitScreen(), ...ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []);
 	barClass = computed(() => this.size() === "hero" ? "w-full" : "w-full gap-(--spacing-3xs)! pe-(--spacing-3xs)", ...ngDevMode ? [{ debugName: "barClass" }] : /* istanbul ignore next */ []);
-	popupClass = computed(() => cn("flex flex-col transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] starting:-translate-y-1.5 starting:opacity-0 motion-reduce:transition-none", this.inline() ? "absolute inset-x-0 top-full z-20 mx-auto mt-(--spacing-2xs) w-[calc(100%-74px)] gap-(--spacing-3xs)" : "fixed z-20 gap-(--spacing-2xs) overflow-hidden rounded-(--radius-xl) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-xs) shadow-(--shadow-2)"), ...ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []);
-	listClass = computed(() => cn("h-68 scroll-pt-8 overflow-auto overscroll-contain text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus)", this.inline() ? "bg-transparent" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []);
+	popupClass = computed(() => cn("flex flex-col transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] starting:-translate-y-1.5 starting:opacity-0 motion-reduce:transition-none", this.inline() ? this.fitScreen() ? "fixed z-20 max-h-(--search-box-max-h) w-[calc(var(--search-box-w,100vw)-74px)] gap-(--spacing-3xs)" : "absolute inset-x-0 top-full z-20 mx-auto mt-(--spacing-2xs) w-[calc(100%-74px)] gap-(--spacing-3xs)" : "fixed z-20 gap-(--spacing-2xs) overflow-hidden rounded-(--radius-xl) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-xs) shadow-(--shadow-2)", !this.inline() && this.fitScreen() && "max-h-(--search-box-max-h)"), ...ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []);
+	listClass = computed(() => cn("h-68 scroll-pt-8 overflow-auto overscroll-contain text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus)", this.fitScreen() && "min-h-0 shrink", this.inline() ? "bg-transparent" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []);
 	rowClass = computed(() => cn("group/row data-list-item flex min-h-9 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) px-(--spacing-2xs) py-(--spacing-3xs) text-left text-(length:--size-base) text-(--font-primary-muted) transition-[background-color] duration-100 ease-[ease] hover:bg-(--bg-primary-lighter) hover:outline-none focus-visible:bg-(--bg-primary-lighter) aria-selected:text-(--font-primary-dark) data-[active=true]:bg-(--bg-primary-lighter) motion-reduce:transition-none"), ...ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []);
 	titleClass = computed(() => cn("sticky top-0 px-(--spacing-2xs) pt-(--spacing-xs) pb-(--spacing-3xs) text-(length:--size-xs) font-semibold tracking-wider text-(--font-primary-muted) uppercase", this.inline() ? "bg-(--layer-page-layer,var(--bg-neutral-base))" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []);
 	hasFilters = computed(() => {
@@ -34064,9 +35296,10 @@ var SearchBoxComponent = class SearchBoxComponent {
 		params: () => ({
 			text: this.text(),
 			wasSearchClicked: this.wasSearchClicked(),
-			autocomplete: this.autocomplete()
+			autocomplete: this.autocomplete(),
+			provider: this.suggestionsProvider()
 		}),
-		loader: async ({ params: { text, autocomplete } }) => this.fetchSuggestions({
+		loader: async ({ params: { text, autocomplete, provider } }) => provider ? this.fetchFromProvider(provider, text) : this.fetchSuggestions({
 			text,
 			autocomplete
 		})
@@ -34081,14 +35314,33 @@ var SearchBoxComponent = class SearchBoxComponent {
 		}
 		return isLoading ? this.previousSuggestions : [];
 	}, ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+	popupTemplateContext = { $implicit: {
+		text: this.text,
+		typed: this.typed,
+		suggestions: this.suggestions,
+		loading: this.suggestionsResource.isLoading,
+		savedSearches: this.savedSearches,
+		navigatedSinceTyping: this.navigatedSinceTyping,
+		commit: (text) => this.commitText(text),
+		preview: (text) => this.previewSuggestion(text),
+		openSaved: (saved) => this.openSaved(saved),
+		isSaved: (text) => this.savedTexts().has(text),
+		toggleSaved: (text) => this.toggleSavedText(text),
+		collapse: () => this.collapse(),
+		focusField: () => this.focusField()
+	} };
 	inputListenersAttached = false;
 	constructor() {
 		this.destroyRef.onDestroy(() => this.field().reset());
 		injectFloatingPanel({
-			panel: () => this.inline() ? null : this.popupCard()?.nativeElement,
+			panel: () => this.floating() ? this.popupCard()?.nativeElement : null,
 			anchor: () => this.barElement()?.nativeElement,
-			offset: () => this.popupOffset(),
-			matchAnchorWidth: true
+			placement: () => this.inline() ? "bottom" : "bottom-start",
+			offset: () => this.inline() ? 8 : this.popupOffset(),
+			flip: () => this.flip(),
+			matchAnchorWidth: () => !this.inline(),
+			anchorWidthVariable: "--search-box-w",
+			maxHeightVariable: "--search-box-max-h"
 		});
 		this.eventManager.addEventListener(this.host.nativeElement, "click", () => this.wasSearchClicked.set(true));
 		let firstText = true;
@@ -34135,7 +35387,15 @@ var SearchBoxComponent = class SearchBoxComponent {
 			const onInput = () => this.navigatedSinceTyping.set(false);
 			element.addEventListener("keydown", onKeydown);
 			element.addEventListener("input", onInput);
+			const activeObserver = new MutationObserver(() => {
+				if (this.customPopup()) this.revealActiveOption();
+			});
+			activeObserver.observe(element, {
+				attributes: true,
+				attributeFilter: ["aria-activedescendant"]
+			});
 			this.destroyRef.onDestroy(() => {
+				activeObserver.disconnect();
 				element.removeEventListener("keydown", onKeydown);
 				element.removeEventListener("input", onInput);
 			});
@@ -34166,6 +35426,10 @@ var SearchBoxComponent = class SearchBoxComponent {
 		if (this.host.nativeElement.contains(next)) return;
 		this.collapse();
 	}
+	revealActiveOption() {
+		const id = this.inputComponent()?.searchInput().nativeElement.getAttribute("aria-activedescendant");
+		if (id) document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+	}
 	collapse() {
 		this.combobox()?.expanded.set(false);
 	}
@@ -34194,9 +35458,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 	commitSuggestion(suggestion, event) {
 		if (!suggestion.display) return;
 		const text = suggestion.display;
+		this.commitText(text, event.currentTarget?.getAttribute("data-text") || text);
+	}
+	commitText(text, searched = text) {
 		this.searchInputText.set(text);
 		this.collapse();
-		this.runSearch(event.currentTarget?.getAttribute("data-text") || text);
+		this.runSearch(searched);
 	}
 	openSaved(saved) {
 		const queryParams = savedSearchQueryParams(saved);
@@ -34328,6 +35595,14 @@ var SearchBoxComponent = class SearchBoxComponent {
 		}
 		return category;
 	}
+	async fetchFromProvider(provider, text) {
+		try {
+			return await provider(text);
+		} catch (err) {
+			error("Error getting suggestions from the suggestions provider", err);
+			return [];
+		}
+	}
 	fetchSuggestions = async ({ text, autocomplete = 3 }) => {
 		const fromUserSettings = this.autocompleteService.getFromUserSettingsForText(text, autocomplete);
 		if (!text) return fromUserSettings;
@@ -34405,6 +35680,20 @@ var SearchBoxComponent = class SearchBoxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			popupFitScreen: {
+				classPropertyName: "popupFitScreen",
+				publicName: "popupFitScreen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			popupFlip: {
+				classPropertyName: "popupFlip",
+				publicName: "popupFlip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholderOverride: {
 				classPropertyName: "placeholderOverride",
 				publicName: "placeholder",
@@ -34412,6 +35701,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			suggestionsProvider: {
+				classPropertyName: "suggestionsProvider",
+				publicName: "suggestionsProvider",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			searchInputText: {
 				classPropertyName: "searchInputText",
 				publicName: "searchInputText",
@@ -34436,6 +35732,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 			classAttribute: "relative block"
 		},
 		providers: [provideTranslocoScope("search-box"), provideTranslocoScope("searches")],
+		queries: [{
+			propertyName: "customPopup",
+			first: true,
+			predicate: SearchBoxPopupDirective,
+			descendants: true,
+			isSignal: true
+		}],
 		viewQueries: [
 			{
 				propertyName: "inputComponent",
@@ -34517,6 +35820,10 @@ var SearchBoxComponent = class SearchBoxComponent {
                page, where it takes the place of the filters) or a floating card (the results header). It fades and slides in
                once, when the popup opens (starting: gives the transition its first frame). -->
           <div #popupCard [class]="popupClass()" (mousedown)="$event.preventDefault()">
+            @if (customPopup(); as custom) {
+              <!-- The application's own content (searchBoxPopup): the card, its placement and its opening stay the search box's. -->
+              <ng-container [popupContentOutlet]="custom.template" [popupContentContext]="popupTemplateContext" />
+            } @else {
             <!-- The tabs hold no panel of their own: only one list exists at a time, since two listboxes would both
                  register with the combobox. The div below is the one tabpanel, named by the selected tab. -->
             <Tabs
@@ -34540,7 +35847,9 @@ var SearchBoxComponent = class SearchBoxComponent {
               </TabList>
             </Tabs>
 
-            <div role="tabpanel" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
+            <!-- A flex column with min-h-0, so that the list inside can shrink and scroll when the popup is capped (popupFitScreen):
+                 a plain block would keep the height of its list as its minimum, and the card would only cut the bottom off. -->
+            <div role="tabpanel" class="flex min-h-0 flex-col" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
               @if (tab() === "saved") {
                 <ul
                   #savedList
@@ -34571,7 +35880,14 @@ var SearchBoxComponent = class SearchBoxComponent {
                         (click)="removeSaved(saved, $event)">
                         <star-icon solid class="size-(--icon-sm)" />
                       </span>
-                      <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">{{ saved.display || saved.label }}</p>
+                      <p
+                        class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                        truncated
+                        #cutSaved="truncated"
+                        [tooltip]="saved.display || saved.label || ''"
+                        [tooltipDisabled]="!cutSaved.isTruncated()">
+                        {{ saved.display || saved.label }}
+                      </p>
                     </li>
                   } @empty {
                     <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
@@ -34642,7 +35958,12 @@ var SearchBoxComponent = class SearchBoxComponent {
                           </span>
                         </span>
 
-                        <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">
+                        <p
+                          class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                          truncated
+                          #cutSuggest="truncated"
+                          [tooltip]="suggest.display ?? ''"
+                          [tooltipDisabled]="!cutSuggest.isTruncated()">
                           @for (chunk of suggest.display! | highlightWord: text() : 10; track $index) {
                             <span [class]="{ 'font-semibold': chunk.match }">{{ chunk.text }}</span>
                           }
@@ -34663,6 +35984,7 @@ var SearchBoxComponent = class SearchBoxComponent {
                 </ul>
               }
             </div>
+            }
           </div>
         </ng-template>
       }
@@ -34685,6 +36007,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 				],
 				exportAs: ["ngComponentOutlet"]
 			},
+			{
+				kind: "directive",
+				type: PopupContentOutlet,
+				selector: "[popupContentOutlet]",
+				inputs: ["popupContentOutlet", "popupContentContext"]
+			},
 			{
 				kind: "directive",
 				type: FormField,
@@ -34805,6 +36133,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 				],
 				exportAs: ["tooltip"]
 			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "component",
 				type: SavedSearchPopover,
@@ -34836,6 +36171,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "SearchBox, search-box",
 			imports: [
 				NgComponentOutlet,
+				PopupContentOutlet,
 				FormField,
 				FormRoot,
 				ComboboxPopup,
@@ -34850,6 +36186,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TabListComponent,
 				TabComponent,
 				TooltipDirective,
+				TruncatedDirective,
 				SavedSearchPopover
 			],
 			providers: [provideTranslocoScope("search-box"), provideTranslocoScope("searches")],
@@ -34901,6 +36238,10 @@ i0.ɵɵngDeclareClassMetadata({
                page, where it takes the place of the filters) or a floating card (the results header). It fades and slides in
                once, when the popup opens (starting: gives the transition its first frame). -->
           <div #popupCard [class]="popupClass()" (mousedown)="$event.preventDefault()">
+            @if (customPopup(); as custom) {
+              <!-- The application's own content (searchBoxPopup): the card, its placement and its opening stay the search box's. -->
+              <ng-container [popupContentOutlet]="custom.template" [popupContentContext]="popupTemplateContext" />
+            } @else {
             <!-- The tabs hold no panel of their own: only one list exists at a time, since two listboxes would both
                  register with the combobox. The div below is the one tabpanel, named by the selected tab. -->
             <Tabs
@@ -34924,7 +36265,9 @@ i0.ɵɵngDeclareClassMetadata({
               </TabList>
             </Tabs>
 
-            <div role="tabpanel" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
+            <!-- A flex column with min-h-0, so that the list inside can shrink and scroll when the popup is capped (popupFitScreen):
+                 a plain block would keep the height of its list as its minimum, and the card would only cut the bottom off. -->
+            <div role="tabpanel" class="flex min-h-0 flex-col" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
               @if (tab() === "saved") {
                 <ul
                   #savedList
@@ -34955,7 +36298,14 @@ i0.ɵɵngDeclareClassMetadata({
                         (click)="removeSaved(saved, $event)">
                         <star-icon solid class="size-(--icon-sm)" />
                       </span>
-                      <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">{{ saved.display || saved.label }}</p>
+                      <p
+                        class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                        truncated
+                        #cutSaved="truncated"
+                        [tooltip]="saved.display || saved.label || ''"
+                        [tooltipDisabled]="!cutSaved.isTruncated()">
+                        {{ saved.display || saved.label }}
+                      </p>
                     </li>
                   } @empty {
                     <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
@@ -35026,7 +36376,12 @@ i0.ɵɵngDeclareClassMetadata({
                           </span>
                         </span>
 
-                        <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">
+                        <p
+                          class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                          truncated
+                          #cutSuggest="truncated"
+                          [tooltip]="suggest.display ?? ''"
+                          [tooltipDisabled]="!cutSuggest.isTruncated()">
                           @for (chunk of suggest.display! | highlightWord: text() : 10; track $index) {
                             <span [class]="{ 'font-semibold': chunk.match }">{{ chunk.text }}</span>
                           }
@@ -35047,6 +36402,7 @@ i0.ɵɵngDeclareClassMetadata({
                 </ul>
               }
             </div>
+            }
           </div>
         </ng-template>
       }
@@ -35097,6 +36453,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		popupFitScreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupFitScreen",
+				required: false
+			}]
+		}],
+		popupFlip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupFlip",
+				required: false
+			}]
+		}],
 		placeholderOverride: [{
 			type: i0.Input,
 			args: [{
@@ -35105,6 +36477,18 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		suggestionsProvider: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suggestionsProvider",
+				required: false
+			}]
+		}],
+		customPopup: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => SearchBoxPopupDirective), { isSignal: true }]
+		}],
 		searched: [{
 			type: i0.Output,
 			args: ["searched"]
@@ -37783,6 +39167,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, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, HistoryPanelComponent, HistoryTitleMarqueeDirective, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, QuickFiltersComponent, 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, 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, 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, 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, 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, LocalizedNumberPipe, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, 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, 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