@malva-ui/core 0.1.12

package/docs/ai/tree.md

@@ -0,0 +1,177 @@
+name: libs-tree
+description: Documentation for the @malva-ui/core/tree library — hierarchical data tree component
+type: project
+---
+
+# Library: tree
+
+## Overview
+
+The Tree library (`@malva-ui/core/tree`) provides a hierarchical data tree component for displaying nested data.
+
+Built on the **`@angular/aria` headless `Tree`/`TreeItem`/`TreeItemGroup`** directives (applied internally — consumers never see `ng*` selectors). aria owns roles, `aria-level`/`setsize`/`posinset`, roving `tabindex`, keyboard navigation (arrows/Home/End), **text typeahead**, and selection; the component keeps the data-driven `nodes` API, the `mlv-expand` animation, lazy loading, custom templates and multi-select checkboxes.
+
+**Features:**
+
+- Expand/collapse nodes with smooth animated height transition (tree-tuned `mlv-expand` keyframes without translateY)
+- Single-select and multi-select mode using `mlv-checkbox` (no native input)
+- Lazy loading via async `loadChildren` callback with spinner (`mlv-loader`)
+- Full keyboard navigation + text typeahead, owned by `@angular/aria`
+- Optional file-explorer style connector lines (opt-in via `showConnectors`)
+- Optional navigation-tree mode (`nav` + `currentType`) exposing `aria-current` for sidebar-style trees
+- Built-in icon slot on each node (`MlvTreeNode.icon`) rendered as a Lucide dynamic icon in the default template
+- Custom node templates via `[mlvTreeNodeDef]` structural directive
+- Generic typed `MlvTreeNode<T>` interface
+- Data-driven `nodes`, rendered internally by a recursive component tree
+
+## `@angular/aria` architecture
+
+- **Recursion is expressed as nested COMPONENTS** (`MlvTreeSubtree` renders one level of `[ngTreeItem]` rows and, for branches, a `<div role="group"><ng-template ngTreeItemGroup>` wrapping a child `MlvTreeSubtree`). A self-referential `ngTemplateOutlet` (the shape in aria's own docs) throws `createEmbeddedViewImpl is not a function` when rendered through aria's `DeferredContent` in this toolchain — recursive components avoid it.
+- **aria's `Tree` is applied to an inner `.mlv-tree__root` element, NOT as a `hostDirective`.** aria's config inputs (`multi`, `selectionMode`, `softDisabled`) are derived internally from `selectMode`, and a component **cannot** set its own host-directive inputs from its `host` metadata (silently ignored — verified). Binding them on an in-template `[ngTree]` element works. Consequence: `role="tree"`, `aria-multiselectable`/`orientation`/`disabled`/`activedescendant`, the roving tabindex and all keyboard/pointer listeners live on `.mlv-tree__root`, not on the `<mlv-tree>` host.
+- **`mlv-expand` animation preserved** by setting `[preserveContent]="true"` on each `ngTreeItem`: aria's `DeferredContent` then renders the group on first expand and never unmounts it, so `mlv-expand`'s own `[opened]` owns the enter/leave animation.
+- **Config pins:** `selectionMode="explicit"` (aria default is `follow`/select-on-focus), `softDisabled=true` (disabled rows stay focusable-but-inert, matching the historical arrow-lands-on-disabled behavior), `wrap=false` (clamp at ends).
+- **Selection bridge:** aria's `Tree.value` model is a `V[]` array of node ids (single-select holds ≤1). The component mirrors it in `_value` and emits `selectionChange` as a `Set`. `selectMode:'none'` sets every item `selectable=false`.
+
+## Public API
+
+Exported from `@malva-ui/core/tree`:
+
+| Export                     | Kind           | Description                                                                                                  |
+| -------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |
+| `MlvTree`                  | Component      | Root tree component — `mlv-tree`                                                                             |
+| `MlvTreeNodeDef`           | Directive      | `[mlvTreeNodeDef]` — custom node template directive                                                          |
+| `MlvTreeNode<T>`           | Interface      | Generic tree node: `{ id, label, data, children?, loadChildren?, disabled?, icon?, expanded? }`              |
+| `MlvFlatTreeNode<T>`       | Interface      | Internal flat-list node for template context: `{ node, depth, isExpanded, hasChildren, isLoading, key }`     |
+| `MlvTreeNodeDefContext<T>` | Interface      | Template context for `[mlvTreeNodeDef]`                                                                      |
+| `MlvTreeSelectMode`        | Type           | `'none' \| 'single' \| 'multi'`                                                                              |
+| `MlvTreeCurrentType`       | Type           | `aria-current` value for nav mode: `'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false'` |
+| `MLV_TREE`                 | InjectionToken | Parent-tree accessor token for internal subtree communication                                                |
+| `MlvTreeAccessor`          | Interface      | Accessor contract exposed to `MlvTreeSubtree`                                                                |
+
+The recursive `MlvTreeSubtree` is an implementation detail and is not
+part of the package barrel.
+
+## Component: `MlvTree` (`mlv-tree`)
+
+### Inputs
+
+| Input            | Type                 | Default  | Description                                                                                        |
+| ---------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------- |
+| `nodes`          | `MlvTreeNode<T>[]`   | `[]`     | Root-level tree nodes                                                                              |
+| `selectMode`     | `MlvTreeSelectMode`  | `'none'` | Selection behavior                                                                                 |
+| `indentSize`     | `number`             | `1.5`    | Indentation per depth level in rem                                                                 |
+| `showConnectors` | `boolean` (coerced)  | `false`  | When true, renders L-shaped connector lines between parent and child nodes (file-explorer pattern) |
+| `nav`            | `boolean` (coerced)  | `false`  | Navigation-tree mode — selected rows expose `aria-current` instead of `aria-selected`              |
+| `currentType`    | `MlvTreeCurrentType` | `'page'` | The `aria-current` value emitted for the active row when `nav` is enabled                          |
+
+### Outputs
+
+| Output            | Type                    | Description                                     |
+| ----------------- | ----------------------- | ----------------------------------------------- |
+| `selectionChange` | `Set<string \| number>` | Emits selected node IDs on change               |
+| `nodeActivate`    | `MlvTreeNode<T>`        | Emits when a node is activated (click or Enter) |
+| `nodeToggle`      | `{ node, expanded }`    | Emits when a node is expanded or collapsed      |
+
+### Keyboard Navigation
+
+Owned by `@angular/aria` (listeners on `.mlv-tree__root`):
+
+| Key            | Action                                                                           |
+| -------------- | -------------------------------------------------------------------------------- |
+| `ArrowRight`   | Expand focused node (if collapsed); move to first child (if expanded)            |
+| `ArrowLeft`    | Collapse focused node (if expanded); move to parent (if collapsed)               |
+| `ArrowDown`    | Move focus to next visible node                                                  |
+| `ArrowUp`      | Move focus to previous visible node                                              |
+| `Home`         | Move focus to first node                                                         |
+| `End`          | Move focus to last visible node                                                  |
+| `Enter`        | Select (single) / toggle (multi) the focused node; `nodeActivate` in `none` mode |
+| `Space`        | Select (single) / toggle (multi) the focused node                                |
+| _type a label_ | **Typeahead** — jump to the next node whose `label` matches the typed text       |
+
+> **Behavior changes from the pre-aria tree:** (1) `Enter` now **selects/toggles** the focused row (previously it expanded/collapsed branch nodes — use `ArrowRight`/`ArrowLeft` or the chevron for that). (2) In multi mode, clicking a row now **toggles** its selection (the checkbox is presentational and reflects state). (3) Text typeahead is new. (4) The single-select "click the selected row again to deselect" affordance is preserved by a component-level interceptor (aria's `selectOne` alone never deselects).
+
+## Directive: `MlvTreeNodeDef` (`[mlvTreeNodeDef]`)
+
+Custom template for node content. Applied to an `<ng-template>`:
+
+```html
+<mlv-tree [nodes]="data">
+  <ng-template mlvTreeNodeDef let-flatNode>
+    <svg lucideFile [size]="14" />
+    {{ flatNode.node.label }}
+    <span class="size">{{ flatNode.node.data.size }}</span>
+  </ng-template>
+</mlv-tree>
+```
+
+Template context: `MlvFlatTreeNode<T>` — access via `let-flatNode`.
+
+## Interface: `MlvTreeNode<T>`
+
+```typescript
+interface MlvTreeNode<T = unknown> {
+  id: string | number;
+  label: string;
+  data: T; // Arbitrary node data payload
+  children?: MlvTreeNode<T>[]; // Static children
+  loadChildren?: () => Promise<MlvTreeNode<T>[]>; // Async lazy loader
+  disabled?: boolean;
+  icon?: string; // Optional Lucide icon name shown in the default template
+  expanded?: boolean; // Initial expanded state
+}
+```
+
+## SCSS / BEM
+
+Block: `mlv-tree`
+
+| Class                          | Description                                                          |
+| ------------------------------ | -------------------------------------------------------------------- |
+| `.mlv-tree`                    | Host element (plain wrapper)                                         |
+| `.mlv-tree--connectors`        | Host modifier enabling file-explorer connector lines                 |
+| `.mlv-tree__root`              | The aria `[ngTree]` container (`role="tree"`); `display: contents`   |
+| `.mlv-tree__subtree`           | Recursive `mlv-tree-subtree` host; `display: contents` (transparent) |
+| `.mlv-tree__group`             | The `<div role="group">` wrapping a node's children                  |
+| `.mlv-tree__item`              | A single tree node row (`[ngTreeItem]`, `role="treeitem"`)           |
+| `.mlv-tree__content`           | Inner content wrapper (icon + label or custom template)              |
+| `.mlv-tree__icon`              | Default-template icon rendered from `MlvTreeNode.icon`               |
+| `.mlv-tree__toggle`            | Expand/collapse chevron button                                       |
+| `.mlv-tree__checkbox`          | `mlv-checkbox` in multi-select mode                                  |
+| `.mlv-tree__label`             | Node label text                                                      |
+| `.mlv-tree__spinner`           | Spinner wrapper during lazy load                                     |
+| `.mlv-tree__item--expanded`    | Node is expanded                                                     |
+| `.mlv-tree__item--selected`    | Node is selected                                                     |
+| `.mlv-tree__item--disabled`    | Node is disabled                                                     |
+| `.mlv-tree__item--leaf`        | Node has no children (toggle hidden)                                 |
+| `.mlv-tree__item--loading`     | Node is loading children                                             |
+| `.mlv-tree__toggle--expanded`  | Toggle shows chevron-down icon                                       |
+| `.mlv-tree__toggle--invisible` | Toggle is hidden (leaf node)                                         |
+
+## Dependencies
+
+- `@angular/aria` — headless `Tree`, `TreeItem`, `TreeItemGroup` directives (roles, keyboard, selection, typeahead, expansion)
+- `@malva-ui/core/loader` — spinner for lazy-loading state (`mlv-loader`)
+- `@malva-ui/core/expand` — animated height transition wrapper for children
+- `@malva-ui/core/checkbox` — `mlv-checkbox` used in multi-select mode (presentational)
+- `@lucide/angular` — `LucideChevronRight`, `LucideChevronDown`, `LucideDynamicIcon` for icons
+- `@angular/cdk/coercion` — `coerceBooleanProperty` for boolean inputs
+- `@malva-ui/styles` — all `--mlv-*` CSS custom properties
+
+## Accessibility
+
+- All ARIA is now emitted by `@angular/aria`. Each `[ngTreeItem]` row (`role="treeitem"`) exposes `aria-level` (1-based depth), `aria-setsize` (sibling count at that level), `aria-posinset` (1-based position among siblings), `aria-expanded`, `aria-selected` (or `aria-current` in `nav` mode), and `aria-disabled`. The `.mlv-tree__root` container carries `role="tree"`, `aria-multiselectable`, `aria-orientation`, `aria-disabled` and `aria-activedescendant`.
+- **Single tab stop:** aria manages the roving tabindex on the rows — only the active row has `tabindex="0"`; the `.mlv-tree__root` container holds `tabindex="-1"`. In multi-select mode the per-row `mlv-checkbox` is rendered with `[tabbable]="false"` (and `pointer-events: none`) so it neither adds a second tab stop nor intercepts the row click — it is a presentational reflection of `aria-selected`; **Space**/click toggles selection via aria.
+- **Enter/Space** select (single) or toggle (multi) the focused row via aria. `nodeActivate` is emitted on row click/Enter/Space in `none` mode and on user single-selection.
+- Disabled rows stay focusable-but-inert (`softDisabled=true`) so arrow navigation still lands on them, matching the historical behavior.
+
+## Notes
+
+- Multi-select renders a `mlv-checkbox` per node, non-tabbable (`[tabbable]="false"`) and `pointer-events: none` (presentational). No circular dependency — `@malva-ui/core/checkbox` does not import the tree library.
+- The chevron toggle flips the aria `TreeItem.expanded` model (`_onToggle` → `item.expanded.set(...)`, `stopPropagation` so the aria tree does not also select the row). Expansion state is mirrored in the component's `_expandedIds` set (bound to each item's `[expanded]`) so it drives both `mlv-expand` and the programmatic `expandNode`/`collapseNode`/`expandAll`/`collapseAll` API; `(expandedChange)` from aria syncs the set, triggers lazy loading, and emits `nodeToggle`.
+- Toggle icon is swapped based on state: `LucideChevronRight` when collapsed, `LucideChevronDown` when expanded (no CSS rotation).
+- Expand/collapse uses tree-scoped keyframes (`mlv-tree--enter` / `mlv-tree--leave`) that omit the `translateY` shift used by default `mlv-expand`. `[preserveContent]="true"` on each `ngTreeItem` keeps aria's `DeferredContent` from unmounting the group so `mlv-expand` can animate the collapse.
+- Connector lines are rendered as CSS pseudo-elements scoped to nested `.mlv-tree__group` (vertical) and its descendant `.mlv-tree__item` (horizontal); root items sit outside any group and render without connectors. Offset via `--mlv-tree-connector-offset` set per group from `depth`.
+- Lazy-loaded children are cached — subsequent expands do not re-trigger the async callback.
+- Indentation is applied via `[style.padding-inline-start]="depth() * indentSize() + 'rem'"` on `.mlv-tree__item`, where `depth` is threaded through the recursive `MlvTreeSubtree` (avoids reading aria's `item.level()`, which is only available after the item's `ngOnInit`).
+- **Selection membership is O(1):** `_isSelected(id)` (called once per row for the `--selected` class and again per row for the multi-select checkbox `[checked]`) reads a `computed` `Set` derived from `_value` (`_selectedIdSet`) instead of scanning the `_value` array — mirrors the `_expandedIds`/`_loadingIds` Set pattern.
+- **Custom-template context is identity-stable:** `MlvTreeSubtree._nodeContext(node)` (bound to `[ngTemplateOutletContext]` for `[mlvTreeNodeDef]`) returns a `WeakMap`-cached `{ $implicit: MlvFlatTreeNode }` wrapper keyed by node identity; a fresh `MlvFlatTreeNode` is built only when a derived field (`depth`/`isExpanded`/`hasChildren`/`isLoading`) actually changes. Unchanged rows keep the same context reference across change detection, so the custom node template (and any OnPush children inside it) is not re-stamped/re-checked against a freshly allocated object each pass. Field changes still produce a new object so consumers see updates.

package/drawer/index.d.ts

@@ -0,0 +1,11 @@
+export * from './lib/drawer/drawer';
+export * from './lib/drawer-content';
+export * from './lib/drawer-header';
+export * from './lib/drawer-body';
+export * from './lib/drawer-footer';
+export * from './lib/drawer.service';
+export * from './lib/drawer-ref';
+export * from './lib/drawer-section/drawer-section';
+export * from './lib/drawer-sections.service';
+export * from './lib/drawer-sections/drawer-sections';
+export * from './lib/generate-routable-drawer-route';

package/drawer/lib/drawer/drawer.d.ts

@@ -0,0 +1,106 @@
+import type { TemplateRef } from '@angular/core';
+import type { PositionStrategy } from '@angular/cdk/overlay';
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { MlvOverlayHostBase } from '@malva-ui/cdk/overlay';
+import { MlvDrawerContent } from '../drawer-content';
+import type { MlvDrawerPosition } from '../drawer.service';
+import * as i0 from "@angular/core";
+export declare class MlvDrawer extends MlvOverlayHostBase {
+    /** @protected The component's i18n strings signal. */
+    protected readonly _i18n: import("@angular/core").Signal<import("@malva-ui/i18n").MlvDrawerI18n>;
+    /** @protected Base CSS class of the drawer backdrop. */
+    protected readonly _backdropClass = "mlv-drawer-backdrop";
+    /** Which edge of the viewport the drawer slides from. */
+    readonly position: import("@angular/core").InputSignal<MlvDrawerPosition>;
+    /**
+     * Accessible name for the drawer dialog surface. Used as the `aria-label`
+     * when no `ariaLabelledBy` is provided. When both are omitted, the drawer
+     * falls back to the localized default ("Drawer") so the `role="dialog"`
+     * is never left without an accessible name.
+     */
+    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Id of a visible element (typically a projected `[mlvDrawerHeader]`) that
+     * labels the drawer. When set, it takes precedence over `ariaLabel` and the
+     * i18n fallback via `aria-labelledby` — mirroring how `mlv-dialog` labels
+     * itself by its projected header.
+     */
+    readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * @protected Resolved `aria-label` for the dialog surface: the explicit
+     * `ariaLabel` input, or the localized fallback. Suppressed (null) when
+     * `ariaLabelledBy` is set so the two naming methods never conflict.
+     */
+    protected readonly _resolvedAriaLabel: import("@angular/core").Signal<string | null>;
+    /**
+     * CSS width (left/right drawers) or height (top/bottom drawers) of the panel.
+     * Used as the initial size when `resizable` is false or no `defaultSnap` is set.
+     */
+    readonly size: import("@angular/core").InputSignal<string>;
+    /**
+     * When true, renders a drag handle on the inward-facing edge.
+     * Enables drag-to-resize and swipe-to-dismiss.
+     */
+    readonly resizable: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Sorted array of viewport-percentage snap points (0–100).
+     * After drag ends, the panel animates to the nearest snap point.
+     * If empty, the panel stays at its released position.
+     * Only effective when `resizable` is true.
+     */
+    readonly snapPoints: import("@angular/core").InputSignal<number[]>;
+    /**
+     * Initial snap point percentage (0–100) applied when the drawer opens.
+     * Defaults to 100 (full size). Only used when `resizable` is true.
+     */
+    readonly defaultSnap: import("@angular/core").InputSignal<number>;
+    /**
+     * CSS min-size floor applied during drag resize.
+     * Only used when `resizable` is true.
+     */
+    readonly minSize: import("@angular/core").InputSignal<string>;
+    /**
+     * CSS max-size ceiling for the panel's sizing axis (width for `left`/`right`,
+     * height for `top`/`bottom`).
+     *
+     * Honoured whether or not the drawer is `resizable` — a fixed `size` is
+     * clamped by it too. The resolved ceiling is always additionally clamped to
+     * the viewport (`100dvw`/`100dvh`), so a `size="36rem"` drawer can never be
+     * wider than a 375 px phone.
+     */
+    readonly maxSize: import("@angular/core").InputSignal<string>;
+    readonly hiddenTransform: import("@angular/core").Signal<string>;
+    /** @protected Projected drawer content directive, rendered into the overlay panel. */
+    protected readonly contentRef: import("@angular/core").Signal<MlvDrawerContent | undefined>;
+    /** @protected The `#drawerTemplate` view template attached to the CDK overlay portal. */
+    protected readonly drawerTemplate: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
+    /**
+     * @protected Computes the initial panel size string.
+     * When resizable, uses `defaultSnap` as a dvh/dvw percentage;
+     * otherwise falls back to the `size` input.
+     */
+    protected readonly _initialPanelSize: import("@angular/core").Signal<string>;
+    /**
+     * @private Combines the configured `maxSize` with the viewport ceiling for
+     * the sizing axis.
+     *
+     * The viewport ceiling is unconditional: without it a fixed `size` larger
+     * than the screen (`size="36rem"` on a 375 px phone) renders a panel that
+     * hangs off the edge. `maxSize` is folded in through CSS `min()` so it is
+     * honoured on the non-resizable path too. The `'100%'` default is dropped
+     * rather than nested — it resolves against the overlay pane, which is itself
+     * sized by this panel, so it would add nothing but an indirection.
+     */
+    private _resolveMaxSize;
+    /**
+     * Resolved inline geometry for the panel element: the sizing-axis `size`, the
+     * cross-axis viewport fill, and the max ceilings on both axes.
+     */
+    get drawerDimensions(): Record<string, string>;
+    /** @protected Returns the drawer surface template to attach to the overlay. */
+    protected _getOverlayTemplate(): TemplateRef<unknown> | undefined;
+    /** @protected Anchors the drawer to the configured viewport edge. */
+    protected _buildPositionStrategy(): PositionStrategy;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDrawer, "mlv-drawer", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "snapPoints": { "alias": "snapPoints"; "required": false; "isSignal": true; }; "defaultSnap": { "alias": "defaultSnap"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; }, {}, ["contentRef"], never, true, never>;
+}

package/drawer/lib/drawer-body.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/** Scrollable body region used by declarative and service-opened drawers. */
+export declare class MlvDrawerBody {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDrawerBody, "[mlvDrawerBody]", never, {}, {}, never, ["*"], true, never>;
+}
+/** Backwards-compatible public name retained for existing imports. */
+export { MlvDrawerBody as DrawerBodyDirective };

package/drawer/lib/drawer-content.d.ts

@@ -0,0 +1,6 @@
+import { MlvStructural } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+export declare class MlvDrawerContent extends MlvStructural {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvDrawerContent, "[mlvDrawerContent]", never, {}, {}, never, never, true, never>;
+}

package/drawer/lib/drawer-footer.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class MlvDrawerFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvDrawerFooter, "[mlvDrawerFooter]", never, {}, {}, never, never, true, never>;
+}

package/drawer/lib/drawer-header.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class MlvDrawerHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvDrawerHeader, "[mlvDrawerHeader]", never, {}, {}, never, never, true, never>;
+}

package/drawer/lib/drawer-ref.d.ts

@@ -0,0 +1,29 @@
+import type { OverlayRef } from '@angular/cdk/overlay';
+import { MlvOverlayRef } from '@malva-ui/cdk/overlay';
+/**
+ * Reference to an imperatively opened drawer; exposes `close()`, `afterClosed()`,
+ * and `beforeClose()`.
+ *
+ * Thin subclass of {@link MlvOverlayRef} that supplies the drawer surface's
+ * leave-animation class names and fallback duration; all close/afterClosed/
+ * beforeClose logic is inherited.
+ *
+ * @typeParam R - The result type emitted by `afterClosed()`. Defaults to `unknown`.
+ */
+export declare class MlvDrawerRef<R = unknown> extends MlvOverlayRef<R> {
+    /** @private The edge the drawer slides from. */
+    private readonly _position;
+    /** @private Configured close-animation duration in milliseconds. */
+    private readonly _animationDuration;
+    /** @protected Backdrop leave-animation class for drawers. */
+    protected readonly _backdropLeavingClass = "mlv-drawer-backdrop--leaving";
+    /** @protected Panel leave-animation class for drawers. */
+    protected readonly _panelLeaveClass = "mlv-drawer--leave";
+    /** @protected Fallback close-animation duration (ms) for drawers. */
+    protected readonly _leaveFallbackMs = 350;
+    constructor(overlayRef: OverlayRef, 
+    /** @private The edge the drawer slides from. */
+    _position?: string, 
+    /** @private Configured close-animation duration in milliseconds. */
+    _animationDuration?: number);
+}

package/drawer/lib/drawer-resize.d.ts

@@ -0,0 +1,65 @@
+import type { MlvDrawerPosition } from './drawer.service';
+import * as i0 from "@angular/core";
+/**
+ * Internal directive that powers drag-to-resize on `mlv-drawer__handle`.
+ * Applied by `MlvDrawer` when `resizable=true`; not intended for
+ * direct external use.
+ *
+ * @internal
+ */
+export declare class MlvDrawerResize {
+    /** @private Host element ref — the drawer resize handle. */
+    private readonly _el;
+    /** @private DestroyRef used for observable and listener cleanup. */
+    private readonly _destroyRef;
+    /** @private NgZone used to re-enter Angular after out-of-zone pointer handling. */
+    private readonly _zone;
+    /**
+     * Drawer edge position — determines drag axis and dismiss direction.
+     */
+    readonly position: import("@angular/core").InputSignal<MlvDrawerPosition>;
+    /**
+     * Sorted snap point percentages (0–100). Empty means free resize with no
+     * snapping. The handle snaps to the nearest point after drag ends.
+     */
+    readonly snapPoints: import("@angular/core").InputSignal<number[]>;
+    /**
+     * Emitted when the user swipes past the velocity dismiss threshold or
+     * navigates the handle to zero size via keyboard.
+     */
+    readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+    /** @protected Current panel size as an integer percentage, exposed for ARIA aria-valuenow. */
+    protected _currentPercent: number;
+    /** @private Last pointer position (px) sampled for velocity tracking. */
+    private _lastPos;
+    /** @private Timestamp of the last pointer sample for velocity tracking. */
+    private _lastTime;
+    /** @private Current drag velocity (px/s) used for swipe-to-dismiss. */
+    private _velocity;
+    constructor();
+    /**
+     * @private Gets the drawer panel element — the direct parent of the handle.
+     */
+    private _getPanelElement;
+    /**
+     * @private Applies snap logic (or dismiss) after pointer is released.
+     */
+    private _onPointerUp;
+    /**
+     * @private Sets the `--mlv-drawer-current-size` CSS variable on the panel
+     * element and updates the ARIA value.
+     */
+    private _updatePanelSize;
+    /**
+     * @protected Handles keyboard interaction on the resize handle.
+     *
+     * Arrow Up / Right — increase by 10% of viewport
+     * Arrow Down / Left — decrease by 10% (or dismiss if size would reach zero)
+     * Home — snap to smallest snap point (or dismiss if zero)
+     * End — snap to largest snap point (or full viewport)
+     * Escape — dismiss
+     */
+    protected _onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerResize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MlvDrawerResize, "[mlvDrawerResize]", never, { "position": { "alias": "position"; "required": true; "isSignal": true; }; "snapPoints": { "alias": "snapPoints"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, never, true, never>;
+}

package/drawer/lib/drawer-section/drawer-section.d.ts

@@ -0,0 +1,15 @@
+import type { OnDestroy, OnInit } from '@angular/core';
+import { ElementRef } from '@angular/core';
+import type { MlvDrawerSectionState } from '../drawer-sections.service';
+import * as i0 from "@angular/core";
+export declare class MlvDrawerSection implements MlvDrawerSectionState, OnInit, OnDestroy {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly id: import("@angular/core").InputSignal<string>;
+    readonly elementRef: ElementRef<any>;
+    /** @private Scoped service tracking section registration and scroll-active state. */
+    private readonly _sectionService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerSection, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDrawerSection, "[mlvDrawerSection]", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/drawer/lib/drawer-sections/drawer-sections.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef } from '@angular/core';
+import { MlvDrawerSectionsService } from '../drawer-sections.service';
+import * as i0 from "@angular/core";
+export declare class MlvDrawerSections {
+    /** @protected Service exposing the registered drawer sections and the currently scrolled section. */
+    protected readonly sectionsService: MlvDrawerSectionsService;
+    /** @protected Two-way open state of the section-navigation popup. */
+    protected readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @protected Whether the navigator has anything to navigate between.
+     *
+     * A single registered section produced a "Meta ▾" menu whose only entry was
+     * the section already on screen, so the control is suppressed below two.
+     */
+    protected readonly _hasMultipleSections: import("@angular/core").Signal<boolean>;
+    /** @private Host used to scope body lookup to this drawer instance. */
+    private readonly _host;
+    navigateToSection(section: ElementRef): void;
+    scrollIntoViewWithScrollableContainer(baseElement: Element | null | undefined, destinationElement: Element | null | undefined, topMargin?: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerSections, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MlvDrawerSections, "mlv-drawer-sections", never, {}, {}, never, never, true, never>;
+}

package/drawer/lib/drawer-sections.service.d.ts

@@ -0,0 +1,42 @@
+import type { ElementRef, OnDestroy, Signal } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MlvDrawerSectionState {
+    id: Signal<string>;
+    label: Signal<string>;
+    elementRef: ElementRef;
+}
+export interface MlvDrawerSectionConfig {
+    id: string;
+    label: string;
+    element: ElementRef;
+}
+export interface MlvDrawerSectionIntersection {
+    intersecting: boolean;
+    threshold: number;
+    id: string;
+}
+export declare class MlvDrawerSectionsService implements OnDestroy {
+    readonly sections: import("@angular/core").WritableSignal<Map<string, MlvDrawerSectionState>>;
+    readonly intersectedSections: import("@angular/core").WritableSignal<Record<string, MlvDrawerSectionIntersection>>;
+    readonly currentScrolledSection: Signal<MlvDrawerSectionState | null | undefined>;
+    readonly normalizedSections: Signal<MlvDrawerSectionState[]>;
+    private _observer;
+    constructor();
+    /**
+     * Registers a section so it appears in `normalizedSections` and is observed
+     * for scroll position.
+     *
+     * A **new** `Map` is stored rather than the existing one being mutated:
+     * signals compare with `Object.is`, so returning the same reference from
+     * `update()` is not a change and neither `normalizedSections` nor the
+     * observer effect would ever see the section.
+     */
+    register(section: MlvDrawerSectionState): void;
+    /** Removes a section from tracking. See {@link register} for why the map is copied. */
+    unregister(section: MlvDrawerSectionState): void;
+    destroyObservers(): void;
+    initObservers(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerSectionsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MlvDrawerSectionsService>;
+}

package/drawer/lib/drawer.service.d.ts

@@ -0,0 +1,66 @@
+import type { StaticProvider } from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import type { OverlayConfig, OverlayRef, PositionStrategy } from '@angular/cdk/overlay';
+import type { MlvBaseOverlayConfig } from '@malva-ui/cdk/overlay';
+import { MlvOverlayServiceBase } from '@malva-ui/cdk/overlay';
+import { MlvDrawerRef } from './drawer-ref';
+import * as i0 from "@angular/core";
+export type MlvDrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface MlvDrawerConfig extends MlvBaseOverlayConfig {
+    /** Edge the drawer slides from. Defaults to `'right'`. */
+    position?: MlvDrawerPosition;
+    /** CSS width (left/right) or height (top/bottom) of the panel. */
+    size?: string;
+    /**
+     * CSS max-size ceiling for the panel's sizing axis (width for `left`/`right`,
+     * height for `top`/`bottom`).
+     *
+     * Applied whether or not the drawer is `resizable`, and always additionally
+     * clamped to the viewport so a fixed `size` can never exceed the screen.
+     */
+    maxSize?: string;
+    /** Animation duration in milliseconds. Defaults to `300`. */
+    animationDuration?: number;
+    /**
+     * When true, renders a drag handle on the inward-facing edge.
+     * Enables drag-to-resize and swipe-to-dismiss.
+     */
+    resizable?: boolean;
+    /**
+     * Sorted array of viewport-percentage snap points (0–100).
+     * After drag ends, the panel animates to the nearest snap point.
+     * Only effective when `resizable` is true.
+     */
+    snapPoints?: number[];
+    /**
+     * Initial snap point percentage (0–100) applied when the drawer opens.
+     * Defaults to 100 (full size). Only used when `resizable` is true.
+     */
+    defaultSnap?: number;
+}
+export declare const DRAWER_DATA: InjectionToken<unknown>;
+export declare class MlvDrawerService extends MlvOverlayServiceBase<MlvDrawerConfig, MlvDrawerRef> {
+    /** @protected Panel enter-animation class for drawers. */
+    protected readonly _enterAnimationClass = "mlv-drawer--enter";
+    /** @protected Anchors the drawer to the configured viewport edge. */
+    protected _buildPositionStrategy(config: MlvDrawerConfig): PositionStrategy;
+    /** @protected Drawer backdrop class. */
+    protected _buildOverlayConfig(): OverlayConfig;
+    /** @protected Creates the drawer reference, forwarding position and animation duration. */
+    protected _createRef(overlayRef: OverlayRef, config: MlvDrawerConfig): MlvDrawerRef;
+    /** @protected Provides `MlvDrawerRef` and `DRAWER_DATA` to the opened component. */
+    protected _createProviders(ref: MlvDrawerRef, config: MlvDrawerConfig): StaticProvider[];
+    /** @protected Applies drawer shell classes, hidden-transform var, and panel sizing to the overlay pane. */
+    protected _decoratePanel(panelEl: HTMLElement, config: MlvDrawerConfig): void;
+    /**
+     * @private Combines a configured `maxSize` with the viewport ceiling for the
+     * sizing axis.
+     *
+     * `drawer.scss` cannot help here — Angular injects a component's styles when
+     * that component is first instantiated, and `MlvDrawer` is never constructed
+     * on the service path — so the clamp has to be written onto the pane.
+     */
+    private _resolveMaxSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MlvDrawerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MlvDrawerService>;
+}

package/drawer/lib/generate-routable-drawer-route.d.ts

@@ -0,0 +1,42 @@
+import type { Type } from '@angular/core';
+import type { DefaultExport, Route } from '@angular/router';
+import type { MlvDrawerConfig } from './drawer.service';
+/**
+ * Generates a route configuration that opens a component inside a routed drawer.
+ * When the drawer closes, the router navigates back to the parent route.
+ *
+ * The component receives the shell's `Injector`, so it can inject `ActivatedRoute`
+ * to access route params, resolved data, and query params. It can also inject
+ * `MlvDrawerRef` to close itself programmatically.
+ *
+ * @param component - The component to render inside the drawer. Can be an eager class reference
+ *   or a lazy import function (e.g., `() => import('./my-drawer.component')`).
+ * @param options - Route path, named outlet, and drawer configuration options.
+ * @returns A `Route` object to include in your route configuration.
+ *
+ * @example
+ * ```ts
+ * // Lazy-loaded drawer route
+ * {
+ *   path: 'users',
+ *   component: UsersListPage,
+ *   children: [
+ *     mlvGenerateRoutableDrawerRoute(
+ *       () => import('./user-details.component'),
+ *       { path: ':id', position: 'right', size: '500px' },
+ *     ),
+ *   ],
+ * }
+ *
+ * // With guards and resolvers (spread the returned route)
+ * {
+ *   ...mlvGenerateRoutableDrawerRoute(() => import('./details'), { path: ':id' }),
+ *   canActivate: [authGuard],
+ *   resolve: { user: userResolver },
+ * }
+ * ```
+ */
+export declare function mlvGenerateRoutableDrawerRoute(component: Type<unknown> | (() => Promise<DefaultExport<Type<unknown>> | Type<unknown>>), { path, outlet, ...drawerOptions }?: {
+    path?: string;
+    outlet?: string;
+} & Omit<MlvDrawerConfig, 'data' | 'injector'>): Route;