yukit-web 0.0.6 → 0.0.8

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 } 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 { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
@@ -39,7 +39,7 @@ import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction
 import * as i1$9 from 'yukit-web/helm/empty';
 import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
 import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
-import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
+import { outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$a from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
 import * as i1$b from 'yukit-web/helm/date-picker';
@@ -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 } from 'rxjs';
+import { skip, switchMap, timer, of, merge, fromEvent } 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';
@@ -81,10 +81,14 @@ 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 * as i1$q from 'yukit-web/helm/sidebar';
-import { 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';
+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 { RouterLink, RouterLinkActive } from '@angular/router';
+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';
 
 /**
  * Merges class lists the shadcn/Spartan way: `clsx` resolves conditionals/arrays, `twMerge`
@@ -2826,8 +2830,36 @@ class YuwDatatableComponent {
         this.columnVisibility = model({}, ...(ngDevMode ? [{ debugName: "columnVisibility" }] : /* istanbul ignore next */ []));
         this.rowSelection = model({}, ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
         this.pagination = model({ pageIndex: 0, pageSize: 10 }, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        this.rowClicked = output();
+        this._ariaSort = {
+            asc: 'ascending',
+            desc: 'descending',
+        };
+        this._sortIcon = {
+            asc: 'lucideChevronUp',
+            desc: 'lucideChevronDown',
+            none: 'lucideChevronsUpDown',
+        };
         this.currentPage = linkedSignal({ ...(ngDevMode ? { debugName: "currentPage" } : /* istanbul ignore next */ {}), source: () => this.pagination().pageIndex,
             computation: (pageIndex) => pageIndex + 1 });
+        this._isEmpty = computed(() => !this.loading() && this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
+        this._columnCount = computed(() => this.table.getVisibleLeafColumns().length, ...(ngDevMode ? [{ debugName: "_columnCount" }] : /* istanbul ignore next */ []));
+        this._skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_skeletonRows" }] : /* istanbul ignore next */ []));
+        this._tableClass = computed(() => cn(this.tableClass()), ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
+        this._containerClass = computed(() => datatableContainerVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+        this._headClass = computed(() => datatableHeadVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_headClass" }] : /* istanbul ignore next */ []));
+        this._rowClass = computed(() => datatableRowVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_rowClass" }] : /* istanbul ignore next */ []));
+        this._cellClasses = computed(() => {
+            const header = datatableHeaderCellVariants({ appearance: this.appearance() });
+            const cell = datatableCellVariants({ appearance: this.appearance() });
+            return new Map(this.columns().map((column, index) => {
+                const align = DATATABLE_ALIGN_CLASS[column.meta?.align ?? 'start'];
+                return [
+                    column.id ?? ('accessorKey' in column ? String(column.accessorKey) : String(index)),
+                    { header: cn(header, align), cell: cn(cell, align) },
+                ];
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_cellClasses" }] : /* istanbul ignore next */ []));
         this._options = () => ({
             features: {
                 ...YUW_DATATABLE_FEATURES,
@@ -2858,37 +2890,6 @@ class YuwDatatableComponent {
             return this.table.getSelectedRowModel().rows.map((row) => row.original);
         }, ...(ngDevMode ? [{ debugName: "_selectedRows" }] : /* istanbul ignore next */ []));
         this.selectedRowsChange = outputFromObservable(toObservable(this._selectedRows).pipe(skip(1)));
-        this._isEmpty = computed(() => !this.loading() && this.table.getRowModel().rows.length === 0, ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
-        this._columnCount = computed(() => this.table.getVisibleLeafColumns().length, ...(ngDevMode ? [{ debugName: "_columnCount" }] : /* istanbul ignore next */ []));
-        this._skeletonRows = computed(() => Array.from({ length: this.loadingRows() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_skeletonRows" }] : /* istanbul ignore next */ []));
-        this._tableClass = computed(() => cn(this.tableClass()), ...(ngDevMode ? [{ debugName: "_tableClass" }] : /* istanbul ignore next */ []));
-        this._containerClass = computed(() => datatableContainerVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
-        this._headClass = computed(() => datatableHeadVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_headClass" }] : /* istanbul ignore next */ []));
-        this._rowClass = computed(() => datatableRowVariants({ appearance: this.appearance() }), ...(ngDevMode ? [{ debugName: "_rowClass" }] : /* istanbul ignore next */ []));
-        this._cellClasses = computed(() => {
-            const header = datatableHeaderCellVariants({ appearance: this.appearance() });
-            const cell = datatableCellVariants({ appearance: this.appearance() });
-            return new Map(this.columns().map((column, index) => {
-                const align = DATATABLE_ALIGN_CLASS[column.meta?.align ?? 'start'];
-                return [
-                    column.id ?? ('accessorKey' in column ? String(column.accessorKey) : String(index)),
-                    { header: cn(header, align), cell: cn(cell, align) },
-                ];
-            }));
-        }, ...(ngDevMode ? [{ debugName: "_cellClasses" }] : /* istanbul ignore next */ []));
-        this._ariaSort = {
-            asc: 'ascending',
-            desc: 'descending',
-        };
-        this._sortIcon = {
-            asc: 'lucideChevronUp',
-            desc: 'lucideChevronDown',
-            none: 'lucideChevronsUpDown',
-        };
-    }
-    /** Translates a 1-based page from `<yuw-pagination>` back into TanStack's zero-based state. */
-    onPageChange(page) {
-        this.pagination.update((current) => ({ ...current, pageIndex: page - 1 }));
     }
     /**
      * Applies the real options once, after inputs are set.
@@ -2908,15 +2909,61 @@ class YuwDatatableComponent {
         const options = this._options();
         this.table.setOptions((previous) => ({ ...previous, ...options }));
     }
+    onPageChange(page) {
+        this.pagination.update((current) => ({ ...current, pageIndex: page - 1 }));
+    }
+    onRowClick(row) {
+        this.rowClicked.emit(row);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { 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: YuwDatatableComponent, isStandalone: true, selector: "yuw-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingRows: { classPropertyName: "loadingRows", publicName: "loadingRows", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: true, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: true, transformFunction: null }, paginationEllipsisSrText: { classPropertyName: "paginationEllipsisSrText", publicName: "paginationEllipsisSrText", isSignal: true, isRequired: true, transformFunction: null }, paginationAriaLabel: { classPropertyName: "paginationAriaLabel", publicName: "paginationAriaLabel", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, sorting: { classPropertyName: "sorting", publicName: "sorting", isSignal: true, isRequired: false, transformFunction: null }, columnFilters: { classPropertyName: "columnFilters", publicName: "columnFilters", isSignal: true, isRequired: false, transformFunction: null }, columnVisibility: { classPropertyName: "columnVisibility", publicName: "columnVisibility", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorting: "sortingChange", columnFilters: "columnFiltersChange", columnVisibility: "columnVisibilityChange", rowSelection: "rowSelectionChange", pagination: "paginationChange", rowClicked: "rowClicked", selectedRowsChange: "selectedRowsChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], ngImport: i0, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClass()\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            (click)=\"onRowClick(row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: YuwTableContainerDirective, selector: "[yuwTableContainer]" }, { kind: "directive", type: YuwTableDirective, selector: "[yuwTable]" }, { kind: "directive", type: YuwTHeadDirective, selector: "[yuwTHead]" }, { kind: "directive", type: YuwTBodyDirective, selector: "[yuwTBody]" }, { kind: "directive", type: YuwTrDirective, selector: "[yuwTr]" }, { kind: "directive", type: YuwThDirective, selector: "[yuwTh]" }, { kind: "directive", type: YuwTdDirective, selector: "[yuwTd]" }, { kind: "directive", type: YuwCaptionDirective, selector: "[yuwCaption]" }, { kind: "component", type: YuwPaginationComponent, selector: "yuw-pagination", inputs: ["page", "totalPages", "previousLabel", "nextLabel", "ellipsisSrText", "size", "color", "ariaLabel"], outputs: ["pageChange"] }, { kind: "directive", type: YuwSkeletonDirective, selector: "[yuwSkeleton]" }, { kind: "directive", type: FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { 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: YuwDatatableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-datatable', imports: [...YuwTableImports, YuwPaginationComponent, YuwSkeletonDirective, FlexRenderDirective, NgIcon], providers: [provideIcons({ lucideChevronDown, lucideChevronUp, lucideChevronsUpDown })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr yuwTr [class]=\"_rowClass()\" [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\">\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\n    </div>\n  </div>\n}\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div yuwTableContainer [class]=\"_containerClass()\">\n  <table yuwTable [class]=\"_tableClass()\">\n    @if (caption()) {\n      <caption yuwCaption>{{ caption() }}</caption>\n    }\n\n    <thead yuwTHead [class]=\"_headClass()\">\n      @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          @for (header of headerGroup.headers; track header.id) {\n            @let sorted = header.column.getIsSorted();\n            <th\n              yuwTh\n              scope=\"col\"\n              [attr.colspan]=\"header.colSpan\"\n              [attr.aria-sort]=\"sorted ? _ariaSort[sorted] : null\"\n              [class]=\"_cellClasses().get(header.column.id)?.header\"\n            >\n              @if (!header.isPlaceholder) {\n                @if (sortable() && header.column.getCanSort()) {\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex items-center gap-1 select-none hover:text-foreground/80\"\n                    (click)=\"header.column.toggleSorting()\"\n                  >\n                    <ng-container\n                      *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\"\n                    >\n                      {{ rendered }}\n                    </ng-container>\n\n                    <ng-icon [name]=\"_sortIcon[sorted || 'none']\" class=\"shrink-0 text-xs\" aria-hidden=\"true\" />\n                  </button>\n                } @else {\n                  <ng-container *flexRender=\"header.column.columnDef.header; props: header.getContext(); let rendered\">\n                    {{ rendered }}\n                  </ng-container>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody yuwTBody>\n      @if (loading()) {\n        @for (row of _skeletonRows(); track row) {\n          <tr yuwTr [class]=\"_rowClass()\">\n            @for (column of table.getVisibleLeafColumns(); track column.id) {\n              <td yuwTd [class]=\"_cellClasses().get(column.id)?.cell\">\n                <span yuwSkeleton class=\"block h-4 w-full\"></span>\n              </td>\n            }\n          </tr>\n        }\n      } @else if (_isEmpty()) {\n        <tr yuwTr [class]=\"_rowClass()\">\n          <td yuwTd [attr.colspan]=\"_columnCount()\" class=\"h-24 text-center text-muted-foreground\">\n            {{ emptyText() ?? '' }}\n          </td>\n        </tr>\n      } @else {\n        @for (row of table.getRowModel().rows; track row.id) {\n          <tr\n            yuwTr\n            [class]=\"_rowClass()\"\n            [attr.data-state]=\"row.getIsSelected() ? 'selected' : null\"\n            (click)=\"onRowClick(row.original)\"\n          >\n            @for (cell of row.getVisibleCells(); track cell.id) {\n              <td yuwTd [class]=\"_cellClasses().get(cell.column.id)?.cell\">\n                <ng-container *flexRender=\"cell.column.columnDef.cell; props: cell.getContext(); let rendered\">\n                  {{ rendered }}\n                </ng-container>\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (paginated()) {\n  <div class=\"flex items-center justify-between gap-4 py-3\">\n    @if (selectable()) {\n      <p class=\"text-sm text-muted-foreground\">\n        {{ table.getSelectedRowModel().rows.length }} / {{ table.getFilteredRowModel().rows.length }}\n      </p>\n    } @else {\n      <span></span>\n    }\n\n    <div class=\"flex items-center\">\n      <yuw-pagination\n        [page]=\"currentPage()\"\n        (pageChange)=\"onPageChange($event)\"\n        [totalPages]=\"table.getPageCount() || 1\"\n        [previousLabel]=\"previousPageLabel()\"\n        [nextLabel]=\"nextPageLabel()\"\n        [ellipsisSrText]=\"paginationEllipsisSrText()\"\n        [ariaLabel]=\"paginationAriaLabel()\"\n        color=\"secondary\"\n        size=\"icon-sm\"\n      />\n    </div>\n  </div>\n}\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingRows", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: true }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: true }] }], paginationEllipsisSrText: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEllipsisSrText", required: true }] }], paginationAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationAriaLabel", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], sorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorting", required: false }] }, { type: i0.Output, args: ["sortingChange"] }], columnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnFilters", required: false }] }, { type: i0.Output, args: ["columnFiltersChange"] }], columnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVisibility", required: false }] }, { type: i0.Output, args: ["columnVisibilityChange"] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }, { type: i0.Output, args: ["rowSelectionChange"] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }, { type: i0.Output, args: ["paginationChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], selectedRowsChange: [{ type: i0.Output, args: ["selectedRowsChange"] }] } });
+
+class YuwDatatableRowSelect {
+    constructor() {
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.label = input('Select row', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.onToggle = input(() => undefined, ...(ngDevMode ? [{ debugName: "onToggle" }] : /* istanbul ignore next */ []));
+    }
+    toggle() {
+        this.onToggle()();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableRowSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: YuwDatatableRowSelect, isStandalone: true, selector: "yuw-datatable-row-select", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, onToggle: { classPropertyName: "onToggle", publicName: "onToggle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <yuw-checkbox
+      [checked]="checked()"
+      [indeterminate]="indeterminate()"
+      [ariaLabel]="label()"
+      (checkedChange)="toggle()"
+      (click)="$event.stopPropagation()"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["checked", "indeterminate", "disabled", "required", "invalid", "name", "inputId", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "secondary"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwDatatableRowSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'yuw-datatable-row-select',
+                    standalone: true,
+                    imports: [YuwCheckboxComponent],
+                    template: `
+    <yuw-checkbox
+      [checked]="checked()"
+      [indeterminate]="indeterminate()"
+      [ariaLabel]="label()"
+      (checkedChange)="toggle()"
+      (click)="$event.stopPropagation()"
+    />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], onToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "onToggle", required: false }] }] } });
 
 /**
  * Displays a user or entity avatar with optional image, fallback text/initials, status badge, or overlapping group layout.
@@ -4015,44 +4062,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
-/**
- * yukit-web's class layer for the sidebar menu button, applied on top of the helm
- * `sidebarMenuButtonVariants()` output.
- *
- * Registered through the helm `classes()` utility from the `yuwSidebarMenuButton` directive, which
- * runs *after* the helm directive's own registration on the same element. `classes()` merges its
- * sources in registration order through `twMerge`, so each class here displaces the helm class of
- * the same Tailwind group and modifier stack without needing `!important`.
- *
- * These live on the button rather than on `li[yuwSidebarMenuItem]` because every selector here
- * resolves against the button's own box or subtree: the `<li>` is not the hovered control, never
- * carries `aria-expanded`, and its `> span:last-child` is the `yuwSidebarMenuBadge`, not the label.
- *
- * Three details in the collapsed-to-icon block are load-bearing:
- *
- * - `size-auto!`, `w-full!` and `justify-center!` keep their `!` because the helm declarations they
- *   replace (`size-8!`, `p-2!`) are themselves `!important`, which `twMerge` cannot outrank on
- *   specificity alone. The helm pins the button to a square; ours fills the rail width and centres
- *   the icon.
- * - `[&>span:last-child]:hidden` drops the label while collapsed, leaving the icon alone — the
- *   tooltip carries the name in that state.
- * - `text-[length:--spacing(6)]` bumps the icon from the helm's 4 units to 6. The `length:` hint is
- *   not optional: `text-[…]` is ambiguous between colour and size, and Tailwind resolves the bare
- *   form as a colour, so the icon would never resize.
- */
+const YUW_SIDEBAR_TRANSITION_MS = 200;
 const yuwSidebarMenuButtonClass = [
+    '[&>span]:truncate',
+    '[&>span]:min-w-0',
     'hover:bg-muted',
     'hover:text-foreground',
     'dark:hover:bg-muted/50',
     'aria-expanded:bg-muted',
     'aria-expanded:text-foreground',
-    'transition-all',
-    'group-data-[collapsible=icon]:size-auto!',
+    'transition-[background-color,color]',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    '[&_ng-icon]:origin-center',
+    '[&_ng-icon]:transition-transform',
+    '[&_ng-icon]:duration-200',
+    '[&_ng-icon]:ease-linear',
+    'motion-reduce:[&_ng-icon]:transition-none',
+    'group-data-[collapsible=icon]:h-auto!',
     'group-data-[collapsible=icon]:w-full!',
-    'group-data-[collapsible=icon]:justify-center!',
-    'group-data-[collapsible=icon]:[&>span:last-child]:hidden',
-    'group-data-[collapsible=icon]:[&_ng-icon]:text-[length:--spacing(6)]',
+    'group-data-[yuw-rail=on]:justify-center!',
+    'group-data-[yuw-rail=on]:[&>span]:hidden',
+    'group-data-[yuw-rail=on]:[&_ng-icon]:scale-150',
+].join(' ');
+const yuwSidebarMenuChevronClass = [
+    'ms-auto',
+    'shrink-0',
+    'transition-transform',
+    'duration-200',
+    'text-[length:--spacing(4)]!',
+    'group-aria-expanded/menu-button:rotate-90',
+    'group-data-[yuw-rail=on]:hidden!',
+].join(' ');
+const yuwSidebarFlyoutClass = [
+    'w-56',
+    'ms-2',
+    'p-1',
+    'flex',
+    'flex-col',
+    'gap-0.5',
+    '[&_[data-sidebar=menu-sub]]:mx-0',
+    '[&_[data-sidebar=menu-sub]]:translate-x-0',
+    '[&_[data-sidebar=menu-sub]]:border-0',
+    '[&_[data-sidebar=menu-sub]]:px-0',
+    '[&_[data-sidebar=menu-sub]]:py-0',
+    '[&_[data-sidebar=menu-sub]]:gap-0.5',
+    '[&_[data-sidebar=menu-sub-button]]:translate-x-0',
+    '[&_[data-sidebar=menu-sub-button]]:h-8',
+].join(' ');
+const yuwSidebarFlyoutLabelClass = [
+    'text-muted-foreground',
+    'px-2',
+    'pt-1',
+    'pb-1.5',
+    'text-xs',
+    'font-medium',
+    'truncate',
+].join(' ');
+const yuwSidebarContainerClass = 'contain-layout';
+const yuwSidebarContentClass = [
+    'overflow-y-auto',
+    'group-data-[collapsible=icon]:overflow-y-auto!',
+    'group-data-[collapsible=icon]:overflow-x-hidden',
+    'group-data-[yuw-rail=on]:gap-1',
 ].join(' ');
+const yuwSidebarGroupLabelClass = [
+    'group-data-[collapsible=icon]:mt-0!',
+    'group-data-[collapsible=icon]:opacity-100',
+    'transition-opacity',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    'group-data-[yuw-rail=on]:hidden',
+].join(' ');
+const yuwSidebarGroupClass = 'group-data-[yuw-rail=on]:py-0';
+const yuwSidebarSubmenuWrapperClass = [
+    'grid',
+    'transition-[grid-template-rows]',
+    'duration-200',
+    'ease-out',
+    'motion-reduce:transition-none',
+    '[&>*]:min-h-0',
+    '[&>*]:overflow-hidden',
+].join(' ');
+const yuwSidebarSubmenuOpenClass = 'grid-rows-[1fr]';
+const yuwSidebarSubmenuClosedClass = 'grid-rows-[0fr]';
+const yuwSidebarMenuBadgeClass = [
+    'transition-opacity',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    'group-data-[yuw-rail=on]:opacity-0',
+    'group-data-[yuw-rail=on]:block!',
+    'group-data-[yuw-rail=on]:pointer-events-none',
+].join(' ');
+const yuwSidebarGroupLabelTextClass = ['truncate', 'block', 'min-w-0'].join(' ');
+const yuwSidebarMenuSubButtonClass = ['[&>span]:truncate', '[&>span]:min-w-0'].join(' ');
+
+/**
+ * Tracks the sidebar's collapsed state, and a second copy of it that lags behind the width animation.
+ *
+ * The helm flips `data-collapsible` the instant the state changes, while the panel takes
+ * `--sidebar-transition-duration` to reach its new width. Anything keyed off that attribute therefore
+ * restyles against a panel that is still the old size — labels vanish and icons jump to rail geometry
+ * while there is still 16rem of sidebar around them.
+ *
+ * `railSettled` fixes that asymmetrically, because the two directions want opposite timing:
+ *
+ * - Collapsing, the rail look has to wait for the panel to actually be narrow. Applying it up front is
+ *   what produces the jump.
+ * - Expanding, the rail look has to go immediately. The labels need the whole animation to fade and
+ *   ellipsis into place, so waiting would replace one jump with another at the far end.
+ *
+ * The delay runs through `timer` rather than a `setTimeout` inside an `effect`, and that is not a
+ * stylistic choice: this app is zoneless, so a signal written from a bare timer callback notifies
+ * nobody. Components reading `railSettled` in a template binding are `OnPush`, so they would keep
+ * their stale view until something else happened to schedule a check — the signal flips, the DOM does
+ * not. Going through `toSignal` puts the write back under Angular's own scheduling.
+ *
+ * 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.
+ */
+class YuwSidebarRailService {
+    constructor() {
+        this.sidebar = inject(HlmSidebarService);
+        this.collapsed = computed(() => (this.sidebar.isMobile() ? !this.sidebar.openMobile() : !this.sidebar.open()), ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.railSettled = toSignal(toObservable(this.collapsed).pipe(switchMap((collapsed) => (collapsed ? timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map(() => true)) : of(false)))), { initialValue: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
@@ -4107,8 +4252,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarHeader],
                 }]
         }] });
-/** Scrollable middle area of the sidebar that holds the navigation groups. */
+/**
+ * Scrollable middle area of the sidebar that holds the navigation groups.
+ *
+ * Restores vertical scrolling in the collapsed state, which the composed primitive switches off with
+ * `group-data-[collapsible=icon]:overflow-hidden`. That is a fair default for a rail of icons alone,
+ * but ours keeps expandable entries reachable there, so a tall nav has to be able to scroll rather
+ * than have its last icons clipped. Horizontal overflow stays hidden: nothing should scroll sideways
+ * in a rail that narrow.
+ *
+ * The `!` is needed because the helm's own declaration sits in the same Tailwind group at the same
+ * modifier, and `twMerge` resolves that by keeping the last one — which would be ours already, except
+ * `overflow-hidden` and `overflow-y-auto` are different properties to it, so both survive and the
+ * shorthand wins on order.
+ *
+ * The scrollbar itself stays hidden, which the primitive's own `no-scrollbar` already handles: a
+ * gutter that only appears once the nav happens to overflow shifts the icons sideways, and the rail is
+ * too narrow to spend 11px on it. Wheel, trackpad and keyboard still scroll; only the thumb is gone.
+ *
+ * Also spaces the groups it stacks while collapsed. Each group's own menu spaces its items, so with
+ * the groups' vertical padding dropped there was nothing left between the last icon of one and the
+ * first of the next; matching that spacing here is what makes the rail read as one evenly spaced
+ * column rather than blocks butted together.
+ */
 class YuwSidebarContentDirective {
+    constructor() {
+        classes(() => yuwSidebarContentClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$q.HlmSidebarContent }], ngImport: i0 }); }
 }
@@ -4118,7 +4288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: '[yuwSidebarContent], yuw-sidebar-content',
                     hostDirectives: [HlmSidebarContent],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** Bottom area of the sidebar, below the scrollable content. */
 class YuwSidebarFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4131,8 +4301,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarFooter],
                 }]
         }] });
-/** A titled section of the sidebar. */
+/**
+ * A titled section of the sidebar.
+ *
+ * Drops its vertical padding once collapsed to icons. The composed primitive pads every side with
+ * `p-2`, which is right while headings are visible and separating one group from the next, but on the
+ * rail those headings are gone and two adjacent groups contribute 8px each — a gap in the middle of
+ * what reads as one column of icons. Horizontal padding stays: it is what keeps the icons off the
+ * rail's edges.
+ */
 class YuwSidebarGroupDirective {
+    constructor() {
+        classes(() => yuwSidebarGroupClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$q.HlmSidebarGroup }], ngImport: i0 }); }
 }
@@ -4142,9 +4323,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: '[yuwSidebarGroup], yuw-sidebar-group',
                     hostDirectives: [HlmSidebarGroup],
                 }]
-        }] });
-/** Heading of a sidebar group. Fades out when the sidebar collapses to icons. */
+        }], ctorParameters: () => [] });
+/**
+ * Heading of a sidebar group. Removed from the layout when the sidebar collapses to icons.
+ *
+ * The composed primitive hides it with `-mt-8` plus `opacity-0`, which leaves the heading in the flow
+ * still occupying its `h-8` box and cancels that box with a negative margin. The two only net to zero
+ * while the heading is exactly one line at exactly that height, so a group heading left a visible gap
+ * between the icons of one group and the next. `hidden` takes it out of the flow instead, and the
+ * margin is zeroed so the collapsed rail is not pulled upwards by a box that no longer exists.
+ */
 class YuwSidebarGroupLabelDirective {
+    constructor() {
+        classes(() => yuwSidebarGroupLabelClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupLabel }], ngImport: i0 }); }
 }
@@ -4154,7 +4346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: 'div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]',
                     hostDirectives: [HlmSidebarGroupLabel],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** Body of a sidebar group, wrapping its menu. */
 class YuwSidebarGroupContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4224,16 +4416,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Interactive control of a sidebar menu item. Accepts `variant` (`'default'`, `'outline'`), `size`
  * (`'default'`, `'sm'`, `'lg'`) and `isActive`.
  *
- * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
- * alongside this directive — it comes from the underlying menu-button primitive and is only shown
- * in the collapsed state. It cannot be re-forwarded through this wrapper's `hostDirectives`
- * (`tooltip` is the alias `HlmSidebarMenuButton` gives its own composed `BrnTooltip`, not a public
- * input of its own), so bind it with `[attr.tooltip]` rather than `[tooltip]` when the value comes
- * from an expression.
+ * `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.
+ *
+ * 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
+ * `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.
+ *
+ * `[attr.tooltip]` is not a substitute, and was the bug: it writes an HTML attribute, which never
+ * reaches a signal input, so the tooltip stayed enabled with `null` content and silently showed
+ * nothing.
  *
  * Carries `yuwSidebarMenuButtonClass`, our hover/expanded colouring and collapsed-to-icon geometry.
- * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, so our
- * classes merge last and win — see `sidebar.variants.ts`.
+ * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, and
+ * `classes()` merges its sources in registration order through `twMerge`, so each of our classes
+ * displaces the helm class of the same Tailwind group and modifier stack without `!important`.
+ *
+ * Those classes sit on the button rather than on `li[yuwSidebarMenuItem]` because every selector in
+ * them resolves against the button's own box or subtree: the `<li>` is not the hovered control, never
+ * carries `aria-expanded`, and its `> span:last-child` is the badge, not the label.
+ *
+ * Three details of the collapsed-to-icon block are load-bearing:
+ *
+ * - `h-auto!`, `w-full!` and `justify-center!` keep their `!` because the helm declarations they
+ *   replace (`size-8!`, `p-2!`) are themselves `!important`, which `twMerge` cannot outrank on
+ *   specificity alone. The helm pins the button to a square; ours fills the rail width and centres
+ *   the icon. Both halves of `size-8!` have to be named separately: a single `size-auto!` occupies
+ *   the same `twMerge` group as the base `w-full`, dropping it, so the button would fall back to
+ *   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
+ *   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
+ *   button has, with the badge living outside the button on the `<li>`.
+ * - The icon grows through `scale-150` rather than a font-size bump, so it can be transitioned: only
+ *   `transform`-family properties animate on the compositor, and a `font-size` change would relayout
+ *   the row on every frame.
+ *
+ * Which state each class hangs off is load-bearing, because the two attributes fire at different
+ * times. `data-collapsible` flips the instant the toggle is pressed; `data-yuw-rail` waits for the
+ * width animation to finish. Anything that should hold its expanded look *through* the animation
+ * therefore keys off the rail attribute — the label's `hidden`, the centring, the icon's scale — while
+ * the width and height overrides key off `collapsible`, to displace the helm's `size-8!` before it can
+ * snap the row to 32px and truncate the label away in the first frame. That snap is what made the text vanish
+ * on click instead of ellipsing gradually as the panel narrows.
  */
 class YuwSidebarMenuButtonDirective {
     constructor() {
@@ -4290,8 +4522,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarMenuSubItem],
                 }]
         }] });
-/** Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`. */
+/**
+ * Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`.
+ *
+ * Carries the same label clamp as `[yuwSidebarMenuButton]`. The composed primitive already truncates
+ * its `span:last-child`, but truncation cannot fire while the span is a flex item at its default
+ * `min-width: auto`: that floor keeps it at content width, so the panel widens the row instead of the
+ * text ellipsing. `min-w-0` is what lets it shrink, and the `[&>span]` selector covers a label that is
+ * no longer the last child.
+ */
 class YuwSidebarMenuSubButtonDirective {
+    constructor() {
+        classes(() => yuwSidebarMenuSubButtonClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
@@ -4301,7 +4544,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: 'a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]',
                     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 }); }
@@ -4349,6 +4765,11 @@ 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
+`;
 /**
  * Renders one {@link YuwSidebarContentDto} as the group/menu/item tree.
  *
@@ -4361,42 +4782,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * `[yuwSidebarContent]` / `[yuwSidebarFooter]` wrapper it sits inside. That is what keeps the
  * `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.
+ *
+ * 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
+ * `yuwSidebarMenuChevronClass` hides it with `hidden!` in the collapsed state, and that `!` is
+ * load-bearing: `ng-icon` sets `display: block` on its own host from a layer outranking Tailwind's
+ * `utilities`, so a plain `hidden` loses and the chevron keeps taking width — which pulls the
+ * entry's real icon off centre, since the button is `justify-center` while collapsed. The same
+ * classes on a `<span>` need no `!`; only the custom element does.
+ *
+ * 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
+ * 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
+ * is why the submenu stays mounted and is switched between `0fr` and `1fr` instead of living behind an
+ * `@if`: height cannot animate from or to something that is not in the layout, and `auto` is not an
+ * animatable value. A closed submenu is `inert` and `aria-hidden`, so leaving it mounted does not hand
+ * keyboard users links to a menu they cannot see.
+ *
+ * Collapsing to the rail also clears every open accordion, which is what stops an expand from
+ * unfolding several submenus at once and shoving the entries below them down the panel. An entry
+ * holding the active route still opens on its own, since that one is answering "where am I" rather
+ * than restoring a stale choice.
+ *
+ * Which entries are expanded resolves in precedence order: an explicit toggle by the user wins,
+ * otherwise an entry holding the active route is open — a deep link into a child should not hide the
+ * child — otherwise the DTO's `expanded` seed, otherwise closed. The user's toggles live in a
+ * `linkedSignal` on `content()` rather than a plain signal, so replacing the object — a nav rebuilt
+ * from fresh permissions, say — drops toggles that no longer refer to anything instead of keeping a
+ * map that grows with dead ids. The seed feeds the derived state rather than that map, which is what
+ * lets an untouched entry keep following its seed and its active route.
+ *
+ * Whether an entry holds the active route is decided by comparing serialized `routerLink` targets
+ * against the current URL, not by asking the router to match them: `Router.isActive` needs a
+ * `UrlTree` per child and would run on every pass. The URL itself is a signal seeded with
+ * `Router.url`, so a deep link is expanded on first paint, before any navigation event has fired —
+ * `RouterLinkActive` cannot answer this, because it reports on the element it sits on and the entry
+ * that needs to open is the *parent* of the matching child. Matching is by prefix, mirroring
+ * `routerLinkActive`'s own non-exact behaviour, with a boundary check so `/reports` does not match
+ * `/reports-archive`.
+ *
+ * Each entry's render state is resolved once per pass, which is also what keeps
+ * `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.
  */
 class YuwSidebarNavComponent {
     constructor() {
+        this.router = inject(Router);
+        this.injector = inject(Injector);
+        this.sidebarService = inject(HlmSidebarService);
+        this.rail = inject(YuwSidebarRailService);
         this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         this.itemClicked = output();
-        /**
-         * The groups, with each entry's derived render state resolved once.
-         *
-         * `routerLinkActiveOptions` has to be a stable object identity per entry: a literal in the
-         * template (`[routerLinkActiveOptions]="{exact: item.exact ?? false}"`) allocates a new object on
-         * every change-detection pass, which `RouterLinkActive` treats as a changed input and re-runs its
-         * subscription for. Precomputing it here also keeps the template free of the `?? false` fallback.
-         */
-        this._groups = computed(() => this.content().groups.map((group) => ({
-            ...group,
-            items: group.items.map((item) => ({
-                ...item,
-                tooltipText: item.tooltip ?? item.label,
-                activeOptions: { exact: item.exact ?? false },
-                children: (item.children ?? []).map((child) => ({
-                    ...child,
-                    activeOptions: { exact: child.exact ?? false },
-                })),
-            })),
-        })), ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+        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
+                ? new Set()
+                : new Set(content.groups.flatMap((group) => group.items.filter((item) => item.expanded).map((item) => item.id))) });
+        this._groups = computed(() => {
+            const expandedIds = this.expandedIds();
+            const isRail = this.isRail();
+            return this.content().groups.map((group) => ({
+                ...group,
+                items: group.items.map((item) => {
+                    const children = (item.children ?? []).map((child) => ({
+                        ...child,
+                        activeOptions: { exact: child.exact ?? false },
+                    }));
+                    const hasChildren = children.length > 0;
+                    const expanded = isRail || !hasChildren ? false : expandedIds.has(item.id) || this.holdsActiveRoute(item.children);
+                    return {
+                        ...item,
+                        children,
+                        hasChildren,
+                        tooltipText: hasChildren ? null : (item.tooltip ?? item.label),
+                        activeOptions: { exact: item.exact ?? false },
+                        expanded,
+                        submenuClass: `${yuwSidebarSubmenuWrapperClass} ${expanded ? yuwSidebarSubmenuOpenClass : yuwSidebarSubmenuClosedClass}`,
+                    };
+                }),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    }
+    holdsActiveRoute(children) {
+        return (children ?? []).some((child) => {
+            const route = child.route;
+            return route !== undefined && route !== null && this.routeActive(route)();
+        });
+    }
+    routeActive(route) {
+        const key = this.router.serializeUrl(this.router.createUrlTree(Array.isArray(route) ? route : [route]));
+        const cached = this.activeRoutes.get(key);
+        if (cached)
+            return cached;
+        const signal = runInInjectionContext(this.injector, () => isActive(key, this.router));
+        this.activeRoutes.set(key, signal);
+        return signal;
     }
     onItemClick(id, event) {
         this.itemClicked.emit({ id, event });
     }
+    onParentClick(id, expanded) {
+        if (this.isRail())
+            return;
+        this.expandedIds.update((ids) => {
+            const next = new Set(ids);
+            if (expanded)
+                next.delete(id);
+            else
+                next.add(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 } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>{{ group.label }}</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\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                [class.pointer-events-none]=\"link.isActive || item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\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                [class.pointer-events-none]=\"item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.children.length) {\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            }\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: 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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuw-sidebar-nav', imports: [
                         NgIcon,
+                        NgTemplateOutlet,
                         RouterLink,
                         RouterLinkActive,
                         YuwSidebarGroupDirective,
@@ -4405,15 +4941,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarMenuDirective,
                         YuwSidebarMenuItemDirective,
                         YuwSidebarMenuButtonDirective,
+                        HlmSidebarMenuButton,
                         YuwSidebarMenuBadgeDirective,
                         YuwSidebarMenuSubDirective,
                         YuwSidebarMenuSubItemDirective,
                         YuwSidebarMenuSubButtonDirective,
                         YuwSidebarSeparatorDirective,
-                    ], host: {
+                        YuwSidebarFlyoutHostDirective,
+                        YuwSidebarFlyoutPanelDirective,
+                        YuwSidebarFlyoutTriggerDirective,
+                        YuwSidebarFlyoutDirective,
+                    ], providers: [provideIcons({ lucideChevronRight })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>{{ group.label }}</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\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                [class.pointer-events-none]=\"link.isActive || item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\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                [class.pointer-events-none]=\"item.disabled\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                (click)=\"onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.children.length) {\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            }\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 }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+                    }, 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" }]
+        }], 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"] }] } });
 
 /**
  * Collapsible navigation sidebar. Renders as a fixed panel on desktop and as a slide-in sheet on
@@ -4433,12 +4974,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *   markup. Groups → items → optional one level of children. An item with a `route` becomes a
  *   `[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`.
+ *   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`
+ *   field seeds the accordion; the item holding the active route opens on its own.
  * - `footer`: The same, rendered into the footer region.
  *
  * Outputs:
  * - `itemClicked`: Emits `{id, event}` when a non-navigating entry (no `route`, no `href`) is
  *   activated, in either `content` or `footer`.
+ * - `collapsedChange`: Emits `true` when the sidebar collapses and `false` when it expands, reading
+ *   the mobile sheet or the desktop panel as appropriate. Fires the moment the state flips, so it is
+ *   the one to drive a caller's own layout, which should start moving with the panel.
+ * - `railSettledChange`: The same transition, but `true` only once the collapse has finished
+ *   animating, and `false` immediately on expand. Use it for anything that should not restyle against
+ *   a panel still mid-width — swapping a logo for a mark, say. The sidebar's own rail geometry is
+ *   keyed off this, which is why the labels stay put until the panel is actually narrow.
  *
  * The two forms compose rather than exclude each other, unlike `<yuw-button>`'s `buttons` input
  * which drops projected content when set. `content`/`footer` render their own region; anything
@@ -4479,7 +5030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *     label: 'Gestión',
  *     items: [
  *       {id: 'orders', label: 'Pedidos', icon: 'lucideReceipt', route: '/orders', badge: '12'},
- *       {id: 'reports', label: 'Informes', icon: 'lucideChartLine', children: [
+ *       {id: 'reports', label: 'Informes', icon: 'lucideChartLine', expanded: true, children: [
  *         {id: 'sales', label: 'Ventas', route: '/reports/sales'},
  *       ]},
  *       {id: 'sync', label: 'Sincronizar'},
@@ -4491,6 +5042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class YuwSidebarComponent {
     constructor() {
         this.config = injectHlmSidebarConfig();
+        this._rail = inject(YuwSidebarRailService);
         this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
@@ -4499,9 +5051,13 @@ class YuwSidebarComponent {
         this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         this.footer = input(undefined, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
         this.itemClicked = output();
+        this._containerClass = computed(() => `${yuwSidebarContainerClass} ${this.sidebarContainerClass()}`, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+        this._isRail = computed(() => this.collapsible() === 'icon' && this._rail.railSettled(), ...(ngDevMode ? [{ debugName: "_isRail" }] : /* istanbul ignore next */ []));
+        this.collapsedChange = outputFromObservable(toObservable(this._rail.collapsed).pipe(distinctUntilChanged()));
+        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" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\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\" (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\" (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"], 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" }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
             type: Component,
@@ -4513,8 +5069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarSeparatorDirective,
                     ], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\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\" (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\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\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"] }] } });
+                    }, 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" }]
+        }], 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"] }] } });
 
 /**
  * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
@@ -4551,5 +5107,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, 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, 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, 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 };
 //# sourceMappingURL=yukit-web.mjs.map