yukit-web 0.0.6 → 0.0.7

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, 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';
@@ -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, merge, fromEvent, timer } 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';
@@ -82,9 +82,13 @@ 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 * 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 { HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, HlmSidebarService, 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 { map, distinctUntilChanged, switchMap } from 'rxjs/operators';
+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,31 +4062,6 @@ 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 yuwSidebarMenuButtonClass = [
     'hover:bg-muted',
     'hover:text-foreground',
@@ -4050,9 +4072,43 @@ const yuwSidebarMenuButtonClass = [
     'group-data-[collapsible=icon]:size-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]:[&>span]:hidden',
     'group-data-[collapsible=icon]:[&_ng-icon]:text-[length:--spacing(6)]',
 ].join(' ');
+const yuwSidebarMenuChevronClass = [
+    'ms-auto',
+    'shrink-0',
+    'transition-transform',
+    'duration-200',
+    'text-[length:--spacing(4)]!',
+    'group-aria-expanded/menu-button:rotate-90',
+    'group-data-[collapsible=icon]: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(' ');
 
 /**
  * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
@@ -4232,8 +4288,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * from an expression.
  *
  * 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:
+ *
+ * - `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]: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>`.
+ * - `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.
  */
 class YuwSidebarMenuButtonDirective {
     constructor() {
@@ -4302,6 +4379,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] }],
                 }]
         }] });
+/**
+ * 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((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 }); }
@@ -4361,42 +4611,128 @@ 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 state must actually be collapsed, since an `'icon'` sidebar is a normal wide
+ * panel while open.
+ *
+ * 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.activeRoutes = new Map();
         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.chevronClass = yuwSidebarMenuChevronClass;
+        this.flyoutLabelClass = yuwSidebarFlyoutLabelClass;
+        this.isRail = computed(() => this.collapsible() === 'icon' && this.sidebarService.state() === 'collapsed' && !this.sidebarService.isMobile(), ...(ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []));
+        this.userToggles = linkedSignal({ ...(ngDevMode ? { debugName: "userToggles" } : /* istanbul ignore next */ {}), source: this.content,
+            computation: () => new Map() });
+        this._groups = computed(() => {
+            const toggles = this.userToggles();
+            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;
+                    return {
+                        ...item,
+                        children,
+                        hasChildren,
+                        tooltipText: hasChildren ? undefined : (item.tooltip ?? item.label),
+                        activeOptions: { exact: item.exact ?? false },
+                        expanded: toggles.get(item.id) ?? (this.holdsActiveRoute(item.children) || (item.expanded ?? false)),
+                    };
+                }),
+            }));
+        }, ...(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.userToggles.update((toggles) => new Map(toggles).set(id, !expanded));
+    }
     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>{{ 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 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                [attr.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                [attr.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                [attr.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                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && item.expanded && !isRail()) {\n              <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\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,
@@ -4410,10 +4746,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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>{{ 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 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                [attr.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                [attr.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                [attr.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                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge>{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && item.expanded && !isRail()) {\n              <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\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,7 +4773,10 @@ 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:
@@ -4479,7 +4822,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'},
@@ -4501,7 +4844,7 @@ class YuwSidebarComponent {
         this.itemClicked = output();
     }
     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" }, 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\" [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,7 +4856,7 @@ 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" }]
+                    }, 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\" [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"] }] } });
 
 /**
@@ -4551,5 +4894,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, 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