@sinequa/atomic-angular 2.4.1 → 2.5.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { getState, patchState, signalStore, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
@@ -6619,7 +6619,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const Export = createCallable(ExportDialog);
-const multiSelectionToolbarVariants = cva("flex divide-x rounded-xl bg-linear-to-b px-3 py-2 shadow [&_ul]:flex [&_ul]:flex-col [&_ul]:p-1 [&>li]:px-2", {
+const multiSelectionToolbarVariants = cva("flex divide-x rounded-xl bg-linear-to-b px-3 py-2 shadow [&_ul]:flex [&_ul]:flex-col [&_ul]:p-1 [&>div]:px-2", {
 	variants: { variant: {
 		dark: "divide-gray-800 bg-gray-900 from-gray-500 to-gray-900 text-white",
 		light: "divide-gray-400 bg-white from-white to-purple-50 text-gray-800",
@@ -6635,7 +6635,9 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 	appFeatures = this.appStore.general();
 	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
 	variant = input("dark", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	hint = input(...ngDevMode ? [void 0, { debugName: "hint" }] : /* istanbul ignore next */ []);
 	updatedCollections = output();
+	cleared = output();
 	count = this.selection.multiSelectCount;
 	variants = computed(() => cn(multiSelectionToolbarVariants({
 		variant: this.variant(),
@@ -6651,7 +6653,27 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 		return `search-results-assistant`;
 	}, ...ngDevMode ? [{ debugName: "instanceId" }] : /* istanbul ignore next */ []);
 	enabledUserInput = computed(() => this.appStore.assistants()[this.instanceId()]?.modeSettings.enabledUserInput === true, ...ngDevMode ? [{ debugName: "enabledUserInput" }] : /* istanbul ignore next */ []);
-	clearSelection = () => this.selection.clearMultiSelection();
+	showHint = signal(false, ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
+	armed = true;
+	constructor() {
+		effect(() => {
+			const count = this.count();
+			untracked(() => {
+				if (count === 0) {
+					this.armed = true;
+					this.showHint.set(false);
+				} else if (this.armed) {
+					this.armed = false;
+					this.showHint.set(true);
+				} else this.showHint.set(false);
+			});
+		});
+	}
+	clearSelection = () => {
+		if (this.count() === 0) return;
+		this.selection.clearMultiSelection();
+		this.cleared.emit();
+	};
 	openCollectionDialog = () => AddToCollection.call(getState(this.selection).multiSelection, { injector: this.injector }).then((event) => {
 		if (event === "dialog-no" || event === "dialog-yes") {
 			this.updatedCollections.emit();
@@ -6688,9 +6710,19 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
-		outputs: { updatedCollections: "updatedCollections" },
+		outputs: {
+			updatedCollections: "updatedCollections",
+			cleared: "cleared"
+		},
 		host: {
 			properties: {
 				"class.opacity-100": "count() > 0",
@@ -6701,37 +6733,57 @@ var MultiSelectionToolbarComponent = class MultiSelectionToolbarComponent {
 		providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
 		ngImport: i0,
 		template: `
-    <menu id="multi-select-toolbar" [class]="cn(variants(), class())">
-      <li class="ps-0!">
+    <!-- Région de statut hors de la barre : celle-ci est inerte sans sélection, et une région
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide. -->
+    <span role="status" class="sr-only">
+      @if (count() > 0) {
+        {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+        @if (showHint() && hint()) {
+          . {{ hint() }}
+        }
+      }
+    </span>
+
+    <!-- inert sans sélection : la barre n'est que transparente et hors écran, ses boutons resteraient
+         sinon dans l'ordre de tabulation et activables (Entrée ouvrait « Ajouter à une collection » sur
+         un panier vide, ES-31356). -->
+    <div
+      id="multi-select-toolbar"
+      role="toolbar"
+      [attr.aria-label]="'multiSelectionToolbar.label' | transloco"
+      [attr.inert]="count() === 0 ? '' : null"
+      (keydown.escape)="clearSelection()"
+      [class]="cn(variants(), class())">
+      <div class="ps-0!">
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
           {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
-          <x-mark-icon />
+          <x-mark-icon aria-hidden="true" />
         </button>
-      </li>
+      </div>
 
-      <li>
-        <button class="cursor-pointer inline-flex items-center gap-1" title="menu" [attr.aria-label]="'menu'" (click)="openCollectionDialog()">
-          <inbox-icon />
+      <div>
+        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+          <inbox-icon aria-hidden="true" />
           {{ 'collections.label' | transloco }}
         </button>
-      </li>
+      </div>
 
-      <li>
+      <div>
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
-          <file-output-icon />
+          <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </li>
+      </div>
 
       @if (enabledUserInput()) {
-        <li class="pe-0!">
+        <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
-            <sparkles-icon />
+            <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
-        </li>
+        </div>
       }
-    </menu>
+    </div>
   `,
 		isInline: true,
 		dependencies: [
@@ -6785,37 +6837,57 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("multi-selection-toolbar", "article", "collections", "export")],
 			template: `
-    <menu id="multi-select-toolbar" [class]="cn(variants(), class())">
-      <li class="ps-0!">
+    <!-- Région de statut hors de la barre : celle-ci est inerte sans sélection, et une région
+         inerte n'est pas annoncée. Le texte n'existe que tant que la sélection est non vide. -->
+    <span role="status" class="sr-only">
+      @if (count() > 0) {
+        {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
+        @if (showHint() && hint()) {
+          . {{ hint() }}
+        }
+      }
+    </span>
+
+    <!-- inert sans sélection : la barre n'est que transparente et hors écran, ses boutons resteraient
+         sinon dans l'ordre de tabulation et activables (Entrée ouvrait « Ajouter à une collection » sur
+         un panier vide, ES-31356). -->
+    <div
+      id="multi-select-toolbar"
+      role="toolbar"
+      [attr.aria-label]="'multiSelectionToolbar.label' | transloco"
+      [attr.inert]="count() === 0 ? '' : null"
+      (keydown.escape)="clearSelection()"
+      [class]="cn(variants(), class())">
+      <div class="ps-0!">
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="clearSelection()">
           {{ 'multiSelectionToolbar.itemsSelected' | transloco: { count: count() } }}
-          <x-mark-icon />
+          <x-mark-icon aria-hidden="true" />
         </button>
-      </li>
+      </div>
 
-      <li>
-        <button class="cursor-pointer inline-flex items-center gap-1" title="menu" [attr.aria-label]="'menu'" (click)="openCollectionDialog()">
-          <inbox-icon />
+      <div>
+        <button class="cursor-pointer inline-flex items-center gap-1" (click)="openCollectionDialog()">
+          <inbox-icon aria-hidden="true" />
           {{ 'collections.label' | transloco }}
         </button>
-      </li>
+      </div>
 
-      <li>
+      <div>
         <button class="cursor-pointer inline-flex items-center gap-1" (click)="openExportDialog()">
-          <file-output-icon />
+          <file-output-icon aria-hidden="true" />
           {{ 'export.title' | transloco }}
         </button>
-      </li>
+      </div>
 
       @if (enabledUserInput()) {
-        <li class="pe-0!">
+        <div class="pe-0!">
           <button class="cursor-pointer inline-flex items-center gap-1" (click)="attachToAssistant()">
-            <sparkles-icon />
+            <sparkles-icon aria-hidden="true" />
             {{ 'article.addToAIOverview' | transloco }}
           </button>
-        </li>
+        </div>
       }
-    </menu>
+    </div>
   `,
 			host: {
 				class: "fixed -bottom-20 left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0",
@@ -6824,6 +6896,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		class: [{
 			type: i0.Input,
@@ -6841,9 +6914,21 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
 		updatedCollections: [{
 			type: i0.Output,
 			args: ["updatedCollections"]
+		}],
+		cleared: [{
+			type: i0.Output,
+			args: ["cleared"]
 		}]
 	}
 });
@@ -18727,11 +18812,18 @@ var ListPanelComponent = class ListPanelComponent {
 	getValue = input.required(...ngDevMode ? [{ debugName: "getValue" }] : /* istanbul ignore next */ []);
 	getLabel = input(...ngDevMode ? [void 0, { debugName: "getLabel" }] : /* istanbul ignore next */ []);
 	deleteButtonTitle = input("remove", ...ngDevMode ? [{ debugName: "deleteButtonTitle" }] : /* istanbul ignore next */ []);
+	deletable = input(true, {
+		...ngDevMode ? { debugName: "deletable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
 	itemClick = output();
 	delete = output();
 	itemTemplate = contentChild(ListPanelItemDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	deleteKeys = isApplePlatform() ? ["Delete", "Backspace"] : ["Delete"];
+	list = viewChild(ListComponent, ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	keyboardFocused = computed(() => this.list()?.keyboardFocused() ?? false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
 	host = inject(ElementRef);
 	injector = inject(Injector);
 	pendingFocusIndex = signal(null, ...ngDevMode ? [{ debugName: "pendingFocusIndex" }] : /* istanbul ignore next */ []);
@@ -18807,6 +18899,13 @@ var ListPanelComponent = class ListPanelComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			deletable: {
+				classPropertyName: "deletable",
+				publicName: "deletable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -18827,6 +18926,7 @@ var ListPanelComponent = class ListPanelComponent {
 			delete: "delete"
 		},
 		host: { classAttribute: "block max-h-115 overflow-auto" },
+		providers: [provideTranslocoScope("list-panel")],
 		queries: [{
 			propertyName: "itemTemplate",
 			first: true,
@@ -18834,6 +18934,13 @@ var ListPanelComponent = class ListPanelComponent {
 			descendants: true,
 			isSignal: true
 		}],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ListComponent,
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: `
     <List variant="list-navigation" size="medium" class="gap-1" selectionMode="explicit" [attr.aria-label]="ariaLabel()">
@@ -18846,9 +18953,13 @@ var ListPanelComponent = class ListPanelComponent {
           (keydown.enter)="activate(item, $event)"
           (keydown.space)="activate(item, $event)">
           <ng-container *ngTemplateOutlet="itemTemplate()?.template; context: { $implicit: item }" />
-          <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" (click)="onDelete(item, i, $event)">
-            <TrashIcon />
-          </ListItemAction>
+          @if (deletable()) {
+            <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
+              [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
+              (click)="onDelete(item, i, $event)">
+              <TrashIcon />
+            </ListItemAction>
+          }
         </ListItem>
       } @empty {
         <span class="py-4 text-center text-neutral-500">
@@ -18903,7 +19014,13 @@ var ListPanelComponent = class ListPanelComponent {
 				kind: "component",
 				type: ListItemActionComponent,
 				selector: "ListItemAction,list-item-action,listitemaction",
-				inputs: ["ariaLabel", "disabled"],
+				inputs: [
+					"ariaLabel",
+					"disabled",
+					"keys",
+					"shortcut",
+					"description"
+				],
 				exportAs: ["listItemAction"]
 			},
 			{
@@ -18923,6 +19040,7 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "list-panel, ListPanel",
+			providers: [provideTranslocoScope("list-panel")],
 			imports: [
 				NgTemplateOutlet,
 				TrashIcon,
@@ -18942,9 +19060,13 @@ i0.ɵɵngDeclareClassMetadata({
           (keydown.enter)="activate(item, $event)"
           (keydown.space)="activate(item, $event)">
           <ng-container *ngTemplateOutlet="itemTemplate()?.template; context: { $implicit: item }" />
-          <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" (click)="onDelete(item, i, $event)">
-            <TrashIcon />
-          </ListItemAction>
+          @if (deletable()) {
+            <ListItemAction [ariaLabel]="deleteButtonTitle() | transloco" [keys]="deleteKeys" [shortcut]="'listPanel.deleteShortcut' | transloco"
+              [description]="'listPanel.deleteDescription' | transloco: { key: 'listPanel.deleteShortcut' | transloco }"
+              (click)="onDelete(item, i, $event)">
+              <TrashIcon />
+            </ListItemAction>
+          }
         </ListItem>
       } @empty {
         <span class="py-4 text-center text-neutral-500">
@@ -18991,6 +19113,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		deletable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deletable",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -19018,6 +19148,10 @@ i0.ɵɵngDeclareClassMetadata({
 		itemTemplate: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => ListPanelItemDirective), { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => ListComponent), { isSignal: true }]
 		}]
 	}
 });
@@ -19027,6 +19161,10 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 	hasMore = input.required(...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
 	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
 	loadMore = output();
+	navigationHint = input(false, {
+		...ngDevMode ? { debugName: "navigationHint" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	onLoadMore(event) {
 		event.stopPropagation();
 		this.loadMore.emit();
@@ -19066,10 +19204,17 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 				isSignal: true,
 				isRequired: true,
 				transformFunction: null
+			},
+			navigationHint: {
+				classPropertyName: "navigationHint",
+				publicName: "navigationHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { loadMore: "loadMore" },
-		host: { properties: { "class": "cn('flex flex-col px-2 mt-2', class())" } },
+		host: { properties: { "class": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" } },
 		providers: [provideTranslocoScope("list-panel")],
 		ngImport: i0,
 		template: `
@@ -19080,9 +19225,33 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
       </button>
     }
     @let seeMore =  'listPanel.seeMore' | transloco;
-    <button variant="secondary" size="sm" class="ml-auto" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
-      {{ seeMore }}
-    </button>
+    <div class="flex items-center gap-(--spacing-xs)">
+      <!-- Aide de navigation de la liste, tant que navigationHint est vrai (focus clavier dans la liste) : le
+           focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
+           aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
+           d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
+           ligne. -->
+      @if (navigationHint()) {
+        <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
+                 milieu de la ligne de texte, et elle sortait décentrée de sa touche. -->
+            <span class="inline-flex gap-(--spacing-4xs)">
+              <kbd><arrow-up-icon /></kbd>
+              <kbd><arrow-down-icon /></kbd>
+            </span>
+            {{ 'listPanel.hintNavigate' | transloco }}
+          </span>
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <kbd>{{ 'listPanel.keyEnter' | transloco }}</kbd>
+            {{ 'listPanel.hintOpen' | transloco }}
+          </span>
+        </p>
+      }
+      <button variant="secondary" size="sm" class="ml-auto shrink-0" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
+        {{ seeMore }}
+      </button>
+    </div>
   `,
 		isInline: true,
 		dependencies: [
@@ -19117,6 +19286,24 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 					"size"
 				]
 			},
+			{
+				kind: "directive",
+				type: KbdComponent,
+				selector: "kbd, Kbd",
+				inputs: ["class", "size"]
+			},
+			{
+				kind: "component",
+				type: ArrowUpIcon,
+				selector: "arrow-up, arrow-up-icon, ArrowUp, ArrowUpIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: ArrowDownIcon,
+				selector: "arrow-down, arrow-down-icon, ArrowDown, ArrowDownIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -19137,7 +19324,10 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				RouterLink,
-				ButtonComponent
+				ButtonComponent,
+				KbdComponent,
+				ArrowUpIcon,
+				ArrowDownIcon
 			],
 			providers: [provideTranslocoScope("list-panel")],
 			template: `
@@ -19148,11 +19338,35 @@ i0.ɵɵngDeclareClassMetadata({
       </button>
     }
     @let seeMore =  'listPanel.seeMore' | transloco;
-    <button variant="secondary" size="sm" class="ml-auto" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
-      {{ seeMore }}
-    </button>
+    <div class="flex items-center gap-(--spacing-xs)">
+      <!-- Aide de navigation de la liste, tant que navigationHint est vrai (focus clavier dans la liste) : le
+           focus est un arrêt unique de tabulation, les flèches font le reste, et rien ne le dit.
+           aria-hidden : le listbox annonce déjà sa navigation aux lecteurs d'écran, et l'ouverture
+           d'une ligne est ce que tout le monde attend d'Entrée. La touche Suppr est, elle, écrite dans la
+           ligne. -->
+      @if (navigationHint()) {
+        <p aria-hidden="true" class="flex min-w-0 flex-wrap items-center gap-x-(--spacing-xs) gap-y-(--spacing-4xs) text-(length:--size-sm) leading-(--line-height-2) text-(--font-neutral-base)">
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <!-- Des icônes et non les caractères ↑ ↓ : le centre visuel d'une flèche typographique ne tombe pas au
+                 milieu de la ligne de texte, et elle sortait décentrée de sa touche. -->
+            <span class="inline-flex gap-(--spacing-4xs)">
+              <kbd><arrow-up-icon /></kbd>
+              <kbd><arrow-down-icon /></kbd>
+            </span>
+            {{ 'listPanel.hintNavigate' | transloco }}
+          </span>
+          <span class="inline-flex items-center gap-(--spacing-2xs)">
+            <kbd>{{ 'listPanel.keyEnter' | transloco }}</kbd>
+            {{ 'listPanel.hintOpen' | transloco }}
+          </span>
+        </p>
+      }
+      <button variant="secondary" size="sm" class="ml-auto shrink-0" [attr.title]="seeMore" [routerLink]="[config().routerLink]">
+        {{ seeMore }}
+      </button>
+    </div>
   `,
-			host: { "[class]": "cn('flex flex-col px-2 mt-2', class())" }
+			host: { "[class]": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" }
 		}]
 	}],
 	propDecorators: {
@@ -19183,6 +19397,14 @@ i0.ɵɵngDeclareClassMetadata({
 		loadMore: [{
 			type: i0.Output,
 			args: ["loadMore"]
+		}],
+		navigationHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationHint",
+				required: false
+			}]
 		}]
 	}
 });
@@ -19368,7 +19590,7 @@ var BookmarksComponent = class BookmarksComponent {
 		} },
 		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19385,6 +19607,7 @@ var BookmarksComponent = class BookmarksComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -19397,7 +19620,8 @@ var BookmarksComponent = class BookmarksComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -19479,7 +19703,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TagComponent
 			],
 			providers: [provideTranslocoScope("bookmarks")],
-			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -19735,7 +19959,7 @@ var CollectionsComponent = class CollectionsComponent {
 		} },
 		providers: [provideTranslocoScope("collections")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19752,6 +19976,7 @@ var CollectionsComponent = class CollectionsComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -19764,7 +19989,8 @@ var CollectionsComponent = class CollectionsComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -19820,7 +20046,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemTextComponent
 			],
 			providers: [provideTranslocoScope("collections")],
-			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -30211,7 +30437,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 		template: `
     <ListPanelHeader [label]="'searches.recent.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedRecentSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30243,7 +30469,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
-      <ListPanelFooter
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()"
         [hasMore]="hasMore()"
         [config]="config"
         (loadMore)="loadMore()" />
@@ -30320,6 +30546,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -30332,7 +30559,8 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -30370,7 +30598,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ListPanelHeader [label]="'searches.recent.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedRecentSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30402,7 +30630,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
-      <ListPanelFooter
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()"
         [hasMore]="hasMore()"
         [config]="config"
         (loadMore)="loadMore()" />
@@ -30487,7 +30715,7 @@ var SavedSearchDialog = class SavedSearchDialog {
               [formField]="nameField"
               [attr.aria-label]="'searches.saved.saveName' | transloco"
               [attr.placeholder]="'searches.saved.saveName' | transloco"
-              (keydown.enter)="saveName().trim() && confirm()" />
+              (keydown.enter)="$event.preventDefault(); saveName().trim() && confirm()" />
           </input-group>
         </DialogBody>
 
@@ -30634,7 +30862,7 @@ i0.ɵɵngDeclareClassMetadata({
               [formField]="nameField"
               [attr.aria-label]="'searches.saved.saveName' | transloco"
               [attr.placeholder]="'searches.saved.saveName' | transloco"
-              (keydown.enter)="saveName().trim() && confirm()" />
+              (keydown.enter)="$event.preventDefault(); saveName().trim() && confirm()" />
           </input-group>
         </DialogBody>
 
@@ -30932,7 +31160,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 		template: `
     <ListPanelHeader [label]="'searches.saved.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -30964,7 +31192,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
-      <ListPanelFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()" [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
     }
   `,
 		isInline: true,
@@ -31038,6 +31266,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 					"getValue",
 					"getLabel",
 					"deleteButtonTitle",
+					"deletable",
 					"ariaLabel",
 					"itemClass"
 				],
@@ -31050,7 +31279,8 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				inputs: [
 					"class",
 					"hasMore",
-					"config"
+					"config",
+					"navigationHint"
 				],
 				outputs: ["loadMore"]
 			},
@@ -31088,7 +31318,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ListPanelHeader [label]="'searches.saved.label' | transloco" [floating]="!!floating" />
 
-    <ListPanel
+    <ListPanel #panel
       [items]="paginatedSearches()"
       [getValue]="urlOf"
       [getLabel]="labelOf"
@@ -31120,7 +31350,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
-      <ListPanelFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
+      <ListPanelFooter [navigationHint]="panel.keyboardFocused()" [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
     }
   `
 		}]
@@ -31555,7 +31785,11 @@ function splitPropertyId(id) {
 		key: id.slice(separator + 1)
 	};
 }
+const FIRST_CONTROL = "button:not(:disabled), textarea, input:not([type='file']), a[href]";
 var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
+	focusOnOpen = input(false, ...ngDevMode ? [{ debugName: "focusOnOpen" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
 	principalStore = inject(PrincipalStore);
 	appStore = inject(AppStore);
 	client = inject(ATOMIC_CLIENT);
@@ -31568,6 +31802,13 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
 		const { allowChangePassword = false } = this.appStore.general()?.features || {};
 		return allowChangePassword && useCredentials && (this.principalStore.editablePartition?.() || false);
 	}, ...ngDevMode ? [{ debugName: "allowChangePassword" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			if (!this.focusOnOpen()) return;
+			const frame = requestAnimationFrame(() => focusWhenReady(() => this.host.nativeElement.querySelector(FIRST_CONTROL), "settings-account-panel", { destroyRef: this.destroyRef }));
+			this.destroyRef.onDestroy(() => cancelAnimationFrame(frame));
+		});
+	}
 	resetSettings() {
 		ResetUserSettings.call(void 0, { injector: this.injector });
 	}
@@ -31591,6 +31832,13 @@ var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
 		type: SettingsAccountPanelComponent,
 		isStandalone: true,
 		selector: "settings-account-panel",
+		inputs: { focusOnOpen: {
+			classPropertyName: "focusOnOpen",
+			publicName: "focusOnOpen",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
 		providers: [provideTranslocoScope("settings")],
 		ngImport: i0,
 		template: `
@@ -31773,7 +32021,16 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
   `
 		}]
-	}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { focusOnOpen: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "focusOnOpen",
+			required: false
+		}]
+	}] }
 });
 const THEMES$1 = [
 	"light",
@@ -32117,6 +32374,11 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		}
 	];
 	panel = signal(this.call.props()?.panel ?? "account", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	navigated = signal(false, ...ngDevMode ? [{ debugName: "navigated" }] : /* istanbul ignore next */ []);
+	navigate(id) {
+		this.navigated.set(true);
+		this.panel.set(id);
+	}
 	duplicate = active !== void 0;
 	constructor() {
 		if (active) {
@@ -32176,7 +32438,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
                   variant="none"
                   class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
-                  (click)="panel.set(item.id)">
+                  (click)="navigate(item.id)">
                   @switch (item.id) {
                     @case ("account") {
                       <user-icon aria-hidden="true" />
@@ -32197,7 +32459,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
           <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
             @switch (panel()) {
               @case ("account") {
-                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
               }
               @case ("appearance") {
                 <settings-appearance-panel />
@@ -32270,7 +32532,8 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 			{
 				kind: "component",
 				type: SettingsAccountPanelComponent,
-				selector: "settings-account-panel"
+				selector: "settings-account-panel",
+				inputs: ["focusOnOpen"]
 			},
 			{
 				kind: "component",
@@ -32336,7 +32599,7 @@ i0.ɵɵngDeclareClassMetadata({
                   variant="none"
                   class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
                   [attr.aria-current]="panel() === item.id ? 'page' : null"
-                  (click)="panel.set(item.id)">
+                  (click)="navigate(item.id)">
                   @switch (item.id) {
                     @case ("account") {
                       <user-icon aria-hidden="true" />
@@ -32357,7 +32620,7 @@ i0.ɵɵngDeclareClassMetadata({
           <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
             @switch (panel()) {
               @case ("account") {
-                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
               }
               @case ("appearance") {
                 <settings-appearance-panel />