mn-angular-lib 1.0.140 → 1.0.141

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ApplicationRef, APP_INITIALIZER, Pipe, ChangeDetectionStrategy, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, Renderer2, ChangeDetectorRef, HostListener, ViewChild, ViewContainerRef, forwardRef, afterEveryRender, TemplateRef, ViewChildren, viewChild, EnvironmentInjector, createComponent, isSignal, effect, untracked, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ApplicationRef, APP_INITIALIZER, Pipe, ChangeDetectionStrategy, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, ChangeDetectorRef, viewChild, Renderer2, HostListener, ViewChild, ViewContainerRef, forwardRef, afterEveryRender, TemplateRef, ViewChildren, EnvironmentInjector, createComponent, isSignal, effect, untracked, ViewEncapsulation } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -3491,6 +3491,272 @@ const mnMultiSelectVariants = tv({
     },
 });
 
+/**
+ * A viewport-anchored bottom sheet — the mobile presentation shared by the modal
+ * shell and the multi-select dropdown.
+ *
+ * It owns only the sheet *chrome and gestures*: a bottom-anchored, full-width,
+ * rounded-top surface with an optional dimming backdrop and drag grabber, a
+ * slide-up entrance, swipe/flick-to-dismiss, and a promise-based slide-down exit.
+ * It is deliberately presentational: the body is projected via `<ng-content>`, and
+ * dismissal is reported through {@link dismiss} for the host to act on (run a close
+ * guard, tear down its overlay, …) rather than being handled here.
+ *
+ * Positioning is `position: fixed` against the viewport, so a consumer whose sheet
+ * lives inside a `transform`/`filter` ancestor (which would otherwise become the
+ * containing block) must relocate this host to `document.body` — as the
+ * multi-select does with its portal helper.
+ */
+class MnBottomSheet {
+    /** Tailwind's `sm` breakpoint — at or below this the swipe gesture is armed.
+     *  Kept in step with the same constant in the modal shell and multi-select. */
+    static SHEET_MAX_WIDTH = 639.98;
+    /** Drag distance (px) past which a release dismisses regardless of speed. */
+    static SWIPE_DISMISS_THRESHOLD = 150;
+    /** Downward release speed (px/ms) above which a short drag still dismisses — a "flick". */
+    static FLICK_VELOCITY = 0.5;
+    /** Minimum drag distance (px) a flick must cover, so an incidental fast tap never dismisses. */
+    static FLICK_MIN_DISTANCE = 32;
+    /** Upper bound for the exit wait if no `transitionend` fires (e.g. animation suppressed). */
+    static CLOSE_FALLBACK_MS = 700;
+    /** Whether to render the dimming backdrop behind the sheet (default: true).
+     *  A host that already paints its own backdrop (the modal shell) sets this false. */
+    showBackdrop = true;
+    /** Whether to render the drag grabber handle that arms swipe-to-dismiss (default: true). */
+    showGrabber = true;
+    /** Whether the sheet can be dismissed by the user via swipe/flick or backdrop tap
+     *  (default: true). When false the gestures are inert and the backdrop is non-closing. */
+    dismissible = true;
+    /** Optional `min-height` floor (px) for the container, so filtering its content
+     *  shorter cannot shrink the sheet mid-interaction. Null leaves it content-sized. */
+    minHeightPx = null;
+    /** Cap on the sheet height as a fraction of the viewport, in vh (default: 80). */
+    maxHeightVh = 80;
+    /** Extra class(es) applied to the sheet container, so a host can attach the hooks
+     *  its own CSS depends on (e.g. the modal shell's `modal-container`). */
+    containerClass = '';
+    /** Accessible name for the sheet dialog. */
+    ariaLabel;
+    /** Id of the element that labels this dialog (takes precedence over `ariaLabel`). */
+    ariaLabelledby;
+    /**
+     * When true, the sheet grows to its `maxHeightVh` while the host app marks the soft
+     * keyboard open (a `.mn-keyboard-open` class on a document ancestor), guaranteeing
+     * scroll room to lift a focused field above an overlaying keyboard. Off by default so
+     * a keyboard opened over an unrelated sheet (a multi-select search) does not resize it.
+     */
+    growWithKeyboard = false;
+    /**
+     * Optional async gate consulted before a user-initiated dismissal (swipe/flick/backdrop
+     * tap) is committed. Resolving false aborts the dismissal and springs the sheet back —
+     * used by the modal to run its close guard (e.g. an unsaved-changes prompt). A
+     * programmatic {@link startClosing} bypasses it.
+     */
+    dismissGuard;
+    /**
+     * Emitted once the user has dismissed the sheet — after the slide-down exit has
+     * finished, so the host can remove the sheet from the DOM without cutting the
+     * animation short. The host decides what dismissal means (close, run a guard, …).
+     */
+    dismiss = new EventEmitter();
+    /** Current downward drag offset (px) applied to the sheet while swiping. */
+    sheetDragY = 0;
+    /** True while the user is actively dragging the grabber (disables the snap transition). */
+    isDraggingSheet = false;
+    /** True once a dismissal has committed — the sheet glides off-screen via its transition. */
+    isDismissing = false;
+    cdr = inject(ChangeDetectorRef);
+    el = inject(ElementRef);
+    /** The sheet container element, used to measure its height and drive the exit. */
+    containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : []));
+    dragStartY = 0;
+    /** The two most recent (y, timestamp) pointer samples, for estimating flick velocity.
+     *  `t` uses the event timestamp (monotonic), so no wall-clock is read. */
+    lastSample = null;
+    prevSample = null;
+    /** In-flight exit animation, so a swipe-dismiss and a follow-up programmatic
+     *  {@link startClosing} share one glide instead of re-triggering it. */
+    exitPromise = null;
+    get hostClasses() {
+        return `mn-bottom-sheet${this.isDismissing ? ' is-dismissing' : ''}`
+            + `${this.growWithKeyboard ? ' grow-with-keyboard' : ''}`;
+    }
+    /** Whether the viewport is currently narrow enough for the sheet to accept a swipe. */
+    get isNarrow() {
+        return typeof window === 'undefined' || window.innerWidth <= MnBottomSheet.SHEET_MAX_WIDTH;
+    }
+    onSheetPointerDown(event) {
+        if (!this.dismissible || !this.isNarrow)
+            return;
+        // Don't hijack drags that begin on an interactive control inside the sheet.
+        if (event.target.closest('button, input, textarea, select, a'))
+            return;
+        this.isDraggingSheet = true;
+        this.dragStartY = event.clientY;
+        // Seed the velocity window so a fast flick that releases on the first move still measures.
+        this.lastSample = { y: event.clientY, t: event.timeStamp };
+        this.prevSample = this.lastSample;
+        event.target.setPointerCapture(event.pointerId);
+    }
+    onSheetPointerMove(event) {
+        if (!this.isDraggingSheet)
+            return;
+        // Only track downward movement.
+        this.sheetDragY = Math.max(0, event.clientY - this.dragStartY);
+        this.prevSample = this.lastSample;
+        this.lastSample = { y: event.clientY, t: event.timeStamp };
+    }
+    onSheetPointerUp() {
+        if (!this.isDraggingSheet)
+            return;
+        this.isDraggingSheet = false;
+        if (this.shouldDismiss()) {
+            void this.attemptDismiss();
+        }
+        else {
+            this.snapBack();
+        }
+        this.lastSample = null;
+        this.prevSample = null;
+    }
+    onBackdropClick() {
+        void this.attemptDismiss();
+    }
+    /**
+     * Plays the slide-down exit and resolves once it has finished. Exposed so a host that
+     * dismisses the sheet programmatically (not via a gesture) can await the same exit
+     * before tearing the sheet down. Idempotent: a swipe-dismiss already in flight and a
+     * subsequent programmatic close share the one glide rather than restarting it.
+     */
+    startClosing() {
+        return this.playExit();
+    }
+    /**
+     * Runs the optional {@link dismissGuard}, then either commits the dismissal (glide out
+     * + emit) or springs the sheet back if the guard rejects. A non-dismissible sheet never
+     * gets here from a gesture, but the guard is still short-circuited defensively.
+     */
+    async attemptDismiss() {
+        if (!this.dismissible)
+            return;
+        if (this.dismissGuard) {
+            const allowed = await this.dismissGuard();
+            if (!allowed) {
+                this.snapBack();
+                this.cdr.detectChanges();
+                return;
+            }
+        }
+        this.commitDismiss();
+    }
+    /** Whether the release should dismiss: a long-enough drag OR a fast downward flick. */
+    shouldDismiss() {
+        if (this.sheetDragY > MnBottomSheet.SWIPE_DISMISS_THRESHOLD) {
+            return true;
+        }
+        return this.releaseVelocity() > MnBottomSheet.FLICK_VELOCITY
+            && this.sheetDragY > MnBottomSheet.FLICK_MIN_DISTANCE;
+    }
+    /** Downward release speed (px/ms) from the last two pointer samples; 0 when unusable. */
+    releaseVelocity() {
+        if (!this.lastSample || !this.prevSample)
+            return 0;
+        const dt = this.lastSample.t - this.prevSample.t;
+        if (dt <= 0)
+            return 0;
+        return (this.lastSample.y - this.prevSample.y) / dt;
+    }
+    /** Springs the sheet back to its resting position after a drag that didn't dismiss. */
+    snapBack() {
+        this.sheetDragY = 0;
+    }
+    /**
+     * Commits a dismissal: glides the sheet the rest of the way off-screen, then emits
+     * {@link dismiss} once the exit animation settles. Continuing the gesture (rather than
+     * snapping back to 0 first) keeps a swipe feeling like one unbroken motion.
+     */
+    commitDismiss() {
+        void this.playExit().then(() => this.dismiss.emit());
+    }
+    /** Commits the exit animation exactly once and returns the shared in-flight promise.
+     *  Short-circuits under reduced motion and falls back to a timeout if no event fires. */
+    playExit() {
+        if (this.exitPromise)
+            return this.exitPromise;
+        this.isDismissing = true;
+        this.sheetDragY = window.innerHeight;
+        this.cdr.detectChanges();
+        this.exitPromise = this.awaitExit();
+        return this.exitPromise;
+    }
+    /** Waits for the container's exit transition to end, with a reduced-motion short-circuit
+     *  and a fallback timeout so it always resolves. */
+    awaitExit() {
+        return new Promise(resolve => {
+            if (this.prefersReducedMotion()) {
+                resolve();
+                return;
+            }
+            const container = this.containerRef()?.nativeElement
+                ?? this.el.nativeElement.querySelector('.mn-sheet-container');
+            if (!container) {
+                resolve();
+                return;
+            }
+            let settled = false;
+            const done = (event) => {
+                // Ignore end events bubbling up from descendant transitions.
+                if (event && event.target !== container)
+                    return;
+                if (settled)
+                    return;
+                settled = true;
+                container.removeEventListener('transitionend', done);
+                clearTimeout(fallback);
+                resolve();
+            };
+            container.addEventListener('transitionend', done);
+            const fallback = setTimeout(done, MnBottomSheet.CLOSE_FALLBACK_MS);
+        });
+    }
+    prefersReducedMotion() {
+        return typeof window !== 'undefined'
+            && typeof window.matchMedia === 'function'
+            && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnBottomSheet, isStandalone: true, selector: "mn-bottom-sheet", inputs: { showBackdrop: "showBackdrop", showGrabber: "showGrabber", dismissible: "dismissible", minHeightPx: "minHeightPx", maxHeightVh: "maxHeightVh", containerClass: "containerClass", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", growWithKeyboard: "growWithKeyboard", dismissGuard: "dismissGuard" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnBottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-bottom-sheet', standalone: true, imports: [NgClass], template: "@if (showBackdrop) {\n  <!-- Dims the page behind the sheet. Tapping it dismisses when the sheet is dismissible. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div (click)=\"onBackdropClick()\" class=\"mn-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n}\n\n<div\n  #container\n  [attr.aria-label]=\"ariaLabelledby ? null : (ariaLabel || null)\"\n  [attr.aria-labelledby]=\"ariaLabelledby || null\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerClass\"\n  [style.--mn-sheet-max]=\"maxHeightVh + 'vh'\"\n  [style.max-height.vh]=\"maxHeightVh\"\n  [style.min-height.px]=\"minHeightPx\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  aria-modal=\"true\"\n  class=\"mn-sheet-container fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n>\n  @if (showGrabber) {\n    <!-- Drag handle for swipe-to-dismiss. The gesture is armed on the whole handle;\n         drags starting on a control inside the projected content are ignored. -->\n    <div\n      (pointercancel)=\"onSheetPointerUp()\"\n      (pointerdown)=\"onSheetPointerDown($event)\"\n      (pointermove)=\"onSheetPointerMove($event)\"\n      (pointerup)=\"onSheetPointerUp()\"\n      class=\"flex justify-center pt-2 pb-1 touch-none cursor-grab shrink-0\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);display:contents}.mn-sheet-container{padding-bottom:env(safe-area-inset-bottom);min-height:0;transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease);animation:mn-sheet-in .35s var(--mn-sheet-ease)}:host(.grow-with-keyboard):host-context(.mn-keyboard-open) .mn-sheet-container{min-height:var(--mn-sheet-max, 92vh)}.mn-sheet-container.sheet-dragging{transition:none}.mn-sheet-backdrop{animation:mn-sheet-backdrop-in .2s ease-out}:host(.is-dismissing) .mn-sheet-container{animation:none}@keyframes mn-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-sheet-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-sheet-container,.mn-sheet-backdrop{animation-duration:.01ms!important;transition-duration:.01ms!important}}\n"] }]
+        }], propDecorators: { showBackdrop: [{
+                type: Input
+            }], showGrabber: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], minHeightPx: [{
+                type: Input
+            }], maxHeightVh: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledby: [{
+                type: Input
+            }], growWithKeyboard: [{
+                type: Input
+            }], dismissGuard: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }], containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 const MN_MULTI_SELECT_CONFIG = new InjectionToken('MN_MULTI_SELECT_CONFIG');
 class MnMultiSelect {
     ngControl = inject(NgControl, { optional: true, self: true });
@@ -3506,10 +3772,11 @@ class MnMultiSelect {
     cdr = inject(ChangeDetectorRef);
     /** Reference to the trigger element for positioning the dropdown */
     triggerRef;
-    /** The panel element currently moved into `document.body`, if any. */
+    /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
+     *  mn-bottom-sheet instead, so it no longer needs a branch here. */
+    panelClasses = 'fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto';
+    /** The anchored popover panel currently moved into `document.body`, if any. */
     movedPanel = null;
-    /** The sheet backdrop element currently moved into `document.body`, if any. */
-    movedBackdrop = null;
     /** Option count at which the search input auto-enables when `searchable` is unset. */
     static DEFAULT_SEARCH_THRESHOLD = 8;
     /** Tailwind's `sm` breakpoint — below this the panel renders as a bottom sheet.
@@ -3542,6 +3809,8 @@ class MnMultiSelect {
      * card) used to leave the portalled panel floating at its stale coordinates.
      */
     scrollCapture = null;
+    /** The bottom-sheet host currently moved into `document.body`, if any. */
+    movedSheet = null;
     /**
      * The dropdown panel element, queried while it is rendered by the `@if` block.
      * The setter relocates the panel to `document.body` so that its `position: fixed`
@@ -3551,22 +3820,7 @@ class MnMultiSelect {
      * broken on iOS). Cleanup is handled when the query clears on close/destroy.
      */
     set dropdownRef(ref) {
-        const el = ref?.nativeElement ?? null;
-        this.movedPanel = this.portal(el, this.movedPanel);
-        if (el && this.isSheet) {
-            this.captureSheetFloor(el);
-        }
-        else if (!el) {
-            this.sheetFloorPx = null;
-        }
-    }
-    /**
-     * The dimming backdrop rendered behind the mobile sheet. Portalled alongside the
-     * panel for the same reason — a `position: fixed` backdrop left inside a transformed
-     * ancestor would cover that ancestor rather than the viewport.
-     */
-    set sheetBackdropRef(ref) {
-        this.movedBackdrop = this.portal(ref?.nativeElement ?? null, this.movedBackdrop);
+        this.movedPanel = this.portal(ref?.nativeElement ?? null, this.movedPanel);
     }
     /** Currently selected values */
     selectedValues = [];
@@ -3585,21 +3839,21 @@ class MnMultiSelect {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
-    ngOnInit() {
-        this.resolveConfig();
-        this.startWatchingViewport();
-        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
-            this.resolveConfig();
-        });
-        this.destroyRef.onDestroy(() => {
-            sub.unsubscribe();
-            this.stopWatchingTrigger();
-            this.stopWatchingViewport();
-            this.unlockBodyScroll();
-            // Guarantee the portalled elements never outlive the component.
-            this.movedPanel = this.portal(null, this.movedPanel);
-            this.movedBackdrop = this.portal(null, this.movedBackdrop);
-        });
+    /**
+     * The bottom-sheet host, read as an `ElementRef` so it can be relocated to
+     * `document.body` — its `position: fixed` children (backdrop + container) must anchor
+     * to the viewport, not to any transformed/filtered ancestor of this component. On open
+     * its container height is captured as the sheet's `min-height` floor.
+     */
+    set sheetRef(ref) {
+        const el = ref?.nativeElement ?? null;
+        this.movedSheet = this.portal(el, this.movedSheet);
+        if (el) {
+            this.captureSheetFloor(el);
+        }
+        else {
+            this.sheetFloorPx = null;
+        }
     }
     /**
      * Tracks the sheet breakpoint through `matchMedia` rather than reading `innerWidth`
@@ -3628,15 +3882,21 @@ class MnMultiSelect {
         this.sheetMedia = null;
         this.sheetMediaListener = null;
     }
-    onDocumentClick(event) {
-        const target = event.target;
-        // The panel lives at the body root once open, so it is not a descendant of the
-        // host element — treat clicks inside the portalled panel as "inside" too.
-        const insideHost = !!target && this.elRef.nativeElement.contains(target);
-        const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
-        if (!insideHost && !insidePanel) {
-            this.close();
-        }
+    ngOnInit() {
+        this.resolveConfig();
+        this.startWatchingViewport();
+        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
+            this.resolveConfig();
+        });
+        this.destroyRef.onDestroy(() => {
+            sub.unsubscribe();
+            this.stopWatchingTrigger();
+            this.stopWatchingViewport();
+            this.unlockBodyScroll();
+            // Guarantee the portalled elements never outlive the component.
+            this.movedPanel = this.portal(null, this.movedPanel);
+            this.movedSheet = this.portal(null, this.movedSheet);
+        });
     }
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-multi-select-${this.props.id}`;
@@ -3693,15 +3953,18 @@ class MnMultiSelect {
         const threshold = this.props.searchThreshold ?? MnMultiSelect.DEFAULT_SEARCH_THRESHOLD;
         return this.props.options.length >= threshold;
     }
-    /** Layout classes for the panel — a bottom-anchored sheet, or the trigger-anchored popover. */
-    get panelClasses() {
-        // The sheet sizes to its content (capped at 80vh), so a short list gets a short
-        // sheet. To stop it collapsing upward as the search filters options away, the height
-        // it opens at is captured once and re-applied as a `min-height` floor (see
-        // `sheetFloorPx`): the `flex-1` list then keeps that frame and just shows fewer rows.
-        return this.isSheet
-            ? 'mn-ms-sheet fixed inset-x-0 bottom-0 z-9999 flex flex-col bg-base-100 border-t border-base-300 rounded-t-2xl shadow-lg max-h-[80vh]'
-            : 'fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto';
+    onDocumentClick(event) {
+        const target = event.target;
+        // The panel lives at the body root once open, so it is not a descendant of the
+        // host element — treat clicks inside the portalled panel as "inside" too.
+        const insideHost = !!target && this.elRef.nativeElement.contains(target);
+        const insidePanel = !!target && !!this.movedPanel && this.movedPanel.contains(target);
+        // In sheet mode the backdrop tap is handled by mn-bottom-sheet's own (dismiss); the
+        // sheet host counts as "inside" here so this listener never double-fires the close.
+        const insideSheet = !!target && !!this.movedSheet && this.movedSheet.contains(target);
+        if (!insideHost && !insidePanel && !insideSheet) {
+            this.close();
+        }
     }
     /**
      * Records the sheet's opened height as its `min-height` floor. Measured on the next
@@ -3709,17 +3972,24 @@ class MnMultiSelect {
      * empty on open) and never forces a reflow mid change-detection. The floor equals the
      * content height at that instant, so applying it triggers no resize — it only stops a
      * later, shorter filtered list from pulling the sheet down.
+     *
+     * `hostEl` is the portalled mn-bottom-sheet host (`display: contents`), so the height
+     * is read from its `.mn-sheet-container` child rather than the host itself.
      */
-    captureSheetFloor(panel) {
+    captureSheetFloor(hostEl) {
+        const measure = () => {
+            const container = hostEl.querySelector('.mn-sheet-container');
+            return container?.offsetHeight ?? hostEl.offsetHeight;
+        };
         if (typeof requestAnimationFrame !== 'function') {
-            this.sheetFloorPx = panel.offsetHeight;
+            this.sheetFloorPx = measure();
             return;
         }
         requestAnimationFrame(() => {
-            // The panel may have closed before the frame ran; don't strand a stale floor.
-            if (!this.isOpen || this.movedPanel !== panel)
+            // The sheet may have closed before the frame ran; don't strand a stale floor.
+            if (!this.isOpen || this.movedSheet !== hostEl)
                 return;
-            this.sheetFloorPx = panel.offsetHeight;
+            this.sheetFloorPx = measure();
             this.cdr.markForCheck();
         });
     }
@@ -3994,11 +4264,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetBackdropRef", first: true, predicate: ["sheetBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- Dims the page behind the sheet. Deliberately has no click handler: the host's\n         `document:click` listener already treats anything outside the panel as a\n         dismissal, so a second handler would only duplicate that path. -->\n    @if (isSheet) {\n      <div #sheetBackdrop class=\"mn-ms-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n    }\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      [ngClass]=\"panelClasses\"\n      [style.top]=\"isSheet ? null : dropdownStyle.top\"\n      [style.left]=\"isSheet ? null : dropdownStyle.left\"\n      [style.width]=\"isSheet ? null : dropdownStyle.width\"\n      [style.min-height.px]=\"isSheet ? sheetFloorPx : null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        <!-- The sheet covers its own trigger, so it needs a header to name the field and\n             an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n        @if (isSheet) {\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-4 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n        }\n        @if (isSearchable) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"border-b border-base-300 shrink-0\"\n            [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <mn-lib-input-field\n              [ngModel]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onSearch($event)\"\n              [props]=\"{\n                id: resolvedId + '-search',\n                type: 'search',\n                placeholder: props.searchPlaceholder || 'Search...',\n                ariaLabel: props.searchPlaceholder || 'Search...',\n                fullWidth: true,\n                size: 'sm'\n              }\"\n            ></mn-lib-input-field>\n          </div>\n        }\n        <!-- In sheet mode the panel is the flex column and this list is the scroller;\n             anchored, the panel itself scrolls and this is a passthrough wrapper. -->\n        <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n          @for (opt of filteredOptions; track opt.value) {\n            <div\n              (keyup.enter)=\"toggleOption(opt)\"\n              (keyup.space)=\"toggleOption(opt)\"\n              [attr.aria-selected]=\"isSelected(opt)\"\n              class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n              [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n              [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n              [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n              (click)=\"toggleOption(opt); $event.stopPropagation()\"\n              role=\"option\"\n              tabindex=\"0\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n                [checked]=\"isSelected(opt)\"\n                [disabled]=\"opt.disabled || isMaxReached(opt)\"\n                tabindex=\"-1\"\n              />\n              <span>{{ opt.label }}</span>\n            </div>\n          }\n          @if (filteredOptions.length === 0) {\n            <div class=\"text-base-content/50\" [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\">\n              {{ uiConfig.noOptionsFound || 'No options found' }}\n            </div>\n          }\n        </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-ms-sheet{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);padding-bottom:env(safe-area-inset-bottom);animation:mn-ms-sheet-in .3s var(--mn-sheet-ease)}.mn-ms-sheet-backdrop{animation:mn-ms-backdrop-in .2s ease-out}@keyframes mn-ms-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-ms-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-ms-sheet,.mn-ms-sheet-backdrop{animation-duration:.01ms!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, FormsModule, MnErrorMessage, MnButton, MnInputField, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- Dims the page behind the sheet. Deliberately has no click handler: the host's\n         `document:click` listener already treats anything outside the panel as a\n         dismissal, so a second handler would only duplicate that path. -->\n    @if (isSheet) {\n      <div #sheetBackdrop class=\"mn-ms-sheet-backdrop fixed inset-0 z-9998 bg-black/40\"></div>\n    }\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n    #dropdown\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      [ngClass]=\"panelClasses\"\n      [style.top]=\"isSheet ? null : dropdownStyle.top\"\n      [style.left]=\"isSheet ? null : dropdownStyle.left\"\n      [style.width]=\"isSheet ? null : dropdownStyle.width\"\n      [style.min-height.px]=\"isSheet ? sheetFloorPx : null\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        <!-- The sheet covers its own trigger, so it needs a header to name the field and\n             an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n        @if (isSheet) {\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-4 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n        }\n        @if (isSearchable) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            class=\"border-b border-base-300 shrink-0\"\n            [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <mn-lib-input-field\n              [ngModel]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onSearch($event)\"\n              [props]=\"{\n                id: resolvedId + '-search',\n                type: 'search',\n                placeholder: props.searchPlaceholder || 'Search...',\n                ariaLabel: props.searchPlaceholder || 'Search...',\n                fullWidth: true,\n                size: 'sm'\n              }\"\n            ></mn-lib-input-field>\n          </div>\n        }\n        <!-- In sheet mode the panel is the flex column and this list is the scroller;\n             anchored, the panel itself scrolls and this is a passthrough wrapper. -->\n        <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n          @for (opt of filteredOptions; track opt.value) {\n            <div\n              (keyup.enter)=\"toggleOption(opt)\"\n              (keyup.space)=\"toggleOption(opt)\"\n              [attr.aria-selected]=\"isSelected(opt)\"\n              class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n              [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n              [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n              [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n              (click)=\"toggleOption(opt); $event.stopPropagation()\"\n              role=\"option\"\n              tabindex=\"0\"\n            >\n              <input\n                type=\"checkbox\"\n                class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n                [checked]=\"isSelected(opt)\"\n                [disabled]=\"opt.disabled || isMaxReached(opt)\"\n                tabindex=\"-1\"\n              />\n              <span>{{ opt.label }}</span>\n            </div>\n          }\n          @if (filteredOptions.length === 0) {\n            <div class=\"text-base-content/50\" [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\">\n              {{ uiConfig.noOptionsFound || 'No options found' }}\n            </div>\n          }\n        </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [".mn-ms-sheet{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);padding-bottom:env(safe-area-inset-bottom);animation:mn-ms-sheet-in .3s var(--mn-sheet-ease)}.mn-ms-sheet-backdrop{animation:mn-ms-backdrop-in .2s ease-out}@keyframes mn-ms-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mn-ms-backdrop-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.mn-ms-sheet,.mn-ms-sheet-backdrop{animation-duration:.01ms!important}}\n"] }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4008,9 +4278,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdown', { static: false }]
-            }], sheetBackdropRef: [{
+            }], sheetRef: [{
                 type: ViewChild,
-                args: ['sheetBackdrop', { static: false }]
+                args: ['sheet', { static: false, read: ElementRef }]
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -8566,9 +8836,6 @@ class MnModalShellComponent {
     }
     el = inject(ElementRef);
     cdr = inject(ChangeDetectorRef);
-    /** Downward release speed (px/ms) above which a short drag still dismisses — a "flick".
-     *  Native sheets dismiss on a quick flick regardless of distance, not just a long drag. */
-    static FLICK_VELOCITY = 0.5;
     config;
     modalRef;
     isClosing = false;
@@ -8583,6 +8850,8 @@ class MnModalShellComponent {
     ModalKind = ModalKind;
     /** The rendered wizard body, when this modal is a wizard — used to read the active step title. */
     wizardBody = viewChild(MnWizardBodyComponent, ...(ngDevMode ? [{ debugName: "wizardBody" }] : []));
+    /** Tailwind's `sm` breakpoint — below this the modal presents as a bottom sheet. */
+    static SHEET_MAX_WIDTH = 639.98;
     /**
      * Title of the wizard's current step, or undefined for non-wizard modals.
      * The template appends it to the modal title on small screens, where the
@@ -8593,19 +8862,42 @@ class MnModalShellComponent {
     focusTrapListener = null;
     pollingTimer = null;
     pollAttempts = 0;
-    ngOnInit() {
-        this.startPollingIfConfigured();
+    /** Upper bound for the close wait if no animation/transition end event fires
+     *  (e.g. an animation was suppressed). Must stay longer than the slowest close
+     *  path so it never preempts. */
+    static CLOSE_FALLBACK_MS = 700;
+    /** Live match of the sheet breakpoint, so the modal switches between the centered dialog
+     *  and the bottom sheet when the viewport crosses it (e.g. an orientation change). */
+    isNarrow = signal(false, ...(ngDevMode ? [{ debugName: "isNarrow" }] : []));
+    /** The bottom sheet presenting this modal on mobile, absent on the desktop dialog path. */
+    bottomSheet = viewChild(MnBottomSheet, ...(ngDevMode ? [{ debugName: "bottomSheet" }] : []));
+    /** Optional native haptic engine. Absent on the web — every call is null-guarded. */
+    haptics = inject(MN_HAPTICS, { optional: true });
+    sheetMedia = null;
+    sheetMediaListener = null;
+    /** Whether this modal is allowed to present as a bottom sheet on small screens (default: true). */
+    get isMobileSheet() {
+        return this.config.mobileBottomSheet !== false;
     }
-    /** Minimum drag distance (px) that must accompany a flick, so an incidental fast tap
-     *  on the grabber never dismisses. Below the distance threshold, only a flick dismisses. */
-    static FLICK_MIN_DISTANCE = 32;
-    ngOnDestroy() {
-        this.removeFocusTrap();
-        this.stopPolling();
-        // Restore focus to previously focused element
-        if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
-            this.previouslyFocusedElement.focus();
-        }
+    /** Whether the modal should currently render as a bottom sheet (mobile) rather than the
+     *  centered dialog (desktop). */
+    get showMobileSheet() {
+        return this.isMobileSheet && this.isNarrow();
+    }
+    get hostClasses() {
+        const size = this.config.sizeWidth || ModalSize.MD;
+        // `closing` is intentionally NOT derived here. startClosing() adds the
+        // `.closing` class imperatively (classList.add) for reliable, zoneless-safe
+        // application. Deriving it here as well flips the host class string after the
+        // view has been checked (NG0100). Angular's class binding only manages the tokens
+        // it emits, so it leaves the imperatively added `.closing` untouched.
+        const animType = typeof this.config.animation === 'string'
+            ? this.config.animation
+            : this.config.animation?.type || 'slide';
+        const animation = ` anim-${animType}`;
+        const stacked = this.isStacked() ? ' is-stacked' : '';
+        const mobileSheet = this.showMobileSheet ? ' mobile-sheet' : '';
+        return `modal-shell modal-${size}${animation}${stacked}${mobileSheet}`;
     }
     setupFocusTrap() {
         this.focusTrapListener = (e) => {
@@ -8649,45 +8941,54 @@ class MnModalShellComponent {
     asCustom(config) {
         return config;
     }
-    static SWIPE_DISMISS_THRESHOLD = 150;
-    /** Optional native haptic engine. Absent on the web — every call is null-guarded. */
-    haptics = inject(MN_HAPTICS, { optional: true });
-    /** The two most recent (y, timestamp) pointer samples, used to estimate the release
-     *  velocity for flick-to-dismiss. `t` uses the event timestamp (monotonic, no Date). */
-    lastSample = null;
-    /** Upper bound for the close wait if no animation/transition end event fires
-     *  (e.g. an animation was suppressed). Must stay longer than the slowest close
-     *  path (mobile sheet slide-down 0.45s, swipe glide 0.3s) so it never preempts. */
-    static CLOSE_FALLBACK_MS = 700;
-    /** Whether this modal renders as a bottom sheet on small screens (default: true). */
-    get isMobileSheet() {
-        return this.config.mobileBottomSheet !== false;
+    /** Whether the modal can be dismissed at all (drives the sheet's swipe/backdrop arming). */
+    get canClose() {
+        return this.config.closeMode !== CloseMode.DISABLED;
+    }
+    ngOnInit() {
+        this.startWatchingViewport();
+        this.startPollingIfConfigured();
+    }
+    ngOnDestroy() {
+        this.removeFocusTrap();
+        this.stopPolling();
+        this.stopWatchingViewport();
+        // Restore focus to previously focused element
+        if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
+            this.previouslyFocusedElement.focus();
+        }
     }
     /**
      * Triggers the closing animation and resolves once it has actually finished.
      *
-     * Deferred via setTimeout to avoid NG0100 when called during a CD cycle.
-     * Rather than guess a fixed duration (the old hardcoded 150ms truncated the
-     * mobile slide-down, which runs 250ms — and the swipe glide, 300ms), we wait
-     * for the container's `animationend`/`transitionend` and tear down then. A
-     * fallback timeout guarantees resolution if no such event fires, and we
-     * short-circuit entirely under reduced motion (the CSS collapses to instant).
+     * Deferred via setTimeout to avoid NG0100 when called during a CD cycle. On mobile the
+     * exit is owned by the bottom sheet, so we delegate to its `startClosing()` (idempotent
+     * with a swipe-dismiss already in flight); on desktop we wait for the dialog container's
+     * `animationend`/`transitionend`. A fallback timeout guarantees resolution if no event
+     * fires, and we short-circuit under reduced motion (the CSS collapses to instant).
      */
     startClosing() {
         return new Promise(resolve => {
-            setTimeout(() => {
+            setTimeout(async () => {
                 this.isClosing = true;
                 // @HostBinding('class') updates are flushed when the host view is checked
                 // (appRef.tick), not by a bare detectChanges() on this dynamically-created
-                // root component. Relying on CD alone means the `.closing` class — and thus
-                // the slide-down animation — never lands in a zoneless app and is timing-
-                // fragile elsewhere. Apply it directly so the close animation is reliable.
+                // root component. Apply the `.closing` class directly so the backdrop fade is
+                // reliable in a zoneless app.
                 this.el.nativeElement.classList.add('closing');
                 this.cdr.detectChanges();
                 if (this.prefersReducedMotion()) {
                     resolve();
                     return;
                 }
+                // Mobile: the bottom sheet drives the slide-down exit.
+                const sheet = this.bottomSheet();
+                if (sheet) {
+                    await sheet.startClosing();
+                    resolve();
+                    return;
+                }
+                // Desktop: wait for the centered dialog container's own close animation.
                 const container = this.el.nativeElement.querySelector('.modal-container');
                 if (!container) {
                     resolve();
@@ -8706,11 +9007,8 @@ class MnModalShellComponent {
                     clearTimeout(fallback);
                     resolve();
                 };
-                // Normal close ends via a keyframe (animationend); the swipe-dismiss
-                // glide ends via the transform transition (transitionend).
                 container.addEventListener('animationend', done);
                 container.addEventListener('transitionend', done);
-                // `done` only runs asynchronously, after this assignment completes.
                 const fallback = setTimeout(done, MnModalShellComponent.CLOSE_FALLBACK_MS);
             });
         });
@@ -8738,123 +9036,54 @@ class MnModalShellComponent {
     onCloseButtonClick() {
         this.handleClose(ModalCloseReason.DISMISSED);
     }
-    /** True once a swipe has crossed the dismiss threshold — slides the sheet off-screen
-     *  via the transform transition instead of replaying the slide-up keyframe. */
-    swipeDismissing = false;
-    // =========================
-    // Mobile bottom-sheet swipe-to-dismiss (via the grabber handle)
-    // =========================
-    /** Current downward drag offset (px) applied to the sheet while swiping. */
-    sheetDragY = 0;
-    /** True while the user is actively dragging the grabber (disables snap transition). */
-    isDraggingSheet = false;
-    prevSample = null;
-    get hostClasses() {
-        const size = this.config.sizeWidth || ModalSize.MD;
-        // `closing` is intentionally NOT derived here. startClosing() adds the
-        // `.closing` class imperatively (classList.add) for reliable, zoneless-safe
-        // application. Deriving it from `isClosing` in this getter as well makes the
-        // host class string flip value after the view has been checked, which throws
-        // NG0100 (ExpressionChangedAfterItHasBeenCheckedError) in dev. Angular's class
-        // binding only manages the tokens it emits, so it leaves the imperatively
-        // added `.closing` untouched.
-        const animType = typeof this.config.animation === 'string'
-            ? this.config.animation
-            : this.config.animation?.type || 'slide';
-        const animation = ` anim-${animType}`;
-        const stacked = this.isStacked() ? ' is-stacked' : '';
-        const mobileSheet = this.isMobileSheet ? ' mobile-sheet' : '';
-        const swiping = this.swipeDismissing ? ' swipe-dismissing' : '';
-        return `modal-shell modal-${size}${animation}${stacked}${mobileSheet}${swiping}`;
-    }
-    dragStartY = 0;
-    /** Whether the sheet can be dismissed at all (drives whether the swipe is armed). */
-    get canClose() {
-        return this.config.closeMode !== CloseMode.DISABLED;
+    /**
+     * Guard consulted by the bottom sheet before it commits a swipe/flick/backdrop dismissal.
+     * Mirrors the DISABLED/GUARDED rules of {@link handleClose} so a swipe cannot escape a
+     * modal that a button close could not. Bound as a field so the template passes it directly.
+     */
+    sheetDismissGuard = async () => {
+        if (this.config.closeMode === CloseMode.DISABLED) {
+            return false;
+        }
+        if (this.config.closeMode === CloseMode.GUARDED && this.config.closeGuard) {
+            return await this.config.closeGuard();
+        }
+        return true;
+    };
+    /**
+     * Handles the sheet's `(dismiss)` — emitted only after its guard passed and its exit
+     * animation finished. Dismisses the modal (no re-guard) with a confirming haptic.
+     */
+    onSheetDismiss() {
+        this.haptics?.impact('medium');
+        this.modalRef.dismiss(ModalCloseReason.DISMISSED);
     }
-    /** Tailwind's `sm` breakpoint — below this the modal renders as a bottom sheet. */
-    static SHEET_MAX_WIDTH = 639.98;
     ngAfterViewInit() {
         this.previouslyFocusedElement = document.activeElement;
         this.setupFocusTrap();
-        // Focus the modal container
+        // Focus the modal container (the centered dialog, or the sheet's container on mobile).
         const container = this.el.nativeElement.querySelector('.modal-container');
         if (container) {
             container.focus();
         }
     }
-    onSheetPointerDown(event) {
-        if (!this.isMobileSheet || !this.canClose)
-            return;
-        // Only a bottom sheet (mobile-width viewport) can be swiped away.
-        if (window.innerWidth > MnModalShellComponent.SHEET_MAX_WIDTH)
-            return;
-        // Don't hijack drags that begin on an interactive control (e.g. the close button).
-        if (event.target.closest('button'))
-            return;
-        this.isDraggingSheet = true;
-        this.dragStartY = event.clientY;
-        // Seed the velocity samples so a fast flick that releases on the first move still
-        // has a baseline to measure against.
-        this.lastSample = { y: event.clientY, t: event.timeStamp };
-        this.prevSample = this.lastSample;
-        event.target.setPointerCapture(event.pointerId);
-    }
-    onSheetPointerMove(event) {
-        if (!this.isDraggingSheet)
-            return;
-        // Only track downward movement.
-        this.sheetDragY = Math.max(0, event.clientY - this.dragStartY);
-        // Roll the sample window forward so pointer-up can read the latest instantaneous speed.
-        this.prevSample = this.lastSample;
-        this.lastSample = { y: event.clientY, t: event.timeStamp };
-    }
-    async onSheetPointerUp() {
-        if (!this.isDraggingSheet)
+    /** Tracks the sheet breakpoint through `matchMedia` so the dialog/sheet fork re-renders
+     *  when the viewport crosses it. */
+    startWatchingViewport() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
             return;
-        this.isDraggingSheet = false;
-        if (this.shouldDismissSheet()) {
-            const closed = await this.handleClose(ModalCloseReason.DISMISSED);
-            if (closed) {
-                // A confirmed dismissal gets a slightly firmer tick than the open tap.
-                this.haptics?.impact('medium');
-                // Continue the gesture: glide the sheet the rest of the way down rather than
-                // snapping back to 0 and replaying the slide-up keyframe (which looked un-animated).
-                this.swipeDismissing = true;
-                this.sheetDragY = window.innerHeight;
-                this.cdr.detectChanges();
-            }
-            else {
-                this.snapBack(); // guard rejected — spring back
-            }
-        }
-        else {
-            this.snapBack(); // not far enough / not a flick — spring back
-        }
-        this.lastSample = null;
-        this.prevSample = null;
+        this.sheetMedia = window.matchMedia(`(max-width: ${MnModalShellComponent.SHEET_MAX_WIDTH}px)`);
+        this.isNarrow.set(this.sheetMedia.matches);
+        this.sheetMediaListener = (event) => this.isNarrow.set(event.matches);
+        this.sheetMedia.addEventListener('change', this.sheetMediaListener);
     }
-    /** Whether the release should dismiss: a long-enough drag OR a fast downward flick. */
-    shouldDismissSheet() {
-        if (this.sheetDragY > MnModalShellComponent.SWIPE_DISMISS_THRESHOLD) {
-            return true;
+    /** Tears down the breakpoint listener. Idempotent. */
+    stopWatchingViewport() {
+        if (this.sheetMedia && this.sheetMediaListener) {
+            this.sheetMedia.removeEventListener('change', this.sheetMediaListener);
         }
-        return this.releaseVelocity() > MnModalShellComponent.FLICK_VELOCITY
-            && this.sheetDragY > MnModalShellComponent.FLICK_MIN_DISTANCE;
-    }
-    /** Downward release speed (px/ms) from the last two pointer samples. Positive means
-     *  moving down. Returns 0 when there is no usable sample window. */
-    releaseVelocity() {
-        if (!this.lastSample || !this.prevSample)
-            return 0;
-        const dt = this.lastSample.t - this.prevSample.t;
-        if (dt <= 0)
-            return 0;
-        return (this.lastSample.y - this.prevSample.y) / dt;
-    }
-    /** Springs the sheet back to its resting position after a drag that didn't dismiss. */
-    snapBack() {
-        this.sheetDragY = 0;
+        this.sheetMedia = null;
+        this.sheetMediaListener = null;
     }
     /** Attempts to dismiss the modal. Resolves true if it was actually dismissed,
      *  false if blocked by a DISABLED close mode or a rejected close guard. */
@@ -8984,7 +9213,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "wizardBody", first: true, predicate: MnWizardBodyComponent, descendants: true, isSignal: true }, { propertyName: "bottomSheet", first: true, predicate: MnBottomSheet, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions", "showIcons"], outputs: ["actionClick"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -8996,18 +9225,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnCustomBodyHostComponent,
                         MnFooterActionsComponent,
                         MnButton,
+                        MnBottomSheet,
                         LucideX,
-                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!--\n  The container deliberately does NOT stop click propagation. The backdrop is a\n  *sibling* element (absolutely positioned behind this one), never an ancestor, so\n  clicks in here can't reach `onBackdropClick()` anyway. Swallowing them instead\n  broke every \"click outside me\" handler inside a modal \u2014 component-level\n  `document:click` listeners (the multi-select panel, the table filter popover)\n  never fired, so those overlays stayed open.\n-->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [class.sheet-dragging]=\"isDraggingSheet\"\n  [ngClass]=\"containerSizeClass\"\n  [style.height]=\"containerHeightStyle\"\n  [style.transform]=\"sheetDragY ? 'translateY(' + sheetDragY + 'px)' : null\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n>\n  @if (isMobileSheet) {\n    <!-- Drag handle for swipe-to-dismiss, visible only on mobile bottom sheets -->\n    <div\n    (pointercancel)=\"onSheetPointerUp()\"\n    (pointerdown)=\"onSheetPointerDown($event)\"\n    (pointermove)=\"onSheetPointerMove($event)\"\n    (pointerup)=\"onSheetPointerUp()\"\n      class=\"sm:hidden flex justify-center pt-2 pb-1 touch-none cursor-grab\"\n    >\n      <div class=\"h-1.5 w-10 rounded-full bg-base-300\"></div>\n    </div>\n  }\n\n  <!-- On mobile the whole header doubles as a swipe-to-dismiss surface (drags that\n       start on the close button are ignored). The grabber above is the visual cue. -->\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       (pointercancel)=\"onSheetPointerUp()\"\n       (pointerdown)=\"onSheetPointerDown($event)\"\n       (pointermove)=\"onSheetPointerMove($event)\"\n       (pointerup)=\"onSheetPointerUp()\"\n       [class.cursor-grab]=\"isMobileSheet\"\n       [class.sm:cursor-auto]=\"isMobileSheet\"\n       [class.sm:touch-auto]=\"isMobileSheet\"\n       [class.touch-none]=\"isMobileSheet\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"isMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-sheet-ease: cubic-bezier(.32, .72, 0, 1);position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}.modal-container{transition:transform .35s var(--mn-sheet-ease),min-height .25s var(--mn-sheet-ease)}.modal-container.sheet-dragging{transition:none}:host(.swipe-dismissing) .modal-container,:host(.swipe-dismissing).closing .modal-container{animation:none!important;transition:transform .3s var(--mn-sheet-ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(max-width:639.98px){:host(.mobile-sheet){align-items:flex-end}:host(.mobile-sheet) .modal-container{width:100%;max-width:100%;min-height:0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);border-radius:1rem 1rem 0 0;animation:slideUpIn .45s var(--mn-sheet-ease)}:host-context(.mn-keyboard-open).mobile-sheet .modal-container{min-height:92vh}:host(.mobile-sheet).anim-slide .modal-container,:host(.mobile-sheet).anim-fade .modal-container,:host(.mobile-sheet).anim-zoom .modal-container{animation:slideUpIn .45s var(--mn-sheet-ease)}:host(.mobile-sheet).closing .modal-container,:host(.mobile-sheet).closing.anim-slide .modal-container,:host(.mobile-sheet).closing.anim-fade .modal-container,:host(.mobile-sheet).closing.anim-zoom .modal-container{animation:none!important;transform:translateY(100%);opacity:0;transition:transform .45s var(--mn-sheet-ease),opacity .45s var(--mn-sheet-ease)}}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n@if (showMobileSheet) {\n  <!-- Mobile: the shared bottom sheet owns the anchoring, grabber, swipe/flick-to-dismiss\n       and slide animation. The shell keeps its own backdrop (so the sheet renders none),\n       and its close animation delegates to the sheet's startClosing(). `modal-container`\n       is kept as a class hook so the host app's keyboard-lift CSS still matches. -->\n  <mn-bottom-sheet\n    (dismiss)=\"onSheetDismiss()\"\n    [ariaLabelledby]=\"config.title ? 'mn-modal-title' : undefined\"\n    [containerClass]=\"'modal-container'\"\n    [dismissGuard]=\"sheetDismissGuard\"\n    [dismissible]=\"canClose\"\n    [growWithKeyboard]=\"true\"\n    [maxHeightVh]=\"92\"\n    [showBackdrop]=\"false\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <!--\n    Desktop centered dialog. The container deliberately does NOT stop click propagation.\n    The backdrop is a *sibling* element (absolutely positioned behind this one), never an\n    ancestor, so clicks in here can't reach `onBackdropClick()` anyway. Swallowing them\n    instead broke every \"click outside me\" handler inside a modal.\n  -->\n  <div\n    [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n    [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n    [ngClass]=\"containerSizeClass\"\n    [style.height]=\"containerHeightStyle\"\n    aria-modal=\"true\"\n    class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <ng-container [ngTemplateOutlet]=\"modalBody\"></ng-container>\n  </div>\n}\n\n<ng-template #modalBody>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <!-- On small screens the wizard's step labels (under the progress circles) are hidden,\n             so surface the active step name here as \"Title - Step\" instead. -->\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\"\n            id=\"mn-modal-title\">{{ config.title }}@if (config.kind === ModalKind.WIZARD && wizardStepTitle()) {\n          <span class=\"sm:hidden font-normal text-base-content/60\"> - {{ wizardStepTitle() }}</span>\n        }</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <div [class]=\"showMobileSheet ? 'hidden sm:flex' : ''\">\n        <button\n          mnButton\n          [data]=\"{ size: 'sm', variant: 'text', color: 'gray', hover: true, borderRadius: 'md' }\"\n          type=\"button\"\n          class=\"w-8 h-8\"\n          (click)=\"onCloseButtonClick()\"\n          [attr.aria-label]=\"closeModalLabel\"\n        >\n          <svg lucideX [size]=\"18\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  @if (config.kind === ModalKind.WIZARD) {\n    <!-- Wizard manages its own internal scrolling so the steps header and footer\n         stay fixed while only the step body scrolls. No padding/scroll here. -->\n    <div class=\"flex-auto min-h-0 overflow-hidden flex flex-col\">\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"flex-auto min-h-0 flex flex-col\"\n      ></mn-wizard-body>\n    </div>\n  } @else {\n    <div class=\"flex-1 overflow-y-auto px-6 pt-6\">\n      @if (config.kind === ModalKind.FORM) {\n        <mn-form-body\n          [config]=\"asForm(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block h-full\"\n        ></mn-form-body>\n      }\n\n      @if (config.kind === ModalKind.CONFIRMATION) {\n        <mn-confirmation-body\n          [config]=\"asConfirmation(config)\"\n          [modalRef]=\"$any(modalRef)\"\n        ></mn-confirmation-body>\n      }\n\n      @if (config.kind === ModalKind.CUSTOM) {\n        <mn-custom-body-host\n          [config]=\"asCustom(config)\"\n          [modalRef]=\"$any(modalRef)\"\n          class=\"block pb-6\"\n        ></mn-custom-body-host>\n      }\n    </div>\n  }\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        [showIcons]=\"config.showActionIcons !== false\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</ng-template>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.mobile-sheet){align-items:flex-end}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.anim-slide) .modal-container{animation:slideIn .2s ease-in-out}:host(.anim-fade) .modal-container{animation:fadeIn .2s ease-in-out}:host(.anim-zoom) .modal-container{animation:zoomIn .2s ease-in-out}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}@media(prefers-reduced-motion:reduce){:host,:host .modal-backdrop,:host .modal-container{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
-            }], wizardBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MnWizardBodyComponent), { isSignal: true }] }], onEscapeKey: [{
-                type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
-            }], hostClasses: [{
+            }], wizardBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MnWizardBodyComponent), { isSignal: true }] }], bottomSheet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MnBottomSheet), { isSignal: true }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 class MnModalService {
@@ -11839,5 +12069,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map