@loomweaver/shell 0.7.7 → 0.7.8

package/fesm2022/loomweaver-shell.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Service, inject, makeEnvironmentProviders, ApplicationRef, Injector, effect, untracked, provideEnvironmentInitializer, ErrorHandler, isDevMode, input, Directive, CUSTOM_ELEMENTS_SCHEMA, Component, output, ElementRef, EnvironmentInjector, DestroyRef, viewChild, afterRenderEffect, afterNextRender, createComponent, forwardRef, booleanAttribute, ViewEncapsulation, viewChildren, Injectable, provideZonelessChangeDetection, provideBrowserGlobalErrorListeners, provideAppInitializer } from '@angular/core';
+import { InjectionToken, isDevMode, signal, computed, Service, inject, makeEnvironmentProviders, ApplicationRef, Injector, effect, untracked, provideEnvironmentInitializer, ErrorHandler, ElementRef, input, booleanAttribute, Directive, CUSTOM_ELEMENTS_SCHEMA, Component, output, EnvironmentInjector, DestroyRef, viewChild, afterRenderEffect, afterNextRender, createComponent, forwardRef, ViewEncapsulation, viewChildren, Injectable, provideZonelessChangeDetection, provideBrowserGlobalErrorListeners, provideAppInitializer } from '@angular/core';
 import { ChildrenOutletContexts, Router, NavigationEnd, ActivatedRoute, convertToParamMap, UrlSegment, RouterOutlet, RouteReuseStrategy, provideRouter, withDisabledInitialNavigation } from '@angular/router';
 import { TranslocoService, TranslocoPipe, provideTransloco, provideTranslocoMissingHandler } from '@jsverse/transloco';
 import { DOCUMENT, NgComponentOutlet, Location, NgTemplateOutlet } from '@angular/common';
@@ -43,6 +43,40 @@ function provideLayout(layout) {
     return { provide: SHELL_LAYOUT, useValue: layout };
 }
 
+const warned = new Set();
+function menuOnActivate(item) {
+    if (!item.menu || item.menuTrigger === undefined || item.menuTrigger === 'context') {
+        return undefined;
+    }
+    return item.workspace === undefined ? item.menu : undefined;
+}
+function menuOnContext(item) {
+    if (!item.menu) {
+        return undefined;
+    }
+    return menuOnActivate(item) && item.menuTrigger === 'primary'
+        ? undefined
+        : item.menu;
+}
+function warnMenuTriggerConflict(item) {
+    if (!isDevMode() || warned.has(item.id)) {
+        return;
+    }
+    if (item.workspace !== undefined && item.menuTrigger !== undefined && item.menuTrigger !== 'context') {
+        warned.add(item.id);
+        console.warn(`Item "${item.id}" switches to workspace "${item.workspace}" and asks for its menu on ` +
+            `activation — activating it is the switch, so the menu "${item.menu}" stays on the ` +
+            `right-click.`);
+        return;
+    }
+    if (menuOnActivate(item) && (item.command !== undefined || item.run !== undefined)) {
+        warned.add(item.id);
+        console.warn(`Item "${item.id}" opens the menu "${item.menu}" on activation, so its ` +
+            `${item.command === undefined ? 'inline behaviour' : `command "${item.command}"`} is ` +
+            `never run from here. Reach it from a menu entry, a shortcut or the palette instead.`);
+    }
+}
+
 const PRIMARY_PANE = 'main';
 const VIEW_PANE_PREFIX = 'view:';
 const CONTENT_DOCK = 'content';
@@ -2495,8 +2529,24 @@ function reflectAttribute(element, name, value) {
 const LW_MENU_TAG = 'lw-menu';
 const LW_MENU_ITEM_TAG = 'lw-menu-item';
 const VIEWPORT_MARGIN$1 = 4;
+const MENU_ANCHOR_GAP = 4;
 const LW_MENU_SELECT = 'lw-menu-select';
 const LW_MENU_DISMISS = 'lw-menu-dismiss';
+function fits(start, size, limit) {
+    return start >= VIEWPORT_MARGIN$1 && start + size <= limit - VIEWPORT_MARGIN$1;
+}
+function clamp(start, size, limit) {
+    return Math.max(VIEWPORT_MARGIN$1, Math.min(start, limit - size - VIEWPORT_MARGIN$1));
+}
+function beside(preferred, opposite, size, limit) {
+    if (fits(preferred, size, limit)) {
+        return preferred;
+    }
+    return fits(opposite, size, limit) ? opposite : clamp(preferred, size, limit);
+}
+function aligned(near, far, size, limit) {
+    return fits(near, size, limit) ? near : clamp(far - size, size, limit);
+}
 class LwMenuItemElement extends HTMLElement {
     static observedAttributes = [
         'label',
@@ -2590,10 +2640,26 @@ class LwMenuElement extends HTMLElement {
     }
     openAt(x, y) {
         const { width, height } = this.getBoundingClientRect();
-        const maxLeft = window.innerWidth - width - VIEWPORT_MARGIN$1;
-        const maxTop = window.innerHeight - height - VIEWPORT_MARGIN$1;
-        this.style.left = `${Math.max(VIEWPORT_MARGIN$1, Math.min(x, maxLeft))}px`;
-        this.style.top = `${Math.max(VIEWPORT_MARGIN$1, Math.min(y, maxTop))}px`;
+        this.place(clamp(x, width, window.innerWidth), clamp(y, height, window.innerHeight));
+    }
+    openBeside(rect, side) {
+        const { width, height } = this.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const after = { x: rect.right + MENU_ANCHOR_GAP, y: rect.bottom + MENU_ANCHOR_GAP };
+        const before = {
+            x: rect.left - MENU_ANCHOR_GAP - width,
+            y: rect.top - MENU_ANCHOR_GAP - height,
+        };
+        if (side === 'left' || side === 'right') {
+            const preferred = side === 'right' ? after.x : before.x;
+            const opposite = side === 'right' ? before.x : after.x;
+            this.place(beside(preferred, opposite, width, viewportWidth), aligned(rect.top, rect.bottom, height, viewportHeight));
+            return;
+        }
+        const preferred = side === 'bottom' ? after.y : before.y;
+        const opposite = side === 'bottom' ? before.y : after.y;
+        this.place(aligned(rect.left, rect.right, width, viewportWidth), beside(preferred, opposite, height, viewportHeight));
     }
     onKeydown = (event) => this.handleKeydown(event);
     onClick = (event) => {
@@ -2602,6 +2668,10 @@ class LwMenuElement extends HTMLElement {
             this.select(item);
         }
     };
+    place(left, top) {
+        this.style.left = `${left}px`;
+        this.style.top = `${top}px`;
+    }
     items() {
         return [...this.querySelectorAll('[role^="menuitem"]')].filter((item) => !this.isDisabled(item));
     }
@@ -2678,28 +2748,30 @@ function defineLwMenu() {
     }
 }
 
-const MENU_ANCHOR_GAP = 4;
 class MenuService {
     registry = inject(ContributionRegistry);
     commands = inject(CommandService);
     transloco = inject(TranslocoService);
+    trigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     current;
-    open(menuId, context, at) {
+    openTrigger = this.trigger.asReadonly();
+    open(menuId, context, at, options = {}) {
         this.close();
         const resolved = this.resolve(typeof menuId === 'string' ? [menuId] : menuId, context);
         if (resolved.length === 0) {
             return;
         }
-        const menu = this.createMenu(resolved);
+        const menu = this.createMenu(resolved, options.header);
         const byKey = new Map(resolved.map((entry) => [entry.key, entry.item]));
         this.present(menu, at, (key) => {
             const item = key === null ? undefined : byKey.get(key);
             if (item) {
                 this.run(item, context);
             }
-        });
+        }, options.trigger);
     }
-    openList(entries, at, onPick) {
+    openList(entries, at, onPick, trigger) {
         this.close();
         if (entries.length === 0) {
             return;
@@ -2709,7 +2781,7 @@ class MenuService {
             if (key !== null) {
                 onPick(key);
             }
-        });
+        }, trigger);
     }
     close() {
         const open = this.current;
@@ -2717,13 +2789,14 @@ class MenuService {
             return;
         }
         this.current = undefined;
+        this.trigger.set(null);
         clearTimeout(open.listenTimer);
         document.removeEventListener('pointerdown', open.onOutside, true);
         document.body.classList.remove('lw-menu-open');
         open.menu.remove();
         open.restore?.focus?.();
     }
-    present(menu, at, onSelect) {
+    present(menu, at, onSelect, trigger) {
         const restore = document.activeElement;
         menu.addEventListener(LW_MENU_SELECT, (event) => {
             const key = event.detail
@@ -2739,7 +2812,13 @@ class MenuService {
         };
         document.body.append(menu);
         document.body.classList.add('lw-menu-open');
-        menu.openAt(at.x, at.y);
+        if ('rect' in at) {
+            menu.openBeside(at.rect, at.side);
+        }
+        else {
+            menu.openAt(at.x, at.y);
+        }
+        this.trigger.set(trigger ?? null);
         const listenTimer = setTimeout(() => document.addEventListener('pointerdown', onOutside, { capture: true }), 0);
         this.current = { menu, onOutside, restore, listenTimer };
     }
@@ -2775,11 +2854,14 @@ class MenuService {
             .filter((entry) => entry !== null)
             .toSorted((a, b) => a.group.localeCompare(b.group) || a.order - b.order);
     }
-    createMenu(resolved) {
+    createMenu(resolved, header) {
         const menu = document.createElement(LW_MENU_TAG);
         if (resolved.some((entry) => entry.icon || entry.checkbox)) {
             menu.classList.add('lw-menu--leading');
         }
+        if (header) {
+            menu.append(this.createHeader(header, menu));
+        }
         let lastGroup;
         for (const entry of resolved) {
             if (lastGroup !== undefined && entry.group !== lastGroup) {
@@ -2808,6 +2890,66 @@ class MenuService {
         }
         return menu;
     }
+    createHeader(header, menu) {
+        const title = this.transloco.translate(header.title);
+        const detail = header.detail
+            ? this.transloco.translate(header.detail)
+            : undefined;
+        menu.setAttribute('aria-label', detail ? `${title}, ${detail}` : title);
+        const element = document.createElement('div');
+        element.className = 'lw-menu-header';
+        element.setAttribute('aria-hidden', 'true');
+        const mark = this.createHeaderMark(header);
+        if (mark) {
+            element.append(mark);
+        }
+        const lines = document.createElement('span');
+        lines.className = 'lw-menu-header-lines';
+        const name = document.createElement('span');
+        name.className = 'lw-menu-header-title';
+        name.textContent = title;
+        lines.append(name);
+        if (detail) {
+            const second = document.createElement('span');
+            second.className = 'lw-menu-header-detail';
+            second.textContent = detail;
+            lines.append(second);
+        }
+        element.append(lines);
+        return element;
+    }
+    createHeaderMark(header) {
+        if (!header.image && !header.initials && !header.icon) {
+            return undefined;
+        }
+        const mark = document.createElement('span');
+        mark.className = 'lw-menu-header-mark';
+        mark.append(...this.markContent(header));
+        if (header.image) {
+            const picture = mark.firstElementChild;
+            picture.addEventListener('error', () => mark.replaceChildren(...this.markContent({ ...header, image: undefined })));
+        }
+        return mark;
+    }
+    markContent(header) {
+        if (header.image) {
+            const picture = document.createElement('img');
+            picture.src = header.image;
+            picture.alt = '';
+            picture.className = 'lw-menu-header-picture';
+            return [picture];
+        }
+        if (header.initials) {
+            return [document.createTextNode(header.initials)];
+        }
+        if (header.icon) {
+            const icon = document.createElement('lw-icon');
+            icon.setAttribute('name', header.icon);
+            icon.setAttribute('size', '1rem');
+            return [icon];
+        }
+        return [];
+    }
     createListMenu(entries) {
         const menu = document.createElement(LW_MENU_TAG);
         if (entries.some((entry) => entry.icon || entry.active || entry.checked !== undefined)) {
@@ -2859,35 +3001,74 @@ function whenMatches(when, context) {
     return Object.entries(when).every(([key, value]) => context[key] === value);
 }
 
-class ContextMenuDirective {
+function names(slots) {
+    return slots !== undefined && slots.length > 0;
+}
+class MenuTriggerDirective {
     menus = inject(MenuService);
-    menu = input(undefined, { ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'lwContextMenu' });
-    context = input({}, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'lwContextMenuContext' });
+    host = inject(ElementRef);
+    menu = input(undefined, { ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'lwMenu' });
+    onActivateMenu = input(undefined, { ...(ngDevMode ? { debugName: "onActivateMenu" } : /* istanbul ignore next */ {}), alias: 'lwMenuOnActivate' });
+    context = input({}, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'lwMenuContext' });
+    side = input('bottom', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'lwMenuSide' });
+    header = input(undefined, { ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), alias: 'lwMenuHeader' });
+    state = input(false, { ...(ngDevMode ? { debugName: "state" } : /* istanbul ignore next */ {}), alias: 'lwMenuState',
+        transform: booleanAttribute });
+    announces = computed(() => this.state() || names(this.onActivateMenu()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announces" }] : /* istanbul ignore next */ []));
+    hasPopup = computed(() => this.announces() ? 'menu' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPopup" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.announces()
+        ? String(this.menus.openTrigger() === this.host.nativeElement)
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     onContextMenu(event) {
-        const slot = this.menu();
-        if (!slot || slot.length === 0) {
+        const slots = this.menu();
+        if (!names(slots)) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-        this.menus.open(slot, this.context(), {
+        this.menus.open(slots, this.context(), {
             x: event.clientX,
             y: event.clientY,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: ContextMenuDirective, isStandalone: true, selector: "[lwContextMenu]", inputs: { menu: { classPropertyName: "menu", publicName: "lwContextMenu", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "lwContextMenuContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+    onActivate(event) {
+        const slots = this.onActivateMenu();
+        if (!names(slots)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const control = this.host.nativeElement;
+        this.menus.open(slots, this.context(), { rect: control.getBoundingClientRect(), side: this.side() }, { trigger: control, header: this.header() });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: MenuTriggerDirective, isStandalone: true, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: { menu: { classPropertyName: "menu", publicName: "lwMenu", isSignal: true, isRequired: false, transformFunction: null }, onActivateMenu: { classPropertyName: "onActivateMenu", publicName: "lwMenuOnActivate", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "lwMenuContext", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "lwMenuSide", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "lwMenuHeader", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "lwMenuState", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)", "click": "onActivate($event)" }, properties: { "attr.aria-haspopup": "hasPopup()", "attr.aria-expanded": "expanded()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[lwContextMenu]',
-                    host: { '(contextmenu)': 'onContextMenu($event)' },
+                    selector: '[lwMenu], [lwMenuOnActivate], [lwMenuState]',
+                    host: {
+                        '(contextmenu)': 'onContextMenu($event)',
+                        '(click)': 'onActivate($event)',
+                        '[attr.aria-haspopup]': 'hasPopup()',
+                        '[attr.aria-expanded]': 'expanded()',
+                    },
                 }]
-        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwContextMenu", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwContextMenuContext", required: false }] }] } });
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenu", required: false }] }], onActivateMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenuOnActivate", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenuContext", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenuSide", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenuHeader", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "lwMenuState", required: false }] }] } });
 
 const BAR_CONTEXT = new InjectionToken('BAR_CONTEXT');
 
+const MENU_SIDE_BY_DOCK = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+    center: 'bottom',
+};
 class ShellBarItem {
     item = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
@@ -2906,8 +3087,22 @@ class ShellBarItem {
         return 'component' in item ? null : item;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "asButton" }] : /* istanbul ignore next */ []));
+    brokenPicture = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brokenPicture" }] : /* istanbul ignore next */ []));
     tooltipPosition = computed(() => this.dock() === 'bottom' ? 'top' : 'bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    menuSide = computed(() => MENU_SIDE_BY_DOCK[this.dock()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuSide" }] : /* istanbul ignore next */ []));
+    contextMenu = computed(() => {
+        const button = this.asButton();
+        return button ? menuOnContext(button) : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+    activateMenu = computed(() => {
+        const button = this.asButton();
+        return button ? menuOnActivate(button) : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activateMenu" }] : /* istanbul ignore next */ []));
     componentInjector = computed(() => {
         const item = this.item();
         return Injector.create({
@@ -2931,17 +3126,27 @@ class ShellBarItem {
         return this.commands.shortcutOf(this.commands.commands().find((entry) => entry.id === button.command));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    pictureOf(button) {
+        return this.brokenPicture() ? undefined : button.image;
+    }
+    onPictureError() {
+        this.brokenPicture.set(true);
+    }
     run(button) {
         if (this.disabled())
             return;
+        warnMenuTriggerConflict(button);
+        if (menuOnActivate(button)) {
+            return;
+        }
         this.commands.trigger(button);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellBarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellBarItem, isStandalone: true, selector: "lw-shell-bar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, dock: { classPropertyName: "dock", publicName: "dock", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (asButton(); as btn) {\n  <button\n    type=\"button\"\n    (click)=\"run(btn)\"\n    [disabled]=\"disabled()\"\n    [lwContextMenu]=\"btn.menu\"\n    [lwContextMenuContext]=\"{ targetKind: 'bar-item', id: btn.id, bar: btn.bar }\"\n    class=\"relative flex items-center gap-1 rounded px-1.5 py-0.5 text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    [attr.aria-label]=\"(btn.tooltip ?? btn.label ?? '') | transloco\"\n  >\n    @if (btn.icon; as icon) {\n      <lw-icon [name]=\"icon\" size=\"1rem\" />\n    }\n    @if (btn.label; as label) {\n      <span>{{ label | transloco }}</span>\n    }\n    @if (shortcut(); as chord) {\n      <kbd\n        class=\"rounded border border-border bg-surface-overlay px-1 text-[0.6875rem] leading-tight text-content-muted\"\n        >{{ chord }}</kbd\n      >\n    }\n    @if (btn.tooltip ?? btn.label; as tip) {\n      <lw-tooltip [text]=\"tip | transloco\" [position]=\"tooltipPosition()\" />\n    }\n  </button>\n} @else if (asComponent(); as comp) {\n  <ng-container\n    *ngComponentOutlet=\"comp.component; injector: componentInjector()\"\n  ></ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ContextMenuDirective, selector: "[lwContextMenu]", inputs: ["lwContextMenu", "lwContextMenuContext"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellBarItem, isStandalone: true, selector: "lw-shell-bar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, dock: { classPropertyName: "dock", publicName: "dock", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (asButton(); as btn) {\n  <button\n    type=\"button\"\n    (click)=\"run(btn)\"\n    [disabled]=\"disabled()\"\n    [lwMenu]=\"contextMenu()\"\n    [lwMenuOnActivate]=\"activateMenu()\"\n    [lwMenuHeader]=\"btn.menuHeader\"\n    [lwMenuSide]=\"menuSide()\"\n    [lwMenuContext]=\"{ targetKind: 'bar-item', id: btn.id, bar: btn.bar }\"\n    class=\"relative flex items-center gap-1 rounded px-1.5 py-0.5 text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    [attr.aria-label]=\"(btn.tooltip ?? btn.label ?? '') | transloco\"\n  >\n    @if (pictureOf(btn); as picture) {\n      <img\n        [src]=\"picture\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-testid=\"bar-picture\"\n        class=\"lw-chrome-picture h-5 w-5\"\n        (error)=\"onPictureError()\"\n      />\n    } @else if (btn.initials) {\n      <span aria-hidden=\"true\" data-testid=\"bar-initials\" class=\"lw-rail-initials\">{{\n        btn.initials\n      }}</span>\n    } @else if (btn.icon; as icon) {\n      <lw-icon [name]=\"icon\" size=\"1rem\" />\n    }\n    @if (btn.label; as label) {\n      <span>{{ label | transloco }}</span>\n    }\n    @if (shortcut(); as chord) {\n      <kbd\n        class=\"rounded border border-border bg-surface-overlay px-1 text-[0.6875rem] leading-tight text-content-muted\"\n        >{{ chord }}</kbd\n      >\n    }\n    @if (btn.tooltip ?? btn.label; as tip) {\n      <lw-tooltip [text]=\"tip | transloco\" [position]=\"tooltipPosition()\" />\n    }\n  </button>\n} @else if (asComponent(); as comp) {\n  <ng-container\n    *ngComponentOutlet=\"comp.component; injector: componentInjector()\"\n  ></ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: ["lwMenu", "lwMenuOnActivate", "lwMenuContext", "lwMenuSide", "lwMenuHeader", "lwMenuState"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellBarItem, decorators: [{
             type: Component,
-            args: [{ selector: 'lw-shell-bar-item', imports: [NgComponentOutlet, TranslocoPipe, ContextMenuDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (asButton(); as btn) {\n  <button\n    type=\"button\"\n    (click)=\"run(btn)\"\n    [disabled]=\"disabled()\"\n    [lwContextMenu]=\"btn.menu\"\n    [lwContextMenuContext]=\"{ targetKind: 'bar-item', id: btn.id, bar: btn.bar }\"\n    class=\"relative flex items-center gap-1 rounded px-1.5 py-0.5 text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    [attr.aria-label]=\"(btn.tooltip ?? btn.label ?? '') | transloco\"\n  >\n    @if (btn.icon; as icon) {\n      <lw-icon [name]=\"icon\" size=\"1rem\" />\n    }\n    @if (btn.label; as label) {\n      <span>{{ label | transloco }}</span>\n    }\n    @if (shortcut(); as chord) {\n      <kbd\n        class=\"rounded border border-border bg-surface-overlay px-1 text-[0.6875rem] leading-tight text-content-muted\"\n        >{{ chord }}</kbd\n      >\n    }\n    @if (btn.tooltip ?? btn.label; as tip) {\n      <lw-tooltip [text]=\"tip | transloco\" [position]=\"tooltipPosition()\" />\n    }\n  </button>\n} @else if (asComponent(); as comp) {\n  <ng-container\n    *ngComponentOutlet=\"comp.component; injector: componentInjector()\"\n  ></ng-container>\n}\n" }]
+            args: [{ selector: 'lw-shell-bar-item', imports: [NgComponentOutlet, TranslocoPipe, MenuTriggerDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (asButton(); as btn) {\n  <button\n    type=\"button\"\n    (click)=\"run(btn)\"\n    [disabled]=\"disabled()\"\n    [lwMenu]=\"contextMenu()\"\n    [lwMenuOnActivate]=\"activateMenu()\"\n    [lwMenuHeader]=\"btn.menuHeader\"\n    [lwMenuSide]=\"menuSide()\"\n    [lwMenuContext]=\"{ targetKind: 'bar-item', id: btn.id, bar: btn.bar }\"\n    class=\"relative flex items-center gap-1 rounded px-1.5 py-0.5 text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    [attr.aria-label]=\"(btn.tooltip ?? btn.label ?? '') | transloco\"\n  >\n    @if (pictureOf(btn); as picture) {\n      <img\n        [src]=\"picture\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-testid=\"bar-picture\"\n        class=\"lw-chrome-picture h-5 w-5\"\n        (error)=\"onPictureError()\"\n      />\n    } @else if (btn.initials) {\n      <span aria-hidden=\"true\" data-testid=\"bar-initials\" class=\"lw-rail-initials\">{{\n        btn.initials\n      }}</span>\n    } @else if (btn.icon; as icon) {\n      <lw-icon [name]=\"icon\" size=\"1rem\" />\n    }\n    @if (btn.label; as label) {\n      <span>{{ label | transloco }}</span>\n    }\n    @if (shortcut(); as chord) {\n      <kbd\n        class=\"rounded border border-border bg-surface-overlay px-1 text-[0.6875rem] leading-tight text-content-muted\"\n        >{{ chord }}</kbd\n      >\n    }\n    @if (btn.tooltip ?? btn.label; as tip) {\n      <lw-tooltip [text]=\"tip | transloco\" [position]=\"tooltipPosition()\" />\n    }\n  </button>\n} @else if (asComponent(); as comp) {\n  <ng-container\n    *ngComponentOutlet=\"comp.component; injector: componentInjector()\"\n  ></ng-container>\n}\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], dock: [{ type: i0.Input, args: [{ isSignal: true, alias: "dock", required: true }] }] } });
 
 class ShellBar {
@@ -2965,7 +3170,9 @@ class ShellBar {
             .barItems()
             .filter((item) => item.bar === this.region().id && item.slot === slot)
             .filter((item) => this.auth.visible(item.access))
-            .filter((item) => 'component' in item || this.commands.triggerable(item))
+            .filter((item) => 'component' in item ||
+            menuOnActivate(item) !== undefined ||
+            this.commands.triggerable(item))
             .toSorted((a, b) => (a.order ?? 0) - (b.order ?? 0));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -6155,13 +6362,17 @@ class ShellRail {
     ...(ngDevMode ? [{ debugName: "connectedRails" }] : /* istanbul ignore next */ []));
     labelKey = computed(() => this.region().dock === 'right' ? 'rail.labelRight' : 'rail.label', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    menuSide = computed(() => this.region().dock === 'right' ? 'left' : 'right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuSide" }] : /* istanbul ignore next */ []));
     reorderable = this.features.reorder;
     draggable = this.features.reorder || this.features.moveItems;
     registered = computed(() => this.registry
         .railItems()
         .filter((item) => this.railItems.regionOf(item.id, item.rail) === this.region().id)
         .filter((item) => this.auth.visible(item.access))
-        .filter((item) => item.workspace !== undefined || this.commands.triggerable(item))
+        .filter((item) => item.workspace !== undefined ||
+        menuOnActivate(item) !== undefined ||
+        this.commands.triggerable(item))
         .toSorted((a, b) => (a.order ?? 0) - (b.order ?? 0)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
     items = computed(() => {
@@ -6174,16 +6385,26 @@ class ShellRail {
         return [...top, ...bottom];
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    brokenPictures = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brokenPictures" }] : /* istanbul ignore next */ []));
     firstBottomId = computed(() => this.items().find((item) => item.anchor === 'bottom')?.id, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "firstBottomId" }] : /* istanbul ignore next */ []));
     enterPredicate = (_drag, list) => list.id === this.dropListId() ? this.reorderable : this.features.moveItems;
+    pictureOf(item) {
+        return this.brokenPictures().has(item.id) ? undefined : item.image;
+    }
+    onPictureError(item) {
+        this.brokenPictures.update((broken) => new Set(broken).add(item.id));
+    }
     disabled(item) {
         return this.auth.disabled(item.access);
     }
     menusFor(item) {
-        return item.menu
-            ? [RAIL_ITEM_CONTEXT_MENU, item.menu]
-            : [RAIL_ITEM_CONTEXT_MENU];
+        const own = menuOnContext(item);
+        return own ? [RAIL_ITEM_CONTEXT_MENU, own] : [RAIL_ITEM_CONTEXT_MENU];
+    }
+    activateMenuFor(item) {
+        return menuOnActivate(item);
     }
     onKeydown(event) {
         const dock = this.dockForChord(event);
@@ -6205,6 +6426,10 @@ class ShellRail {
     run(item) {
         if (this.disabled(item))
             return;
+        warnMenuTriggerConflict(item);
+        if (menuOnActivate(item)) {
+            return;
+        }
         const workspace = item.workspace;
         if (workspace !== undefined) {
             void this.workspaces.switchTo(workspace);
@@ -6242,7 +6467,7 @@ class ShellRail {
         return event.key === 'ArrowLeft' ? 'left' : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellRail, isStandalone: true, selector: "lw-shell-rail", inputs: { region: { classPropertyName: "region", publicName: "region", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"flex h-full w-10 shrink-0 flex-col items-center gap-1 bg-surface py-2\"\n  [attr.aria-label]=\"labelKey() | transloco\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  [id]=\"dropListId()\"\n  [cdkDropListConnectedTo]=\"connectedRails()\"\n  [cdkDropListDisabled]=\"!draggable\"\n  [cdkDropListSortingDisabled]=\"!reorderable\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListSortPredicate]=\"sortPredicate\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  [lwReorderable]=\"containerId()\"\n  [lwReorderableEnabled]=\"reorderable\"\n  (reorder)=\"onReorder($event)\"\n  [lwContextMenu]=\"railMenu\"\n>\n  @for (item of items(); track item.id) {\n    <button\n      type=\"button\"\n      cdkDrag\n      [cdkDragData]=\"item.id\"\n      [cdkDragDisabled]=\"!draggable\"\n      [disabled]=\"disabled(item)\"\n      (click)=\"run(item)\"\n      (keydown)=\"onKeydown($event)\"\n      [lwContextMenu]=\"menusFor(item)\"\n      [lwContextMenuContext]=\"{ targetKind: 'rail-item', id: item.id, region: region().id }\"\n      [attr.aria-label]=\"item.title | transloco\"\n      [attr.aria-current]=\"current(item) ? 'true' : null\"\n      [attr.data-rail-item]=\"item.id\"\n      [attr.data-reorder-id]=\"reorderable ? item.id : null\"\n      [attr.data-reorder-band]=\"item.anchor ?? 'top'\"\n      [class.mt-auto]=\"item.id === firstBottomId()\"\n      [class.text-content]=\"current(item)\"\n      [class.bg-surface-overlay]=\"current(item)\"\n      class=\"relative flex h-9 w-9 items-center justify-center rounded-lg text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    >\n      @if (current(item)) {\n        <span\n          aria-hidden=\"true\"\n          class=\"absolute inset-y-1 w-0.5 rounded-full bg-brand\"\n          [class.left-0]=\"region().dock !== 'right'\"\n          [class.right-0]=\"region().dock === 'right'\"\n        ></span>\n      }\n      @if (item.initials) {\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"rail-initials\"\n          class=\"lw-rail-initials\"\n          >{{ item.initials }}</span\n        >\n      } @else {\n        <lw-icon [name]=\"item.icon\" size=\"1rem\" />\n      }\n      <lw-tooltip [text]=\"item.title | transloco\" [position]=\"region().dock === 'right' ? 'left' : 'right'\" />\n    </button>\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: Reorderable, selector: "[lwReorderable]", inputs: ["lwReorderable", "lwReorderableEnabled"], outputs: ["reorder"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ContextMenuDirective, selector: "[lwContextMenu]", inputs: ["lwContextMenu", "lwContextMenuContext"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellRail, isStandalone: true, selector: "lw-shell-rail", inputs: { region: { classPropertyName: "region", publicName: "region", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"flex h-full w-10 shrink-0 flex-col items-center gap-1 bg-surface py-2\"\n  [attr.aria-label]=\"labelKey() | transloco\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  [id]=\"dropListId()\"\n  [cdkDropListConnectedTo]=\"connectedRails()\"\n  [cdkDropListDisabled]=\"!draggable\"\n  [cdkDropListSortingDisabled]=\"!reorderable\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListSortPredicate]=\"sortPredicate\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  [lwReorderable]=\"containerId()\"\n  [lwReorderableEnabled]=\"reorderable\"\n  (reorder)=\"onReorder($event)\"\n  [lwMenu]=\"railMenu\"\n>\n  @for (item of items(); track item.id) {\n    <button\n      type=\"button\"\n      cdkDrag\n      [cdkDragData]=\"item.id\"\n      [cdkDragDisabled]=\"!draggable\"\n      [disabled]=\"disabled(item)\"\n      (click)=\"run(item)\"\n      (keydown)=\"onKeydown($event)\"\n      [lwMenu]=\"menusFor(item)\"\n      [lwMenuOnActivate]=\"activateMenuFor(item)\"\n      [lwMenuHeader]=\"item.menuHeader\"\n      [lwMenuSide]=\"menuSide()\"\n      [lwMenuContext]=\"{ targetKind: 'rail-item', id: item.id, region: region().id }\"\n      [attr.aria-label]=\"item.title | transloco\"\n      [attr.aria-current]=\"current(item) ? 'true' : null\"\n      [attr.data-rail-item]=\"item.id\"\n      [attr.data-reorder-id]=\"reorderable ? item.id : null\"\n      [attr.data-reorder-band]=\"item.anchor ?? 'top'\"\n      [class.mt-auto]=\"item.id === firstBottomId()\"\n      [class.text-content]=\"current(item)\"\n      [class.bg-surface-overlay]=\"current(item)\"\n      class=\"relative flex h-9 w-9 items-center justify-center rounded-lg text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    >\n      @if (current(item)) {\n        <span\n          aria-hidden=\"true\"\n          class=\"absolute inset-y-1 w-0.5 rounded-full bg-brand\"\n          [class.left-0]=\"region().dock !== 'right'\"\n          [class.right-0]=\"region().dock === 'right'\"\n        ></span>\n      }\n      @if (pictureOf(item); as picture) {\n        <img\n          [src]=\"picture\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          data-testid=\"rail-picture\"\n          class=\"lw-chrome-picture h-6 w-6\"\n          (error)=\"onPictureError(item)\"\n        />\n      } @else if (item.initials) {\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"rail-initials\"\n          class=\"lw-rail-initials\"\n          >{{ item.initials }}</span\n        >\n      } @else {\n        <lw-icon [name]=\"item.icon\" size=\"1rem\" />\n      }\n      <lw-tooltip [text]=\"item.title | transloco\" [position]=\"region().dock === 'right' ? 'left' : 'right'\" />\n    </button>\n  }\n</nav>\n", dependencies: [{ kind: "directive", type: Reorderable, selector: "[lwReorderable]", inputs: ["lwReorderable", "lwReorderableEnabled"], outputs: ["reorder"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: ["lwMenu", "lwMenuOnActivate", "lwMenuContext", "lwMenuSide", "lwMenuHeader", "lwMenuState"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellRail, decorators: [{
             type: Component,
@@ -6251,8 +6476,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         Reorderable,
                         CdkDropList,
                         CdkDrag,
-                        ContextMenuDirective,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nav\n  class=\"flex h-full w-10 shrink-0 flex-col items-center gap-1 bg-surface py-2\"\n  [attr.aria-label]=\"labelKey() | transloco\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  [id]=\"dropListId()\"\n  [cdkDropListConnectedTo]=\"connectedRails()\"\n  [cdkDropListDisabled]=\"!draggable\"\n  [cdkDropListSortingDisabled]=\"!reorderable\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListSortPredicate]=\"sortPredicate\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  [lwReorderable]=\"containerId()\"\n  [lwReorderableEnabled]=\"reorderable\"\n  (reorder)=\"onReorder($event)\"\n  [lwContextMenu]=\"railMenu\"\n>\n  @for (item of items(); track item.id) {\n    <button\n      type=\"button\"\n      cdkDrag\n      [cdkDragData]=\"item.id\"\n      [cdkDragDisabled]=\"!draggable\"\n      [disabled]=\"disabled(item)\"\n      (click)=\"run(item)\"\n      (keydown)=\"onKeydown($event)\"\n      [lwContextMenu]=\"menusFor(item)\"\n      [lwContextMenuContext]=\"{ targetKind: 'rail-item', id: item.id, region: region().id }\"\n      [attr.aria-label]=\"item.title | transloco\"\n      [attr.aria-current]=\"current(item) ? 'true' : null\"\n      [attr.data-rail-item]=\"item.id\"\n      [attr.data-reorder-id]=\"reorderable ? item.id : null\"\n      [attr.data-reorder-band]=\"item.anchor ?? 'top'\"\n      [class.mt-auto]=\"item.id === firstBottomId()\"\n      [class.text-content]=\"current(item)\"\n      [class.bg-surface-overlay]=\"current(item)\"\n      class=\"relative flex h-9 w-9 items-center justify-center rounded-lg text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    >\n      @if (current(item)) {\n        <span\n          aria-hidden=\"true\"\n          class=\"absolute inset-y-1 w-0.5 rounded-full bg-brand\"\n          [class.left-0]=\"region().dock !== 'right'\"\n          [class.right-0]=\"region().dock === 'right'\"\n        ></span>\n      }\n      @if (item.initials) {\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"rail-initials\"\n          class=\"lw-rail-initials\"\n          >{{ item.initials }}</span\n        >\n      } @else {\n        <lw-icon [name]=\"item.icon\" size=\"1rem\" />\n      }\n      <lw-tooltip [text]=\"item.title | transloco\" [position]=\"region().dock === 'right' ? 'left' : 'right'\" />\n    </button>\n  }\n</nav>\n" }]
+                        MenuTriggerDirective,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<nav\n  class=\"flex h-full w-10 shrink-0 flex-col items-center gap-1 bg-surface py-2\"\n  [attr.aria-label]=\"labelKey() | transloco\"\n  cdkDropList\n  cdkDropListOrientation=\"vertical\"\n  [id]=\"dropListId()\"\n  [cdkDropListConnectedTo]=\"connectedRails()\"\n  [cdkDropListDisabled]=\"!draggable\"\n  [cdkDropListSortingDisabled]=\"!reorderable\"\n  [cdkDropListEnterPredicate]=\"enterPredicate\"\n  [cdkDropListSortPredicate]=\"sortPredicate\"\n  (cdkDropListDropped)=\"onDrop($event)\"\n  [lwReorderable]=\"containerId()\"\n  [lwReorderableEnabled]=\"reorderable\"\n  (reorder)=\"onReorder($event)\"\n  [lwMenu]=\"railMenu\"\n>\n  @for (item of items(); track item.id) {\n    <button\n      type=\"button\"\n      cdkDrag\n      [cdkDragData]=\"item.id\"\n      [cdkDragDisabled]=\"!draggable\"\n      [disabled]=\"disabled(item)\"\n      (click)=\"run(item)\"\n      (keydown)=\"onKeydown($event)\"\n      [lwMenu]=\"menusFor(item)\"\n      [lwMenuOnActivate]=\"activateMenuFor(item)\"\n      [lwMenuHeader]=\"item.menuHeader\"\n      [lwMenuSide]=\"menuSide()\"\n      [lwMenuContext]=\"{ targetKind: 'rail-item', id: item.id, region: region().id }\"\n      [attr.aria-label]=\"item.title | transloco\"\n      [attr.aria-current]=\"current(item) ? 'true' : null\"\n      [attr.data-rail-item]=\"item.id\"\n      [attr.data-reorder-id]=\"reorderable ? item.id : null\"\n      [attr.data-reorder-band]=\"item.anchor ?? 'top'\"\n      [class.mt-auto]=\"item.id === firstBottomId()\"\n      [class.text-content]=\"current(item)\"\n      [class.bg-surface-overlay]=\"current(item)\"\n      class=\"relative flex h-9 w-9 items-center justify-center rounded-lg text-content-faint transition-colors hover:bg-surface-overlay hover:text-content disabled:pointer-events-none disabled:opacity-40\"\n    >\n      @if (current(item)) {\n        <span\n          aria-hidden=\"true\"\n          class=\"absolute inset-y-1 w-0.5 rounded-full bg-brand\"\n          [class.left-0]=\"region().dock !== 'right'\"\n          [class.right-0]=\"region().dock === 'right'\"\n        ></span>\n      }\n      @if (pictureOf(item); as picture) {\n        <img\n          [src]=\"picture\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          data-testid=\"rail-picture\"\n          class=\"lw-chrome-picture h-6 w-6\"\n          (error)=\"onPictureError(item)\"\n        />\n      } @else if (item.initials) {\n        <span\n          aria-hidden=\"true\"\n          data-testid=\"rail-initials\"\n          class=\"lw-rail-initials\"\n          >{{ item.initials }}</span\n        >\n      } @else {\n        <lw-icon [name]=\"item.icon\" size=\"1rem\" />\n      }\n      <lw-tooltip [text]=\"item.title | transloco\" [position]=\"region().dock === 'right' ? 'left' : 'right'\" />\n    </button>\n  }\n</nav>\n" }]
         }], propDecorators: { region: [{ type: i0.Input, args: [{ isSignal: true, alias: "region", required: true }] }] } });
 
 const STORAGE_PREFIX$2 = 'lw.shell.view-state:';
@@ -6567,8 +6792,9 @@ class ViewInstanceSwitcher {
         if (!this.viewInstances.isDefault(viewId, activeId)) {
             entries.push({ key: 'rename', label: t('viewInstance.rename') }, { key: 'delete', label: t('viewInstance.delete') });
         }
-        const rect = event.currentTarget.getBoundingClientRect();
-        this.menu.openList(entries, { x: rect.left, y: rect.bottom + MENU_ANCHOR_GAP }, (key) => this.onPick(key));
+        const control = event.currentTarget;
+        const rect = control.getBoundingClientRect();
+        this.menu.openList(entries, { x: rect.left, y: rect.bottom + MENU_ANCHOR_GAP }, (key) => this.onPick(key), control);
     }
     onPick(key) {
         const viewId = this.view().id;
@@ -6641,11 +6867,11 @@ class ViewInstanceSwitcher {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ViewInstanceSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ViewInstanceSwitcher, isStandalone: true, selector: "lw-view-instance-switcher", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { beforeSwitch: "beforeSwitch" }, host: { classAttribute: "flex min-w-0 flex-1" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex min-w-0 flex-1 items-center gap-1 truncate rounded px-1 py-0.5 text-left text-xs font-semibold tracking-wide text-content-faint uppercase transition-colors hover:bg-surface-overlay hover:text-content\"\n  (click)=\"openSwitcher($event)\"\n  [attr.aria-label]=\"'viewInstance.switcher' | transloco\"\n  data-testid=\"view-switcher\"\n>\n  <span class=\"truncate\">{{ activeName() || ('viewInstance.default' | transloco) }}</span>\n  <lw-icon name=\"chevronDown\" size=\"0.85rem\" class=\"shrink-0\" />\n</button>\n", dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ViewInstanceSwitcher, isStandalone: true, selector: "lw-view-instance-switcher", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { beforeSwitch: "beforeSwitch" }, host: { classAttribute: "flex min-w-0 flex-1" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex min-w-0 flex-1 items-center gap-1 truncate rounded px-1 py-0.5 text-left text-xs font-semibold tracking-wide text-content-faint uppercase transition-colors hover:bg-surface-overlay hover:text-content\"\n  (click)=\"openSwitcher($event)\"\n  lwMenuState\n  [attr.aria-label]=\"'viewInstance.switcher' | transloco\"\n  data-testid=\"view-switcher\"\n>\n  <span class=\"truncate\">{{ activeName() || ('viewInstance.default' | transloco) }}</span>\n  <lw-icon name=\"chevronDown\" size=\"0.85rem\" class=\"shrink-0\" />\n</button>\n", dependencies: [{ kind: "directive", type: MenuTriggerDirective, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: ["lwMenu", "lwMenuOnActivate", "lwMenuContext", "lwMenuSide", "lwMenuHeader", "lwMenuState"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ViewInstanceSwitcher, decorators: [{
             type: Component,
-            args: [{ selector: 'lw-view-instance-switcher', imports: [TranslocoPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'flex min-w-0 flex-1' }, template: "<button\n  type=\"button\"\n  class=\"flex min-w-0 flex-1 items-center gap-1 truncate rounded px-1 py-0.5 text-left text-xs font-semibold tracking-wide text-content-faint uppercase transition-colors hover:bg-surface-overlay hover:text-content\"\n  (click)=\"openSwitcher($event)\"\n  [attr.aria-label]=\"'viewInstance.switcher' | transloco\"\n  data-testid=\"view-switcher\"\n>\n  <span class=\"truncate\">{{ activeName() || ('viewInstance.default' | transloco) }}</span>\n  <lw-icon name=\"chevronDown\" size=\"0.85rem\" class=\"shrink-0\" />\n</button>\n" }]
+            args: [{ selector: 'lw-view-instance-switcher', imports: [TranslocoPipe, MenuTriggerDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'flex min-w-0 flex-1' }, template: "<button\n  type=\"button\"\n  class=\"flex min-w-0 flex-1 items-center gap-1 truncate rounded px-1 py-0.5 text-left text-xs font-semibold tracking-wide text-content-faint uppercase transition-colors hover:bg-surface-overlay hover:text-content\"\n  (click)=\"openSwitcher($event)\"\n  lwMenuState\n  [attr.aria-label]=\"'viewInstance.switcher' | transloco\"\n  data-testid=\"view-switcher\"\n>\n  <span class=\"truncate\">{{ activeName() || ('viewInstance.default' | transloco) }}</span>\n  <lw-icon name=\"chevronDown\" size=\"0.85rem\" class=\"shrink-0\" />\n</button>\n" }]
         }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], beforeSwitch: [{ type: i0.Output, args: ["beforeSwitch"] }] } });
 
 class PaneChromeService {
@@ -7172,7 +7398,8 @@ class PaneTabStrip {
         this.paneDrag.stop();
     }
     openOverflow(event) {
-        const anchor = event.currentTarget.getBoundingClientRect();
+        const control = event.currentTarget;
+        const anchor = control.getBoundingClientRect();
         const entries = this.tabs().map((tab) => ({
             key: tab.path,
             label: this.label(tab),
@@ -7184,7 +7411,7 @@ class PaneTabStrip {
             if (tab) {
                 this.selectTab.emit(tab);
             }
-        });
+        }, control);
     }
     onSelectTab(tab) {
         if (tab.path !== this.activeId()) {
@@ -7297,19 +7524,19 @@ class PaneTabStrip {
         return resolveTitle(tab, (key) => this.transloco.translate(key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PaneTabStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PaneTabStrip, isStandalone: true, selector: "lw-pane-tab-strip", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: true, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, acceptsTabs: { classPropertyName: "acceptsTabs", publicName: "acceptsTabs", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, urlDriven: { classPropertyName: "urlDriven", publicName: "urlDriven", isSignal: true, isRequired: false, transformFunction: null }, contextMenuSlot: { classPropertyName: "contextMenuSlot", publicName: "contextMenuSlot", isSignal: true, isRequired: false, transformFunction: null }, viewContextMenuSlot: { classPropertyName: "viewContextMenuSlot", publicName: "viewContextMenuSlot", isSignal: true, isRequired: false, transformFunction: null }, contextGroup: { classPropertyName: "contextGroup", publicName: "contextGroup", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, canAddTab: { classPropertyName: "canAddTab", publicName: "canAddTab", isSignal: true, isRequired: false, transformFunction: null }, paneActions: { classPropertyName: "paneActions", publicName: "paneActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectTab: "selectTab", escalate: "escalate", closeTab: "closeTab", unpinTab: "unpinTab", reorderTabs: "reorderTabs", runAction: "runAction", addTab: "addTab", revealRequest: "revealRequest" }, viewQueries: [{ propertyName: "strip", first: true, predicate: ["tabStrip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"bandClass()\">\n  <div\n    #tabStrip\n    class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden\"\n    [class.px-2]=\"!icons()\"\n    [class.px-1]=\"icons()\"\n    role=\"tablist\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [id]=\"stripId()\"\n    [cdkDropListSortingDisabled]=\"!reorderable()\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    [cdkDropListConnectedTo]=\"dragZoneIds()\"\n    [cdkDropListSortPredicate]=\"sortPredicate\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n    [lwReorderable]=\"stripId()\"\n    [lwReorderableEnabled]=\"reorderable()\"\n    (reorder)=\"reorderTabs.emit($event)\"\n  >\n    @for (tab of tabs(); track tab.path) {\n      @let title = tab.literalTitle ? tab.title : (tab.title | transloco);\n      @if (icons()) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [lwContextMenu]=\"menuSlotFor(tab)\"\n          [lwContextMenuContext]=\"tabContext(tab)\"\n          [attr.aria-selected]=\"isActive(tab)\"\n          [attr.aria-label]=\"title\"\n          [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n          [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n          [attr.data-tab-path]=\"tab.path\"\n          (click)=\"onSelectTab(tab)\"\n          (dblclick)=\"escalate.emit(tab)\"\n          class=\"lw-icon-btn h-10 w-10 rounded-md md:h-7 md:w-7\"\n          [class.bg-surface-overlay]=\"isActive(tab)\"\n          [class.text-content]=\"isActive(tab)\"\n        >\n          <lw-icon [name]=\"tab.icon ?? 'document'\" size=\"1rem\" />\n          <lw-tooltip [text]=\"title\" position=\"bottom\" />\n        </button>\n      } @else {\n        <div\n          class=\"flex max-w-52 min-w-28 items-center border-b-2 transition-colors\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [class.border-brand]=\"isActive(tab) && urlDriven()\"\n          [class.border-content-faint]=\"isActive(tab) && !urlDriven()\"\n          [class.border-transparent]=\"!isActive(tab)\"\n          [lwContextMenu]=\"menuSlotFor(tab)\"\n          [lwContextMenuContext]=\"tabContext(tab)\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            cdkDragHandle\n            [attr.aria-selected]=\"isActive(tab)\"\n            [attr.aria-label]=\"title\"\n            [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n            [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n            [attr.data-tab-path]=\"tab.path\"\n            [attr.aria-keyshortcuts]=\"tab.closable && !tab.pinned ? 'Delete' : null\"\n            (click)=\"onSelectTab(tab)\"\n            (dblclick)=\"escalate.emit(tab)\"\n            (keydown)=\"onTabKeydown($event, tab)\"\n            class=\"relative flex min-w-0 items-center gap-1.5 py-2 pr-1 pl-3 text-sm transition-colors\"\n            [class.text-content]=\"isActive(tab)\"\n            [class.text-content-faint]=\"!isActive(tab)\"\n            [class.italic]=\"tab.preview\"\n          >\n            @if (tab.preview) {\n              <lw-icon name=\"preview\" size=\"1rem\" />\n            } @else if (tab.icon) {\n              <lw-icon [name]=\"tab.icon\" size=\"1rem\" />\n            }\n            <span class=\"min-w-0 truncate\">{{ title }}</span>\n\n            <lw-tooltip\n              [text]=\"\n                tab.preview && escalatable\n                  ? title + ' \u2014 ' + ('content.previewHint' | transloco)\n                  : title\n              \"\n              position=\"bottom\"\n            />\n          </button>\n\n          @if (tab.pinned) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-unpin\"\n              (click)=\"onUnpin($event, tab)\"\n              class=\"relative mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded text-brand opacity-90 transition-colors hover:bg-surface-overlay hover:opacity-100\"\n            >\n              <lw-icon name=\"pin\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.pinnedHint' | transloco\" position=\"bottom\" />\n            </span>\n          } @else if (tab.closable) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-close\"\n              (click)=\"onClose($event, tab)\"\n              class=\"lw-icon-btn mr-1 h-6 w-6 cursor-pointer opacity-70 hover:opacity-100\"\n            >\n              <lw-icon name=\"close\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.closeTab' | transloco\" position=\"bottom\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (canAddTab()) {\n    <button\n      type=\"button\"\n      (click)=\"addTab.emit($event)\"\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.split.newTab' | transloco\"\n      data-testid=\"pane-add-tab\"\n    >\n      <lw-icon name=\"add\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.split.newTab' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (overflow() && overflowing()) {\n    <button\n      type=\"button\"\n      (click)=\"openOverflow($event)\"\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.moreTabs' | transloco\"\n    >\n      <lw-icon name=\"chevronDown\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.moreTabs' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (paneActions(); as actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  }\n  @if (activeActions().length) {\n    <div class=\"flex shrink-0 items-center gap-0.5 border-l border-border px-2\">\n      @for (action of activeActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"runAction.emit(action)\"\n          class=\"lw-icon-btn h-8 w-8 rounded-md\"\n          [attr.aria-label]=\"action.title | transloco\"\n        >\n          <lw-icon [name]=\"action.icon\" size=\"1rem\" />\n          <lw-tooltip [text]=\"action.title | transloco\" position=\"bottom\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ContextMenuDirective, selector: "[lwContextMenu]", inputs: ["lwContextMenu", "lwContextMenuContext"] }, { kind: "directive", type: Reorderable, selector: "[lwReorderable]", inputs: ["lwReorderable", "lwReorderableEnabled"], outputs: ["reorder"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PaneTabStrip, isStandalone: true, selector: "lw-pane-tab-strip", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: true, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, acceptsTabs: { classPropertyName: "acceptsTabs", publicName: "acceptsTabs", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, urlDriven: { classPropertyName: "urlDriven", publicName: "urlDriven", isSignal: true, isRequired: false, transformFunction: null }, contextMenuSlot: { classPropertyName: "contextMenuSlot", publicName: "contextMenuSlot", isSignal: true, isRequired: false, transformFunction: null }, viewContextMenuSlot: { classPropertyName: "viewContextMenuSlot", publicName: "viewContextMenuSlot", isSignal: true, isRequired: false, transformFunction: null }, contextGroup: { classPropertyName: "contextGroup", publicName: "contextGroup", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, canAddTab: { classPropertyName: "canAddTab", publicName: "canAddTab", isSignal: true, isRequired: false, transformFunction: null }, paneActions: { classPropertyName: "paneActions", publicName: "paneActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectTab: "selectTab", escalate: "escalate", closeTab: "closeTab", unpinTab: "unpinTab", reorderTabs: "reorderTabs", runAction: "runAction", addTab: "addTab", revealRequest: "revealRequest" }, viewQueries: [{ propertyName: "strip", first: true, predicate: ["tabStrip"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"bandClass()\">\n  <div\n    #tabStrip\n    class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden\"\n    [class.px-2]=\"!icons()\"\n    [class.px-1]=\"icons()\"\n    role=\"tablist\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [id]=\"stripId()\"\n    [cdkDropListSortingDisabled]=\"!reorderable()\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    [cdkDropListConnectedTo]=\"dragZoneIds()\"\n    [cdkDropListSortPredicate]=\"sortPredicate\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n    [lwReorderable]=\"stripId()\"\n    [lwReorderableEnabled]=\"reorderable()\"\n    (reorder)=\"reorderTabs.emit($event)\"\n  >\n    @for (tab of tabs(); track tab.path) {\n      @let title = tab.literalTitle ? tab.title : (tab.title | transloco);\n      @if (icons()) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [lwMenu]=\"menuSlotFor(tab)\"\n          [lwMenuContext]=\"tabContext(tab)\"\n          [attr.aria-selected]=\"isActive(tab)\"\n          [attr.aria-label]=\"title\"\n          [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n          [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n          [attr.data-tab-path]=\"tab.path\"\n          (click)=\"onSelectTab(tab)\"\n          (dblclick)=\"escalate.emit(tab)\"\n          class=\"lw-icon-btn h-10 w-10 rounded-md md:h-7 md:w-7\"\n          [class.bg-surface-overlay]=\"isActive(tab)\"\n          [class.text-content]=\"isActive(tab)\"\n        >\n          <lw-icon [name]=\"tab.icon ?? 'document'\" size=\"1rem\" />\n          <lw-tooltip [text]=\"title\" position=\"bottom\" />\n        </button>\n      } @else {\n        <div\n          class=\"flex max-w-52 min-w-28 items-center border-b-2 transition-colors\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [class.border-brand]=\"isActive(tab) && urlDriven()\"\n          [class.border-content-faint]=\"isActive(tab) && !urlDriven()\"\n          [class.border-transparent]=\"!isActive(tab)\"\n          [lwMenu]=\"menuSlotFor(tab)\"\n          [lwMenuContext]=\"tabContext(tab)\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            cdkDragHandle\n            [attr.aria-selected]=\"isActive(tab)\"\n            [attr.aria-label]=\"title\"\n            [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n            [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n            [attr.data-tab-path]=\"tab.path\"\n            [attr.aria-keyshortcuts]=\"tab.closable && !tab.pinned ? 'Delete' : null\"\n            (click)=\"onSelectTab(tab)\"\n            (dblclick)=\"escalate.emit(tab)\"\n            (keydown)=\"onTabKeydown($event, tab)\"\n            class=\"relative flex min-w-0 items-center gap-1.5 py-2 pr-1 pl-3 text-sm transition-colors\"\n            [class.text-content]=\"isActive(tab)\"\n            [class.text-content-faint]=\"!isActive(tab)\"\n            [class.italic]=\"tab.preview\"\n          >\n            @if (tab.preview) {\n              <lw-icon name=\"preview\" size=\"1rem\" />\n            } @else if (tab.icon) {\n              <lw-icon [name]=\"tab.icon\" size=\"1rem\" />\n            }\n            <span class=\"min-w-0 truncate\">{{ title }}</span>\n\n            <lw-tooltip\n              [text]=\"\n                tab.preview && escalatable\n                  ? title + ' \u2014 ' + ('content.previewHint' | transloco)\n                  : title\n              \"\n              position=\"bottom\"\n            />\n          </button>\n\n          @if (tab.pinned) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-unpin\"\n              (click)=\"onUnpin($event, tab)\"\n              class=\"relative mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded text-brand opacity-90 transition-colors hover:bg-surface-overlay hover:opacity-100\"\n            >\n              <lw-icon name=\"pin\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.pinnedHint' | transloco\" position=\"bottom\" />\n            </span>\n          } @else if (tab.closable) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-close\"\n              (click)=\"onClose($event, tab)\"\n              class=\"lw-icon-btn mr-1 h-6 w-6 cursor-pointer opacity-70 hover:opacity-100\"\n            >\n              <lw-icon name=\"close\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.closeTab' | transloco\" position=\"bottom\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (canAddTab()) {\n    <button\n      type=\"button\"\n      (click)=\"addTab.emit($event)\"\n      lwMenuState\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.split.newTab' | transloco\"\n      data-testid=\"pane-add-tab\"\n    >\n      <lw-icon name=\"add\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.split.newTab' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (overflow() && overflowing()) {\n    <button\n      type=\"button\"\n      (click)=\"openOverflow($event)\"\n      lwMenuState\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.moreTabs' | transloco\"\n    >\n      <lw-icon name=\"chevronDown\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.moreTabs' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (paneActions(); as actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  }\n  @if (activeActions().length) {\n    <div class=\"flex shrink-0 items-center gap-0.5 border-l border-border px-2\">\n      @for (action of activeActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"runAction.emit(action)\"\n          class=\"lw-icon-btn h-8 w-8 rounded-md\"\n          [attr.aria-label]=\"action.title | transloco\"\n        >\n          <lw-icon [name]=\"action.icon\" size=\"1rem\" />\n          <lw-tooltip [text]=\"action.title | transloco\" position=\"bottom\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: ["lwMenu", "lwMenuOnActivate", "lwMenuContext", "lwMenuSide", "lwMenuHeader", "lwMenuState"] }, { kind: "directive", type: Reorderable, selector: "[lwReorderable]", inputs: ["lwReorderable", "lwReorderableEnabled"], outputs: ["reorder"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PaneTabStrip, decorators: [{
             type: Component,
             args: [{ selector: 'lw-pane-tab-strip', imports: [
                         NgTemplateOutlet,
                         TranslocoPipe,
-                        ContextMenuDirective,
+                        MenuTriggerDirective,
                         Reorderable,
                         CdkDropList,
                         CdkDrag,
                         CdkDragHandle,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div [class]=\"bandClass()\">\n  <div\n    #tabStrip\n    class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden\"\n    [class.px-2]=\"!icons()\"\n    [class.px-1]=\"icons()\"\n    role=\"tablist\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [id]=\"stripId()\"\n    [cdkDropListSortingDisabled]=\"!reorderable()\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    [cdkDropListConnectedTo]=\"dragZoneIds()\"\n    [cdkDropListSortPredicate]=\"sortPredicate\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n    [lwReorderable]=\"stripId()\"\n    [lwReorderableEnabled]=\"reorderable()\"\n    (reorder)=\"reorderTabs.emit($event)\"\n  >\n    @for (tab of tabs(); track tab.path) {\n      @let title = tab.literalTitle ? tab.title : (tab.title | transloco);\n      @if (icons()) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [lwContextMenu]=\"menuSlotFor(tab)\"\n          [lwContextMenuContext]=\"tabContext(tab)\"\n          [attr.aria-selected]=\"isActive(tab)\"\n          [attr.aria-label]=\"title\"\n          [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n          [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n          [attr.data-tab-path]=\"tab.path\"\n          (click)=\"onSelectTab(tab)\"\n          (dblclick)=\"escalate.emit(tab)\"\n          class=\"lw-icon-btn h-10 w-10 rounded-md md:h-7 md:w-7\"\n          [class.bg-surface-overlay]=\"isActive(tab)\"\n          [class.text-content]=\"isActive(tab)\"\n        >\n          <lw-icon [name]=\"tab.icon ?? 'document'\" size=\"1rem\" />\n          <lw-tooltip [text]=\"title\" position=\"bottom\" />\n        </button>\n      } @else {\n        <div\n          class=\"flex max-w-52 min-w-28 items-center border-b-2 transition-colors\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [class.border-brand]=\"isActive(tab) && urlDriven()\"\n          [class.border-content-faint]=\"isActive(tab) && !urlDriven()\"\n          [class.border-transparent]=\"!isActive(tab)\"\n          [lwContextMenu]=\"menuSlotFor(tab)\"\n          [lwContextMenuContext]=\"tabContext(tab)\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            cdkDragHandle\n            [attr.aria-selected]=\"isActive(tab)\"\n            [attr.aria-label]=\"title\"\n            [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n            [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n            [attr.data-tab-path]=\"tab.path\"\n            [attr.aria-keyshortcuts]=\"tab.closable && !tab.pinned ? 'Delete' : null\"\n            (click)=\"onSelectTab(tab)\"\n            (dblclick)=\"escalate.emit(tab)\"\n            (keydown)=\"onTabKeydown($event, tab)\"\n            class=\"relative flex min-w-0 items-center gap-1.5 py-2 pr-1 pl-3 text-sm transition-colors\"\n            [class.text-content]=\"isActive(tab)\"\n            [class.text-content-faint]=\"!isActive(tab)\"\n            [class.italic]=\"tab.preview\"\n          >\n            @if (tab.preview) {\n              <lw-icon name=\"preview\" size=\"1rem\" />\n            } @else if (tab.icon) {\n              <lw-icon [name]=\"tab.icon\" size=\"1rem\" />\n            }\n            <span class=\"min-w-0 truncate\">{{ title }}</span>\n\n            <lw-tooltip\n              [text]=\"\n                tab.preview && escalatable\n                  ? title + ' \u2014 ' + ('content.previewHint' | transloco)\n                  : title\n              \"\n              position=\"bottom\"\n            />\n          </button>\n\n          @if (tab.pinned) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-unpin\"\n              (click)=\"onUnpin($event, tab)\"\n              class=\"relative mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded text-brand opacity-90 transition-colors hover:bg-surface-overlay hover:opacity-100\"\n            >\n              <lw-icon name=\"pin\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.pinnedHint' | transloco\" position=\"bottom\" />\n            </span>\n          } @else if (tab.closable) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-close\"\n              (click)=\"onClose($event, tab)\"\n              class=\"lw-icon-btn mr-1 h-6 w-6 cursor-pointer opacity-70 hover:opacity-100\"\n            >\n              <lw-icon name=\"close\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.closeTab' | transloco\" position=\"bottom\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (canAddTab()) {\n    <button\n      type=\"button\"\n      (click)=\"addTab.emit($event)\"\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.split.newTab' | transloco\"\n      data-testid=\"pane-add-tab\"\n    >\n      <lw-icon name=\"add\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.split.newTab' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (overflow() && overflowing()) {\n    <button\n      type=\"button\"\n      (click)=\"openOverflow($event)\"\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.moreTabs' | transloco\"\n    >\n      <lw-icon name=\"chevronDown\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.moreTabs' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (paneActions(); as actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  }\n  @if (activeActions().length) {\n    <div class=\"flex shrink-0 items-center gap-0.5 border-l border-border px-2\">\n      @for (action of activeActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"runAction.emit(action)\"\n          class=\"lw-icon-btn h-8 w-8 rounded-md\"\n          [attr.aria-label]=\"action.title | transloco\"\n        >\n          <lw-icon [name]=\"action.icon\" size=\"1rem\" />\n          <lw-tooltip [text]=\"action.title | transloco\" position=\"bottom\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div [class]=\"bandClass()\">\n  <div\n    #tabStrip\n    class=\"flex min-w-0 flex-1 items-center gap-0.5 overflow-hidden\"\n    [class.px-2]=\"!icons()\"\n    [class.px-1]=\"icons()\"\n    role=\"tablist\"\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    [id]=\"stripId()\"\n    [cdkDropListSortingDisabled]=\"!reorderable()\"\n    [cdkDropListEnterPredicate]=\"enterPredicate\"\n    [cdkDropListConnectedTo]=\"dragZoneIds()\"\n    [cdkDropListSortPredicate]=\"sortPredicate\"\n    (cdkDropListDropped)=\"onDrop($event)\"\n    [lwReorderable]=\"stripId()\"\n    [lwReorderableEnabled]=\"reorderable()\"\n    (reorder)=\"reorderTabs.emit($event)\"\n  >\n    @for (tab of tabs(); track tab.path) {\n      @let title = tab.literalTitle ? tab.title : (tab.title | transloco);\n      @if (icons()) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [lwMenu]=\"menuSlotFor(tab)\"\n          [lwMenuContext]=\"tabContext(tab)\"\n          [attr.aria-selected]=\"isActive(tab)\"\n          [attr.aria-label]=\"title\"\n          [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n          [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n          [attr.data-tab-path]=\"tab.path\"\n          (click)=\"onSelectTab(tab)\"\n          (dblclick)=\"escalate.emit(tab)\"\n          class=\"lw-icon-btn h-10 w-10 rounded-md md:h-7 md:w-7\"\n          [class.bg-surface-overlay]=\"isActive(tab)\"\n          [class.text-content]=\"isActive(tab)\"\n        >\n          <lw-icon [name]=\"tab.icon ?? 'document'\" size=\"1rem\" />\n          <lw-tooltip [text]=\"title\" position=\"bottom\" />\n        </button>\n      } @else {\n        <div\n          class=\"flex max-w-52 min-w-28 items-center border-b-2 transition-colors\"\n          cdkDrag\n          [cdkDragData]=\"tab.path\"\n          [cdkDragDisabled]=\"!canDrag(tab)\"\n          (cdkDragStarted)=\"onDragStarted(tab)\"\n          (cdkDragEnded)=\"onDragEnded()\"\n          [class.border-brand]=\"isActive(tab) && urlDriven()\"\n          [class.border-content-faint]=\"isActive(tab) && !urlDriven()\"\n          [class.border-transparent]=\"!isActive(tab)\"\n          [lwMenu]=\"menuSlotFor(tab)\"\n          [lwMenuContext]=\"tabContext(tab)\"\n        >\n          <button\n            type=\"button\"\n            role=\"tab\"\n            cdkDragHandle\n            [attr.aria-selected]=\"isActive(tab)\"\n            [attr.aria-label]=\"title\"\n            [attr.data-reorder-id]=\"canReorder(tab) ? tab.path : null\"\n            [attr.data-reorder-band]=\"tab.pinned ? 'pinned' : 'dynamic'\"\n            [attr.data-tab-path]=\"tab.path\"\n            [attr.aria-keyshortcuts]=\"tab.closable && !tab.pinned ? 'Delete' : null\"\n            (click)=\"onSelectTab(tab)\"\n            (dblclick)=\"escalate.emit(tab)\"\n            (keydown)=\"onTabKeydown($event, tab)\"\n            class=\"relative flex min-w-0 items-center gap-1.5 py-2 pr-1 pl-3 text-sm transition-colors\"\n            [class.text-content]=\"isActive(tab)\"\n            [class.text-content-faint]=\"!isActive(tab)\"\n            [class.italic]=\"tab.preview\"\n          >\n            @if (tab.preview) {\n              <lw-icon name=\"preview\" size=\"1rem\" />\n            } @else if (tab.icon) {\n              <lw-icon [name]=\"tab.icon\" size=\"1rem\" />\n            }\n            <span class=\"min-w-0 truncate\">{{ title }}</span>\n\n            <lw-tooltip\n              [text]=\"\n                tab.preview && escalatable\n                  ? title + ' \u2014 ' + ('content.previewHint' | transloco)\n                  : title\n              \"\n              position=\"bottom\"\n            />\n          </button>\n\n          @if (tab.pinned) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-unpin\"\n              (click)=\"onUnpin($event, tab)\"\n              class=\"relative mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded text-brand opacity-90 transition-colors hover:bg-surface-overlay hover:opacity-100\"\n            >\n              <lw-icon name=\"pin\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.pinnedHint' | transloco\" position=\"bottom\" />\n            </span>\n          } @else if (tab.closable) {\n            <span\n              aria-hidden=\"true\"\n              data-testid=\"tab-close\"\n              (click)=\"onClose($event, tab)\"\n              class=\"lw-icon-btn mr-1 h-6 w-6 cursor-pointer opacity-70 hover:opacity-100\"\n            >\n              <lw-icon name=\"close\" size=\"0.85rem\" />\n              <lw-tooltip [text]=\"'content.closeTab' | transloco\" position=\"bottom\" />\n            </span>\n          }\n        </div>\n      }\n    }\n  </div>\n\n  @if (canAddTab()) {\n    <button\n      type=\"button\"\n      (click)=\"addTab.emit($event)\"\n      lwMenuState\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.split.newTab' | transloco\"\n      data-testid=\"pane-add-tab\"\n    >\n      <lw-icon name=\"add\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.split.newTab' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (overflow() && overflowing()) {\n    <button\n      type=\"button\"\n      (click)=\"openOverflow($event)\"\n      lwMenuState\n      class=\"lw-icon-btn w-8\"\n      [class.self-stretch]=\"icons()\"\n      [attr.aria-label]=\"'content.moreTabs' | transloco\"\n    >\n      <lw-icon name=\"chevronDown\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'content.moreTabs' | transloco\" position=\"bottom\" />\n    </button>\n  }\n\n  @if (paneActions(); as actions) {\n    <ng-container [ngTemplateOutlet]=\"actions\" />\n  }\n  @if (activeActions().length) {\n    <div class=\"flex shrink-0 items-center gap-0.5 border-l border-border px-2\">\n      @for (action of activeActions(); track action.id) {\n        <button\n          type=\"button\"\n          (click)=\"runAction.emit(action)\"\n          class=\"lw-icon-btn h-8 w-8 rounded-md\"\n          [attr.aria-label]=\"action.title | transloco\"\n        >\n          <lw-icon [name]=\"action.icon\" size=\"1rem\" />\n          <lw-tooltip [text]=\"action.title | transloco\" position=\"bottom\" />\n        </button>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: true }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], acceptsTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptsTabs", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], urlDriven: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlDriven", required: false }] }], contextMenuSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuSlot", required: false }] }], viewContextMenuSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewContextMenuSlot", required: false }] }], contextGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextGroup", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], canAddTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAddTab", required: false }] }], paneActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneActions", required: false }] }], selectTab: [{ type: i0.Output, args: ["selectTab"] }], escalate: [{ type: i0.Output, args: ["escalate"] }], closeTab: [{ type: i0.Output, args: ["closeTab"] }], unpinTab: [{ type: i0.Output, args: ["unpinTab"] }], reorderTabs: [{ type: i0.Output, args: ["reorderTabs"] }], runAction: [{ type: i0.Output, args: ["runAction"] }], addTab: [{ type: i0.Output, args: ["addTab"] }], revealRequest: [{ type: i0.Output, args: ["revealRequest"] }], strip: [{ type: i0.ViewChild, args: ['tabStrip', { isSignal: true }] }] } });
 
 class PaneToolbar {
@@ -8868,7 +9095,7 @@ class PaneTargetPicker {
     present(targets, anchor, onPick) {
         const rect = anchor.getBoundingClientRect();
         const entries = paneTargetEntries(targets, (key) => this.transloco.translate(key));
-        this.menu.openList(entries, { x: rect.left, y: rect.bottom + MENU_ANCHOR_GAP }, onPick);
+        this.menu.openList(entries, { x: rect.left, y: rect.bottom + MENU_ANCHOR_GAP }, onPick, anchor);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PaneTargetPicker, deps: [], target: i0.ɵɵFactoryTarget.Service });
     static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: PaneTargetPicker });
@@ -10075,11 +10302,11 @@ class ShellSidebarHeader {
         return this.layout.regions.find((r) => r.type === 'panel' && r.dock === dock && r.id !== this.region().id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellSidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellSidebarHeader, isStandalone: true, selector: "lw-shell-sidebar-header", inputs: { region: { classPropertyName: "region", publicName: "region", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showHamburger()) {\n\n  <div\n    class=\"flex h-12 w-10 shrink-0 items-center justify-center border-b border-border bg-surface\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"open()\"\n      class=\"lw-icon-btn h-9 w-9 rounded-md\"\n      [attr.aria-label]=\"'panel.open' | transloco\"\n    >\n      <lw-icon name=\"menu\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.open' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (showExpand()) {\n\n  <div\n    class=\"flex h-12 items-center overflow-hidden border-b border-border bg-surface px-1.5\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"expand()\"\n      class=\"lw-icon-btn h-7 w-7 rounded-md\"\n      [attr.aria-label]=\"'panel.expand' | transloco\"\n    >\n      <lw-icon [name]=\"expandIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.expand' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (!collapsed()) {\n\n  <lw-pane-tab-strip\n    class=\"block h-12\"\n    [id]=\"hostId()\"\n    variant=\"icons\"\n    [tabs]=\"stripTabs()\"\n    [activeId]=\"activeTabPath()\"\n    [source]=\"source()\"\n    [reorderable]=\"viewsReorderable\"\n    [draggable]=\"viewsDraggable\"\n    [acceptsTabs]=\"acceptsTab\"\n    [viewContextMenuSlot]=\"viewContextMenu\"\n    [contextGroup]=\"region().id\"\n    [overflow]=\"true\"\n    [paneActions]=\"trailing\"\n    (selectTab)=\"select($event)\"\n    (reorderTabs)=\"onReorder($event)\"\n    (keydown)=\"onStripKeydown($event)\"\n    [lwContextMenu]=\"stripMenu\"\n  />\n  <ng-template #trailing>\n    @if (canCollapse()) {\n    <button\n      type=\"button\"\n      (click)=\"trailingAction()\"\n      class=\"lw-icon-btn h-10 w-10 self-center rounded-md md:h-7 md:w-7\"\n      [attr.aria-label]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\"\n    >\n      <lw-icon [name]=\"viewport.compact() ? 'close' : collapseIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\" position=\"bottom\" />\n    </button>\n    }\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: PaneTabStrip, selector: "lw-pane-tab-strip", inputs: ["tabs", "activeId", "reorderable", "draggable", "acceptsTabs", "source", "variant", "urlDriven", "contextMenuSlot", "viewContextMenuSlot", "contextGroup", "overflow", "canAddTab", "paneActions"], outputs: ["selectTab", "escalate", "closeTab", "unpinTab", "reorderTabs", "runAction", "addTab", "revealRequest"] }, { kind: "directive", type: ContextMenuDirective, selector: "[lwContextMenu]", inputs: ["lwContextMenu", "lwContextMenuContext"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ShellSidebarHeader, isStandalone: true, selector: "lw-shell-sidebar-header", inputs: { region: { classPropertyName: "region", publicName: "region", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showHamburger()) {\n\n  <div\n    class=\"flex h-12 w-10 shrink-0 items-center justify-center border-b border-border bg-surface\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"open()\"\n      class=\"lw-icon-btn h-9 w-9 rounded-md\"\n      [attr.aria-label]=\"'panel.open' | transloco\"\n    >\n      <lw-icon name=\"menu\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.open' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (showExpand()) {\n\n  <div\n    class=\"flex h-12 items-center overflow-hidden border-b border-border bg-surface px-1.5\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"expand()\"\n      class=\"lw-icon-btn h-7 w-7 rounded-md\"\n      [attr.aria-label]=\"'panel.expand' | transloco\"\n    >\n      <lw-icon [name]=\"expandIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.expand' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (!collapsed()) {\n\n  <lw-pane-tab-strip\n    class=\"block h-12\"\n    [id]=\"hostId()\"\n    variant=\"icons\"\n    [tabs]=\"stripTabs()\"\n    [activeId]=\"activeTabPath()\"\n    [source]=\"source()\"\n    [reorderable]=\"viewsReorderable\"\n    [draggable]=\"viewsDraggable\"\n    [acceptsTabs]=\"acceptsTab\"\n    [viewContextMenuSlot]=\"viewContextMenu\"\n    [contextGroup]=\"region().id\"\n    [overflow]=\"true\"\n    [paneActions]=\"trailing\"\n    (selectTab)=\"select($event)\"\n    (reorderTabs)=\"onReorder($event)\"\n    (keydown)=\"onStripKeydown($event)\"\n    [lwMenu]=\"stripMenu\"\n  />\n  <ng-template #trailing>\n    @if (canCollapse()) {\n    <button\n      type=\"button\"\n      (click)=\"trailingAction()\"\n      class=\"lw-icon-btn h-10 w-10 self-center rounded-md md:h-7 md:w-7\"\n      [attr.aria-label]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\"\n    >\n      <lw-icon [name]=\"viewport.compact() ? 'close' : collapseIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\" position=\"bottom\" />\n    </button>\n    }\n  </ng-template>\n}\n", dependencies: [{ kind: "component", type: PaneTabStrip, selector: "lw-pane-tab-strip", inputs: ["tabs", "activeId", "reorderable", "draggable", "acceptsTabs", "source", "variant", "urlDriven", "contextMenuSlot", "viewContextMenuSlot", "contextGroup", "overflow", "canAddTab", "paneActions"], outputs: ["selectTab", "escalate", "closeTab", "unpinTab", "reorderTabs", "runAction", "addTab", "revealRequest"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lwMenu], [lwMenuOnActivate], [lwMenuState]", inputs: ["lwMenu", "lwMenuOnActivate", "lwMenuContext", "lwMenuSide", "lwMenuHeader", "lwMenuState"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ShellSidebarHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'lw-shell-sidebar-header', imports: [TranslocoPipe, PaneTabStrip, ContextMenuDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showHamburger()) {\n\n  <div\n    class=\"flex h-12 w-10 shrink-0 items-center justify-center border-b border-border bg-surface\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"open()\"\n      class=\"lw-icon-btn h-9 w-9 rounded-md\"\n      [attr.aria-label]=\"'panel.open' | transloco\"\n    >\n      <lw-icon name=\"menu\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.open' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (showExpand()) {\n\n  <div\n    class=\"flex h-12 items-center overflow-hidden border-b border-border bg-surface px-1.5\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"expand()\"\n      class=\"lw-icon-btn h-7 w-7 rounded-md\"\n      [attr.aria-label]=\"'panel.expand' | transloco\"\n    >\n      <lw-icon [name]=\"expandIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.expand' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (!collapsed()) {\n\n  <lw-pane-tab-strip\n    class=\"block h-12\"\n    [id]=\"hostId()\"\n    variant=\"icons\"\n    [tabs]=\"stripTabs()\"\n    [activeId]=\"activeTabPath()\"\n    [source]=\"source()\"\n    [reorderable]=\"viewsReorderable\"\n    [draggable]=\"viewsDraggable\"\n    [acceptsTabs]=\"acceptsTab\"\n    [viewContextMenuSlot]=\"viewContextMenu\"\n    [contextGroup]=\"region().id\"\n    [overflow]=\"true\"\n    [paneActions]=\"trailing\"\n    (selectTab)=\"select($event)\"\n    (reorderTabs)=\"onReorder($event)\"\n    (keydown)=\"onStripKeydown($event)\"\n    [lwContextMenu]=\"stripMenu\"\n  />\n  <ng-template #trailing>\n    @if (canCollapse()) {\n    <button\n      type=\"button\"\n      (click)=\"trailingAction()\"\n      class=\"lw-icon-btn h-10 w-10 self-center rounded-md md:h-7 md:w-7\"\n      [attr.aria-label]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\"\n    >\n      <lw-icon [name]=\"viewport.compact() ? 'close' : collapseIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\" position=\"bottom\" />\n    </button>\n    }\n  </ng-template>\n}\n" }]
+            args: [{ selector: 'lw-shell-sidebar-header', imports: [TranslocoPipe, PaneTabStrip, MenuTriggerDirective], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showHamburger()) {\n\n  <div\n    class=\"flex h-12 w-10 shrink-0 items-center justify-center border-b border-border bg-surface\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"open()\"\n      class=\"lw-icon-btn h-9 w-9 rounded-md\"\n      [attr.aria-label]=\"'panel.open' | transloco\"\n    >\n      <lw-icon name=\"menu\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.open' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (showExpand()) {\n\n  <div\n    class=\"flex h-12 items-center overflow-hidden border-b border-border bg-surface px-1.5\"\n  >\n    <button\n      type=\"button\"\n      (click)=\"expand()\"\n      class=\"lw-icon-btn h-7 w-7 rounded-md\"\n      [attr.aria-label]=\"'panel.expand' | transloco\"\n    >\n      <lw-icon [name]=\"expandIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"'panel.expand' | transloco\" position=\"bottom\" />\n    </button>\n  </div>\n} @else if (!collapsed()) {\n\n  <lw-pane-tab-strip\n    class=\"block h-12\"\n    [id]=\"hostId()\"\n    variant=\"icons\"\n    [tabs]=\"stripTabs()\"\n    [activeId]=\"activeTabPath()\"\n    [source]=\"source()\"\n    [reorderable]=\"viewsReorderable\"\n    [draggable]=\"viewsDraggable\"\n    [acceptsTabs]=\"acceptsTab\"\n    [viewContextMenuSlot]=\"viewContextMenu\"\n    [contextGroup]=\"region().id\"\n    [overflow]=\"true\"\n    [paneActions]=\"trailing\"\n    (selectTab)=\"select($event)\"\n    (reorderTabs)=\"onReorder($event)\"\n    (keydown)=\"onStripKeydown($event)\"\n    [lwMenu]=\"stripMenu\"\n  />\n  <ng-template #trailing>\n    @if (canCollapse()) {\n    <button\n      type=\"button\"\n      (click)=\"trailingAction()\"\n      class=\"lw-icon-btn h-10 w-10 self-center rounded-md md:h-7 md:w-7\"\n      [attr.aria-label]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\"\n    >\n      <lw-icon [name]=\"viewport.compact() ? 'close' : collapseIcon()\" size=\"1rem\" />\n      <lw-tooltip [text]=\"(viewport.compact() ? 'panel.close' : 'panel.collapse') | transloco\" position=\"bottom\" />\n    </button>\n    }\n  </ng-template>\n}\n" }]
         }], propDecorators: { region: [{ type: i0.Input, args: [{ isSignal: true, alias: "region", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
 
 const TAB_CONTEXT_MENU = 'content/tab/context';
@@ -11369,7 +11596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 // GENERATED — do not edit by hand.
 // Written by tools/stamp-version.mjs from <Version> in Directory.Build.props.
 // Single source of truth: Directory.Build.props (bump via scripts/bump-version.sh).
-const APP_VERSION = '0.7.7';
+const APP_VERSION = '0.7.8';
 
 /**
  * The running build's version, sourced from `<Version>` in Directory.Build.props
@@ -13386,6 +13613,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'lw-text-size-toggle', imports: [TranslocoPipe], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<fieldset class=\"lw-segmented\" [attr.aria-label]=\"'textSize.label' | transloco\">\n  @for (s of scales; track s) {\n    <button\n      type=\"button\"\n      (click)=\"select(s)\"\n      [attr.aria-pressed]=\"scale() === s\"\n      [attr.aria-label]=\"'textSize.' + s | transloco\"\n      class=\"lw-segmented-item font-semibold\"\n    >\n      <span [class]=\"glyphClass(s)\" aria-hidden=\"true\">A</span>\n      <lw-tooltip [text]=\"'textSize.' + s | transloco\" position=\"bottom\" />\n    </button>\n  }\n</fieldset>\n" }]
         }] });
 
+/**
+ * The plugins this distribution declared not optional. Defaults to **none** — every plugin is the
+ * user's to switch off until a distribution says otherwise.
+ */
+const REQUIRED_PLUGINS = new InjectionToken('REQUIRED_PLUGINS', { providedIn: 'root', factory: () => [] });
+/**
+ * A distribution declares which of the plugins it composes its application cannot run without. Such
+ * a plugin is listed in the permissions settings with what it holds, and **without a switch to turn
+ * it off**; it stays active whatever the user chose before.
+ *
+ * This is the distribution's statement and not the plugin's, and deliberately so: everything a plugin
+ * declares about itself is a request the distribution grants, so a manifest field here would be the
+ * one exemption a plugin could award itself.
+ *
+ * It withholds the plugin's own switch and nothing else. The capabilities such a plugin was granted
+ * stay revocable, because needing a plugin says nothing about needing everything it asked for — which
+ * is what distinguishes this from a plugin the operator deployed, where both are withheld.
+ *
+ * Naming a plugin this distribution does not compose — neither one it provides in-process nor an
+ * isolated one it declares — is a composition mistake, not a failure: it is reported in development
+ * and otherwise ignored, the same way a capability granted to a plugin that never declared it is. The
+ * report happens once the composed plugins are registered, which is the only moment that set is
+ * settled: a plugin the store installs arrives later and is the user's to switch off in any case.
+ *
+ * @example
+ * provideRequiredPlugins('sign-in')
+ */
+function provideRequiredPlugins(...pluginIds) {
+    return { provide: REQUIRED_PLUGINS, useValue: pluginIds };
+}
+
 const STORAGE_KEY$3 = 'lw.shell.disabled-plugins';
 /**
  * Whether each plugin is turned on — plugin enable/disable, distinct from capability revocation. Disabling a plugin is coarse: it does not restrict a power, it unloads the
@@ -13399,15 +13657,27 @@ const STORAGE_KEY$3 = 'lw.shell.disabled-plugins';
 class PluginEnablementService {
     store = inject(SETTINGS_STORE);
     sync = inject(StateSyncService);
+    required = new Set(inject(REQUIRED_PLUGINS));
     disabledSet = signal(parseIdSet(this.store.peek?.(STORAGE_KEY$3)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledSet" }] : /* istanbul ignore next */ []));
     names = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []));
-    /** The disabled plugin ids (reactive) — a runtime reconciles activation against this. */
-    disabled = this.disabledSet.asReadonly();
+    /**
+     * The disabled plugin ids (reactive) — a runtime reconciles activation against this. A plugin the
+     * distribution declared its application cannot run without never appears here, whatever is stored,
+     * so the runtime and the permissions surface read one answer rather than two.
+     */
+    disabled = computed(() => {
+        const stored = this.disabledSet();
+        if (this.required.size === 0) {
+            return stored;
+        }
+        return new Set([...stored].filter((id) => !this.required.has(id)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** Every known plugin with its enabled state, for the permissions settings surface. */
     plugins = computed(() => {
-        const disabled = this.disabledSet();
+        const disabled = this.disabled();
         return [...this.names().entries()]
             .map(([id, name]) => ({ id, name, enabled: !disabled.has(id) }))
             .toSorted((a, b) => a.name.localeCompare(b.name));
@@ -13417,6 +13687,10 @@ class PluginEnablementService {
         hydrateAsync(this.store, STORAGE_KEY$3, (raw) => this.disabledSet.set(parseIdSet(raw)));
         this.sync.register('settings', STORAGE_KEY$3, (raw) => this.disabledSet.set(parseIdSet(raw)));
     }
+    /** Whether the distribution declared it cannot run without this plugin. */
+    isRequired(id) {
+        return this.required.has(id);
+    }
     /** Records a plugin so the permissions surface can list it (enabled or not). Idempotent. A runtime calls it for every plugin it knows. */
     register(id, name) {
         this.names.update((map) => map.has(id) ? map : new Map(map).set(id, name));
@@ -13434,10 +13708,17 @@ class PluginEnablementService {
     }
     /** Whether `id` is currently enabled (default: yes — a plugin is on until the user turns it off). */
     isEnabled(id) {
-        return !this.disabledSet().has(id);
+        return !this.disabled().has(id);
     }
-    /** Turns a whole plugin on or off (persisted). The runtimes react by loading/unloading it. */
+    /**
+     * Turns a whole plugin on or off (persisted). The runtimes react by loading/unloading it. Turning
+     * off a plugin the distribution declared it cannot run without does nothing: the surface offers no
+     * switch for one, and this is the same answer read from anywhere else.
+     */
     setEnabled(id, enabled) {
+        if (!enabled && this.required.has(id)) {
+            return;
+        }
         const next = toggledIdSet(this.disabledSet(), id, !enabled);
         this.disabledSet.set(next);
         void this.store.set(STORAGE_KEY$3, JSON.stringify([...next]));
@@ -13651,10 +13932,12 @@ class PermissionsSettings {
         const caps = this.grants.permissions();
         return this.enablement.plugins().map((plugin) => {
             const provided = this.deployment.isDeployed(plugin.id);
+            const required = this.enablement.isRequired(plugin.id);
             return {
                 ...plugin,
                 enabled: provided || plugin.enabled,
                 provided,
+                required,
                 rungNote: rungNoteKey(this.isolation.rungOf(plugin.id)),
                 capabilities: caps.find((entry) => entry.pluginId === plugin.id)?.capabilities ??
                     [],
@@ -13669,11 +13952,11 @@ class PermissionsSettings {
         this.grants.setGranted(pluginId, capability, event.target.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PermissionsSettings, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PermissionsSettings, isStandalone: true, selector: "lw-permissions-settings", ngImport: i0, template: "<p class=\"mb-4 text-sm text-content-muted\">\n  {{ 'settings.permissionsDesc' | transloco }}\n</p>\n@if (plugins().length === 0) {\n  <p class=\"text-sm text-content-muted\">\n    {{ 'settings.permissionsEmpty' | transloco }}\n  </p>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    @for (plugin of plugins(); track plugin.id) {\n      <section class=\"flex flex-col gap-3\">\n        <div class=\"flex items-center justify-between gap-4\">\n          <h3 class=\"text-sm font-semibold text-content\">\n            {{ plugin.name }}\n          </h3>\n          @if (!plugin.provided) {\n            <input\n              type=\"checkbox\"\n              role=\"switch\"\n              class=\"lw-switch shrink-0\"\n              [checked]=\"plugin.enabled\"\n              [attr.aria-checked]=\"plugin.enabled\"\n              [attr.aria-label]=\"'settings.pluginEnabled' | transloco\"\n              [attr.data-testid]=\"'plugin-enabled-' + plugin.id\"\n              (change)=\"togglePlugin(plugin.id, $event)\"\n            />\n          }\n        </div>\n        @if (plugin.rungNote; as rungNote) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-level-' + plugin.id\"\n          >\n            {{ rungNote | transloco }}\n          </p>\n        }\n        @if (plugin.provided) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-provided-' + plugin.id\"\n          >\n            {{ 'settings.permissionsProvided' | transloco }}\n          </p>\n        }\n        @if (plugin.enabled) {\n          <ul class=\"flex flex-col gap-3\">\n            @for (cap of plugin.capabilities; track cap.capability) {\n              <li class=\"flex items-start justify-between gap-4\">\n                <div class=\"flex flex-col\">\n                  <span class=\"text-sm text-content\">{{\n                    'settings.capability.' + cap.capability | transloco\n                  }}</span>\n                  <span class=\"text-xs text-content-muted\">{{\n                    'settings.capabilityDesc.' + cap.capability | transloco\n                  }}</span>\n                </div>\n                @if (!plugin.provided) {\n                  <input\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    class=\"lw-switch shrink-0\"\n                    [checked]=\"cap.effective\"\n                    [attr.aria-checked]=\"cap.effective\"\n                    [attr.aria-label]=\"\n                      'settings.capability.' + cap.capability | transloco\n                    \"\n                    [attr.data-testid]=\"\n                      'perm-' + plugin.id + '-' + cap.capability\n                    \"\n                    (change)=\"\n                      toggleCapability(plugin.id, cap.capability, $event)\n                    \"\n                  />\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"text-xs text-content-muted\">\n            {{ 'settings.pluginDisabled' | transloco }}\n          </p>\n        }\n      </section>\n    }\n  </div>\n}\n", dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PermissionsSettings, isStandalone: true, selector: "lw-permissions-settings", ngImport: i0, template: "<p class=\"mb-4 text-sm text-content-muted\">\n  {{ 'settings.permissionsDesc' | transloco }}\n</p>\n@if (plugins().length === 0) {\n  <p class=\"text-sm text-content-muted\">\n    {{ 'settings.permissionsEmpty' | transloco }}\n  </p>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    @for (plugin of plugins(); track plugin.id) {\n      <section class=\"flex flex-col gap-3\">\n        <div class=\"flex items-center justify-between gap-4\">\n          <h3 class=\"text-sm font-semibold text-content\">\n            {{ plugin.name }}\n          </h3>\n          @if (!plugin.provided && !plugin.required) {\n            <input\n              type=\"checkbox\"\n              role=\"switch\"\n              class=\"lw-switch shrink-0\"\n              [checked]=\"plugin.enabled\"\n              [attr.aria-checked]=\"plugin.enabled\"\n              [attr.aria-label]=\"'settings.pluginEnabled' | transloco\"\n              [attr.data-testid]=\"'plugin-enabled-' + plugin.id\"\n              (change)=\"togglePlugin(plugin.id, $event)\"\n            />\n          }\n        </div>\n        @if (plugin.rungNote; as rungNote) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-level-' + plugin.id\"\n          >\n            {{ rungNote | transloco }}\n          </p>\n        }\n        @if (plugin.provided) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-provided-' + plugin.id\"\n          >\n            {{ 'settings.permissionsProvided' | transloco }}\n          </p>\n        } @else if (plugin.required) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-required-' + plugin.id\"\n          >\n            {{ 'settings.permissionsRequired' | transloco }}\n          </p>\n        }\n        @if (plugin.enabled) {\n          <ul class=\"flex flex-col gap-3\">\n            @for (cap of plugin.capabilities; track cap.capability) {\n              <li class=\"flex items-start justify-between gap-4\">\n                <div class=\"flex flex-col\">\n                  <span class=\"text-sm text-content\">{{\n                    'settings.capability.' + cap.capability | transloco\n                  }}</span>\n                  <span class=\"text-xs text-content-muted\">{{\n                    'settings.capabilityDesc.' + cap.capability | transloco\n                  }}</span>\n                </div>\n                @if (!plugin.provided) {\n                  <input\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    class=\"lw-switch shrink-0\"\n                    [checked]=\"cap.effective\"\n                    [attr.aria-checked]=\"cap.effective\"\n                    [attr.aria-label]=\"\n                      'settings.capability.' + cap.capability | transloco\n                    \"\n                    [attr.data-testid]=\"\n                      'perm-' + plugin.id + '-' + cap.capability\n                    \"\n                    (change)=\"\n                      toggleCapability(plugin.id, cap.capability, $event)\n                    \"\n                  />\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"text-xs text-content-muted\">\n            {{ 'settings.pluginDisabled' | transloco }}\n          </p>\n        }\n      </section>\n    }\n  </div>\n}\n", dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PermissionsSettings, decorators: [{
             type: Component,
-            args: [{ selector: 'lw-permissions-settings', imports: [TranslocoPipe], template: "<p class=\"mb-4 text-sm text-content-muted\">\n  {{ 'settings.permissionsDesc' | transloco }}\n</p>\n@if (plugins().length === 0) {\n  <p class=\"text-sm text-content-muted\">\n    {{ 'settings.permissionsEmpty' | transloco }}\n  </p>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    @for (plugin of plugins(); track plugin.id) {\n      <section class=\"flex flex-col gap-3\">\n        <div class=\"flex items-center justify-between gap-4\">\n          <h3 class=\"text-sm font-semibold text-content\">\n            {{ plugin.name }}\n          </h3>\n          @if (!plugin.provided) {\n            <input\n              type=\"checkbox\"\n              role=\"switch\"\n              class=\"lw-switch shrink-0\"\n              [checked]=\"plugin.enabled\"\n              [attr.aria-checked]=\"plugin.enabled\"\n              [attr.aria-label]=\"'settings.pluginEnabled' | transloco\"\n              [attr.data-testid]=\"'plugin-enabled-' + plugin.id\"\n              (change)=\"togglePlugin(plugin.id, $event)\"\n            />\n          }\n        </div>\n        @if (plugin.rungNote; as rungNote) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-level-' + plugin.id\"\n          >\n            {{ rungNote | transloco }}\n          </p>\n        }\n        @if (plugin.provided) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-provided-' + plugin.id\"\n          >\n            {{ 'settings.permissionsProvided' | transloco }}\n          </p>\n        }\n        @if (plugin.enabled) {\n          <ul class=\"flex flex-col gap-3\">\n            @for (cap of plugin.capabilities; track cap.capability) {\n              <li class=\"flex items-start justify-between gap-4\">\n                <div class=\"flex flex-col\">\n                  <span class=\"text-sm text-content\">{{\n                    'settings.capability.' + cap.capability | transloco\n                  }}</span>\n                  <span class=\"text-xs text-content-muted\">{{\n                    'settings.capabilityDesc.' + cap.capability | transloco\n                  }}</span>\n                </div>\n                @if (!plugin.provided) {\n                  <input\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    class=\"lw-switch shrink-0\"\n                    [checked]=\"cap.effective\"\n                    [attr.aria-checked]=\"cap.effective\"\n                    [attr.aria-label]=\"\n                      'settings.capability.' + cap.capability | transloco\n                    \"\n                    [attr.data-testid]=\"\n                      'perm-' + plugin.id + '-' + cap.capability\n                    \"\n                    (change)=\"\n                      toggleCapability(plugin.id, cap.capability, $event)\n                    \"\n                  />\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"text-xs text-content-muted\">\n            {{ 'settings.pluginDisabled' | transloco }}\n          </p>\n        }\n      </section>\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'lw-permissions-settings', imports: [TranslocoPipe], template: "<p class=\"mb-4 text-sm text-content-muted\">\n  {{ 'settings.permissionsDesc' | transloco }}\n</p>\n@if (plugins().length === 0) {\n  <p class=\"text-sm text-content-muted\">\n    {{ 'settings.permissionsEmpty' | transloco }}\n  </p>\n} @else {\n  <div class=\"flex flex-col gap-6\">\n    @for (plugin of plugins(); track plugin.id) {\n      <section class=\"flex flex-col gap-3\">\n        <div class=\"flex items-center justify-between gap-4\">\n          <h3 class=\"text-sm font-semibold text-content\">\n            {{ plugin.name }}\n          </h3>\n          @if (!plugin.provided && !plugin.required) {\n            <input\n              type=\"checkbox\"\n              role=\"switch\"\n              class=\"lw-switch shrink-0\"\n              [checked]=\"plugin.enabled\"\n              [attr.aria-checked]=\"plugin.enabled\"\n              [attr.aria-label]=\"'settings.pluginEnabled' | transloco\"\n              [attr.data-testid]=\"'plugin-enabled-' + plugin.id\"\n              (change)=\"togglePlugin(plugin.id, $event)\"\n            />\n          }\n        </div>\n        @if (plugin.rungNote; as rungNote) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-level-' + plugin.id\"\n          >\n            {{ rungNote | transloco }}\n          </p>\n        }\n        @if (plugin.provided) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-provided-' + plugin.id\"\n          >\n            {{ 'settings.permissionsProvided' | transloco }}\n          </p>\n        } @else if (plugin.required) {\n          <p\n            class=\"text-xs text-content-muted\"\n            [attr.data-testid]=\"'perm-required-' + plugin.id\"\n          >\n            {{ 'settings.permissionsRequired' | transloco }}\n          </p>\n        }\n        @if (plugin.enabled) {\n          <ul class=\"flex flex-col gap-3\">\n            @for (cap of plugin.capabilities; track cap.capability) {\n              <li class=\"flex items-start justify-between gap-4\">\n                <div class=\"flex flex-col\">\n                  <span class=\"text-sm text-content\">{{\n                    'settings.capability.' + cap.capability | transloco\n                  }}</span>\n                  <span class=\"text-xs text-content-muted\">{{\n                    'settings.capabilityDesc.' + cap.capability | transloco\n                  }}</span>\n                </div>\n                @if (!plugin.provided) {\n                  <input\n                    type=\"checkbox\"\n                    role=\"switch\"\n                    class=\"lw-switch shrink-0\"\n                    [checked]=\"cap.effective\"\n                    [attr.aria-checked]=\"cap.effective\"\n                    [attr.aria-label]=\"\n                      'settings.capability.' + cap.capability | transloco\n                    \"\n                    [attr.data-testid]=\"\n                      'perm-' + plugin.id + '-' + cap.capability\n                    \"\n                    (change)=\"\n                      toggleCapability(plugin.id, cap.capability, $event)\n                    \"\n                  />\n                }\n              </li>\n            }\n          </ul>\n        } @else {\n          <p class=\"text-xs text-content-muted\">\n            {{ 'settings.pluginDisabled' | transloco }}\n          </p>\n        }\n      </section>\n    }\n  </div>\n}\n" }]
         }] });
 
 function registerDefaultSettings(settings) {
@@ -15759,6 +16042,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             type: Service
         }] });
 
+/** Multi-provider token: each contribution adds one sandboxed plugin to load. */
+const FRAME_PLUGIN = new InjectionToken('FRAME_PLUGIN');
+
 /** Multi-provider token: each contribution adds one plugin to load. */
 const PLUGIN = new InjectionToken('PLUGIN');
 /**
@@ -15769,6 +16055,8 @@ const PLUGIN = new InjectionToken('PLUGIN');
 class PluginRuntime {
     grants = inject(CapabilityGrantService);
     enablement = inject(PluginEnablementService);
+    required = inject(REQUIRED_PLUGINS);
+    framePlugins = inject(FRAME_PLUGIN, { optional: true }) ?? [];
     factory = inject(HostContextFactory);
     injector = inject(EnvironmentInjector);
     plugins = inject(PLUGIN, { optional: true }) ?? [];
@@ -15782,6 +16070,7 @@ class PluginRuntime {
         for (const plugin of this.plugins) {
             this.enablement.register(plugin.manifest.id, plugin.manifest.name ?? plugin.manifest.id);
         }
+        this.reportUncomposedRequirements();
         this.reconcile(this.enablement.disabled());
         effect(() => {
             const disabled = this.enablement.disabled();
@@ -15848,6 +16137,19 @@ class PluginRuntime {
         this.active.delete(id);
         console.error(`Plugin "${id}" activation failed`, error);
     }
+    reportUncomposedRequirements() {
+        if (!isDevMode()) {
+            return;
+        }
+        const composed = new Set([
+            ...this.plugins.map((plugin) => plugin.manifest.id),
+            ...this.framePlugins.map((plugin) => plugin.id),
+        ]);
+        const missing = this.required.filter((id) => !composed.has(id));
+        if (missing.length > 0) {
+            console.warn(`provideRequiredPlugins names ${missing.join(', ')}, which this distribution does not compose — ignored.`);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PluginRuntime, deps: [], target: i0.ɵɵFactoryTarget.Service });
     static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: PluginRuntime });
 }
@@ -15866,9 +16168,6 @@ function providePlugins(...plugins) {
     ];
 }
 
-/** Multi-provider token: each contribution adds one sandboxed plugin to load. */
-const FRAME_PLUGIN = new InjectionToken('FRAME_PLUGIN');
-
 const STORAGE_KEY = 'lw.shell.installed-plugins';
 /**
  * The user's installed community plugins. Holds only the state: which catalog entries the
@@ -17272,5 +17571,5 @@ function provideIcons(icons) {
  * Generated bundle index. Do not edit.
  */
 
-export { AUTH_SOURCE, AuthContext, BAR_ITEM, CAPABILITY_GRANTS, COMMAND_INVOKER, CapabilityGrantService, CommandInvocationService, CommandService, ContentTabsService, ContributionRegistry, DEFAULT_LAYOUT, DEFAULT_SHELL_FEATURES, DEVICE_LEVEL_KEYS, DialogOutlet, DialogService, FRAME_PLUGIN, FramePluginRuntime, KeybindingService, LW_BUTTON_TAG, LW_ICON_TAG, LW_MARKDOWN_TAG, LW_TOOLTIP_TAG, LocalStorageStore, LwButton, LwButtonElement, LwIconElement, LwMarkdownElement, LwSettingRow, LwSpinner, LwTooltipElement, LwVersion, NotificationService, PLUGIN, PLUGIN_CATALOG, PluginEnablementService, PluginInstallService, PluginRuntime, PopoutService, RAIL_ITEM, SETTINGS_STORE, SHELL_FEATURES, SHELL_LAYOUT, SettingsService, Shell, StateSyncService, TRANSLATION_NAMESPACES, TRANSLATION_OVERRIDES, ThemeService, ToastOutlet, UpdateBadge, UpdateService, VIEW, VersionService, WORKING_STATE_STORE, WORKSPACE_DEFINITIONS, defineLwButton, defineLwIcon, defineLwMarkdown, defineLwTooltip, effectiveCapabilities, formatChord, provideAuthSource, provideBarItems, provideCapabilityGrants, provideCommandPaletteEntry, provideFramePlugins, provideIcons, provideIdentityScopedStores, provideLayout, providePluginCatalog, providePlugins, provideQuickOpenEntry, provideRailItems, provideSettingsStore, provideShell, provideShellFeatures, provideShellRouter, provideTabAddressResolver, provideTranslationNamespaces, provideTranslationOverrides, provideUnauthorizedRedirect, provideViews, provideWorkingStateStore, provideWorkspaces, urlPluginCatalog };
+export { AUTH_SOURCE, AuthContext, BAR_ITEM, CAPABILITY_GRANTS, COMMAND_INVOKER, CapabilityGrantService, CommandInvocationService, CommandService, ContentTabsService, ContributionRegistry, DEFAULT_LAYOUT, DEFAULT_SHELL_FEATURES, DEVICE_LEVEL_KEYS, DialogOutlet, DialogService, FRAME_PLUGIN, FramePluginRuntime, KeybindingService, LW_BUTTON_TAG, LW_ICON_TAG, LW_MARKDOWN_TAG, LW_TOOLTIP_TAG, LocalStorageStore, LwButton, LwButtonElement, LwIconElement, LwMarkdownElement, LwSettingRow, LwSpinner, LwTooltipElement, LwVersion, NotificationService, PLUGIN, PLUGIN_CATALOG, PluginEnablementService, PluginInstallService, PluginRuntime, PopoutService, RAIL_ITEM, REQUIRED_PLUGINS, SETTINGS_STORE, SHELL_FEATURES, SHELL_LAYOUT, SettingsService, Shell, StateSyncService, TRANSLATION_NAMESPACES, TRANSLATION_OVERRIDES, ThemeService, ToastOutlet, UpdateBadge, UpdateService, VIEW, VersionService, WORKING_STATE_STORE, WORKSPACE_DEFINITIONS, defineLwButton, defineLwIcon, defineLwMarkdown, defineLwTooltip, effectiveCapabilities, formatChord, provideAuthSource, provideBarItems, provideCapabilityGrants, provideCommandPaletteEntry, provideFramePlugins, provideIcons, provideIdentityScopedStores, provideLayout, providePluginCatalog, providePlugins, provideQuickOpenEntry, provideRailItems, provideRequiredPlugins, provideSettingsStore, provideShell, provideShellFeatures, provideShellRouter, provideTabAddressResolver, provideTranslationNamespaces, provideTranslationOverrides, provideUnauthorizedRedirect, provideViews, provideWorkingStateStore, provideWorkspaces, urlPluginCatalog };
 //# sourceMappingURL=loomweaver-shell.mjs.map