yukit-web 0.0.9 → 0.0.10

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { forwardRef, signal, Directive, input, inject, TemplateRef, ElementRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, ViewContainerRef, runInInjectionContext } from '@angular/core';
+import { forwardRef, signal, Directive, input, inject, TemplateRef, ElementRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, runInInjectionContext } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
@@ -48,7 +48,7 @@ import * as i1$c from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
 import { injectTable, FlexRenderDirective } from '@tanstack/angular-table';
 import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
-import { skip, switchMap, timer, of, merge, fromEvent } from 'rxjs';
+import { skip, switchMap, timer, of } from 'rxjs';
 import * as i1$d from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$e from 'yukit-web/helm/item';
@@ -56,7 +56,7 @@ import { HlmItem, HlmItemHeader, HlmItemMedia, HlmItemContent, HlmItemTitle, Hlm
 import * as i1$f from '@spartan-ng/brain/sheet';
 import { BrnSheetTrigger, BrnSheetClose } from '@spartan-ng/brain/sheet';
 import * as i1$g from 'yukit-web/helm/sheet';
-import { HlmSheetImports } from 'yukit-web/helm/sheet';
+import { HlmSheet, HlmSheetImports } from 'yukit-web/helm/sheet';
 import * as i1$i from 'yukit-web/helm/popover';
 import { HlmPopoverImports } from 'yukit-web/helm/popover';
 import * as i1$h from '@spartan-ng/brain/popover';
@@ -81,14 +81,12 @@ import * as i1$o from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
 import * as i1$p from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
-import { map, distinctUntilChanged, switchMap as switchMap$1 } from 'rxjs/operators';
+import { map, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$q from 'yukit-web/helm/sidebar';
 import { HlmSidebarService, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 import { Router, isActive, RouterLink, RouterLinkActive } from '@angular/router';
-import * as i2$1 from 'yukit-web/helm/hover-card';
-import { HlmHoverCardPortal, HlmHoverCardContent } from 'yukit-web/helm/hover-card';
-import { BrnHoverCardContentService } from '@spartan-ng/brain/hover-card';
+import { OverlayContainer } from '@angular/cdk/overlay';
 
 /**
  * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
@@ -3216,6 +3214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
+const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
 /**
  * Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
  *
@@ -3234,7 +3233,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *   renders and screen readers read this label; when absent there is no close button. User-facing
  *   text the consuming app is responsible for translating.
  * - `panelClass`: Extra classes merged onto the sheet panel (e.g. `sm:max-w-lg` to widen it).
- *   They win over the library defaults via `twMerge`.
+ *   They win over the library defaults via `twMerge`. Note `twMerge` resolves per variant group, so a
+ *   plain utility does not displace a variant-prefixed default — to override `data-[side=left]:w-3/4`
+ *   the class has to be `data-[side=left]:w-64`, not `w-64`.
+ * - `overlayClass`: Extra classes for the backdrop, for a sheet that should not dim the whole
+ *   viewport. Applied through `setOverlayClass` rather than a template binding: the backdrop lives in
+ *   the overlay too, and the helm's own class always wins the `class` input it exposes.
+ * - `scrollStrategy`: What happens to page scroll while open. Defaults to the brain's blocking
+ *   strategy; pass `'reposition'` for a panel that should leave the page scrollable.
+ * - `ariaModal`: Whether the sheet claims the rest of the page is hidden. Leave `true` for a real
+ *   modal; set `false` when content outside stays visible and usable, so the claim stays honest.
+ * - `closeOnOutsidePointerEvents`: Whether a pointer press outside the panel closes it. Default is
+ *   `false`, matching the brain.
  * - `triggerVariant`: Button style variant for the trigger button.
  * - `triggerSize`: Button size for the trigger button.
  *
@@ -3253,6 +3263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class YuwSheetComponent {
     constructor() {
+        this.sheet = viewChild.required(HlmSheet);
         this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         this.showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
@@ -3261,23 +3272,33 @@ class YuwSheetComponent {
         this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.closeLabel = input(undefined, ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
         this.panelClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        this.overlayClass = input(undefined, ...(ngDevMode ? [{ debugName: "overlayClass" }] : /* istanbul ignore next */ []));
+        this.scrollStrategy = input(null, ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+        this.ariaModal = input(true, { ...(ngDevMode ? { debugName: "ariaModal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.closeOnOutsidePointerEvents = input(false, { ...(ngDevMode ? { debugName: "closeOnOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
         this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
         this.hasFooter = contentChild(YuwSheetFooterDirective, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
         this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const overlayClass = this.overlayClass();
+            if (overlayClass === undefined)
+                return;
+            this.sheet().setOverlayClass(`${YUW_SHEET_OVERLAY_BASE_CLASS} ${overlayClass}`);
+        });
     }
     onStateChanged(state) {
         this.open.set(state === 'open');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSheetComponent, isStandalone: true, selector: "yuw-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, overlayClass: { classPropertyName: "overlayClass", publicName: "overlayClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, ariaModal: { classPropertyName: "ariaModal", publicName: "ariaModal", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsidePointerEvents: { classPropertyName: "closeOnOutsidePointerEvents", publicName: "closeOnOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null }, triggerVariant: { classPropertyName: "triggerVariant", publicName: "triggerVariant", isSignal: true, isRequired: false, transformFunction: null }, triggerSize: { classPropertyName: "triggerSize", publicName: "triggerSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideX })], queries: [{ propertyName: "hasFooter", first: true, predicate: YuwSheetFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: HlmSheet, descendants: true, isSignal: true }], ngImport: i0, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n", dependencies: [{ kind: "component", type: i1$g.HlmSheet, selector: "hlm-sheet", exportAs: ["hlmSheet"] }, { kind: "component", type: i1$g.HlmSheetContent, selector: "hlm-sheet-content", inputs: ["showCloseButton"] }, { kind: "directive", type: i1$g.HlmSheetDescription, selector: "[hlmSheetDescription]" }, { kind: "directive", type: i1$g.HlmSheetFooter, selector: "[hlmSheetFooter],hlm-sheet-footer" }, { kind: "directive", type: i1$g.HlmSheetHeader, selector: "[hlmSheetHeader],hlm-sheet-header" }, { kind: "directive", type: i1$g.HlmSheetPortal, selector: "[hlmSheetPortal]" }, { kind: "directive", type: i1$g.HlmSheetTitle, selector: "[hlmSheetTitle]" }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["variant", "size", "color", "disabled", "type", "href", "target", "transparent", "yuwDropdownMenuTrigger", "ariaLabel", "buttons", "orientation", "groupAriaLabel", "animationDisabled", "class"], outputs: ["clicked", "buttonClicked"] }, { kind: "directive", type: YuwSheetTriggerDirective, selector: "yuw-button[yuwSheetTriggerButton]" }, { kind: "directive", type: YuwSheetCloseDirective, selector: "yuw-button[yuwSheetClose]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sheet', imports: [...HlmSheetImports, YuwButtonComponent, YuwSheetTriggerDirective, YuwSheetCloseDirective, NgIcon], providers: [provideIcons({ lucideX })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet [side]=\"side()\" [state]=\"_sheetState()\" [aria-label]=\"ariaLabel()\" (stateChanged)=\"onStateChanged($event)\">\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sheet\n  [side]=\"side()\"\n  [state]=\"_sheetState()\"\n  [aria-label]=\"ariaLabel()\"\n  [aria-modal]=\"ariaModal()\"\n  [scrollStrategy]=\"scrollStrategy()\"\n  [closeOnOutsidePointerEvents]=\"closeOnOutsidePointerEvents()\"\n  (stateChanged)=\"onStateChanged($event)\"\n>\n  @if (showTrigger()) {\n    <yuw-button yuwSheetTriggerButton [variant]=\"triggerVariant()\" [size]=\"triggerSize()\">\n      <ng-content select=\"[yuwSheetTrigger]\" />\n    </yuw-button>\n  }\n\n  <hlm-sheet-content *hlmSheetPortal [showCloseButton]=\"false\" [class]=\"panelClass()\">\n    @if (title() || description()) {\n      <div hlmSheetHeader>\n        @if (title()) {\n          <h2 hlmSheetTitle>{{ title() }}</h2>\n        }\n        @if (description()) {\n          <p hlmSheetDescription>{{ description() }}</p>\n        }\n      </div>\n    }\n\n    <div class=\"flex-1 overflow-y-auto px-4\">\n      <ng-content />\n    </div>\n\n    @if (hasFooter()) {\n      <div hlmSheetFooter>\n        <ng-content select=\"[yuwSheetFooter]\" />\n      </div>\n    }\n\n    @if (closeLabel()) {\n      <div class=\"absolute inset-e-3 top-3\">\n        <yuw-button yuwSheetClose variant=\"ghost\" size=\"icon-sm\">\n          <ng-icon yuwButtonIcon name=\"lucideX\" />\n          <span class=\"sr-only\">{{ closeLabel() }}</span>\n        </yuw-button>\n      </div>\n    }\n  </hlm-sheet-content>\n</hlm-sheet>\n" }]
+        }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HlmSheet), { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], overlayClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], ariaModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaModal", required: false }] }], closeOnOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsidePointerEvents", required: false }] }], triggerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerVariant", required: false }] }], triggerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerSize", required: false }] }], hasFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwSheetFooterDirective), { isSignal: true }] }] } });
 const YuwSheetImports = [YuwSheetComponent, YuwSheetFooterDirective];
 
 /**
@@ -4095,13 +4116,33 @@ const yuwSidebarMenuChevronClass = [
     'group-aria-expanded/menu-button:rotate-90',
     'group-data-[yuw-rail=on]:hidden!',
 ].join(' ');
-const yuwSidebarFlyoutClass = [
-    'w-56',
-    'ms-2',
-    'p-1',
+const YUW_SIDEBAR_RAIL_WIDTH_VAR = '--yuw-sidebar-rail-width';
+const yuwSidebarSubmenuSheetClass = [
+    'data-[side=left]:inset-y-0',
+    'data-[side=left]:left-[var(--yuw-sidebar-rail-width)]',
+    'data-[side=left]:h-full',
+    'data-[side=left]:w-64',
+    'data-[side=left]:sm:max-w-none',
+    'data-[side=left]:border-r-0',
+    'rounded-s-none',
+    'rounded-e-xl',
+    'bg-sidebar',
+    'text-sidebar-foreground',
+    'gap-0',
+    'p-0',
+    'duration-200',
+    'data-[side=left]:data-open:slide-in-from-left-4',
+    'data-[side=left]:data-closed:slide-out-to-left-4',
+    'data-open:fade-in-0',
+    'data-closed:fade-out-0',
+    'motion-reduce:animate-none',
+].join(' ');
+const yuwSidebarSubmenuOverlayClass = 'left-[var(--yuw-sidebar-rail-width)]!';
+const yuwSidebarSubmenuSheetBodyClass = [
     'flex',
     'flex-col',
     'gap-0.5',
+    'py-2',
     '[&_[data-sidebar=menu-sub]]:mx-0',
     '[&_[data-sidebar=menu-sub]]:translate-x-0',
     '[&_[data-sidebar=menu-sub]]:border-0',
@@ -4111,10 +4152,9 @@ const yuwSidebarFlyoutClass = [
     '[&_[data-sidebar=menu-sub-button]]:translate-x-0',
     '[&_[data-sidebar=menu-sub-button]]:h-8',
 ].join(' ');
-const yuwSidebarFlyoutLabelClass = [
+const yuwSidebarSubmenuSheetLabelClass = [
     'text-muted-foreground',
-    'px-2',
-    'pt-1',
+    'pt-4',
     'pb-1.5',
     'text-xs',
     'font-medium',
@@ -4191,7 +4231,7 @@ const yuwSidebarMenuSubButtonClass = ['[&>span]:truncate', '[&>span]:min-w-0'].j
  *
  * Provided at the root so `<yuw-sidebar>` and the nav share one instance — the component stamps the
  * attribute the class layers select on, and the nav reads the same signal to decide between accordion
- * and flyout, so the two must agree on the exact frame.
+ * and submenu sheet, so the two must agree on the exact frame.
  */
 class YuwSidebarRailService {
     constructor() {
@@ -4427,13 +4467,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * (`'default'`, `'sm'`, `'lg'`) and `isActive`.
  *
  * `tooltip` labels the item while the sidebar is collapsed to icons, where the label itself is
- * hidden; the composed primitive shows it only in that state, and only for entries with no flyout of
- * their own — an entry with children opens its submenu on the same hover instead.
+ * hidden; the composed primitive shows it only in that state. Every entry gets one, including those
+ * with children — their submenu opens on click, so it never competes with the hover.
  *
  * Reaching that input takes composing `BrnTooltip` here under the same `tooltip` alias the helm uses,
  * rather than forwarding it. `HlmSidebarMenuButton` publishes the alias on its own `hostDirectives`
  * entry, which does not make it an input of the helm directive — a forward cannot be re-forwarded, the
- * same limit `[yuwSidebarFlyoutTrigger]` runs into. Angular resolves both entries to the one
+ * same limit `context-menu.directives.ts` documents. Angular resolves both entries to the one
  * `BrnTooltip` instance on the element, so the helm keeps driving `mutableTooltipDisabled` (which is
  * what confines the tooltip to the collapsed state) while this binding supplies its content.
  *
@@ -4460,7 +4500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *   shrink-to-fit for the whole width animation — long enough for the label to stop ellipsing and
  *   the trailing chevron to sit against it.
  * - `[&>span]:hidden` drops the label while collapsed, leaving the icon alone — the tooltip carries
- *   the name in that state, or the flyout does for an entry with children. Matched by element rather
+ *   the name in that state. Matched by element rather
  *   than by `:last-child` (which is what the helm's own `truncate` uses): an expandable entry ends
  *   with a trailing chevron, so the label is no longer the last child and a positional selector
  *   would skip exactly those entries. `span` is unambiguous here — the label is the only one a menu
@@ -4555,179 +4595,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] }],
                 }]
         }], ctorParameters: () => [] });
-/**
- * Host of a collapsed-state flyout: the element that scopes the overlay for one entry. Apply
- * alongside `[yuwSidebarMenuItem]` on the `<li>` holding the entry and its panel.
- *
- * Provides `BrnHoverCardContentService` itself instead of composing `HlmHoverCard`. The service has
- * to be scoped per `<li>` — it holds the single overlay and its content, so a shared one would have
- * every entry in the sidebar fighting over the same panel — and providing it here is all that is
- * needed for that. What `HlmHoverCard` adds on top is a `contentChild` pairing that assigns the
- * trigger's content in `ngAfterContentInit`, and that pairing is actively harmful here: it writes
- * into the same writable signal the trigger's own input feeds, so its one-time value outlives and
- * overrides the binding that is supposed to turn the flyout off while the sidebar is expanded.
- */
-class YuwSidebarFlyoutHostDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFlyoutHostDirective, isStandalone: true, selector: "[yuwSidebarFlyoutHost]", providers: [BrnHoverCardContentService], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutHostDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwSidebarFlyoutHost]',
-                    providers: [BrnHoverCardContentService],
-                }]
-        }] });
-/**
- * The entry whose hover opens a flyout. Apply to the same element as `[yuwSidebarMenuButton]`, bound
- * to the panel's `<ng-template>` reference — or to `undefined` to switch the flyout off entirely,
- * which is how an expanded sidebar keeps its submenus inline.
- *
- * Drives `BrnHoverCardContentService` directly instead of composing `BrnHoverCardTrigger`. The brain
- * trigger has no way to be turned off once it has run: it feeds the panel to the service through an
- * effect that ignores falsy values, and the service's `show()` consults only its stored content, so
- * a trigger that was ever enabled keeps opening its overlay forever. Rebinding to `undefined` cannot
- * undo it, and neither can `hide()`, which detaches the overlay but leaves the content in place.
- * Owning the wiring here is what makes an unbound panel mean "inert".
- *
- * The `effect` is the whole lifecycle: it runs when a panel arrives, and its `onCleanup` closes the
- * overlay and drops the subscription when the panel goes away or the entry is destroyed. Nothing
- * else tracks teardown, which is why there is no `DestroyRef` or `takeUntilDestroyed` here — a second
- * mechanism would only be able to disagree with this one.
- *
- * Delays are read inside `switchMap` rather than captured when the effect runs, so retuning them
- * does not tear down and rebuild the subscription.
- *
- * `distinctUntilChanged` before the timer is load-bearing, and not as an optimisation: the five
- * merged sources overlap, so crossing from the entry to the panel emits a `mouseleave` and the
- * panel's own hover almost together, and `mouseenter` and `focusin` both fire on the same pointer
- * arriving. Each duplicate would restart `switchMap` and cancel the timer already in flight, so a
- * repeat during the show delay could keep the panel from ever opening.
- *
- * It cannot dedupe the crossing itself, though — that genuinely alternates `false` then `true`, so
- * both values are distinct and both survive. `toggle` is therefore guarded against the state it is
- * already in, because `show()` is not idempotent: it calls `detach()` then `attach()`, tearing the
- * panel down and rebuilding it. Re-showing an open panel replays its enter animation, which is the
- * flicker you get when the pointer moves from the rail into the flyout.
- *
- * Note there is no click handling. `BrnHoverCardTrigger` maps a click to `false`, which is right for
- * a hover card — clicking the trigger dismisses it — and wrong for a nav rail, where the entry's own
- * click has nothing to collapse while collapsed and closing the panel would take away the links the
- * pointer is travelling to. Activating a child closes the flyout anyway, since the pointer leaves
- * the panel as the page changes.
- *
- * `align` is `'right'` for a sidebar flyout rather than the hover card's own `'bottom'`. It is set as
- * an input rather than through `provideBrnHoverCardDefaultOptions` because that provider types its
- * `align` as `'top' | 'bottom'`, even though the position map handles all four sides.
- */
-class YuwSidebarFlyoutTriggerDirective {
-    constructor() {
-        this.element = inject(ElementRef);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.service = inject(BrnHoverCardContentService);
-        this.panel = input(undefined, { ...(ngDevMode ? { debugName: "panel" } : /* istanbul ignore next */ {}), alias: 'yuwSidebarFlyoutTrigger' });
-        this.align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.showDelay = input(120, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.hideDelay = input(300, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.pointerOver = merge(fromEvent(this.element.nativeElement, 'mouseenter').pipe(map(() => true)), fromEvent(this.element.nativeElement, 'mouseleave').pipe(map(() => false)), fromEvent(this.element.nativeElement, 'focusin').pipe(map(() => true)), fromEvent(this.element.nativeElement, 'focusout').pipe(map(() => false)), this.service.hovered$);
-        effect((onCleanup) => {
-            const panel = this.panel();
-            if (!panel)
-                return;
-            this.service.setConfig({
-                attachTo: this.element,
-                align: this.align(),
-                sideOffset: this.sideOffset(),
-            });
-            this.service.setContent(panel, this.viewContainerRef);
-            const subscription = this.pointerOver
-                .pipe(distinctUntilChanged(), switchMap$1((visible) => timer(visible ? this.showDelay() : this.hideDelay()).pipe(map(() => visible))))
-                .subscribe((visible) => this.toggle(visible));
-            onCleanup(() => {
-                subscription.unsubscribe();
-                this.toggle(false);
-            });
-        });
-    }
-    toggle(open) {
-        if (open === (this.service.state() === 'open'))
-            return;
-        this.service.setState(open ? 'open' : 'closed');
-        if (open) {
-            this.service.show();
-            return;
-        }
-        this.service.hide();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: YuwSidebarFlyoutTriggerDirective, isStandalone: true, selector: "[yuwSidebarFlyoutTrigger]", inputs: { panel: { classPropertyName: "panel", publicName: "yuwSidebarFlyoutTrigger", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwSidebarFlyoutTrigger]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwSidebarFlyoutTrigger", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
-/**
- * Marks the `<ng-template>` holding a flyout's markup, and is what `[yuwSidebarFlyoutTrigger]` is
- * bound to. Exported as `yuwSidebarFlyoutPanel` so the template can name it.
- *
- * Structural — the composed primitive injects the `TemplateRef`, which is what lets the panel be
- * portalled into a CDK overlay instead of rendering inside the rail.
- *
- * The trigger is bound to the template's own `#ref` (a `TemplateRef`, which its input accepts), so
- * this directive is never referenced by name — but it cannot be dropped: it is the sole provider of
- * the exposed state and side tokens that `[yuwSidebarFlyout]` injects from its host, and without it
- * the panel throws NG0201 the moment the overlay instantiates it.
- */
-class YuwSidebarFlyoutPanelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFlyoutPanelDirective, isStandalone: true, selector: "ng-template[yuwSidebarFlyoutPanel]", hostDirectives: [{ directive: i2$1.HlmHoverCardPortal }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutPanelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[yuwSidebarFlyoutPanel]',
-                    hostDirectives: [HlmHoverCardPortal],
-                }]
-        }] });
-/**
- * The flyout's visible surface. Apply to the single root element inside a `[yuwSidebarFlyoutPanel]`
- * template.
- *
- * Separate from the panel marker because the two sit on different nodes: the marker is the
- * `<ng-template>`, this is the element the overlay renders. Carries the popover surface of the
- * composed helm content plus `yuwSidebarFlyoutClass`.
- *
- * That class layer exists because the panel lives in the overlay, outside the sidebar's DOM subtree,
- * and so is no longer a descendant of the `group/sidebar-wrapper` element. Every
- * `group-data-[collapsible=…]` selector therefore resolves against nothing and stays inert —
- * including the `hidden` that `HlmSidebarMenuSub` and `HlmSidebarMenuSubButton` apply to themselves
- * in exactly this state, which is why the submenu markup renders visible in here with no override.
- * What the layer undoes instead is the indentation and vertical rule those primitives carry for the
- * inline case, which make no sense in a panel.
- *
- * The gap between rail and panel is that layer's `ms-2`, not the trigger's `sideOffset`, which is
- * deliberately `0`. An offset moves the overlay away from the trigger and leaves dead space between
- * them: crossing it slowly means the pointer is over neither element, and the hover card closes
- * mid-journey. A margin keeps the same visual gap inside the overlay's own box, so the pointer never
- * leaves the hover target on its way in.
- */
-class YuwSidebarFlyoutDirective {
-    constructor() {
-        classes(() => yuwSidebarFlyoutClass);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarFlyoutDirective, isStandalone: true, selector: "[yuwSidebarFlyout]", hostDirectives: [{ directive: i2$1.HlmHoverCardContent }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFlyoutDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuwSidebarFlyout]',
-                    hostDirectives: [HlmHoverCardContent],
-                }]
-        }], ctorParameters: () => [] });
 /** Divider between sidebar sections. */
 class YuwSidebarSeparatorDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4775,11 +4642,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
-const CARET_RIGHT_BORDER_CLASSES = `
-  border-l-4 border-t-4 border-t-transparent border-r-0
-  border-b-4 border-b-transparent -right-[4.5px] border-[var(--sidebar-foreground)]
-  absolute transition-opacity
-`;
+/**
+ * Holds which rail entry's submenu the collapsed sidebar is showing. Provided on `<yuw-sidebar>`, so
+ * two sidebars on a page don't drive each other.
+ *
+ * `renderedItem` lags `activeItem` by one close: the sheet renders from it so its markup outlives the
+ * close and the panel can animate out. Swapping entries never writes `null`, which would detach the
+ * overlay and replay the open animation. Matching is by `id` — the nav rebuilds these objects.
+ */
+class YuwSidebarSubmenuService {
+    constructor() {
+        this.item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        this.lastItem = signal(null, ...(ngDevMode ? [{ debugName: "lastItem" }] : /* istanbul ignore next */ []));
+        this.activeItem = this.item.asReadonly();
+        this.renderedItem = this.lastItem.asReadonly();
+        this.open = computed(() => this.item() !== null, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    }
+    toggle(item) {
+        const next = this.item()?.id === item.id ? null : item;
+        this.item.set(next);
+        if (next)
+            this.lastItem.set(next);
+    }
+    close() {
+        this.item.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSubmenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSubmenuService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSubmenuService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Renders one {@link YuwSidebarContentDto} as the group/menu/item tree.
  *
@@ -4793,19 +4687,27 @@ const CARET_RIGHT_BORDER_CLASSES = `
  * `group-data-[collapsible=icon]:` selectors — which resolve against the sidebar root — working
  * identically for object-rendered and hand-written markup.
  *
- * An entry with `children` renders its submenu two ways, one per sidebar state. Expanded, it is an
- * accordion: the entry carries `aria-expanded` and the submenu is nested beneath it. Collapsed to
- * icons, where there is no room for either the label or the nesting, the same submenu moves into a
- * hover flyout beside the rail. Both are always in the template — the sidebar's own state decides
- * which one is live, so nothing has to be re-created when the user toggles the rail.
- *
- * A click on such an entry toggles the accordion while the panel is open. When the entry also has a
- * `route` or an `href` it navigates *and* toggles, which is why an active one keeps its pointer
- * events instead of being locked like a childless active entry; when it has neither, toggling is all
- * it does and it stays out of `itemClicked`, since opening a submenu is not an action for the
- * consumer to handle. Collapsed to a rail the click does nothing at all: there is no inline submenu
- * to fold there, and toggling would mutate state the user cannot see while closing the panel they
- * are aiming at.
+ * An entry with `children` shows its submenu two ways, one per sidebar state. Expanded, it is an
+ * accordion rendered here: the entry carries `aria-expanded` and the submenu is nested beneath it.
+ * Collapsed to icons, where there is no room for either the label or the nesting, it moves into the
+ * sheet beside the rail — which this component does not own. `<yuw-sidebar>` renders one sheet and
+ * this component only reports, through `YuwSidebarSubmenuService`, which entry the user picked. It
+ * cannot own the panel itself: `<yuw-sidebar>` instantiates this component twice, once for `content`
+ * and once for `footer`, so a sheet in here would be two sheets fighting over one screen position.
+ *
+ * Such an entry also opts out of the helm's close-the-mobile-sheet-on-click behaviour, which every
+ * other entry keeps. On mobile the sidebar *is* a sheet, and that behaviour assumes a click means
+ * "I have navigated, take this away" — true of a leaf, false of an accordion header, whose click only
+ * unfolds a submenu inside the very panel it would be dismissing. Its children still close it, since
+ * activating one of those really is the navigation the panel was opened for.
+ *
+ * A click on such an entry toggles the accordion while the panel is open, and opens the sheet on that
+ * entry once collapsed — the same gesture either way, differing only in where the submenu appears.
+ * Clicking the entry the sheet is already showing closes it; clicking a different one swaps the
+ * sheet's contents. When the entry also has a `route` or an `href` it navigates *and* toggles, which
+ * is why an active one keeps its pointer events instead of being locked like a childless active
+ * entry; when it has neither, toggling is all it does and it stays out of `itemClicked`, since
+ * opening a submenu is not an action for the consumer to handle.
  *
  * The chevron marking an expandable entry rotates off that same `aria-expanded`, read from the
  * button through the `group/menu-button` the helm already declares on every menu button. Its
@@ -4818,11 +4720,11 @@ const CARET_RIGHT_BORDER_CLASSES = `
  * Which of the two forms is live comes from `isRail`, and all three of its conditions are
  * load-bearing. `collapsible` must be `'icon'`, the only mode that leaves a narrow rail behind:
  * `'offcanvas'` moves the whole panel off-screen and `'none'` never collapses, yet the service
- * reports `state() === 'collapsed'` for both — reading the state alone puts a flyout on a sidebar
- * sitting there at full width. It must not be mobile, where the panel is a full-width sheet showing
- * the accordion. And the collapse must have finished animating, which is what `railSettled` waits
- * for: swapping the accordion for a flyout while the panel is still wide would tear the submenu out
- * from under the pointer mid-transition. That same settled signal drives the rail's own styling, so
+ * reports `state() === 'collapsed'` for both — reading the state alone opens the sheet beside a
+ * sidebar sitting there at full width. It must not be mobile, where the panel is a full-width sheet
+ * showing the accordion. And the collapse must have finished animating, which is what `railSettled`
+ * waits for: switching to the sheet while the panel is still wide would leave it overlapping the very
+ * sidebar it is supposed to sit beside. That same settled signal drives the rail's own styling, so
  * the geometry and the submenu form always change on the same frame.
  *
  * The accordion opens and closes over a grid-rows transition rather than by appearing outright, which
@@ -4857,8 +4759,8 @@ const CARET_RIGHT_BORDER_CLASSES = `
  * `routerLinkActiveOptions` a stable object identity: a literal in the template
  * (`[routerLinkActiveOptions]="{exact: item.exact ?? false}"`) allocates a new object on every
  * change-detection pass, and `RouterLinkActive` treats that as a changed input and re-runs its
- * subscription. An entry with children resolves no tooltip at all — the flyout already labels it
- * while collapsed, and a tooltip would fire on the same hover at the same screen position.
+ * subscription. Every entry resolves a tooltip, entries with children included: the submenu opens on
+ * click, so hover is free to do what it does for every other rail icon and name the thing.
  */
 class YuwSidebarNavComponent {
     constructor() {
@@ -4866,15 +4768,14 @@ class YuwSidebarNavComponent {
         this.injector = inject(Injector);
         this.sidebarService = inject(HlmSidebarService);
         this.rail = inject(YuwSidebarRailService);
+        this.submenu = inject(YuwSidebarSubmenuService);
         this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         this.itemClicked = output();
         this.activeRoutes = new Map();
         this.chevronClass = yuwSidebarMenuChevronClass;
-        this.flyoutLabelClass = yuwSidebarFlyoutLabelClass;
         this.badgeClass = yuwSidebarMenuBadgeClass;
         this.groupLabelTextClass = yuwSidebarGroupLabelTextClass;
-        this.caretRightBorderClasses = CARET_RIGHT_BORDER_CLASSES;
         this.isRail = computed(() => this.collapsible() === 'icon' && !this.sidebarService.isMobile() && this.rail.railSettled(), ...(ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []));
         this.expandedIds = linkedSignal({ ...(ngDevMode ? { debugName: "expandedIds" } : /* istanbul ignore next */ {}), source: () => ({ content: this.content(), rail: this.isRail() }),
             computation: ({ content, rail }, previous) => rail || previous
@@ -4896,7 +4797,7 @@ class YuwSidebarNavComponent {
                         ...item,
                         children,
                         hasChildren,
-                        tooltipText: hasChildren ? null : (item.tooltip ?? item.label),
+                        tooltipText: item.tooltip ?? item.label,
                         activeOptions: { exact: item.exact ?? false },
                         expanded,
                         submenuClass: `${yuwSidebarSubmenuWrapperClass} ${expanded ? yuwSidebarSubmenuOpenClass : yuwSidebarSubmenuClosedClass}`,
@@ -4923,20 +4824,22 @@ class YuwSidebarNavComponent {
     onItemClick(id, event) {
         this.itemClicked.emit({ id, event });
     }
-    onParentClick(id, expanded) {
-        if (this.isRail())
+    onParentClick(item, expanded) {
+        if (this.isRail()) {
+            this.submenu.toggle(item);
             return;
+        }
         this.expandedIds.update((ids) => {
             const next = new Set(ids);
             if (expanded)
-                next.delete(id);
+                next.delete(item.id);
             else
-                next.add(id);
+                next.add(item.id);
             return next;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem yuwSidebarFlyoutHost>\n            <ng-template yuwSidebarFlyoutPanel #panel>\n              <div yuwSidebarFlyout>\n                <span [class]=\"flyoutLabelClass\">{{ item.label }}</span>\n                <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            </ng-template>\n\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"item.hasChildren ? onParentClick(item.id, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                  <div\n                    [class]=\"caretRightBorderClasses\"\n                    [class.opacity-100]=\"isRail()\"\n                    [class.opacity-0]=\"!isRail()\"\n                  ></div>\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }, { kind: "directive", type: YuwSidebarFlyoutHostDirective, selector: "[yuwSidebarFlyoutHost]" }, { kind: "directive", type: YuwSidebarFlyoutPanelDirective, selector: "ng-template[yuwSidebarFlyoutPanel]" }, { kind: "directive", type: YuwSidebarFlyoutTriggerDirective, selector: "[yuwSidebarFlyoutTrigger]", inputs: ["yuwSidebarFlyoutTrigger", "align", "sideOffset", "showDelay", "hideDelay"] }, { kind: "directive", type: YuwSidebarFlyoutDirective, selector: "[yuwSidebarFlyout]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
             type: Component,
@@ -4957,15 +4860,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarMenuSubItemDirective,
                         YuwSidebarMenuSubButtonDirective,
                         YuwSidebarSeparatorDirective,
-                        YuwSidebarFlyoutHostDirective,
-                        YuwSidebarFlyoutPanelDirective,
-                        YuwSidebarFlyoutTriggerDirective,
-                        YuwSidebarFlyoutDirective,
                     ], providers: [provideIcons({ lucideChevronRight })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem yuwSidebarFlyoutHost>\n            <ng-template yuwSidebarFlyoutPanel #panel>\n              <div yuwSidebarFlyout>\n                <span [class]=\"flyoutLabelClass\">{{ item.label }}</span>\n                <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            </ng-template>\n\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"item.hasChildren ? onParentClick(item.id, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                  <div\n                    [class]=\"caretRightBorderClasses\"\n                    [class.opacity-100]=\"isRail()\"\n                    [class.opacity-0]=\"!isRail()\"\n                  ></div>\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem>\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                (click)=\"onParentClick(item, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                (click)=\"onParentClick(item, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                [closeMobileSidebarOnClick]=\"!item.hasChildren\"\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                (click)=\"item.hasChildren ? onParentClick(item, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
+/**
+ * The one submenu panel of a collapsed sidebar, showing whatever `YuwSidebarSubmenuService` holds.
+ * Lives here rather than in `YuwSidebarNavComponent`, which `<yuw-sidebar>` instantiates twice.
+ *
+ * The rail width is re-declared as `--yuw-sidebar-rail-width` on the CDK overlay *container*: the
+ * overlay is portalled out of the wrapper that owns `--sidebar-width-icon`, and the panel and
+ * backdrop are siblings there that both need it. It is read off the live wrapper because
+ * `[sidebarWidthIcon]` overrides the config without writing back to it.
+ *
+ * Not `aria-modal`, and scroll is left alone: the rail stays live behind the dim.
+ */
+class YuwSidebarSubmenuSheetComponent {
+    constructor() {
+        this.config = injectHlmSidebarConfig();
+        this.rail = inject(YuwSidebarRailService);
+        this.host = inject(ElementRef);
+        this.overlayContainer = inject(OverlayContainer);
+        this._submenu = inject(YuwSidebarSubmenuService);
+        this.itemClicked = output();
+        this.panelClass = yuwSidebarSubmenuSheetClass;
+        this.overlayClass = yuwSidebarSubmenuOverlayClass;
+        this.bodyClass = yuwSidebarSubmenuSheetBodyClass;
+        this.labelClass = yuwSidebarSubmenuSheetLabelClass;
+        this._item = this._submenu.renderedItem;
+        this._activeOptions = computed(() => Object.fromEntries((this._item()?.children ?? []).map((child) => [child.id, { exact: child.exact ?? false }])), ...(ngDevMode ? [{ debugName: "_activeOptions" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            if (this.rail.railSettled())
+                return;
+            this._submenu.close();
+        });
+        effect(() => {
+            if (!this._submenu.open())
+                return;
+            this.overlayContainer.getContainerElement().style.setProperty(YUW_SIDEBAR_RAIL_WIDTH_VAR, this.railWidth());
+        });
+    }
+    railWidth() {
+        const wrapper = this.host.nativeElement.closest('[data-slot=sidebar-wrapper]');
+        const resolved = wrapper ? getComputedStyle(wrapper).getPropertyValue('--sidebar-width-icon').trim() : '';
+        return resolved || this.config.sidebarWidthIcon;
+    }
+    onOpenChange(open) {
+        if (open)
+            return;
+        this._submenu.close();
+    }
+    onChildClick(id, event) {
+        this._submenu.close();
+        this.itemClicked.emit({ id, event });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSubmenuSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarSubmenuSheetComponent, isStandalone: true, selector: "yuw-sidebar-submenu-sheet", outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@if (_item(); as item) {\n  <yuw-sheet\n    side=\"left\"\n    [open]=\"_submenu.open()\"\n    (openChange)=\"onOpenChange($event)\"\n    [showTrigger]=\"false\"\n    [ariaLabel]=\"item.label\"\n    [panelClass]=\"panelClass\"\n    [overlayClass]=\"overlayClass\"\n    [ariaModal]=\"false\"\n    scrollStrategy=\"reposition\"\n  >\n    <div [class]=\"bodyClass\">\n      <span [class]=\"labelClass\">{{ item.label }}</span>\n\n      <ul yuwSidebarMenuSub>\n        @for (child of item.children; track child.id) {\n          <li yuwSidebarMenuSubItem>\n            @if (child.route) {\n              <a\n                yuwSidebarMenuSubButton\n                [routerLink]=\"child.route\"\n                routerLinkActive\n                #childLink=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"_activeOptions()[child.id]\"\n                [isActive]=\"childLink.isActive\"\n                [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n                (click)=\"_submenu.close()\"\n              >\n                <span>{{ child.label }}</span>\n              </a>\n            } @else if (child.href) {\n              <a\n                yuwSidebarMenuSubButton\n                [href]=\"child.href\"\n                [attr.target]=\"child.target\"\n                [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"child.disabled\"\n                (click)=\"_submenu.close()\"\n              >\n                <span>{{ child.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuSubButton\n                type=\"button\"\n                [disabled]=\"child.disabled ?? false\"\n                (click)=\"onChildClick(child.id, $event)\"\n              >\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </yuw-sheet>\n}\n", dependencies: [{ kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["open", "showTrigger", "side", "title", "description", "ariaLabel", "closeLabel", "panelClass", "overlayClass", "scrollStrategy", "ariaModal", "closeOnOutsidePointerEvents", "triggerVariant", "triggerSize"], outputs: ["openChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarSubmenuSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-sidebar-submenu-sheet', imports: [
+                        YuwSheetComponent,
+                        RouterLink,
+                        RouterLinkActive,
+                        YuwSidebarMenuSubDirective,
+                        YuwSidebarMenuSubItemDirective,
+                        YuwSidebarMenuSubButtonDirective,
+                    ], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_item(); as item) {\n  <yuw-sheet\n    side=\"left\"\n    [open]=\"_submenu.open()\"\n    (openChange)=\"onOpenChange($event)\"\n    [showTrigger]=\"false\"\n    [ariaLabel]=\"item.label\"\n    [panelClass]=\"panelClass\"\n    [overlayClass]=\"overlayClass\"\n    [ariaModal]=\"false\"\n    scrollStrategy=\"reposition\"\n  >\n    <div [class]=\"bodyClass\">\n      <span [class]=\"labelClass\">{{ item.label }}</span>\n\n      <ul yuwSidebarMenuSub>\n        @for (child of item.children; track child.id) {\n          <li yuwSidebarMenuSubItem>\n            @if (child.route) {\n              <a\n                yuwSidebarMenuSubButton\n                [routerLink]=\"child.route\"\n                routerLinkActive\n                #childLink=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"_activeOptions()[child.id]\"\n                [isActive]=\"childLink.isActive\"\n                [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n                (click)=\"_submenu.close()\"\n              >\n                <span>{{ child.label }}</span>\n              </a>\n            } @else if (child.href) {\n              <a\n                yuwSidebarMenuSubButton\n                [href]=\"child.href\"\n                [attr.target]=\"child.target\"\n                [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n                [class.pointer-events-none]=\"child.disabled\"\n                (click)=\"_submenu.close()\"\n              >\n                <span>{{ child.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuSubButton\n                type=\"button\"\n                [disabled]=\"child.disabled ?? false\"\n                (click)=\"onChildClick(child.id, $event)\"\n              >\n                <span>{{ child.label }}</span>\n              </button>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </yuw-sheet>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
 /**
  * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
  * mobile, and reads its colors from the `--sidebar-*` theme tokens.
@@ -4985,8 +4951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *   `[routerLink]` anchor whose active state, `aria-current` and pointer-lock resolve automatically
  *   from `routerLinkActive`; one with an `href` becomes a plain anchor; one with neither becomes a
  *   button that reports through `itemClicked`. An item with `children` gets a submenu that follows
- *   the sidebar's own state: an accordion while the panel is open, and a hover flyout to the side
- *   once it is collapsed to icons, so nested entries stay reachable from the rail. Its `expanded`
+ *   the sidebar's own state: an accordion while the panel is open, and a sheet sliding out beside the
+ *   rail once it is collapsed to icons, so nested entries stay reachable there. Its `expanded`
  *   field seeds the accordion; the item holding the active route opens on its own.
  * - `footer`: The same, rendered into the footer region.
  *
@@ -5008,6 +4974,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * content area's flex sizing — mark it `[yuwSidebarContentExtra]` or `[yuwSidebarFooterExtra]`; the
  * default slot keeps everything else, so existing projection-only usage is unaffected.
  *
+ * With `collapsible="icon"` the component also renders a single submenu sheet, shared by every entry
+ * that has `children` in either region. It is one panel rather than one per entry because a sheet is a
+ * modal overlay: several would compete for the same screen position, and only one submenu is ever on
+ * screen anyway.
+ *
  * `header` has no object form: it is a free-form branding area with no repeating structure to model.
  *
  * Deliberately not exposed from the helm sidebar (add a wrapper only when a real consumer needs
@@ -5067,19 +5038,20 @@ class YuwSidebarComponent {
         this.railSettledChange = outputFromObservable(toObservable(this._rail.railSettled).pipe(distinctUntilChanged()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange", railSettledChange: "railSettledChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content", "collapsible"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange", railSettledChange: "railSettledChange" }, host: { classAttribute: "contents" }, providers: [YuwSidebarSubmenuService], ngImport: i0, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n\n@if (collapsible() === 'icon') {\n  <yuw-sidebar-submenu-sheet (itemClicked)=\"itemClicked.emit($event)\" />\n}\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content", "collapsible"], outputs: ["itemClicked"] }, { kind: "component", type: YuwSidebarSubmenuSheetComponent, selector: "yuw-sidebar-submenu-sheet", outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar', imports: [
                         HlmSidebar,
                         YuwSidebarNavComponent,
+                        YuwSidebarSubmenuSheetComponent,
                         YuwSidebarContentDirective,
                         YuwSidebarFooterDirective,
                         YuwSidebarSeparatorDirective,
                     ], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n" }]
+                    }, providers: [YuwSidebarSubmenuService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n\n@if (collapsible() === 'icon') {\n  <yuw-sidebar-submenu-sheet (itemClicked)=\"itemClicked.emit($event)\" />\n}\n" }]
         }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], railSettledChange: [{ type: i0.Output, args: ["railSettledChange"] }] } });
 
 /**
@@ -5117,5 +5089,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFlyoutDirective, YuwSidebarFlyoutHostDirective, YuwSidebarFlyoutPanelDirective, YuwSidebarFlyoutTriggerDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map