@nanahoshi/mona-ui 0.3.0 → 0.5.0

package/types/nanahoshi-mona-ui-sidebar.d.ts

@@ -0,0 +1,695 @@
+import * as _nanahoshi_mona_ui_sidebar from '@nanahoshi/mona-ui/sidebar';
+import * as _angular_core from '@angular/core';
+import { Signal, EnvironmentProviders, InjectionToken } from '@angular/core';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+import * as i1 from '@angular/cdk/a11y';
+import * as i1$1 from '@nanahoshi/mona-ui/text-box';
+import * as i1$2 from '@nanahoshi/mona-ui/button';
+
+/**
+ * How the sidebar behaves when it is collapsed.
+ *
+ * - `offcanvas` — the sidebar collapses to zero width and leaves the layout.
+ * - `icon` — the sidebar shrinks to a narrow rail that keeps icons visible.
+ * - `none` — the sidebar cannot be collapsed and stays at its full width.
+ */
+type SidebarCollapsibleMode = "offcanvas" | "icon" | "none";
+
+/**
+ * Which edge of the layout the sidebar sits on. Also determines its order within the layout
+ * and which side its rail and border are drawn on.
+ *
+ * `start` and `end` are the preferred values: they follow the document's writing direction, so a
+ * `start` sidebar sits on the left in LTR and on the right in RTL without the consumer branching.
+ *
+ * `left` and `right` are retained as aliases of `start` and `end`. They were always a poor
+ * description of the behaviour — the layout orders the sidebar with flexbox, which is
+ * direction-relative, so `side="left"` already rendered on the right under RTL.
+ */
+type SidebarSide = "start" | "end" | "left" | "right";
+/** The direction-relative side, once the `left`/`right` aliases have been folded in. */
+type SidebarLogicalSide = "start" | "end";
+
+/**
+ * The visual treatment of the sidebar region.
+ *
+ * - `sidebar` — flush against the edge of the layout, separated by a single border.
+ * - `floating` — detached from the edge, with its own rounded, bordered surface.
+ * - `inset` — the sidebar itself is plain, and the inset region beside it becomes the raised surface.
+ */
+type SidebarVariant = "sidebar" | "floating" | "inset";
+
+/**
+ * @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.
+ */
+declare class SidebarComponent {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /** The compact presentation: an overlay pinned to one edge rather than a column in the flow. */
+    protected readonly drawer: _angular_core.Signal<boolean>;
+    /** Published rather than the raw input, so a `left`/`right` alias still reports as `start`/`end`. */
+    protected readonly logicalSide: _angular_core.Signal<_nanahoshi_mona_ui_sidebar.SidebarLogicalSide>;
+    /**
+     * 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.
+     */
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    protected readonly offCanvasClosed: _angular_core.Signal<boolean>;
+    /** A drawer is a modal surface; a docked sidebar keeps whatever role the consumer gave it. */
+    protected readonly resolvedRole: _angular_core.Signal<string | null>;
+    protected readonly sidebarId: _angular_core.Signal<string>;
+    protected readonly state: _angular_core.Signal<"expanded" | "collapsed">;
+    /**
+     * `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.
+     */
+    protected readonly widthString: _angular_core.Signal<string>;
+    /**
+     * @description Accessible name for the sidebar region. Required when `role` is set, and used as the
+     * drawer's name on compact viewports.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @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"
+     */
+    readonly collapsible: _angular_core.InputSignal<SidebarCollapsibleMode>;
+    /**
+     * @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
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /**
+     * @description Width of the icon rail while collapsed. Only applies when `collapsible` is `"icon"`.
+     * Numbers are treated as pixels.
+     * @default "3rem"
+     */
+    readonly iconWidth: _angular_core.InputSignal<string | number>;
+    /**
+     * @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 ""
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * @description Width of the overlay drawer on compact viewports. Numbers are treated as pixels.
+     * @default "18rem"
+     */
+    readonly mobileWidth: _angular_core.InputSignal<string | number>;
+    /**
+     * @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 ""
+     */
+    readonly persistKey: _angular_core.InputSignal<string>;
+    /**
+     * @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 ""
+     */
+    readonly role: _angular_core.InputSignal<string>;
+    /**
+     * @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"
+     */
+    readonly side: _angular_core.InputSignal<SidebarSide>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    /**
+     * @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"
+     */
+    readonly variant: _angular_core.InputSignal<SidebarVariant>;
+    /**
+     * @description Width of the sidebar while expanded. Numbers are treated as pixels.
+     * @default "16rem"
+     */
+    readonly width: _angular_core.InputSignal<string | number>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "mona-sidebar", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "iconWidth": { "alias": "iconWidth"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; "isSignal": true; }; "persistKey": { "alias": "persistKey"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarLayoutComponent {
+    #private;
+    protected readonly backdropClass: _angular_core.Signal<string>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly compact: _angular_core.Signal<boolean>;
+    /** One backdrop serves every sidebar, because only one of their drawers is ever open. */
+    protected readonly mobileOpen: _angular_core.Signal<boolean>;
+    /**
+     * @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
+     */
+    readonly mobileBreakpoint: _angular_core.InputSignal<number>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    constructor();
+    protected onBackdropClick(): void;
+    protected onEscape(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarLayoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarLayoutComponent, "mona-sidebar-layout", never, { "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarMenuSkeletonComponent {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly iconOnly: _angular_core.Signal<boolean>;
+    /**
+     * @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%"
+     */
+    readonly labelWidth: _angular_core.InputSignal<string | number>;
+    /**
+     * @description Renders a square standing in for the item's icon.
+     * @default true
+     */
+    readonly showIcon: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarMenuSkeletonComponent, "mona-sidebar-menu-skeleton", never, { "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SidebarContentDirective {
+    #private;
+    /**
+     * 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.
+     */
+    protected readonly baseClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarContentDirective, "[monaSidebarContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarFooterDirective {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarFooterDirective, "[monaSidebarFooter]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarGroupDirective {
+    protected readonly baseClass: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarGroupDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarGroupDirective, "[monaSidebarGroup]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarGroupActionDirective {
+    #private;
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarGroupActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarGroupActionDirective, "button[monaSidebarGroupAction]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description
+ * The body of a `monaSidebarGroup`, below its header. Wraps the menu itself.
+ */
+declare class SidebarGroupContentDirective {
+    protected readonly baseClass: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarGroupContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarGroupContentDirective, "[monaSidebarGroupContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarGroupHeaderDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarGroupHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarGroupHeaderDirective, "[monaSidebarGroupHeader]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description
+ * The name of a group. Fades out on the icon rail, where there is no width to read it in.
+ */
+declare class SidebarGroupLabelDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarGroupLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarGroupLabelDirective, "[monaSidebarGroupLabel]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarHeaderDirective {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarHeaderDirective, "[monaSidebarHeader]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @description
+ * A text input sized for the sidebar, composing `monaTextBox`. Stands down on the icon rail,
+ * where there is no room to type.
+ */
+declare class SidebarInputDirective {
+    #private;
+    protected readonly baseClass: string;
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarInputDirective, "input[monaSidebarInput]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.TextBoxDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarInsetDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly behindDrawer: _angular_core.Signal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarInsetDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarInsetDirective, "[monaSidebarInset]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarMenuActionDirective {
+    #private;
+    protected readonly baseClass: string;
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuActionDirective, "button[monaSidebarMenuAction]", never, {}, {}, never, never, true, [{ directive: typeof i1$2.ButtonDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarMenuBadgeDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuBadgeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuBadgeDirective, "[monaSidebarMenuBadge]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SidebarMenuDirective {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuDirective, "ul[monaSidebarMenu]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * How much room the button's leading visual needs.
+ *
+ * - `medium` — sized for an icon, which the icon rail insets so it sits centred in the square.
+ * - `large` — sized for a full-height visual such as an avatar, which fills the rail square edge to
+ *   edge, and which is given a taller row while the sidebar is expanded.
+ */
+type SidebarMenuButtonSize = "medium" | "large";
+
+/**
+ * @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.
+ */
+declare class SidebarMenuButtonDirective {
+    #private;
+    protected readonly ariaDisabled: _angular_core.Signal<"true" | null>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * 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.
+     */
+    protected readonly current: _angular_core.Signal<"page" | null>;
+    protected readonly nativeDisabled: _angular_core.Signal<"" | null>;
+    /**
+     * 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.
+     */
+    protected readonly railBox: _angular_core.Signal<boolean>;
+    protected readonly railTitle: _angular_core.Signal<string | null>;
+    protected readonly tabIndex: _angular_core.Signal<0 | null>;
+    protected readonly type: string | 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
+     */
+    readonly closeOnSelect: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Renders the row as unavailable and suppresses activation.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @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"
+     */
+    readonly size: _angular_core.InputSignal<SidebarMenuButtonSize>;
+    /**
+     * @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 ""
+     */
+    readonly tooltip: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuButtonDirective, "a[monaSidebarMenuButton], button[monaSidebarMenuButton]", ["monaSidebarMenuButton"], { "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SidebarMenuItemDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @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
+     */
+    readonly active: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuItemDirective, "li[monaSidebarMenuItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarMenuSubDirective {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarMenuSubDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarMenuSubDirective, "ul[monaSidebarMenuSub]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarRailDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    protected readonly sidebarId: _angular_core.Signal<string>;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarRailDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarRailDirective, "button[monaSidebarRail]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description
+ * A horizontal rule between sidebar regions. Tightens its inset on the icon rail.
+ */
+declare class SidebarSeparatorDirective {
+    #private;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarSeparatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarSeparatorDirective, "[monaSidebarSeparator]", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class SidebarTriggerDirective {
+    #private;
+    protected readonly expanded: _angular_core.Signal<boolean | null>;
+    protected readonly role: string | null;
+    protected readonly sidebarId: _angular_core.Signal<string | null>;
+    protected readonly tabIndex: number | null;
+    protected readonly type: string | null;
+    /**
+     * @description Id of the `mona-sidebar` to toggle. Leave unset to toggle the sidebar this trigger
+     * is written inside.
+     * @default ""
+     */
+    readonly for: _angular_core.InputSignal<string>;
+    protected onClick(): void;
+    protected onEnterKeydown(event: Event): void;
+    protected onSpaceKeydown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SidebarTriggerDirective, "[monaSidebarTrigger]", ["monaSidebarTrigger"], { "for": { "alias": "for"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The safe, read-and-command view of one sidebar, returned by `injectSidebar()`.
+ *
+ * Structural facts — side, variant, collapsible mode — are readable but not settable. They are
+ * authored as inputs on `mona-sidebar`, and letting a descendant write them would leave the service
+ * and the component disagreeing about the same sidebar, with the component winning on the next
+ * change detection pass. Consumers who need them to change should bind the inputs.
+ */
+interface SidebarController {
+    /** Closes the sidebar. On a compact viewport this closes the drawer instead. */
+    collapse(): void;
+    /** How the sidebar behaves when collapsed, as authored on `mona-sidebar`. */
+    readonly collapsible: Signal<SidebarCollapsibleMode>;
+    /**
+     * Whether the viewport is narrow enough that the sidebar presents as an overlay drawer rather
+     * than as a column in the layout.
+     */
+    readonly compact: Signal<boolean>;
+    /** Opens the sidebar. On a compact viewport this opens the drawer instead. */
+    expand(): void;
+    /**
+     * Whether the sidebar is showing at full width. On a compact viewport this reports the drawer's
+     * state, so a single binding drives both presentations.
+     */
+    readonly expanded: Signal<boolean>;
+    /**
+     * Whether the sidebar is currently reduced to its icon rail, meaning parts that only make sense
+     * at full width — labels, trailing actions, submenus — should step aside. Never true while
+     * compact, where the drawer always presents at full width.
+     */
+    readonly iconOnly: Signal<boolean>;
+    /** Whether the overlay drawer is open. Only meaningful while `compact` is true. */
+    readonly mobileOpen: Signal<boolean>;
+    /** Which edge the sidebar sits on, resolved to a direction-relative side. */
+    readonly side: Signal<SidebarLogicalSide>;
+    /** The id of the sidebar element, for `aria-controls` on a custom trigger. */
+    readonly sidebarId: Signal<string>;
+    /** The expanded state as a string, for `data-state` bindings and styling hooks. */
+    readonly state: Signal<"expanded" | "collapsed">;
+    /** Flips the sidebar between open and closed, on whichever presentation is current. */
+    toggle(): void;
+    /** The visual treatment of the sidebar, as authored on `mona-sidebar`. */
+    readonly variant: Signal<SidebarVariant>;
+}
+
+/**
+ * Where a sidebar remembers whether it was left open. Supplied through `SIDEBAR_STORAGE`, and only
+ * ever consulted for a sidebar that was given a `persistKey`.
+ *
+ * Only the docked state is ever handed to it. A drawer on a compact viewport is deliberately never
+ * persisted: restoring one open would cover the page on load, in front of the content the reader
+ * asked for.
+ */
+interface SidebarStorage {
+    /**
+     * The remembered state for `key`, or `null` when nothing has been stored under it — including
+     * when this storage cannot answer, such as on the server. A `null` leaves the sidebar on whatever
+     * its `expanded` input says.
+     */
+    read(key: string): boolean | null;
+    /** Records the docked state for `key`. Failing to store it must not throw. */
+    write(key: string, expanded: boolean): void;
+}
+
+/**
+ * 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.
+ */
+declare function provideSidebarStorage(storage: SidebarStorage): EnvironmentProviders;
+
+/**
+ * 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()`.
+ */
+declare class LocalStorageSidebarStorage implements SidebarStorage {
+    #private;
+    /** Takes the value of `PLATFORM_ID`, which is a string in practice though typed loosely. */
+    constructor(platformId: string | object);
+    read(key: string): boolean | null;
+    write(key: string, expanded: boolean): void;
+}
+
+/**
+ * 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.
+ */
+declare const SIDEBAR_STORAGE: InjectionToken<SidebarStorage>;
+
+/**
+ * @description
+ * Reads the sidebar that encloses the calling component or directive. Must be called from an
+ * injection context inside a `mona-sidebar-layout`.
+ *
+ * Returns the sidebar's state and the commands that are safe to issue from anywhere — opening,
+ * closing and toggling, each routed to whichever presentation is current. Structural facts such as
+ * the side, variant and collapsible mode are readable but not settable; those are authored as inputs
+ * on `mona-sidebar`, and writing them from a descendant would only desynchronise the two.
+ *
+ * @param options.optional Returns `null` instead of throwing when there is no enclosing layout.
+ */
+declare function injectSidebar(): SidebarController;
+declare function injectSidebar(options: {
+    optional: true;
+}): SidebarController | null;
+
+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 };
+export type { SidebarCollapsibleMode, SidebarController, SidebarLogicalSide, SidebarMenuButtonSize, SidebarSide, SidebarStorage, SidebarVariant };