@nanahoshi/mona-ui 0.3.0 → 0.5.0

package/fesm2022/nanahoshi-mona-ui-sidebar.mjs

@@ -0,0 +1,2025 @@
+import * as i1 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { signal, computed, Service, InjectionToken, inject, PLATFORM_ID, linkedSignal, effect, untracked, ElementRef, Injector, input, model, afterNextRender, ChangeDetectionStrategy, Component, DestroyRef, Directive, makeEnvironmentProviders } from '@angular/core';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { createElementControlId, themeRaisedBackdropClasses } from '@nanahoshi/mona-ui/internal';
+import { isPlatformBrowser } from '@angular/common';
+import { cva } from 'class-variance-authority';
+import { SkeletonComponent } from '@nanahoshi/mona-ui/skeleton';
+import * as i1$1 from '@nanahoshi/mona-ui/text-box';
+import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
+import * as i1$2 from '@nanahoshi/mona-ui/button';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { CollapsibleToken } from '@nanahoshi/mona-ui/collapsible';
+
+/**
+ * Layout-wide state shared by every sidebar under one `mona-sidebar-layout`. Provided by
+ * `SidebarLayoutComponent`, while each `mona-sidebar` provides its own `SidebarService`.
+ *
+ * A layout can hold more than one sidebar — a navigation column on one edge and an inspector on the
+ * other — so the things that genuinely belong to the layout rather than to any one sidebar live here:
+ * the breakpoint, the registry the layout and its siblings look sidebars up in, and the rule that only
+ * one drawer is open at a time.
+ *
+ * This class is internal, and is not reachable through the public API. Consumers read a single
+ * sidebar's state through `injectSidebar()`.
+ */
+class SidebarLayoutService {
+    constructor() {
+        this.#compact = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#compact" }] : /* istanbul ignore next */ []));
+        this.#controllers = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#controllers" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether any sidebar's drawer is open. The layout paints one backdrop for all of
+         * them, and the region beside them steps out of the way for whichever one is showing.
+         */
+        this.anyMobileOpen = computed(() => [...this.#controllers().values()].some(controller => controller.mobileOpen()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anyMobileOpen" }] : /* istanbul ignore next */ []));
+        /** @description Whether the viewport is narrow enough for sidebars to present as overlay drawers. */
+        this.compact = this.#compact.asReadonly();
+        /**
+         * @description The first sidebar registered in the layout, in author order.
+         *
+         * What the parts that sit beside the sidebars rather than inside one fall back to: a trigger in a
+         * shared header with no `for` set, and the inset's surface. Best effort by design — with more than
+         * one sidebar in the layout there is no single right answer, and author order is the predictable
+         * one. Name a sidebar with `for` to be explicit.
+         */
+        this.primaryController = computed(() => this.#controllers().values().next().value ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryController" }] : /* istanbul ignore next */ []));
+        /** @description The variant of the primary sidebar, which is the one the inset takes its surface from. */
+        this.primaryVariant = computed(() => this.primaryController()?.variant() ?? "sidebar", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryVariant" }] : /* istanbul ignore next */ []));
+    }
+    #compact;
+    #controllers;
+    /** Closes every open drawer. Backs the shared backdrop and the layout's Escape handling. */
+    closeAll() {
+        for (const controller of this.#controllers().values()) {
+            if (controller.mobileOpen()) {
+                controller.collapse();
+            }
+        }
+    }
+    /** @description The sidebar registered under `id`, or `null` when no sidebar answers to it. */
+    getController(id) {
+        return this.#controllers().get(id) ?? null;
+    }
+    /**
+     * Closes any other open drawer, so only one is ever showing. Called by a sidebar as it opens its
+     * own: two drawers overlaying the same layout would stack their backdrops and fight over the focus
+     * trap, and on the viewport that puts them there, there is only room for one.
+     */
+    notifyOpening(openingId) {
+        for (const [id, controller] of this.#controllers()) {
+            if (id !== openingId && controller.mobileOpen()) {
+                controller.collapse();
+            }
+        }
+    }
+    /**
+     * Adds a sidebar to the registry and returns the callback that removes it again. `mona-sidebar`
+     * re-runs this whenever its resolved id changes and calls the result on teardown.
+     *
+     * Two sidebars sharing an id collide here, and the later registration wins. That is a mistake in
+     * the markup rather than something to recover from — ids are already required to be unique in a
+     * document — so it is left to the duplicate `id` attributes to surface it.
+     */
+    register(id, controller) {
+        this.#controllers.update(controllers => new Map(controllers).set(id, controller));
+        return () => {
+            this.#controllers.update(controllers => {
+                // Only if this registration is still the current one. An id that has since been taken
+                // over by another sidebar belongs to that sidebar now, and must survive this cleanup.
+                if (controllers.get(id) !== controller) {
+                    return controllers;
+                }
+                const next = new Map(controllers);
+                next.delete(id);
+                return next;
+            });
+        };
+    }
+    /** @internal Published by `mona-sidebar-layout` from its breakpoint query. */
+    setCompact(compact) {
+        this.#compact.set(compact);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutService, autoProvided: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutService, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+function toLogicalSide(side) {
+    return side === "end" || side === "right" ? "end" : "start";
+}
+
+/**
+ * The default `SidebarStorage`: `localStorage`, under the sidebar's `persistKey`.
+ *
+ * Reads report `null` anywhere `localStorage` cannot answer, and writes are dropped there. That
+ * covers the server, where there is no such thing, and a browser that refuses it — Safari's private
+ * mode throws on access rather than returning empty, and a full quota throws on write. None of that
+ * is worth taking an application down over: the sidebar simply opens the way its input says.
+ *
+ * A server-rendered application gets the default state in its markup and the remembered one on
+ * hydration, which shows as a flash. Storage that the server can read too — a cookie, or state
+ * transferred from the request — avoids it; supply it through `provideSidebarStorage()`.
+ */
+class LocalStorageSidebarStorage {
+    #browser;
+    /** Takes the value of `PLATFORM_ID`, which is a string in practice though typed loosely. */
+    constructor(platformId) {
+        this.#browser = isPlatformBrowser(platformId);
+    }
+    read(key) {
+        if (!this.#browser) {
+            return null;
+        }
+        try {
+            const stored = localStorage.getItem(key);
+            return stored === null ? null : stored === "true";
+        }
+        catch {
+            return null;
+        }
+    }
+    write(key, expanded) {
+        if (!this.#browser) {
+            return;
+        }
+        try {
+            localStorage.setItem(key, String(expanded));
+        }
+        catch {
+            // Nothing to recover: the sidebar still works, it just will not be remembered.
+        }
+    }
+}
+
+/**
+ * Where sidebars given a `persistKey` remember whether they were left open. Defaults to
+ * `localStorage`. Replace it with `provideSidebarStorage()` — with something the server can read too,
+ * for an application that renders there.
+ */
+const SIDEBAR_STORAGE = new InjectionToken("Mona UI sidebar storage", {
+    providedIn: "root",
+    factory: () => new LocalStorageSidebarStorage(inject(PLATFORM_ID))
+});
+
+/**
+ * State for one sidebar region. Provided by the `mona-sidebar` it belongs to and injectable by any
+ * descendant, so triggers and menu parts can read and drive that sidebar without input chains.
+ *
+ * One instance per sidebar, not per layout: a layout can hold a navigation column on one edge and an
+ * inspector on the other, and they collapse, open and sit on their own sides independently. What the
+ * two genuinely share — the breakpoint, and the rule that only one drawer is open at a time — lives on
+ * `SidebarLayoutService` instead.
+ *
+ * This class is internal. Consumers reach the same state through `injectSidebar()`, which hands back
+ * a `SidebarController`: the reads, and the commands that are safe from anywhere. The structural
+ * setters here exist so `mona-sidebar` can publish its own inputs, and calling them from elsewhere
+ * would leave the service and the component disagreeing until the next change detection pass.
+ */
+class SidebarService {
+    #collapsible;
+    /**
+     * Read from the layout rather than held here, because the breakpoint is one fact about the
+     * viewport that every sidebar in the layout answers to. A `mona-sidebar` standing on its own
+     * without a layout around it has nothing watching the viewport, and stays docked.
+     */
+    #compact;
+    #expanded;
+    #generatedId;
+    #layoutService;
+    #persistKey;
+    #providedId;
+    #side;
+    #storage;
+    #variant;
+    /**
+     * Reset every time the viewport crosses the breakpoint. A drawer left open on a phone must not
+     * still count as open when the window is widened back to a desktop layout, where the same flag
+     * would be read as the docked sidebar's state.
+     */
+    #mobileOpen;
+    constructor() {
+        this.#collapsible = signal("offcanvas", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#collapsible" }] : /* istanbul ignore next */ []));
+        /**
+         * Read from the layout rather than held here, because the breakpoint is one fact about the
+         * viewport that every sidebar in the layout answers to. A `mona-sidebar` standing on its own
+         * without a layout around it has nothing watching the viewport, and stays docked.
+         */
+        this.#compact = computed(() => this.#layoutService?.compact() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#compact" }] : /* istanbul ignore next */ []));
+        this.#expanded = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#expanded" }] : /* istanbul ignore next */ []));
+        this.#generatedId = createElementControlId();
+        this.#layoutService = inject(SidebarLayoutService, { optional: true });
+        this.#persistKey = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#persistKey" }] : /* istanbul ignore next */ []));
+        this.#providedId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#providedId" }] : /* istanbul ignore next */ []));
+        this.#side = signal("start", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#side" }] : /* istanbul ignore next */ []));
+        this.#storage = inject(SIDEBAR_STORAGE);
+        this.#variant = signal("sidebar", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Reset every time the viewport crosses the breakpoint. A drawer left open on a phone must not
+         * still count as open when the window is widened back to a desktop layout, where the same flag
+         * would be read as the docked sidebar's state.
+         */
+        this.#mobileOpen = linkedSignal({ ...(ngDevMode ? { debugName: "#mobileOpen" } : /* istanbul ignore next */ {}), source: () => this.#compact(),
+            computation: () => false });
+        /** @description How the sidebar behaves when collapsed. Set by the `mona-sidebar` it belongs to. */
+        this.collapsible = this.#collapsible.asReadonly();
+        /** @description Whether the sidebar presents as an overlay drawer rather than as a column. */
+        this.compact = this.#compact;
+        /**
+         * @description Whether the sidebar is open. While compact this reports the drawer, so one binding
+         * drives both presentations. Always `true` while `collapsible` is `"none"` on a wide viewport.
+         */
+        this.expanded = computed(() => {
+            if (this.#compact()) {
+                return this.#mobileOpen();
+            }
+            return this.#collapsible() === "none" || this.#expanded();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the sidebar is currently showing its icon rail, meaning parts that only make
+         * sense at full width — labels, trailing actions, submenus — should step aside. Never true while
+         * compact: a drawer has the room to present everything at full width.
+         */
+        this.iconOnly = computed(() => !this.#compact() && this.#collapsible() === "icon" && !this.expanded(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+        /** @description Whether the overlay drawer is open. Only meaningful while `compact` is true. */
+        this.mobileOpen = computed(() => this.#compact() && this.#mobileOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+        /** @description Which edge the sidebar sits on, resolved to a direction-relative side. */
+        this.side = computed(() => toLogicalSide(this.#side()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id assigned to the sidebar element and referenced by triggers through `aria-controls`.
+         * Falls back to a generated id when the consumer supplies none.
+         */
+        this.sidebarId = computed(() => this.#providedId() ?? this.#generatedId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarId" }] : /* istanbul ignore next */ []));
+        /** @description The expanded state as a string, for `data-state` bindings and styling hooks. */
+        this.state = computed(() => (this.expanded() ? "expanded" : "collapsed"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        /** @description The visual treatment of the sidebar. Set by the `mona-sidebar` it belongs to. */
+        this.variant = this.#variant.asReadonly();
+        /** @description The subset of this service that is safe to hand to a consumer. */
+        this.controller = {
+            collapse: () => this.collapse(),
+            collapsible: this.collapsible,
+            compact: this.compact,
+            expand: () => this.expand(),
+            expanded: this.expanded,
+            iconOnly: this.iconOnly,
+            mobileOpen: this.mobileOpen,
+            side: this.side,
+            sidebarId: this.sidebarId,
+            state: this.state,
+            toggle: () => this.toggle(),
+            variant: this.variant
+        };
+        // Restore before persist, so the first pass cannot write the default back over what was
+        // stored. Both sit idle until `mona-sidebar` publishes a key, which it only does when the
+        // consumer asked for one.
+        effect(() => {
+            const key = this.#persistKey();
+            if (!key) {
+                return;
+            }
+            untracked(() => {
+                const stored = this.#storage.read(key);
+                if (stored !== null) {
+                    this.#expanded.set(stored);
+                }
+            });
+        });
+        /*
+         * The docked signal, not `expanded`. That one reports the drawer while compact, and a drawer
+         * is not what is being remembered here: opening one on a phone would otherwise overwrite the
+         * state the desktop is meant to come back to.
+         */
+        effect(() => {
+            const key = this.#persistKey();
+            const expanded = this.#expanded();
+            if (!key) {
+                return;
+            }
+            untracked(() => this.#storage.write(key, expanded));
+        });
+    }
+    collapse() {
+        this.setExpanded(false);
+    }
+    expand() {
+        this.setExpanded(true);
+    }
+    /** @internal Published by `mona-sidebar` from its own input. */
+    setCollapsible(collapsible) {
+        this.#collapsible.set(collapsible);
+    }
+    /**
+     * Routed to whichever presentation is current, so a trigger, a rail and a `[(expanded)]` binding
+     * all mean the same thing on a phone as they do on a desktop.
+     */
+    setExpanded(expanded) {
+        if (this.#compact()) {
+            // Announced before opening, so the layout can close any other drawer first. Closing takes
+            // the `expanded === false` path on that sidebar and never comes back through here.
+            if (expanded) {
+                this.#layoutService?.notifyOpening(this.sidebarId());
+            }
+            this.#mobileOpen.set(expanded);
+            return;
+        }
+        if (this.#collapsible() === "none") {
+            return;
+        }
+        this.#expanded.set(expanded);
+    }
+    /** @internal Published by `mona-sidebar` from its own input. */
+    setId(id) {
+        this.#providedId.set(id || null);
+    }
+    /** @internal Published by `mona-sidebar` from its own input. */
+    setPersistKey(persistKey) {
+        this.#persistKey.set(persistKey);
+    }
+    /** @internal Published by `mona-sidebar` from its own input. */
+    setSide(side) {
+        this.#side.set(side);
+    }
+    /** @internal Published by `mona-sidebar` from its own input. */
+    setVariant(variant) {
+        this.#variant.set(variant);
+    }
+    toggle() {
+        this.setExpanded(!this.expanded());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: SidebarService, autoProvided: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarService, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }], ctorParameters: () => [] });
+
+/**
+ * How much of the sidebar's inline axis each variant's own border takes up.
+ *
+ * Borders are painted inside the box under the global `border-box`, so they come out of the width the
+ * parts inside are measured against: an icon rail of `3rem` less a region's `p-2` is meant to leave
+ * exactly the `2rem` square a menu button becomes, and a border silently makes it 1px or 2px short —
+ * enough to clip the edge off a footer avatar sized to that square. `SidebarComponent` adds this back
+ * on, so the authored width is the width the contents actually get.
+ *
+ * It lives here, beside the variants that draw those borders, so the two cannot drift apart. It is a
+ * plain length rather than a custom property because it lands in a transitioned `width`, and a
+ * `var()` there resolves to a pending-substitution value that engines are not obliged to interpolate.
+ */
+const sidebarBorderAllowance = Object.freeze({
+    // A single edge border, whichever side it sits on.
+    sidebar: "1px",
+    // Bordered on all four sides, so the inline axis loses two of them.
+    floating: "2px",
+    // Draws no border of its own; the raised surface moves to the region beside it.
+    inset: "0px"
+});
+/*
+ * Every part that changes shape when the sidebar collapses runs on `--mona-motion-standard` with the
+ * same easing, so the whole region moves as one piece instead of each part arriving on its own
+ * schedule. The utilities are written out in full at each use site rather than shared through a
+ * constant, because Tailwind extracts class names from source text and cannot follow an identifier.
+ */
+/**
+ * `relative` is what scopes the drawer and its backdrop to this layout. They are positioned against
+ * it rather than the viewport, so a sidebar embedded in a bounded region — a documentation example, a
+ * split pane — overlays only that region, and a layout that fills the page behaves identically.
+ */
+const sidebarLayoutBaseThemeVariants = cva(`
+        relative flex flex-row w-full h-screen h-dvh
+        overflow-hidden
+    `);
+const sidebarContentThemeVariants = cva("flex-1", {
+    variants: {
+        iconOnly: {
+            true: "overflow-hidden",
+            false: "overflow-x-hidden overflow-y-auto"
+        }
+    }
+});
+const sidebarFooterThemeVariants = cva("p-2 shrink-0");
+const sidebarGroupThemeVariants = cva(`
+        relative flex flex-col w-full p-2
+    `);
+const sidebarGroupContentThemeVariants = cva("w-full");
+/**
+ * This stays a static host class because consumers commonly compose `monaButton` on the same
+ * element. The button owns `[class]`, so the sidebar publishes its state through `data-hidden`
+ * instead of adding a competing class binding.
+ */
+const sidebarGroupActionClasses = `
+    p-1 w-auto h-auto
+    visible opacity-100
+    transition-[opacity,visibility] duration-(--mona-motion-standard) ease-out
+    motion-reduce:transition-none
+    data-[hidden=true]:invisible data-[hidden=true]:opacity-0
+`;
+const sidebarInsetThemeVariants = cva(`
+        flex flex-col grow flex-1 min-w-0
+        overflow-auto
+    `, {
+    variants: {
+        variant: {
+            sidebar: "h-full",
+            floating: "h-full",
+            // The `inset` variant moves the raised surface from the sidebar onto this region.
+            inset: `
+                    m-2 h-[calc(100%-1rem)] rounded-lg
+                    border border-(--color-border) bg-(--color-surface) shadow-(--shadow-raised)
+                `
+        },
+        behindDrawer: {
+            true: "overflow-hidden!",
+            false: ""
+        }
+    }
+});
+const sidebarGroupHeaderThemeVariants = cva(`
+        flex items-center px-2 overflow-hidden
+        transition-[height] duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        // On the rail the label and any action have stood down, so the row closes rather than
+        // reserving empty space. Closing it by height keeps it in step with the sidebar's width;
+        // the inset stays put so nothing inside it slides while it does.
+        iconOnly: {
+            true: "h-0",
+            false: "h-8"
+        }
+    }
+});
+const sidebarGroupLabelThemeVariants = cva(`
+        flex grow-1 items-center shrink-0
+        text-xs font-medium whitespace-nowrap text-(--color-sidebar-foreground)/70
+        transition-[opacity,visibility] duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        hidden: {
+            true: "invisible opacity-0",
+            false: "visible opacity-100"
+        }
+    }
+});
+const sidebarHeaderThemeVariants = cva("p-2 shrink-0");
+/**
+ * `monaTextBox` owns `[class]`, so the rail state is exposed through `data-hidden` and consumed by
+ * this static class rather than by a second class binding.
+ */
+const sidebarInputClasses = cva(`
+    w-full h-8
+    data-[hidden=true]:hidden
+`);
+const sidebarMenuActionClasses = cva(`
+    w-auto h-auto p-1!
+    hover:bg-(--color-sidebar-accent)! hover:text-(--color-sidebar-accent-foreground)!
+    group-data-[active=true]/menu-item:text-(--color-sidebar-primary-foreground)!
+    data-[hidden=true]:hidden
+`);
+const sidebarMenuSkeletonThemeVariants = cva(`
+        flex h-8 w-full items-center overflow-hidden
+        transition-[gap,padding] duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        iconOnly: {
+            true: "gap-8 px-2",
+            false: "gap-2 px-1"
+        }
+    }
+});
+const sidebarMenuItemThemeVariants = cva(`
+        flex text-base gap-1
+        group/menu-item
+        data-[active=true]:bg-(--color-sidebar-primary)
+        data-[active=true]:text-(--color-sidebar-primary-foreground)
+        data-[active=true]:hover:bg-(--color-sidebar-primary)
+        data-[active=true]:hover:text-(--color-sidebar-primary-foreground)
+    `, {
+    variants: {
+        collapsible: {
+            true: "flex-col items-stretch",
+            false: "flex-row items-center rounded-md hover:bg-(--color-sidebar-accent)"
+        },
+        // The item takes its width from the menu, which takes it from the sidebar, so it narrows
+        // with the animation instead of snapping to a rail-sized box of its own.
+        iconOnly: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        // On the rail a collapsible item has nothing left to stack, so it behaves like any other row.
+        {
+            collapsible: true,
+            iconOnly: true,
+            class: "flex-row items-center rounded-md hover:bg-(--color-sidebar-accent)"
+        }
+    ]
+});
+/**
+ * The menu row's own appearance.
+ *
+ * It used to compose `ButtonDirective`, which owns a `[class]` binding of its own; every sidebar rule
+ * that had to beat it needed `!important`, and the composition ruled anchors out entirely. Owning the
+ * class here costs a handful of declarations and removes both problems.
+ *
+ * `shrink-0` on the leading visual is what stops a long label crushing it. It applies to the first
+ * child whatever it is — an icon, an avatar — and to any icon elsewhere in the row.
+ */
+const sidebarMenuButtonThemeVariants = cva(`
+        flex w-full items-center justify-start overflow-hidden
+        rounded-md border-0 bg-transparent
+        text-start text-sm font-normal whitespace-nowrap no-underline
+        outline-none
+        focus-visible:ring-2 focus-visible:ring-(--color-sidebar-ring)/60
+        [&>*:first-child]:shrink-0 [&>svg]:shrink-0
+        [transition:gap_var(--mona-motion-standard)_ease-out,height_var(--mona-motion-standard)_ease-out,padding_var(--mona-motion-standard)_ease-out,background-color_100ms_ease-in-out,color_100ms_ease-in-out]
+        motion-reduce:[transition:none]
+    `, {
+    variants: {
+        active: {
+            true: "text-(--color-sidebar-primary-foreground)",
+            false: `
+                    text-(--color-sidebar-foreground)
+                    hover:bg-(--color-sidebar-accent) hover:text-(--color-sidebar-accent-foreground)
+                `
+        },
+        disabled: {
+            true: "opacity-50 pointer-events-none cursor-default",
+            false: "cursor-pointer"
+        },
+        iconOnly: {
+            true: "shrink-0 gap-8 h-8",
+            false: "gap-2 p-1"
+        },
+        size: {
+            medium: "",
+            large: ""
+        }
+    },
+    compoundVariants: [
+        { iconOnly: false, size: "medium", class: "h-8" },
+        { iconOnly: false, size: "large", class: "h-12" },
+        { iconOnly: true, size: "medium", class: "p-2" },
+        { iconOnly: true, size: "large", class: "p-0" }
+    ]
+});
+const sidebarMenuSubThemeVariants = cva(`
+        flex flex-col w-full space-y-1
+        ms-3.5 ps-2.5
+        border-s border-(--color-sidebar-border)
+    `);
+/**
+ * The menu carries no inset of its own. Its enclosing region — a group, header or footer — owns the
+ * one inset, and holds it steady in both states, which is what makes the icon rail's arithmetic work
+ * out: a `3rem` rail less that region's `p-2` on each side leaves exactly one `2rem` icon square.
+ *
+ * It also means a menu placed in a region that is already inset needs no override. An override was
+ * the only reason a consumer ever reached for `!important` here, because `px-*` and the logical
+ * `ps-*`/`pe-*` an inset would have used are separate groups to `tailwind-merge`: it keeps both, and
+ * which one lands is left to stylesheet order.
+ */
+const sidebarMenuThemeVariants = cva(`
+        flex flex-col w-full space-y-1
+    `);
+const sidebarThemeVariants = cva(`
+        relative flex flex-col shrink-0
+        bg-(--color-sidebar) text-(--color-sidebar-foreground) overflow-hidden
+        transition-[width] duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        // `side` only decides placement; the border it implies is applied per variant below,
+        // so the `floating` and `inset` treatments are not left fighting a single edge border.
+        // Flex order is already direction-relative, which is why the borders below have to be
+        // logical too — a physical `border-r` would land on the wrong edge under RTL.
+        side: {
+            start: "order-first",
+            end: "order-last"
+        },
+        variant: {
+            sidebar: `h-full ${themeRaisedBackdropClasses}`,
+            // Any change to the borders below must be matched in `sidebarBorderAllowance` above.
+            floating: `
+                    m-2 h-[calc(100%-1rem)] rounded-lg
+                    border border-(--color-sidebar-border) shadow-(--shadow-raised)
+                    ${themeRaisedBackdropClasses}
+                `,
+            inset: "m-2 h-[calc(100%-1rem)] bg-transparent"
+        },
+        // Once an offcanvas sidebar is fully collapsed any margin would leave a visible gutter, and
+        // the border would leave a 1px sliver of surface down the edge of a panel that is supposed
+        // to be gone entirely.
+        flush: {
+            true: "m-0 border-0",
+            false: ""
+        },
+        /**
+         * The compact presentation. The panel leaves the flex flow and becomes an overlay pinned to
+         * one edge, sliding in on `translate` rather than `width` — a drawer that animated its width
+         * would reflow its own contents for the whole transition.
+         */
+        drawer: {
+            true: `
+                    absolute inset-y-0 z-50 h-full m-0
+                    shadow-(--shadow-overlay)
+                    transition-[translate] duration-(--mona-motion-standard) ease-out
+                    motion-reduce:transition-none
+                `,
+            false: ""
+        },
+        open: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        { drawer: false, variant: "sidebar", side: "start", class: "border-e border-(--color-sidebar-border)" },
+        { drawer: false, variant: "sidebar", side: "end", class: "border-s border-(--color-sidebar-border)" },
+        { drawer: false, variant: "floating", flush: true, class: "h-full" },
+        { drawer: false, variant: "inset", flush: true, class: "h-full" },
+        // A drawer is a surface in its own right whatever the docked variant looks like, so the
+        // variant's margins, rounding and transparency are all dropped for it.
+        { drawer: true, side: "start", class: "start-0" },
+        { drawer: true, side: "end", class: "end-0" },
+        { drawer: true, open: false, side: "start", class: "-translate-x-full" },
+        { drawer: true, open: false, side: "end", class: "translate-x-full" },
+        { drawer: true, variant: "floating", class: "rounded-none" },
+        { drawer: true, variant: "inset", class: "bg-(--color-sidebar)" }
+    ]
+});
+/**
+ * The scrim behind an open drawer. Fades rather than sliding, so it is not competing with the panel's
+ * own movement, and stays below it in the stacking order.
+ */
+const sidebarBackdropThemeVariants = cva(`
+        absolute inset-0 z-40
+        bg-black/50
+        transition-opacity duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        open: {
+            true: "opacity-100",
+            false: "opacity-0 pointer-events-none"
+        }
+    }
+});
+const sidebarMenuBadgeThemeVariants = cva(`
+        ms-auto flex items-center justify-center shrink-0
+        min-w-5 h-5 px-1.5
+        rounded-md text-xs font-medium tabular-nums
+        bg-(--color-sidebar-accent) text-(--color-sidebar-accent-foreground)
+        pointer-events-none select-none
+    `, {
+    variants: {
+        hidden: {
+            true: "hidden!",
+            false: ""
+        }
+    }
+});
+const sidebarRailThemeVariants = cva(`
+        absolute inset-y-0 z-20 hidden w-1
+        cursor-pointer
+        transition-colors hover:bg-(--color-sidebar-border)
+        focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--color-sidebar-ring)
+        sm:flex
+    `, {
+    variants: {
+        // The rail sits on the sidebar's inner edge, which is the opposite one to the side it is
+        // docked against. Logical, so it stays on the inner edge under RTL.
+        side: {
+            start: "end-0",
+            end: "start-0"
+        }
+    }
+});
+const sidebarSeparatorThemeVariants = cva(`
+        shrink-0 h-px bg-(--color-sidebar-border)
+        transition-[margin] duration-(--mona-motion-standard) ease-out
+        motion-reduce:transition-none
+    `, {
+    variants: {
+        iconOnly: {
+            true: "mx-1",
+            false: "mx-2"
+        }
+    }
+});
+
+/**
+ * @description
+ * The sidebar region itself. Content is projected in author order, so header, content and footer
+ * parts appear exactly where they are written.
+ *
+ * Below the layout's `mobileBreakpoint` it presents as a modal overlay drawer: focus is trapped
+ * inside it while open, restored to whatever opened it on close, and the rest of the layout is made
+ * inert. It is not a navigation landmark by itself — wrap the menus in a labelled `nav`, or set
+ * `role` and `ariaLabel` if the whole region is navigation.
+ */
+class SidebarComponent {
+    #focusTrap;
+    #host;
+    #injector;
+    #layoutService;
+    #sidebarService;
+    #restoreFocusTo;
+    constructor() {
+        this.#focusTrap = inject(CdkTrapFocus);
+        this.#host = inject(ElementRef);
+        this.#injector = inject(Injector);
+        this.#layoutService = inject(SidebarLayoutService, { optional: true });
+        this.#sidebarService = inject(SidebarService);
+        this.#restoreFocusTo = null;
+        this.baseClass = computed(() => {
+            const variantClass = sidebarThemeVariants({
+                drawer: this.drawer(),
+                open: this.#sidebarService.mobileOpen(),
+                side: this.#sidebarService.side(),
+                variant: this.variant(),
+                flush: this.offCanvasClosed()
+            });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /** The compact presentation: an overlay pinned to one edge rather than a column in the flow. */
+        this.drawer = this.#sidebarService.compact;
+        /** Published rather than the raw input, so a `left`/`right` alias still reports as `start`/`end`. */
+        this.logicalSide = this.#sidebarService.side;
+        /**
+         * Whether the panel is out of view entirely. The icon rail does not count — it is still on screen
+         * and still operable — but a closed drawer and a fully collapsed off-canvas sidebar both do.
+         */
+        this.hidden = computed(() => {
+            if (this.drawer()) {
+                return !this.#sidebarService.mobileOpen();
+            }
+            return this.offCanvasClosed();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.offCanvasClosed = computed(() => !this.drawer() && !this.#sidebarService.expanded() && this.collapsible() === "offcanvas", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "offCanvasClosed" }] : /* istanbul ignore next */ []));
+        /** A drawer is a modal surface; a docked sidebar keeps whatever role the consumer gave it. */
+        this.resolvedRole = computed(() => (this.drawer() ? "dialog" : this.role() || null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedRole" }] : /* istanbul ignore next */ []));
+        this.sidebarId = this.#sidebarService.sidebarId;
+        this.state = this.#sidebarService.state;
+        /**
+         * `width` and `iconWidth` are the width the sidebar's *contents* get, because that is what the
+         * parts inside are measured against — an icon rail less a region's padding is meant to leave
+         * exactly one icon square. The variant's border is painted inside the box under the global
+         * `border-box`, so it is added back on here rather than being taken out of that measurement.
+         */
+        this.widthString = computed(() => {
+            // A drawer is always at full width; it is moved out of view rather than shrunk.
+            if (this.drawer()) {
+                return this.#withBorderAllowance(toCssLength(this.mobileWidth()));
+            }
+            if (this.#sidebarService.expanded()) {
+                return this.#withBorderAllowance(toCssLength(this.width()));
+            }
+            // A fully collapsed sidebar is the exception: it has no contents to make room for.
+            return this.collapsible() === "icon" ? this.#withBorderAllowance(toCssLength(this.iconWidth())) : "0px";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthString" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible name for the sidebar region. Required when `role` is set, and used as the
+         * drawer's name on compact viewports.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description How the sidebar behaves when collapsed. `"icon"` keeps a narrow rail of icons visible,
+         * `"offcanvas"` removes it from the layout entirely, and `"none"` disables collapsing altogether.
+         * @default "offcanvas"
+         */
+        this.collapsible = input("offcanvas", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether this sidebar is open. Supports two-way binding. While the viewport is
+         * compact this reflects the drawer, so one binding drives both presentations.
+         * @default true
+         */
+        this.expanded = model(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width of the icon rail while collapsed. Only applies when `collapsible` is `"icon"`.
+         * Numbers are treated as pixels.
+         * @default "3rem"
+         */
+        this.iconWidth = input("3rem", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id for the sidebar element, referenced by triggers through `aria-controls`. Supply a
+         * stable value when the markup is server rendered, so the client does not hydrate onto a different
+         * generated id. Falls back to a generated id.
+         * @default ""
+         */
+        this.id = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width of the overlay drawer on compact viewports. Numbers are treated as pixels.
+         * @default "18rem"
+         */
+        this.mobileWidth = input("18rem", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Remembers whether this sidebar was left open, under this key. Unset means nothing is
+         * stored — no key, no storage written.
+         *
+         * Only the docked state is kept. A drawer is never restored open: on the viewport that makes one,
+         * it would cover the page on load. A stored value wins over `expanded`, and is pushed back out
+         * through that binding, so do not set a key on a sidebar whose state is already restored elsewhere.
+         *
+         * Where it is kept is `SIDEBAR_STORAGE`, which defaults to `localStorage`. A server-rendered
+         * application cannot read that until hydration and so flashes the default first; supply storage the
+         * server can read through `provideSidebarStorage()`.
+         * @default ""
+         */
+        this.persistKey = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "persistKey" }] : /* istanbul ignore next */ []));
+        /**
+         * @description ARIA role for the sidebar region. Leave unset and wrap the menus in a labelled `nav`
+         * when the sidebar holds more than navigation; set `"navigation"` with an `aria-label` when it does
+         * not. Ignored on compact viewports, where the drawer is a `dialog`.
+         * @default ""
+         */
+        this.role = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Which edge the sidebar sits on. Prefer `"start"` and `"end"`, which follow the
+         * document's writing direction; `"left"` and `"right"` are aliases of them.
+         * @default "start"
+         */
+        this.side = input("start", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+        /**
+         * @description The visual treatment of the sidebar. `"floating"` detaches it from the edge on its own
+         * surface, and `"inset"` moves that raised surface onto the region beside it instead.
+         * @default "sidebar"
+         */
+        this.variant = input("sidebar", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width of the sidebar while expanded. Numbers are treated as pixels.
+         * @default "16rem"
+         */
+        this.width = input("16rem", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        // These are authored here but read by descendants, so they have to reach the shared service.
+        effect(() => {
+            const collapsible = this.collapsible();
+            const id = this.id();
+            const persistKey = this.persistKey();
+            const side = this.side();
+            const variant = this.variant();
+            untracked(() => {
+                this.#sidebarService.setCollapsible(collapsible);
+                this.#sidebarService.setId(id);
+                this.#sidebarService.setPersistKey(persistKey);
+                this.#sidebarService.setSide(side);
+                this.#sidebarService.setVariant(variant);
+            });
+        });
+        effect(() => {
+            const expanded = this.expanded();
+            untracked(() => this.#sidebarService.setExpanded(expanded));
+        });
+        effect(() => {
+            const expanded = this.#sidebarService.expanded();
+            untracked(() => this.expanded.set(expanded));
+        });
+        // Keyed on the resolved id rather than the input, so a sidebar left to generate its own id is
+        // still reachable by a trigger. The effect's cleanup covers both halves of a changed id — the
+        // old key is dropped before the new one is added — as well as teardown.
+        effect(onCleanup => {
+            const layoutService = this.#layoutService;
+            if (!layoutService) {
+                return;
+            }
+            const id = this.#sidebarService.sidebarId();
+            onCleanup(layoutService.register(id, this.#sidebarService.controller));
+        });
+        effect(() => {
+            const trapped = this.drawer() && this.#sidebarService.mobileOpen();
+            untracked(() => this.#setFocusTrapped(trapped));
+        });
+    }
+    /**
+     * The trap is only armed for the drawer. A docked sidebar sits in the page beside its content, and
+     * holding focus inside it would leave the keyboard unable to reach the rest of the layout at all.
+     */
+    #setFocusTrapped(trapped) {
+        this.#focusTrap.enabled = trapped;
+        if (trapped) {
+            const active = document.activeElement;
+            this.#restoreFocusTo = active instanceof HTMLElement ? active : null;
+            this.#focusTrap.focusTrap.focusInitialElementWhenReady();
+            return;
+        }
+        const restoreTo = this.#restoreFocusTo;
+        this.#restoreFocusTo = null;
+        // Only pull focus back if it is still inside the panel that is closing. Moving it otherwise
+        // would yank the caret away from wherever the user has since gone.
+        if (!restoreTo || !this.#host.nativeElement.contains(document.activeElement)) {
+            return;
+        }
+        /*
+         * Deferred to the next render, not called here. Whatever opened the drawer is almost always
+         * behind it, and the region behind it is still `inert` at this point in the change detection
+         * pass — `focus()` on an element inside an inert subtree fails silently, which left focus
+         * stranded inside the panel that was about to become inert itself.
+         */
+        afterNextRender(() => {
+            if (restoreTo.isConnected) {
+                restoreTo.focus();
+            }
+        }, { injector: this.#injector });
+    }
+    #withBorderAllowance(width) {
+        const allowance = sidebarBorderAllowance[this.variant()];
+        // The `inset` variant draws no border, so it is left as an ordinary length.
+        return allowance === "0px" ? width : `calc(${width} + ${allowance})`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SidebarComponent, isStandalone: true, selector: "mona-sidebar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, iconWidth: { classPropertyName: "iconWidth", publicName: "iconWidth", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, mobileWidth: { classPropertyName: "mobileWidth", publicName: "mobileWidth", isSignal: true, isRequired: false, transformFunction: null }, persistKey: { classPropertyName: "persistKey", publicName: "persistKey", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "attr.aria-hidden": "hidden() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-modal": "drawer() ? 'true' : null", "attr.data-collapsible": "collapsible()", "attr.data-side": "logicalSide()", "attr.data-state": "state()", "attr.data-variant": "variant()", "attr.id": "sidebarId()", "attr.inert": "hidden() ? '' : null", "attr.role": "resolvedRole()", "class": "baseClass()", "style.width": "widthString()" } }, providers: [SidebarService], hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-sidebar",
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [CdkTrapFocus],
+                    host: {
+                        "[attr.aria-hidden]": "hidden() ? 'true' : null",
+                        "[attr.aria-label]": "ariaLabel() || null",
+                        "[attr.aria-modal]": "drawer() ? 'true' : null",
+                        "[attr.data-collapsible]": "collapsible()",
+                        "[attr.data-side]": "logicalSide()",
+                        "[attr.data-state]": "state()",
+                        "[attr.data-variant]": "variant()",
+                        "[attr.id]": "sidebarId()",
+                        // A panel that is out of view must be out of the tab order and out of the accessibility tree
+                        // with it. `inert` is the one attribute that does both; width alone left every control in the
+                        // collapsed panel reachable by keyboard and readable by assistive technology.
+                        "[attr.inert]": "hidden() ? '' : null",
+                        "[attr.role]": "resolvedRole()",
+                        "[class]": "baseClass()",
+                        "[style.width]": "widthString()"
+                    },
+                    // One service per sidebar, not per layout, so a layout can hold more than one of these and each
+                    // keeps its own side, width and open state. Descendants resolve the nearest one, which is theirs.
+                    providers: [SidebarService]
+                }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], iconWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconWidth", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mobileWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileWidth", required: false }] }], persistKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistKey", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+function toCssLength(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+
+/**
+ * @description
+ * Lays its children out in a row and owns what they share. Project one or more `mona-sidebar`
+ * elements and an element marked with `monaSidebarInset` into it. Each sidebar keeps its own open
+ * state, on its own `[(expanded)]` binding, so a layout can hold a navigation column on one edge and
+ * an inspector on the other.
+ *
+ * Below `mobileBreakpoint` sidebars present as overlay drawers instead of columns. A drawer has its
+ * own open state, so a sidebar collapsed on a desktop does not come back open on a phone, and it is
+ * reset whenever the viewport crosses the breakpoint. Only one drawer is open at a time: opening one
+ * closes any other, and they share the single backdrop this layout paints behind them.
+ */
+class SidebarLayoutComponent {
+    #layoutService;
+    #matches;
+    constructor() {
+        this.#layoutService = inject(SidebarLayoutService);
+        this.#matches = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#matches" }] : /* istanbul ignore next */ []));
+        this.backdropClass = computed(() => sidebarBackdropThemeVariants({ open: this.mobileOpen() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => twMerge(sidebarLayoutBaseThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.compact = this.#layoutService.compact;
+        /** One backdrop serves every sidebar, because only one of their drawers is ever open. */
+        this.mobileOpen = this.#layoutService.anyMobileOpen;
+        /**
+         * @description Viewport width, in pixels, below which the sidebar presents as an overlay drawer.
+         * Set to `0` to keep the docked presentation at every size.
+         * @default 768
+         */
+        this.mobileBreakpoint = input(768, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+        this.#watchBreakpoint();
+    }
+    onBackdropClick() {
+        this.#layoutService.closeAll();
+    }
+    onEscape(event) {
+        // Only a drawer is dismissible. A docked sidebar is part of the page, and closing it on
+        // Escape would take the key from anything inside it that wanted to handle it.
+        if (!this.#layoutService.anyMobileOpen()) {
+            return;
+        }
+        event.preventDefault();
+        this.#layoutService.closeAll();
+    }
+    /**
+     * Kept on `matchMedia` rather than a resize listener, so the browser decides when the threshold is
+     * crossed and the query is rebuilt only when the breakpoint input itself changes.
+     */
+    #watchBreakpoint() {
+        const destroyRef = inject(DestroyRef);
+        effect(() => {
+            const compact = this.#matches();
+            untracked(() => this.#layoutService.setCompact(compact));
+        });
+        // Server-rendered and jsdom hosts have no media queries; both keep the docked presentation,
+        // which is the one that degrades gracefully without JavaScript.
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        let current = null;
+        const onChange = (event) => this.#matches.set(event.matches);
+        const detach = () => current?.removeEventListener("change", onChange);
+        destroyRef.onDestroy(detach);
+        effect(() => {
+            const breakpoint = this.mobileBreakpoint();
+            untracked(() => {
+                detach();
+                if (breakpoint <= 0) {
+                    current = null;
+                    this.#matches.set(false);
+                    return;
+                }
+                current = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+                current.addEventListener("change", onChange);
+                this.#matches.set(current.matches);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SidebarLayoutComponent, isStandalone: true, selector: "mona-sidebar-layout", inputs: { mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "attr.data-compact": "compact() ? 'true' : null", "class": "baseClass()" } }, providers: [SidebarLayoutService], ngImport: i0, template: `
+        <ng-content></ng-content>
+        @if (compact()) {
+            <div
+                [class]="backdropClass()"
+                [attr.aria-hidden]="'true'"
+                [attr.data-state]="mobileOpen() ? 'open' : 'closed'"
+                (click)="onBackdropClick()"></div>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-sidebar-layout",
+                    template: `
+        <ng-content></ng-content>
+        @if (compact()) {
+            <div
+                [class]="backdropClass()"
+                [attr.aria-hidden]="'true'"
+                [attr.data-state]="mobileOpen() ? 'open' : 'closed'"
+                (click)="onBackdropClick()"></div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        "[attr.data-compact]": "compact() ? 'true' : null",
+                        "[class]": "baseClass()",
+                        // Escape closes the drawer from anywhere inside the layout, including from within the
+                        // trapped focus inside the drawer itself.
+                        "(keydown.escape)": "onEscape($event)"
+                    },
+                    providers: [SidebarLayoutService]
+                }]
+        }], ctorParameters: () => [], propDecorators: { mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A loading placeholder shaped like a menu item. Drops its label bar on the icon rail, where the
+ * real labels are not visible either.
+ */
+class SidebarMenuSkeletonComponent {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        // Laid out exactly like a real menu button, so the two animate as one: the same inset centres the
+        // icon square on the rail, and the same widened gap carries the label bar out of the clipped box.
+        this.baseClass = computed(() => sidebarMenuSkeletonThemeVariants({ iconOnly: this.iconOnly() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.iconOnly = computed(() => this.#sidebarService?.iconOnly() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Width of the label bar. Varying it across a list keeps the placeholder from looking
+         * like a rigid grid. Numbers are treated as pixels.
+         * @default "60%"
+         */
+        this.labelWidth = input("60%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders a square standing in for the item's icon.
+         * @default true
+         */
+        this.showIcon = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SidebarMenuSkeletonComponent, isStandalone: true, selector: "mona-sidebar-menu-skeleton", inputs: { labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: `
+        @if (showIcon()) {
+            <mona-skeleton width="1rem" height="1rem" rounded="small"></mona-skeleton>
+        }
+        <mona-skeleton [width]="labelWidth()" height="1rem" rounded="small"></mona-skeleton>
+    `, isInline: true, dependencies: [{ kind: "component", type: SkeletonComponent, selector: "mona-skeleton", inputs: ["height", "rounded", "class", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-sidebar-menu-skeleton",
+                    template: `
+        @if (showIcon()) {
+            <mona-skeleton width="1rem" height="1rem" rounded="small"></mona-skeleton>
+        }
+        <mona-skeleton [width]="labelWidth()" height="1rem" rounded="small"></mona-skeleton>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SkeletonComponent],
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] } });
+
+class SidebarContentDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        /**
+         * A scrollbar takes its width out of the content box, and the icon rail has none to give: at a
+         * `3rem` rail it claims about a third of it and squeezes every icon in the region. There is nothing
+         * to read on the rail anyway — the labels are gone — so the overflow is simply clipped there.
+         */
+        this.baseClass = computed(() => sidebarContentThemeVariants({ iconOnly: this.#sidebarService?.iconOnly() ?? false }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarContentDirective, isStandalone: true, selector: "[monaSidebarContent]", host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarContent]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * The region at the bottom of the sidebar, below its content. Holds what stays put while the content
+ * scrolls — a profile menu, a sign-out.
+ */
+class SidebarFooterDirective {
+    constructor() {
+        this.baseClass = computed(() => twMerge(sidebarFooterThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarFooterDirective, isStandalone: true, selector: "[monaSidebarFooter]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarFooter]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A titled section of the sidebar, grouping a label and its menu. Stack as many as the sidebar
+ * needs; each is an ordinary block, so a `monaSidebarSeparator` between them is optional.
+ */
+class SidebarGroupDirective {
+    constructor() {
+        // The group owns the inset for everything it contains, and keeps it the same in both states.
+        // A `3rem` icon rail less this padding leaves exactly the `2rem` square a menu button becomes.
+        this.baseClass = sidebarGroupThemeVariants();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupDirective, isStandalone: true, selector: "[monaSidebarGroup]", host: { properties: { "class": "baseClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarGroup]",
+                    host: {
+                        "[class]": "baseClass"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * A control in the corner of a group header — an add or overflow button. Stands down on the icon
+ * rail, where there is no header row left to sit in. Give it an `aria-label`: it is icon-only.
+ */
+class SidebarGroupActionDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        // The group header it belongs to has no room on the rail.
+        this.hidden = computed(() => this.#sidebarService?.iconOnly() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupActionDirective, isStandalone: true, selector: "button[monaSidebarGroupAction]", host: { properties: { "attr.data-hidden": "hidden() ? 'true' : null" }, classAttribute: "\n    p-1 w-auto h-auto\n    visible opacity-100\n    transition-[opacity,visibility] duration-(--mona-motion-standard) ease-out\n    motion-reduce:transition-none\n    data-[hidden=true]:invisible data-[hidden=true]:opacity-0\n" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaSidebarGroupAction]",
+                    host: {
+                        // Consumers commonly add `monaButton` to this element, which owns the `[class]` binding.
+                        // A data attribute lets the static sidebar recipe respond without competing with it.
+                        // Faded rather than removed: the header around it closes by height over the same interval, so
+                        // dropping it outright would empty the row before it had finished shrinking. `visibility`
+                        // transitions discretely, flipping only once the fade is done, and takes it out of tab order.
+                        "[attr.data-hidden]": "hidden() ? 'true' : null",
+                        class: sidebarGroupActionClasses
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * The body of a `monaSidebarGroup`, below its header. Wraps the menu itself.
+ */
+class SidebarGroupContentDirective {
+    constructor() {
+        this.baseClass = sidebarGroupContentThemeVariants();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupContentDirective, isStandalone: true, selector: "[monaSidebarGroupContent]", host: { properties: { "class": "baseClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarGroupContent]",
+                    host: {
+                        "[class]": "baseClass"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * The row above a group's content, holding its label and any group action. Collapses to nothing on
+ * the icon rail rather than leaving an empty gap where the label used to be.
+ */
+class SidebarGroupHeaderDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.baseClass = computed(() => sidebarGroupHeaderThemeVariants({ iconOnly: this.#sidebarService?.iconOnly() ?? false }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupHeaderDirective, isStandalone: true, selector: "[monaSidebarGroupHeader]", host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarGroupHeader]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * The name of a group. Fades out on the icon rail, where there is no width to read it in.
+ */
+class SidebarGroupLabelDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        // Faded rather than removed from the layout: the header around it closes by height over the same
+        // interval, so dropping the label outright would empty the row before it had finished shrinking.
+        // `visibility` follows the fade so it leaves the accessibility tree with it.
+        this.baseClass = computed(() => sidebarGroupLabelThemeVariants({ hidden: this.#sidebarService?.iconOnly() ?? false }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarGroupLabelDirective, isStandalone: true, selector: "[monaSidebarGroupLabel]", host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarGroupLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarGroupLabel]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * The region at the top of the sidebar, above its content. Holds what stays put while the content
+ * scrolls — a workspace switcher, a search box.
+ */
+class SidebarHeaderDirective {
+    constructor() {
+        this.baseClass = computed(() => twMerge(sidebarHeaderThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarHeaderDirective, isStandalone: true, selector: "[monaSidebarHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarHeader]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A text input sized for the sidebar, composing `monaTextBox`. Stands down on the icon rail,
+ * where there is no room to type.
+ */
+class SidebarInputDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.baseClass = sidebarInputClasses();
+        this.hidden = computed(() => this.#sidebarService?.iconOnly() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarInputDirective, isStandalone: true, selector: "input[monaSidebarInput]", host: { properties: { "attr.data-hidden": "hidden() ? 'true' : null", "class": "baseClass" } }, hostDirectives: [{ directive: i1$1.TextBoxDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "input[monaSidebarInput]",
+                    hostDirectives: [TextBoxDirective],
+                    host: {
+                        // `TextBoxDirective` owns `[class]`, so a data attribute drives the static sidebar recipe.
+                        "[attr.data-hidden]": "hidden() ? 'true' : null",
+                        "[class]": "baseClass"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * Marks the main region beside the sidebar. Fills the remaining width and scrolls independently.
+ * Takes on the raised surface when the sidebar uses the `inset` variant.
+ *
+ * It sits beside the sidebars rather than inside one, so it answers to the layout as a whole: it steps
+ * out of the way for whichever drawer is open, and where a layout holds more than one sidebar it takes
+ * its surface from the first one in author order.
+ */
+class SidebarInsetDirective {
+    constructor() {
+        this.#layoutService = inject(SidebarLayoutService, { optional: true });
+        this.baseClass = computed(() => {
+            const variantClass = sidebarInsetThemeVariants({
+                behindDrawer: this.behindDrawer(),
+                variant: this.#layoutService?.primaryVariant() ?? "sidebar"
+            });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.behindDrawer = computed(() => this.#layoutService?.anyMobileOpen() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "behindDrawer" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    #layoutService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarInsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarInsetDirective, isStandalone: true, selector: "[monaSidebarInset]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.inert": "behindDrawer() ? '' : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarInsetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarInset]",
+                    host: {
+                        "[class]": "baseClass()",
+                        // The drawer is modal, so everything behind it leaves the tab order and the accessibility
+                        // tree. `inert` covers both, and unlike `aria-hidden` it also stops pointer interaction.
+                        "[attr.inert]": "behindDrawer() ? '' : null"
+                        // The scoped equivalent of locking body scroll. The layout already clips its own overflow, so
+                        // this region is the only thing behind the drawer that scrolls; suppressing it here avoids
+                        // reaching out to mutate `document.body`, which a library has no business owning.
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A trailing control on a menu item — an overflow menu, a pin. Sits inside the row's highlight and
+ * stands down on the icon rail. Give it an `aria-label`: it is icon-only.
+ */
+class SidebarMenuActionDirective {
+    #button;
+    #sidebarService;
+    constructor() {
+        this.#button = inject(ButtonDirective);
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.baseClass = sidebarMenuActionClasses();
+        // A trailing action would crowd out the icon it belongs to on the rail.
+        this.hidden = computed(() => this.#sidebarService?.iconOnly() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        effect(() => this.#button.look.set("ghost"));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarMenuActionDirective, isStandalone: true, selector: "button[monaSidebarMenuAction]", host: { properties: { "attr.data-hidden": "hidden() ? 'true' : null", "class": "baseClass" } }, hostDirectives: [{ directive: i1$2.ButtonDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaSidebarMenuAction]",
+                    hostDirectives: [ButtonDirective],
+                    host: {
+                        "[attr.data-hidden]": "hidden() ? 'true' : null",
+                        "[class]": "baseClass"
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @description
+ * A trailing count or status badge on a menu item. Stands down on the icon rail, where it would
+ * crowd out the icon it belongs to.
+ */
+class SidebarMenuBadgeDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.baseClass = computed(() => twMerge(sidebarMenuBadgeThemeVariants({ hidden: this.#sidebarService?.iconOnly() ?? false }), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuBadgeDirective, isStandalone: true, selector: "[monaSidebarMenuBadge]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarMenuBadge]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SidebarMenuDirective {
+    constructor() {
+        this.baseClass = computed(() => twMerge(sidebarMenuThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuDirective, isStandalone: true, selector: "ul[monaSidebarMenu]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ul[monaSidebarMenu]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class SidebarMenuItemDirective {
+    // Applying `monaCollapsible` to the same element turns the item into a disclosure row, so it has to
+    // stack its trigger and submenu instead of laying them out side-by-side.
+    #collapsible;
+    #sidebarService;
+    #expandedBeforeRail;
+    constructor() {
+        // Applying `monaCollapsible` to the same element turns the item into a disclosure row, so it has to
+        // stack its trigger and submenu instead of laying them out side-by-side.
+        this.#collapsible = inject(CollapsibleToken, { optional: true, self: true });
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.#expandedBeforeRail = false;
+        this.baseClass = computed(() => {
+            const variantClass = sidebarMenuItemThemeVariants({
+                collapsible: this.#collapsible !== null,
+                iconOnly: this.#sidebarService?.iconOnly() ?? false
+            });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks this row as the current sidebar destination. The row owns the selected
+         * surface so trailing badges and actions remain inside one continuous highlight.
+         * @default false
+         */
+        this.active = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+        this.#keepSubmenuClosedOnRail();
+    }
+    /**
+     * A submenu cannot render in a rail one icon wide, and the previous answer — hiding it with
+     * `display: none` — left the trigger still reporting `aria-expanded="true"` for something that was
+     * not there. A screen reader user could open a submenu and be told it was open while nothing
+     * appeared, and tab straight into its items.
+     *
+     * Closing the disclosure for real keeps the trigger's own state truthful and lets the collapsible
+     * content directive apply the `inert` it already applies when closed. The prior state is restored
+     * on the way back out, so collapsing and expanding the sidebar does not quietly discard it.
+     */
+    #keepSubmenuClosedOnRail() {
+        const collapsible = this.#collapsible;
+        if (!collapsible) {
+            return;
+        }
+        // Tracked separately from the signal so the two cases can be told apart: arriving on the rail
+        // with the submenu already open, which is worth restoring, and trying to open it while on the
+        // rail, which is not.
+        let onRail = false;
+        effect(() => {
+            const iconOnly = this.#sidebarService?.iconOnly() ?? false;
+            const expanded = collapsible.expanded();
+            untracked(() => {
+                if (iconOnly) {
+                    if (expanded) {
+                        this.#expandedBeforeRail ||= !onRail;
+                        collapsible.collapse();
+                    }
+                    onRail = true;
+                    return;
+                }
+                if (!onRail) {
+                    return;
+                }
+                onRail = false;
+                if (this.#expandedBeforeRail) {
+                    this.#expandedBeforeRail = false;
+                    collapsible.expand();
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuItemDirective, isStandalone: true, selector: "li[monaSidebarMenuItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-active": "active() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "li[monaSidebarMenuItem]",
+                    host: {
+                        "[attr.data-active]": "active() ? 'true' : null",
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A row in a sidebar menu. Applies to a `button` for an action and to an `a` for a destination —
+ * an anchor keeps `href`, `routerLink`, middle-click, open-in-new-tab and the browser's own status
+ * bar preview, none of which a button can offer.
+ *
+ * On a compact viewport, following a link closes the drawer, since the destination it navigates to is
+ * underneath it.
+ */
+class SidebarMenuButtonDirective {
+    constructor() {
+        this.#element = inject(ElementRef).nativeElement;
+        this.#menuItem = inject(SidebarMenuItemDirective, { optional: true });
+        this.#nativeButton = this.#element.tagName === "BUTTON";
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.ariaDisabled = computed(() => (this.disabled() ? "true" : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const variantClass = sidebarMenuButtonThemeVariants({
+                active: this.#menuItem?.active() ?? false,
+                disabled: this.disabled(),
+                iconOnly: this.railBox(),
+                size: this.size()
+            });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * Marks the row the user is currently on. `page` regardless of host element: `active` describes a
+         * destination, and a sidebar built from buttons rather than anchors is still a set of destinations
+         * as far as a screen reader is concerned.
+         */
+        this.current = computed(() => ((this.#menuItem?.active() ?? false) ? "page" : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+        this.nativeDisabled = computed(() => (this.#nativeButton && this.disabled() ? "" : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeDisabled" }] : /* istanbul ignore next */ []));
+        /**
+         * On the rail the row becomes a square exactly the size of its leading visual and clips its own
+         * overflow, so any label is pushed out of view instead of competing for space.
+         */
+        this.railBox = computed(() => this.#sidebarService?.iconOnly() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "railBox" }] : /* istanbul ignore next */ []));
+        // The label is clipped away on the rail, so the leading visual needs something to identify it. Only
+        // set there, so the title never duplicates a label that is already legible.
+        this.railTitle = computed(() => {
+            const tooltip = this.tooltip();
+            return tooltip && this.railBox() ? tooltip : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "railTitle" }] : /* istanbul ignore next */ []));
+        this.tabIndex = computed(() => (this.disabled() && !this.#nativeButton ? 0 : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        // Guards against a sidebar row inside a form submitting it.
+        this.type = this.#nativeButton ? "button" : null;
+        /**
+         * @description Closes the overlay drawer after this row is activated. Only applies on compact
+         * viewports, where the drawer covers the destination being navigated to. Set to `false` for rows
+         * that do not navigate, such as a disclosure trigger.
+         * @default true
+         */
+        this.closeOnSelect = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the row as unavailable and suppresses activation.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description How much room this row's leading visual needs. Use `"large"` when it opens with
+         * something avatar sized, so the icon rail lets it fill the square instead of insetting and clipping it.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Text identifying this item while the sidebar is collapsed to its icon rail, where the
+         * label is clipped away. Applied as the host's `title`, so the browser surfaces it on hover, and an
+         * ancestor carrying `monaTooltip` with `mode="content"` renders it as a styled tooltip instead.
+         * @default ""
+         */
+        this.tooltip = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    #element;
+    #menuItem;
+    #nativeButton;
+    #sidebarService;
+    onClick(event) {
+        if (this.disabled()) {
+            // `aria-disabled` is advisory: an anchor with an `href` still navigates without this.
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (this.closeOnSelect() && this.#sidebarService?.mobileOpen()) {
+            this.#sidebarService.collapse();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuButtonDirective, isStandalone: true, selector: "a[monaSidebarMenuButton], button[monaSidebarMenuButton]", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.aria-current": "current()", "attr.aria-disabled": "ariaDisabled()", "attr.disabled": "nativeDisabled()", "attr.tabindex": "tabIndex()", "attr.title": "railTitle()", "attr.type": "type", "class": "baseClass()" } }, exportAs: ["monaSidebarMenuButton"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "a[monaSidebarMenuButton], button[monaSidebarMenuButton]",
+                    exportAs: "monaSidebarMenuButton",
+                    host: {
+                        "[attr.aria-current]": "current()",
+                        "[attr.aria-disabled]": "ariaDisabled()",
+                        "[attr.disabled]": "nativeDisabled()",
+                        // An anchor without an `href` is not focusable or clickable, so a disabled link has to be
+                        // given back a tab stop to stay announceable, and its activation suppressed instead.
+                        "[attr.tabindex]": "tabIndex()",
+                        "[attr.title]": "railTitle()",
+                        "[attr.type]": "type",
+                        "[class]": "baseClass()",
+                        "(click)": "onClick($event)"
+                    }
+                }]
+        }], propDecorators: { closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * An indented submenu inside a `monaSidebarMenuItem` that is also a `monaCollapsible`.
+ *
+ * It carries no hiding of its own on the icon rail. `SidebarMenuItemDirective` closes the disclosure
+ * there instead, which leaves the trigger's `aria-expanded` truthful and lets the collapsible content
+ * directive apply its own `inert`. Hiding it here as well used to produce the opposite: a submenu the
+ * trigger still described as expanded, with focusable items, that nobody could see.
+ */
+class SidebarMenuSubDirective {
+    constructor() {
+        this.baseClass = computed(() => twMerge(sidebarMenuSubThemeVariants(), this.userClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSubDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarMenuSubDirective, isStandalone: true, selector: "ul[monaSidebarMenuSub]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarMenuSubDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ul[monaSidebarMenuSub]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * A thin strip along the sidebar's inner edge that toggles it. Place it inside `mona-sidebar`,
+ * which positions it. Hidden on narrow viewports, where the edge is too easy to hit by accident.
+ *
+ * Deliberately outside the tab order: it is a pointer shortcut for what `monaSidebarTrigger` already
+ * does, and a second tab stop onto an unlabelled 4px strip would be noise for keyboard users. Provide
+ * a `monaSidebarTrigger` as well — the rail is not a substitute for it — and give the rail an
+ * `aria-label` so pointer users of assistive technology can still identify it.
+ */
+class SidebarRailDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService);
+        this.baseClass = computed(() => sidebarRailThemeVariants({ side: this.#sidebarService.side() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.expanded = this.#sidebarService.expanded;
+        this.sidebarId = this.#sidebarService.sidebarId;
+    }
+    #sidebarService;
+    onClick() {
+        this.#sidebarService.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarRailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SidebarRailDirective, isStandalone: true, selector: "button[monaSidebarRail]", host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-controls": "sidebarId()", "attr.aria-expanded": "expanded()", "attr.tabindex": "-1", "attr.type": "'button'", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarRailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaSidebarRail]",
+                    host: {
+                        "[attr.aria-controls]": "sidebarId()",
+                        "[attr.aria-expanded]": "expanded()",
+                        "[attr.tabindex]": "-1",
+                        // Without this a rail inside a form submits it, because `submit` is a button's default type.
+                        "[attr.type]": "'button'",
+                        "[class]": "baseClass()",
+                        "(click)": "onClick()"
+                    }
+                }]
+        }] });
+
+/**
+ * @description
+ * A horizontal rule between sidebar regions. Tightens its inset on the icon rail.
+ */
+class SidebarSeparatorDirective {
+    constructor() {
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        this.baseClass = computed(() => {
+            const variantClass = sidebarSeparatorThemeVariants({
+                iconOnly: this.#sidebarService?.iconOnly() ?? false
+            });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+    }
+    #sidebarService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarSeparatorDirective, isStandalone: true, selector: "[monaSidebarSeparator]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarSeparator]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * @description
+ * Toggles a sidebar. Can be placed anywhere inside a `mona-sidebar-layout`, including in the inset,
+ * and adds no styling of its own.
+ *
+ * By default it drives the sidebar it is written inside. Set `for` to the id of a `mona-sidebar` to
+ * drive that one instead, which is what a trigger in a shared header needs when the layout holds more
+ * than one sidebar. A `for` that matches no sidebar leaves the trigger inert rather than throwing, so
+ * a sidebar that has not rendered yet does not take the page down with it.
+ *
+ * A `button` is the right host and needs nothing further. On any other element the directive supplies
+ * the rest of the button contract — `role`, a tab stop, and Enter/Space activation — so a `div` or
+ * `span` trigger is still operable by keyboard rather than silently mouse-only.
+ */
+class SidebarTriggerDirective {
+    constructor() {
+        this.#element = inject(ElementRef).nativeElement;
+        this.#layoutService = inject(SidebarLayoutService, { optional: true });
+        this.#nativeAnchor = this.#element.tagName === "A";
+        this.#nativeButton = this.#element.tagName === "BUTTON" || this.#element.tagName === "INPUT" || this.#element.tagName === "SUMMARY";
+        // Optional, because a trigger aimed at a sidebar by id is usually written outside every sidebar.
+        this.#sidebarService = inject(SidebarService, { optional: true });
+        /**
+         * The sidebar this trigger drives: the one named by `for`, else the one it is written inside, else
+         * the layout's first. That last step is what lets a trigger in the inset or a header go on working
+         * without naming anything, which is all a layout with a single sidebar ever needs.
+         */
+        this.#targetController = computed(() => {
+            const targetId = this.for();
+            if (targetId) {
+                return this.#layoutService?.getController(targetId) ?? null;
+            }
+            return this.#sidebarService?.controller ?? this.#layoutService?.primaryController() ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#targetController" }] : /* istanbul ignore next */ []));
+        // Null rather than false when nothing is targeted: a trigger that controls nothing has no
+        // expanded state to report, and claiming one would announce a control that does not exist.
+        this.expanded = computed(() => this.#targetController()?.expanded() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.role = this.#nativeButton || this.#nativeAnchor ? null : "button";
+        this.sidebarId = computed(() => this.#targetController()?.sidebarId() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarId" }] : /* istanbul ignore next */ []));
+        this.tabIndex = this.#nativeButton || this.#nativeAnchor ? null : 0;
+        this.type = this.#element.tagName === "BUTTON" ? "button" : null;
+        /**
+         * @description Id of the `mona-sidebar` to toggle. Leave unset to toggle the sidebar this trigger
+         * is written inside.
+         * @default ""
+         */
+        this.for = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    }
+    #element;
+    #layoutService;
+    #nativeAnchor;
+    #nativeButton;
+    // Optional, because a trigger aimed at a sidebar by id is usually written outside every sidebar.
+    #sidebarService;
+    /**
+     * The sidebar this trigger drives: the one named by `for`, else the one it is written inside, else
+     * the layout's first. That last step is what lets a trigger in the inset or a header go on working
+     * without naming anything, which is all a layout with a single sidebar ever needs.
+     */
+    #targetController;
+    onClick() {
+        this.#targetController()?.toggle();
+    }
+    onEnterKeydown(event) {
+        // Buttons and anchors already synthesize a click for Enter.
+        if (this.#nativeButton || this.#nativeAnchor) {
+            return;
+        }
+        event.preventDefault();
+        this.#targetController()?.toggle();
+    }
+    onSpaceKeydown(event) {
+        // Buttons already synthesize a click for Space; anchors scroll the page instead.
+        if (this.#nativeButton) {
+            return;
+        }
+        event.preventDefault();
+        this.#targetController()?.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SidebarTriggerDirective, isStandalone: true, selector: "[monaSidebarTrigger]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown.enter": "onEnterKeydown($event)", "keydown.space": "onSpaceKeydown($event)" }, properties: { "attr.aria-controls": "sidebarId()", "attr.aria-expanded": "expanded()", "attr.role": "role", "attr.tabindex": "tabIndex", "attr.type": "type" } }, exportAs: ["monaSidebarTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SidebarTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaSidebarTrigger]",
+                    exportAs: "monaSidebarTrigger",
+                    host: {
+                        "[attr.aria-controls]": "sidebarId()",
+                        "[attr.aria-expanded]": "expanded()",
+                        "[attr.role]": "role",
+                        "[attr.tabindex]": "tabIndex",
+                        // Without this a trigger inside a form submits it, because `submit` is a button's default type.
+                        "[attr.type]": "type",
+                        "(click)": "onClick()",
+                        "(keydown.enter)": "onEnterKeydown($event)",
+                        "(keydown.space)": "onSpaceKeydown($event)"
+                    }
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }] } });
+
+/**
+ * Replaces where sidebars remember whether they were left open. The default is `localStorage`, which
+ * the server cannot read; supply a cookie- or request-backed storage here to have a server-rendered
+ * application render the remembered state rather than correcting it on hydration.
+ */
+function provideSidebarStorage(storage) {
+    return makeEnvironmentProviders([{ provide: SIDEBAR_STORAGE, useValue: storage }]);
+}
+
+function injectSidebar(options) {
+    const service = inject(SidebarService, { optional: options?.optional ?? false });
+    return service?.controller ?? null;
+}
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/sidebar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LocalStorageSidebarStorage, SIDEBAR_STORAGE, SidebarComponent, SidebarContentDirective, SidebarFooterDirective, SidebarGroupActionDirective, SidebarGroupContentDirective, SidebarGroupDirective, SidebarGroupHeaderDirective, SidebarGroupLabelDirective, SidebarHeaderDirective, SidebarInputDirective, SidebarInsetDirective, SidebarLayoutComponent, SidebarMenuActionDirective, SidebarMenuBadgeDirective, SidebarMenuButtonDirective, SidebarMenuDirective, SidebarMenuItemDirective, SidebarMenuSkeletonComponent, SidebarMenuSubDirective, SidebarRailDirective, SidebarSeparatorDirective, SidebarTriggerDirective, injectSidebar, provideSidebarStorage };
+//# sourceMappingURL=nanahoshi-mona-ui-sidebar.mjs.map