yukit-web 0.0.7 → 0.0.9

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, ViewContainerRef, runInInjectionContext } from '@angular/core';
+import { forwardRef, signal, Directive, input, inject, TemplateRef, ElementRef, booleanAttribute, output, computed, contentChildren, ChangeDetectionStrategy, Component, model, contentChild, viewChild, Injector, afterNextRender, effect, numberAttribute, linkedSignal, Injectable, ViewContainerRef, runInInjectionContext } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
@@ -39,7 +39,7 @@ import { HlmCard, HlmCardHeader, HlmCardTitle, HlmCardDescription, HlmCardAction
 import * as i1$9 from 'yukit-web/helm/empty';
 import { HlmEmpty, HlmEmptyHeader, HlmEmptyMedia, HlmEmptyTitle, HlmEmptyDescription, HlmEmptyContent } from 'yukit-web/helm/empty';
 import { CdkContextMenuTrigger, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
-import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
+import { outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$a from 'yukit-web/helm/context-menu';
 import { HlmContextMenuTrigger } from 'yukit-web/helm/context-menu';
 import * as i1$b from 'yukit-web/helm/date-picker';
@@ -48,7 +48,7 @@ import * as i1$c from 'yukit-web/helm/table';
 import { HlmTableContainer, HlmTable, HlmTHead, HlmTBody, HlmTFoot, HlmTr, HlmTh, HlmTd, HlmCaption } from 'yukit-web/helm/table';
 import { injectTable, FlexRenderDirective } from '@tanstack/angular-table';
 import { rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, sortFns, createPaginatedRowModel, createSortedRowModel, createFilteredRowModel, createCoreRowModel } from '@tanstack/table-core';
-import { skip, merge, fromEvent, timer } from 'rxjs';
+import { skip, switchMap, timer, of, merge, fromEvent } from 'rxjs';
 import * as i1$d from 'yukit-web/helm/avatar';
 import { HlmAvatarImports } from 'yukit-web/helm/avatar';
 import * as i1$e from 'yukit-web/helm/item';
@@ -81,11 +81,11 @@ import * as i1$o from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
 import * as i1$p from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
+import { map, distinctUntilChanged, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i1$q from 'yukit-web/helm/sidebar';
-import { HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, HlmSidebarService, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
+import { HlmSidebarService, HlmSidebarWrapper, HlmSidebarHeader, HlmSidebarContent, HlmSidebarFooter, HlmSidebarGroup, HlmSidebarGroupLabel, HlmSidebarGroupContent, HlmSidebarMenu, HlmSidebarMenuItem, HlmSidebarMenuButton, HlmSidebarMenuBadge, HlmSidebarMenuSub, HlmSidebarMenuSubItem, HlmSidebarMenuSubButton, HlmSidebarSeparator, HlmSidebarRail, HlmSidebarInset, injectHlmSidebarConfig, HlmSidebar, HlmSidebarTrigger } from 'yukit-web/helm/sidebar';
 export { HlmSidebarService as YuwSidebarService, provideHlmSidebarConfig as provideYuwSidebarConfig } from 'yukit-web/helm/sidebar';
 import { 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';
@@ -4062,18 +4062,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
+const YUW_SIDEBAR_TRANSITION_MS = 200;
 const yuwSidebarMenuButtonClass = [
+    '[&>span]:truncate',
+    '[&>span]:min-w-0',
     'hover:bg-muted',
     'hover:text-foreground',
     'dark:hover:bg-muted/50',
     'aria-expanded:bg-muted',
     'aria-expanded:text-foreground',
-    'transition-all',
-    'group-data-[collapsible=icon]:size-auto!',
+    'transition-[background-color,color]',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    '[&_ng-icon]:origin-center',
+    '[&_ng-icon]:transition-transform',
+    '[&_ng-icon]:duration-200',
+    '[&_ng-icon]:ease-linear',
+    'motion-reduce:[&_ng-icon]:transition-none',
+    'group-data-[collapsible=icon]:h-auto!',
     'group-data-[collapsible=icon]:w-full!',
-    'group-data-[collapsible=icon]:justify-center!',
-    'group-data-[collapsible=icon]:[&>span]:hidden',
-    'group-data-[collapsible=icon]:[&_ng-icon]:text-[length:--spacing(6)]',
+    'group-data-[yuw-rail=on]:justify-center!',
+    'group-data-[yuw-rail=on]:[&>span]:hidden',
+    'group-data-[yuw-rail=on]:[&_ng-icon]:scale-150',
 ].join(' ');
 const yuwSidebarMenuChevronClass = [
     'ms-auto',
@@ -4082,7 +4093,7 @@ const yuwSidebarMenuChevronClass = [
     'duration-200',
     'text-[length:--spacing(4)]!',
     'group-aria-expanded/menu-button:rotate-90',
-    'group-data-[collapsible=icon]:hidden!',
+    'group-data-[yuw-rail=on]:hidden!',
 ].join(' ');
 const yuwSidebarFlyoutClass = [
     'w-56',
@@ -4109,6 +4120,94 @@ const yuwSidebarFlyoutLabelClass = [
     'font-medium',
     'truncate',
 ].join(' ');
+const yuwSidebarContainerClass = 'contain-layout';
+const yuwSidebarContentClass = [
+    'overflow-y-auto',
+    'group-data-[collapsible=icon]:overflow-y-auto!',
+    'group-data-[collapsible=icon]:overflow-x-hidden',
+    'group-data-[yuw-rail=on]:gap-1',
+].join(' ');
+const yuwSidebarGroupLabelClass = [
+    'group-data-[collapsible=icon]:mt-0!',
+    'group-data-[collapsible=icon]:opacity-100',
+    'transition-opacity',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    'group-data-[yuw-rail=on]:hidden',
+].join(' ');
+const yuwSidebarGroupClass = 'group-data-[yuw-rail=on]:py-0';
+const yuwSidebarSubmenuWrapperClass = [
+    'grid',
+    'transition-[grid-template-rows]',
+    'duration-200',
+    'ease-out',
+    'motion-reduce:transition-none',
+    '[&>*]:min-h-0',
+    '[&>*]:overflow-hidden',
+].join(' ');
+const yuwSidebarSubmenuOpenClass = 'grid-rows-[1fr]';
+const yuwSidebarSubmenuClosedClass = 'grid-rows-[0fr]';
+const yuwSidebarMenuBadgeClass = [
+    'transition-opacity',
+    'duration-200',
+    'ease-linear',
+    'motion-reduce:transition-none',
+    'group-data-[yuw-rail=on]:opacity-0',
+    'group-data-[yuw-rail=on]:block!',
+    'group-data-[yuw-rail=on]:pointer-events-none',
+].join(' ');
+const yuwSidebarGroupLabelTextClass = ['truncate', 'block', 'min-w-0'].join(' ');
+const yuwSidebarMenuSubButtonClass = ['[&>span]:truncate', '[&>span]:min-w-0'].join(' ');
+
+/**
+ * Tracks the sidebar's collapsed state, and a second copy of it that lags behind the width animation.
+ *
+ * The helm flips `data-collapsible` the instant the state changes, while the panel takes
+ * `--sidebar-transition-duration` to reach its new width. Anything keyed off that attribute therefore
+ * restyles against a panel that is still the old size — labels vanish and icons jump to rail geometry
+ * while there is still 16rem of sidebar around them.
+ *
+ * `railSettled` fixes that asymmetrically, because the two directions want opposite timing:
+ *
+ * - Collapsing, the rail look has to wait for the panel to actually be narrow. Applying it up front is
+ *   what produces the jump.
+ * - Expanding, the rail look has to go immediately. The labels need the whole animation to fade and
+ *   ellipsis into place, so waiting would replace one jump with another at the far end.
+ *
+ * `railPending` is the mirror of it, for anything whose *presence* has to span the whole collapse
+ * rather than arrive at the end of it: `true` the instant the panel starts narrowing, `false` only
+ * once the expand has finished widening. The pair brackets the animation from both sides — every
+ * frame in which the panel is at, or moving towards, rail width has `railPending` set, while only the
+ * frames where it has actually arrived have `railSettled` set. Something that must not be visible
+ * during the motion keys off this one; something that must not be restyled during the motion keys off
+ * `railSettled`.
+ *
+ * The delay runs through `timer` rather than a `setTimeout` inside an `effect`, and that is not a
+ * stylistic choice: this app is zoneless, so a signal written from a bare timer callback notifies
+ * nobody. Components reading `railSettled` in a template binding are `OnPush`, so they would keep
+ * their stale view until something else happened to schedule a check — the signal flips, the DOM does
+ * not. Going through `toSignal` puts the write back under Angular's own scheduling.
+ *
+ * Provided at the root so `<yuw-sidebar>` and the nav share one instance — the component stamps the
+ * attribute the class layers select on, and the nav reads the same signal to decide between accordion
+ * and flyout, so the two must agree on the exact frame.
+ */
+class YuwSidebarRailService {
+    constructor() {
+        this.sidebar = inject(HlmSidebarService);
+        this.collapsed = computed(() => (this.sidebar.isMobile() ? !this.sidebar.openMobile() : !this.sidebar.open()), ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.collapsed$ = toObservable(this.collapsed);
+        this.railSettled = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map(() => true)) : of(false)))), { initialValue: false });
+        this.railPending = toSignal(this.collapsed$.pipe(switchMap((collapsed) => (collapsed ? of(true) : timer(YUW_SIDEBAR_TRANSITION_MS).pipe(map(() => false))))), { initialValue: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarRailService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /**
  * Outermost layout directive for a sidebar page. Wraps the sidebar and the main content, and owns
@@ -4163,8 +4262,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarHeader],
                 }]
         }] });
-/** Scrollable middle area of the sidebar that holds the navigation groups. */
+/**
+ * Scrollable middle area of the sidebar that holds the navigation groups.
+ *
+ * Restores vertical scrolling in the collapsed state, which the composed primitive switches off with
+ * `group-data-[collapsible=icon]:overflow-hidden`. That is a fair default for a rail of icons alone,
+ * but ours keeps expandable entries reachable there, so a tall nav has to be able to scroll rather
+ * than have its last icons clipped. Horizontal overflow stays hidden: nothing should scroll sideways
+ * in a rail that narrow.
+ *
+ * The `!` is needed because the helm's own declaration sits in the same Tailwind group at the same
+ * modifier, and `twMerge` resolves that by keeping the last one — which would be ours already, except
+ * `overflow-hidden` and `overflow-y-auto` are different properties to it, so both survive and the
+ * shorthand wins on order.
+ *
+ * The scrollbar itself stays hidden, which the primitive's own `no-scrollbar` already handles: a
+ * gutter that only appears once the nav happens to overflow shifts the icons sideways, and the rail is
+ * too narrow to spend 11px on it. Wheel, trackpad and keyboard still scroll; only the thumb is gone.
+ *
+ * Also spaces the groups it stacks while collapsed. Each group's own menu spaces its items, so with
+ * the groups' vertical padding dropped there was nothing left between the last icon of one and the
+ * first of the next; matching that spacing here is what makes the rail read as one evenly spaced
+ * column rather than blocks butted together.
+ */
 class YuwSidebarContentDirective {
+    constructor() {
+        classes(() => yuwSidebarContentClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarContentDirective, isStandalone: true, selector: "[yuwSidebarContent], yuw-sidebar-content", hostDirectives: [{ directive: i1$q.HlmSidebarContent }], ngImport: i0 }); }
 }
@@ -4174,7 +4298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: '[yuwSidebarContent], yuw-sidebar-content',
                     hostDirectives: [HlmSidebarContent],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** Bottom area of the sidebar, below the scrollable content. */
 class YuwSidebarFooterDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4187,8 +4311,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarFooter],
                 }]
         }] });
-/** A titled section of the sidebar. */
+/**
+ * A titled section of the sidebar.
+ *
+ * Drops its vertical padding once collapsed to icons. The composed primitive pads every side with
+ * `p-2`, which is right while headings are visible and separating one group from the next, but on the
+ * rail those headings are gone and two adjacent groups contribute 8px each — a gap in the middle of
+ * what reads as one column of icons. Horizontal padding stays: it is what keeps the icons off the
+ * rail's edges.
+ */
 class YuwSidebarGroupDirective {
+    constructor() {
+        classes(() => yuwSidebarGroupClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupDirective, isStandalone: true, selector: "[yuwSidebarGroup], yuw-sidebar-group", hostDirectives: [{ directive: i1$q.HlmSidebarGroup }], ngImport: i0 }); }
 }
@@ -4198,9 +4333,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: '[yuwSidebarGroup], yuw-sidebar-group',
                     hostDirectives: [HlmSidebarGroup],
                 }]
-        }] });
-/** Heading of a sidebar group. Fades out when the sidebar collapses to icons. */
+        }], ctorParameters: () => [] });
+/**
+ * Heading of a sidebar group. Removed from the layout when the sidebar collapses to icons.
+ *
+ * The composed primitive hides it with `-mt-8` plus `opacity-0`, which leaves the heading in the flow
+ * still occupying its `h-8` box and cancels that box with a negative margin. The two only net to zero
+ * while the heading is exactly one line at exactly that height, so a group heading left a visible gap
+ * between the icons of one group and the next. `hidden` takes it out of the flow instead, and the
+ * margin is zeroed so the collapsed rail is not pulled upwards by a box that no longer exists.
+ */
 class YuwSidebarGroupLabelDirective {
+    constructor() {
+        classes(() => yuwSidebarGroupLabelClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarGroupLabelDirective, isStandalone: true, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]", hostDirectives: [{ directive: i1$q.HlmSidebarGroupLabel }], ngImport: i0 }); }
 }
@@ -4210,7 +4356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: 'div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]',
                     hostDirectives: [HlmSidebarGroupLabel],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /** Body of a sidebar group, wrapping its menu. */
 class YuwSidebarGroupContentDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -4280,12 +4426,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Interactive control of a sidebar menu item. Accepts `variant` (`'default'`, `'outline'`), `size`
  * (`'default'`, `'sm'`, `'lg'`) and `isActive`.
  *
- * To label the item while the sidebar is collapsed to icons, add Spartan's `tooltip` input
- * alongside this directive — it comes from the underlying menu-button primitive and is only shown
- * in the collapsed state. It cannot be re-forwarded through this wrapper's `hostDirectives`
- * (`tooltip` is the alias `HlmSidebarMenuButton` gives its own composed `BrnTooltip`, not a public
- * input of its own), so bind it with `[attr.tooltip]` rather than `[tooltip]` when the value comes
- * from an expression.
+ * `tooltip` labels the item while the sidebar is collapsed to icons, where the label itself is
+ * hidden; the composed primitive shows it only in that state, and only for entries with no flyout of
+ * their own — an entry with children opens its submenu on the same hover instead.
+ *
+ * Reaching that input takes composing `BrnTooltip` here under the same `tooltip` alias the helm uses,
+ * rather than forwarding it. `HlmSidebarMenuButton` publishes the alias on its own `hostDirectives`
+ * entry, which does not make it an input of the helm directive — a forward cannot be re-forwarded, the
+ * same limit `[yuwSidebarFlyoutTrigger]` runs into. Angular resolves both entries to the one
+ * `BrnTooltip` instance on the element, so the helm keeps driving `mutableTooltipDisabled` (which is
+ * what confines the tooltip to the collapsed state) while this binding supplies its content.
+ *
+ * `[attr.tooltip]` is not a substitute, and was the bug: it writes an HTML attribute, which never
+ * reaches a signal input, so the tooltip stayed enabled with `null` content and silently showed
+ * nothing.
  *
  * Carries `yuwSidebarMenuButtonClass`, our hover/expanded colouring and collapsed-to-icon geometry.
  * The `classes()` registration below runs after the composed `HlmSidebarMenuButton`'s own, and
@@ -4298,19 +4452,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  *
  * 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
+ * - `h-auto!`, `w-full!` and `justify-center!` keep their `!` because the helm declarations they
  *   replace (`size-8!`, `p-2!`) are themselves `!important`, which `twMerge` cannot outrank on
  *   specificity alone. The helm pins the button to a square; ours fills the rail width and centres
- *   the icon.
+ *   the icon. Both halves of `size-8!` have to be named separately: a single `size-auto!` occupies
+ *   the same `twMerge` group as the base `w-full`, dropping it, so the button would fall back to
+ *   shrink-to-fit for the whole width animation — long enough for the label to stop ellipsing and
+ *   the trailing chevron to sit against it.
  * - `[&>span]:hidden` drops the label while collapsed, leaving the icon alone — the tooltip carries
  *   the name in that state, or the flyout does for an entry with children. Matched by element rather
  *   than by `:last-child` (which is what the helm's own `truncate` uses): an expandable entry ends
  *   with a trailing chevron, so the label is no longer the last child and a positional selector
  *   would skip exactly those entries. `span` is unambiguous here — the label is the only one a menu
  *   button has, with the badge living outside the button on the `<li>`.
- * - `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.
+ * - The icon grows through `scale-150` rather than a font-size bump, so it can be transitioned: only
+ *   `transform`-family properties animate on the compositor, and a `font-size` change would relayout
+ *   the row on every frame.
+ *
+ * Which state each class hangs off is load-bearing, because the two attributes fire at different
+ * times. `data-collapsible` flips the instant the toggle is pressed; `data-yuw-rail` waits for the
+ * width animation to finish. Anything that should hold its expanded look *through* the animation
+ * therefore keys off the rail attribute — the label's `hidden`, the centring, the icon's scale — while
+ * the width and height overrides key off `collapsible`, to displace the helm's `size-8!` before it can
+ * snap the row to 32px and truncate the label away in the first frame. That snap is what made the text vanish
+ * on click instead of ellipsing gradually as the panel narrows.
  */
 class YuwSidebarMenuButtonDirective {
     constructor() {
@@ -4367,8 +4532,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     hostDirectives: [HlmSidebarMenuSubItem],
                 }]
         }] });
-/** Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`. */
+/**
+ * Interactive control of a sidebar submenu item. Accepts `size` (`'sm'`, `'md'`) and `isActive`.
+ *
+ * Carries the same label clamp as `[yuwSidebarMenuButton]`. The composed primitive already truncates
+ * its `span:last-child`, but truncation cannot fire while the span is a flex item at its default
+ * `min-width: auto`: that floor keeps it at content width, so the panel widens the row instead of the
+ * text ellipsing. `min-w-0` is what lets it shrink, and the `[&>span]` selector covers a label that is
+ * no longer the last child.
+ */
 class YuwSidebarMenuSubButtonDirective {
+    constructor() {
+        classes(() => yuwSidebarMenuSubButtonClass);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarMenuSubButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: YuwSidebarMenuSubButtonDirective, isStandalone: true, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]", hostDirectives: [{ directive: i1$q.HlmSidebarMenuSubButton, inputs: ["size", "size", "isActive", "isActive", "closeMobileSidebarOnClick", "closeMobileSidebarOnClick"] }], ngImport: i0 }); }
 }
@@ -4378,7 +4554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     selector: 'a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]',
                     hostDirectives: [{ directive: HlmSidebarMenuSubButton, inputs: ['size', 'isActive', 'closeMobileSidebarOnClick'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Host of a collapsed-state flyout: the element that scopes the overlay for one entry. Apply
  * alongside `[yuwSidebarMenuItem]` on the `<li>` holding the entry and its panel.
@@ -4466,7 +4642,7 @@ class YuwSidebarFlyoutTriggerDirective {
             });
             this.service.setContent(panel, this.viewContainerRef);
             const subscription = this.pointerOver
-                .pipe(distinctUntilChanged(), switchMap((visible) => timer(visible ? this.showDelay() : this.hideDelay()).pipe(map(() => visible))))
+                .pipe(distinctUntilChanged(), switchMap$1((visible) => timer(visible ? this.showDelay() : this.hideDelay()).pipe(map(() => visible))))
                 .subscribe((visible) => this.toggle(visible));
             onCleanup(() => {
                 subscription.unsubscribe();
@@ -4599,6 +4775,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
+const CARET_RIGHT_BORDER_CLASSES = `
+  border-l-4 border-t-4 border-t-transparent border-r-0
+  border-b-4 border-b-transparent -right-[4.5px] border-[var(--sidebar-foreground)]
+  absolute transition-opacity
+`;
 /**
  * Renders one {@link YuwSidebarContentDto} as the group/menu/item tree.
  *
@@ -4639,8 +4820,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * `'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.
+ * the accordion. And the collapse must have finished animating, which is what `railSettled` waits
+ * for: swapping the accordion for a flyout while the panel is still wide would tear the submenu out
+ * from under the pointer mid-transition. That same settled signal drives the rail's own styling, so
+ * the geometry and the submenu form always change on the same frame.
+ *
+ * The accordion opens and closes over a grid-rows transition rather than by appearing outright, which
+ * is why the submenu stays mounted and is switched between `0fr` and `1fr` instead of living behind an
+ * `@if`: height cannot animate from or to something that is not in the layout, and `auto` is not an
+ * animatable value. A closed submenu is `inert` and `aria-hidden`, so leaving it mounted does not hand
+ * keyboard users links to a menu they cannot see.
+ *
+ * Collapsing to the rail also clears every open accordion, which is what stops an expand from
+ * unfolding several submenus at once and shoving the entries below them down the panel. An entry
+ * holding the active route still opens on its own, since that one is answering "where am I" rather
+ * than restoring a stale choice.
  *
  * Which entries are expanded resolves in precedence order: an explicit toggle by the user wins,
  * otherwise an entry holding the active route is open — a deep link into a child should not hide the
@@ -4671,17 +4865,24 @@ class YuwSidebarNavComponent {
         this.router = inject(Router);
         this.injector = inject(Injector);
         this.sidebarService = inject(HlmSidebarService);
-        this.activeRoutes = new Map();
+        this.rail = inject(YuwSidebarRailService);
         this.content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
         this.itemClicked = output();
+        this.activeRoutes = new Map();
         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.badgeClass = yuwSidebarMenuBadgeClass;
+        this.groupLabelTextClass = yuwSidebarGroupLabelTextClass;
+        this.caretRightBorderClasses = CARET_RIGHT_BORDER_CLASSES;
+        this.isRail = computed(() => this.collapsible() === 'icon' && !this.sidebarService.isMobile() && this.rail.railSettled(), ...(ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []));
+        this.expandedIds = linkedSignal({ ...(ngDevMode ? { debugName: "expandedIds" } : /* istanbul ignore next */ {}), source: () => ({ content: this.content(), rail: this.isRail() }),
+            computation: ({ content, rail }, previous) => rail || previous
+                ? new Set()
+                : new Set(content.groups.flatMap((group) => group.items.filter((item) => item.expanded).map((item) => item.id))) });
         this._groups = computed(() => {
-            const toggles = this.userToggles();
+            const expandedIds = this.expandedIds();
+            const isRail = this.isRail();
             return this.content().groups.map((group) => ({
                 ...group,
                 items: group.items.map((item) => {
@@ -4690,13 +4891,15 @@ class YuwSidebarNavComponent {
                         activeOptions: { exact: child.exact ?? false },
                     }));
                     const hasChildren = children.length > 0;
+                    const expanded = isRail || !hasChildren ? false : expandedIds.has(item.id) || this.holdsActiveRoute(item.children);
                     return {
                         ...item,
                         children,
                         hasChildren,
-                        tooltipText: hasChildren ? undefined : (item.tooltip ?? item.label),
+                        tooltipText: hasChildren ? null : (item.tooltip ?? item.label),
                         activeOptions: { exact: item.exact ?? false },
-                        expanded: toggles.get(item.id) ?? (this.holdsActiveRoute(item.children) || (item.expanded ?? false)),
+                        expanded,
+                        submenuClass: `${yuwSidebarSubmenuWrapperClass} ${expanded ? yuwSidebarSubmenuOpenClass : yuwSidebarSubmenuClosedClass}`,
                     };
                 }),
             }));
@@ -4723,10 +4926,17 @@ class YuwSidebarNavComponent {
     onParentClick(id, expanded) {
         if (this.isRail())
             return;
-        this.userToggles.update((toggles) => new Map(toggles).set(id, !expanded));
+        this.expandedIds.update((ids) => {
+            const next = new Set(ids);
+            if (expanded)
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarNavComponent, isStandalone: true, selector: "yuw-sidebar-nav", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem yuwSidebarFlyoutHost>\n            <ng-template yuwSidebarFlyoutPanel #panel>\n              <div yuwSidebarFlyout>\n                <span [class]=\"flyoutLabelClass\">{{ item.label }}</span>\n                <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            </ng-template>\n\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"item.hasChildren ? onParentClick(item.id, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                  <div\n                    [class]=\"caretRightBorderClasses\"\n                    [class.opacity-100]=\"isRail()\"\n                    [class.opacity-0]=\"!isRail()\"\n                  ></div>\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: YuwSidebarGroupDirective, selector: "[yuwSidebarGroup], yuw-sidebar-group" }, { kind: "directive", type: YuwSidebarGroupLabelDirective, selector: "div[yuwSidebarGroupLabel], button[yuwSidebarGroupLabel]" }, { kind: "directive", type: YuwSidebarGroupContentDirective, selector: "div[yuwSidebarGroupContent]" }, { kind: "directive", type: YuwSidebarMenuDirective, selector: "ul[yuwSidebarMenu]" }, { kind: "directive", type: YuwSidebarMenuItemDirective, selector: "li[yuwSidebarMenuItem]" }, { kind: "directive", type: YuwSidebarMenuButtonDirective, selector: "button[yuwSidebarMenuButton], a[yuwSidebarMenuButton]" }, { kind: "directive", type: YuwSidebarMenuBadgeDirective, selector: "[yuwSidebarMenuBadge], yuw-sidebar-menu-badge" }, { kind: "directive", type: YuwSidebarMenuSubDirective, selector: "ul[yuwSidebarMenuSub]" }, { kind: "directive", type: YuwSidebarMenuSubItemDirective, selector: "li[yuwSidebarMenuSubItem]" }, { kind: "directive", type: YuwSidebarMenuSubButtonDirective, selector: "a[yuwSidebarMenuSubButton], button[yuwSidebarMenuSubButton]" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }, { kind: "directive", type: YuwSidebarFlyoutHostDirective, selector: "[yuwSidebarFlyoutHost]" }, { kind: "directive", type: YuwSidebarFlyoutPanelDirective, selector: "ng-template[yuwSidebarFlyoutPanel]" }, { kind: "directive", type: YuwSidebarFlyoutTriggerDirective, selector: "[yuwSidebarFlyoutTrigger]", inputs: ["yuwSidebarFlyoutTrigger", "align", "sideOffset", "showDelay", "hideDelay"] }, { kind: "directive", type: YuwSidebarFlyoutDirective, selector: "[yuwSidebarFlyout]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarNavComponent, decorators: [{
             type: Component,
@@ -4741,6 +4951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarMenuDirective,
                         YuwSidebarMenuItemDirective,
                         YuwSidebarMenuButtonDirective,
+                        HlmSidebarMenuButton,
                         YuwSidebarMenuBadgeDirective,
                         YuwSidebarMenuSubDirective,
                         YuwSidebarMenuSubItemDirective,
@@ -4752,7 +4963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarFlyoutDirective,
                     ], providers: [provideIcons({ lucideChevronRight })], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>{{ 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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #submenu let-item>\n  <ul yuwSidebarMenuSub>\n    @for (child of item.children; track child.id) {\n      <li yuwSidebarMenuSubItem>\n        @if (child.route) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [routerLink]=\"child.route\"\n            routerLinkActive\n            #childLink=\"routerLinkActive\"\n            [routerLinkActiveOptions]=\"child.activeOptions\"\n            [isActive]=\"childLink.isActive\"\n            [attr.aria-current]=\"childLink.isActive ? 'page' : null\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"childLink.isActive || child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else if (child.href) {\n          <a\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            [href]=\"child.href\"\n            [attr.target]=\"child.target\"\n            [attr.aria-disabled]=\"child.disabled ? 'true' : null\"\n            [class.pointer-events-none]=\"child.disabled\"\n          >\n            <span>{{ child.label }}</span>\n          </a>\n        } @else {\n          <button\n            yuwSidebarMenuSubButton\n            closeMobileSidebarOnClick\n            type=\"button\"\n            [disabled]=\"child.disabled ?? false\"\n            (click)=\"onItemClick(child.id, $event)\"\n          >\n            <span>{{ child.label }}</span>\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n@for (group of _groups(); track group.id) {\n  <div yuwSidebarGroup>\n    @if (group.label) {\n      <div yuwSidebarGroupLabel>\n        <span [class]=\"groupLabelTextClass\">{{ group.label }}</span>\n      </div>\n    }\n\n    <div yuwSidebarGroupContent>\n      <ul yuwSidebarMenu class=\"gap-1\">\n        @for (item of group.items; track item.id) {\n          <li yuwSidebarMenuItem yuwSidebarFlyoutHost>\n            <ng-template yuwSidebarFlyoutPanel #panel>\n              <div yuwSidebarFlyout>\n                <span [class]=\"flyoutLabelClass\">{{ item.label }}</span>\n                <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            </ng-template>\n\n            @if (item.route) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [routerLink]=\"item.route\"\n                routerLinkActive\n                #link=\"routerLinkActive\"\n                [routerLinkActiveOptions]=\"item.activeOptions\"\n                [isActive]=\"link.isActive\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-current]=\"link.isActive ? 'page' : null\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"(link.isActive && !item.hasChildren) || item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else if (item.href) {\n              <a\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                [href]=\"item.href\"\n                [attr.target]=\"item.target\"\n                [tooltip]=\"item.tooltipText\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [class.pointer-events-none]=\"item.disabled\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"onParentClick(item.id, item.expanded)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                }\n              </a>\n            } @else {\n              <button\n                yuwSidebarMenuButton\n                closeMobileSidebarOnClick\n                type=\"button\"\n                [tooltip]=\"item.tooltipText\"\n                [disabled]=\"item.disabled ?? false\"\n                [attr.aria-expanded]=\"item.hasChildren ? item.expanded : null\"\n                [yuwSidebarFlyoutTrigger]=\"item.hasChildren && isRail() ? panel : undefined\"\n                align=\"right\"\n                [sideOffset]=\"0\"\n                [showDelay]=\"120\"\n                [hideDelay]=\"300\"\n                (click)=\"item.hasChildren ? onParentClick(item.id, item.expanded) : onItemClick(item.id, $event)\"\n              >\n                @if (item.icon) {\n                  <ng-icon [name]=\"item.icon\" />\n                }\n                <span>{{ item.label }}</span>\n                @if (item.hasChildren) {\n                  <ng-icon name=\"lucideChevronRight\" [class]=\"chevronClass\" />\n                  <div\n                    [class]=\"caretRightBorderClasses\"\n                    [class.opacity-100]=\"isRail()\"\n                    [class.opacity-0]=\"!isRail()\"\n                  ></div>\n                }\n              </button>\n            }\n\n            @if (item.badge) {\n              <span yuwSidebarMenuBadge [class]=\"badgeClass\">{{ item.badge }}</span>\n            }\n\n            @if (item.hasChildren && !isRail()) {\n              <div\n                [class]=\"item.submenuClass\"\n                [attr.inert]=\"item.expanded ? null : ''\"\n                [attr.aria-hidden]=\"!item.expanded\"\n              >\n                <div>\n                  <ng-container [ngTemplateOutlet]=\"submenu\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                </div>\n              </div>\n            }\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n\n  @if (group.separatorAfter) {\n    <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n  }\n}\n" }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /**
@@ -4782,6 +4993,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Outputs:
  * - `itemClicked`: Emits `{id, event}` when a non-navigating entry (no `route`, no `href`) is
  *   activated, in either `content` or `footer`.
+ * - `collapsedChange`: Emits `true` when the sidebar collapses and `false` when it expands, reading
+ *   the mobile sheet or the desktop panel as appropriate. Fires the moment the state flips, so it is
+ *   the one to drive a caller's own layout, which should start moving with the panel.
+ * - `railSettledChange`: The same transition, but `true` only once the collapse has finished
+ *   animating, and `false` immediately on expand. Use it for anything that should not restyle against
+ *   a panel still mid-width — swapping a logo for a mark, say. The sidebar's own rail geometry is
+ *   keyed off this, which is why the labels stay put until the panel is actually narrow.
  *
  * The two forms compose rather than exclude each other, unlike `<yuw-button>`'s `buttons` input
  * which drops projected content when set. `content`/`footer` render their own region; anything
@@ -4834,6 +5052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
 class YuwSidebarComponent {
     constructor() {
         this.config = injectHlmSidebarConfig();
+        this._rail = inject(YuwSidebarRailService);
         this.side = input('left', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         this.variant = input('sidebar', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.collapsible = input('offcanvas', ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
@@ -4842,9 +5061,13 @@ class YuwSidebarComponent {
         this.content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
         this.footer = input(undefined, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
         this.itemClicked = output();
+        this._containerClass = computed(() => `${yuwSidebarContainerClass} ${this.sidebarContainerClass()}`, ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+        this._isRail = computed(() => this.collapsible() === 'icon' && this._rail.railSettled(), ...(ngDevMode ? [{ debugName: "_isRail" }] : /* istanbul ignore next */ []));
+        this.collapsedChange = outputFromObservable(toObservable(this._rail.collapsed).pipe(distinctUntilChanged()));
+        this.railSettledChange = outputFromObservable(toObservable(this._rail.railSettled).pipe(distinctUntilChanged()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content", "collapsible"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: YuwSidebarComponent, isStandalone: true, selector: "yuw-sidebar", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidthMobile: { classPropertyName: "sidebarWidthMobile", publicName: "sidebarWidthMobile", isSignal: true, isRequired: false, transformFunction: null }, sidebarContainerClass: { classPropertyName: "sidebarContainerClass", publicName: "sidebarContainerClass", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", collapsedChange: "collapsedChange", railSettledChange: "railSettledChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n", dependencies: [{ kind: "component", type: HlmSidebar, selector: "hlm-sidebar", inputs: ["sidebarWidthMobile", "side", "variant", "collapsible", "sidebarContainerClass"] }, { kind: "component", type: YuwSidebarNavComponent, selector: "yuw-sidebar-nav", inputs: ["content", "collapsible"], outputs: ["itemClicked"] }, { kind: "directive", type: YuwSidebarContentDirective, selector: "[yuwSidebarContent], yuw-sidebar-content" }, { kind: "directive", type: YuwSidebarFooterDirective, selector: "[yuwSidebarFooter], yuw-sidebar-footer" }, { kind: "directive", type: YuwSidebarSeparatorDirective, selector: "[yuwSidebarSeparator], yuw-sidebar-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: YuwSidebarComponent, decorators: [{
             type: Component,
@@ -4856,8 +5079,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         YuwSidebarSeparatorDirective,
                     ], host: {
                         class: 'contents',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"sidebarContainerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [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"] }] } });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-sidebar\n  [attr.data-yuw-rail]=\"_isRail() ? 'on' : null\"\n  [side]=\"side()\"\n  [variant]=\"variant()\"\n  [collapsible]=\"collapsible()\"\n  [sidebarWidthMobile]=\"sidebarWidthMobile()\"\n  [sidebarContainerClass]=\"_containerClass()\"\n>\n  <ng-content select=\"[yuwSidebarHeader], yuw-sidebar-header\" />\n\n  @if (content(); as nav) {\n    <div yuwSidebarContent>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarContentExtra]\" />\n    </div>\n  }\n\n  <ng-content />\n\n  @if (footer(); as nav) {\n    <div yuwSidebarFooter>\n      <div yuwSidebarSeparator class=\"mx-auto w-4/5!\"></div>\n      <yuw-sidebar-nav [content]=\"nav\" [collapsible]=\"collapsible()\" (itemClicked)=\"itemClicked.emit($event)\" />\n      <ng-content select=\"[yuwSidebarFooterExtra]\" />\n    </div>\n  }\n</hlm-sidebar>\n" }]
+        }], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], sidebarWidthMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidthMobile", required: false }] }], sidebarContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarContainerClass", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], railSettledChange: [{ type: i0.Output, args: ["railSettledChange"] }] } });
 
 /**
  * Icon button that toggles the sidebar open or collapsed. Works anywhere on the page, including
@@ -4894,5 +5117,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFlyoutDirective, YuwSidebarFlyoutHostDirective, YuwSidebarFlyoutPanelDirective, YuwSidebarFlyoutTriggerDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
+export { DATATABLE_ALIGN_CLASS, YUW_DATATABLE_FEATURES, YUW_PASSWORD_REVEAL_STATES, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwButtonComponent, YuwButtonGroupTextDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwComboboxComponent, YuwComboboxItemDirective, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwInputAddonImports, YuwInputComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFlyoutDirective, YuwSidebarFlyoutHostDirective, YuwSidebarFlyoutPanelDirective, YuwSidebarFlyoutTriggerDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, cn, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength };
 //# sourceMappingURL=yukit-web.mjs.map