@sinequa/atomic-angular 2.13.0 → 2.14.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, finalize, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, BuildingIcon, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, ClockIcon, CollapseIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, ExpandIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, 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, LinkIcon, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PanelRightIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PopoverResizeHandleComponent, PresentationIcon, QuestionCircleIcon, QuickFilterIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchBarSuggestionsComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, BuildingIcon, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, ClockIcon, CollapseIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, ExpandIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileMagnifyingGlassIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilesIcon, FilterIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, GripVerticalIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, LinkIcon, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PanelRightIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PopoverResizeHandleComponent, PresentationIcon, QuestionCircleIcon, QuickFilterIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchBarSuggestionsComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwipeActionComponent, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, injectKeyboardAvailable, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@ngrx-toolkit/core";
 import { getState, patchState, signalStore, signalStoreFeature, type, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
@@ -4755,7 +4755,7 @@ var DocumentLocatorComponent = class DocumentLocatorComponent {
 				transformFunction: null
 			}
 		},
-		host: { classAttribute: "flex items-center grow gap-2 overflow-hidden" },
+		host: { classAttribute: "relative flex items-center grow gap-2 overflow-hidden" },
 		viewQueries: [{
 			propertyName: "shadow",
 			first: true,
@@ -4773,7 +4773,9 @@ var DocumentLocatorComponent = class DocumentLocatorComponent {
 		}],
 		ngImport: i0,
 		template: `
-    <!-- Renders all segment hidden to user to compute width -->
+    <!-- Renders all segment hidden to user to compute width. Absolute against the host, which is relative and clips
+         it: positioned against some ancestor further up, its full width overflowed the page and gave it a horizontal
+         scrollbar. -->
     <div #shadowRender class="pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-1">
       @for (segment of locationSegments(); track $index) {
         <span class="whitespace-nowrap">{{ segment }}</span>
@@ -4788,7 +4790,9 @@ var DocumentLocatorComponent = class DocumentLocatorComponent {
 
     <chevron-right-icon />
 
-    <div #documentLocator class="flex grow items-center gap-1">
+    <!-- min-w-0: as a flex item its width otherwise never went below its content, so its clientWidth, which decides
+         how many segments fit, did not follow a narrower host and the segments never folded into the menu. -->
+    <div #documentLocator class="flex min-w-0 grow items-center gap-1">
       @for (segment of visibleSegments(); track $index) {
         <a link size="md" (click)="navigateToSegment($index)">{{segment }}</a>
 
@@ -4915,7 +4919,9 @@ i0.ɵɵngDeclareClassMetadata({
 				MenuItemComponent
 			],
 			template: `
-    <!-- Renders all segment hidden to user to compute width -->
+    <!-- Renders all segment hidden to user to compute width. Absolute against the host, which is relative and clips
+         it: positioned against some ancestor further up, its full width overflowed the page and gave it a horizontal
+         scrollbar. -->
     <div #shadowRender class="pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-1">
       @for (segment of locationSegments(); track $index) {
         <span class="whitespace-nowrap">{{ segment }}</span>
@@ -4930,7 +4936,9 @@ i0.ɵɵngDeclareClassMetadata({
 
     <chevron-right-icon />
 
-    <div #documentLocator class="flex grow items-center gap-1">
+    <!-- min-w-0: as a flex item its width otherwise never went below its content, so its clientWidth, which decides
+         how many segments fit, did not follow a narrower host and the segments never folded into the menu. -->
+    <div #documentLocator class="flex min-w-0 grow items-center gap-1">
       @for (segment of visibleSegments(); track $index) {
         <a link size="md" (click)="navigateToSegment($index)">{{segment }}</a>
 
@@ -4960,7 +4968,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			host: { class: "flex items-center grow gap-2 overflow-hidden" }
+			host: { class: "relative flex items-center grow gap-2 overflow-hidden" }
 		}]
 	}],
 	ctorParameters: () => [],
@@ -10272,8 +10280,205 @@ function injectSimilarDocumentsState(article, documents) {
 		hasContent: computed(() => similarDocuments().length > 0, ...ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ [])
 	};
 }
+const STEP_BUTTON = "inline-flex size-8 shrink-0 cursor-pointer touch-manipulation items-center justify-center rounded-(--radius-xs) border-0 bg-transparent p-0 text-(--font-primary-muted) transition-[background-color,color] duration-120 ease-[ease] motion-reduce:transition-none hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus)";
+var OccurrenceNavigatorComponent = class OccurrenceNavigatorComponent {
+	active = input(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	index = input(0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	total = input(0, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	previousLabel = input("previous occurrence", ...ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input("next occurrence", ...ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	previous = output();
+	next = output();
+	stepButton = STEP_BUTTON;
+	step(event, direction) {
+		event.stopPropagation();
+		if (direction === "previous") this.previous.emit();
+		else this.next.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OccurrenceNavigatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: OccurrenceNavigatorComponent,
+		isStandalone: true,
+		selector: "occurrence-navigator, OccurrenceNavigator",
+		inputs: {
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			index: {
+				classPropertyName: "index",
+				publicName: "index",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			total: {
+				classPropertyName: "total",
+				publicName: "total",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			previous: "previous",
+			next: "next"
+		},
+		host: { classAttribute: "flex shrink-0 items-center gap-2 tabular-nums" },
+		ngImport: i0,
+		template: `
+    @if (active()) {
+      <button type="button" [class]="stepButton" [attr.aria-label]="previousLabel()" (click)="step($event, 'previous')">
+        <chevron-left />
+      </button>
+
+      <span class="min-w-12 text-center">{{ index() }} / {{ total() }}</span>
+
+      <button type="button" [class]="stepButton" [attr.aria-label]="nextLabel()" (click)="step($event, 'next')">
+        <chevron-right />
+      </button>
+    } @else {
+      {{ total() }}
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ChevronLeftIcon,
+			selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
+			inputs: ["class"]
+		}, {
+			kind: "component",
+			type: ChevronRightIcon,
+			selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
+			inputs: ["class"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OccurrenceNavigatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "occurrence-navigator, OccurrenceNavigator",
+			imports: [ChevronLeftIcon, ChevronRightIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "flex shrink-0 items-center gap-2 tabular-nums" },
+			template: `
+    @if (active()) {
+      <button type="button" [class]="stepButton" [attr.aria-label]="previousLabel()" (click)="step($event, 'previous')">
+        <chevron-left />
+      </button>
+
+      <span class="min-w-12 text-center">{{ index() }} / {{ total() }}</span>
+
+      <button type="button" [class]="stepButton" [attr.aria-label]="nextLabel()" (click)="step($event, 'next')">
+        <chevron-right />
+      </button>
+    } @else {
+      {{ total() }}
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}],
+		total: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "total",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		previous: [{
+			type: i0.Output,
+			args: ["previous"]
+		}],
+		next: [{
+			type: i0.Output,
+			args: ["next"]
+		}]
+	}
+});
+function injectRowActivation(active) {
+	const isTouch = inject(BreakpointObserverService).isTouch;
+	return {
+		enter: (value) => {
+			if (!isTouch()) active().set(value);
+		},
+		leave: () => {
+			if (!isTouch()) active().set(void 0);
+		},
+		activate: (value) => {
+			if (isTouch()) active().set(value);
+		}
+	};
+}
 var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
 	state = input.required(...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	row = injectRowActivation(() => this.state().hovering);
 	expandedCategories = signal({}, ...ngDevMode ? [{ debugName: "expandedCategories" }] : /* istanbul ignore next */ []);
 	isExpanded(entity) {
 		return this.expandedCategories()[entity] ?? false;
@@ -10324,12 +10529,14 @@ var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
 		} },
 		ngImport: i0,
 		template: `
+    @if (state().hasContent()) {
     <!-- Legend, once for the whole tree — not repeated per row (aria-hidden: sighted-keyboard-user
-         hint only, the buttons on each row already carry the real accessible names). -->
+         hint only, the buttons on each row already carry the real accessible names). Hidden on a touch
+         screen: there is no keyboard to press the keys on. -->
     <div
       data-name="shortcuts-legend"
       aria-hidden="true"
-      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base)">
+      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base) pointer-coarse:hidden">
       <KbdGroup class="text-[10px]">
         <kbd size="xs" class="text-[10px]">Ctrl</kbd>
         <kbd size="xs" class="text-[10px]"><arrow-left class="size-2.5" /></kbd>
@@ -10354,7 +10561,7 @@ var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
             [attr.aria-label]="categoryLabel"
             [expanded]="isExpanded(highlight.entity)"
             (expandedChange)="setExpanded(highlight.entity, $event)"
-            class="text-(length:--size-base) leading-(--line-height-3) font-semibold capitalize">
+            class="min-h-10 text-(length:--size-lg) leading-(--line-height-3) font-semibold capitalize">
             <TreeItemExpander />
             <span class="inline-block size-3 shrink-0 rounded-full" [style.background]="highlight.color"></span>
             {{ categoryLabel }}
@@ -10371,30 +10578,25 @@ var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
                 [value]="highlight.entity + ':' + data.value"
                 [label]="data.display"
                 [attr.aria-label]="data.display"
-                class="text-(length:--size-base) leading-(--line-height-3) select-none"
-                (mouseenter)="state().hovering.set(data.value)"
-                (mouseleave)="state().hovering.set(undefined)"
+                class="min-h-10 text-(length:--size-lg) leading-(--line-height-3) select-none"
+                (mouseenter)="row.enter(data.value)"
+                (mouseleave)="row.leave()"
+                (click)="row.activate(data.value)"
                 (focus)="focusedLeaf.set(data.value)"
                 (blur)="onLeafBlur(data.value)"
                 (keydown.control.arrowleft)="onNavigateKey($event, highlight.entity, data, 'prev')"
                 (keydown.control.arrowright)="onNavigateKey($event, highlight.entity, data, 'next')">
                 {{ data.display }}
 
-                <span class="ml-auto flex shrink-0 items-center gap-2 text-(length:--size-xs)">
-                  @if (isLeafActive(data.value)) {
-                    <button class="hover:scale-125" aria-label="previous entity" (click)="state().navigatePrev(highlight.entity, data)">
-                      <chevron-left />
-                    </button>
-
-                    <span>{{ currentIndex(data) }} / {{ state().total(highlight.entity, data) }}</span>
-
-                    <button class="hover:scale-125" aria-label="next entity" (click)="state().navigateNext(highlight.entity, data)">
-                      <chevron-right />
-                    </button>
-                  } @else {
-                    {{ state().total(highlight.entity, data) }}
-                  }
-                </span>
+                <occurrence-navigator
+                  class="ml-auto text-(length:--size-sm)"
+                  [active]="isLeafActive(data.value)"
+                  [index]="currentIndex(data)"
+                  [total]="state().total(highlight.entity, data)"
+                  previousLabel="previous entity"
+                  nextLabel="next entity"
+                  (previous)="state().navigatePrev(highlight.entity, data)"
+                  (next)="state().navigateNext(highlight.entity, data)" />
               </TreeItem>
             }
             </div>
@@ -10402,6 +10604,14 @@ var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
         }
       }
     </Tree>
+    } @else {
+      <!-- Not reached through the tabs (the Entities tab only exists once a category has a value), but a host may mount it on its own. -->
+      <list-panel-empty color="pink">
+        <building-icon listPanelEmptyIcon />
+        {{ 'drawers.noEntities' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noEntitiesHint' | transloco }}</p>
+      </list-panel-empty>
+    }
   `,
 		isInline: true,
 		dependencies: [
@@ -10444,27 +10654,40 @@ var ArticleEntitiesTabPanel = class ArticleEntitiesTabPanel {
 			},
 			{
 				kind: "component",
-				type: ChevronRightIcon,
-				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
+				type: ArrowLeftIcon,
+				selector: "arrow-left, arrow-left-icon, ArrowLeft, ArrowLeftIcon",
 				inputs: ["class"]
 			},
 			{
 				kind: "component",
-				type: ChevronLeftIcon,
-				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
+				type: ArrowRightIcon,
+				selector: "arrow-right, arrow-right-icon, ArrowRight, ArrowRightIcon",
 				inputs: ["class"]
 			},
 			{
 				kind: "component",
-				type: ArrowLeftIcon,
-				selector: "arrow-left, arrow-left-icon, ArrowLeft, ArrowLeftIcon",
+				type: BuildingIcon,
+				selector: "building, building-icon, Building, BuildingIcon",
 				inputs: ["class"]
 			},
 			{
 				kind: "component",
-				type: ArrowRightIcon,
-				selector: "arrow-right, arrow-right-icon, ArrowRight, ArrowRightIcon",
-				inputs: ["class"]
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: OccurrenceNavigatorComponent,
+				selector: "occurrence-navigator, OccurrenceNavigator",
+				inputs: [
+					"active",
+					"index",
+					"total",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["previous", "next"]
 			},
 			{
 				kind: "pipe",
@@ -10491,18 +10714,21 @@ i0.ɵɵngDeclareClassMetadata({
 				TreeItemExpanderComponent,
 				KbdComponent,
 				KbdGroupComponent,
-				ChevronRightIcon,
-				ChevronLeftIcon,
 				ArrowLeftIcon,
-				ArrowRightIcon
+				ArrowRightIcon,
+				BuildingIcon,
+				ListPanelEmptyComponent,
+				OccurrenceNavigatorComponent
 			],
 			template: `
+    @if (state().hasContent()) {
     <!-- Legend, once for the whole tree — not repeated per row (aria-hidden: sighted-keyboard-user
-         hint only, the buttons on each row already carry the real accessible names). -->
+         hint only, the buttons on each row already carry the real accessible names). Hidden on a touch
+         screen: there is no keyboard to press the keys on. -->
     <div
       data-name="shortcuts-legend"
       aria-hidden="true"
-      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base)">
+      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base) pointer-coarse:hidden">
       <KbdGroup class="text-[10px]">
         <kbd size="xs" class="text-[10px]">Ctrl</kbd>
         <kbd size="xs" class="text-[10px]"><arrow-left class="size-2.5" /></kbd>
@@ -10527,7 +10753,7 @@ i0.ɵɵngDeclareClassMetadata({
             [attr.aria-label]="categoryLabel"
             [expanded]="isExpanded(highlight.entity)"
             (expandedChange)="setExpanded(highlight.entity, $event)"
-            class="text-(length:--size-base) leading-(--line-height-3) font-semibold capitalize">
+            class="min-h-10 text-(length:--size-lg) leading-(--line-height-3) font-semibold capitalize">
             <TreeItemExpander />
             <span class="inline-block size-3 shrink-0 rounded-full" [style.background]="highlight.color"></span>
             {{ categoryLabel }}
@@ -10544,30 +10770,25 @@ i0.ɵɵngDeclareClassMetadata({
                 [value]="highlight.entity + ':' + data.value"
                 [label]="data.display"
                 [attr.aria-label]="data.display"
-                class="text-(length:--size-base) leading-(--line-height-3) select-none"
-                (mouseenter)="state().hovering.set(data.value)"
-                (mouseleave)="state().hovering.set(undefined)"
+                class="min-h-10 text-(length:--size-lg) leading-(--line-height-3) select-none"
+                (mouseenter)="row.enter(data.value)"
+                (mouseleave)="row.leave()"
+                (click)="row.activate(data.value)"
                 (focus)="focusedLeaf.set(data.value)"
                 (blur)="onLeafBlur(data.value)"
                 (keydown.control.arrowleft)="onNavigateKey($event, highlight.entity, data, 'prev')"
                 (keydown.control.arrowright)="onNavigateKey($event, highlight.entity, data, 'next')">
                 {{ data.display }}
 
-                <span class="ml-auto flex shrink-0 items-center gap-2 text-(length:--size-xs)">
-                  @if (isLeafActive(data.value)) {
-                    <button class="hover:scale-125" aria-label="previous entity" (click)="state().navigatePrev(highlight.entity, data)">
-                      <chevron-left />
-                    </button>
-
-                    <span>{{ currentIndex(data) }} / {{ state().total(highlight.entity, data) }}</span>
-
-                    <button class="hover:scale-125" aria-label="next entity" (click)="state().navigateNext(highlight.entity, data)">
-                      <chevron-right />
-                    </button>
-                  } @else {
-                    {{ state().total(highlight.entity, data) }}
-                  }
-                </span>
+                <occurrence-navigator
+                  class="ml-auto text-(length:--size-sm)"
+                  [active]="isLeafActive(data.value)"
+                  [index]="currentIndex(data)"
+                  [total]="state().total(highlight.entity, data)"
+                  previousLabel="previous entity"
+                  nextLabel="next entity"
+                  (previous)="state().navigatePrev(highlight.entity, data)"
+                  (next)="state().navigateNext(highlight.entity, data)" />
               </TreeItem>
             }
             </div>
@@ -10575,6 +10796,14 @@ i0.ɵɵngDeclareClassMetadata({
         }
       }
     </Tree>
+    } @else {
+      <!-- Not reached through the tabs (the Entities tab only exists once a category has a value), but a host may mount it on its own. -->
+      <list-panel-empty color="pink">
+        <building-icon listPanelEmptyIcon />
+        {{ 'drawers.noEntities' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noEntitiesHint' | transloco }}</p>
+      </list-panel-empty>
+    }
   `
 		}]
 	}],
@@ -10616,6 +10845,13 @@ var ArticleExtractsTabPanel = class ArticleExtractsTabPanel {
       <div class="flex h-32 items-center justify-center">
         <loading-dots size="md" class="text-(--font-primary-base)" [label]="'drawers.loadingExtracts' | transloco" />
       </div>
+    } @else if (state().extracts().length === 0) {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint line. -->
+      <list-panel-empty color="green">
+        <file-text-icon listPanelEmptyIcon />
+        {{ 'drawers.noRelevantExtracts' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noRelevantExtractsHint' | transloco }}</p>
+      </list-panel-empty>
     } @else {
       <List class="gap-1" selectionMode="explicit">
         @for (extract of state().extracts(); track extract.id) {
@@ -10627,16 +10863,18 @@ var ArticleExtractsTabPanel = class ArticleExtractsTabPanel {
             (keydown.space)="state().scrollTo(undefined, extract.textIndex, true)">
             <p class="line-clamp-5 text-(length:--size-base) leading-(--line-height-3)" [innerHTML]="extract.text"></p>
           </ListItem>
-        } @empty {
-          <!-- div, not p: a <p> picks up the app's own paragraph typography (font-size, margin),
-               drifting from the row size above it — same fix as article-entities-tab-panel.ts. -->
-          <div class="px-3 py-1 text-(length:--size-base) text-(--font-neutral-secondary) italic">{{ 'drawers.noRelevantExtracts' | transloco }}</div>
         }
       </List>
     }
   `,
 		isInline: true,
 		dependencies: [
+			{
+				kind: "component",
+				type: FileTextIcon,
+				selector: "file-text, file-text-icon, FileText, FileTextIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "directive",
 				type: ListComponent,
@@ -10660,6 +10898,12 @@ var ArticleExtractsTabPanel = class ArticleExtractsTabPanel {
 				],
 				exportAs: ["listItem"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: LoadingDotsComponent,
@@ -10685,8 +10929,10 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "article-extracts-tab-panel, ArticleExtractsTabPanel, articleextractstabpanel",
 			imports: [
 				TranslocoPipe,
+				FileTextIcon,
 				ListComponent,
 				ListItemComponent,
+				ListPanelEmptyComponent,
 				LoadingDotsComponent
 			],
 			template: `
@@ -10694,6 +10940,13 @@ i0.ɵɵngDeclareClassMetadata({
       <div class="flex h-32 items-center justify-center">
         <loading-dots size="md" class="text-(--font-primary-base)" [label]="'drawers.loadingExtracts' | transloco" />
       </div>
+    } @else if (state().extracts().length === 0) {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint line. -->
+      <list-panel-empty color="green">
+        <file-text-icon listPanelEmptyIcon />
+        {{ 'drawers.noRelevantExtracts' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noRelevantExtractsHint' | transloco }}</p>
+      </list-panel-empty>
     } @else {
       <List class="gap-1" selectionMode="explicit">
         @for (extract of state().extracts(); track extract.id) {
@@ -10705,10 +10958,6 @@ i0.ɵɵngDeclareClassMetadata({
             (keydown.space)="state().scrollTo(undefined, extract.textIndex, true)">
             <p class="line-clamp-5 text-(length:--size-base) leading-(--line-height-3)" [innerHTML]="extract.text"></p>
           </ListItem>
-        } @empty {
-          <!-- div, not p: a <p> picks up the app's own paragraph typography (font-size, margin),
-               drifting from the row size above it — same fix as article-entities-tab-panel.ts. -->
-          <div class="px-3 py-1 text-(length:--size-base) text-(--font-neutral-secondary) italic">{{ 'drawers.noRelevantExtracts' | transloco }}</div>
         }
       </List>
     }
@@ -10861,6 +11110,8 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ArticleMatchLocationsTabPanel = class ArticleMatchLocationsTabPanel {
 	state = input.required(...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	queryText = input("", ...ngDevMode ? [{ debugName: "queryText" }] : /* istanbul ignore next */ []);
+	row = injectRowActivation(() => this.state().hovering);
 	focusedValue = signal(void 0, ...ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []);
 	onBlur(value) {
 		if (this.focusedValue() === value) this.focusedValue.set(void 0);
@@ -10892,21 +11143,32 @@ var ArticleMatchLocationsTabPanel = class ArticleMatchLocationsTabPanel {
 		type: ArticleMatchLocationsTabPanel,
 		isStandalone: true,
 		selector: "article-match-locations-tab-panel, ArticleMatchLocationsTabPanel, articlematchlocationstabpanel",
-		inputs: { state: {
-			classPropertyName: "state",
-			publicName: "state",
-			isSignal: true,
-			isRequired: true,
-			transformFunction: null
-		} },
+		inputs: {
+			state: {
+				classPropertyName: "state",
+				publicName: "state",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			queryText: {
+				classPropertyName: "queryText",
+				publicName: "queryText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
 		ngImport: i0,
 		template: `
+    @if (state().hasContent()) {
     <!-- Legend, once for the whole list — not repeated per row (aria-hidden: sighted-keyboard-user
-         hint only, the buttons on each row already carry the real accessible names). -->
+         hint only, the buttons on each row already carry the real accessible names). Hidden on a touch
+         screen: there is no keyboard to press the keys on. -->
     <div
       data-name="shortcuts-legend"
       aria-hidden="true"
-      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base)">
+      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base) pointer-coarse:hidden">
       <KbdGroup class="text-[10px]">
         <kbd size="xs" class="text-[10px]">Ctrl</kbd>
         <kbd size="xs" class="text-[10px]"><arrow-left class="size-2.5" /></kbd>
@@ -10919,38 +11181,50 @@ var ArticleMatchLocationsTabPanel = class ArticleMatchLocationsTabPanel {
       <span>{{ 'drawers.navigateOccurrences' | transloco }}</span>
     </div>
 
-    <List variant="list-menu" class="gap-1" selectionMode="explicit">
+    <List variant="list-menu" class="gap-2" selectionMode="explicit">
       @for (data of state().values(); track data.value) {
         <ListItem
           size="small"
           [value]="data.value"
-          class="select-none"
-          (mouseenter)="state().hovering.set(data.value)"
-          (mouseleave)="state().hovering.set(undefined)"
+          class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+          (mouseenter)="row.enter(data.value)"
+          (mouseleave)="row.leave()"
+          (click)="row.activate(data.value)"
           (focus)="focusedValue.set(data.value)"
           (blur)="onBlur(data.value)"
           (keydown.control.arrowleft)="onNavigateKey($event, data, 'prev')"
           (keydown.control.arrowright)="onNavigateKey($event, data, 'next')">
           <ListItemText>{{ data.display }}</ListItemText>
 
-          <span class="ml-auto flex shrink-0 items-center gap-2">
-            @if (isActive(data.value)) {
-              <button class="hover:scale-125" aria-label="previous match" (click)="state().navigatePrev(data)">
-                <chevron-left />
-              </button>
-
-              <span>{{ currentIndex(data) }} / {{ data.count }}</span>
-
-              <button class="hover:scale-125" aria-label="next match" (click)="state().navigateNext(data)">
-                <chevron-right />
-              </button>
-            } @else {
-              {{ data.count }}
-            }
-          </span>
+          <occurrence-navigator
+            class="ml-auto"
+            [active]="isActive(data.value)"
+            [index]="currentIndex(data)"
+            [total]="data.count ?? 0"
+            previousLabel="previous match"
+            nextLabel="next match"
+            (previous)="state().navigatePrev(data)"
+            (next)="state().navigateNext(data)" />
         </ListItem>
       }
     </List>
+    } @else {
+      <!-- With nothing to show it says why: no search yet, or no match. Two whole empty states rather than one with an @if inside:
+           the hint is projected into its slot only when it is a direct child of <list-panel-empty> (NG8011 otherwise). -->
+      @if (queryText()) {
+        <list-panel-empty color="blue">
+          <file-magnifying-glass-icon listPanelEmptyIcon />
+          {{ 'drawers.noMatches' | transloco: { query: queryText() } }}
+          <p listPanelEmptyHint>{{ 'drawers.noMatchesHint' | transloco }}</p>
+        </list-panel-empty>
+      } @else {
+        <list-panel-empty color="blue">
+          <file-magnifying-glass-icon listPanelEmptyIcon />
+          {{ 'drawers.typeToSearch' | transloco }}
+          <p listPanelEmptyHint>{{ 'drawers.typeToSearchHint' | transloco }}</p>
+        </list-panel-empty>
+      }
+    }
   `,
 		isInline: true,
 		dependencies: [
@@ -10984,18 +11258,6 @@ var ArticleMatchLocationsTabPanel = class ArticleMatchLocationsTabPanel {
 				inputs: ["class", "subtext"],
 				exportAs: ["listItemText"]
 			},
-			{
-				kind: "component",
-				type: ChevronLeftIcon,
-				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
-				inputs: ["class"]
-			},
-			{
-				kind: "component",
-				type: ChevronRightIcon,
-				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
-				inputs: ["class"]
-			},
 			{
 				kind: "directive",
 				type: KbdComponent,
@@ -11019,6 +11281,31 @@ var ArticleMatchLocationsTabPanel = class ArticleMatchLocationsTabPanel {
 				selector: "arrow-right, arrow-right-icon, ArrowRight, ArrowRightIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: FileMagnifyingGlassIcon,
+				selector: "file-magnifying-glass, file-magnifying-glass-icon, FileMagnifyingGlass, FileMagnifyingGlassIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: OccurrenceNavigatorComponent,
+				selector: "occurrence-navigator, OccurrenceNavigator",
+				inputs: [
+					"active",
+					"index",
+					"total",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["previous", "next"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -11041,20 +11328,23 @@ i0.ɵɵngDeclareClassMetadata({
 				ListComponent,
 				ListItemComponent,
 				ListItemTextComponent,
-				ChevronLeftIcon,
-				ChevronRightIcon,
 				KbdComponent,
 				KbdGroupComponent,
 				ArrowLeftIcon,
-				ArrowRightIcon
+				ArrowRightIcon,
+				FileMagnifyingGlassIcon,
+				ListPanelEmptyComponent,
+				OccurrenceNavigatorComponent
 			],
 			template: `
+    @if (state().hasContent()) {
     <!-- Legend, once for the whole list — not repeated per row (aria-hidden: sighted-keyboard-user
-         hint only, the buttons on each row already carry the real accessible names). -->
+         hint only, the buttons on each row already carry the real accessible names). Hidden on a touch
+         screen: there is no keyboard to press the keys on. -->
     <div
       data-name="shortcuts-legend"
       aria-hidden="true"
-      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base)">
+      class="mb-1 flex items-center gap-1.5 px-2 py-1 text-[10px] text-(--font-info-base) pointer-coarse:hidden">
       <KbdGroup class="text-[10px]">
         <kbd size="xs" class="text-[10px]">Ctrl</kbd>
         <kbd size="xs" class="text-[10px]"><arrow-left class="size-2.5" /></kbd>
@@ -11067,49 +11357,71 @@ i0.ɵɵngDeclareClassMetadata({
       <span>{{ 'drawers.navigateOccurrences' | transloco }}</span>
     </div>
 
-    <List variant="list-menu" class="gap-1" selectionMode="explicit">
+    <List variant="list-menu" class="gap-2" selectionMode="explicit">
       @for (data of state().values(); track data.value) {
         <ListItem
           size="small"
           [value]="data.value"
-          class="select-none"
-          (mouseenter)="state().hovering.set(data.value)"
-          (mouseleave)="state().hovering.set(undefined)"
+          class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+          (mouseenter)="row.enter(data.value)"
+          (mouseleave)="row.leave()"
+          (click)="row.activate(data.value)"
           (focus)="focusedValue.set(data.value)"
           (blur)="onBlur(data.value)"
           (keydown.control.arrowleft)="onNavigateKey($event, data, 'prev')"
           (keydown.control.arrowright)="onNavigateKey($event, data, 'next')">
           <ListItemText>{{ data.display }}</ListItemText>
 
-          <span class="ml-auto flex shrink-0 items-center gap-2">
-            @if (isActive(data.value)) {
-              <button class="hover:scale-125" aria-label="previous match" (click)="state().navigatePrev(data)">
-                <chevron-left />
-              </button>
-
-              <span>{{ currentIndex(data) }} / {{ data.count }}</span>
-
-              <button class="hover:scale-125" aria-label="next match" (click)="state().navigateNext(data)">
-                <chevron-right />
-              </button>
-            } @else {
-              {{ data.count }}
-            }
-          </span>
+          <occurrence-navigator
+            class="ml-auto"
+            [active]="isActive(data.value)"
+            [index]="currentIndex(data)"
+            [total]="data.count ?? 0"
+            previousLabel="previous match"
+            nextLabel="next match"
+            (previous)="state().navigatePrev(data)"
+            (next)="state().navigateNext(data)" />
         </ListItem>
       }
     </List>
+    } @else {
+      <!-- With nothing to show it says why: no search yet, or no match. Two whole empty states rather than one with an @if inside:
+           the hint is projected into its slot only when it is a direct child of <list-panel-empty> (NG8011 otherwise). -->
+      @if (queryText()) {
+        <list-panel-empty color="blue">
+          <file-magnifying-glass-icon listPanelEmptyIcon />
+          {{ 'drawers.noMatches' | transloco: { query: queryText() } }}
+          <p listPanelEmptyHint>{{ 'drawers.noMatchesHint' | transloco }}</p>
+        </list-panel-empty>
+      } @else {
+        <list-panel-empty color="blue">
+          <file-magnifying-glass-icon listPanelEmptyIcon />
+          {{ 'drawers.typeToSearch' | transloco }}
+          <p listPanelEmptyHint>{{ 'drawers.typeToSearchHint' | transloco }}</p>
+        </list-panel-empty>
+      }
+    }
   `
 		}]
 	}],
-	propDecorators: { state: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "state",
-			required: true
+	propDecorators: {
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: true
+			}]
+		}],
+		queryText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "queryText",
+				required: false
+			}]
 		}]
-	}] }
+	}
 });
 var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
 	article = input.required(...ngDevMode ? [{ debugName: "article" }] : /* istanbul ignore next */ []);
@@ -11156,6 +11468,7 @@ var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
 		outputs: { selected: "selected" },
 		ngImport: i0,
 		template: `
+    @if (state().hasContent()) {
     <List variant="list-navigation" size="small" class="gap-1" selectionMode="explicit">
       @for (document of state().similarDocuments(); track document.id) {
         <ListItem
@@ -11173,6 +11486,14 @@ var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
         </ListItem>
       }
     </List>
+    } @else {
+      <!-- Not reached through the tabs (they mount this panel once there is a document), but a host may mount it on its own. -->
+      <list-panel-empty color="indigo">
+        <files-icon listPanelEmptyIcon />
+        {{ 'drawers.noSimilarDocuments' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noSimilarDocumentsHint' | transloco }}</p>
+      </list-panel-empty>
+    }
   `,
 		isInline: true,
 		dependencies: [
@@ -11182,6 +11503,12 @@ var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
 				selector: "source, Source",
 				inputs: ["collection", "connector"]
 			},
+			{
+				kind: "component",
+				type: FilesIcon,
+				selector: "files, files-icon, Files, FilesIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "directive",
 				type: ListComponent,
@@ -11224,6 +11551,12 @@ var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
 				inputs: ["class", "subtext"],
 				exportAs: ["listItemText"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "directive",
 				type: SelectArticleDirective,
@@ -11234,6 +11567,11 @@ var ArticleSimilarDocumentsTabPanel = class ArticleSimilarDocumentsTabPanel {
 					"redirectUrl"
 				],
 				outputs: ["selected"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
 			}
 		]
 	});
@@ -11248,15 +11586,19 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "article-similar-documents-tab-panel, ArticleSimilarDocumentsTabPanel, articlesimilardocumentstabpanel",
 			imports: [
+				TranslocoPipe,
 				SourceComponent,
+				FilesIcon,
 				ListComponent,
 				ListItemComponent,
 				ListItemLeftDirective,
 				ListItemAvatarDirective,
 				ListItemTextComponent,
+				ListPanelEmptyComponent,
 				SelectArticleDirective
 			],
 			template: `
+    @if (state().hasContent()) {
     <List variant="list-navigation" size="small" class="gap-1" selectionMode="explicit">
       @for (document of state().similarDocuments(); track document.id) {
         <ListItem
@@ -11274,6 +11616,14 @@ i0.ɵɵngDeclareClassMetadata({
         </ListItem>
       }
     </List>
+    } @else {
+      <!-- Not reached through the tabs (they mount this panel once there is a document), but a host may mount it on its own. -->
+      <list-panel-empty color="indigo">
+        <files-icon listPanelEmptyIcon />
+        {{ 'drawers.noSimilarDocuments' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noSimilarDocumentsHint' | transloco }}</p>
+      </list-panel-empty>
+    }
   `
 		}]
 	}],
@@ -11398,7 +11748,7 @@ var AdvancedSearchTabs = class AdvancedSearchTabs {
 		host: { classAttribute: "flex min-h-0 flex-col overflow-x-hidden text-(length:--size-xs)" },
 		providers: [provideTranslocoScope("drawers")],
 		ngImport: i0,
-		template: "@if (article()) {\n  @if (searchBar()) {\n    <section class=\"mx-3 mt-3 mb-3 flex shrink-0 flex-col gap-4\">\n      <!-- Enter submits through (keydown.enter), the send button through (search). No debounce: same \"submit on\n           Enter/send, not on every keystroke\" contract as the previous input-group implementation. -->\n      <SearchBar\n        size=\"small\"\n        [placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n        [aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n        [(value)]=\"queryText\"\n        (keydown.enter)=\"executeSearch()\"\n        (search)=\"executeSearch()\" />\n    </section>\n  }\n\n  <!-- flex-1/min-h-0: this is what lets the panel content below be the only thing that scrolls —\n       the search bar/tab list above are shrink-0, never pushed off or scrolled themselves. -->\n  <Tabs class=\"flex min-h-0 flex-1 flex-col\">\n    <!-- noTruncate skips the default `truncate` branch (whose `has-[span]:[&>span]:truncate` would\n         otherwise force this span back to single-line ellipsis, defeating the wrap below); overriding\n         its own `min-w-fit` with `min-w-[auto]` restores the flex item's normal \"automatic minimum\n         size\" instead — for content that can wrap, that floor is the longest word (min-content), not\n         the full unwrapped label (max-content, what `fit-content` resolves to here with nothing\n         constraining the available space). A single-word label has nothing to wrap, so min-content ==\n         max-content and it can't be squeezed below its own readable width — the flex-shrink deficit\n         falls on the multi-word labels that actually have room to give, which wrap onto the span's\n         line-clamp-2 instead of being cut with an ellipsis (appropriate for a single-line pill, not\n         for a tab bar where \"Similar documents\"/\"Match locations\" routinely don't fit on one line).\n         h-9 (fixed, not h-auto) + items-center on every tab keeps the row visually even whether a\n         given label wraps onto 2 lines or stays on 1. No horizontal scroll/truncation fallback here on\n         purpose: with all five tabs the row wraps its labels in the 360px panel of the preview's find\n         field (see preview-actions.ts) rather than cutting them with an ellipsis. -->\n    <TabList\n      class=\"mx-3 shrink-0\"\n      [class.mt-3]=\"!searchBar()\"\n      variant=\"inner\"\n      [selectedTab]=\"selectedTab()\"\n      (selectedTabChange)=\"activeTab.set($event)\">\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"snippet\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"drawers.snippetTab\" | transloco }}</span\n        >\n      </Tab>\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"extracts\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"extracts\" | transloco }}</span\n        >\n      </Tab>\n      @if (entities.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"entities\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.entitiesTab\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (labels.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"labels\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"labels\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (similar.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"similar\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.similarDocuments\" | transloco }}</span\n          >\n        </Tab>\n      }\n    </TabList>\n\n    <!-- The single scroll container: each TabPanel is `absolute inset-0` (only the active one\n         visible, per TabPanelComponent's own `[class.hidden]`), so they all share this one\n         min-h-0/flex-1/overflow-y-auto region instead of the whole component scrolling. -->\n    <div class=\"relative m-3 min-h-0 flex-1 scrollbar-thin overflow-y-auto\">\n      <!-- Every TabPanel below cedes its own tab stop to its content (TabPanelComponent's `tabIndex`\n           doc, ui/tabs/tabs.ts): the APG makes a tabpanel focusable only when it holds no focusable\n           child, otherwise Tab from the tab lands on the empty container instead of the first row.\n           `extracts` is always rendered (own empty/loading states, per the class doc above) so its\n           tabindex is computed from whether it currently has any focusable row;\n           `entities`/`labels`/`similar` are only ever mounted via `hasContent()`,\n           which — per their `injectXState` — guarantees at least one row, so a static -1 is safe there. -->\n      <!-- Always there, like Extracts: with nothing to show it says why — no search yet, or no match. The\n           panel keeps its tab stop while it is empty (an empty tabpanel is the only thing Tab can reach\n           from its tab), and cedes it to its first row as soon as there is one. -->\n      <TabPanel\n        value=\"snippet\"\n        [tabindex]=\"matchLocations.hasContent() ? -1 : 0\"\n        class=\"absolute inset-0\">\n        @if (matchLocations.hasContent()) {\n          <article-match-locations-tab-panel [state]=\"matchLocations\" />\n        } @else {\n          <p class=\"px-2 py-1 text-center text-(--font-primary-muted)\">\n            @if (queryText()) {\n              {{ \"drawers.noMatches\" | transloco: { query: queryText() } }}\n            } @else {\n              {{ \"drawers.typeToSearch\" | transloco }}\n            }\n          </p>\n        }\n      </TabPanel>\n      <TabPanel\n        value=\"extracts\"\n        [tabindex]=\"\n          extracts.loading() || extracts.extracts().length === 0 ? 0 : -1\n        \"\n        class=\"absolute inset-0\">\n        <article-extracts-tab-panel [state]=\"extracts\" />\n      </TabPanel>\n      @if (entities.hasContent()) {\n        <TabPanel value=\"entities\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-entities-tab-panel [state]=\"entities\" />\n        </TabPanel>\n      }\n      @if (labels.hasContent()) {\n        <TabPanel value=\"labels\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-labels-tab-panel [article]=\"article()\" [state]=\"labels\" />\n        </TabPanel>\n      }\n      @if (similar.hasContent()) {\n        <TabPanel value=\"similar\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-similar-documents-tab-panel\n            [article]=\"article()\"\n            [strategy]=\"previewStrategy()\"\n            [state]=\"similar\"\n            (selected)=\"selected.emit($event)\" />\n        </TabPanel>\n      }\n    </div>\n  </Tabs>\n}\n",
+		template: "@if (article()) {\n  @if (searchBar()) {\n    <section class=\"mx-3 mt-3 mb-3 flex shrink-0 flex-col gap-4\">\n      <!-- Enter submits through (keydown.enter), the send button through (search). No debounce: same \"submit on\n           Enter/send, not on every keystroke\" contract as the previous input-group implementation. -->\n      <SearchBar\n        size=\"small\"\n        [placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n        [aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n        [(value)]=\"queryText\"\n        (keydown.enter)=\"executeSearch()\"\n        (search)=\"executeSearch()\" />\n    </section>\n  }\n\n  <!-- flex-1/min-h-0: this is what lets the panel content below be the only thing that scrolls —\n       the search bar/tab list above are shrink-0, never pushed off or scrolled themselves. -->\n  <Tabs class=\"flex min-h-0 flex-1 flex-col\">\n    <!-- noTruncate skips the default `truncate` branch (whose `has-[span]:[&>span]:truncate` would\n         otherwise force this span back to single-line ellipsis, defeating the wrap below); overriding\n         its own `min-w-fit` with `min-w-[auto]` restores the flex item's normal \"automatic minimum\n         size\" instead — for content that can wrap, that floor is the longest word (min-content), not\n         the full unwrapped label (max-content, what `fit-content` resolves to here with nothing\n         constraining the available space). A single-word label has nothing to wrap, so min-content ==\n         max-content and it can't be squeezed below its own readable width — the flex-shrink deficit\n         falls on the multi-word labels that actually have room to give, which wrap onto the span's\n         line-clamp-2 instead of being cut with an ellipsis (appropriate for a single-line pill, not\n         for a tab bar where \"Similar documents\"/\"Match locations\" routinely don't fit on one line).\n         h-9 (fixed, not h-auto) + items-center on every tab keeps the row visually even whether a\n         given label wraps onto 2 lines or stays on 1. No horizontal scroll/truncation fallback here on\n         purpose: with all five tabs the row wraps its labels in the 360px panel of the preview's find\n         field (see preview-actions.ts) rather than cutting them with an ellipsis. -->\n    <TabList\n      class=\"mx-3 shrink-0\"\n      [class.mt-3]=\"!searchBar()\"\n      variant=\"inner\"\n      [selectedTab]=\"selectedTab()\"\n      (selectedTabChange)=\"activeTab.set($event)\">\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"snippet\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"drawers.snippetTab\" | transloco }}</span\n        >\n      </Tab>\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"extracts\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"extracts\" | transloco }}</span\n        >\n      </Tab>\n      @if (entities.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"entities\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.entitiesTab\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (labels.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"labels\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"labels\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (similar.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"similar\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.similarDocuments\" | transloco }}</span\n          >\n        </Tab>\n      }\n    </TabList>\n\n    <!-- The single scroll container: each TabPanel is `absolute inset-0` (only the active one\n         visible, per TabPanelComponent's own `[class.hidden]`), so they all share this one\n         min-h-0/flex-1/overflow-y-auto region instead of the whole component scrolling. -->\n    <div class=\"relative m-3 min-h-0 flex-1 scrollbar-thin overflow-y-auto\">\n      <!-- Every TabPanel below cedes its own tab stop to its content (TabPanelComponent's `tabIndex`\n           doc, ui/tabs/tabs.ts): the APG makes a tabpanel focusable only when it holds no focusable\n           child, otherwise Tab from the tab lands on the empty container instead of the first row.\n           `extracts` is always rendered (own empty/loading states, per the class doc above) so its\n           tabindex is computed from whether it currently has any focusable row;\n           `entities`/`labels`/`similar` are only ever mounted via `hasContent()`,\n           which — per their `injectXState` — guarantees at least one row, so a static -1 is safe there. -->\n      <!-- Always there, like Extracts: with nothing to show it says why — no search yet, or no match. The\n           panel keeps its tab stop while it is empty (an empty tabpanel is the only thing Tab can reach\n           from its tab), and cedes it to its first row as soon as there is one. -->\n      <TabPanel\n        value=\"snippet\"\n        [tabindex]=\"matchLocations.hasContent() ? -1 : 0\"\n        class=\"absolute inset-0\">\n        <article-match-locations-tab-panel\n          [state]=\"matchLocations\"\n          [queryText]=\"queryText()\" />\n      </TabPanel>\n      <TabPanel\n        value=\"extracts\"\n        [tabindex]=\"\n          extracts.loading() || extracts.extracts().length === 0 ? 0 : -1\n        \"\n        class=\"absolute inset-0\">\n        <article-extracts-tab-panel [state]=\"extracts\" />\n      </TabPanel>\n      @if (entities.hasContent()) {\n        <TabPanel value=\"entities\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-entities-tab-panel [state]=\"entities\" />\n        </TabPanel>\n      }\n      @if (labels.hasContent()) {\n        <TabPanel value=\"labels\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-labels-tab-panel [article]=\"article()\" [state]=\"labels\" />\n        </TabPanel>\n      }\n      @if (similar.hasContent()) {\n        <TabPanel value=\"similar\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-similar-documents-tab-panel\n            [article]=\"article()\"\n            [strategy]=\"previewStrategy()\"\n            [state]=\"similar\"\n            (selected)=\"selected.emit($event)\" />\n        </TabPanel>\n      }\n    </div>\n  </Tabs>\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -11456,7 +11806,7 @@ var AdvancedSearchTabs = class AdvancedSearchTabs {
 				kind: "component",
 				type: ArticleMatchLocationsTabPanel,
 				selector: "article-match-locations-tab-panel, ArticleMatchLocationsTabPanel, articlematchlocationstabpanel",
-				inputs: ["state"]
+				inputs: ["state", "queryText"]
 			},
 			{
 				kind: "component",
@@ -11501,7 +11851,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ArticleMatchLocationsTabPanel,
 				ArticleSimilarDocumentsTabPanel
 			],
-			template: "@if (article()) {\n  @if (searchBar()) {\n    <section class=\"mx-3 mt-3 mb-3 flex shrink-0 flex-col gap-4\">\n      <!-- Enter submits through (keydown.enter), the send button through (search). No debounce: same \"submit on\n           Enter/send, not on every keystroke\" contract as the previous input-group implementation. -->\n      <SearchBar\n        size=\"small\"\n        [placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n        [aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n        [(value)]=\"queryText\"\n        (keydown.enter)=\"executeSearch()\"\n        (search)=\"executeSearch()\" />\n    </section>\n  }\n\n  <!-- flex-1/min-h-0: this is what lets the panel content below be the only thing that scrolls —\n       the search bar/tab list above are shrink-0, never pushed off or scrolled themselves. -->\n  <Tabs class=\"flex min-h-0 flex-1 flex-col\">\n    <!-- noTruncate skips the default `truncate` branch (whose `has-[span]:[&>span]:truncate` would\n         otherwise force this span back to single-line ellipsis, defeating the wrap below); overriding\n         its own `min-w-fit` with `min-w-[auto]` restores the flex item's normal \"automatic minimum\n         size\" instead — for content that can wrap, that floor is the longest word (min-content), not\n         the full unwrapped label (max-content, what `fit-content` resolves to here with nothing\n         constraining the available space). A single-word label has nothing to wrap, so min-content ==\n         max-content and it can't be squeezed below its own readable width — the flex-shrink deficit\n         falls on the multi-word labels that actually have room to give, which wrap onto the span's\n         line-clamp-2 instead of being cut with an ellipsis (appropriate for a single-line pill, not\n         for a tab bar where \"Similar documents\"/\"Match locations\" routinely don't fit on one line).\n         h-9 (fixed, not h-auto) + items-center on every tab keeps the row visually even whether a\n         given label wraps onto 2 lines or stays on 1. No horizontal scroll/truncation fallback here on\n         purpose: with all five tabs the row wraps its labels in the 360px panel of the preview's find\n         field (see preview-actions.ts) rather than cutting them with an ellipsis. -->\n    <TabList\n      class=\"mx-3 shrink-0\"\n      [class.mt-3]=\"!searchBar()\"\n      variant=\"inner\"\n      [selectedTab]=\"selectedTab()\"\n      (selectedTabChange)=\"activeTab.set($event)\">\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"snippet\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"drawers.snippetTab\" | transloco }}</span\n        >\n      </Tab>\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"extracts\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"extracts\" | transloco }}</span\n        >\n      </Tab>\n      @if (entities.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"entities\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.entitiesTab\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (labels.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"labels\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"labels\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (similar.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"similar\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.similarDocuments\" | transloco }}</span\n          >\n        </Tab>\n      }\n    </TabList>\n\n    <!-- The single scroll container: each TabPanel is `absolute inset-0` (only the active one\n         visible, per TabPanelComponent's own `[class.hidden]`), so they all share this one\n         min-h-0/flex-1/overflow-y-auto region instead of the whole component scrolling. -->\n    <div class=\"relative m-3 min-h-0 flex-1 scrollbar-thin overflow-y-auto\">\n      <!-- Every TabPanel below cedes its own tab stop to its content (TabPanelComponent's `tabIndex`\n           doc, ui/tabs/tabs.ts): the APG makes a tabpanel focusable only when it holds no focusable\n           child, otherwise Tab from the tab lands on the empty container instead of the first row.\n           `extracts` is always rendered (own empty/loading states, per the class doc above) so its\n           tabindex is computed from whether it currently has any focusable row;\n           `entities`/`labels`/`similar` are only ever mounted via `hasContent()`,\n           which — per their `injectXState` — guarantees at least one row, so a static -1 is safe there. -->\n      <!-- Always there, like Extracts: with nothing to show it says why — no search yet, or no match. The\n           panel keeps its tab stop while it is empty (an empty tabpanel is the only thing Tab can reach\n           from its tab), and cedes it to its first row as soon as there is one. -->\n      <TabPanel\n        value=\"snippet\"\n        [tabindex]=\"matchLocations.hasContent() ? -1 : 0\"\n        class=\"absolute inset-0\">\n        @if (matchLocations.hasContent()) {\n          <article-match-locations-tab-panel [state]=\"matchLocations\" />\n        } @else {\n          <p class=\"px-2 py-1 text-center text-(--font-primary-muted)\">\n            @if (queryText()) {\n              {{ \"drawers.noMatches\" | transloco: { query: queryText() } }}\n            } @else {\n              {{ \"drawers.typeToSearch\" | transloco }}\n            }\n          </p>\n        }\n      </TabPanel>\n      <TabPanel\n        value=\"extracts\"\n        [tabindex]=\"\n          extracts.loading() || extracts.extracts().length === 0 ? 0 : -1\n        \"\n        class=\"absolute inset-0\">\n        <article-extracts-tab-panel [state]=\"extracts\" />\n      </TabPanel>\n      @if (entities.hasContent()) {\n        <TabPanel value=\"entities\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-entities-tab-panel [state]=\"entities\" />\n        </TabPanel>\n      }\n      @if (labels.hasContent()) {\n        <TabPanel value=\"labels\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-labels-tab-panel [article]=\"article()\" [state]=\"labels\" />\n        </TabPanel>\n      }\n      @if (similar.hasContent()) {\n        <TabPanel value=\"similar\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-similar-documents-tab-panel\n            [article]=\"article()\"\n            [strategy]=\"previewStrategy()\"\n            [state]=\"similar\"\n            (selected)=\"selected.emit($event)\" />\n        </TabPanel>\n      }\n    </div>\n  </Tabs>\n}\n"
+			template: "@if (article()) {\n  @if (searchBar()) {\n    <section class=\"mx-3 mt-3 mb-3 flex shrink-0 flex-col gap-4\">\n      <!-- Enter submits through (keydown.enter), the send button through (search). No debounce: same \"submit on\n           Enter/send, not on every keystroke\" contract as the previous input-group implementation. -->\n      <SearchBar\n        size=\"small\"\n        [placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n        [aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n        [(value)]=\"queryText\"\n        (keydown.enter)=\"executeSearch()\"\n        (search)=\"executeSearch()\" />\n    </section>\n  }\n\n  <!-- flex-1/min-h-0: this is what lets the panel content below be the only thing that scrolls —\n       the search bar/tab list above are shrink-0, never pushed off or scrolled themselves. -->\n  <Tabs class=\"flex min-h-0 flex-1 flex-col\">\n    <!-- noTruncate skips the default `truncate` branch (whose `has-[span]:[&>span]:truncate` would\n         otherwise force this span back to single-line ellipsis, defeating the wrap below); overriding\n         its own `min-w-fit` with `min-w-[auto]` restores the flex item's normal \"automatic minimum\n         size\" instead — for content that can wrap, that floor is the longest word (min-content), not\n         the full unwrapped label (max-content, what `fit-content` resolves to here with nothing\n         constraining the available space). A single-word label has nothing to wrap, so min-content ==\n         max-content and it can't be squeezed below its own readable width — the flex-shrink deficit\n         falls on the multi-word labels that actually have room to give, which wrap onto the span's\n         line-clamp-2 instead of being cut with an ellipsis (appropriate for a single-line pill, not\n         for a tab bar where \"Similar documents\"/\"Match locations\" routinely don't fit on one line).\n         h-9 (fixed, not h-auto) + items-center on every tab keeps the row visually even whether a\n         given label wraps onto 2 lines or stays on 1. No horizontal scroll/truncation fallback here on\n         purpose: with all five tabs the row wraps its labels in the 360px panel of the preview's find\n         field (see preview-actions.ts) rather than cutting them with an ellipsis. -->\n    <TabList\n      class=\"mx-3 shrink-0\"\n      [class.mt-3]=\"!searchBar()\"\n      variant=\"inner\"\n      [selectedTab]=\"selectedTab()\"\n      (selectedTabChange)=\"activeTab.set($event)\">\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"snippet\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"drawers.snippetTab\" | transloco }}</span\n        >\n      </Tab>\n      <Tab\n        variant=\"secondary\"\n        size=\"sm\"\n        value=\"extracts\"\n        noTruncate\n        class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n        <span\n          class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n          >{{ \"extracts\" | transloco }}</span\n        >\n      </Tab>\n      @if (entities.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"entities\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.entitiesTab\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (labels.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"labels\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"labels\" | transloco }}</span\n          >\n        </Tab>\n      }\n      @if (similar.hasContent()) {\n        <Tab\n          variant=\"secondary\"\n          size=\"sm\"\n          value=\"similar\"\n          noTruncate\n          class=\"h-9 min-w-[auto] items-center text-(length:--size-sm)\">\n          <span\n            class=\"line-clamp-2 text-center leading-tight whitespace-normal\"\n            >{{ \"drawers.similarDocuments\" | transloco }}</span\n          >\n        </Tab>\n      }\n    </TabList>\n\n    <!-- The single scroll container: each TabPanel is `absolute inset-0` (only the active one\n         visible, per TabPanelComponent's own `[class.hidden]`), so they all share this one\n         min-h-0/flex-1/overflow-y-auto region instead of the whole component scrolling. -->\n    <div class=\"relative m-3 min-h-0 flex-1 scrollbar-thin overflow-y-auto\">\n      <!-- Every TabPanel below cedes its own tab stop to its content (TabPanelComponent's `tabIndex`\n           doc, ui/tabs/tabs.ts): the APG makes a tabpanel focusable only when it holds no focusable\n           child, otherwise Tab from the tab lands on the empty container instead of the first row.\n           `extracts` is always rendered (own empty/loading states, per the class doc above) so its\n           tabindex is computed from whether it currently has any focusable row;\n           `entities`/`labels`/`similar` are only ever mounted via `hasContent()`,\n           which — per their `injectXState` — guarantees at least one row, so a static -1 is safe there. -->\n      <!-- Always there, like Extracts: with nothing to show it says why — no search yet, or no match. The\n           panel keeps its tab stop while it is empty (an empty tabpanel is the only thing Tab can reach\n           from its tab), and cedes it to its first row as soon as there is one. -->\n      <TabPanel\n        value=\"snippet\"\n        [tabindex]=\"matchLocations.hasContent() ? -1 : 0\"\n        class=\"absolute inset-0\">\n        <article-match-locations-tab-panel\n          [state]=\"matchLocations\"\n          [queryText]=\"queryText()\" />\n      </TabPanel>\n      <TabPanel\n        value=\"extracts\"\n        [tabindex]=\"\n          extracts.loading() || extracts.extracts().length === 0 ? 0 : -1\n        \"\n        class=\"absolute inset-0\">\n        <article-extracts-tab-panel [state]=\"extracts\" />\n      </TabPanel>\n      @if (entities.hasContent()) {\n        <TabPanel value=\"entities\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-entities-tab-panel [state]=\"entities\" />\n        </TabPanel>\n      }\n      @if (labels.hasContent()) {\n        <TabPanel value=\"labels\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-labels-tab-panel [article]=\"article()\" [state]=\"labels\" />\n        </TabPanel>\n      }\n      @if (similar.hasContent()) {\n        <TabPanel value=\"similar\" tabindex=\"-1\" class=\"absolute inset-0\">\n          <article-similar-documents-tab-panel\n            [article]=\"article()\"\n            [strategy]=\"previewStrategy()\"\n            [state]=\"similar\"\n            (selected)=\"selected.emit($event)\" />\n        </TabPanel>\n      }\n    </div>\n  </Tabs>\n}\n"
 		}]
 	}],
 	propDecorators: {
@@ -11695,7 +12045,9 @@ var ArticleHighlights = class ArticleHighlights {
             <!-- A quiet row: the round mark is the category's colour when it is on, a ring when it is off. The arrows
                  take the place of the count while the row is hovered or holds the focus: six sets of arrows at rest were
                  the loudest thing in the panel. Nothing is kept free for them, so a name is cut (and shown in full in a
-                 tooltip) only when it does not fit, with the arrows when they are there. -->
+                 tooltip) only when it does not fit, with the arrows when they are there. On a touch screen nothing hovers,
+                 and a browser such as Safari does not focus a button at a tap: the arrows of every category that is on are
+                 there all the time (a category that is off has nothing to step through). -->
             <li
               role="listitem"
               class="group/row relative flex h-10 items-center rounded-(--radius-md) select-none focus-within:bg-(--bg-primary-lightest) hover:bg-(--bg-primary-lightest)">
@@ -11703,11 +12055,11 @@ var ArticleHighlights = class ArticleHighlights {
                 type="button"
                 variant="none"
                 size="md"
-                class="h-9 min-w-0 flex-1 justify-start gap-(--spacing-xs) rounded-(--radius-sm) px-(--spacing-2xs) text-start text-(--font-neutral-muted) focus-visible:-outline-offset-2 aria-pressed:text-(--font-neutral-black)"
+                class="h-10 min-w-0 flex-1 justify-start gap-(--spacing-xs) rounded-(--radius-sm) px-(--spacing-2xs) text-start text-(--font-neutral-muted) focus-visible:-outline-offset-2 aria-pressed:text-(--font-neutral-black)"
                 [attr.aria-pressed]="isActive(cat.key)"
                 (click)="toggleCategory(cat.key)">
                 <!-- The button wraps what it holds in its own label: the layout of the row is this span's. -->
-                <span class="flex w-full min-w-0 items-center gap-(--spacing-xs) text-(length:--size-base) leading-(--line-height-3) font-normal">
+                <span class="flex w-full min-w-0 items-center gap-(--spacing-xs) text-(length:--size-lg) leading-(--line-height-3) font-normal">
                   <span
                     class="inline-flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-(--stroke-neutral-base)"
                     [style.background]="isActive(cat.key) ? cat.color : null"
@@ -11719,7 +12071,7 @@ var ArticleHighlights = class ArticleHighlights {
                   <span class="min-w-0 truncate" truncated #cut="truncated" [tooltip]="categoryName(cat)" [tooltipDisabled]="!cut.isTruncated()">{{ categoryName(cat) }}</span>
                   <span
                     class="ms-auto ps-(--spacing-xs) pe-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) tabular-nums"
-                    [class]="isActive(cat.key) ? 'group-focus-within/row:hidden group-hover/row:hidden' : ''"
+                    [class]="isActive(cat.key) ? 'group-focus-within/row:hidden group-hover/row:hidden pointer-coarse:hidden' : ''"
                     >{{ cat.count }}</span
                   >
                 </span>
@@ -11727,30 +12079,15 @@ var ArticleHighlights = class ArticleHighlights {
 
               @if (isActive(cat.key)) {
                 <span
-                  class="hidden shrink-0 items-center gap-0.5 pe-(--spacing-3xs) ps-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) tabular-nums group-focus-within/row:flex group-hover/row:flex">
-                  <button
-                    type="button"
-                    variant="tertiary"
-                    scheme="neutral"
-                    size="sm"
-                    [iconOnly]="true"
-                    [attr.aria-label]="'drawers.previousOccurrence' | transloco: { label: categoryName(cat) }"
-                    (click)="gotoCat(cat.key, -1)">
-                    <chevron-left />
-                  </button>
-
-                  <span class="min-w-12 text-center">{{ cursorLabel(cat.key) }} / {{ cat.count }}</span>
-
-                  <button
-                    type="button"
-                    variant="tertiary"
-                    scheme="neutral"
-                    size="sm"
-                    [iconOnly]="true"
-                    [attr.aria-label]="'drawers.nextOccurrence' | transloco: { label: categoryName(cat) }"
-                    (click)="gotoCat(cat.key, 1)">
-                    <chevron-right />
-                  </button>
+                  class="hidden shrink-0 items-center pe-(--spacing-3xs) ps-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) group-focus-within/row:flex group-hover/row:flex pointer-coarse:flex">
+                  <occurrence-navigator
+                    [active]="true"
+                    [index]="cursorLabel(cat.key)"
+                    [total]="cat.count"
+                    [previousLabel]="'drawers.previousOccurrence' | transloco: { label: categoryName(cat) }"
+                    [nextLabel]="'drawers.nextOccurrence' | transloco: { label: categoryName(cat) }"
+                    (previous)="gotoCat(cat.key, -1)"
+                    (next)="gotoCat(cat.key, 1)" />
                 </span>
               }
             </li>
@@ -11765,6 +12102,13 @@ var ArticleHighlights = class ArticleHighlights {
           <span class="ms-auto" aria-live="polite">{{ "drawers.highlightsShown" | transloco: { shown: active().length, total: categories().length } }}</span>
         </div>
       </div>
+    } @else {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint line. -->
+      <list-panel-empty color="orange">
+        <highlighter-icon listPanelEmptyIcon />
+        {{ 'drawers.noHighlights' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noHighlightsHint' | transloco }}</p>
+      </list-panel-empty>
     }
   `,
 		isInline: true,
@@ -11789,15 +12133,28 @@ var ArticleHighlights = class ArticleHighlights {
 			},
 			{
 				kind: "component",
-				type: ChevronLeftIcon,
-				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
+				type: HighlighterIcon,
+				selector: "highlighter, highlighter-icon, Highlighter, HighlighterIcon",
 				inputs: ["class"]
 			},
 			{
 				kind: "component",
-				type: ChevronRightIcon,
-				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
-				inputs: ["class"]
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: OccurrenceNavigatorComponent,
+				selector: "occurrence-navigator, OccurrenceNavigator",
+				inputs: [
+					"active",
+					"index",
+					"total",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["previous", "next"]
 			},
 			{
 				kind: "component",
@@ -11870,8 +12227,9 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ButtonComponent,
 				CheckIcon,
-				ChevronLeftIcon,
-				ChevronRightIcon,
+				HighlighterIcon,
+				ListPanelEmptyComponent,
+				OccurrenceNavigatorComponent,
 				SwitchComponent,
 				TooltipDirective,
 				TruncatedDirective
@@ -11885,7 +12243,9 @@ i0.ɵɵngDeclareClassMetadata({
             <!-- A quiet row: the round mark is the category's colour when it is on, a ring when it is off. The arrows
                  take the place of the count while the row is hovered or holds the focus: six sets of arrows at rest were
                  the loudest thing in the panel. Nothing is kept free for them, so a name is cut (and shown in full in a
-                 tooltip) only when it does not fit, with the arrows when they are there. -->
+                 tooltip) only when it does not fit, with the arrows when they are there. On a touch screen nothing hovers,
+                 and a browser such as Safari does not focus a button at a tap: the arrows of every category that is on are
+                 there all the time (a category that is off has nothing to step through). -->
             <li
               role="listitem"
               class="group/row relative flex h-10 items-center rounded-(--radius-md) select-none focus-within:bg-(--bg-primary-lightest) hover:bg-(--bg-primary-lightest)">
@@ -11893,11 +12253,11 @@ i0.ɵɵngDeclareClassMetadata({
                 type="button"
                 variant="none"
                 size="md"
-                class="h-9 min-w-0 flex-1 justify-start gap-(--spacing-xs) rounded-(--radius-sm) px-(--spacing-2xs) text-start text-(--font-neutral-muted) focus-visible:-outline-offset-2 aria-pressed:text-(--font-neutral-black)"
+                class="h-10 min-w-0 flex-1 justify-start gap-(--spacing-xs) rounded-(--radius-sm) px-(--spacing-2xs) text-start text-(--font-neutral-muted) focus-visible:-outline-offset-2 aria-pressed:text-(--font-neutral-black)"
                 [attr.aria-pressed]="isActive(cat.key)"
                 (click)="toggleCategory(cat.key)">
                 <!-- The button wraps what it holds in its own label: the layout of the row is this span's. -->
-                <span class="flex w-full min-w-0 items-center gap-(--spacing-xs) text-(length:--size-base) leading-(--line-height-3) font-normal">
+                <span class="flex w-full min-w-0 items-center gap-(--spacing-xs) text-(length:--size-lg) leading-(--line-height-3) font-normal">
                   <span
                     class="inline-flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-(--stroke-neutral-base)"
                     [style.background]="isActive(cat.key) ? cat.color : null"
@@ -11909,7 +12269,7 @@ i0.ɵɵngDeclareClassMetadata({
                   <span class="min-w-0 truncate" truncated #cut="truncated" [tooltip]="categoryName(cat)" [tooltipDisabled]="!cut.isTruncated()">{{ categoryName(cat) }}</span>
                   <span
                     class="ms-auto ps-(--spacing-xs) pe-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) tabular-nums"
-                    [class]="isActive(cat.key) ? 'group-focus-within/row:hidden group-hover/row:hidden' : ''"
+                    [class]="isActive(cat.key) ? 'group-focus-within/row:hidden group-hover/row:hidden pointer-coarse:hidden' : ''"
                     >{{ cat.count }}</span
                   >
                 </span>
@@ -11917,30 +12277,15 @@ i0.ɵɵngDeclareClassMetadata({
 
               @if (isActive(cat.key)) {
                 <span
-                  class="hidden shrink-0 items-center gap-0.5 pe-(--spacing-3xs) ps-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) tabular-nums group-focus-within/row:flex group-hover/row:flex">
-                  <button
-                    type="button"
-                    variant="tertiary"
-                    scheme="neutral"
-                    size="sm"
-                    [iconOnly]="true"
-                    [attr.aria-label]="'drawers.previousOccurrence' | transloco: { label: categoryName(cat) }"
-                    (click)="gotoCat(cat.key, -1)">
-                    <chevron-left />
-                  </button>
-
-                  <span class="min-w-12 text-center">{{ cursorLabel(cat.key) }} / {{ cat.count }}</span>
-
-                  <button
-                    type="button"
-                    variant="tertiary"
-                    scheme="neutral"
-                    size="sm"
-                    [iconOnly]="true"
-                    [attr.aria-label]="'drawers.nextOccurrence' | transloco: { label: categoryName(cat) }"
-                    (click)="gotoCat(cat.key, 1)">
-                    <chevron-right />
-                  </button>
+                  class="hidden shrink-0 items-center pe-(--spacing-3xs) ps-(--spacing-2xs) text-(length:--size-sm) text-(--font-neutral-muted) group-focus-within/row:flex group-hover/row:flex pointer-coarse:flex">
+                  <occurrence-navigator
+                    [active]="true"
+                    [index]="cursorLabel(cat.key)"
+                    [total]="cat.count"
+                    [previousLabel]="'drawers.previousOccurrence' | transloco: { label: categoryName(cat) }"
+                    [nextLabel]="'drawers.nextOccurrence' | transloco: { label: categoryName(cat) }"
+                    (previous)="gotoCat(cat.key, -1)"
+                    (next)="gotoCat(cat.key, 1)" />
                 </span>
               }
             </li>
@@ -11955,6 +12300,13 @@ i0.ɵɵngDeclareClassMetadata({
           <span class="ms-auto" aria-live="polite">{{ "drawers.highlightsShown" | transloco: { shown: active().length, total: categories().length } }}</span>
         </div>
       </div>
+    } @else {
+      <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint line. -->
+      <list-panel-empty color="orange">
+        <highlighter-icon listPanelEmptyIcon />
+        {{ 'drawers.noHighlights' | transloco }}
+        <p listPanelEmptyHint>{{ 'drawers.noHighlightsHint' | transloco }}</p>
+      </list-panel-empty>
     }
   `
 		}]
@@ -13163,6 +13515,154 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+function distance(touches) {
+	return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+}
+var PinchZoomDirective = class PinchZoomDirective {
+	zoom = model.required({
+		...ngDevMode ? { debugName: "zoom" } : /* istanbul ignore next */ {},
+		alias: "pinchZoom"
+	});
+	min = input(.5, {
+		...ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {},
+		alias: "pinchZoomMin",
+		transform: numberAttribute
+	});
+	max = input(2, {
+		...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
+		alias: "pinchZoomMax",
+		transform: numberAttribute
+	});
+	host = inject(ElementRef).nativeElement;
+	injector = inject(Injector);
+	pinch = null;
+	constructor() {
+		const start = (event) => {
+			this.pinch = null;
+			if (event.touches.length !== 2) return;
+			const startDistance = distance(event.touches);
+			if (startDistance >= 1) this.pinch = {
+				startDistance,
+				startZoom: this.zoom()
+			};
+		};
+		const end = () => {
+			this.pinch = null;
+		};
+		this.host.addEventListener("touchstart", start, { passive: true });
+		this.host.addEventListener("touchmove", this.onMove, { passive: false });
+		this.host.addEventListener("touchend", end, { passive: true });
+		this.host.addEventListener("touchcancel", end, { passive: true });
+		inject(DestroyRef).onDestroy(() => {
+			this.host.removeEventListener("touchstart", start);
+			this.host.removeEventListener("touchmove", this.onMove);
+			this.host.removeEventListener("touchend", end);
+			this.host.removeEventListener("touchcancel", end);
+		});
+	}
+	onMove = (event) => {
+		if (!this.pinch || event.touches.length !== 2) return;
+		event.preventDefault();
+		const previous = this.zoom();
+		const next = Math.min(this.max(), Math.max(this.min(), this.pinch.startZoom * (distance(event.touches) / this.pinch.startDistance)));
+		if (next === previous) return;
+		const rect = this.host.getBoundingClientRect();
+		const x = (event.touches[0].clientX + event.touches[1].clientX) / 2 - rect.left;
+		const y = (event.touches[0].clientY + event.touches[1].clientY) / 2 - rect.top;
+		const left = this.host.scrollLeft;
+		const top = this.host.scrollTop;
+		this.zoom.set(next);
+		afterNextRender({ write: () => {
+			const ratio = next / previous;
+			this.host.scrollLeft = (left + x) * ratio - x;
+			this.host.scrollTop = (top + y) * ratio - y;
+		} }, { injector: this.injector });
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PinchZoomDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: PinchZoomDirective,
+		isStandalone: true,
+		selector: "[pinchZoom]",
+		inputs: {
+			zoom: {
+				classPropertyName: "zoom",
+				publicName: "pinchZoom",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "pinchZoomMin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "pinchZoomMax",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { zoom: "pinchZoomChange" },
+		host: { properties: { "style.touch-action": "'pan-x pan-y'" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PinchZoomDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[pinchZoom]",
+			host: { "[style.touch-action]": "'pan-x pan-y'" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		zoom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pinchZoom",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["pinchZoomChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pinchZoomMin",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pinchZoomMax",
+				required: false
+			}]
+		}]
+	}
+});
 const MARKDOWN_ZOOM_STEP = .1;
 const MARKDOWN_ZOOM_MIN = .5;
 const MARKDOWN_ZOOM_MAX = 2;
@@ -13585,7 +14085,11 @@ var PreviewContentComponent = class PreviewContentComponent {
                  div, not preview.js's iframe. Zoom is reimplemented locally below (the CSS zoom property, not
                  preview.js's transform+relayout dance — markdown content is far smaller than a converted
                  document, so that sophistication buys nothing here). -->
-            <div class="h-full overflow-auto rounded-(--radius-sm) bg-(--bg-neutral-white) px-(--spacing-2xl) py-(--spacing-xl) shadow-(--shadow-1)">
+            <div
+              [(pinchZoom)]="markdownZoom"
+              [pinchZoomMin]="markdownZoomMin"
+              [pinchZoomMax]="markdownZoomMax"
+              class="h-full overflow-auto rounded-(--radius-sm) bg-(--bg-neutral-white) px-(--spacing-2xl) py-(--spacing-xl) shadow-(--shadow-1)">
               <div class="prose max-w-none dark:prose-invert" [style.zoom]="markdownZoom()" [innerHTML]="markdownResource.value() | markdown"></div>
             </div>
           } @else {
@@ -13680,6 +14184,17 @@ var PreviewContentComponent = class PreviewContentComponent {
 					"zoomFit"
 				]
 			},
+			{
+				kind: "directive",
+				type: PinchZoomDirective,
+				selector: "[pinchZoom]",
+				inputs: [
+					"pinchZoom",
+					"pinchZoomMin",
+					"pinchZoomMax"
+				],
+				outputs: ["pinchZoomChange"]
+			},
 			{
 				kind: "component",
 				type: AdvancedSearchTabs,
@@ -13779,6 +14294,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				PreviewActionsComponent,
+				PinchZoomDirective,
 				AdvancedSearchTabs,
 				LoadingDotsComponent,
 				ImageIcon,
@@ -13874,7 +14390,11 @@ i0.ɵɵngDeclareClassMetadata({
                  div, not preview.js's iframe. Zoom is reimplemented locally below (the CSS zoom property, not
                  preview.js's transform+relayout dance — markdown content is far smaller than a converted
                  document, so that sophistication buys nothing here). -->
-            <div class="h-full overflow-auto rounded-(--radius-sm) bg-(--bg-neutral-white) px-(--spacing-2xl) py-(--spacing-xl) shadow-(--shadow-1)">
+            <div
+              [(pinchZoom)]="markdownZoom"
+              [pinchZoomMin]="markdownZoomMin"
+              [pinchZoomMax]="markdownZoomMax"
+              class="h-full overflow-auto rounded-(--radius-sm) bg-(--bg-neutral-white) px-(--spacing-2xl) py-(--spacing-xl) shadow-(--shadow-1)">
               <div class="prose max-w-none dark:prose-invert" [style.zoom]="markdownZoom()" [innerHTML]="markdownResource.value() | markdown"></div>
             </div>
           } @else {
@@ -14109,7 +14629,7 @@ var PreviewHeaderComponent = class PreviewHeaderComponent {
           @if (href()) {
             <arrow-up-right-from-square-icon
               aria-hidden="true"
-              class="size-(--icon-sm) shrink-0 opacity-0 transition-opacity duration-150 group-hover/title:opacity-100 group-focus-visible/title:opacity-100" />
+              class="size-(--icon-sm) shrink-0 opacity-0 transition-opacity duration-150 group-hover/title:opacity-100 group-focus-visible/title:opacity-100 pointer-coarse:opacity-100" />
           }
         </a>
 
@@ -14197,7 +14717,7 @@ i0.ɵɵngDeclareClassMetadata({
           @if (href()) {
             <arrow-up-right-from-square-icon
               aria-hidden="true"
-              class="size-(--icon-sm) shrink-0 opacity-0 transition-opacity duration-150 group-hover/title:opacity-100 group-focus-visible/title:opacity-100" />
+              class="size-(--icon-sm) shrink-0 opacity-0 transition-opacity duration-150 group-hover/title:opacity-100 group-focus-visible/title:opacity-100 pointer-coarse:opacity-100" />
           }
         </a>
 
@@ -14536,7 +15056,7 @@ var SponsoredResultsComponent = class SponsoredResultsComponent {
           @if (childElement()?.template) {
             <ng-container [ngTemplateOutlet]="childElement()?.template" />
           } @else {
-            <span class="promoted-badge bg-(--bg-primary-base) invisible flex items-center rounded-xl px-2 text-xs text-white peer-hover:visible">PROMOTED</span>
+            <span class="promoted-badge bg-(--bg-primary-base) invisible flex items-center rounded-xl px-2 text-xs text-white peer-hover:visible pointer-coarse:visible">PROMOTED</span>
           }
         }
       </li>
@@ -14611,7 +15131,7 @@ i0.ɵɵngDeclareClassMetadata({
           @if (childElement()?.template) {
             <ng-container [ngTemplateOutlet]="childElement()?.template" />
           } @else {
-            <span class="promoted-badge bg-(--bg-primary-base) invisible flex items-center rounded-xl px-2 text-xs text-white peer-hover:visible">PROMOTED</span>
+            <span class="promoted-badge bg-(--bg-primary-base) invisible flex items-center rounded-xl px-2 text-xs text-white peer-hover:visible pointer-coarse:visible">PROMOTED</span>
           }
         }
       </li>
@@ -16379,6 +16899,8 @@ var AdvancedFiltersBodyComponent = class AdvancedFiltersBodyComponent {
 					"fieldLabelLang",
 					"placeholder",
 					"ariaLabel",
+					"hideKeyboardLabel",
+					"keyboardLabel",
 					"noResultsText",
 					"searchingText",
 					"errorText",
@@ -16893,6 +17415,7 @@ var ArticleEntities = class ArticleEntities {
 	cn = cn;
 	article = input.required(...ngDevMode ? [{ debugName: "article" }] : /* istanbul ignore next */ []);
 	state = injectEntitiesState(this.article);
+	row = injectRowActivation(() => this.state.hovering);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -16928,30 +17451,24 @@ var ArticleEntities = class ArticleEntities {
             <chevron-right class="transition-transform duration-150 group-open/parent:rotate-90" />
           </summary>
 
-          <List class="gap-1 p-3 pt-0" selectionMode="explicit">
+          <List class="gap-2 p-3 pt-0" selectionMode="explicit">
             @for (data of highlight.metadata; track data.value) {
               <ListItem size="medium"
                 [value]="data.value"
-                class="select-none"
-                (mouseenter)="state.hovering.set(data.value)"
-                (mouseleave)="state.hovering.set(undefined)">
+                class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+                (mouseenter)="row.enter(data.value)"
+                (mouseleave)="row.leave()"
+                (click)="row.activate(data.value)">
                 <ListItemText>{{ data.display }}</ListItemText>
 
-                <span class="flex shrink-0 items-center gap-2">
-                  @if (state.hovering() === data.value) {
-                    <button class="hover:scale-125" aria-label="previous entity" (click)="state.navigatePrev(highlight.entity, data)">
-                      <chevron-left />
-                    </button>
-
-                    <span>{{ state.hoverIndex() }} / {{ state.total(highlight.entity, data) }}</span>
-
-                    <button class="hover:scale-125" aria-label="next entity" (click)="state.navigateNext(highlight.entity, data)">
-                      <chevron-right />
-                    </button>
-                  } @else {
-                    {{ state.total(highlight.entity, data) }}
-                  }
-                </span>
+                <occurrence-navigator
+                  [active]="state.hovering() === data.value"
+                  [index]="state.hoverIndex()"
+                  [total]="state.total(highlight.entity, data)"
+                  previousLabel="previous entity"
+                  nextLabel="next entity"
+                  (previous)="state.navigatePrev(highlight.entity, data)"
+                  (next)="state.navigateNext(highlight.entity, data)" />
               </ListItem>
             }
           </List>
@@ -17000,9 +17517,16 @@ var ArticleEntities = class ArticleEntities {
 			},
 			{
 				kind: "component",
-				type: ChevronLeftIcon,
-				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
-				inputs: ["class"]
+				type: OccurrenceNavigatorComponent,
+				selector: "occurrence-navigator, OccurrenceNavigator",
+				inputs: [
+					"active",
+					"index",
+					"total",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["previous", "next"]
 			},
 			{
 				kind: "pipe",
@@ -17027,7 +17551,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemComponent,
 				ListItemTextComponent,
 				ChevronRightIcon,
-				ChevronLeftIcon
+				OccurrenceNavigatorComponent
 			],
 			template: `
     @for (highlight of state.previewHighlights(); track highlight.entity) {
@@ -17042,30 +17566,24 @@ i0.ɵɵngDeclareClassMetadata({
             <chevron-right class="transition-transform duration-150 group-open/parent:rotate-90" />
           </summary>
 
-          <List class="gap-1 p-3 pt-0" selectionMode="explicit">
+          <List class="gap-2 p-3 pt-0" selectionMode="explicit">
             @for (data of highlight.metadata; track data.value) {
               <ListItem size="medium"
                 [value]="data.value"
-                class="select-none"
-                (mouseenter)="state.hovering.set(data.value)"
-                (mouseleave)="state.hovering.set(undefined)">
+                class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+                (mouseenter)="row.enter(data.value)"
+                (mouseleave)="row.leave()"
+                (click)="row.activate(data.value)">
                 <ListItemText>{{ data.display }}</ListItemText>
 
-                <span class="flex shrink-0 items-center gap-2">
-                  @if (state.hovering() === data.value) {
-                    <button class="hover:scale-125" aria-label="previous entity" (click)="state.navigatePrev(highlight.entity, data)">
-                      <chevron-left />
-                    </button>
-
-                    <span>{{ state.hoverIndex() }} / {{ state.total(highlight.entity, data) }}</span>
-
-                    <button class="hover:scale-125" aria-label="next entity" (click)="state.navigateNext(highlight.entity, data)">
-                      <chevron-right />
-                    </button>
-                  } @else {
-                    {{ state.total(highlight.entity, data) }}
-                  }
-                </span>
+                <occurrence-navigator
+                  [active]="state.hovering() === data.value"
+                  [index]="state.hoverIndex()"
+                  [total]="state.total(highlight.entity, data)"
+                  previousLabel="previous entity"
+                  nextLabel="next entity"
+                  (previous)="state.navigatePrev(highlight.entity, data)"
+                  (next)="state.navigateNext(highlight.entity, data)" />
               </ListItem>
             }
           </List>
@@ -17126,8 +17644,18 @@ var ArticleExtracts = class ArticleExtracts {
         <div class="flex h-32 items-center justify-center">
           <loading-dots size="md" class="text-(--font-primary-base)" [label]="'drawers.loadingExtracts' | transloco" />
         </div>
+      } @else if (state.extracts().length === 0) {
+        <!-- The same room as the list below and the other panels (entities, snippet): under the header, 12px around. -->
+        <div class="px-3 pb-3">
+          <list-panel-empty color="green">
+            <file-text-icon listPanelEmptyIcon />
+            {{ 'drawers.noRelevantExtracts' | transloco }}
+            <p listPanelEmptyHint>{{ 'drawers.noRelevantExtractsHint' | transloco }}</p>
+          </list-panel-empty>
+        </div>
       } @else {
-        <List class="mr-2 gap-1" selectionMode="explicit">
+        <!-- p-3 pt-0, as the lists of entities and snippet: the header above has its own 12px, the list needs them left, right and below. -->
+        <List class="gap-1 p-3 pt-0" selectionMode="explicit">
           @for (extract of state.extracts(); track extract.id) {
             <ListItem
               [value]="extract.textIndex"
@@ -17137,8 +17665,6 @@ var ArticleExtracts = class ArticleExtracts {
               (keydown.space)="state.scrollTo(undefined, extract.textIndex, true)">
               <p class="line-clamp-5" [innerHTML]="extract.text"></p>
             </ListItem>
-          } @empty {
-            <p class="px-2 py-1 text-slate-300">{{ 'drawers.noRelevantExtracts' | transloco }}</p>
           }
         </List>
       }
@@ -17153,6 +17679,12 @@ var ArticleExtracts = class ArticleExtracts {
 				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: FileTextIcon,
+				selector: "file-text, file-text-icon, FileText, FileTextIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "directive",
 				type: ListComponent,
@@ -17176,6 +17708,12 @@ var ArticleExtracts = class ArticleExtracts {
 				],
 				exportAs: ["listItem"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: TagsIcon,
@@ -17208,8 +17746,10 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				ChevronRightIcon,
+				FileTextIcon,
 				ListComponent,
 				ListItemComponent,
+				ListPanelEmptyComponent,
 				TagsIcon,
 				LoadingDotsComponent
 			],
@@ -17228,8 +17768,18 @@ i0.ɵɵngDeclareClassMetadata({
         <div class="flex h-32 items-center justify-center">
           <loading-dots size="md" class="text-(--font-primary-base)" [label]="'drawers.loadingExtracts' | transloco" />
         </div>
+      } @else if (state.extracts().length === 0) {
+        <!-- The same room as the list below and the other panels (entities, snippet): under the header, 12px around. -->
+        <div class="px-3 pb-3">
+          <list-panel-empty color="green">
+            <file-text-icon listPanelEmptyIcon />
+            {{ 'drawers.noRelevantExtracts' | transloco }}
+            <p listPanelEmptyHint>{{ 'drawers.noRelevantExtractsHint' | transloco }}</p>
+          </list-panel-empty>
+        </div>
       } @else {
-        <List class="mr-2 gap-1" selectionMode="explicit">
+        <!-- p-3 pt-0, as the lists of entities and snippet: the header above has its own 12px, the list needs them left, right and below. -->
+        <List class="gap-1 p-3 pt-0" selectionMode="explicit">
           @for (extract of state.extracts(); track extract.id) {
             <ListItem
               [value]="extract.textIndex"
@@ -17239,8 +17789,6 @@ i0.ɵɵngDeclareClassMetadata({
               (keydown.space)="state.scrollTo(undefined, extract.textIndex, true)">
               <p class="line-clamp-5" [innerHTML]="extract.text"></p>
             </ListItem>
-          } @empty {
-            <p class="px-2 py-1 text-slate-300">{{ 'drawers.noRelevantExtracts' | transloco }}</p>
           }
         </List>
       }
@@ -17428,6 +17976,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var ArticleMatchLocations = class ArticleMatchLocations {
 	state = injectMatchLocationsState();
+	row = injectRowActivation(() => this.state.hovering);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -17455,31 +18004,25 @@ var ArticleMatchLocations = class ArticleMatchLocations {
           <chevron-right class="transition-transform duration-150 group-open/parent:rotate-90" />
         </summary>
 
-        <List class="gap-1 p-3 pt-0" selectionMode="explicit">
+        <List class="gap-2 p-3 pt-0" selectionMode="explicit">
           @for (data of state.values(); track data.value) {
             <ListItem
               size="medium"
               [value]="data.value"
-              class="select-none"
-              (mouseenter)="state.hovering.set(data.value)"
-              (mouseleave)="state.hovering.set(undefined)">
+              class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+              (mouseenter)="row.enter(data.value)"
+              (mouseleave)="row.leave()"
+              (click)="row.activate(data.value)">
               <ListItemText>{{ data.display }}</ListItemText>
 
-              <span class="flex shrink-0 items-center gap-2">
-                @if (state.hovering() === data.value) {
-                  <button class="hover:scale-125" aria-label="previous match" (click)="state.navigatePrev(data)">
-                    <chevron-left />
-                  </button>
-
-                  <span>{{ state.hoverIndex() }} / {{ data.count }}</span>
-
-                  <button class="hover:scale-125" aria-label="next match" (click)="state.navigateNext(data)">
-                    <chevron-right />
-                  </button>
-                } @else {
-                  {{ data.count }}
-                }
-              </span>
+              <occurrence-navigator
+                [active]="state.hovering() === data.value"
+                [index]="state.hoverIndex()"
+                [total]="data.count ?? 0"
+                previousLabel="previous match"
+                nextLabel="next match"
+                (previous)="state.navigatePrev(data)"
+                (next)="state.navigateNext(data)" />
             </ListItem>
           }
         </List>
@@ -17521,15 +18064,22 @@ var ArticleMatchLocations = class ArticleMatchLocations {
 			},
 			{
 				kind: "component",
-				type: ChevronLeftIcon,
-				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
+				type: ChevronRightIcon,
+				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
 				inputs: ["class"]
 			},
 			{
 				kind: "component",
-				type: ChevronRightIcon,
-				selector: "chevron-right, chevron-right-icon, ChevronRight, ChevronRightIcon",
-				inputs: ["class"]
+				type: OccurrenceNavigatorComponent,
+				selector: "occurrence-navigator, OccurrenceNavigator",
+				inputs: [
+					"active",
+					"index",
+					"total",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["previous", "next"]
 			},
 			{
 				kind: "pipe",
@@ -17553,8 +18103,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ListComponent,
 				ListItemComponent,
 				ListItemTextComponent,
-				ChevronLeftIcon,
-				ChevronRightIcon
+				ChevronRightIcon,
+				OccurrenceNavigatorComponent
 			],
 			template: `
     @if (state.values().length) {
@@ -17568,31 +18118,25 @@ i0.ɵɵngDeclareClassMetadata({
           <chevron-right class="transition-transform duration-150 group-open/parent:rotate-90" />
         </summary>
 
-        <List class="gap-1 p-3 pt-0" selectionMode="explicit">
+        <List class="gap-2 p-3 pt-0" selectionMode="explicit">
           @for (data of state.values(); track data.value) {
             <ListItem
               size="medium"
               [value]="data.value"
-              class="select-none"
-              (mouseenter)="state.hovering.set(data.value)"
-              (mouseleave)="state.hovering.set(undefined)">
+              class="select-none min-h-10 [&_.list-item-text]:text-(length:--size-lg)"
+              (mouseenter)="row.enter(data.value)"
+              (mouseleave)="row.leave()"
+              (click)="row.activate(data.value)">
               <ListItemText>{{ data.display }}</ListItemText>
 
-              <span class="flex shrink-0 items-center gap-2">
-                @if (state.hovering() === data.value) {
-                  <button class="hover:scale-125" aria-label="previous match" (click)="state.navigatePrev(data)">
-                    <chevron-left />
-                  </button>
-
-                  <span>{{ state.hoverIndex() }} / {{ data.count }}</span>
-
-                  <button class="hover:scale-125" aria-label="next match" (click)="state.navigateNext(data)">
-                    <chevron-right />
-                  </button>
-                } @else {
-                  {{ data.count }}
-                }
-              </span>
+              <occurrence-navigator
+                [active]="state.hovering() === data.value"
+                [index]="state.hoverIndex()"
+                [total]="data.count ?? 0"
+                previousLabel="previous match"
+                nextLabel="next match"
+                (previous)="state.navigatePrev(data)"
+                (next)="state.navigateNext(data)" />
             </ListItem>
           }
         </List>
@@ -19217,6 +19761,15 @@ var AlertsComponent = class AlertsComponent {
 		return new Map(this.order().map((alert) => [alert, alertSummary(lang, alert)]));
 	}, ...ngDevMode ? [{ debugName: "summaries" }] : /* istanbul ignore next */ []);
 	summaryOf = (alert) => this.summaries().get(alert) ?? [];
+	keyboardAvailable = injectKeyboardAvailable();
+	fullText(alert) {
+		const summary = this.summaryOf(alert).map((part) => part.key ? this.transloco.translate(part.key) : part.text).join(" · ");
+		return summary ? `${alert.name} · ${summary}` : alert.name;
+	}
+	toggleText(tip) {
+		if (tip.isOpen()) tip.hide();
+		else tip.show();
+	}
 	announceMove = (alert, position, total) => this.transloco.translate("alerts.moved", {
 		name: alert.name,
 		position,
@@ -19348,7 +19901,7 @@ var AlertsComponent = class AlertsComponent {
 		},
 		providers: [provideTranslocoScope("alerts")],
 		ngImport: i0,
-		template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n",
+		template: "<!-- A minimum width and 8px of padding all round are for a floating popover, which has nothing around the list and would collapse on a\n     short one. In a panel they were wrong: the minimum made the list wider than the room it is given (320px in the 286px of the settings\n     on a phone, clipped) and the padding pushed its rows 8px in from the headings of the page, where the container sets both. -->\n<div\n  class=\"flex flex-col gap-(--spacing-3xs)\"\n  [class.min-w-80]=\"!!floating\"\n  [class.p-2]=\"!!floating\">\n  <div class=\"flex items-center gap-(--spacing-2xs)\" [class.ps-2]=\"!!floating\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative block w-full cursor-pointer rounded-(--radius-sm) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Touch: drag the row to the left to delete it (the undo notice below is the safety net). The cross at the end of the row is\n             then out of sight (`pointer-coarse:sr-only`) but still there for a screen reader or a switch, which cannot swipe. The\n             layout of the row is the sliding layer's: the row itself only carries the hover tint, the focus ring and the drag look. -->\n        <SwipeAction\n          class=\"rounded-(--radius-sm)\"\n          contentClass=\"flex min-h-12 w-full items-center gap-(--spacing-3xs) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs)\"\n          endEnabled\n          endTone=\"error\"\n          (swipedEnd)=\"deleteAlert(alert)\">\n          <span swipeActionEnd class=\"flex items-center gap-2\">\n            {{ \"alerts.deleteAlert\" | transloco }}\n            <XMarkIcon class=\"size-4\" />\n          </span>\n          <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n          <grip-vertical-icon\n            class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n            [class.invisible]=\"visible().length < 2\" />\n          @if (alert.active) {\n            <bell-icon class=\"shrink-0\" />\n          } @else {\n            <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n          }\n          <!-- The text block carries the tooltip that shows the name and the second line whole, when either is cut off (a mouse hovers it;\n             a finger has the info button below). Both lines are always in the DOM, the second one hidden when there is nothing in it, so\n             that the row can ask each whether it is cut off. -->\n          <span\n            #tip=\"tooltip\"\n            class=\"flex min-w-0 flex-1 flex-col\"\n            [tooltip]=\"fullText(alert)\"\n            [tooltipDisabled]=\"\n              !(cutName.isTruncated() || cutSummary.isTruncated())\n            \">\n            <span\n              truncated\n              #cutName=\"truncated\"\n              class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n              >{{ name }}</span\n            >\n            <span\n              truncated\n              #cutSummary=\"truncated\"\n              [class]=\"\n                summaryOf(alert).length\n                  ? 'line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)'\n                  : 'hidden'\n              \">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          </span>\n          @if (cutName.isTruncated() || cutSummary.isTruncated()) {\n            <!-- Touch only: there is no hover to show the tooltip with. In data-row-action, so a tap on it does not open the form of the row. -->\n            <span data-row-action class=\"flex shrink-0 items-center\">\n              <button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"sm\"\n                [iconOnly]=\"true\"\n                class=\"hidden text-(--font-neutral-muted) pointer-coarse:inline-flex pointer-coarse:size-9\"\n                [attr.aria-label]=\"'alerts.showFullText' | transloco\"\n                (click)=\"toggleText(tip)\">\n                <InfoCircleIcon />\n              </button>\n            </span>\n          }\n          <span data-row-action class=\"flex shrink-0 items-center\">\n            <Switch\n              [checked]=\"isActive(alert)\"\n              [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n              (checkedChange)=\"toggle(alert, $event)\" />\n          </span>\n          <span data-row-action class=\"flex shrink-0 items-center\">\n            <button\n              variant=\"tertiary\"\n              size=\"sm\"\n              [iconOnly]=\"true\"\n              class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:sr-only\"\n              [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n              [attr.aria-label]=\"\n                'alerts.deleteAlertNamed' | transloco: { name }\n              \"\n              (click)=\"deleteAlert(alert)\">\n              <XMarkIcon />\n            </button>\n          </span>\n        </SwipeAction>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  <!-- The keys to reorder a row mean nothing to a finger (the handle is hidden there too), and nothing without a keyboard. -->\n  @if (visible().length > 1 && keyboardAvailable()) {\n    <p\n      class=\"m-0 pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\"\n      [class.ps-2]=\"!!floating\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -19397,6 +19950,22 @@ var AlertsComponent = class AlertsComponent {
 				selector: "[sortableItem]",
 				inputs: ["sortableItem", "sortableItemDisabled"]
 			},
+			{
+				kind: "component",
+				type: SwipeActionComponent,
+				selector: "swipe-action, SwipeAction",
+				inputs: [
+					"class",
+					"contentClass",
+					"startEnabled",
+					"endEnabled",
+					"startTone",
+					"endTone",
+					"disabled",
+					"threshold"
+				],
+				outputs: ["swipedStart", "swipedEnd"]
+			},
 			{
 				kind: "component",
 				type: BellIcon,
@@ -19415,16 +19984,55 @@ var AlertsComponent = class AlertsComponent {
 				selector: "grip-vertical, grip-vertical-icon, GripVertical, GripVerticalIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: InfoCircleIcon,
+				selector: "info-circle, info-circle-icon, InfoCircle, InfoCircleIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: PlusIcon,
 				selector: "plus, plus-icon, Plus, PlusIcon",
 				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: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -19462,16 +20070,20 @@ i0.ɵɵngDeclareClassMetadata({
 				SwitchComponent,
 				SortableDirective,
 				SortableItemDirective,
+				SwipeActionComponent,
 				BellIcon,
 				BellSlashIcon,
 				GripVerticalIcon,
+				InfoCircleIcon,
 				PlusIcon,
-				TrashIcon,
+				TooltipDirective,
+				TruncatedDirective,
+				XMarkIcon,
 				ListPanelEmptyComponent,
 				AlertSaveErrorComponent
 			],
 			providers: [provideTranslocoScope("alerts")],
-			template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n"
+			template: "<!-- A minimum width and 8px of padding all round are for a floating popover, which has nothing around the list and would collapse on a\n     short one. In a panel they were wrong: the minimum made the list wider than the room it is given (320px in the 286px of the settings\n     on a phone, clipped) and the padding pushed its rows 8px in from the headings of the page, where the container sets both. -->\n<div\n  class=\"flex flex-col gap-(--spacing-3xs)\"\n  [class.min-w-80]=\"!!floating\"\n  [class.p-2]=\"!!floating\">\n  <div class=\"flex items-center gap-(--spacing-2xs)\" [class.ps-2]=\"!!floating\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative block w-full cursor-pointer rounded-(--radius-sm) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Touch: drag the row to the left to delete it (the undo notice below is the safety net). The cross at the end of the row is\n             then out of sight (`pointer-coarse:sr-only`) but still there for a screen reader or a switch, which cannot swipe. The\n             layout of the row is the sliding layer's: the row itself only carries the hover tint, the focus ring and the drag look. -->\n        <SwipeAction\n          class=\"rounded-(--radius-sm)\"\n          contentClass=\"flex min-h-12 w-full items-center gap-(--spacing-3xs) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs)\"\n          endEnabled\n          endTone=\"error\"\n          (swipedEnd)=\"deleteAlert(alert)\">\n          <span swipeActionEnd class=\"flex items-center gap-2\">\n            {{ \"alerts.deleteAlert\" | transloco }}\n            <XMarkIcon class=\"size-4\" />\n          </span>\n          <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n          <grip-vertical-icon\n            class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n            [class.invisible]=\"visible().length < 2\" />\n          @if (alert.active) {\n            <bell-icon class=\"shrink-0\" />\n          } @else {\n            <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n          }\n          <!-- The text block carries the tooltip that shows the name and the second line whole, when either is cut off (a mouse hovers it;\n             a finger has the info button below). Both lines are always in the DOM, the second one hidden when there is nothing in it, so\n             that the row can ask each whether it is cut off. -->\n          <span\n            #tip=\"tooltip\"\n            class=\"flex min-w-0 flex-1 flex-col\"\n            [tooltip]=\"fullText(alert)\"\n            [tooltipDisabled]=\"\n              !(cutName.isTruncated() || cutSummary.isTruncated())\n            \">\n            <span\n              truncated\n              #cutName=\"truncated\"\n              class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n              >{{ name }}</span\n            >\n            <span\n              truncated\n              #cutSummary=\"truncated\"\n              [class]=\"\n                summaryOf(alert).length\n                  ? 'line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)'\n                  : 'hidden'\n              \">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          </span>\n          @if (cutName.isTruncated() || cutSummary.isTruncated()) {\n            <!-- Touch only: there is no hover to show the tooltip with. In data-row-action, so a tap on it does not open the form of the row. -->\n            <span data-row-action class=\"flex shrink-0 items-center\">\n              <button\n                type=\"button\"\n                variant=\"tertiary\"\n                size=\"sm\"\n                [iconOnly]=\"true\"\n                class=\"hidden text-(--font-neutral-muted) pointer-coarse:inline-flex pointer-coarse:size-9\"\n                [attr.aria-label]=\"'alerts.showFullText' | transloco\"\n                (click)=\"toggleText(tip)\">\n                <InfoCircleIcon />\n              </button>\n            </span>\n          }\n          <span data-row-action class=\"flex shrink-0 items-center\">\n            <Switch\n              [checked]=\"isActive(alert)\"\n              [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n              (checkedChange)=\"toggle(alert, $event)\" />\n          </span>\n          <span data-row-action class=\"flex shrink-0 items-center\">\n            <button\n              variant=\"tertiary\"\n              size=\"sm\"\n              [iconOnly]=\"true\"\n              class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:sr-only\"\n              [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n              [attr.aria-label]=\"\n                'alerts.deleteAlertNamed' | transloco: { name }\n              \"\n              (click)=\"deleteAlert(alert)\">\n              <XMarkIcon />\n            </button>\n          </span>\n        </SwipeAction>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  <!-- The keys to reorder a row mean nothing to a finger (the handle is hidden there too), and nothing without a keyboard. -->\n  @if (visible().length > 1 && keyboardAvailable()) {\n    <p\n      class=\"m-0 pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\"\n      [class.ps-2]=\"!!floating\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -21384,7 +21996,7 @@ var ListPanelComponent = class ListPanelComponent {
             <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
               [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
               (click)="onDelete(item, i, $event)">
-              <TrashIcon />
+              <XMarkIcon />
             </ListItemAction>
           }
         </ListItem>
@@ -21410,8 +22022,8 @@ var ListPanelComponent = class ListPanelComponent {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -21470,7 +22082,7 @@ i0.ɵɵngDeclareClassMetadata({
 			providers: [provideTranslocoScope("list-panel")],
 			imports: [
 				NgTemplateOutlet,
-				TrashIcon,
+				XMarkIcon,
 				TranslocoPipe,
 				ListComponent,
 				ListItemComponent,
@@ -21491,7 +22103,7 @@ i0.ɵɵngDeclareClassMetadata({
             <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
               [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
               (click)="onDelete(item, i, $event)">
-              <TrashIcon />
+              <XMarkIcon />
             </ListItemAction>
           }
         </ListItem>
@@ -21585,6 +22197,7 @@ i0.ɵɵngDeclareClassMetadata({
 var ListPanelFooterComponent = class ListPanelFooterComponent {
 	cn = cn;
 	class = input(...ngDevMode ? [void 0, { debugName: "class" }] : /* istanbul ignore next */ []);
+	keyboardAvailable = injectKeyboardAvailable();
 	hasMore = input.required(...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
 	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
 	loadMore = output();
@@ -21657,8 +22270,8 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
            focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
            aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
            d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
-           ligne. -->
-      @if (navigationHint()) {
+           ligne. Absente quand la page se pilote au doigt (provideInputModality) : sans clavier, elle n'apprend rien. -->
+      @if (navigationHint() && keyboardAvailable()) {
         <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
           <span class="inline-flex items-center gap-(--spacing-2xs)">
             <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
@@ -21770,8 +22383,8 @@ i0.ɵɵngDeclareClassMetadata({
            focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
            aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
            d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
-           ligne. -->
-      @if (navigationHint()) {
+           ligne. Absente quand la page se pilote au doigt (provideInputModality) : sans clavier, elle n'apprend rien. -->
+      @if (navigationHint() && keyboardAvailable()) {
         <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
           <span class="inline-flex items-center gap-(--spacing-2xs)">
             <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
@@ -26153,7 +26766,7 @@ var AggregationDateComponent = class AggregationDateComponent {
 		host: { properties: { "class": "cn(\"@container flex h-[inherit] max-h-[inherit] flex-col\", class(), isEmpty() && \"hidden\")" } },
 		providers: [provideTranslocoScope("filters")],
 		ngImport: i0,
-		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"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 px-1 pt-1 pb-3\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-0.5 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 items-center [&_.radio-label]:text-sm [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-0.5 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 [&_.radio-label]:text-sm [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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",
+		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"lg\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          size=\"lg\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\n    <div\n      class=\"flex min-h-0 flex-1 flex-col\"\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex min-h-0 flex-1 snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto px-1 pt-1 pb-3\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\n         scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
 		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: [
 			{
@@ -26285,7 +26898,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TooltipDirective
 			],
 			host: { "[class]": "cn(\"@container flex h-[inherit] max-h-[inherit] flex-col\", class(), isEmpty() && \"hidden\")" },
-			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"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 px-1 pt-1 pb-3\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center p-0.5 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 items-center [&_.radio-label]:text-sm [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex cursor-pointer items-center gap-(--spacing-xs) p-0.5 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 [&_.radio-label]:text-sm [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\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",
+			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion). A facet is a\n     disclosure, not a grid row: see `aggregation-panel.html` for the why (same pattern, duplicated here\n     since this facet type doesn't go through `AggregationPanelComponent`). The `<summary>` itself is\n     `tabindex=\"-1\"`: the header's chevron is the keyboard stop, see the chevron below. Clear and apply are not in the\n     header: they are in the body, in a bar at the top of the facet. -->\n<ng-template #content>\n  <!-- content wrapper -->\n  <!-- RGAA 11.5 / WCAG 1.3.1: the radios below all share one `name`, so they are one set\n       and have to be exposed as one. `role=\"group\"` here rather than `role=\"radiogroup\"`\n       on the list: a radiogroup owns its radios directly, and the <li> in between would be\n       invalid owned children — the list would also stop announcing how many options it\n       holds. The name is the aggregation's own title, the words the header already shows;\n       with no title the group stays unnamed rather than carrying an empty label. -->\n  @let groupName = aggregation()?.display;\n  <form\n    class=\"flex min-h-0 flex-1 flex-col\"\n    (keydown.enter)=\"onOptionEnter($event)\">\n    <!-- The same bar as for the list and the tree, in a popover and in the filters drawer alike: clear (a button with a text, there but disabled when there is nothing\n         to clear) and, while a choice is pending, apply, without an icon. There is no search field here to put them under:\n         they sit at the top of the facet. -->\n    <div class=\"flex shrink-0 items-center justify-end gap-1 pt-1 pl-1\">\n      <button\n        type=\"button\"\n        variant=\"tertiary\"\n        size=\"lg\"\n        class=\"shrink-0\"\n        [disabled]=\"!hasFilters() && !selection()\"\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n        (click)=\"clear()\">\n        {{ \"filters.clearAll\" | transloco }}\n      </button>\n      @if (\n        (!isControlled() || emitOn() === \"apply\") &&\n        selection() &&\n        validSelection()\n      ) {\n        <button\n          type=\"button\"\n          variant=\"accent\"\n          size=\"lg\"\n          class=\"shrink-0 overflow-hidden\"\n          (click)=\"apply()\">\n          <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n        </button>\n      }\n    </div>\n    <div\n      class=\"flex min-h-0 flex-1 flex-col\"\n      role=\"group\"\n      [attr.aria-label]=\"groupName ? (groupName | syslang | transloco) : null\">\n      <ul\n        class=\"flex min-h-0 flex-1 snap-y snap-start scrollbar-thin flex-col gap-0.5 overflow-auto px-1 pt-1 pb-3\"\n        role=\"list\">\n        @for (option of dateOptions(); track option.display) {\n          <li\n            role=\"listitem\"\n            [attr.aria-label]=\"\n              maskedLabel(option) ?? (option.display | syslang | transloco)\n            \"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex min-h-9 cursor-pointer items-center px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8',\n                dateModel().option === option.display &&\n                  'bg-(--bg-primary-lighter)',\n                option.hidden && 'hidden',\n                option.disabled && 'pointer-events-none opacity-40'\n              )\n            \"\n            [attr.aria-hidden]=\"option.disabled\">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === option.display\"\n              [disabled]=\"option.disabled\"\n              (checkedChange)=\"selectOption(option.display)\">\n              {{\n                maskedLabel(option) ?? (option.display | syslang | transloco)\n              }}\n            </radio>\n          </li>\n        }\n\n        @if (allowCustomRange) {\n          <li\n            role=\"listitem\"\n            aria-label=\"open date range picker\"\n            [class]=\"\n              cn(\n                itemStateClass,\n                'flex min-h-9 cursor-pointer items-center gap-(--spacing-xs) px-2 py-0.5 text-base text-(--font-neutral-base) select-none [&>radio>label]:min-h-8 [&>radio>label]:max-w-full [&>radio>label]:min-w-0',\n                dateModel().option === 'custom-range' &&\n                  'bg-(--bg-primary-lighter)'\n              )\n            \">\n            <radio\n              name=\"date-filter\"\n              class=\"grow items-center [&_.radio-label]:text-base [&_.radio-label]:leading-6 [&_.radio-label]:font-normal\"\n              [checked]=\"dateModel().option === 'custom-range'\"\n              (checkedChange)=\"selectOption('custom-range')\">\n              <!-- `<radio>` is `display: contents`: its `<label>` is a child of the `<li>` in the box tree but not in the DOM, hence\n                   the `[&>radio>label]` of the row above. Every box of the chain down to the inputs may shrink (`min-w-0`, no fixed `min-w-[18ch]`): in the 15.5rem popover the\n                   label, the field and the radio do not fit side by side, and a box that cannot shrink spills out of it and is clipped.\n                   The fields have a definite width (`w-[18ch]`) that may shrink (`max-w-full min-w-0`). On a touch screen the text is 16px\n                   instead of 14px, which is what made the row wider than the 15.5rem popover. -->\n              <div class=\"flex min-w-0 flex-wrap items-center gap-x-1 gap-y-1\">\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"startId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate\"\n                    >{{ \"filters.from\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"startId\"\n                      name=\"start\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeFrom()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n                <div class=\"flex min-w-0 items-center gap-1\">\n                  <label\n                    [attr.for]=\"endId\"\n                    class=\"radio-label min-w-8 shrink-0 truncate text-right\"\n                    >{{ \"filters.to\" | transloco }}</label\n                  >\n                  <input-group\n                    class=\"h-8 w-[18ch] max-w-full min-w-0 has-[[readonly]]:border-(--stroke-primary-muted)\">\n                    <input\n                      input-control\n                      [id]=\"endId\"\n                      name=\"end\"\n                      type=\"text\"\n                      readonly\n                      [value]=\"customRangeTo()\"\n                      (click)=\"selectAndOpenDialog()\"\n                      (keydown.enter)=\"onRangeInputEnter($event)\" />\n                  </input-group>\n                </div>\n              </div>\n            </radio>\n          </li>\n        }\n      </ul>\n    </div>\n  </form>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col space-y-2 p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\">\n    <!-- `p-0.5` on the details: the one of AggregationPanel (the list and the tree), so the header and its chevron sit on the same\n         lines as theirs in the aside filters and the filters panel — without it the chevron was 2px further right.\n         scroll-mb-3/scroll-mt-16: see aggregation-panel-row.html for the full rationale\n       (bottom margin against the container's edge, much bigger top margin to also clear\n       <More>'s sticky facet-name search box when navigating ArrowUp). -->\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible()\"\n      [class]=\"rowStateClass\"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-content select=\"label\">\n        @let icon = aggregation()?.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n        }\n        <span class=\"grow\">{{\n          aggregation()?.display | syslang | transloco\n        }}</span>\n      </ng-content>\n\n      @if (collapsible()) {\n        <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n           collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n           exposes `aria-expanded`. -->\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          [aria-label]=\"'filters.toggle' | transloco\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          [tooltip]=\"'filters.toggle' | transloco\"\n          class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevron-right class=\"shrink-0\" />\n        </button>\n      }\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </details>\n}\n",
 			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"]
 		}]
 	}],
@@ -26821,7 +27434,7 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"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 text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-sm [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
+		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"md\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"lg\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"lg\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
 		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: [
 			{
@@ -26966,7 +27579,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("filters")],
 			host: { class: "flex min-h-0 flex-1 flex-col" },
-			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"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 text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-sm [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
+			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"md\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\n  <ng-content select=\"label\">\n    @let icon = aggregation()?.icon;\n    @if (icon) {\n      <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n    }\n    <span class=\"grow truncate\">{{\n      aggregation()?.display | syslang | transloco\n    }}</span>\n  </ng-content>\n</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"md\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `px-0.5`: the box clips what is outside it, and the focus ring of the field is drawn outside the field (1px past its\n             border), so it needs a little room on each side. No negative margin to take it back: it pushed that room OUTSIDE\n             the box, into the clipping of the popover or the drawer around, and the ring was cut on both sides. -->\n        <div class=\"min-h-0 overflow-hidden px-0.5\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"lg\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"lg\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The text lines up with the items' too: same gap\n           after the box (`gap-2`) and same size (`text-sm`, where the checkbox's own label would be 12px). The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center gap-2 py-1.5 [&_.checkbox-label]:truncate [&_.checkbox-label]:text-base [&_.checkbox-label]:leading-6 [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <!-- The placeholder rows of a loading page are not here: they are rows of the scrolling area, in the list and the tree\n           (AggregationLoadMoreSkeleton). Here, between the list and the button, they would shorten the list. -->\n      <!-- `variant=\"none\"`: galactik's ButtonComponent matches every <button> and would otherwise dress this one as a primary\n           button (filled, rounded, 36px high). `none` leaves the classes below as the only style. -->\n      <!-- `aria-disabled`, not `disabled`: the focus stays on the button while the page loads. The accessible name stays\n           \"load more\" and `aria-busy` tells that it is working, so no extra text has to be translated by the application. -->\n      <button\n        type=\"button\"\n        data-load-more=\"button\"\n        variant=\"none\"\n        class=\"mt-1 flex w-full shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) px-2 py-1.5 text-(--font-primary-muted) underline underline-offset-4 hover:bg-(--bg-primary-lighter) hover:text-(--font-primary-base) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) focus-visible:outline-solid aria-busy:cursor-progress aria-busy:no-underline aria-busy:hover:bg-transparent\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        [attr.aria-busy]=\"loading() ? 'true' : null\"\n        [attr.aria-disabled]=\"loading() ? 'true' : null\"\n        (click)=\"requestMore()\">\n        <!-- Both states share one grid cell: the button keeps its width and height when the text gives way to the dots. -->\n        <span class=\"inline-grid\">\n          <span class=\"col-start-1 row-start-1\" [class.invisible]=\"loading()\">\n            {{ \"loadMore\" | transloco }}\n          </span>\n          @if (loading()) {\n            <loading-dots size=\"sm\" class=\"col-start-1 row-start-1\" />\n          }\n        </span>\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
 			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"]
 		}]
 	}],
@@ -27849,7 +28462,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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton variant=\"tree\" [showCount]=\"showCount()\" />\n    }\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",
+		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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton variant=\"tree\" [showCount]=\"showCount()\" />\n    }\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-1.5 ps-0.5 text-base 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-sm\" 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",
@@ -28069,7 +28682,7 @@ i0.ɵɵngDeclareClassMetadata({
 				AggregationLoadMoreSkeletonComponent
 			],
 			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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton variant=\"tree\" [showCount]=\"showCount()\" />\n    }\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"
+			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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton variant=\"tree\" [showCount]=\"showCount()\" />\n    }\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-1.5 ps-0.5 text-base 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-sm\" 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: () => [],
@@ -28263,6 +28876,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const ROW_ESTIMATE = 36;
 let nextDescriptionScope = 0;
 var AggregationListComponent = class AggregationListComponent {
 	cn = cn;
@@ -28376,7 +28990,7 @@ var AggregationListComponent = class AggregationListComponent {
 	cdr = inject(ChangeDetectorRef);
 	virtualizer = injectVirtualizer(() => ({
 		count: this.items().length,
-		estimateSize: () => 28,
+		estimateSize: () => ROW_ESTIMATE,
 		gap: 2,
 		scrollElement: this.scrollElement()
 	}));
@@ -28781,7 +29395,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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton [showCount]=\"showCount()\" />\n    }\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",
+		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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton [showCount]=\"showCount()\" />\n    }\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-h-8 min-w-0 grow items-center gap-2 text-base 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-sm empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -28970,7 +29584,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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton [showCount]=\"showCount()\" />\n    }\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"
+			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  [loading]=\"loadingMore()\"\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    @if (loadingMore() && searchedItems().length === 0) {\n      <AggregationLoadMoreSkeleton [showCount]=\"showCount()\" />\n    }\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-h-8 min-w-0 grow items-center gap-2 text-base 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-sm empty:hidden\" aria-hidden=\"true\">{{\n          item.count\n        }}</span>\n      }\n    }\n  </a>\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -33205,7 +33819,7 @@ var FiltersBarComponent = class FiltersBarComponent {
           class="shrink-0 size-9 bg-(--bg-error-base) text-(--font-neutral-white) hover:bg-(--bg-error-base-alt) focus-visible:bg-(--bg-error-base-alt)"
           [title]="'filters.clearAllFilters' | transloco"
           (click)="clearFilters()">
-          <trash-can-icon />
+          <x-mark-icon />
         </button>
       }
 
@@ -33350,8 +33964,8 @@ var FiltersBarComponent = class FiltersBarComponent {
 			},
 			{
 				kind: "component",
-				type: TrashCanIcon,
-				selector: "trash-can, trash-can-icon, TrashCan, TrashCanIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -33385,7 +33999,7 @@ i0.ɵɵngDeclareClassMetadata({
 				OverflowItemDirective,
 				OverflowStopDirective,
 				TranslocoPipe,
-				TrashCanIcon,
+				XMarkIcon,
 				InboxIcon
 			],
 			providers: [provideTranslocoScope("filters")],
@@ -33405,7 +34019,7 @@ i0.ɵɵngDeclareClassMetadata({
           class="shrink-0 size-9 bg-(--bg-error-base) text-(--font-neutral-white) hover:bg-(--bg-error-base-alt) focus-visible:bg-(--bg-error-base-alt)"
           [title]="'filters.clearAllFilters' | transloco"
           (click)="clearFilters()">
-          <trash-can-icon />
+          <x-mark-icon />
         </button>
       }
 
@@ -33703,6 +34317,7 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 	transloco = inject(TranslocoService);
 	host = inject(ElementRef);
 	injector = inject(Injector);
+	isTouch = inject(BreakpointObserverService).isTouch;
 	deleteKeys = isApplePlatform() ? ["Delete", "Backspace"] : ["Delete"];
 	quickFilters = computed(() => this.userSettingsStore.quickFilters() ?? [], ...ngDevMode ? [{ debugName: "quickFilters" }] : /* istanbul ignore next */ []);
 	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
@@ -33715,6 +34330,7 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 	detailsCard = viewChild("detailsCard", ...ngDevMode ? [{ debugName: "detailsCard" }] : /* istanbul ignore next */ []);
 	hideTimer;
 	deleting = signal(false, ...ngDevMode ? [{ debugName: "deleting" }] : /* istanbul ignore next */ []);
+	restoringFocus = false;
 	constructor() {
 		injectFloatingPanel({
 			panel: () => this.detailsCard()?.nativeElement,
@@ -33743,6 +34359,26 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 			anchor
 		});
 	}
+	onRowFocus(quickFilter, anchor) {
+		if (!this.restoringFocus && !this.isTouch()) this.showDetails(quickFilter, anchor);
+	}
+	onCountEnter(quickFilter, anchor) {
+		if (!this.isTouch()) this.showDetails(quickFilter, anchor);
+	}
+	toggleDetails(quickFilter, anchor, event) {
+		event.stopPropagation();
+		if (this.details()?.quickFilter === quickFilter) {
+			this.cancelHideDetails();
+			this.details.set(null);
+		} else this.showDetails(quickFilter, anchor);
+	}
+	onDocumentPointerDown(event) {
+		if (!this.details()) return;
+		const target = event.target;
+		if (this.detailsCard()?.nativeElement.contains(target) || target?.closest("[data-details-toggle]")) return;
+		this.cancelHideDetails();
+		this.details.set(null);
+	}
 	scheduleHideDetails() {
 		this.cancelHideDetails();
 		this.hideTimer = setTimeout(() => this.details.set(null), 100);
@@ -33769,7 +34405,7 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 		this.applied.emit(quickFilter);
 	}
 	async remove(quickFilter, index, event) {
-		event.stopPropagation();
+		event?.stopPropagation();
 		if (this.deleting()) return;
 		this.deleting.set(true);
 		this.cancelHideDetails();
@@ -33783,7 +34419,12 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 			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();
+				this.restoringFocus = true;
+				try {
+					(rows.length ? rows[Math.min(index, rows.length - 1)] : this.host.nativeElement).focus();
+				} finally {
+					this.restoringFocus = false;
+				}
 			}, { injector: this.injector });
 		} finally {
 			this.deleting.set(false);
@@ -33832,7 +34473,10 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 		},
 		host: {
 			attributes: { "tabindex": "-1" },
-			listeners: { "keydown.escape": "onEscape($event)" },
+			listeners: {
+				"keydown.escape": "onEscape($event)",
+				"document:pointerdown": "onDocumentPointerDown($event)"
+			},
 			classAttribute: "flex min-h-0 flex-col gap-(--spacing-xs) outline-none"
 		},
 		providers: [provideTranslocoScope("quick-filters")],
@@ -33867,10 +34511,17 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
         [value]="picked()"
         (valueChange)="pick($event)">
         @for (quickFilter of filtered(); track quickFilter.id; let index = $index) {
+          <!-- Touch: drag the row to the left to delete it, which replaces the cross (hidden there, see the row's class). -->
+          <SwipeAction endEnabled [disabled]="!deletable()" endTone="error" (swipedEnd)="remove(quickFilter, index)">
+            <span swipeActionEnd class="flex items-center gap-2">
+              {{ "quickFilters.swipeDelete" | transloco }}
+              <x-mark-icon class="size-4" />
+            </span>
           <ListItem
             [value]="quickFilter"
             [label]="quickFilter.name"
-            (focusin)="showDetails(quickFilter, count)"
+            class="pointer-coarse:[&_.list-item-icon-right]:hidden!"
+            (focusin)="onRowFocus(quickFilter, count)"
             (focusout)="scheduleHideDetails()">
             <ListItemLeft>
               <ListItemIcon><quick-filter-icon /></ListItemIcon>
@@ -33883,11 +34534,20 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
                   #count
                   data-count
                   class="list-item-subtext block w-fit! decoration-dotted underline-offset-2 hover:underline"
-                  (mouseenter)="showDetails(quickFilter, count)"
+                  (mouseenter)="onCountEnter(quickFilter, count)"
                   (mouseleave)="scheduleHideDetails()">
                   {{ (quickFilter.filters.length === 1 ? "quickFilters.countOne" : "quickFilters.countOther") | transloco: { count: quickFilter.filters.length } }}
                 </span>
               </ListItemText>
+              <!-- Touch only: there is no hover to show what the quick filter holds, and a tap on the row applies it. This opens the card
+                   instead. Not a button (a listbox option holds no control, see ListItemAction): the keyboard has the focus of the row. -->
+              <span
+                data-details-toggle
+                aria-hidden="true"
+                class="hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) text-(--font-neutral-muted) pointer-coarse:inline-flex active:bg-(--bg-neutral-base)"
+                (click)="toggleDetails(quickFilter, count, $event)">
+                <info-circle-icon class="size-5" />
+              </span>
             </ListItemLeft>
             @if (deletable()) {
               <ListItemAction
@@ -33900,6 +34560,7 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
               </ListItemAction>
             }
           </ListItem>
+          </SwipeAction>
         }
       </List>
 
@@ -33949,6 +34610,12 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 				selector: "fa-icon, FaIcon",
 				inputs: ["faClass", "class"]
 			},
+			{
+				kind: "component",
+				type: InfoCircleIcon,
+				selector: "info-circle, info-circle-icon, InfoCircle, InfoCircleIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "directive",
 				type: ListComponent,
@@ -34015,6 +34682,22 @@ var QuickFiltersListComponent = class QuickFiltersListComponent {
 				type: SearchInputComponent,
 				selector: "SearchInput:not([suggestions]), search-input:not([suggestions]), searchinput:not([suggestions])"
 			},
+			{
+				kind: "component",
+				type: SwipeActionComponent,
+				selector: "swipe-action, SwipeAction",
+				inputs: [
+					"class",
+					"contentClass",
+					"startEnabled",
+					"endEnabled",
+					"startTone",
+					"endTone",
+					"disabled",
+					"threshold"
+				],
+				outputs: ["swipedStart", "swipedEnd"]
+			},
 			{
 				kind: "directive",
 				type: TooltipDirective,
@@ -34074,6 +34757,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				FaIconComponent,
+				InfoCircleIcon,
 				ListComponent,
 				ListItemComponent,
 				ListItemActionComponent,
@@ -34082,6 +34766,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemTextComponent,
 				QuickFilterIcon,
 				SearchInputComponent,
+				SwipeActionComponent,
 				TooltipDirective,
 				TruncatedDirective,
 				XMarkIcon
@@ -34090,7 +34775,8 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: "flex min-h-0 flex-col gap-(--spacing-xs) outline-none",
 				tabindex: "-1",
-				"(keydown.escape)": "onEscape($event)"
+				"(keydown.escape)": "onEscape($event)",
+				"(document:pointerdown)": "onDocumentPointerDown($event)"
 			},
 			template: `
     @if (searchable() && quickFilters().length > 0) {
@@ -34115,10 +34801,17 @@ i0.ɵɵngDeclareClassMetadata({
         [value]="picked()"
         (valueChange)="pick($event)">
         @for (quickFilter of filtered(); track quickFilter.id; let index = $index) {
+          <!-- Touch: drag the row to the left to delete it, which replaces the cross (hidden there, see the row's class). -->
+          <SwipeAction endEnabled [disabled]="!deletable()" endTone="error" (swipedEnd)="remove(quickFilter, index)">
+            <span swipeActionEnd class="flex items-center gap-2">
+              {{ "quickFilters.swipeDelete" | transloco }}
+              <x-mark-icon class="size-4" />
+            </span>
           <ListItem
             [value]="quickFilter"
             [label]="quickFilter.name"
-            (focusin)="showDetails(quickFilter, count)"
+            class="pointer-coarse:[&_.list-item-icon-right]:hidden!"
+            (focusin)="onRowFocus(quickFilter, count)"
             (focusout)="scheduleHideDetails()">
             <ListItemLeft>
               <ListItemIcon><quick-filter-icon /></ListItemIcon>
@@ -34131,11 +34824,20 @@ i0.ɵɵngDeclareClassMetadata({
                   #count
                   data-count
                   class="list-item-subtext block w-fit! decoration-dotted underline-offset-2 hover:underline"
-                  (mouseenter)="showDetails(quickFilter, count)"
+                  (mouseenter)="onCountEnter(quickFilter, count)"
                   (mouseleave)="scheduleHideDetails()">
                   {{ (quickFilter.filters.length === 1 ? "quickFilters.countOne" : "quickFilters.countOther") | transloco: { count: quickFilter.filters.length } }}
                 </span>
               </ListItemText>
+              <!-- Touch only: there is no hover to show what the quick filter holds, and a tap on the row applies it. This opens the card
+                   instead. Not a button (a listbox option holds no control, see ListItemAction): the keyboard has the focus of the row. -->
+              <span
+                data-details-toggle
+                aria-hidden="true"
+                class="hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-(--radius-xs) text-(--font-neutral-muted) pointer-coarse:inline-flex active:bg-(--bg-neutral-base)"
+                (click)="toggleDetails(quickFilter, count, $event)">
+                <info-circle-icon class="size-5" />
+              </span>
             </ListItemLeft>
             @if (deletable()) {
               <ListItemAction
@@ -34148,6 +34850,7 @@ i0.ɵɵngDeclareClassMetadata({
               </ListItemAction>
             }
           </ListItem>
+          </SwipeAction>
         }
       </List>
 
@@ -34969,6 +35672,8 @@ var MultiSelectLabelsComponent = class MultiSelectLabelsComponent {
 				"fieldLabelLang",
 				"placeholder",
 				"ariaLabel",
+				"hideKeyboardLabel",
+				"keyboardLabel",
 				"noResultsText",
 				"searchingText",
 				"errorText",
@@ -35411,7 +36116,8 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 const ROW_BUTTON = "flex size-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border-0 bg-transparent p-0 transition-[max-width,opacity,background-color,color] duration-150 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-(--stroke-focus) focus-visible:-outline-offset-2";
-const ROW_BUTTON_HIDDEN = "max-w-0 opacity-0 group-hover/row:max-w-5 group-hover/row:opacity-100 group-focus-within/row:max-w-5 group-focus-within/row:opacity-100";
+const ROW_BUTTON_HIDDEN = "max-w-0 opacity-0 group-hover/row:max-w-5 group-hover/row:opacity-100 group-focus-within/row:max-w-5 group-focus-within/row:opacity-100 pointer-coarse:sr-only";
+const INFO_BUTTON = "hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-(--history-panel-icon,var(--font-neutral-muted)) active:bg-(--history-panel-active,var(--bg-neutral-hovered)) focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-(--stroke-focus) focus-visible:-outline-offset-2 pointer-coarse:flex";
 const SHEET_CLASSES = [
 	"bg-(--history-panel-bg,var(--layer-page-layer)) text-(--history-panel-fg,var(--layer-page-font))",
 	"[&_.modal-title]:text-(--history-panel-fg,var(--layer-page-font))",
@@ -35432,6 +36138,7 @@ var HistoryPanelComponent = class HistoryPanelComponent {
 	sheetClasses = SHEET_CLASSES;
 	rowButton = ROW_BUTTON;
 	rowButtonHidden = ROW_BUTTON_HIDDEN;
+	infoButton = INFO_BUTTON;
 	asideClasses = computed(() => cn("flex min-h-0 shrink-0 flex-col overflow-hidden whitespace-normal rounded-(--radius-lg) bg-(--history-panel-bg,var(--layer-page-layer)) text-(--history-panel-fg,var(--layer-page-font))", "transition-[width,padding,margin] duration-350 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none", this.open() ? "w-(--history-panel-width,15.625rem) p-(--spacing-xs) ms-(--history-panel-gap,0px)" : "w-0 p-0 ms-0", this.class()), ...ngDevMode ? [{ debugName: "asideClasses" }] : /* istanbul ignore next */ []);
 	searches = computed(() => {
 		const recent = this.userSettingsStore.recentSearches() ?? [];
@@ -35452,6 +36159,10 @@ var HistoryPanelComponent = class HistoryPanelComponent {
 	onTab(value) {
 		if (value[0] === "all" || value[0] === "favorites") this.tab.set(value[0]);
 	}
+	toggleTitle(tip) {
+		if (tip.isOpen()) tip.hide();
+		else tip.show();
+	}
 	onEscape(event) {
 		if (!this.open()) return;
 		event.stopPropagation();
@@ -35572,9 +36283,26 @@ var HistoryPanelComponent = class HistoryPanelComponent {
               </h3>
               <ul class="m-0 flex list-none flex-col gap-(--spacing-3xs) p-0">
                 @for (search of group.items; track search.url) {
-                  <li
-                    historyTitleMarquee
-                    class="group/row flex min-h-8 min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-sm) hover:bg-(--history-panel-hover,var(--bg-neutral-base)) focus-within:bg-(--history-panel-hover,var(--bg-neutral-base)) active:bg-(--history-panel-active,var(--bg-neutral-hovered))">
+                  <li historyTitleMarquee class="group/row min-w-0 rounded-(--radius-sm)">
+                    <!-- Touch: drag the row to the left to delete it, to the right to (un)favorite it. The buttons below are
+                         then out of sight but still there for a screen reader or a switch (see ROW_BUTTON_HIDDEN). -->
+                    <SwipeAction
+                      class="rounded-(--radius-sm)"
+                      contentClass="flex min-h-8 min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-sm) hover:bg-(--history-panel-hover,var(--bg-neutral-base)) focus-within:bg-(--history-panel-hover,var(--bg-neutral-base)) active:bg-(--history-panel-active,var(--bg-neutral-hovered))"
+                      startEnabled
+                      endEnabled
+                      startTone="warning"
+                      endTone="error"
+                      (swipedStart)="toggleFavorite(search)"
+                      (swipedEnd)="remove(search)">
+                    <span swipeActionStart class="flex items-center gap-2">
+                      <star-icon class="size-4" [solid]="!isFavorite(search)" />
+                      {{ (isFavorite(search) ? 'searches.history.removeFavorite' : 'searches.history.addFavorite') | transloco }}
+                    </span>
+                    <span swipeActionEnd class="flex items-center gap-2">
+                      {{ 'searches.recent.remove' | transloco }}
+                      <x-mark-icon class="size-4" />
+                    </span>
                     <button
                       type="button"
                       class="flex min-w-0 flex-1 cursor-pointer items-center gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent py-1.5 ps-(--spacing-2xs) pe-(--spacing-3xs) text-left text-inherit focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-(--stroke-focus) focus-visible:-outline-offset-2"
@@ -35586,12 +36314,22 @@ var HistoryPanelComponent = class HistoryPanelComponent {
                         data-title-box
                         truncated
                         #cut="truncated"
+                        #tip="tooltip"
                         [tooltip]="titleOf(search)"
                         [tooltipDisabled]="!cut.isTruncated()"
                         class="block min-w-0 flex-1 overflow-hidden text-sm leading-[18px] whitespace-nowrap text-(--history-panel-fg,var(--layer-page-font)) [mask-image:linear-gradient(to_right,black_85%,transparent_100%)]">
                         <span class="inline-block whitespace-nowrap">{{ titleOf(search) }}</span>
                       </span>
                     </button>
+                    @if (cut.isTruncated()) {
+                      <button
+                        type="button"
+                        [class]="infoButton"
+                        [attr.aria-label]="'searches.history.showFullTitle' | transloco"
+                        (click)="toggleTitle(tip)">
+                        <info-circle-icon class="size-4" />
+                      </button>
+                    }
                     <span class="flex shrink-0 items-center gap-0.5 pe-(--spacing-2xs)">
                       <button
                         type="button"
@@ -35609,6 +36347,7 @@ var HistoryPanelComponent = class HistoryPanelComponent {
                         <star-icon class="size-3.5" [solid]="isFavorite(search)" />
                       </button>
                     </span>
+                    </SwipeAction>
                   </li>
                 }
               </ul>
@@ -35685,6 +36424,12 @@ var HistoryPanelComponent = class HistoryPanelComponent {
 				type: HistoryTitleMarqueeDirective,
 				selector: "[historyTitleMarquee]"
 			},
+			{
+				kind: "component",
+				type: InfoCircleIcon,
+				selector: "info-circle, info-circle-icon, InfoCircle, InfoCircleIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: ListPanelEmptyComponent,
@@ -35732,6 +36477,22 @@ var HistoryPanelComponent = class HistoryPanelComponent {
 				selector: "star, star-icon, Star, StarIcon",
 				inputs: ["class", "solid"]
 			},
+			{
+				kind: "component",
+				type: SwipeActionComponent,
+				selector: "swipe-action, SwipeAction",
+				inputs: [
+					"class",
+					"contentClass",
+					"startEnabled",
+					"endEnabled",
+					"startTone",
+					"endTone",
+					"disabled",
+					"threshold"
+				],
+				outputs: ["swipedStart", "swipedEnd"]
+			},
 			{
 				kind: "directive",
 				type: ToggleGroupComponent,
@@ -35821,12 +36582,14 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogTitleComponent,
 				HistoryIcon,
 				HistoryTitleMarqueeDirective,
+				InfoCircleIcon,
 				ListPanelEmptyComponent,
 				MagnifyingGlassIcon,
 				SheetBodyComponent,
 				SheetComponent,
 				SheetHeaderComponent,
 				StarIcon,
+				SwipeActionComponent,
 				ToggleGroupComponent,
 				ToggleItemComponent,
 				TooltipDirective,
@@ -35879,9 +36642,26 @@ i0.ɵɵngDeclareClassMetadata({
               </h3>
               <ul class="m-0 flex list-none flex-col gap-(--spacing-3xs) p-0">
                 @for (search of group.items; track search.url) {
-                  <li
-                    historyTitleMarquee
-                    class="group/row flex min-h-8 min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-sm) hover:bg-(--history-panel-hover,var(--bg-neutral-base)) focus-within:bg-(--history-panel-hover,var(--bg-neutral-base)) active:bg-(--history-panel-active,var(--bg-neutral-hovered))">
+                  <li historyTitleMarquee class="group/row min-w-0 rounded-(--radius-sm)">
+                    <!-- Touch: drag the row to the left to delete it, to the right to (un)favorite it. The buttons below are
+                         then out of sight but still there for a screen reader or a switch (see ROW_BUTTON_HIDDEN). -->
+                    <SwipeAction
+                      class="rounded-(--radius-sm)"
+                      contentClass="flex min-h-8 min-w-0 items-center gap-(--spacing-3xs) rounded-(--radius-sm) hover:bg-(--history-panel-hover,var(--bg-neutral-base)) focus-within:bg-(--history-panel-hover,var(--bg-neutral-base)) active:bg-(--history-panel-active,var(--bg-neutral-hovered))"
+                      startEnabled
+                      endEnabled
+                      startTone="warning"
+                      endTone="error"
+                      (swipedStart)="toggleFavorite(search)"
+                      (swipedEnd)="remove(search)">
+                    <span swipeActionStart class="flex items-center gap-2">
+                      <star-icon class="size-4" [solid]="!isFavorite(search)" />
+                      {{ (isFavorite(search) ? 'searches.history.removeFavorite' : 'searches.history.addFavorite') | transloco }}
+                    </span>
+                    <span swipeActionEnd class="flex items-center gap-2">
+                      {{ 'searches.recent.remove' | transloco }}
+                      <x-mark-icon class="size-4" />
+                    </span>
                     <button
                       type="button"
                       class="flex min-w-0 flex-1 cursor-pointer items-center gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent py-1.5 ps-(--spacing-2xs) pe-(--spacing-3xs) text-left text-inherit focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-(--stroke-focus) focus-visible:-outline-offset-2"
@@ -35893,12 +36673,22 @@ i0.ɵɵngDeclareClassMetadata({
                         data-title-box
                         truncated
                         #cut="truncated"
+                        #tip="tooltip"
                         [tooltip]="titleOf(search)"
                         [tooltipDisabled]="!cut.isTruncated()"
                         class="block min-w-0 flex-1 overflow-hidden text-sm leading-[18px] whitespace-nowrap text-(--history-panel-fg,var(--layer-page-font)) [mask-image:linear-gradient(to_right,black_85%,transparent_100%)]">
                         <span class="inline-block whitespace-nowrap">{{ titleOf(search) }}</span>
                       </span>
                     </button>
+                    @if (cut.isTruncated()) {
+                      <button
+                        type="button"
+                        [class]="infoButton"
+                        [attr.aria-label]="'searches.history.showFullTitle' | transloco"
+                        (click)="toggleTitle(tip)">
+                        <info-circle-icon class="size-4" />
+                      </button>
+                    }
                     <span class="flex shrink-0 items-center gap-0.5 pe-(--spacing-2xs)">
                       <button
                         type="button"
@@ -35916,6 +36706,7 @@ i0.ɵɵngDeclareClassMetadata({
                         <star-icon class="size-3.5" [solid]="isFavorite(search)" />
                       </button>
                     </span>
+                    </SwipeAction>
                   </li>
                 }
               </ul>
@@ -38772,6 +39563,10 @@ const userProfileSchema = (editing) => schema((p) => {
 	applyEach(p.customData, (field) => readonly(field, { when: ({ key }) => `customData.${key()}` !== editing() }));
 });
 var UserProfileFormComponent = class UserProfileFormComponent {
+	padded = input(true, {
+		...ngDevMode ? { debugName: "padded" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	principalStore = inject(PrincipalStore);
 	userProfileService = inject(UserProfileService);
 	appStore = inject(AppStore);
@@ -39116,10 +39911,17 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		type: UserProfileFormComponent,
 		isStandalone: true,
 		selector: "user-profile-form, UserProfileForm, userprofileform",
+		inputs: { padded: {
+			classPropertyName: "padded",
+			publicName: "padded",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
 		host: { classAttribute: "flex flex-col h-full overflow-hidden" },
 		providers: [provideTranslocoScope("user-profile", "login")],
 		ngImport: i0,
-		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
+		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2\" [class.p-4]=\"padded()\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <XMarkIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <XMarkIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <XMarkIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -39136,8 +39938,8 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -39323,7 +40125,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FormRoot,
 				FormField,
 				TranslocoPipe,
-				TrashIcon,
+				XMarkIcon,
 				EditIcon,
 				UndoIcon,
 				SaveIcon,
@@ -39341,10 +40143,18 @@ i0.ɵɵngDeclareClassMetadata({
 				ChangePasswordComponent
 			],
 			providers: [provideTranslocoScope("user-profile", "login")],
-			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
+			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2\" [class.p-4]=\"padded()\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <XMarkIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <XMarkIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <XMarkIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
 		}]
 	}],
-	ctorParameters: () => []
+	ctorParameters: () => [],
+	propDecorators: { padded: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "padded",
+			required: false
+		}]
+	}] }
 });
 function toRecord(keys, source) {
 	return Object.fromEntries(keys.map((key) => [key, toFieldText(source?.[key])]));
@@ -39417,7 +40227,7 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
     <p class="text-(--font-primary-muted)">{{ "settings.account.description" | transloco }}</p>
 
     @if (profileEnabled()) {
-      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" />
+      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" [padded]="false" />
     } @else if (allowChangePassword()) {
       <!-- No profile to show: the password is all the account offers, as it was in the user menu. -->
       <change-password
@@ -39488,7 +40298,8 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
 			{
 				kind: "component",
 				type: UserProfileFormComponent,
-				selector: "user-profile-form, UserProfileForm, userprofileform"
+				selector: "user-profile-form, UserProfileForm, userprofileform",
+				inputs: ["padded"]
 			},
 			{
 				kind: "component",
@@ -39537,7 +40348,7 @@ i0.ɵɵngDeclareClassMetadata({
     <p class="text-(--font-primary-muted)">{{ "settings.account.description" | transloco }}</p>
 
     @if (profileEnabled()) {
-      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" />
+      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" [padded]="false" />
     } @else if (allowChangePassword()) {
       <!-- No profile to show: the password is all the account offers, as it was in the user menu. -->
       <change-password
@@ -40014,6 +40825,17 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+function revealInStrip(strip, item, behavior = "smooth") {
+	const stripBox = strip.getBoundingClientRect();
+	const itemBox = item.getBoundingClientRect();
+	const scale = strip.offsetWidth ? stripBox.width / strip.offsetWidth : 1;
+	const delta = (itemBox.left - stripBox.left - (stripBox.width - itemBox.width) / 2) / scale;
+	if (Math.abs(delta) < 1) return;
+	strip.scrollBy({
+		left: delta,
+		behavior
+	});
+}
 var SettingsShortcutsPanelComponent = class SettingsShortcutsPanelComponent {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -40071,6 +40893,8 @@ let active;
 var SettingsDialogComponent = class SettingsDialogComponent {
 	call = injectCallRef();
 	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	strip = viewChild("strip", ...ngDevMode ? [{ debugName: "strip" }] : /* istanbul ignore next */ []);
+	stripPositioned = false;
 	items = [
 		{
 			id: "account",
@@ -40090,7 +40914,26 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		}
 	];
 	panel = signal(this.call.props()?.panel ?? "account", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	keyboardAvailable = injectKeyboardAvailable();
+	visibleItems = computed(() => this.items.filter((item) => item.id !== "shortcuts" || this.keyboardAvailable() || this.panel() === "shortcuts"), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
 	navigated = signal(false, ...ngDevMode ? [{ debugName: "navigated" }] : /* istanbul ignore next */ []);
+	resizeObserver;
+	reveal(strip, current) {
+		const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		revealInStrip(strip, current, this.stripPositioned && !reduced ? "smooth" : "auto");
+		this.stripPositioned = true;
+	}
+	revealWhenLaidOut(strip) {
+		if (this.resizeObserver || typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => {
+			if (!strip.clientWidth) return;
+			this.resizeObserver?.disconnect();
+			this.resizeObserver = void 0;
+			const current = strip.querySelector("[aria-current=\"page\"]");
+			if (current) this.reveal(strip, current);
+		});
+		this.resizeObserver.observe(strip);
+	}
 	navigate(id) {
 		this.navigated.set(true);
 		this.panel.set(id);
@@ -40103,7 +40946,18 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 			return;
 		}
 		active = this;
+		afterRenderEffect({ read: () => {
+			this.panel();
+			this.visibleItems();
+			if (!this.dialog()?.isOpen()) return;
+			const strip = this.strip()?.nativeElement;
+			const current = strip?.querySelector("[aria-current=\"page\"]");
+			if (!strip || !current) return;
+			if (!strip.clientWidth) this.revealWhenLaidOut(strip);
+			else this.reveal(strip, current);
+		} });
 		inject(DestroyRef).onDestroy(() => {
+			this.resizeObserver?.disconnect();
 			if (active === this) active = void 0;
 		});
 		afterNextRender(() => this.dialog()?.open());
@@ -40129,6 +40983,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 			predicate: DialogComponent,
 			descendants: true,
 			isSignal: true
+		}, {
+			propertyName: "strip",
+			first: true,
+			predicate: ["strip"],
+			descendants: true,
+			isSignal: true
 		}],
 		ngImport: i0,
 		template: `
@@ -40136,12 +40996,14 @@ var SettingsDialogComponent = class SettingsDialogComponent {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
         <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
              dialog itself and the panel is a white card set into it. -->
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
+        <!-- Under md (a phone) the navigation does not fit beside the panel, which was left 120px wide: it becomes a strip on top, that scrolls
+             sideways, and the panel takes the rest of the height. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter) max-md:flex-col!">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm) max-md:w-full max-md:flex-row max-md:items-center max-md:gap-(--spacing-2xs) max-md:p-(--spacing-xs)">
             <button
               type="button"
               variant="none"
-              class="modal-close mb-(--spacing-sm)"
+              class="modal-close mb-(--spacing-sm) max-md:mb-0 max-md:shrink-0"
               [attr.aria-label]="'settings.close' | transloco"
               (click)="dialog.close()">
               <XMarkIcon aria-hidden="true" />
@@ -40149,12 +41011,15 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 
             <!-- Panels are a navigation, not a tablist: each one is a button, the current one is
                  flagged with aria-current, which is what a screen reader reads out. -->
-            <nav [attr.aria-label]="'settings.title' | transloco" class="flex flex-col gap-(--spacing-3xs)">
-              @for (item of items; track item.id) {
+            <nav
+              #strip
+              [attr.aria-label]="'settings.title' | transloco"
+              class="flex flex-col gap-(--spacing-3xs) max-md:min-w-0 max-md:flex-1 max-md:flex-row max-md:overflow-x-auto max-md:[scrollbar-width:none]">
+              @for (item of visibleItems(); track item.id) {
                 <button
                   type="button"
                   variant="none"
-                  class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
+                  class="flex h-(--row-height-md) w-full max-md:w-auto max-md:shrink-0 cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
                   (click)="navigate(item.id)">
                   @switch (item.id) {
@@ -40177,7 +41042,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
             </nav>
           </div>
 
-          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) min-h-0 overflow-y-auto max-md:m-(--spacing-xs) max-md:mt-0 max-md:min-w-0 max-md:flex-1 rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -40326,12 +41191,14 @@ i0.ɵɵngDeclareClassMetadata({
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
         <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
              dialog itself and the panel is a white card set into it. -->
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
+        <!-- Under md (a phone) the navigation does not fit beside the panel, which was left 120px wide: it becomes a strip on top, that scrolls
+             sideways, and the panel takes the rest of the height. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter) max-md:flex-col!">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm) max-md:w-full max-md:flex-row max-md:items-center max-md:gap-(--spacing-2xs) max-md:p-(--spacing-xs)">
             <button
               type="button"
               variant="none"
-              class="modal-close mb-(--spacing-sm)"
+              class="modal-close mb-(--spacing-sm) max-md:mb-0 max-md:shrink-0"
               [attr.aria-label]="'settings.close' | transloco"
               (click)="dialog.close()">
               <XMarkIcon aria-hidden="true" />
@@ -40339,12 +41206,15 @@ i0.ɵɵngDeclareClassMetadata({
 
             <!-- Panels are a navigation, not a tablist: each one is a button, the current one is
                  flagged with aria-current, which is what a screen reader reads out. -->
-            <nav [attr.aria-label]="'settings.title' | transloco" class="flex flex-col gap-(--spacing-3xs)">
-              @for (item of items; track item.id) {
+            <nav
+              #strip
+              [attr.aria-label]="'settings.title' | transloco"
+              class="flex flex-col gap-(--spacing-3xs) max-md:min-w-0 max-md:flex-1 max-md:flex-row max-md:overflow-x-auto max-md:[scrollbar-width:none]">
+              @for (item of visibleItems(); track item.id) {
                 <button
                   type="button"
                   variant="none"
-                  class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
+                  class="flex h-(--row-height-md) w-full max-md:w-auto max-md:shrink-0 cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
                   (click)="navigate(item.id)">
                   @switch (item.id) {
@@ -40367,7 +41237,7 @@ i0.ɵɵngDeclareClassMetadata({
             </nav>
           </div>
 
-          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) min-h-0 overflow-y-auto max-md:m-(--spacing-xs) max-md:mt-0 max-md:min-w-0 max-md:flex-1 rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -40390,10 +41260,16 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [],
-	propDecorators: { dialog: [{
-		type: i0.ViewChild,
-		args: [i0.forwardRef(() => DialogComponent), { isSignal: true }]
-	}] }
+	propDecorators: {
+		dialog: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => DialogComponent), { isSignal: true }]
+		}],
+		strip: [{
+			type: i0.ViewChild,
+			args: ["strip", { isSignal: true }]
+		}]
+	}
 });
 const Settings = createCallable(SettingsDialogComponent);
 const auditInterceptorFn = (request, next) => {