@sinequa/atomic-angular 2.13.0 → 2.15.0

package/fesm2022/sinequa-atomic-angular-document-workspaces.mjs

@@ -7,7 +7,7 @@ import { Upload } from "tus-js-client";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
 import { Temporal } from "temporal-polyfill";
-import { AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreakpointObserverService, ButtonComponent, ChatPlusIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleXIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, ExternalLinkIcon, EyeIcon, FileIcon, FileSearchIcon, FileSpreadsheetIcon, FileTextIcon, FolderIcon, GridIcon, InputComponent, InputControlDirective, KeyIcon, ListIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, PenToSquareIcon, PlusIcon, PopoverDirective, RefreshIcon, SearchInputComponent, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SyncIcon, TabComponent, TabListComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagRemoveComponent, TextareaComponent, TextareaControlDirective, TextareaCounterComponent, TooltipDirective, TrashIcon, UploadIcon, UserIcon, UserRoundIcon, XMarkIcon, createCallable, injectCallRef } from "@sinequa/galactik";
+import { AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreakpointObserverService, ButtonComponent, ChatPlusIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleXIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, ExternalLinkIcon, EyeIcon, FileIcon, FileSearchIcon, FileSpreadsheetIcon, FileTextIcon, FolderIcon, GridIcon, InputComponent, InputControlDirective, KeyIcon, ListIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, PenToSquareIcon, PlusIcon, PopoverDirective, RefreshIcon, SearchInputComponent, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SyncIcon, TabComponent, TabListComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagRemoveComponent, TextareaComponent, TextareaControlDirective, TextareaCounterComponent, TooltipDirective, UploadIcon, UserIcon, UserRoundIcon, XMarkIcon, createCallable, injectCallRef } from "@sinequa/galactik";
 import { FormField, FormRoot, disabled, form, maxLength, required, validate } from "@angular/forms/signals";
 import { DomSanitizer } from "@angular/platform-browser";
 import { NgTemplateOutlet } from "@angular/common";
@@ -4477,7 +4477,7 @@ var UploadTracker = class UploadTracker {
             data-testid="peek-text">
             <workspace-message [message]="peekShown()" />
           </span>
-          <span class="shrink-0 translate-x-1.5 text-xs text-(--font-neutral-muted) opacity-0 transition-[opacity,transform] delay-100 duration-200 group-hover/tracker:translate-x-0 group-hover/tracker:opacity-100">
+          <span class="shrink-0 translate-x-1.5 text-xs text-(--font-neutral-muted) opacity-0 transition-[opacity,transform] delay-100 duration-200 group-hover/tracker:translate-x-0 group-hover/tracker:opacity-100 pointer-coarse:translate-x-0 pointer-coarse:opacity-100">
             {{ "documentWorkspaces.tracker.clickToRestore" | transloco }}
           </span>
         </div>
@@ -4822,7 +4822,7 @@ i0.ɵɵngDeclareClassMetadata({
             data-testid="peek-text">
             <workspace-message [message]="peekShown()" />
           </span>
-          <span class="shrink-0 translate-x-1.5 text-xs text-(--font-neutral-muted) opacity-0 transition-[opacity,transform] delay-100 duration-200 group-hover/tracker:translate-x-0 group-hover/tracker:opacity-100">
+          <span class="shrink-0 translate-x-1.5 text-xs text-(--font-neutral-muted) opacity-0 transition-[opacity,transform] delay-100 duration-200 group-hover/tracker:translate-x-0 group-hover/tracker:opacity-100 pointer-coarse:translate-x-0 pointer-coarse:opacity-100">
             {{ "documentWorkspaces.tracker.clickToRestore" | transloco }}
           </span>
         </div>
@@ -5144,13 +5144,13 @@ var WorkspaceRow = class WorkspaceRow {
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspace().currentUserRole"
           [attr.aria-label]="'documentWorkspaces.list.deleteWorkspace' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -5234,8 +5234,8 @@ var WorkspaceRow = class WorkspaceRow {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -5282,7 +5282,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HighlightedText,
 				TagComponent,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				WorkspaceIcon,
 				WorkspaceRoleTag,
 				WriterOnly
@@ -5341,13 +5341,13 @@ i0.ɵɵngDeclareClassMetadata({
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspace().currentUserRole"
           [attr.aria-label]="'documentWorkspaces.list.deleteWorkspace' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -5513,13 +5513,13 @@ var WorkspaceCard = class WorkspaceCard {
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspace().currentUserRole"
           [attr.aria-label]="'documentWorkspaces.list.deleteWorkspace' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -5622,8 +5622,8 @@ var WorkspaceCard = class WorkspaceCard {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -5670,7 +5670,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HighlightedText,
 				TagComponent,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				WorkspaceIcon,
 				WorkspaceRoleTag,
 				WriterOnly
@@ -5703,13 +5703,13 @@ i0.ɵɵngDeclareClassMetadata({
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspace().currentUserRole"
           [attr.aria-label]="'documentWorkspaces.list.deleteWorkspace' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -5931,7 +5931,7 @@ var WorkspaceList = class WorkspaceList {
 		host: { classAttribute: "@container flex h-full min-h-0 flex-col p-3 pb-2 md:p-8 md:pb-4" },
 		providers: [provideTranslocoScope("document-workspaces")],
 		ngImport: i0,
-		template: "\n    <div class=\"mb-1 flex items-center justify-between gap-4\">\n      <h1 class=\"text-2xl leading-[31px] font-bold text-(--font-neutral-black)\">{{ \"documentWorkspaces.list.title\" | transloco }}</h1>\n      <button (click)=\"createRequested.emit()\">\n        <plus-icon />\n        {{ \"documentWorkspaces.list.addWorkspace\" | transloco }}\n      </button>\n    </div>\n    <p class=\"mb-6 text-base text-(--font-primary-base)\">{{ \"documentWorkspaces.list.subtitle\" | transloco }}</p>\n\n    <Tabs class=\"mb-3 max-w-full\">\n      <TabList\n        variant=\"inner\"\n        class=\"w-fit max-w-full\"\n        selectionMode=\"explicit\"\n        [softDisabled]=\"false\"\n        [attr.aria-label]=\"'documentWorkspaces.list.title' | transloco\"\n        [selectedTab]=\"filter.tab()\"\n        (selectedTabChange)=\"onTabChange($event)\">\n        @for (item of tabs; track item.tab) {\n          <Tab [value]=\"item.tab\" variant=\"inner\">\n            @switch (item.tab) {\n              @case (\"editor\") {\n                <user-icon class=\"shrink-0\" />\n              }\n              @case (\"reader\") {\n                <user-round-icon class=\"shrink-0\" />\n              }\n            }\n            <span>{{ item.labelKey | transloco }}</span>\n            <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"shrink-0\" [attr.data-testid]=\"'badge-' + item.tab\">{{ filter.counts()[item.tab] }}</Badge>\n          </Tab>\n        }\n      </TabList>\n    </Tabs>\n\n    <div class=\"mb-6 flex flex-wrap items-center gap-2\">\n      <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'grid'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n          (click)=\"viewMode.set('grid')\">\n          <grid-icon class=\"size-3.5\" />\n        </button>\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'list'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n          (click)=\"viewMode.set('list')\">\n          <list-icon class=\"size-3.5\" />\n        </button>\n      </div>\n\n      <SearchInput\n        role=\"search\"\n        class=\"min-w-32 flex-[0_1_15rem]\"\n        [formField]=\"searchForm\"\n        [placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n      @if (selection.selectableItems().length) {\n        @if (selection.active()) {\n          <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n            <span class=\"text-sm text-(--font-primary-base)\" aria-live=\"polite\">{{ \"documentWorkspaces.list.selectedCount\" | transloco: { count: selection.count() } }}</span>\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <trash-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n          {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n        </button>\n      }\n    </div>\n\n    @if (refreshError(); as message) {\n      <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.refreshError\" | transloco: { error: message } }}</p>\n    }\n\n    <!-- Only the workspaces scroll: the title, the tabs and the toolbar stay in place. -->\n    <div class=\"min-h-0 flex-1 overflow-y-auto\">\n    @switch (status()) {\n      @case (\"loading\") {\n        <p class=\"text-sm text-(--font-primary-muted)\">{{ \"documentWorkspaces.list.loading\" | transloco }}</p>\n      }\n      @case (\"error\") {\n        <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n          <span class=\"text-(--font-error-base)\">\n            @if (loadError(); as message) {\n              <workspace-message [message]=\"message\" />\n            } @else {\n              {{ \"documentWorkspaces.list.loadError\" | transloco }}\n            }\n          </span>\n          <button variant=\"secondary\" size=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <p class=\"py-8 text-center text-sm text-(--font-primary-muted)\" data-testid=\"empty\">\n            {{ (store.workspaces().length ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n          </p>\n        } @else if (viewMode() === \"grid\") {\n          <div class=\"grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] content-start gap-4 pb-8\">\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-card\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        } @else {\n          <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n            <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_auto_2.5rem] @xl:grid-cols-[minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @xl:data-selecting:grid-cols-[2rem_minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n              @if (selection.active()) {\n                <div role=\"columnheader\">\n                  <checkbox\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (checkedChange)=\"selection.toggleAll()\" />\n                </div>\n              }\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnName\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnContent\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnOwner\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @xl:block\">{{ \"documentWorkspaces.list.columnDateUpdated\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @3xl:block\">{{ \"documentWorkspaces.list.columnTags\" | transloco }}</div>\n              <div role=\"columnheader\"></div>\n            </div>\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-row\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        }\n\n        @if (store.hasMore() || store.truncated()) {\n          <div class=\"flex flex-col items-center gap-2 pb-8\" data-testid=\"load-more\">\n            <p class=\"text-sm text-(--font-primary-muted)\">\n              {{ \"documentWorkspaces.list.partial\" | transloco: { shown: store.workspaces().length, total: store.pagination().total } }}\n            </p>\n            @if (loadMoreError(); as message) {\n              <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.loadMoreError\" | transloco: { error: message } }}</p>\n            }\n            @if (store.hasMore()) {\n              <button variant=\"secondary\" size=\"sm\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                {{ \"documentWorkspaces.list.loadMore\" | transloco }}\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n    </div>\n  ",
+		template: "\n    <div class=\"mb-1 flex items-center justify-between gap-4\">\n      <h1 class=\"text-2xl leading-[31px] font-bold text-(--font-neutral-black)\">{{ \"documentWorkspaces.list.title\" | transloco }}</h1>\n      <button (click)=\"createRequested.emit()\">\n        <plus-icon />\n        {{ \"documentWorkspaces.list.addWorkspace\" | transloco }}\n      </button>\n    </div>\n    <p class=\"mb-6 text-base text-(--font-primary-base)\">{{ \"documentWorkspaces.list.subtitle\" | transloco }}</p>\n\n    <Tabs class=\"mb-3 max-w-full\">\n      <TabList\n        variant=\"inner\"\n        class=\"w-fit max-w-full\"\n        selectionMode=\"explicit\"\n        [softDisabled]=\"false\"\n        [attr.aria-label]=\"'documentWorkspaces.list.title' | transloco\"\n        [selectedTab]=\"filter.tab()\"\n        (selectedTabChange)=\"onTabChange($event)\">\n        @for (item of tabs; track item.tab) {\n          <Tab [value]=\"item.tab\" variant=\"inner\">\n            @switch (item.tab) {\n              @case (\"editor\") {\n                <user-icon class=\"shrink-0\" />\n              }\n              @case (\"reader\") {\n                <user-round-icon class=\"shrink-0\" />\n              }\n            }\n            <span>{{ item.labelKey | transloco }}</span>\n            <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"shrink-0\" [attr.data-testid]=\"'badge-' + item.tab\">{{ filter.counts()[item.tab] }}</Badge>\n          </Tab>\n        }\n      </TabList>\n    </Tabs>\n\n    <div class=\"mb-6 flex flex-wrap items-center gap-2\">\n      <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'grid'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n          (click)=\"viewMode.set('grid')\">\n          <grid-icon class=\"size-3.5\" />\n        </button>\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'list'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n          (click)=\"viewMode.set('list')\">\n          <list-icon class=\"size-3.5\" />\n        </button>\n      </div>\n\n      <SearchInput\n        role=\"search\"\n        class=\"min-w-32 flex-[0_1_15rem]\"\n        [formField]=\"searchForm\"\n        [placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n      @if (selection.selectableItems().length) {\n        @if (selection.active()) {\n          <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n            <span class=\"text-sm text-(--font-primary-base)\" aria-live=\"polite\">{{ \"documentWorkspaces.list.selectedCount\" | transloco: { count: selection.count() } }}</span>\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <x-mark-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n          {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n        </button>\n      }\n    </div>\n\n    @if (refreshError(); as message) {\n      <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.refreshError\" | transloco: { error: message } }}</p>\n    }\n\n    <!-- Only the workspaces scroll: the title, the tabs and the toolbar stay in place. -->\n    <div class=\"min-h-0 flex-1 overflow-y-auto\">\n    @switch (status()) {\n      @case (\"loading\") {\n        <p class=\"text-sm text-(--font-primary-muted)\">{{ \"documentWorkspaces.list.loading\" | transloco }}</p>\n      }\n      @case (\"error\") {\n        <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n          <span class=\"text-(--font-error-base)\">\n            @if (loadError(); as message) {\n              <workspace-message [message]=\"message\" />\n            } @else {\n              {{ \"documentWorkspaces.list.loadError\" | transloco }}\n            }\n          </span>\n          <button variant=\"secondary\" size=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <p class=\"py-8 text-center text-sm text-(--font-primary-muted)\" data-testid=\"empty\">\n            {{ (store.workspaces().length ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n          </p>\n        } @else if (viewMode() === \"grid\") {\n          <div class=\"grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] content-start gap-4 pb-8\">\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-card\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        } @else {\n          <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n            <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_auto_2.5rem] @xl:grid-cols-[minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @xl:data-selecting:grid-cols-[2rem_minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n              @if (selection.active()) {\n                <div role=\"columnheader\">\n                  <checkbox\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (checkedChange)=\"selection.toggleAll()\" />\n                </div>\n              }\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnName\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnContent\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnOwner\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @xl:block\">{{ \"documentWorkspaces.list.columnDateUpdated\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @3xl:block\">{{ \"documentWorkspaces.list.columnTags\" | transloco }}</div>\n              <div role=\"columnheader\"></div>\n            </div>\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-row\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        }\n\n        @if (store.hasMore() || store.truncated()) {\n          <div class=\"flex flex-col items-center gap-2 pb-8\" data-testid=\"load-more\">\n            <p class=\"text-sm text-(--font-primary-muted)\">\n              {{ \"documentWorkspaces.list.partial\" | transloco: { shown: store.workspaces().length, total: store.pagination().total } }}\n            </p>\n            @if (loadMoreError(); as message) {\n              <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.loadMoreError\" | transloco: { error: message } }}</p>\n            }\n            @if (store.hasMore()) {\n              <button variant=\"secondary\" size=\"sm\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                {{ \"documentWorkspaces.list.loadMore\" | transloco }}\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n    </div>\n  ",
 		isInline: true,
 		dependencies: [
 			{
@@ -6054,8 +6054,8 @@ var WorkspaceList = class WorkspaceList {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -6142,7 +6142,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TabListComponent,
 				TabsComponent,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				UserIcon,
 				UserRoundIcon,
 				WorkspaceCard,
@@ -6226,7 +6226,7 @@ i0.ɵɵngDeclareClassMetadata({
               {{ (selection.allSelected() ? "documentWorkspaces.common.unselectAll" : "documentWorkspaces.common.selectAll") | transloco }}
             </button>
             <button class="text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)" variant="tertiary" scheme="neutral" size="sm" [disabled]="!selection.count()" (click)="deleteSelected()">
-              <trash-icon />
+              <x-mark-icon />
               {{ "documentWorkspaces.common.delete" | transloco }}
             </button>
           </div>
@@ -6462,13 +6462,13 @@ var DocumentCard = class DocumentCard {
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspaceRole()"
           [attr.aria-label]="'documentWorkspaces.detail.deleteDocument' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -6582,8 +6582,8 @@ var DocumentCard = class DocumentCard {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -6631,7 +6631,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HighlightedText,
 				TagComponent,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				UploadIcon,
 				WorkspaceMessage,
 				WriterOnly
@@ -6661,13 +6661,13 @@ i0.ɵɵngDeclareClassMetadata({
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspaceRole()"
           [attr.aria-label]="'documentWorkspaces.detail.deleteDocument' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -6920,13 +6920,13 @@ var DocumentRow = class DocumentRow {
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspaceRole()"
           [attr.aria-label]="'documentWorkspaces.detail.deleteDocument' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -7016,8 +7016,8 @@ var DocumentRow = class DocumentRow {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -7065,7 +7065,7 @@ i0.ɵɵngDeclareClassMetadata({
 				HighlightedText,
 				TagComponent,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				UploadIcon,
 				WorkspaceMessage,
 				WriterOnly
@@ -7127,13 +7127,13 @@ i0.ɵɵngDeclareClassMetadata({
           variant="tertiary"
           scheme="neutral"
           size="sm"
-          class="text-(--font-error-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100"
+          class="text-(--font-primary-muted) opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) max-md:opacity-100 pointer-coarse:opacity-100"
           [iconOnly]="true"
           [writerOnly]="workspaceRole()"
           [attr.aria-label]="'documentWorkspaces.detail.deleteDocument' | transloco"
           [tooltip]="'documentWorkspaces.common.delete' | transloco"
           (click)="deleteRequested.emit()">
-          <trash-icon />
+          <x-mark-icon />
         </button>
       }
     </div>
@@ -8016,6 +8016,8 @@ var PrincipalPicker = class PrincipalPicker {
 					"fieldLabelLang",
 					"placeholder",
 					"ariaLabel",
+					"hideKeyboardLabel",
+					"keyboardLabel",
 					"noResultsText",
 					"searchingText",
 					"errorText",
@@ -9778,7 +9780,7 @@ var WorkspaceDetail = class WorkspaceDetail {
 		host: { classAttribute: "flex h-full min-h-0" },
 		providers: [provideTranslocoScope("document-workspaces")],
 		ngImport: i0,
-		template: "\n    <div class=\"@container flex min-h-0 min-w-0 flex-1 flex-col p-3 pb-2 md:p-8 md:pb-4\">\n      <div class=\"mb-3 flex flex-wrap items-center gap-x-3 gap-y-2\">\n        <button\n          size=\"sm\"\n          variant=\"tertiary\"\n          scheme=\"neutral\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"leave()\">\n          <chevron-left-icon />\n        </button>\n\n        @if (workspace(); as workspace) {\n          <h1 class=\"min-w-28 flex-[1_1_16rem] text-2xl leading-[31px] font-bold break-words text-(--font-neutral-black)\">{{ workspace.name }}</h1>\n\n          <!-- Beside the title while they fit next to its 16rem, on a line of their own under it once they do not. -->\n          @if (!deletedElsewhere()) {\n            <div class=\"ml-auto flex shrink-0 items-center gap-1\">\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\"\n                [writerOnly]=\"workspace.currentUserRole\"\n                (click)=\"confirmDeleteWorkspace(workspace)\">\n                <trash-icon />\n                {{ \"documentWorkspaces.common.delete\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n                <user-round-icon />\n                {{ \"documentWorkspaces.share.title\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n                <pen-to-square-icon />\n                {{ \"documentWorkspaces.common.edit\" | transloco }}\n              </button>\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                [iconOnly]=\"true\"\n                [disabled]=\"refreshing()\"\n                [attr.aria-label]=\"'documentWorkspaces.common.refresh' | transloco\"\n                [tooltip]=\"'documentWorkspaces.common.refresh' | transloco\"\n                (click)=\"refresh()\">\n                <refresh-icon />\n              </button>\n            </div>\n          }\n        }\n      </div>\n\n      @if (workspace(); as workspace) {\n        @if (workspace.description) {\n          <p class=\"mb-3 text-base text-(--font-primary-base)\">{{ workspace.description }}</p>\n        }\n        @if (workspace.tags.length) {\n          <p class=\"mb-6 flex items-center gap-2 text-sm text-(--font-primary-base)\" data-testid=\"tags\">\n            <tag-icon class=\"size-4\" />\n            {{ workspace.tags.join(\", \") }}\n          </p>\n        }\n\n        @if (!deletedElsewhere()) {\n        <div class=\"mb-3 flex flex-wrap items-center gap-2\">\n          <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n            <button\n              variant=\"none\"\n              class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n              [attr.aria-pressed]=\"viewMode() === 'grid'\"\n              [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n              [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n              (click)=\"viewMode.set('grid')\">\n              <grid-icon class=\"size-3.5\" />\n            </button>\n            <button\n              variant=\"none\"\n              class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n              [attr.aria-pressed]=\"viewMode() === 'list'\"\n              [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n              [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n              (click)=\"viewMode.set('list')\">\n              <list-icon class=\"size-3.5\" />\n            </button>\n          </div>\n\n          <SearchInput\n            role=\"search\"\n            class=\"min-w-32 flex-[0_1_15rem]\"\n            [formField]=\"searchForm\"\n            [placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n          <button class=\"@max-md:px-2\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            <span class=\"@max-md:sr-only\">{{ \"documentWorkspaces.detail.upload\" | transloco }}</span>\n          </button>\n\n          @if (selection.selectableItems().length) {\n            @if (selection.active()) {\n              <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n                <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n                  {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n                </button>\n                <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n                  <trash-icon />\n                  {{ \"documentWorkspaces.common.delete\" | transloco }}\n                </button>\n              </div>\n            }\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n              {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n            </button>\n          }\n        </div>\n\n        <p class=\"mb-6 text-sm text-(--font-primary-base)\" aria-live=\"polite\" data-testid=\"count\">\n          @if (selection.active()) {\n            {{ \"documentWorkspaces.detail.selectedDocumentCount\" | transloco: { count: selection.count() } }}\n          } @else {\n            {{ \"documentWorkspaces.detail.fileCount\" | transloco: { count: workspace.documentCount } }}\n          }\n        </p>\n        }\n      }\n\n      @if (refreshError(); as message) {\n        <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.refreshError\" | transloco: { error: message } }}</p>\n      }\n\n      <!-- Only the documents scroll: the title, the toolbar and the count stay in place. -->\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n      @switch (status()) {\n        @case (\"loading\") {\n          <p class=\"text-(--font-primary-muted) text-sm\">{{ \"documentWorkspaces.detail.docsLoading\" | transloco }}</p>\n        }\n        @case (\"error\") {\n          <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n            <span class=\"text-(--font-error-base)\">\n              @if (loadError(); as message) {\n                <workspace-message [message]=\"message\" />\n              } @else {\n                {{ \"documentWorkspaces.detail.docsLoadError\" | transloco }}\n              }\n            </span>\n            <button variant=\"secondary\" size=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n          </div>\n        }\n        @default {\n          @if (deletedElsewhere()) {\n            <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"not-found\">\n              <div class=\"mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)\">\n                <file-search-icon class=\"size-6\" />\n              </div>\n              <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n              <button variant=\"secondary\" size=\"sm\" class=\"mt-2\" (click)=\"leave()\">{{ \"documentWorkspaces.detail.back\" | transloco }}</button>\n            </div>\n          } @else if (workspace(); as workspace) {\n            @if (!documents().length) {\n              <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n                <svg class=\"mb-1 block size-14 shrink-0\" width=\"56\" height=\"56\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-testid=\"empty-icon\">\n                  <g opacity=\"0.8\">\n                    <rect class=\"fill-(--teal-100,#E0F4F1)\" width=\"38\" height=\"38\" rx=\"12\" />\n                    <path\n                      d=\"M11.2 24.8504H26.8C27.1575 24.8504 27.45 24.5579 27.45 24.2004V14.4504C27.45 14.0929 27.1575 13.8004 26.8 13.8004H20.7347C20.0319 13.8004 19.3453 13.5729 18.7847 13.1504L17.2247 11.9804C17.1109 11.8951 16.9769 11.8504 16.8347 11.8504H11.2C10.8425 11.8504 10.55 12.1429 10.55 12.5004V24.2004C10.55 24.5579 10.8425 24.8504 11.2 24.8504ZM26.8 26.8004H11.2C9.76591 26.8004 8.59998 25.6345 8.59998 24.2004V12.5004C8.59998 11.0663 9.76591 9.90039 11.2 9.90039H16.8347C17.3953 9.90039 17.9437 10.0832 18.3947 10.4204L19.9547 11.5904C20.1781 11.761 20.4544 11.8504 20.7347 11.8504H26.8C28.234 11.8504 29.4 13.0163 29.4 14.4504V24.2004C29.4 25.6345 28.234 26.8004 26.8 26.8004Z\"\n                      class=\"fill-(--teal-400,#4EBFB0)\" />\n                  </g>\n                </svg>\n                <h5 class=\"text-sm font-semibold text-(--font-primary-dark)\">{{ \"documentWorkspaces.detail.emptyTitle\" | transloco }}</h5>\n                <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.detail.emptySubtitle\" | transloco }}</p>\n              </div>\n            } @else if (!filtered().length) {\n              <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"no-match\">{{ \"documentWorkspaces.detail.noMatch\" | transloco }}</p>\n            } @else if (viewMode() === \"grid\") {\n              <div class=\"grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] content-start gap-4 pb-8\">\n                @for (document of filtered(); track document.id) {\n                  <document-card\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            } @else {\n              <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n                <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n                  @if (selection.active()) {\n                    <div role=\"columnheader\">\n                      <checkbox\n                        [checked]=\"selection.allSelected()\"\n                        [indeterminate]=\"selection.partiallySelected()\"\n                        [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                        (checkedChange)=\"selection.toggleAll()\" />\n                    </div>\n                  }\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnName\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSource\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSize\" | transloco }}</div>\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnDate\" | transloco }}</div>\n                  <div role=\"columnheader\"></div>\n                </div>\n                @for (document of filtered(); track document.id) {\n                  <document-row\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            }\n\n            @if (hasMore()) {\n              <div class=\"flex flex-col items-center gap-2\">\n                @if (loadMoreError(); as message) {\n                  <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.loadMoreError\" | transloco: { error: message } }}</p>\n                }\n                <button variant=\"secondary\" size=\"sm\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                  {{ \"documentWorkspaces.detail.loadMore\" | transloco }}\n                </button>\n              </div>\n            }\n          } @else {\n            <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"not-found\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n          }\n        }\n      }\n      </div>\n    </div>\n\n    <!-- The list gives up part of its width to the preview, and takes it back when the preview closes. -->\n    <div\n      #handle=\"resizeHandle\"\n      class=\"group/handle flex w-3 shrink-0 cursor-col-resize items-center justify-center max-md:hidden\"\n      [class.hidden]=\"!previewed()\"\n      [resizeHandle]=\"previewWidth()\"\n      (resizeHandleChange)=\"userPreviewWidth.set($event)\"\n      [resizeMin]=\"280\"\n      [resizeMax]=\"maxPreviewWidth()\"\n      [attr.aria-label]=\"'documentWorkspaces.preview.resize' | transloco\">\n      <span class=\"h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100\"></span>\n    </div>\n    <aside\n      class=\"sticky top-3 my-3 mr-3 flex h-[calc(100dvh-1.5rem)] max-h-[calc(100%-1.5rem)] shrink-0 self-start overflow-hidden rounded-(--radius-xl) bg-(--bg-neutral-white) transition-[width] duration-[350ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none data-open:border data-open:border-(--stroke-primary-lighter) data-open:shadow-[0_4px_6px_-2px_rgba(45,57,58,0.05),0_10px_15px_-3px_rgba(45,57,58,0.1)] max-md:data-open:fixed max-md:data-open:inset-0 max-md:data-open:z-50 max-md:data-open:m-0 max-md:data-open:w-full! max-md:data-open:max-h-none max-md:data-open:rounded-none\"\n      [class.transition-none]=\"handle.resizing()\"\n      [style.width.px]=\"previewed() ? previewWidth() : 0\"\n      [attr.data-open]=\"previewed() ? '' : null\"\n      [attr.aria-hidden]=\"previewed() ? null : 'true'\"\n      data-testid=\"preview\">\n      @if (previewed(); as previewed) {\n        <!-- Its own width, so the content does not reflow while the card opens. -->\n        <document-preview-panel\n          class=\"shrink-0 max-md:w-full!\"\n          [style.width.px]=\"previewWidth()\"\n          [document]=\"previewed\"\n          [queryName]=\"queryName()\"\n          (closed)=\"previewedDocumentId.set(null)\"\n          (askFollowUp)=\"askFollowUp.emit($event)\" />\n      }\n    </aside>\n  ",
+		template: "\n    <div class=\"@container flex min-h-0 min-w-0 flex-1 flex-col p-3 pb-2 md:p-8 md:pb-4\">\n      <div class=\"mb-3 flex flex-wrap items-center gap-x-3 gap-y-2\">\n        <button\n          size=\"sm\"\n          variant=\"tertiary\"\n          scheme=\"neutral\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"leave()\">\n          <chevron-left-icon />\n        </button>\n\n        @if (workspace(); as workspace) {\n          <h1 class=\"min-w-28 flex-[1_1_16rem] text-2xl leading-[31px] font-bold break-words text-(--font-neutral-black)\">{{ workspace.name }}</h1>\n\n          <!-- Beside the title while they fit next to its 16rem, on a line of their own under it once they do not. -->\n          @if (!deletedElsewhere()) {\n            <div class=\"ml-auto flex shrink-0 items-center gap-1\">\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\"\n                [writerOnly]=\"workspace.currentUserRole\"\n                (click)=\"confirmDeleteWorkspace(workspace)\">\n                <x-mark-icon />\n                {{ \"documentWorkspaces.common.delete\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n                <user-round-icon />\n                {{ \"documentWorkspaces.share.title\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n                <pen-to-square-icon />\n                {{ \"documentWorkspaces.common.edit\" | transloco }}\n              </button>\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                [iconOnly]=\"true\"\n                [disabled]=\"refreshing()\"\n                [attr.aria-label]=\"'documentWorkspaces.common.refresh' | transloco\"\n                [tooltip]=\"'documentWorkspaces.common.refresh' | transloco\"\n                (click)=\"refresh()\">\n                <refresh-icon />\n              </button>\n            </div>\n          }\n        }\n      </div>\n\n      @if (workspace(); as workspace) {\n        @if (workspace.description) {\n          <p class=\"mb-3 text-base text-(--font-primary-base)\">{{ workspace.description }}</p>\n        }\n        @if (workspace.tags.length) {\n          <p class=\"mb-6 flex items-center gap-2 text-sm text-(--font-primary-base)\" data-testid=\"tags\">\n            <tag-icon class=\"size-4\" />\n            {{ workspace.tags.join(\", \") }}\n          </p>\n        }\n\n        @if (!deletedElsewhere()) {\n        <div class=\"mb-3 flex flex-wrap items-center gap-2\">\n          <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n            <button\n              variant=\"none\"\n              class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n              [attr.aria-pressed]=\"viewMode() === 'grid'\"\n              [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n              [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n              (click)=\"viewMode.set('grid')\">\n              <grid-icon class=\"size-3.5\" />\n            </button>\n            <button\n              variant=\"none\"\n              class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n              [attr.aria-pressed]=\"viewMode() === 'list'\"\n              [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n              [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n              (click)=\"viewMode.set('list')\">\n              <list-icon class=\"size-3.5\" />\n            </button>\n          </div>\n\n          <SearchInput\n            role=\"search\"\n            class=\"min-w-32 flex-[0_1_15rem]\"\n            [formField]=\"searchForm\"\n            [placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n          <button class=\"@max-md:px-2\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            <span class=\"@max-md:sr-only\">{{ \"documentWorkspaces.detail.upload\" | transloco }}</span>\n          </button>\n\n          @if (selection.selectableItems().length) {\n            @if (selection.active()) {\n              <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n                <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n                  {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n                </button>\n                <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n                  <x-mark-icon />\n                  {{ \"documentWorkspaces.common.delete\" | transloco }}\n                </button>\n              </div>\n            }\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n              {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n            </button>\n          }\n        </div>\n\n        <p class=\"mb-6 text-sm text-(--font-primary-base)\" aria-live=\"polite\" data-testid=\"count\">\n          @if (selection.active()) {\n            {{ \"documentWorkspaces.detail.selectedDocumentCount\" | transloco: { count: selection.count() } }}\n          } @else {\n            {{ \"documentWorkspaces.detail.fileCount\" | transloco: { count: workspace.documentCount } }}\n          }\n        </p>\n        }\n      }\n\n      @if (refreshError(); as message) {\n        <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.refreshError\" | transloco: { error: message } }}</p>\n      }\n\n      <!-- Only the documents scroll: the title, the toolbar and the count stay in place. -->\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n      @switch (status()) {\n        @case (\"loading\") {\n          <p class=\"text-(--font-primary-muted) text-sm\">{{ \"documentWorkspaces.detail.docsLoading\" | transloco }}</p>\n        }\n        @case (\"error\") {\n          <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n            <span class=\"text-(--font-error-base)\">\n              @if (loadError(); as message) {\n                <workspace-message [message]=\"message\" />\n              } @else {\n                {{ \"documentWorkspaces.detail.docsLoadError\" | transloco }}\n              }\n            </span>\n            <button variant=\"secondary\" size=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n          </div>\n        }\n        @default {\n          @if (deletedElsewhere()) {\n            <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"not-found\">\n              <div class=\"mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)\">\n                <file-search-icon class=\"size-6\" />\n              </div>\n              <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n              <button variant=\"secondary\" size=\"sm\" class=\"mt-2\" (click)=\"leave()\">{{ \"documentWorkspaces.detail.back\" | transloco }}</button>\n            </div>\n          } @else if (workspace(); as workspace) {\n            @if (!documents().length) {\n              <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n                <svg class=\"mb-1 block size-14 shrink-0\" width=\"56\" height=\"56\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-testid=\"empty-icon\">\n                  <g opacity=\"0.8\">\n                    <rect class=\"fill-(--teal-100,#E0F4F1)\" width=\"38\" height=\"38\" rx=\"12\" />\n                    <path\n                      d=\"M11.2 24.8504H26.8C27.1575 24.8504 27.45 24.5579 27.45 24.2004V14.4504C27.45 14.0929 27.1575 13.8004 26.8 13.8004H20.7347C20.0319 13.8004 19.3453 13.5729 18.7847 13.1504L17.2247 11.9804C17.1109 11.8951 16.9769 11.8504 16.8347 11.8504H11.2C10.8425 11.8504 10.55 12.1429 10.55 12.5004V24.2004C10.55 24.5579 10.8425 24.8504 11.2 24.8504ZM26.8 26.8004H11.2C9.76591 26.8004 8.59998 25.6345 8.59998 24.2004V12.5004C8.59998 11.0663 9.76591 9.90039 11.2 9.90039H16.8347C17.3953 9.90039 17.9437 10.0832 18.3947 10.4204L19.9547 11.5904C20.1781 11.761 20.4544 11.8504 20.7347 11.8504H26.8C28.234 11.8504 29.4 13.0163 29.4 14.4504V24.2004C29.4 25.6345 28.234 26.8004 26.8 26.8004Z\"\n                      class=\"fill-(--teal-400,#4EBFB0)\" />\n                  </g>\n                </svg>\n                <h5 class=\"text-sm font-semibold text-(--font-primary-dark)\">{{ \"documentWorkspaces.detail.emptyTitle\" | transloco }}</h5>\n                <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.detail.emptySubtitle\" | transloco }}</p>\n              </div>\n            } @else if (!filtered().length) {\n              <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"no-match\">{{ \"documentWorkspaces.detail.noMatch\" | transloco }}</p>\n            } @else if (viewMode() === \"grid\") {\n              <div class=\"grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] content-start gap-4 pb-8\">\n                @for (document of filtered(); track document.id) {\n                  <document-card\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            } @else {\n              <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n                <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n                  @if (selection.active()) {\n                    <div role=\"columnheader\">\n                      <checkbox\n                        [checked]=\"selection.allSelected()\"\n                        [indeterminate]=\"selection.partiallySelected()\"\n                        [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                        (checkedChange)=\"selection.toggleAll()\" />\n                    </div>\n                  }\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnName\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSource\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSize\" | transloco }}</div>\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnDate\" | transloco }}</div>\n                  <div role=\"columnheader\"></div>\n                </div>\n                @for (document of filtered(); track document.id) {\n                  <document-row\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            }\n\n            @if (hasMore()) {\n              <div class=\"flex flex-col items-center gap-2\">\n                @if (loadMoreError(); as message) {\n                  <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.loadMoreError\" | transloco: { error: message } }}</p>\n                }\n                <button variant=\"secondary\" size=\"sm\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                  {{ \"documentWorkspaces.detail.loadMore\" | transloco }}\n                </button>\n              </div>\n            }\n          } @else {\n            <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"not-found\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n          }\n        }\n      }\n      </div>\n    </div>\n\n    <!-- The list gives up part of its width to the preview, and takes it back when the preview closes. -->\n    <div\n      #handle=\"resizeHandle\"\n      class=\"group/handle flex w-3 shrink-0 cursor-col-resize items-center justify-center max-md:hidden\"\n      [class.hidden]=\"!previewed()\"\n      [resizeHandle]=\"previewWidth()\"\n      (resizeHandleChange)=\"userPreviewWidth.set($event)\"\n      [resizeMin]=\"280\"\n      [resizeMax]=\"maxPreviewWidth()\"\n      [attr.aria-label]=\"'documentWorkspaces.preview.resize' | transloco\">\n      <span class=\"h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100 pointer-coarse:opacity-100\"></span>\n    </div>\n    <aside\n      class=\"sticky top-3 my-3 mr-3 flex h-[calc(100dvh-1.5rem)] max-h-[calc(100%-1.5rem)] shrink-0 self-start overflow-hidden rounded-(--radius-xl) bg-(--bg-neutral-white) transition-[width] duration-[350ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none data-open:border data-open:border-(--stroke-primary-lighter) data-open:shadow-[0_4px_6px_-2px_rgba(45,57,58,0.05),0_10px_15px_-3px_rgba(45,57,58,0.1)] max-md:data-open:fixed max-md:data-open:inset-0 max-md:data-open:z-50 max-md:data-open:m-0 max-md:data-open:w-full! max-md:data-open:max-h-none max-md:data-open:rounded-none\"\n      [class.transition-none]=\"handle.resizing()\"\n      [style.width.px]=\"previewed() ? previewWidth() : 0\"\n      [attr.data-open]=\"previewed() ? '' : null\"\n      [attr.aria-hidden]=\"previewed() ? null : 'true'\"\n      data-testid=\"preview\">\n      @if (previewed(); as previewed) {\n        <!-- Its own width, so the content does not reflow while the card opens. -->\n        <document-preview-panel\n          class=\"shrink-0 max-md:w-full!\"\n          [style.width.px]=\"previewWidth()\"\n          [document]=\"previewed\"\n          [queryName]=\"queryName()\"\n          (closed)=\"previewedDocumentId.set(null)\"\n          (askFollowUp)=\"askFollowUp.emit($event)\" />\n      }\n    </aside>\n  ",
 		isInline: true,
 		dependencies: [
 			{
@@ -9948,8 +9950,8 @@ var WorkspaceDetail = class WorkspaceDetail {
 			},
 			{
 				kind: "component",
-				type: TrashIcon,
-				selector: "trash, trash-icon, Trash, TrashIcon",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
 			{
@@ -10012,7 +10014,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SearchInputComponent,
 				TagIcon,
 				TooltipDirective,
-				TrashIcon,
+				XMarkIcon,
 				UploadIcon,
 				UserRoundIcon,
 				WorkspaceMessage,
@@ -10048,7 +10050,7 @@ i0.ɵɵngDeclareClassMetadata({
                 class="text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)"
                 [writerOnly]="workspace.currentUserRole"
                 (click)="confirmDeleteWorkspace(workspace)">
-                <trash-icon />
+                <x-mark-icon />
                 {{ "documentWorkspaces.common.delete" | transloco }}
               </button>
               <button size="sm" variant="tertiary" scheme="neutral" [writerOnly]="workspace.currentUserRole" (click)="share(workspace)">
@@ -10129,7 +10131,7 @@ i0.ɵɵngDeclareClassMetadata({
                   {{ (selection.allSelected() ? "documentWorkspaces.common.unselectAll" : "documentWorkspaces.common.selectAll") | transloco }}
                 </button>
                 <button class="text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)" variant="tertiary" scheme="neutral" size="sm" [disabled]="!selection.count()" (click)="deleteSelected()">
-                  <trash-icon />
+                  <x-mark-icon />
                   {{ "documentWorkspaces.common.delete" | transloco }}
                 </button>
               </div>
@@ -10275,7 +10277,7 @@ i0.ɵɵngDeclareClassMetadata({
       [resizeMin]="280"
       [resizeMax]="maxPreviewWidth()"
       [attr.aria-label]="'documentWorkspaces.preview.resize' | transloco">
-      <span class="h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100"></span>
+      <span class="h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100 pointer-coarse:opacity-100"></span>
     </div>
     <aside
       class="sticky top-3 my-3 mr-3 flex h-[calc(100dvh-1.5rem)] max-h-[calc(100%-1.5rem)] shrink-0 self-start overflow-hidden rounded-(--radius-xl) bg-(--bg-neutral-white) transition-[width] duration-[350ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none data-open:border data-open:border-(--stroke-primary-lighter) data-open:shadow-[0_4px_6px_-2px_rgba(45,57,58,0.05),0_10px_15px_-3px_rgba(45,57,58,0.1)] max-md:data-open:fixed max-md:data-open:inset-0 max-md:data-open:z-50 max-md:data-open:m-0 max-md:data-open:w-full! max-md:data-open:max-h-none max-md:data-open:rounded-none"