@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-sidebar.mjs

@@ -0,0 +1,1504 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, model, input, computed, contentChild, signal, effect, untracked, forwardRef, ElementRef, viewChild, DestroyRef, afterRenderEffect, contentChildren, NgZone, TemplateRef } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { MlvBreakpointService, MlvRtlService, clamp, MlvStructural, mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvScrollbar } from '@malva-ui/core/scrollbar';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { MlvDrawer, MlvDrawerContent } from '@malva-ui/core/drawer';
+import { MLV_SIDEBAR_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { LucideChevronDown, LucideMenu, LucidePanelLeftClose, LucidePanelLeftOpen, LucideX, LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
+import { MlvPopupContainer, MlvPopup, MlvPopupContent, MlvPopupTrigger } from '@malva-ui/core/popup';
+import { MlvExpand } from '@malva-ui/core/expand';
+import { MlvBadge } from '@malva-ui/core/badge';
+import { MlvStatusIndicator } from '@malva-ui/core/status-indicator';
+import { RouterLinkActive } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { startWith } from 'rxjs';
+import { MlvButton } from '@malva-ui/core/button';
+import { MlvListItem } from '@malva-ui/core/list';
+import { MlvMenu, MlvMenuItem, MlvMenuTrigger } from '@malva-ui/core/menu';
+
+const SIDEBAR_CONTEXT = new InjectionToken('SIDEBAR_CONTEXT');
+
+/**
+ * Marks a sticky top region inside the sidebar.
+ * Applied to a container element that should remain visible at the top when content scrolls.
+ */
+class MlvSidebarHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarHeader, isStandalone: true, selector: "[mlvSidebarHeader]", host: { classAttribute: "mlv-sidebar__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarHeader]',
+                    host: {
+                        class: 'mlv-sidebar__header',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks a sticky bottom region inside the sidebar.
+ * Applied to a container element that should remain visible at the bottom when content scrolls.
+ */
+class MlvSidebarFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarFooter, isStandalone: true, selector: "[mlvSidebarFooter]", host: { classAttribute: "mlv-sidebar__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarFooter]',
+                    host: {
+                        class: 'mlv-sidebar__footer',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks the scrollable middle region between header and footer inside the sidebar.
+ * Gets `flex: 1 1 0` so it fills the remaining space. Intended to hold sidebar items and groups.
+ */
+class MlvSidebarContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarContent, isStandalone: true, selector: "[mlvSidebarContent]", host: { classAttribute: "mlv-sidebar__content" }, ngImport: i0, template: `
+    <mlv-scrollbar class="mlv-sidebar__content-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `, isInline: true, dependencies: [{ kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarContent, decorators: [{
+            type: Component,
+            args: [{
+                    // Attribute-selector component intentionally enhances the consumer's content container.
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[mlvSidebarContent]',
+                    template: `
+    <mlv-scrollbar class="mlv-sidebar__content-scrollbar">
+      <ng-content />
+    </mlv-scrollbar>
+  `,
+                    imports: [MlvScrollbar],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-sidebar__content',
+                    },
+                }]
+        }] });
+
+class MlvSidebar {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_SIDEBAR_I18N);
+    /**
+     * @private Signal-based viewport breakpoint service. Wraps the CDK
+     * `BreakpointObserver`, so it is SSR-safe — no direct `matchMedia` access.
+     */
+    _breakpoint = inject(MlvBreakpointService);
+    _rtlService = inject(MlvRtlService);
+    /** @private Owning document used to preserve focus when activation opens another modal. */
+    _document = inject(DOCUMENT);
+    /**
+     * @private Collapsed value captured when the responsive override kicked in,
+     * so leaving the breakpoint restores what the author/user had before.
+     * `null` while no responsive override is active.
+     */
+    _collapsedBeforeAutoOffcanvas = null;
+    /**
+     * Controls expanded vs. collapsed (icon-only) mode.
+     * Accepts truthy strings via `coerceBooleanProperty`.
+     * Two-way bindable via `[(collapsed)]`.
+     */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Total width of the sidebar host when expanded, including border and padding.
+     * Two-way bindable — updated by `setWidth()` during rail drag.
+     */
+    width = model('260px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Total width of the sidebar host when collapsed, including border and padding.
+     */
+    collapsedWidth = input('56px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * MlvLayout mode controlling how the sidebar renders and collapses.
+     * - `'icon'` — collapses to an icon-only rail (default).
+     * - `'offcanvas'` — slides off-screen when collapsed.
+     * - `'floating'` — floats over content when expanded.
+     * - `'fixed'` — always fully expanded; collapse is a no-op.
+     */
+    mode = input('icon', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Outer surface treatment for an inline sidebar. */
+    appearance = input('raised', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * Viewport breakpoint below which the sidebar automatically behaves as an
+     * `'offcanvas'` drawer, regardless of {@link mode}.
+     *
+     * `null` (the default) keeps the sidebar on {@link mode} at every width.
+     * Setting it to `'md'` makes the sidebar an overlay drawer below 768px — it
+     * closes itself on entering that range, opens from a `mlv-sidebar-trigger`,
+     * and dismisses on Escape, backdrop click, or focus leaving the drawer, like
+     * any `mode="offcanvas"` sidebar. The previous collapsed state is restored
+     * when the viewport grows back past the breakpoint.
+     *
+     * Thresholds come from `MLV_BREAKPOINT_CONFIG` (`provideMlvBreakpoints()`),
+     * so they stay in sync with the SCSS `breakpoint-*` mixins.
+     */
+    collapseBelow = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseBelow" }] : /* istanbul ignore next */ []));
+    /**
+     * Closes an open offcanvas Sidebar when an enabled projected action is
+     * activated. Inline Sidebar modes are unaffected.
+     *
+     * Disabled by default so existing navigation keeps its authored behavior.
+     */
+    closeOnActivation = input(false, { ...(ngDevMode ? { debugName: "closeOnActivation" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When true, the sidebar stretches to full viewport height.
+     * Adds the `mlv-sidebar--full-height` modifier class.
+     */
+    fullHeight = input(false, { ...(ngDevMode ? { debugName: "fullHeight" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Accessible name for the `navigation` landmark.
+     *
+     * Set this whenever a page renders more than one sidebar (or another
+     * `navigation` landmark) so assistive technology can tell them apart.
+     * When omitted, the localized `MLV_SIDEBAR_I18N.navigation` default is used.
+     *
+     * Note: a plain `aria-label` attribute on `<mlv-sidebar>` cannot be used for
+     * this — the host binding owns the attribute and would overwrite it.
+     */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum width in pixels the sidebar may be resized to via the drag rail.
+     */
+    minWidth = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum width in pixels the sidebar may be resized to via the drag rail.
+     */
+    maxWidth = input(480, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * @private True when {@link collapseBelow} is set and the viewport is
+     * narrower than that breakpoint.
+     */
+    _isBelowCollapseBreakpoint = computed(() => {
+        const breakpoint = this.collapseBelow();
+        return breakpoint !== null && this._breakpoint.isDown(breakpoint)();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isBelowCollapseBreakpoint" }] : /* istanbul ignore next */ []));
+    /**
+     * The layout mode actually in effect.
+     *
+     * Equals {@link mode} unless {@link collapseBelow} is set and the viewport is
+     * narrower than that breakpoint, in which case it is `'offcanvas'`. Bind
+     * against this (not `mode`) when mirroring the sidebar's layout elsewhere.
+     */
+    effectiveMode = computed(() => this._isBelowCollapseBreakpoint() ? 'offcanvas' : this.mode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective collapsed state. Always `false` in `'fixed'` mode so the sidebar
+     * never visually collapses regardless of the `collapsed` model value.
+     */
+    _effectiveCollapsed = computed(() => this.effectiveMode() !== 'fixed' && this.collapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveCollapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Accessible name bound to the host `aria-label`. Prefers the
+     * author-supplied {@link ariaLabel} and falls back to the localized default.
+     */
+    _resolvedAriaLabel = computed(() => this.ariaLabel() ?? this._i18n().navigation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Header slot directive reference. */
+    _headerRef = contentChild(MlvSidebarHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_headerRef" }] : /* istanbul ignore next */ []));
+    /** @protected Footer slot directive reference. */
+    _footerRef = contentChild(MlvSidebarFooter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_footerRef" }] : /* istanbul ignore next */ []));
+    /** @protected Content slot directive reference. */
+    _contentRef = contentChild(MlvSidebarContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_contentRef" }] : /* istanbul ignore next */ []));
+    /** @protected True when at least one slot directive is projected. */
+    _hasSlots = computed(() => !!(this._headerRef() || this._footerRef() || this._contentRef()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasSlots" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the current drawer leave was requested by projected activation. */
+    _activationClosePending = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activationClosePending" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Entering the responsive offcanvas range must start closed — an open
+        // drawer covering the page on a viewport change is never what the author
+        // asked for. Leaving the range restores the pre-override collapsed value.
+        effect(() => {
+            const below = this._isBelowCollapseBreakpoint();
+            untracked(() => {
+                if (below) {
+                    if (this._collapsedBeforeAutoOffcanvas === null) {
+                        this._collapsedBeforeAutoOffcanvas = this.collapsed();
+                        this.collapsed.set(true);
+                    }
+                    return;
+                }
+                if (this._collapsedBeforeAutoOffcanvas !== null) {
+                    this.collapsed.set(this._collapsedBeforeAutoOffcanvas);
+                    this._collapsedBeforeAutoOffcanvas = null;
+                }
+            });
+        });
+    }
+    /**
+     * Toggles the sidebar between collapsed and expanded.
+     * This is a no-op when the effective mode is `'fixed'`.
+     */
+    toggle() {
+        if (this.effectiveMode() === 'fixed')
+            return;
+        this.collapsed.update((v) => !v);
+    }
+    /** Set the sidebar width in pixels. Clamps to the [minWidth, maxWidth] range. */
+    setWidth(px) {
+        const clamped = clamp(px, this.minWidth(), this.maxWidth());
+        this.width.set(`${clamped}px`);
+    }
+    /** @protected Syncs drawer open/close back to collapsed model. */
+    _onDrawerOpenedChange(opened) {
+        if (opened)
+            this._activationClosePending.set(false);
+        this.collapsed.set(!opened);
+    }
+    /**
+     * @protected Closes only an open offcanvas Sidebar after a real enabled
+     * projected action. Search fields and non-interactive layout do not dismiss.
+     */
+    _onContainerClick(event) {
+        if (!this.closeOnActivation() ||
+            this.effectiveMode() !== 'offcanvas' ||
+            this._effectiveCollapsed()) {
+            return;
+        }
+        const container = event.currentTarget;
+        const target = event.target;
+        if (!target?.closest)
+            return;
+        const action = target.closest('button, a[href], [role="button"], [role="menuitem"]');
+        if (!action ||
+            !container.contains(action) ||
+            action.getAttribute('aria-disabled') === 'true' ||
+            action.matches('button:disabled')) {
+            return;
+        }
+        this._activationClosePending.set(true);
+        this.collapsed.set(true);
+    }
+    /** @private Finds a modal that an activation opened above the closing Drawer. */
+    _findOpenModal() {
+        const modals = this._document.querySelectorAll('.mlv-dialog-container[role="dialog"], .mlv-dialog-container[role="alertdialog"], [role="dialog"][aria-modal="true"]:not(.mlv-drawer), [role="alertdialog"][aria-modal="true"]:not(.mlv-drawer)');
+        return modals.item(modals.length - 1);
+    }
+    /**
+     * @protected Lets a newly opened modal retain focus; otherwise the Drawer
+     * restores the external Sidebar trigger that opened it.
+     */
+    _shouldRestoreDrawerFocus() {
+        if (!this._activationClosePending())
+            return true;
+        return this._findOpenModal() === null;
+    }
+    /**
+     * @protected Clears activation-specific focus policy after Drawer disposal
+     * and keeps focus in a still-open modal if removing the projected opener
+     * caused the browser to drop focus.
+     */
+    _onDrawerAfterClosed() {
+        const modal = this._activationClosePending() ? this._findOpenModal() : null;
+        this._activationClosePending.set(false);
+        if (modal?.isConnected) {
+            const active = this._document.activeElement;
+            const focusTarget = active instanceof HTMLElement && modal.contains(active)
+                ? active
+                : modal;
+            // Re-assert focus synchronously after the lower overlay is disposed.
+            // Browsers may otherwise drop focus when its captured opener disappears,
+            // even though focus had already moved into the still-connected modal.
+            focusTarget.focus();
+        }
+    }
+    /**
+     * @protected Handles `ArrowDown`/`ArrowUp` keydown events on the sidebar container
+     * to move focus between focusable sidebar items and group triggers in DOM order.
+     * Wraps around at the list boundaries and skips elements inside `.cdk-overlay-container`.
+     */
+    onContainerKeydown(event) {
+        const e = event;
+        const key = this._rtlService.normalizeArrowKey(e);
+        if (key !== DOWN_ARROW && key !== UP_ARROW)
+            return;
+        e.preventDefault();
+        const container = e.currentTarget;
+        // Collect the focus target for each navigable row in DOM order. A
+        // `mlv-sidebar-item` may itself be focusable (button-style rows) or defer
+        // to a projected link/button (navigational rows), so resolve each to its
+        // actual focus target and de-duplicate.
+        const items = [];
+        const seen = new Set();
+        const add = (el) => {
+            if (el && !seen.has(el) && !el.closest('.cdk-overlay-container')) {
+                seen.add(el);
+                items.push(el);
+            }
+        };
+        container
+            .querySelectorAll('mlv-sidebar-item, .mlv-sidebar-group__header, .mlv-sidebar-group__icon-btn, button, a[href]')
+            .forEach((el) => {
+            if (el.tagName.toLowerCase() === 'mlv-sidebar-item') {
+                add(el.hasAttribute('tabindex')
+                    ? el
+                    : el.querySelector('a[href], button, [tabindex]'));
+                return;
+            }
+            // Focusable elements inside a sidebar item are resolved via the item above.
+            if (el.closest('mlv-sidebar-item'))
+                return;
+            add(el);
+        });
+        const idx = items.indexOf(document.activeElement);
+        if (idx === -1)
+            return;
+        if (key === DOWN_ARROW) {
+            items[(idx + 1) % items.length]?.focus();
+        }
+        else {
+            items[(idx - 1 + items.length) % items.length]?.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebar, isStandalone: true, selector: "mlv-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, collapseBelow: { classPropertyName: "collapseBelow", publicName: "collapseBelow", isSignal: true, isRequired: false, transformFunction: null }, closeOnActivation: { classPropertyName: "closeOnActivation", publicName: "closeOnActivation", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", width: "widthChange" }, host: { attributes: { "role": "navigation" }, properties: { "class.mlv-sidebar--collapsed": "_effectiveCollapsed()", "class": "\"mlv-sidebar--\" + effectiveMode()", "class.mlv-sidebar--raised": "appearance() === \"raised\"", "class.mlv-sidebar--flat": "appearance() === \"flat\"", "class.mlv-sidebar--full-height": "fullHeight()", "style.--mlv-sidebar-expanded-width": "width()", "style.--mlv-sidebar-collapsed-width": "collapsedWidth()", "attr.aria-label": "_resolvedAriaLabel()" }, classAttribute: "mlv-sidebar" }, providers: [
+            {
+                provide: SIDEBAR_CONTEXT,
+                useExisting: forwardRef(() => MlvSidebar),
+            },
+        ], queries: [{ propertyName: "_headerRef", first: true, predicate: MlvSidebarHeader, descendants: true, isSignal: true }, { propertyName: "_footerRef", first: true, predicate: MlvSidebarFooter, descendants: true, isSignal: true }, { propertyName: "_contentRef", first: true, predicate: MlvSidebarContent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Container captured once so the single <ng-content/> projection works in\n     both the offcanvas (drawer overlay) and the inline branches. Two default\n     <ng-content> slots would leave one empty (Angular projects into the last). -->\n<ng-template #projectedContent>\n  <ng-content />\n</ng-template>\n\n<ng-template #body>\n  <div\n    class=\"mlv-sidebar__container\"\n    (click)=\"_onContainerClick($event)\"\n    (keydown)=\"onContainerKeydown($event)\"\n    tabindex=\"-1\"\n  >\n    @if (_hasSlots()) {\n    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n    } @else {\n    <mlv-scrollbar class=\"mlv-sidebar__scrollbar\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n    </mlv-scrollbar>\n    }\n  </div>\n</ng-template>\n\n@if (effectiveMode() === 'offcanvas') {\n<mlv-drawer\n  [opened]=\"!_effectiveCollapsed()\"\n  position=\"left\"\n  [size]=\"width()\"\n  [hasBackdrop]=\"true\"\n  [restoreFocus]=\"_shouldRestoreDrawerFocus()\"\n  (openedChange)=\"_onDrawerOpenedChange($event)\"\n  (afterClosed)=\"_onDrawerAfterClosed()\"\n>\n  <ng-template mlvDrawerContent>\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </ng-template>\n</mlv-drawer>\n} @else {\n<ng-container [ngTemplateOutlet]=\"body\" />\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-sidebar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-sidebar *{box-sizing:border-box}.mlv-sidebar{--mlv-sidebar-border-width: .0625rem;--mlv-sidebar-gutter: var(--mlv-spacing-2);--mlv-sidebar-row-height: 2.25rem;--mlv-sidebar-hover-bg: var(--mlv-background-neutral-1);--mlv-sidebar-active-bg: var(--mlv-background-selected);--mlv-sidebar-rail-color: var(--mlv-border-normal);--mlv-sidebar-icon-column-min: 1.75rem;--mlv-sidebar-icon-column-width: max( var(--mlv-sidebar-icon-column-min, 1.75rem), calc( var(--mlv-sidebar-collapsed-width, 3.5rem) - var( --mlv-sidebar-gutter ) - var(--mlv-sidebar-gutter) - var(--mlv-sidebar-border-width) - var( --mlv-sidebar-border-width ) ) );display:block;position:relative;width:var(--mlv-sidebar-expanded-width, 16.25rem);border:var(--mlv-sidebar-border-width) solid var(--mlv-border-subtle);border-radius:calc(var(--mlv-radius-m) + var(--mlv-spacing-2));box-shadow:var(--mlv-shadow-raised);padding:var(--mlv-sidebar-gutter);background:var(--mlv-background-raised);overflow:visible;transition:width var(--mlv-duration-normal) var(--mlv-ease-in-out-strong)}.mlv-sidebar__container{display:flex;flex-direction:column;height:100%;gap:.0625rem;width:100%;overflow:hidden}.mlv-sidebar--collapsed{width:var(--mlv-sidebar-collapsed-width, 3.5rem)}.mlv-sidebar--flat{border-radius:0;box-shadow:var(--mlv-shadow-flat)}.mlv-sidebar__header{flex-shrink:0;width:100%}.mlv-sidebar__content{flex:1 1 0;display:flex;overflow:hidden;min-height:0;width:100%}.mlv-sidebar__scrollbar,.mlv-sidebar__content-scrollbar{flex:1 1 auto;width:100%;min-height:0}.mlv-sidebar__scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content,.mlv-sidebar__content-scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar__scrollbar>.mlv-scrollbar__viewport,.mlv-sidebar__content-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-sidebar__footer{flex-shrink:0;width:100%}.mlv-sidebar--offcanvas{width:0;min-width:0;flex:0 0 auto;overflow:hidden;border:none;box-shadow:none;padding:0;background:transparent}.mlv-sidebar--floating{position:absolute;z-index:100;box-shadow:var(--mlv-shadow-overlay);height:100%;transition:width var(--mlv-duration-normal) var(--mlv-ease-in-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-drawer)}.mlv-sidebar--floating.mlv-sidebar--collapsed{transform:translate(calc(-100% * var(--mlv-inline-direction)))}.mlv-sidebar--full-height{position:sticky;top:var(--mlv-sidebar-offset-top, 0px);height:calc(100dvh - var(--mlv-sidebar-offset-top, 0px) - var(--mlv-sidebar-offset-bottom, 0px));align-self:flex-start}.mlv-sidebar--full-height .mlv-sidebar__container{overflow:hidden}[class*=--tight] .mlv-sidebar:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-sidebar[class*=--tight]{--mlv-sidebar-row-height: var(--mlv-spacing-6)}[class*=--compact] .mlv-sidebar:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-sidebar[class*=--compact]{--mlv-sidebar-row-height: var(--mlv-height-xs)}[class*=--spacious] .mlv-sidebar:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-sidebar[class*=--spacious]{--mlv-sidebar-row-height: var(--mlv-height-s)}[class*=--airy] .mlv-sidebar:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-sidebar[class*=--airy]{--mlv-sidebar-row-height: var(--mlv-height-m)}@media(prefers-reduced-motion:reduce){.mlv-sidebar,.mlv-sidebar--floating{transition-duration:var(--mlv-duration-instant)}}.mlv-drawer .mlv-sidebar,.mlv-drawer .mlv-sidebar .mlv-sidebar__container{width:100%}.mlv-drawer .mlv-sidebar .mlv-sidebar-item__label{display:block;width:auto;opacity:1}}\n"], dependencies: [{ kind: "component", type: MlvDrawer, selector: "mlv-drawer", inputs: ["position", "ariaLabel", "ariaLabelledBy", "size", "resizable", "snapPoints", "defaultSnap", "minSize", "maxSize"] }, { kind: "directive", type: MlvDrawerContent, selector: "[mlvDrawerContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvScrollbar, selector: "mlv-scrollbar", inputs: ["orientation", "scrollbarSize", "disabled", "ariaLabel", "viewportTabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MlvDrawer, MlvDrawerContent, NgTemplateOutlet, MlvScrollbar], providers: [
+                        {
+                            provide: SIDEBAR_CONTEXT,
+                            useExisting: forwardRef(() => MlvSidebar),
+                        },
+                    ], host: {
+                        class: 'mlv-sidebar',
+                        '[class.mlv-sidebar--collapsed]': '_effectiveCollapsed()',
+                        '[class]': '"mlv-sidebar--" + effectiveMode()',
+                        '[class.mlv-sidebar--raised]': 'appearance() === "raised"',
+                        '[class.mlv-sidebar--flat]': 'appearance() === "flat"',
+                        '[class.mlv-sidebar--full-height]': 'fullHeight()',
+                        '[style.--mlv-sidebar-expanded-width]': 'width()',
+                        '[style.--mlv-sidebar-collapsed-width]': 'collapsedWidth()',
+                        role: 'navigation',
+                        '[attr.aria-label]': '_resolvedAriaLabel()',
+                    }, template: "<!-- Container captured once so the single <ng-content/> projection works in\n     both the offcanvas (drawer overlay) and the inline branches. Two default\n     <ng-content> slots would leave one empty (Angular projects into the last). -->\n<ng-template #projectedContent>\n  <ng-content />\n</ng-template>\n\n<ng-template #body>\n  <div\n    class=\"mlv-sidebar__container\"\n    (click)=\"_onContainerClick($event)\"\n    (keydown)=\"onContainerKeydown($event)\"\n    tabindex=\"-1\"\n  >\n    @if (_hasSlots()) {\n    <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n    } @else {\n    <mlv-scrollbar class=\"mlv-sidebar__scrollbar\">\n      <ng-container [ngTemplateOutlet]=\"projectedContent\" />\n    </mlv-scrollbar>\n    }\n  </div>\n</ng-template>\n\n@if (effectiveMode() === 'offcanvas') {\n<mlv-drawer\n  [opened]=\"!_effectiveCollapsed()\"\n  position=\"left\"\n  [size]=\"width()\"\n  [hasBackdrop]=\"true\"\n  [restoreFocus]=\"_shouldRestoreDrawerFocus()\"\n  (openedChange)=\"_onDrawerOpenedChange($event)\"\n  (afterClosed)=\"_onDrawerAfterClosed()\"\n>\n  <ng-template mlvDrawerContent>\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </ng-template>\n</mlv-drawer>\n} @else {\n<ng-container [ngTemplateOutlet]=\"body\" />\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-sidebar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-sidebar *{box-sizing:border-box}.mlv-sidebar{--mlv-sidebar-border-width: .0625rem;--mlv-sidebar-gutter: var(--mlv-spacing-2);--mlv-sidebar-row-height: 2.25rem;--mlv-sidebar-hover-bg: var(--mlv-background-neutral-1);--mlv-sidebar-active-bg: var(--mlv-background-selected);--mlv-sidebar-rail-color: var(--mlv-border-normal);--mlv-sidebar-icon-column-min: 1.75rem;--mlv-sidebar-icon-column-width: max( var(--mlv-sidebar-icon-column-min, 1.75rem), calc( var(--mlv-sidebar-collapsed-width, 3.5rem) - var( --mlv-sidebar-gutter ) - var(--mlv-sidebar-gutter) - var(--mlv-sidebar-border-width) - var( --mlv-sidebar-border-width ) ) );display:block;position:relative;width:var(--mlv-sidebar-expanded-width, 16.25rem);border:var(--mlv-sidebar-border-width) solid var(--mlv-border-subtle);border-radius:calc(var(--mlv-radius-m) + var(--mlv-spacing-2));box-shadow:var(--mlv-shadow-raised);padding:var(--mlv-sidebar-gutter);background:var(--mlv-background-raised);overflow:visible;transition:width var(--mlv-duration-normal) var(--mlv-ease-in-out-strong)}.mlv-sidebar__container{display:flex;flex-direction:column;height:100%;gap:.0625rem;width:100%;overflow:hidden}.mlv-sidebar--collapsed{width:var(--mlv-sidebar-collapsed-width, 3.5rem)}.mlv-sidebar--flat{border-radius:0;box-shadow:var(--mlv-shadow-flat)}.mlv-sidebar__header{flex-shrink:0;width:100%}.mlv-sidebar__content{flex:1 1 0;display:flex;overflow:hidden;min-height:0;width:100%}.mlv-sidebar__scrollbar,.mlv-sidebar__content-scrollbar{flex:1 1 auto;width:100%;min-height:0}.mlv-sidebar__scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content,.mlv-sidebar__content-scrollbar>.mlv-scrollbar__viewport>.mlv-scrollbar__content{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar__scrollbar>.mlv-scrollbar__viewport,.mlv-sidebar__content-scrollbar>.mlv-scrollbar__viewport{overflow-x:hidden}.mlv-sidebar__footer{flex-shrink:0;width:100%}.mlv-sidebar--offcanvas{width:0;min-width:0;flex:0 0 auto;overflow:hidden;border:none;box-shadow:none;padding:0;background:transparent}.mlv-sidebar--floating{position:absolute;z-index:100;box-shadow:var(--mlv-shadow-overlay);height:100%;transition:width var(--mlv-duration-normal) var(--mlv-ease-in-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-drawer)}.mlv-sidebar--floating.mlv-sidebar--collapsed{transform:translate(calc(-100% * var(--mlv-inline-direction)))}.mlv-sidebar--full-height{position:sticky;top:var(--mlv-sidebar-offset-top, 0px);height:calc(100dvh - var(--mlv-sidebar-offset-top, 0px) - var(--mlv-sidebar-offset-bottom, 0px));align-self:flex-start}.mlv-sidebar--full-height .mlv-sidebar__container{overflow:hidden}[class*=--tight] .mlv-sidebar:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-sidebar[class*=--tight]{--mlv-sidebar-row-height: var(--mlv-spacing-6)}[class*=--compact] .mlv-sidebar:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-sidebar[class*=--compact]{--mlv-sidebar-row-height: var(--mlv-height-xs)}[class*=--spacious] .mlv-sidebar:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-sidebar[class*=--spacious]{--mlv-sidebar-row-height: var(--mlv-height-s)}[class*=--airy] .mlv-sidebar:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-sidebar[class*=--airy]{--mlv-sidebar-row-height: var(--mlv-height-m)}@media(prefers-reduced-motion:reduce){.mlv-sidebar,.mlv-sidebar--floating{transition-duration:var(--mlv-duration-instant)}}.mlv-drawer .mlv-sidebar,.mlv-drawer .mlv-sidebar .mlv-sidebar__container{width:100%}.mlv-drawer .mlv-sidebar .mlv-sidebar-item__label{display:block;width:auto;opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], collapseBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseBelow", required: false }] }], closeOnActivation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnActivation", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], _headerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarHeader), { isSignal: true }] }], _footerRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarFooter), { isSignal: true }] }], _contentRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarContent), { isSignal: true }] }] } });
+
+class MlvSidebarItemIcon extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarItemIcon, isStandalone: true, selector: "[mlvSidebarItemIcon]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarItemIcon]',
+                }]
+        }] });
+
+class MlvSidebarItemHost {
+    /** Whether the item is the currently active navigation target. */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemHost, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarItemHost, isStandalone: true, selector: "[mlvSidebarItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem", "tabindex": "0" }, properties: { "class.mlv-sidebar-item--active": "active()", "attr.aria-selected": "active()" }, classAttribute: "mlv-sidebar-item" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarItem]',
+                    host: {
+                        class: 'mlv-sidebar-item',
+                        '[class.mlv-sidebar-item--active]': 'active()',
+                        role: 'treeitem',
+                        '[attr.aria-selected]': 'active()',
+                        tabindex: '0',
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+class MlvSidebarItemTitle extends MlvStructural {
+    /**
+     * Optional active state on the directive (available but not currently
+     * consumed by `MlvSidebarItem`).
+     */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarItemTitle, isStandalone: true, selector: "[mlvSidebarItemTitle]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarItemTitle]',
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+class MlvSidebarItem {
+    /** @private Parent sidebar context providing collapsed/flyout state. */
+    _ctx = inject(SIDEBAR_CONTEXT, { optional: true });
+    /** @private Host element, scanned for a genuinely focusable projected control. */
+    _host = inject((ElementRef));
+    /** Accessible label; used as aria-label, fallback text, and tooltip in collapsed mode. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Explicit active state; combined with router link detection in computedActive. */
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Optional badge/count shown on this item. Rendered as a trailing
+     * `mlv-badge` when the sidebar is expanded, and as a `mlv-status-indicator`
+     * dot (top-right of the icon) when the sidebar is collapsed — where a full
+     * badge does not fit the icon rail. `null`/`''` renders nothing.
+     *
+     * This is the sanctioned way to attach a badge; it composes with a projected
+     * `[mlvSidebarItemTitle]` (the badge renders after the custom title).
+     */
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Semantic tone applied to both the expanded badge and the collapsed status dot. */
+    badgeTone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
+    /** When true, the collapsed-mode status dot pulses to draw attention. */
+    badgePulse = input(false, { ...(ngDevMode ? { debugName: "badgePulse" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** @private Sidebar i18n slice (used to phrase the badge count in the aria-label). */
+    _i18n = inject(MLV_SIDEBAR_I18N);
+    /** @private ICU resolver for the pluralised notification count. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @protected Icon slot template projected via `[mlvSidebarItemIcon]`. */
+    iconRef = contentChild(MlvSidebarItemIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
+    /** @protected Custom title template projected via `[mlvSidebarItemTitle]`. */
+    titleRef = contentChild(MlvSidebarItemTitle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleRef" }] : /* istanbul ignore next */ []));
+    /** @private Detects Angular router active state from a projected routerLinkActive directive. */
+    _routerLink = contentChild(RouterLinkActive, { ...(ngDevMode ? { debugName: "_routerLink" } : /* istanbul ignore next */ {}), descendants: true });
+    /** True if active() or the nested RouterLinkActive reports active. */
+    computedActive = computed(() => {
+        return this.active() || this._routerLinkActive();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedActive" }] : /* istanbul ignore next */ []));
+    /** True when the sidebar is collapsed and this item is not inside a flyout. */
+    isCollapsed = computed(() => {
+        const collapsed = this._ctx?.collapsed() ?? false;
+        const inFlyout = this._ctx?.inFlyout?.() ?? false;
+        return collapsed && !inFlyout;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * @private True when the projected content contains a genuinely focusable
+     * control (an `<a href>`, `<button>`, form field, or `[tabindex="0"]`).
+     * Populated after render by scanning the host subtree — a projected
+     * `[mlvSidebarItemTitle]` that only contains text/badges does NOT count.
+     */
+    _hasProjectedFocusable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasProjectedFocusable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the host itself is the interactive control. `true` unless the
+     * projected content already contains its own focusable control — the host
+     * then behaves as a `role="button"` (or `role="menuitem"` inside a flyout)
+     * row with `tabindex="0"` and an `aria-label`. When a focusable control IS
+     * projected (e.g. a router `<a>` link), that element is the single
+     * interactive target and the host stays a presentational wrapper, avoiding an
+     * invalid `role="listitem"` (no `role="list"` ancestor) and nested focusable
+     * controls. Detection is by actual focusable content, not by the mere
+     * presence of a title template, so text/badge-only titles stay interactive.
+     */
+    _interactiveHost = computed(() => !this._hasProjectedFocusable(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_interactiveHost" }] : /* istanbul ignore next */ []));
+    /** @protected True while this item renders inside a collapsed-mode group flyout (a `role="menu"`). */
+    _inFlyout = computed(() => this._ctx?.inFlyout?.() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inFlyout" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved host `role`. `null` when the host is a presentational
+     * wrapper around a projected focusable control; otherwise `menuitem` inside a
+     * flyout menu, or `button` for a standalone interactive row.
+     */
+    _hostRole = computed(() => {
+        if (!this._interactiveHost())
+            return null;
+        return this._inFlyout() ? 'menuitem' : 'button';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hostRole" }] : /* istanbul ignore next */ []));
+    /** @protected True when a non-empty badge value is set. */
+    _hasBadge = computed(() => {
+        const b = this.badge();
+        return b !== null && b !== '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasBadge" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved host `aria-label`. `null` when the host is a
+     * presentational wrapper around a projected control. Otherwise the item
+     * `label()`, with the badge folded in when set (e.g. `"Inbox, 3
+     * notifications"`) — since the host `aria-label` overrides the visible badge
+     * text, this keeps the count announced in both expanded and collapsed states,
+     * and is the only carrier of the count when the collapsed dot replaces the
+     * badge.
+     */
+    _resolvedAriaLabel = computed(() => {
+        if (!this._interactiveHost())
+            return null;
+        const base = this.label();
+        if (!this._hasBadge())
+            return base;
+        return `${base}, ${this._announceBadge(this.badge())}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @private Router link active state tracked via afterRenderEffect. */
+    _routerLinkActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_routerLinkActive" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the tooltip container for programmatic open/close. */
+    _tooltipContainer = viewChild('tooltipContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipContainer" }] : /* istanbul ignore next */ []));
+    /** @private Registered for automatic cleanup of the routerLinkActive subscription. */
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        // Detect whether the projected content contributes its own focusable control.
+        // Re-runs when the title template or collapsed state changes, since the
+        // collapsed link overlay can alter the row's focusable descendants.
+        afterRenderEffect(() => {
+            this.titleRef();
+            this.isCollapsed();
+            // `querySelector` inspects descendants only, so the host's own (reactive)
+            // tabindex is never matched — we detect a genuinely focusable *projected*
+            // control (e.g. a router `<a href>`), independent of layout geometry.
+            const focusable = this._host.nativeElement.querySelector('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            this._hasProjectedFocusable.set(!!focusable);
+        });
+        afterRenderEffect(() => {
+            const rla = this._routerLink();
+            rla?.isActiveChange
+                .pipe(startWith(rla.isActive), takeUntilDestroyed(this._destroyRef))
+                .subscribe((isActive) => {
+                this._routerLinkActive.set(isActive);
+            });
+        });
+    }
+    /**
+     * @private Phrases a badge value for the accessible name. A pure numeric
+     * value is pluralised via the `notifications` ICU key (e.g. `"3
+     * notifications"`); any other value is announced verbatim (e.g. `"New"`).
+     */
+    _announceBadge(badge) {
+        const str = String(badge).trim();
+        if (/^\d+$/.test(str)) {
+            return this._resolver.resolve(this._i18n(), 'notifications', { count: Number(str) });
+        }
+        return str;
+    }
+    /** @protected Activates the host on Enter/Space when it is the interactive control. */
+    _onKeyActivate(event) {
+        // When a projected title link is present it is the interactive element and
+        // handles its own keyboard activation natively — do nothing here to avoid
+        // activating twice.
+        if (!this._interactiveHost())
+            return;
+        event.preventDefault();
+        event.currentTarget.click();
+    }
+    /** @protected Opens the collapsed-mode tooltip on hover/focus. */
+    _onMouseEnter() {
+        if (this.isCollapsed()) {
+            this._tooltipContainer()?.open();
+        }
+    }
+    /** @protected Closes the collapsed-mode tooltip on mouse-leave/blur. */
+    _onMouseLeave() {
+        this._tooltipContainer()?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarItem, isStandalone: true, selector: "mlv-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null }, badgePulse: { classPropertyName: "badgePulse", publicName: "badgePulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "_onKeyActivate($event)", "keydown.space": "_onKeyActivate($event)", "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()", "focusin": "_onMouseEnter()", "focusout": "_onMouseLeave()" }, properties: { "class.mlv-sidebar-item--active": "computedActive()", "class.mlv-sidebar-item--collapsed": "isCollapsed()", "attr.role": "_hostRole()", "attr.tabindex": "_interactiveHost() ? 0 : null", "attr.aria-label": "_resolvedAriaLabel()", "attr.aria-current": "computedActive() ? \"page\" : null" }, classAttribute: "mlv-sidebar-item" }, queries: [{ propertyName: "iconRef", first: true, predicate: MlvSidebarItemIcon, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: MlvSidebarItemTitle, descendants: true, isSignal: true }, { propertyName: "_routerLink", first: true, predicate: RouterLinkActive, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"mlv-sidebar-item__icon\" aria-hidden=\"true\">\n  <ng-template [ngTemplateOutlet]=\"iconRef()?.templateRef ?? null\" />\n\n  <!-- Collapsed rail: status dot replaces the badge, pinned to the icon's top-right corner. Decorative \u2014 the count is folded into the host aria-label. -->\n  @if (isCollapsed() && _hasBadge()) {\n  <mlv-status-indicator\n    class=\"mlv-sidebar-item__status\"\n    [tone]=\"badgeTone()\"\n    [pulse]=\"badgePulse()\"\n  />\n  }\n</span>\n\n<!-- The label stays mounted for an interruptible CSS fade, but becomes inert and clipped immediately. -->\n<span\n  class=\"mlv-sidebar-item__label\"\n  [attr.aria-hidden]=\"isCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isCollapsed() ? '' : null\"\n>\n  @if (titleRef()?.templateRef; as titleTpl) {\n  <ng-template [ngTemplateOutlet]=\"titleTpl\"></ng-template>\n  } @else { {{ label() }} }\n</span>\n@if (_hasBadge()) {\n<mlv-badge\n  class=\"mlv-sidebar-item__badge\"\n  [tone]=\"badgeTone()\"\n  muted\n  mlvDensity=\"tight\"\n  aria-hidden=\"true\"\n  >{{ badge() }}</mlv-badge\n>\n}\n\n<!-- Link overlay: covers the icon area when fully collapsed so the router link is still clickable -->\n@if ( isCollapsed() && _hasProjectedFocusable() && titleRef()?.templateRef; as\nlinkTpl ) {\n<span class=\"mlv-sidebar-item__link-overlay\">\n  <ng-template [ngTemplateOutlet]=\"linkTpl\" />\n</span>\n}\n\n<!-- Tooltip \u2014 shown on hover/focus in collapsed mode via mlv-popup -->\n<mlv-popup-container #tooltipContainer class=\"mlv-sidebar-item__tooltip-anchor\">\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right-start\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-item__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n", styles: ["@layer mlv.components{.mlv-sidebar-item{position:relative;display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border-radius:var(--mlv-radius-m);font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-snug);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-item *{color:inherit}.mlv-sidebar-item__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0}.mlv-sidebar-item__icon>*{flex-shrink:0}.mlv-sidebar-item svg{flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-sidebar-item:hover,.mlv-sidebar-item:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-item--active{color:var(--mlv-text-on-selected)!important;font-weight:600}.mlv-sidebar-item.mlv-sidebar-item--active,.mlv-sidebar-item.mlv-sidebar-item--active:hover,.mlv-sidebar-item.mlv-sidebar-item--active:focus-visible{background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-selected))}.mlv-sidebar-item__label{min-width:0;padding-inline-end:var(--mlv-spacing-2);font-size:var(--mlv-font-size-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__label>a{color:inherit;text-decoration:inherit;display:block}.mlv-sidebar-item__badge{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__status{position:absolute;top:calc(50% - .625rem);inset-inline-end:calc(50% - .625rem);transform:translate(calc(50% * var(--mlv-inline-direction)),-50%);pointer-events:none}.mlv-sidebar-item__link-overlay{position:absolute;inset:0;pointer-events:none}.mlv-sidebar-item__link-overlay>a{display:block;position:absolute;inset:0;pointer-events:auto;font-size:0;color:transparent;text-decoration:none;border-radius:var(--mlv-radius-m)}.mlv-sidebar-item__link-overlay>a:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-item__tooltip-anchor{position:absolute;inset:0;pointer-events:none;padding:var(--mlv-padding-s)}.mlv-sidebar-item__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__label{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;pointer-events:none;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__badge{margin-inline-end:0;opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-item__label,.mlv-sidebar-item__badge{transition-duration:var(--mlv-duration-instant)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvBadge, selector: "mlv-badge", inputs: ["tone", "rounded", "muted"] }, { kind: "component", type: MlvStatusIndicator, selector: "mlv-status-indicator", inputs: ["tone", "pulse", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-item', imports: [
+                        NgTemplateOutlet,
+                        MlvPopupContainer,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvBadge,
+                        MlvStatusIndicator,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-sidebar-item',
+                        '[class.mlv-sidebar-item--active]': 'computedActive()',
+                        '[class.mlv-sidebar-item--collapsed]': 'isCollapsed()',
+                        '[attr.role]': '_hostRole()',
+                        '[attr.tabindex]': '_interactiveHost() ? 0 : null',
+                        '[attr.aria-label]': '_resolvedAriaLabel()',
+                        '[attr.aria-current]': 'computedActive() ? "page" : null',
+                        '(keydown.enter)': '_onKeyActivate($event)',
+                        '(keydown.space)': '_onKeyActivate($event)',
+                        '(mouseenter)': '_onMouseEnter()',
+                        '(mouseleave)': '_onMouseLeave()',
+                        '(focusin)': '_onMouseEnter()',
+                        '(focusout)': '_onMouseLeave()',
+                    }, template: "<span class=\"mlv-sidebar-item__icon\" aria-hidden=\"true\">\n  <ng-template [ngTemplateOutlet]=\"iconRef()?.templateRef ?? null\" />\n\n  <!-- Collapsed rail: status dot replaces the badge, pinned to the icon's top-right corner. Decorative \u2014 the count is folded into the host aria-label. -->\n  @if (isCollapsed() && _hasBadge()) {\n  <mlv-status-indicator\n    class=\"mlv-sidebar-item__status\"\n    [tone]=\"badgeTone()\"\n    [pulse]=\"badgePulse()\"\n  />\n  }\n</span>\n\n<!-- The label stays mounted for an interruptible CSS fade, but becomes inert and clipped immediately. -->\n<span\n  class=\"mlv-sidebar-item__label\"\n  [attr.aria-hidden]=\"isCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isCollapsed() ? '' : null\"\n>\n  @if (titleRef()?.templateRef; as titleTpl) {\n  <ng-template [ngTemplateOutlet]=\"titleTpl\"></ng-template>\n  } @else { {{ label() }} }\n</span>\n@if (_hasBadge()) {\n<mlv-badge\n  class=\"mlv-sidebar-item__badge\"\n  [tone]=\"badgeTone()\"\n  muted\n  mlvDensity=\"tight\"\n  aria-hidden=\"true\"\n  >{{ badge() }}</mlv-badge\n>\n}\n\n<!-- Link overlay: covers the icon area when fully collapsed so the router link is still clickable -->\n@if ( isCollapsed() && _hasProjectedFocusable() && titleRef()?.templateRef; as\nlinkTpl ) {\n<span class=\"mlv-sidebar-item__link-overlay\">\n  <ng-template [ngTemplateOutlet]=\"linkTpl\" />\n</span>\n}\n\n<!-- Tooltip \u2014 shown on hover/focus in collapsed mode via mlv-popup -->\n<mlv-popup-container #tooltipContainer class=\"mlv-sidebar-item__tooltip-anchor\">\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right-start\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-item__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n", styles: ["@layer mlv.components{.mlv-sidebar-item{position:relative;display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border-radius:var(--mlv-radius-m);font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-snug);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-item *{color:inherit}.mlv-sidebar-item__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0}.mlv-sidebar-item__icon>*{flex-shrink:0}.mlv-sidebar-item svg{flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-sidebar-item:hover,.mlv-sidebar-item:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-item--active{color:var(--mlv-text-on-selected)!important;font-weight:600}.mlv-sidebar-item.mlv-sidebar-item--active,.mlv-sidebar-item.mlv-sidebar-item--active:hover,.mlv-sidebar-item.mlv-sidebar-item--active:focus-visible{background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-selected))}.mlv-sidebar-item__label{min-width:0;padding-inline-end:var(--mlv-spacing-2);font-size:var(--mlv-font-size-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__label>a{color:inherit;text-decoration:inherit;display:block}.mlv-sidebar-item__badge{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__status{position:absolute;top:calc(50% - .625rem);inset-inline-end:calc(50% - .625rem);transform:translate(calc(50% * var(--mlv-inline-direction)),-50%);pointer-events:none}.mlv-sidebar-item__link-overlay{position:absolute;inset:0;pointer-events:none}.mlv-sidebar-item__link-overlay>a{display:block;position:absolute;inset:0;pointer-events:auto;font-size:0;color:transparent;text-decoration:none;border-radius:var(--mlv-radius-m)}.mlv-sidebar-item__link-overlay>a:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-item__tooltip-anchor{position:absolute;inset:0;pointer-events:none;padding:var(--mlv-padding-s)}.mlv-sidebar-item__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__label{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;pointer-events:none;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__badge{margin-inline-end:0;opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-item__label,.mlv-sidebar-item__badge{transition-duration:var(--mlv-duration-instant)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], badgePulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePulse", required: false }] }], iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarItemIcon), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarItemTitle), { isSignal: true }] }], _routerLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RouterLinkActive), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], _tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
+
+class MlvSidebarGroup {
+    /** @private Parent sidebar context (skipSelf) used to read collapsed/mode state and proxy toggles. */
+    _parentCtx = inject(SIDEBAR_CONTEXT, {
+        skipSelf: true,
+        optional: true,
+    });
+    /** @private Document handle used to resolve the overlay-rendered flyout panel by id. */
+    _document = inject(DOCUMENT);
+    _rtlService = inject(MlvRtlService);
+    /** @protected Stable id linking the collapsed-mode flyout panel so its focusable items can be resolved. */
+    _flyoutId = mlvNextId('mlv-sidebar-flyout');
+    /** Required label for the group header and flyout title. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional badge/count for the group. Rendered as a trailing `mlv-badge` in
+     * the expanded accordion header and next to the flyout title, and as a
+     * `mlv-status-indicator` dot (top-right of the icon button) when the sidebar
+     * is collapsed. `null`/`''` renders nothing.
+     */
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Semantic tone applied to the group badge and the collapsed status dot. */
+    badgeTone = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
+    /** When true, the collapsed-mode status dot pulses to draw attention. */
+    badgePulse = input(false, { ...(ngDevMode ? { debugName: "badgePulse" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** @private Sidebar i18n slice (used to phrase the badge count in the aria-label). */
+    _i18n = inject(MLV_SIDEBAR_I18N);
+    /** @private ICU resolver for the pluralised notification count. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @protected True when a non-empty badge value is set. */
+    _hasBadge = computed(() => {
+        const b = this.badge();
+        return b !== null && b !== '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasBadge" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Collapsed icon-button `aria-label`: the group `label()` with the
+     * badge count folded in (e.g. `"Projects, 3 notifications"`), since the
+     * collapsed dot is decorative and carries no text.
+     */
+    _resolvedAriaLabel = computed(() => {
+        const base = this.label();
+        if (!this._hasBadge())
+            return base;
+        return `${base}, ${this._announceBadge(this.badge())}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Projected group icon template, rendered in the header and flyout. */
+    iconRef = contentChild(MlvSidebarItemIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
+    /** @protected Projected sidebar items, used to derive the active-child highlight. */
+    _childItems = contentChildren(MlvSidebarItem, { ...(ngDevMode ? { debugName: "_childItems" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @protected Template of the group's child items, rendered in the accordion and flyout. */
+    childrenTpl = viewChild.required('childrenRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenTpl" }] : /* istanbul ignore next */ []));
+    /** @protected Icon trigger button element, used as the flyout/tooltip anchor and focus target. */
+    _triggerBtn = viewChild('triggerBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerBtn" }] : /* istanbul ignore next */ []));
+    /** @protected Reference to the flyout popup container (collapsed mode). */
+    _flyoutContainer = viewChild('flyoutContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_flyoutContainer" }] : /* istanbul ignore next */ []));
+    /** @protected Reference to the flyout popup component for state reading. */
+    _flyoutPopup = viewChild('flyoutPopup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_flyoutPopup" }] : /* istanbul ignore next */ []));
+    /** @protected Tooltip popup shown on hover in collapsed mode. */
+    _tooltipContainer = viewChild('tooltipContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipContainer" }] : /* istanbul ignore next */ []));
+    /** Whether the accordion is expanded (expanded sidebar mode). */
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the flyout popup is currently open.
+     * Derived from the popup component's `opened` signal.
+     */
+    flyoutOpen = computed(() => this._flyoutPopup()?.opened() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutOpen" }] : /* istanbul ignore next */ []));
+    /** True when the parent sidebar is in collapsed (icon-only) mode. */
+    isSidebarCollapsed = computed(() => this._parentCtx?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** True when at least one child item is active — drives active highlight on the group. */
+    hasActiveChild = computed(() => this._childItems().some((item) => item.computedActive()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveChild" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Effective open state of the accordion panel.
+     *
+     * `expanded` is public and writable, so a host that auto-expands the group
+     * owning the active route can set it while the sidebar is collapsed. The
+     * accordion stays mounted in that state (its header fades but keeps the icon
+     * column in place), so honouring the write would open an empty panel inside
+     * the icon rail — a ghost tree line and reserved height — and, because
+     * `#childrenRef` can only be projected once, it would also pull the children
+     * out of the open flyout and leave it showing just its header. Gating on the
+     * collapsed state here makes that unreachable regardless of write order; the
+     * constructor effect still resets `expanded` when collapse begins.
+     */
+    _accordionOpen = computed(() => this.expanded() && !this.isSidebarCollapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_accordionOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Close whichever disclosure belongs to the representation that is
+        // becoming inactive. The group header itself remains mounted so its label
+        // can fade while the fixed icon track stays in place.
+        effect(() => {
+            if (this.isSidebarCollapsed()) {
+                this.expanded.set(false);
+            }
+            else {
+                this._flyoutContainer()?.close();
+            }
+        });
+        // Register the icon button as the anchor for the tooltip.
+        effect(() => {
+            const btn = this._triggerBtn();
+            const tooltipContainer = this._tooltipContainer();
+            if (btn && tooltipContainer) {
+                tooltipContainer.registerTrigger(btn, false);
+            }
+        });
+        // Dismiss tooltip and move focus into the flyout when it opens (menu-button
+        // pattern). The panel is rendered into a CDK overlay, so wait one frame for
+        // the portal to attach before focusing its first item.
+        effect(() => {
+            if (this.flyoutOpen()) {
+                this._tooltipContainer()?.close();
+                requestAnimationFrame(() => {
+                    if (this.flyoutOpen())
+                        this._focusFirstFlyoutItem();
+                });
+            }
+        });
+    }
+    /**
+     * @private Phrases a badge value for the accessible name. A pure numeric
+     * value is pluralised via the `notifications` ICU key (e.g. `"3
+     * notifications"`); any other value is announced verbatim (e.g. `"New"`).
+     */
+    _announceBadge(badge) {
+        const str = String(badge).trim();
+        if (/^\d+$/.test(str)) {
+            return this._resolver.resolve(this._i18n(), 'notifications', { count: Number(str) });
+        }
+        return str;
+    }
+    // ─── Accordion (expanded sidebar) ──────────────────────────────────────────
+    /** Toggles the accordion open/closed state. */
+    toggle() {
+        this.expanded.update((v) => !v);
+    }
+    // ─── Flyout (collapsed sidebar) ─────────────────────────────────────────────
+    /** @protected Roving keyboard navigation (Arrow/Home/End/Escape) within the open flyout panel. */
+    onFlyoutKeydown(event) {
+        const e = event;
+        const panel = e.currentTarget;
+        const key = this._rtlService.normalizeArrowKey(e);
+        // Close flyout and return focus to trigger
+        if (key === LEFT_ARROW || e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            this._flyoutContainer()?.close();
+            this._triggerBtn()?.nativeElement.focus();
+            return;
+        }
+        // Sidebar items in the flyout may be focusable via their own host
+        // (button-style rows) or via a projected link/button (navigational rows).
+        const items = Array.from(panel.querySelectorAll('a[href], button, [tabindex="0"]')).filter((el) => !el.hasAttribute('disabled'));
+        if (!items.length)
+            return;
+        const idx = items.indexOf(document.activeElement);
+        if (key === DOWN_ARROW) {
+            e.preventDefault();
+            items[(idx + 1) % items.length].focus();
+        }
+        else if (key === UP_ARROW) {
+            e.preventDefault();
+            items[(idx - 1 + items.length) % items.length].focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            items[0].focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            items[items.length - 1].focus();
+        }
+    }
+    /**
+     * @protected Handles Enter/Space (toggle) and ArrowRight (open) on the
+     * collapsed-mode icon trigger. When the flyout is already open, ArrowDown
+     * enters it (focuses the first item) instead of bubbling to the sidebar
+     * container's roving nav — so an open flyout is never skipped past.
+     */
+    onTriggerKeydown(event) {
+        const e = event;
+        const key = this._rtlService.normalizeArrowKey(e);
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this._flyoutContainer()?.toggle();
+        }
+        else if (key === RIGHT_ARROW) {
+            e.preventDefault();
+            if (this.flyoutOpen()) {
+                this._focusFirstFlyoutItem();
+            }
+            else {
+                this._flyoutContainer()?.open();
+            }
+        }
+        else if (key === DOWN_ARROW && this.flyoutOpen()) {
+            // Enter the open flyout rather than letting the sidebar container move
+            // focus to the next trigger (which would orphan this flyout).
+            e.preventDefault();
+            e.stopPropagation();
+            this._focusFirstFlyoutItem();
+        }
+    }
+    /**
+     * @protected Closes the flyout and returns focus to the icon trigger when a
+     * child item inside it is activated.
+     *
+     * The menu-button pattern expects the menu to close once a command is
+     * chosen — without this a `routerLink` navigation left the flyout hanging
+     * over the new page. Enter/Space are covered too: `MlvSidebarItem` activates
+     * a button-style row by calling `.click()` on its host, and a projected
+     * anchor dispatches a real click, so both reach this bubbling handler.
+     *
+     * Clicks on the flyout header or on empty panel space are ignored — only a
+     * target inside a `.mlv-sidebar-item` (its host, projected link or button)
+     * counts as an activation.
+     */
+    onFlyoutClick(event) {
+        const target = event.target;
+        if (!target?.closest('.mlv-sidebar-item'))
+            return;
+        this._flyoutContainer()?.close();
+        this._triggerBtn()?.nativeElement.focus();
+    }
+    /**
+     * @protected Closes the flyout when keyboard focus leaves it entirely (Tab
+     * out, or focus moving to another trigger) so it is never left orphaned-open.
+     * Focus moves between items inside the panel, or back to the owning trigger,
+     * are ignored.
+     */
+    onFlyoutFocusOut(event) {
+        const next = event.relatedTarget;
+        // Focus lost to nothing (e.g. window blur) — keep the flyout open.
+        if (!next)
+            return;
+        const panel = this._document.getElementById(this._flyoutId);
+        const trigger = this._triggerBtn()?.nativeElement ?? null;
+        if (panel?.contains(next) || next === trigger)
+            return;
+        this._flyoutContainer()?.close();
+    }
+    /** @private Moves focus to the first focusable item inside the open flyout panel. */
+    _focusFirstFlyoutItem() {
+        const panel = this._document.getElementById(this._flyoutId);
+        const first = panel?.querySelector('a[href], button:not([disabled]), [tabindex="0"]');
+        first?.focus();
+    }
+    /** Opens the tooltip when hovering the icon button (collapsed mode, flyout not open). */
+    onIconBtnMouseEnter() {
+        if (!this.flyoutOpen()) {
+            this._tooltipContainer()?.open();
+        }
+    }
+    /** Closes the tooltip when the pointer leaves the icon button. */
+    onIconBtnMouseLeave() {
+        this._tooltipContainer()?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarGroup, isStandalone: true, selector: "mlv-sidebar-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null }, badgePulse: { classPropertyName: "badgePulse", publicName: "badgePulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-sidebar-group-host" }, providers: [
+            {
+                provide: SIDEBAR_CONTEXT,
+                useFactory: () => {
+                    const group = inject(forwardRef(() => MlvSidebarGroup));
+                    const parentCtx = inject(SIDEBAR_CONTEXT, {
+                        skipSelf: true,
+                        optional: true,
+                    });
+                    return {
+                        collapsed: parentCtx?.collapsed ?? signal(false),
+                        inFlyout: group.flyoutOpen,
+                        mode: parentCtx?.mode ?? signal('icon'),
+                        effectiveMode: parentCtx?.effectiveMode ?? parentCtx?.mode,
+                        // Proxy to parent — intentionally no-op when group is the root context provider
+                        toggle: () => parentCtx?.toggle(),
+                        setWidth: (px) => parentCtx?.setWidth(px),
+                    };
+                },
+            },
+        ], queries: [{ propertyName: "iconRef", first: true, predicate: MlvSidebarItemIcon, descendants: true, isSignal: true }, { propertyName: "_childItems", predicate: MlvSidebarItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "childrenTpl", first: true, predicate: ["childrenRef"], descendants: true, isSignal: true }, { propertyName: "_triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "_flyoutContainer", first: true, predicate: ["flyoutContainer"], descendants: true, isSignal: true }, { propertyName: "_flyoutPopup", first: true, predicate: ["flyoutPopup"], descendants: true, isSignal: true }, { propertyName: "_tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Children captured once \u2014 rendered in accordion OR flyout \u2500\u2500\u2500 -->\n<ng-template #childrenRef>\n  <ng-content />\n</ng-template>\n\n<!-- The expanded header remains mounted during collapse so its text can fade\n     without moving the icon out of the shared fixed-width column. -->\n<div\n  class=\"mlv-sidebar-group\"\n  [class.mlv-sidebar-group--expanded]=\"expanded()\"\n  [class.mlv-sidebar-group--collapsed]=\"isSidebarCollapsed()\"\n  [attr.aria-hidden]=\"isSidebarCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isSidebarCollapsed() ? '' : null\"\n>\n  <button\n    class=\"mlv-sidebar-group__header\"\n    type=\"button\"\n    [class.mlv-sidebar-group__header--active]=\"hasActiveChild()\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <span class=\"mlv-sidebar-group__icon\">\n      <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    </span>\n    }\n    <span class=\"mlv-sidebar-group__label\">{{ label() }}</span>\n    @if (_hasBadge()) {\n    <mlv-badge\n      class=\"mlv-sidebar-group__badge\"\n      [tone]=\"badgeTone()\"\n      muted\n      mlvDensity=\"tight\"\n      aria-hidden=\"true\"\n      >{{ badge() }}</mlv-badge\n    >\n    }\n    <svg\n      class=\"mlv-sidebar-group__arrow\"\n      [class.mlv-sidebar-group__arrow--open]=\"expanded()\"\n      lucideChevronDown\n      size=\"16\"\n    />\n  </button>\n\n  <mlv-expand\n    class=\"mlv-sidebar-group__content\"\n    [opened]=\"_accordionOpen()\"\n    (openedChange)=\"expanded.set($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n  </mlv-expand>\n</div>\n\n<!-- \u2500\u2500\u2500 COLLAPSED sidebar: icon button + popup flyout on click \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (isSidebarCollapsed()) {\n<mlv-popup-container #flyoutContainer class=\"mlv-sidebar-group__collapsed\">\n  <button\n    #triggerBtn\n    mlvPopupTrigger\n    [triggerOn]=\"'click'\"\n    class=\"mlv-sidebar-group__icon-btn\"\n    type=\"button\"\n    [class.mlv-sidebar-group__icon-btn--active]=\"hasActiveChild()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-expanded]=\"flyoutOpen()\"\n    [ariaHasPopup]=\"'menu'\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (mouseenter)=\"onIconBtnMouseEnter()\"\n    (mouseleave)=\"onIconBtnMouseLeave()\"\n    (focus)=\"onIconBtnMouseEnter()\"\n    (blur)=\"onIconBtnMouseLeave()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    } @if (_hasBadge()) {\n    <mlv-status-indicator\n      class=\"mlv-sidebar-group__status\"\n      [tone]=\"badgeTone()\"\n      [pulse]=\"badgePulse()\"\n    />\n    }\n  </button>\n\n  <mlv-popup\n    #flyoutPopup\n    position=\"right-start\"\n    [minWidth]=\"180\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__flyout-popup\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-sidebar-group__flyout\"\n        [id]=\"_flyoutId\"\n        role=\"menu\"\n        [attr.aria-label]=\"label()\"\n        (keydown)=\"onFlyoutKeydown($event)\"\n        (click)=\"onFlyoutClick($event)\"\n        (focusout)=\"onFlyoutFocusOut($event)\"\n        tabindex=\"-1\"\n      >\n        <div class=\"mlv-sidebar-group__flyout-header\" aria-hidden=\"true\">\n          <span class=\"mlv-sidebar-group__flyout-title\">{{ label() }}</span>\n          @if (_hasBadge()) {\n          <mlv-badge\n            class=\"mlv-sidebar-group__flyout-badge\"\n            [tone]=\"badgeTone()\"\n            muted\n            mlvDensity=\"tight\"\n            >{{ badge() }}</mlv-badge\n          >\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n\n<!-- Tooltip anchored to the icon button (registered via effect) -->\n<mlv-popup-container #tooltipContainer>\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-sidebar-group-host{display:grid;width:100%;min-width:0}.mlv-sidebar-group-host>.mlv-sidebar-group,.mlv-sidebar-group-host>.mlv-sidebar-group__collapsed{grid-area:1/1;min-width:0}.mlv-sidebar-group{width:100%;min-width:0}.mlv-sidebar-group--collapsed{pointer-events:none}.mlv-sidebar-group__header{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);text-align:start;transition-property:background-color,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);line-height:var(--mlv-line-height-snug);outline:none}.mlv-sidebar-group__header *{color:inherit}.mlv-sidebar-group__header:hover,.mlv-sidebar-group__header:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__header:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-group__header--active{color:var(--mlv-text-on-selected);font-weight:600}.mlv-sidebar-group__icon{display:flex;align-items:center;justify-content:center}.mlv-sidebar-group__label{font-size:var(--mlv-font-size-l);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-group__badge{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-group__arrow{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__arrow--open{transform:rotate(180deg)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__label{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__badge,.mlv-sidebar-group--collapsed .mlv-sidebar-group__arrow{opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-group__content{margin-inline-start:calc(var(--mlv-sidebar-icon-column-width, 3.5rem) / 2);border-inline-start:.09375rem solid transparent;padding-inline-start:.53125rem;padding-top:0;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-default),padding-top var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__content.mlv-expand--open{border-color:var(--mlv-sidebar-rail-color, var(--mlv-border-normal));padding-top:.125rem}.mlv-sidebar-group__content .mlv-expand__body-inner{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-group__icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;color:var(--mlv-text-secondary);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default);outline:none}.mlv-sidebar-group__icon-btn:after{content:\"\\203a\";position:absolute;inset-inline-end:.1875rem;bottom:.0625rem;font-size:.875rem;font-weight:700;line-height:1;opacity:.8;pointer-events:none}.mlv-sidebar-group__icon-btn:hover,.mlv-sidebar-group__icon-btn:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__icon-btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:hover,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:focus-visible{color:var(--mlv-text-on-selected);background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-selected))}.mlv-sidebar-group__icon-btn:active{transform:scale(.97)}.mlv-sidebar-group__icon-btn .mlv-sidebar-group__status{position:absolute;top:calc(50% - .625rem);inset-inline-end:calc(50% - .625rem);transform:translate(calc(50% * var(--mlv-inline-direction)),-50%);pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-sidebar-group__icon-btn,.mlv-sidebar-group__arrow,.mlv-sidebar-group__label,.mlv-sidebar-group__badge,.mlv-sidebar-group__content{transition-duration:var(--mlv-duration-instant)}}.mlv-sidebar-group__flyout-popup.mlv-popup{padding:var(--mlv-spacing-2)}.mlv-sidebar-group__flyout{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__flyout-header{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:.3125rem .625rem .5rem;font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-secondary);border-bottom:.0625rem solid var(--mlv-border-normal);margin-bottom:.125rem;white-space:nowrap}.mlv-sidebar-group__flyout-title{flex:1;overflow:hidden;text-overflow:ellipsis}.mlv-sidebar-group__flyout-badge{flex-shrink:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvExpand, selector: "mlv-expand", inputs: ["opened", "disabled", "ariaLabel", "ariaLabelledBy"], outputs: ["openedChange"] }, { kind: "component", type: MlvBadge, selector: "mlv-badge", inputs: ["tone", "rounded", "muted"] }, { kind: "component", type: MlvStatusIndicator, selector: "mlv-status-indicator", inputs: ["tone", "pulse", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-group', imports: [
+                        NgTemplateOutlet,
+                        LucideChevronDown,
+                        MlvPopupContainer,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvExpand,
+                        MlvBadge,
+                        MlvStatusIndicator,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mlv-sidebar-group-host' }, providers: [
+                        {
+                            provide: SIDEBAR_CONTEXT,
+                            useFactory: () => {
+                                const group = inject(forwardRef(() => MlvSidebarGroup));
+                                const parentCtx = inject(SIDEBAR_CONTEXT, {
+                                    skipSelf: true,
+                                    optional: true,
+                                });
+                                return {
+                                    collapsed: parentCtx?.collapsed ?? signal(false),
+                                    inFlyout: group.flyoutOpen,
+                                    mode: parentCtx?.mode ?? signal('icon'),
+                                    effectiveMode: parentCtx?.effectiveMode ?? parentCtx?.mode,
+                                    // Proxy to parent — intentionally no-op when group is the root context provider
+                                    toggle: () => parentCtx?.toggle(),
+                                    setWidth: (px) => parentCtx?.setWidth(px),
+                                };
+                            },
+                        },
+                    ], template: "<!-- \u2500\u2500\u2500 Children captured once \u2014 rendered in accordion OR flyout \u2500\u2500\u2500 -->\n<ng-template #childrenRef>\n  <ng-content />\n</ng-template>\n\n<!-- The expanded header remains mounted during collapse so its text can fade\n     without moving the icon out of the shared fixed-width column. -->\n<div\n  class=\"mlv-sidebar-group\"\n  [class.mlv-sidebar-group--expanded]=\"expanded()\"\n  [class.mlv-sidebar-group--collapsed]=\"isSidebarCollapsed()\"\n  [attr.aria-hidden]=\"isSidebarCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isSidebarCollapsed() ? '' : null\"\n>\n  <button\n    class=\"mlv-sidebar-group__header\"\n    type=\"button\"\n    [class.mlv-sidebar-group__header--active]=\"hasActiveChild()\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <span class=\"mlv-sidebar-group__icon\">\n      <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    </span>\n    }\n    <span class=\"mlv-sidebar-group__label\">{{ label() }}</span>\n    @if (_hasBadge()) {\n    <mlv-badge\n      class=\"mlv-sidebar-group__badge\"\n      [tone]=\"badgeTone()\"\n      muted\n      mlvDensity=\"tight\"\n      aria-hidden=\"true\"\n      >{{ badge() }}</mlv-badge\n    >\n    }\n    <svg\n      class=\"mlv-sidebar-group__arrow\"\n      [class.mlv-sidebar-group__arrow--open]=\"expanded()\"\n      lucideChevronDown\n      size=\"16\"\n    />\n  </button>\n\n  <mlv-expand\n    class=\"mlv-sidebar-group__content\"\n    [opened]=\"_accordionOpen()\"\n    (openedChange)=\"expanded.set($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n  </mlv-expand>\n</div>\n\n<!-- \u2500\u2500\u2500 COLLAPSED sidebar: icon button + popup flyout on click \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (isSidebarCollapsed()) {\n<mlv-popup-container #flyoutContainer class=\"mlv-sidebar-group__collapsed\">\n  <button\n    #triggerBtn\n    mlvPopupTrigger\n    [triggerOn]=\"'click'\"\n    class=\"mlv-sidebar-group__icon-btn\"\n    type=\"button\"\n    [class.mlv-sidebar-group__icon-btn--active]=\"hasActiveChild()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-expanded]=\"flyoutOpen()\"\n    [ariaHasPopup]=\"'menu'\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (mouseenter)=\"onIconBtnMouseEnter()\"\n    (mouseleave)=\"onIconBtnMouseLeave()\"\n    (focus)=\"onIconBtnMouseEnter()\"\n    (blur)=\"onIconBtnMouseLeave()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    } @if (_hasBadge()) {\n    <mlv-status-indicator\n      class=\"mlv-sidebar-group__status\"\n      [tone]=\"badgeTone()\"\n      [pulse]=\"badgePulse()\"\n    />\n    }\n  </button>\n\n  <mlv-popup\n    #flyoutPopup\n    position=\"right-start\"\n    [minWidth]=\"180\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__flyout-popup\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-sidebar-group__flyout\"\n        [id]=\"_flyoutId\"\n        role=\"menu\"\n        [attr.aria-label]=\"label()\"\n        (keydown)=\"onFlyoutKeydown($event)\"\n        (click)=\"onFlyoutClick($event)\"\n        (focusout)=\"onFlyoutFocusOut($event)\"\n        tabindex=\"-1\"\n      >\n        <div class=\"mlv-sidebar-group__flyout-header\" aria-hidden=\"true\">\n          <span class=\"mlv-sidebar-group__flyout-title\">{{ label() }}</span>\n          @if (_hasBadge()) {\n          <mlv-badge\n            class=\"mlv-sidebar-group__flyout-badge\"\n            [tone]=\"badgeTone()\"\n            muted\n            mlvDensity=\"tight\"\n            >{{ badge() }}</mlv-badge\n          >\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n\n<!-- Tooltip anchored to the icon button (registered via effect) -->\n<mlv-popup-container #tooltipContainer>\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@charset \"UTF-8\";@layer mlv.components{.mlv-sidebar-group-host{display:grid;width:100%;min-width:0}.mlv-sidebar-group-host>.mlv-sidebar-group,.mlv-sidebar-group-host>.mlv-sidebar-group__collapsed{grid-area:1/1;min-width:0}.mlv-sidebar-group{width:100%;min-width:0}.mlv-sidebar-group--collapsed{pointer-events:none}.mlv-sidebar-group__header{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);text-align:start;transition-property:background-color,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);line-height:var(--mlv-line-height-snug);outline:none}.mlv-sidebar-group__header *{color:inherit}.mlv-sidebar-group__header:hover,.mlv-sidebar-group__header:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__header:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-group__header--active{color:var(--mlv-text-on-selected);font-weight:600}.mlv-sidebar-group__icon{display:flex;align-items:center;justify-content:center}.mlv-sidebar-group__label{font-size:var(--mlv-font-size-l);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-group__badge{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-group__arrow{flex-shrink:0;margin-inline-end:var(--mlv-spacing-2);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__arrow--open{transform:rotate(180deg)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__label{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__badge,.mlv-sidebar-group--collapsed .mlv-sidebar-group__arrow{opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-group__content{margin-inline-start:calc(var(--mlv-sidebar-icon-column-width, 3.5rem) / 2);border-inline-start:.09375rem solid transparent;padding-inline-start:.53125rem;padding-top:0;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-default),padding-top var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__content.mlv-expand--open{border-color:var(--mlv-sidebar-rail-color, var(--mlv-border-normal));padding-top:.125rem}.mlv-sidebar-group__content .mlv-expand__body-inner{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-group__icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;color:var(--mlv-text-secondary);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default);outline:none}.mlv-sidebar-group__icon-btn:after{content:\"\\203a\";position:absolute;inset-inline-end:.1875rem;bottom:.0625rem;font-size:.875rem;font-weight:700;line-height:1;opacity:.8;pointer-events:none}.mlv-sidebar-group__icon-btn:hover,.mlv-sidebar-group__icon-btn:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__icon-btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:hover,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:focus-visible{color:var(--mlv-text-on-selected);background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-selected))}.mlv-sidebar-group__icon-btn:active{transform:scale(.97)}.mlv-sidebar-group__icon-btn .mlv-sidebar-group__status{position:absolute;top:calc(50% - .625rem);inset-inline-end:calc(50% - .625rem);transform:translate(calc(50% * var(--mlv-inline-direction)),-50%);pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-sidebar-group__icon-btn,.mlv-sidebar-group__arrow,.mlv-sidebar-group__label,.mlv-sidebar-group__badge,.mlv-sidebar-group__content{transition-duration:var(--mlv-duration-instant)}}.mlv-sidebar-group__flyout-popup.mlv-popup{padding:var(--mlv-spacing-2)}.mlv-sidebar-group__flyout{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__flyout-header{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:.3125rem .625rem .5rem;font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-secondary);border-bottom:.0625rem solid var(--mlv-border-normal);margin-bottom:.125rem;white-space:nowrap}.mlv-sidebar-group__flyout-title{flex:1;overflow:hidden;text-overflow:ellipsis}.mlv-sidebar-group__flyout-badge{flex-shrink:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], badgePulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePulse", required: false }] }], iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarItemIcon), { isSignal: true }] }], _childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvSidebarItem), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], childrenTpl: [{ type: i0.ViewChild, args: ['childrenRef', { isSignal: true }] }], _triggerBtn: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], _flyoutContainer: [{ type: i0.ViewChild, args: ['flyoutContainer', { isSignal: true }] }], _flyoutPopup: [{ type: i0.ViewChild, args: ['flyoutPopup', { isSignal: true }] }], _tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
+
+class MlvSidebarRail {
+    /** Minimum sidebar width in px during drag. */
+    minWidth = input(200, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Maximum sidebar width in px during drag. */
+    maxWidth = input(480, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /** Width below which the sidebar snaps to collapsed. */
+    snapThreshold = input(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapThreshold" }] : /* istanbul ignore next */ []));
+    /** @private Sidebar context for reading/writing state. */
+    _context = inject(SIDEBAR_CONTEXT);
+    /** @private Reference to the host element. */
+    _elementRef = inject((ElementRef));
+    /** @private Angular zone for running outside zone during drag. */
+    _ngZone = inject(NgZone);
+    /** @private Destroy reference for cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Normalizes horizontal resize arrows for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /** @protected Whether a drag is in progress. */
+    _isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
+    /** @protected Current sidebar width in pixels (for ARIA). */
+    _currentWidthPx = signal(260, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentWidthPx" }] : /* istanbul ignore next */ []));
+    /** @private Sidebar container element reference, resolved on first drag. */
+    _sidebarEl = null;
+    /** @private Stored transition value to restore after drag. */
+    _savedTransition = '';
+    /** @private Bound pointermove handler for cleanup. */
+    _onPointerMoveBound = this._onPointerMove.bind(this);
+    /** @private Bound pointerup handler for cleanup. */
+    _onPointerUpBound = this._onPointerUp.bind(this);
+    /** @private Animation frame ID for drag throttle. */
+    _rafId = 0;
+    /** @private Whether to snap to collapsed on pointerup. */
+    _shouldSnap = false;
+    /** @private Whether to expand from collapsed on pointerup. */
+    _shouldExpand = false;
+    /** @private Width to apply after expanding from collapsed state. */
+    _expandWidth = 0;
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            this._cleanup();
+        });
+    }
+    /** @protected Handle double-click to toggle collapsed state. */
+    _onDoubleClick() {
+        this._context.toggle();
+    }
+    /** @protected Handle keyboard navigation. */
+    _onKeydown(event) {
+        const step = 10;
+        switch (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case LEFT_ARROW:
+                event.preventDefault();
+                if (!this._context.collapsed()) {
+                    this._adjustWidth(-step);
+                }
+                break;
+            case RIGHT_ARROW:
+                event.preventDefault();
+                if (this._context.collapsed()) {
+                    this._context.toggle();
+                }
+                else {
+                    this._adjustWidth(step);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (!this._context.collapsed()) {
+                    this._context.toggle();
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (this._context.collapsed()) {
+                    this._context.toggle();
+                }
+                break;
+        }
+    }
+    /** @protected Handle pointer down to start drag. */
+    _onPointerDown(event) {
+        event.preventDefault();
+        this._isDragging.set(true);
+        this._shouldSnap = false;
+        this._shouldExpand = false;
+        this._expandWidth = 0;
+        // Width is owned by the sidebar host so its border, gutter, and content
+        // stay in one box-model calculation during resize and collapse.
+        this._sidebarEl = this._elementRef.nativeElement.closest('.mlv-sidebar');
+        if (this._sidebarEl) {
+            this._savedTransition = this._sidebarEl.style.transition;
+            this._sidebarEl.style.transition = 'none';
+            this._currentWidthPx.set(this._sidebarEl.getBoundingClientRect().width);
+        }
+        this._elementRef.nativeElement.setPointerCapture(event.pointerId);
+        this._ngZone.runOutsideAngular(() => {
+            document.addEventListener('pointermove', this._onPointerMoveBound);
+            document.addEventListener('pointerup', this._onPointerUpBound);
+        });
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'col-resize';
+    }
+    /** @private Handle pointer move during drag. */
+    _onPointerMove(event) {
+        const sidebarEl = this._sidebarEl;
+        if (!sidebarEl)
+            return;
+        if (this._rafId)
+            cancelAnimationFrame(this._rafId);
+        this._rafId = requestAnimationFrame(() => {
+            const sidebarRect = sidebarEl.getBoundingClientRect();
+            const newWidth = event.clientX - sidebarRect.left;
+            const isCollapsed = this._context.collapsed();
+            if (isCollapsed) {
+                // Dragging right from collapsed — mark for expansion on pointerup
+                if (newWidth >= this.snapThreshold()) {
+                    this._shouldExpand = true;
+                    this._expandWidth = clamp(newWidth, this.minWidth(), this.maxWidth());
+                }
+                else {
+                    this._shouldExpand = false;
+                }
+            }
+            else if (newWidth < this.snapThreshold()) {
+                // Dragging left below threshold — mark for collapse on pointerup
+                this._shouldSnap = true;
+            }
+            else {
+                this._shouldSnap = false;
+                const clamped = clamp(newWidth, this.minWidth(), this.maxWidth());
+                this._ngZone.run(() => {
+                    this._context.setWidth(clamped);
+                    this._currentWidthPx.set(clamped);
+                });
+            }
+        });
+    }
+    /** @private Handle pointer up to end drag. */
+    _onPointerUp(_event) {
+        this._cleanup();
+        if (this._sidebarEl) {
+            this._sidebarEl.style.transition = this._savedTransition;
+        }
+        this._ngZone.run(() => {
+            this._isDragging.set(false);
+            if (this._shouldSnap) {
+                this._context.toggle();
+            }
+            else if (this._shouldExpand) {
+                this._context.toggle();
+                this._context.setWidth(this._expandWidth);
+                this._currentWidthPx.set(this._expandWidth);
+            }
+        });
+    }
+    /** @private Remove document listeners and reset drag state. */
+    _cleanup() {
+        document.removeEventListener('pointermove', this._onPointerMoveBound);
+        document.removeEventListener('pointerup', this._onPointerUpBound);
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        if (this._rafId) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = 0;
+        }
+    }
+    /** @private Adjust width by a delta, clamping to min/max. */
+    _adjustWidth(delta) {
+        const current = this._currentWidthPx();
+        const next = clamp(current + delta, this.minWidth(), this.maxWidth());
+        this._context.setWidth(next);
+        this._currentWidthPx.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarRail, isStandalone: true, selector: "mlv-sidebar-rail", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical", "tabindex": "0", "aria-label": "Resize sidebar" }, listeners: { "pointerdown": "_onPointerDown($event)", "dblclick": "_onDoubleClick()", "keydown": "_onKeydown($event)" }, properties: { "class.mlv-sidebar-rail--dragging": "_isDragging()", "attr.aria-valuetext": "_currentWidthPx() + \"px\"", "attr.aria-valuenow": "_currentWidthPx()", "attr.aria-valuemin": "minWidth()", "attr.aria-valuemax": "maxWidth()" }, classAttribute: "mlv-sidebar-rail" }, ngImport: i0, template: '', isInline: true, styles: ["@layer mlv.components{.mlv-sidebar-rail{position:absolute;top:0;inset-inline-end:-.0625rem;width:.125rem;height:100%;background-color:transparent;cursor:col-resize;z-index:1;transition:width var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-rail:before{content:\"\";position:absolute;top:0;inset-inline:-.25rem;bottom:0}.mlv-sidebar-rail:hover{width:.25rem;background-color:var(--mlv-background-accent-1)}.mlv-sidebar-rail:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-sidebar-rail--dragging{width:.25rem;background-color:var(--mlv-background-accent-1)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-rail,.mlv-sidebar-rail *,.mlv-sidebar-rail:before,.mlv-sidebar-rail:after,[class^=mlv-sidebar-rail__],[class*=\" mlv-sidebar-rail__\"],[class^=mlv-sidebar-rail--],[class*=\" mlv-sidebar-rail--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarRail, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-rail', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-sidebar-rail',
+                        '[class.mlv-sidebar-rail--dragging]': '_isDragging()',
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                        tabindex: '0',
+                        'aria-label': 'Resize sidebar',
+                        '[attr.aria-valuetext]': '_currentWidthPx() + "px"',
+                        '[attr.aria-valuenow]': '_currentWidthPx()',
+                        '[attr.aria-valuemin]': 'minWidth()',
+                        '[attr.aria-valuemax]': 'maxWidth()',
+                        '(pointerdown)': '_onPointerDown($event)',
+                        '(dblclick)': '_onDoubleClick()',
+                        '(keydown)': '_onKeydown($event)',
+                    }, styles: ["@layer mlv.components{.mlv-sidebar-rail{position:absolute;top:0;inset-inline-end:-.0625rem;width:.125rem;height:100%;background-color:transparent;cursor:col-resize;z-index:1;transition:width var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-rail:before{content:\"\";position:absolute;top:0;inset-inline:-.25rem;bottom:0}.mlv-sidebar-rail:hover{width:.25rem;background-color:var(--mlv-background-accent-1)}.mlv-sidebar-rail:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-sidebar-rail--dragging{width:.25rem;background-color:var(--mlv-background-accent-1)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-rail,.mlv-sidebar-rail *,.mlv-sidebar-rail:before,.mlv-sidebar-rail:after,[class^=mlv-sidebar-rail__],[class*=\" mlv-sidebar-rail__\"],[class^=mlv-sidebar-rail--],[class*=\" mlv-sidebar-rail--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], snapThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapThreshold", required: false }] }] } });
+
+/**
+ * Sidebar trigger button that toggles the sidebar's collapsed state.
+ * Renders as a transparent icon button visually matching collapsed sidebar
+ * items, so it sits flush with the rest of the sidebar chrome.
+ * Automatically hides itself in fixed mode.
+ *
+ * When the sidebar's effective mode is `'offcanvas'` (either `mode="offcanvas"`
+ * or a `collapseBelow` breakpoint override) the trigger renders as a
+ * hamburger/close menu button instead of the rail collapse chevrons.
+ *
+ * Usage:
+ * ```html
+ * <mlv-sidebar [collapsed]="collapsed()">
+ *   <mlv-sidebar-trigger />
+ * </mlv-sidebar>
+ * ```
+ *
+ * An offcanvas sidebar does not render its projected content while closed, so
+ * a trigger that must reopen the drawer has to live outside `<mlv-sidebar>`.
+ * Point it at the sidebar with the `sidebar` input:
+ *
+ * ```html
+ * <mlv-sidebar #nav collapseBelow="md">…</mlv-sidebar>
+ * <mlv-sidebar-trigger [sidebar]="nav" />
+ * ```
+ */
+class MlvSidebarTrigger {
+    /** @private Native button query backing the public focus target. */
+    _triggerButton = viewChild('triggerButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerButton" }] : /* istanbul ignore next */ []));
+    /**
+     * The sidebar this trigger controls, for triggers rendered outside
+     * `<mlv-sidebar>`. Pass the sidebar's template reference
+     * (`<mlv-sidebar #nav />` → `[sidebar]="nav"`). Required whenever the sidebar
+     * can be an offcanvas drawer, because a closed drawer does not render its
+     * projected content — an inner trigger would disappear with it.
+     *
+     * When omitted, the trigger uses the `SIDEBAR_CONTEXT` of its ancestor
+     * sidebar.
+     */
+    sidebar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebar" }] : /* istanbul ignore next */ []));
+    /**
+     * The connected native button rendered by this trigger, or `null` before
+     * its view exists. Pass this to an overlay's explicit focus-restoration
+     * option when the activating control can disappear with an offcanvas view.
+     */
+    focusTarget = computed(() => this._triggerButton()?.nativeElement ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTarget" }] : /* istanbul ignore next */ []));
+    /** @protected Localised labels for the sidebar trigger. */
+    _i18n = inject(MLV_SIDEBAR_I18N);
+    /** @private Ancestor sidebar context, when this trigger is nested in one. */
+    _injectedContext = inject(SIDEBAR_CONTEXT, {
+        optional: true,
+    });
+    /**
+     * @private The context actually driven by this trigger — the explicit
+     * `sidebar` input wins over the injected ancestor context.
+     */
+    _context = computed(() => this.sidebar() ?? this._injectedContext, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_context" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the sidebar is collapsed (drawer closed in offcanvas). */
+    _collapsed = computed(() => this._context()?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+    /** @private The sidebar's effective layout mode, responsive override included. */
+    _mode = computed(() => {
+        const context = this._context();
+        if (!context)
+            return 'icon';
+        return context.effectiveMode?.() ?? context.mode();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected True when the sidebar currently behaves as an overlay drawer, so
+     * the trigger renders as a menu button rather than a rail collapse toggle.
+     */
+    _isDrawerTrigger = computed(() => this._mode() === 'offcanvas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDrawerTrigger" }] : /* istanbul ignore next */ []));
+    /**
+     * The connected native trigger button while its sidebar currently behaves
+     * as an offcanvas drawer; otherwise `null`. Use this as an explicit overlay
+     * focus fallback when a projected activator can disappear with the drawer,
+     * while retaining the overlay's default opener restoration in inline modes.
+     */
+    offcanvasFocusTarget() {
+        const target = this.focusTarget();
+        return this._isDrawerTrigger() && target?.isConnected ? target : null;
+    }
+    /**
+     * Late-bound overlay focus policy. Pass the function itself to a dynamic
+     * restore-focus option: it resolves to the connected external trigger in
+     * offcanvas mode and to the overlay's captured-opener default otherwise.
+     */
+    restoreFocusResolver = () => this.offcanvasFocusTarget() ?? true;
+    /** @protected Whether the trigger should be hidden (fixed mode). */
+    _isHidden = computed(() => this._mode() === 'fixed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isHidden" }] : /* istanbul ignore next */ []));
+    /** @protected Accessible name matching the current affordance and state. */
+    _resolvedAriaLabel = computed(() => {
+        const strings = this._i18n();
+        if (this._isDrawerTrigger()) {
+            return this._collapsed()
+                ? strings.openNavigation
+                : strings.closeNavigation;
+        }
+        return this._collapsed() ? strings.expand : strings.collapse;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Toggle the sidebar collapsed state. */
+    _toggle() {
+        this._context()?.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarTrigger, isStandalone: true, selector: "mlv-sidebar-trigger", inputs: { sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mlv-sidebar-trigger--hidden": "_isHidden()", "class.mlv-sidebar-trigger--menu": "_isDrawerTrigger()" }, classAttribute: "mlv-sidebar-trigger" }, viewQueries: [{ propertyName: "_triggerButton", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #triggerButton
+      type="button"
+      class="mlv-sidebar-trigger__btn"
+      [attr.aria-label]="_resolvedAriaLabel()"
+      [attr.aria-expanded]="!_collapsed()"
+      (click)="_toggle()"
+    >
+      @if (_isDrawerTrigger()) {
+        @if (_collapsed()) {
+          <svg lucideMenu [size]="20" class="mlv-sidebar-trigger__icon" />
+        } @else {
+          <svg lucideX [size]="20" class="mlv-sidebar-trigger__icon" />
+        }
+      } @else if (_collapsed()) {
+        <svg
+          lucidePanelLeftOpen
+          [size]="20"
+          class="mlv-sidebar-trigger__icon"
+        />
+      } @else {
+        <svg
+          lucidePanelLeftClose
+          [size]="20"
+          class="mlv-sidebar-trigger__icon"
+        />
+      }
+    </button>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-sidebar-trigger{display:flex;width:100%}.mlv-sidebar-trigger--hidden{display:none}.mlv-sidebar-trigger--menu{width:auto}.mlv-sidebar-trigger--menu .mlv-sidebar-trigger__btn{width:var(--mlv-sidebar-row-height, 2.25rem)}.mlv-sidebar-trigger__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;color:var(--mlv-text-secondary);cursor:pointer;outline:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-trigger__btn:hover{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-trigger__btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-trigger__btn:active{transform:scale(.97)}.mlv-sidebar-trigger__icon{transition:transform var(--mlv-duration-normal) var(--mlv-ease-in-out)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-trigger__icon,.mlv-sidebar-trigger__btn{transition-duration:var(--mlv-duration-instant)}}}\n"], dependencies: [{ kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarTrigger, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-trigger', template: `
+    <button
+      #triggerButton
+      type="button"
+      class="mlv-sidebar-trigger__btn"
+      [attr.aria-label]="_resolvedAriaLabel()"
+      [attr.aria-expanded]="!_collapsed()"
+      (click)="_toggle()"
+    >
+      @if (_isDrawerTrigger()) {
+        @if (_collapsed()) {
+          <svg lucideMenu [size]="20" class="mlv-sidebar-trigger__icon" />
+        } @else {
+          <svg lucideX [size]="20" class="mlv-sidebar-trigger__icon" />
+        }
+      } @else if (_collapsed()) {
+        <svg
+          lucidePanelLeftOpen
+          [size]="20"
+          class="mlv-sidebar-trigger__icon"
+        />
+      } @else {
+        <svg
+          lucidePanelLeftClose
+          [size]="20"
+          class="mlv-sidebar-trigger__icon"
+        />
+      }
+    </button>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideMenu, LucidePanelLeftClose, LucidePanelLeftOpen, LucideX], host: {
+                        class: 'mlv-sidebar-trigger',
+                        '[class.mlv-sidebar-trigger--hidden]': '_isHidden()',
+                        '[class.mlv-sidebar-trigger--menu]': '_isDrawerTrigger()',
+                    }, styles: ["@layer mlv.components{.mlv-sidebar-trigger{display:flex;width:100%}.mlv-sidebar-trigger--hidden{display:none}.mlv-sidebar-trigger--menu{width:auto}.mlv-sidebar-trigger--menu .mlv-sidebar-trigger__btn{width:var(--mlv-sidebar-row-height, 2.25rem)}.mlv-sidebar-trigger__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;color:var(--mlv-text-secondary);cursor:pointer;outline:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-trigger__btn:hover{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-trigger__btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-trigger__btn:active{transform:scale(.97)}.mlv-sidebar-trigger__icon{transition:transform var(--mlv-duration-normal) var(--mlv-ease-in-out)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-trigger__icon,.mlv-sidebar-trigger__btn{transition-duration:var(--mlv-duration-instant)}}}\n"] }]
+        }], propDecorators: { _triggerButton: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }] } });
+
+class MlvSidebarWorkspaceLogo {
+    /** Template rendered in both the active trigger and every workspace option. */
+    templateRef = inject((TemplateRef));
+    /** Enables strongly typed `let-workspace` and `let-selected="selected"`. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspaceLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarWorkspaceLogo, isStandalone: true, selector: "[mlvSidebarWorkspaceLogo]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspaceLogo, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarWorkspaceLogo]',
+                }]
+        }] });
+class MlvSidebarWorkspaceText {
+    /** Template rendered in both the active trigger and every workspace option. */
+    templateRef = inject((TemplateRef));
+    /** Enables strongly typed `let-workspace` and `let-selected="selected"`. */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspaceText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarWorkspaceText, isStandalone: true, selector: "[mlvSidebarWorkspaceText]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspaceText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarWorkspaceText]',
+                }]
+        }] });
+
+class MlvSidebarWorkspace {
+    /** @private Parent sidebar context supplying the effective collapsed state. */
+    _sidebarContext = inject(SIDEBAR_CONTEXT, {
+        optional: true,
+    });
+    /** @protected Localized strings for the workspace switcher. */
+    _i18n = inject(MLV_SIDEBAR_I18N);
+    /** @private ICU message resolver used by the trigger's accessible name. */
+    _i18nResolver = inject(MlvI18nResolverService);
+    /**
+     * Workspaces available to the user. A switcher menu is rendered only when
+     * the collection contains more than one workspace.
+     */
+    workspaces = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workspaces" }] : /* istanbul ignore next */ []));
+    /**
+     * Currently active workspace. Two-way bind with `[(workspace)]` to receive
+     * user selections made in the workspace menu.
+     */
+    workspace = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workspace" }] : /* istanbul ignore next */ []));
+    /** @protected Optional structural template for workspace logos. */
+    _logoTemplate = contentChild(MlvSidebarWorkspaceLogo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_logoTemplate" }] : /* istanbul ignore next */ []));
+    /** @protected Optional structural template for workspace text. */
+    _textTemplate = contentChild(MlvSidebarWorkspaceText, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_textTemplate" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the switcher menu is currently open. */
+    _opened = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_opened" }] : /* istanbul ignore next */ []));
+    /** @protected True when choosing between multiple workspaces is possible. */
+    _hasMultiple = computed(() => this.workspaces().length > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasMultiple" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the parent sidebar is collapsed. Workspace switchers
+     * outside a sidebar remain expanded.
+     */
+    _isCollapsed = computed(() => this._sidebarContext?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isCollapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Accessible trigger name including the current workspace.
+     */
+    _triggerAriaLabel = computed(() => this._i18nResolver.resolve(this._i18n(), 'switchWorkspace', { workspace: this.workspace().label }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Selects a workspace from the menu. The menu item directive
+     * closes the overlay and restores focus to the trigger after this handler.
+     */
+    _selectWorkspace(workspace) {
+        this.workspace.set(workspace);
+    }
+    /** @protected Tracks whether an option represents the active workspace. */
+    _isSelected(workspace) {
+        return workspace.id === this.workspace().id;
+    }
+    /**
+     * @protected Builds the strongly typed context supplied to the logo and text
+     * structural templates.
+     */
+    _templateContext(workspace) {
+        return {
+            $implicit: workspace,
+            selected: this._isSelected(workspace),
+        };
+    }
+    /** @protected Produces a compact fallback monogram when no logo is supplied. */
+    _initials(label) {
+        return label
+            .trim()
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((word) => word.charAt(0))
+            .join('')
+            .toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspace, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarWorkspace, isStandalone: true, selector: "mlv-sidebar-workspace", inputs: { workspaces: { classPropertyName: "workspaces", publicName: "workspaces", isSignal: true, isRequired: true, transformFunction: null }, workspace: { classPropertyName: "workspace", publicName: "workspace", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { workspace: "workspaceChange" }, host: { properties: { "class.mlv-sidebar-workspace--collapsed": "_isCollapsed()", "class.mlv-sidebar-workspace--multiple": "_hasMultiple()", "class.mlv-sidebar-workspace--open": "_opened()" }, classAttribute: "mlv-sidebar-workspace" }, queries: [{ propertyName: "_logoTemplate", first: true, predicate: MlvSidebarWorkspaceLogo, descendants: true, isSignal: true }, { propertyName: "_textTemplate", first: true, predicate: MlvSidebarWorkspaceText, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #workspaceRow let-option let-location=\"location\">\n  <span class=\"mlv-sidebar-workspace__logo\" aria-hidden=\"true\">\n    @if (_logoTemplate(); as logoTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"logoTemplate.templateRef\"\n      [ngTemplateOutletContext]=\"_templateContext(option)\"\n    />\n    } @else {\n    <span class=\"mlv-sidebar-workspace__monogram\">\n      {{ _initials(option.label) }}\n    </span>\n    }\n  </span>\n\n  <span class=\"mlv-sidebar-workspace__text\">\n    @if (_textTemplate(); as textTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"textTemplate.templateRef\"\n      [ngTemplateOutletContext]=\"_templateContext(option)\"\n    />\n    } @else {\n    <span class=\"mlv-sidebar-workspace__label\">{{ option.label }}</span>\n    @if (option.description) {\n    <span class=\"mlv-sidebar-workspace__description\">\n      {{ option.description }}\n    </span>\n    } }\n  </span>\n\n  @if (location === 'trigger' && _hasMultiple()) {\n  <svg\n    class=\"mlv-sidebar-workspace__chevron\"\n    lucideChevronsUpDown\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  ></svg>\n  } @if (location === 'option' && _isSelected(option)) {\n  <svg\n    class=\"mlv-sidebar-workspace__check\"\n    lucideCheck\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  ></svg>\n  }\n</ng-template>\n\n@if (_hasMultiple()) {\n<button\n  type=\"button\"\n  mlvButton\n  variant=\"transparent\"\n  class=\"mlv-sidebar-workspace__trigger\"\n  [mlvMenuTrigger]=\"workspaceMenu\"\n  [attr.aria-label]=\"_triggerAriaLabel()\"\n  (menuOpened)=\"_opened.set(true)\"\n  (menuClosed)=\"_opened.set(false)\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"workspaceRow\"\n    [ngTemplateOutletContext]=\"{ $implicit: workspace(), location: 'trigger' }\"\n  />\n</button>\n\n<mlv-menu #workspaceMenu [label]=\"_i18n().workspaceMenu\">\n  @for (option of workspaces(); track option.id) {\n  <mlv-list-item\n    mlvMenuItem\n    class=\"mlv-sidebar-workspace__option\"\n    [attr.aria-current]=\"_isSelected(option) ? 'true' : null\"\n    (itemClick)=\"_selectWorkspace(option)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"workspaceRow\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, location: 'option' }\"\n    />\n  </mlv-list-item>\n  }\n</mlv-menu>\n} @else {\n<div class=\"mlv-sidebar-workspace__trigger\">\n  <ng-container\n    [ngTemplateOutlet]=\"workspaceRow\"\n    [ngTemplateOutletContext]=\"{ $implicit: workspace(), location: 'trigger' }\"\n  />\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-sidebar-workspace{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-sidebar-workspace *{box-sizing:border-box}.mlv-sidebar-workspace{display:block;width:100%;min-width:0}.mlv-sidebar-workspace__trigger,.mlv-sidebar-workspace__option .mlv-list-item__content{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 2.375rem) minmax(0,1fr) auto;align-items:center;gap:0;width:100%;min-width:0}.mlv-sidebar-workspace__trigger{min-height:2.5rem;padding:0;border:none;border-radius:var(--mlv-radius-m);background-color:transparent;color:var(--mlv-text-primary);font:inherit;text-align:start;outline:none}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger{cursor:pointer;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-out),color var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:hover,.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1))}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:active{transform:scale(.985)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger>.mlv-button__text{display:contents}.mlv-sidebar-workspace--open .mlv-sidebar-workspace__trigger{background-color:var(--mlv-background-neutral-1-active)}.mlv-sidebar-workspace__logo{display:flex;align-items:center;justify-content:center;justify-self:center;width:1.75rem;height:1.75rem;overflow:hidden;flex-shrink:0;border-radius:var(--mlv-radius-s);background-color:var(--mlv-background-accent-1);color:var(--mlv-text-primary-on-accent-1)}.mlv-sidebar-workspace__logo>*{max-width:100%;max-height:100%}.mlv-sidebar-workspace__monogram{font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-font-weight-semibold);line-height:1}.mlv-sidebar-workspace__text{display:flex;flex-direction:column;min-width:0;overflow:hidden;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-workspace__text>*,.mlv-sidebar-workspace__label,.mlv-sidebar-workspace__description{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-sidebar-workspace__label,.mlv-sidebar-workspace__text>:first-child{color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-typography-body-m-line-height)}.mlv-sidebar-workspace__description,.mlv-sidebar-workspace__text>:not(:first-child){color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height)}.mlv-sidebar-workspace__chevron,.mlv-sidebar-workspace__check{margin-inline:var(--mlv-spacing-2);flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-sidebar-workspace__chevron{opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-workspace__check{color:var(--mlv-text-action)}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__trigger{grid-template-columns:var(--mlv-sidebar-icon-column-width, 2.375rem) minmax(0,0fr) 0}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__text{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;pointer-events:none;transition-delay:0s,0s,var(--mlv-duration-normal)}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__chevron{margin-inline:0;opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,var(--mlv-duration-normal)}.mlv-sidebar-workspace__option{min-width:14rem;--mlv-list-item-padding-block: var(--mlv-spacing-1);--mlv-list-item-padding-inline: var(--mlv-spacing-1)}.mlv-sidebar-workspace__option[aria-current=true]{--mlv-list-item-bg: var(--mlv-background-selected);--mlv-list-item-bg-hover: var(--mlv-background-selected-hover)}.mlv-sidebar-workspace__option .mlv-list-item__content{grid-template-columns:2.5rem minmax(0,1fr) 2rem}.mlv-sidebar-workspace__option .mlv-sidebar-workspace__logo{justify-self:start}@media(prefers-reduced-motion:reduce){.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger,.mlv-sidebar-workspace .mlv-sidebar-workspace__text,.mlv-sidebar-workspace .mlv-sidebar-workspace__chevron{transition-duration:var(--mlv-duration-instant)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:active{transform:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "component", type: MlvMenu, selector: "mlv-menu", inputs: ["label", "mlvDensity", "dataSource"], outputs: ["closed"] }, { kind: "directive", type: MlvMenuItem, selector: "mlv-list-item[mlvMenuItem]", inputs: ["disabled"], outputs: ["itemClick"] }, { kind: "directive", type: MlvMenuTrigger, selector: "[mlvMenuTrigger]", inputs: ["mlvMenuTrigger", "isSubmenuTrigger", "menuTriggerDisabled"], outputs: ["menuOpened", "menuClosed"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarWorkspace, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-workspace', imports: [
+                        NgTemplateOutlet,
+                        MlvButton,
+                        MlvMenu,
+                        MlvMenuItem,
+                        MlvMenuTrigger,
+                        MlvListItem,
+                        LucideCheck,
+                        LucideChevronsUpDown,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-sidebar-workspace',
+                        '[class.mlv-sidebar-workspace--collapsed]': '_isCollapsed()',
+                        '[class.mlv-sidebar-workspace--multiple]': '_hasMultiple()',
+                        '[class.mlv-sidebar-workspace--open]': '_opened()',
+                    }, template: "<ng-template #workspaceRow let-option let-location=\"location\">\n  <span class=\"mlv-sidebar-workspace__logo\" aria-hidden=\"true\">\n    @if (_logoTemplate(); as logoTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"logoTemplate.templateRef\"\n      [ngTemplateOutletContext]=\"_templateContext(option)\"\n    />\n    } @else {\n    <span class=\"mlv-sidebar-workspace__monogram\">\n      {{ _initials(option.label) }}\n    </span>\n    }\n  </span>\n\n  <span class=\"mlv-sidebar-workspace__text\">\n    @if (_textTemplate(); as textTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"textTemplate.templateRef\"\n      [ngTemplateOutletContext]=\"_templateContext(option)\"\n    />\n    } @else {\n    <span class=\"mlv-sidebar-workspace__label\">{{ option.label }}</span>\n    @if (option.description) {\n    <span class=\"mlv-sidebar-workspace__description\">\n      {{ option.description }}\n    </span>\n    } }\n  </span>\n\n  @if (location === 'trigger' && _hasMultiple()) {\n  <svg\n    class=\"mlv-sidebar-workspace__chevron\"\n    lucideChevronsUpDown\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  ></svg>\n  } @if (location === 'option' && _isSelected(option)) {\n  <svg\n    class=\"mlv-sidebar-workspace__check\"\n    lucideCheck\n    [size]=\"16\"\n    aria-hidden=\"true\"\n  ></svg>\n  }\n</ng-template>\n\n@if (_hasMultiple()) {\n<button\n  type=\"button\"\n  mlvButton\n  variant=\"transparent\"\n  class=\"mlv-sidebar-workspace__trigger\"\n  [mlvMenuTrigger]=\"workspaceMenu\"\n  [attr.aria-label]=\"_triggerAriaLabel()\"\n  (menuOpened)=\"_opened.set(true)\"\n  (menuClosed)=\"_opened.set(false)\"\n>\n  <ng-container\n    [ngTemplateOutlet]=\"workspaceRow\"\n    [ngTemplateOutletContext]=\"{ $implicit: workspace(), location: 'trigger' }\"\n  />\n</button>\n\n<mlv-menu #workspaceMenu [label]=\"_i18n().workspaceMenu\">\n  @for (option of workspaces(); track option.id) {\n  <mlv-list-item\n    mlvMenuItem\n    class=\"mlv-sidebar-workspace__option\"\n    [attr.aria-current]=\"_isSelected(option) ? 'true' : null\"\n    (itemClick)=\"_selectWorkspace(option)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"workspaceRow\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, location: 'option' }\"\n    />\n  </mlv-list-item>\n  }\n</mlv-menu>\n} @else {\n<div class=\"mlv-sidebar-workspace__trigger\">\n  <ng-container\n    [ngTemplateOutlet]=\"workspaceRow\"\n    [ngTemplateOutletContext]=\"{ $implicit: workspace(), location: 'trigger' }\"\n  />\n</div>\n}\n", styles: ["@layer mlv.components{.mlv-sidebar-workspace{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-sidebar-workspace *{box-sizing:border-box}.mlv-sidebar-workspace{display:block;width:100%;min-width:0}.mlv-sidebar-workspace__trigger,.mlv-sidebar-workspace__option .mlv-list-item__content{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 2.375rem) minmax(0,1fr) auto;align-items:center;gap:0;width:100%;min-width:0}.mlv-sidebar-workspace__trigger{min-height:2.5rem;padding:0;border:none;border-radius:var(--mlv-radius-m);background-color:transparent;color:var(--mlv-text-primary);font:inherit;text-align:start;outline:none}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger{cursor:pointer;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-out),color var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out-strong)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:hover,.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1))}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:active{transform:scale(.985)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger>.mlv-button__text{display:contents}.mlv-sidebar-workspace--open .mlv-sidebar-workspace__trigger{background-color:var(--mlv-background-neutral-1-active)}.mlv-sidebar-workspace__logo{display:flex;align-items:center;justify-content:center;justify-self:center;width:1.75rem;height:1.75rem;overflow:hidden;flex-shrink:0;border-radius:var(--mlv-radius-s);background-color:var(--mlv-background-accent-1);color:var(--mlv-text-primary-on-accent-1)}.mlv-sidebar-workspace__logo>*{max-width:100%;max-height:100%}.mlv-sidebar-workspace__monogram{font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-font-weight-semibold);line-height:1}.mlv-sidebar-workspace__text{display:flex;flex-direction:column;min-width:0;overflow:hidden;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-workspace__text>*,.mlv-sidebar-workspace__label,.mlv-sidebar-workspace__description{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mlv-sidebar-workspace__label,.mlv-sidebar-workspace__text>:first-child{color:var(--mlv-text-primary);font-size:var(--mlv-typography-body-m-size);font-weight:var(--mlv-font-weight-semibold);line-height:var(--mlv-typography-body-m-line-height)}.mlv-sidebar-workspace__description,.mlv-sidebar-workspace__text>:not(:first-child){color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height)}.mlv-sidebar-workspace__chevron,.mlv-sidebar-workspace__check{margin-inline:var(--mlv-spacing-2);flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-sidebar-workspace__chevron{opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-workspace__check{color:var(--mlv-text-action)}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__trigger{grid-template-columns:var(--mlv-sidebar-icon-column-width, 2.375rem) minmax(0,0fr) 0}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__text{opacity:0;transform:translate(calc(-.25rem * var(--mlv-inline-direction)));visibility:hidden;pointer-events:none;transition-delay:0s,0s,var(--mlv-duration-normal)}.mlv-sidebar-workspace--collapsed .mlv-sidebar-workspace__chevron{margin-inline:0;opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,var(--mlv-duration-normal)}.mlv-sidebar-workspace__option{min-width:14rem;--mlv-list-item-padding-block: var(--mlv-spacing-1);--mlv-list-item-padding-inline: var(--mlv-spacing-1)}.mlv-sidebar-workspace__option[aria-current=true]{--mlv-list-item-bg: var(--mlv-background-selected);--mlv-list-item-bg-hover: var(--mlv-background-selected-hover)}.mlv-sidebar-workspace__option .mlv-list-item__content{grid-template-columns:2.5rem minmax(0,1fr) 2rem}.mlv-sidebar-workspace__option .mlv-sidebar-workspace__logo{justify-self:start}@media(prefers-reduced-motion:reduce){.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger,.mlv-sidebar-workspace .mlv-sidebar-workspace__text,.mlv-sidebar-workspace .mlv-sidebar-workspace__chevron{transition-duration:var(--mlv-duration-instant)}.mlv-sidebar-workspace button.mlv-sidebar-workspace__trigger:active{transform:none}}}\n"] }]
+        }], propDecorators: { workspaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaces", required: true }] }], workspace: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspace", required: true }] }, { type: i0.Output, args: ["workspaceChange"] }], _logoTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarWorkspaceLogo), { isSignal: true }] }], _textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarWorkspaceText), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvSidebar, MlvSidebarContent, MlvSidebarFooter, MlvSidebarGroup, MlvSidebarHeader, MlvSidebarItem, MlvSidebarItemHost, MlvSidebarItemIcon, MlvSidebarItemTitle, MlvSidebarRail, MlvSidebarTrigger, MlvSidebarWorkspace, MlvSidebarWorkspaceLogo, MlvSidebarWorkspaceText, SIDEBAR_CONTEXT, MlvSidebarContent as SidebarContentDirective };
+//# sourceMappingURL=malva-ui-core-sidebar.mjs.map