forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-drawer.mjs

@@ -0,0 +1,1641 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, ErrorHandler, signal, computed, effect, DestroyRef, input, booleanAttribute, model, output, afterNextRender, Directive, ChangeDetectionStrategy, Component, createComponent, Injectable } from '@angular/core';
+import { createDefaults, injectPrefersReducedMotion, isScrollableAtEdge, resolveSnapTarget, attachSwipeDismiss, ForDrawerScaleCoordinator, ForDrawerStack, injectModalShell, reflectDisabled, injectPortal, registerA11yName, registerA11yDescription, OverlayRef, OverlayContextInjector, OverlayManagerCore, resolveConfigClass } from 'forty-cdk/core';
+import { NgComponentOutlet } from '@angular/common';
+
+const FOR_DRAWER_CONTEXT = new InjectionToken('FOR_DRAWER_CONTEXT');
+/**
+ * @internal Per-instance drawer id, provided by `ForDrawerManager` into the
+ * opened component's injector so the portaled `[forDrawerBackdrop]` can
+ * reflect `data-for-drawer-id` and be paired with its drawer for the
+ * manager's exit-animation orchestration. Absent in the declarative path,
+ * where the backdrop's own `animate.leave` runs normally.
+ */
+const FOR_DRAWER_INSTANCE_ID = new InjectionToken('FOR_DRAWER_INSTANCE_ID');
+function injectDrawerContext(piece) {
+    const ctx = inject(FOR_DRAWER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/drawer] ${piece} must be used inside a [forDrawer] element.`);
+    }
+    return ctx;
+}
+
+const FALLBACK = {
+    side: 'bottom',
+    modal: true,
+    dismissible: true,
+    swipeToDismiss: true,
+    closeThreshold: 0.25,
+    initialFocus: 'first',
+    returnFocus: true,
+    handleOnly: false,
+    scaleBackground: false,
+    setBackgroundColorOnScale: true,
+    scaleAmount: 0.95,
+    scaleTranslateYpx: 14,
+    scaleBorderRadiusPx: 8,
+    scaleBackgroundColor: 'black',
+    nestedScaleAmount: 0.93,
+    nestedTranslateYpx: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_DRAWER_DEFAULTS', FALLBACK);
+/** Token holding the resolved drawer defaults for the current scope. */
+const FOR_DRAWER_DEFAULTS = token;
+/**
+ * Configures forty-cdk drawer defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForDrawerDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+const SNAP_POINT_PERCENT_RE = /^(-?\d+(?:\.\d+)?)%$/;
+const SNAP_POINT_PX_RE = /^(-?\d+(?:\.\d+)?)px$/;
+function classifySnapPoint(p) {
+    // Numbers and `NN%` strings both resolve as fractions of the dimension —
+    // their cross-comparison is dimension-independent. `NNpx` strings only
+    // become comparable once we know the dimension.
+    if (typeof p === 'number') {
+        return 'fraction';
+    }
+    return SNAP_POINT_PX_RE.test(p) ? 'px' : 'fraction';
+}
+/**
+ * Convert a snap point to its fractional position along the dismissal axis.
+ * Returns `[0, 1]` (or beyond, for fractional values > 1, allowed
+ * as overshoot). Throws on malformed strings or values that aren't finite.
+ */
+function snapPointToFraction(p, dimension) {
+    if (typeof p === 'number') {
+        if (!Number.isFinite(p)) {
+            throw new Error(`[forty-cdk/drawer] Snap point must be a finite number, got ${p}.`);
+        }
+        return p;
+    }
+    const pctMatch = SNAP_POINT_PERCENT_RE.exec(p);
+    if (pctMatch) {
+        const n = Number.parseFloat(pctMatch[1]);
+        return n / 100;
+    }
+    const pxMatch = SNAP_POINT_PX_RE.exec(p);
+    if (pxMatch) {
+        const n = Number.parseFloat(pxMatch[1]);
+        return dimension === 0 ? 0 : n / dimension;
+    }
+    throw new Error(`[forty-cdk/drawer] Snap point must be a number, "NN%", or "NNpx" string. Got: ${String(p)}.`);
+}
+/**
+ * Mount-time **shape** check. Validates each snap point in isolation
+ * (rejects `NaN`, malformed strings, non-numbers) and only enforces strict
+ * monotonicity when every point shares the same unit family — pure
+ * numbers/percent strings are dimension-independent and can be compared
+ * directly, as can pure-px arrays. Mixed `'NNpx'` + fraction inputs are
+ * deferred to {@link validateSnapPositions}, which runs once the live
+ * dimension is known.
+ *
+ * Throws an `Error` with a `[forty-cdk/drawer]` prefix on the first failure.
+ */
+function validateSnapPointsShape(snapPoints) {
+    // Sanity-check every entry; `snapPointToFraction` throws on NaN /
+    // malformed strings. Use `1` as a placeholder dimension — the px branch
+    // would otherwise return `0` which is a valid fraction. Discard the
+    // result; we only care about the throw.
+    for (const p of snapPoints) {
+        snapPointToFraction(p, 1);
+    }
+    // Monotonicity is dimension-independent only when every entry classifies
+    // the same way. Pure-fraction (numbers + percent strings) sorts directly;
+    // pure-px sorts by raw px value. A mixed array (e.g. `['200px', 0.5]`)
+    // cannot be checked here because the cross-comparison depends on the
+    // actual surface size — that runs in `validateSnapPositions` on first
+    // measurement.
+    const kind = classifySnapPoint(snapPoints[0]);
+    const homogeneous = snapPoints.every((p) => classifySnapPoint(p) === kind);
+    if (!homogeneous) {
+        return;
+    }
+    const positions = snapPoints.map((p) => {
+        if (kind === 'fraction') {
+            return snapPointToFraction(p, 1);
+        }
+        return Number.parseFloat(SNAP_POINT_PX_RE.exec(p)[1]);
+    });
+    for (let i = 1; i < positions.length; i++) {
+        if (positions[i] <= positions[i - 1]) {
+            throw new Error('[forty-cdk/drawer] snapPoints must be strictly increasing (closest-to-edge first).');
+        }
+    }
+}
+/**
+ * Returns the position of each snap point along the dismissal axis (in CSS
+ * pixels measured from the anchored edge). **Does not validate** — pair with
+ * {@link validateSnapPositions} when you need the strict-increase guarantee
+ * against a live dimension.
+ */
+function computeSnapPositions(snapPoints, dimension) {
+    return snapPoints.map((p) => snapPointToFraction(p, dimension) * dimension);
+}
+/**
+ * First-measurement **monotonicity** check. Compares the resolved px
+ * positions against the live drawer dimension. Mixed `'NNpx'` + fraction
+ * inputs that look monotonic at one dimension and non-monotonic at another
+ * fail here — the error message names the offending point so the consumer
+ * doesn't have to manually back-out the conversion.
+ */
+function validateSnapPositions(snapPoints, positions, dimension) {
+    for (let i = 1; i < positions.length; i++) {
+        const cur = positions[i];
+        const prev = positions[i - 1];
+        if (cur <= prev) {
+            const curConfig = JSON.stringify(snapPoints[i]);
+            const prevConfig = JSON.stringify(snapPoints[i - 1]);
+            throw new Error(`[forty-cdk/drawer] snap point ${curConfig} at index ${i} resolves to ${cur}px which is <= snap point ${prevConfig} at ${prev}px (drawer dimension ${dimension}px).`);
+        }
+    }
+}
+
+function sideToDirections(side) {
+    switch (side) {
+        case 'bottom':
+            return ['down'];
+        case 'top':
+            return ['up'];
+        case 'right':
+            return ['right'];
+        case 'left':
+            return ['left'];
+    }
+}
+/** Axis on which the drawer's dimension lives. */
+function sideAxis(side) {
+    return side === 'left' || side === 'right' ? 'x' : 'y';
+}
+/** Sign of a positive (toward-edge) drag offset along the host's axis. */
+function sideSign(side) {
+    return side === 'bottom' || side === 'right' ? 1 : -1;
+}
+/**
+ * Allowed swipe directions for the drag gesture. Without snap points the
+ * drawer only drags *toward* its anchored edge (dismiss). With snap points
+ * the surface must also grow on a drag *away* from the edge to reach a
+ * larger snap, so both directions along the dismissal axis arm the gesture.
+ */
+function dragDirections(side, hasSnapPoints) {
+    if (!hasSnapPoints) {
+        return sideToDirections(side);
+    }
+    return sideAxis(side) === 'y' ? ['down', 'up'] : ['right', 'left'];
+}
+/**
+ * Pointer / swipe / snap gesture engine for `[forDrawer]`, extracted from the
+ * directive so the velocity tracking, per-gesture offset bounds,
+ * dimension-keyed snap-position cache, and runtime monotonicity re-validation
+ * live in one unit-testable collaborator. The directive keeps its inputs /
+ * outputs, label / description registration, drawer-stack + scale-coordinator
+ * registration, and `injectModalShell`.
+ *
+ * Must be called from an injection context (the directive constructor). It
+ * registers the drag-translate publisher, the runtime snap-rebind validator,
+ * and the swipe-gate effect immediately, but defers the two ordering-sensitive
+ * steps to handle methods the directive drives from its own `afterNextRender`s:
+ * {@link DrawerDragHandle.validateOnMount} (mount-time snap validation, called
+ * after the drawer-stack push so it lands at the original point in the mount
+ * sequence) and {@link DrawerDragHandle.arm} (wires the pointer listeners onto
+ * a host already portaled to `document.body` by the shell).
+ *
+ * Forwards the host's `ElementRef` and the injected `ErrorHandler` — the
+ * caller never has to touch them. Pointer listeners are detached on destroy
+ * via the engine's own `DestroyRef.onDestroy` hook.
+ */
+function injectDrawerDrag(config) {
+    const host = inject(ElementRef);
+    const errorHandler = inject(ErrorHandler);
+    const prefersReducedMotion = injectPrefersReducedMotion();
+    const side = config.side;
+    const snapPoints = config.snapPoints;
+    const closeThreshold = config.closeThreshold;
+    const fadeFromIndex = config.fadeFromIndex;
+    const activeSnapPoint = config.activeSnapPoint;
+    const dragOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ [])); // px translated along the dismissal axis (positive = away from edge)
+    const dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    const dragProgress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragProgress" }] : /* istanbul ignore next */ [])); // [0, 1] progress toward the anchored edge (dismiss direction)
+    const dragTranslate = computed(() => {
+        const offset = dragOffset();
+        if (offset === 0) {
+            return '0px 0px';
+        }
+        const px = sideSign(side()) * offset;
+        return sideAxis(side()) === 'y' ? `0px ${px}px` : `${px}px 0px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragTranslate" }] : /* istanbul ignore next */ []));
+    // Pointer state for velocity tracking.
+    let pointerStartTime = 0;
+    let pointerLastY = 0;
+    let pointerLastX = 0;
+    let pointerLastTime = 0;
+    let pointerVelocity = 0;
+    let dimensionAtStart = 0;
+    // Per-gesture lower bound for the drag offset (px toward the edge),
+    // resolved on `onSwipeStart`. A positive offset moves the surface toward
+    // the edge (shrink / dismiss) and is never capped — dragging past the edge
+    // is how a dismiss arms. A negative offset moves it away from the edge to
+    // grow. Without snap points the floor stays 0 (the surface can only shrink
+    // toward the edge); with snap points the floor reaches the largest snap so
+    // an upward drag can expand the surface.
+    let dragMinOffset = 0;
+    // Snap positions cache, keyed by BOTH the dimension they were resolved
+    // against AND the `snapPoints` array identity. First-measurement validation
+    // populates this; `onSwipeStart` refreshes it when the surface has resized
+    // between gestures, and a runtime `[snapPoints]` rebind (same dimension, new
+    // array reference) is a cache miss so positions are recomputed and
+    // re-validated. Always pre-validated, so `onSwipeRelease` can read it
+    // without re-running monotonicity checks.
+    let snapPositionsCache = null;
+    // Flipped true once the mount-time `afterNextRender` has validated the
+    // initial snap config. Gates the runtime-rebind effect so its first
+    // (pre-render) run is a no-op and only genuine post-mount changes
+    // re-validate.
+    let snapConfigMounted = false;
+    // Signal flipped true by `arm()` in the directive's post-shell
+    // `afterNextRender`. Gates the swipe gate effect so the gesture arms on a
+    // host already wired by the shell; being a signal, flipping it re-runs the
+    // effect for the first real attach.
+    const swipeReady = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeReady" }] : /* istanbul ignore next */ []));
+    let swipeCleanup = null;
+    /**
+     * Dimension-independent snap-point validation: the per-point shape /
+     * strict-increase check (`validateSnapPointsShape`) plus the
+     * `fadeFromIndex` range check. Throws with a `[forty-cdk/drawer]`-prefixed
+     * message on the first failure. A `null` / empty array is a valid "no snap
+     * points" config and skips both checks. Shared by the mount-time
+     * `afterNextRender` and the runtime-rebind effect so the two paths stay in
+     * lockstep.
+     */
+    function validateSnapPointConfig(points) {
+        if (!points || points.length === 0) {
+            return;
+        }
+        validateSnapPointsShape(points);
+        const idx = fadeFromIndex();
+        if (idx !== undefined && (idx < 0 || idx >= points.length)) {
+            throw new Error(`[forty-cdk/drawer] fadeFromIndex (${idx}) is out of range for snapPoints (length ${points.length}).`);
+        }
+    }
+    /**
+     * Resolve and validate snap positions against the host's current
+     * dimension. No-op if the cached positions already match BOTH the live
+     * dimension and the current `snapPoints` array. Throws (with the
+     * offending-point error message) when the live dimension flips a mixed
+     * `'NNpx'` + fraction array out of monotonic order.
+     *
+     * Called from `afterNextRender` (first measurement), from `onSwipeStart`
+     * (resize between gestures, or a runtime `[snapPoints]` rebind), and from
+     * the runtime-rebind effect. Never from `onSwipeRelease` — by the time
+     * release fires, the cache is already populated for this gesture's
+     * dimension and array.
+     */
+    function refreshSnapPositions(points) {
+        const rect = host.nativeElement.getBoundingClientRect();
+        const dim = sideAxis(side()) === 'y' ? rect.height : rect.width;
+        if (dim <= 0) {
+            // No layout yet (jsdom, or display: none). Defer; the next call with
+            // a real dimension will do the work.
+            return;
+        }
+        const cached = snapPositionsCache;
+        if (cached && cached.dimension === dim && cached.snapPoints === points) {
+            return;
+        }
+        const positions = computeSnapPositions(points, dim);
+        validateSnapPositions(points, positions, dim);
+        snapPositionsCache = { dimension: dim, snapPoints: points, positions };
+    }
+    /**
+     * Pixel position (from the anchored edge) of the currently-active snap
+     * point within `snapPositions`. Falls back to the closest-to-edge entry
+     * when the active point is unset or not found in `snapPoints`.
+     */
+    function activeSnapPositionPx(points, snapPositions) {
+        const active = activeSnapPoint();
+        if (active == null) {
+            return snapPositions[0];
+        }
+        const idx = points.indexOf(active);
+        return idx >= 0 ? snapPositions[idx] : snapPositions[0];
+    }
+    function onSwipeStart(detail) {
+        // Bail out conditions that the swipe-dismiss helper can't know about:
+        // (a) `handleOnly` and the gesture didn't start on the registered handle,
+        // (b) the gesture started inside a scrollable element that hasn't reached
+        //     its edge along the dismissal direction (don't steal scroll).
+        const target = detail.originalEvent.target;
+        const handle = config.handleEl();
+        if (config.handleOnly() && (!handle || !target || !handle.contains(target))) {
+            dragging.set(false);
+            return;
+        }
+        if (target && isScrollableAtEdge(target, detail.direction, host.nativeElement)) {
+            dragging.set(false);
+            return;
+        }
+        dragging.set(true);
+        dragProgress.set(0);
+        pointerStartTime = detail.originalEvent.timeStamp || performance.now();
+        pointerLastTime = pointerStartTime;
+        pointerLastX = detail.originalEvent.clientX;
+        pointerLastY = detail.originalEvent.clientY;
+        pointerVelocity = 0;
+        const rect = host.nativeElement.getBoundingClientRect();
+        dimensionAtStart = sideAxis(side()) === 'y' ? rect.height : rect.width;
+        // Refresh & validate snap positions for this gesture's dimension. If
+        // mount-time first-measurement saw a non-zero dimension equal to the
+        // current one, this is a cache hit and no work runs. Validation throws
+        // here (pre-drag) rather than from the release handler.
+        const points = snapPoints();
+        if (points && points.length > 0) {
+            refreshSnapPositions(points);
+            const cached = snapPositionsCache;
+            const positions = cached && cached.snapPoints === points
+                ? cached.positions
+                : computeSnapPositions(points, dimensionAtStart);
+            const activePos = activeSnapPositionPx(points, positions);
+            const highestPos = positions[positions.length - 1] ?? activePos;
+            dragMinOffset = activePos - highestPos;
+        }
+        else {
+            dragMinOffset = 0;
+        }
+        config.emitDrag({ percentageDragged: 0, originalEvent: detail.originalEvent });
+    }
+    function onSwipeMove(detail) {
+        if (!dragging()) {
+            return;
+        }
+        const event = detail.originalEvent;
+        const now = event.timeStamp || performance.now();
+        const dx = event.clientX - pointerLastX;
+        const dy = event.clientY - pointerLastY;
+        const dt = Math.max(1, now - pointerLastTime);
+        // Magnitude moved toward the anchored edge (positive = move toward edge).
+        const moveTowardEdge = (() => {
+            switch (side()) {
+                case 'bottom':
+                    return dy; // pointer moves down → toward bottom edge → positive
+                case 'top':
+                    return -dy;
+                case 'right':
+                    return dx;
+                case 'left':
+                    return -dx;
+            }
+        })();
+        pointerVelocity = moveTowardEdge / dt; // px per ms toward edge
+        pointerLastX = event.clientX;
+        pointerLastY = event.clientY;
+        pointerLastTime = now;
+        // Integrate the per-event pointer delta into the cumulative drag offset,
+        // clamped to this gesture's bounds. Without snap points the lower bound
+        // is 0 (the surface only moves toward the edge to dismiss); with snap
+        // points it goes negative so a drag away from the edge grows the surface
+        // toward a larger snap. The host's `[style.translate]` binding reflects
+        // the offset reactively — no imperative DOM write here.
+        const nextOffset = Math.max(dragMinOffset, dragOffset() + moveTowardEdge);
+        dragOffset.set(nextOffset);
+        const dim = dimensionAtStart || 1;
+        // `percentageDragged` tracks progress toward dismiss, so growth (a
+        // negative offset) reads as 0 rather than a negative number.
+        const percentageDragged = Math.min(1, Math.max(0, nextOffset / dim));
+        dragProgress.set(percentageDragged);
+        config.emitDrag({ percentageDragged, originalEvent: event });
+    }
+    function onSwipeRelease(detail) {
+        if (!dragging()) {
+            return;
+        }
+        const event = detail.originalEvent;
+        const offset = dragOffset();
+        const dim = dimensionAtStart || 1;
+        const threshold = closeThreshold();
+        const points = snapPoints();
+        let willClose = false;
+        let nextSnap = null;
+        if (points && points.length > 0) {
+            // `position` is the surface position along the dismissal axis from the
+            // anchored edge. With `offset` representing how far the surface has
+            // been pulled toward the edge (positive), the effective position from
+            // the edge is `currentSnapPosition - offset`.
+            //
+            // Read snap positions from the pre-validated cache populated by
+            // `refreshSnapPositions` at mount and on `onSwipeStart`. The release
+            // path is throw-free by construction: any input that would fail
+            // monotonicity at the live dimension has already failed before we get
+            // here.
+            const cached = snapPositionsCache;
+            const snapPositions = cached && cached.dimension === dim && cached.snapPoints === points
+                ? cached.positions
+                : computeSnapPositions(points, dim);
+            const position = activeSnapPositionPx(points, snapPositions) - offset;
+            const resolved = resolveSnapTarget({
+                snapPoints: points,
+                snapPositions,
+                activeSnapPoint: activeSnapPoint(),
+                position,
+                velocity: -pointerVelocity, // helper sema: positive = away from edge
+                closeThreshold: threshold,
+            });
+            willClose = resolved.willClose;
+            nextSnap = resolved.nextSnapPoint;
+        }
+        else {
+            // No snap points: dismiss when dragged past closeThreshold OR fast
+            // flick toward edge.
+            willClose = offset >= dim * threshold || pointerVelocity >= 0.4;
+        }
+        config.emitRelease({ willClose, nextSnapPoint: nextSnap, originalEvent: event });
+        // Zero the offset and flip `dragging` off together. Both writes (plus the
+        // `activeSnapPoint` change below) flush in one change-detection pass, so
+        // the host applies the `data-dragging` removal, the new
+        // `data-active-snap-point`, and the `translate` reset to zero in a single
+        // style recalc — the consumer's `transition: translate` then animates the
+        // drag delta away in lockstep with the snap-position transition, with no
+        // intermediate jump to the previous rest position.
+        dragOffset.set(0);
+        dragProgress.set(0);
+        dragging.set(false);
+        if (willClose) {
+            config.requestClose('swipe');
+            return;
+        }
+        if (nextSnap !== null && nextSnap !== activeSnapPoint()) {
+            activeSnapPoint.set(nextSnap);
+        }
+    }
+    function attachSwipe() {
+        const el = host.nativeElement;
+        return attachSwipeDismiss({
+            element: el,
+            getDirections: () => dragDirections(side(), !!snapPoints()?.length),
+            // Always arm on a tiny gesture and let the move handler decide; we
+            // resolve the actual close threshold on release via resolveSnapTarget.
+            getThreshold: () => 1,
+            onSwipeStart: (detail) => onSwipeStart(detail),
+            onSwipeMove: (detail) => onSwipeMove(detail),
+            onSwipeEnd: (detail) => onSwipeRelease(detail),
+            onSwipeCancel: (detail) => onSwipeRelease(detail),
+        });
+    }
+    // ---- Drag-translate side effect. Publishes the drag delta as the
+    // `--for-drawer-translate` custom property (see `dragTranslate` for why a
+    // custom property rather than a directly-written `translate`/`transform`).
+    // Runs in the same change-detection flush as the host's attribute
+    // bindings, so the release path's `data-dragging` removal,
+    // `data-active-snap-point` change, and translate reset to "0px 0px" all
+    // land in one style recalc and transition together.
+    effect(() => {
+        host.nativeElement.style.setProperty('--for-drawer-translate', dragTranslate());
+    });
+    // ---- Mount-time snap validation. Invoked by the directive's pre-shell
+    // `afterNextRender` (via the returned `validateOnMount`), after the
+    // drawer-stack push and the `closeThreshold` check, so it lands at the same
+    // point in the mount sequence it always has — before the shell's
+    // dismissable / focus / scroll-lock wiring. A consumer passing a bad
+    // snapPoints array gets a clear error before the shell tries to focus an
+    // element that may not exist. The mount-time `activeSnapPoint` default is
+    // seeded here too. Subsequent runtime `[snapPoints]` rebinds are handled by
+    // the effect below, which re-runs the same validation and invalidates the
+    // position cache.
+    function validateOnMount() {
+        const points = snapPoints();
+        if (points && points.length > 0 && activeSnapPoint() === null) {
+            activeSnapPoint.set(points[0]);
+        }
+        validateSnapPointConfig(points);
+        // Try first measurement. In real browsers `getBoundingClientRect`
+        // returns the laid-out dimension here (we're inside `afterNextRender`,
+        // post-layout). In jsdom layout doesn't run, so dimension is 0 — defer
+        // to `onSwipeStart`'s rect read, which is also pre-gesture.
+        if (points && points.length > 0) {
+            refreshSnapPositions(points);
+        }
+        snapConfigMounted = true;
+    }
+    // ---- Runtime `[snapPoints]` / `[fadeFromIndex]` rebind. `validateOnMount`
+    // validates the INITIAL config once; this effect
+    // re-validates whenever the consumer swaps the array (or fadeFromIndex)
+    // at runtime. Without it a new array that is non-monotonic — or a
+    // fadeFromIndex that no longer fits — would slip through, and the
+    // position cache (keyed on array identity) would lazily recompute on the
+    // next gesture against the new array but never re-run the shape /
+    // range checks. Guarded by `snapConfigMounted` so the effect's first
+    // run (which fires before `validateOnMount`) doesn't duplicate the
+    // mount-time validation or race the layout measurement. Validation +
+    // cache invalidation are genuine side effects (route an error / clear a
+    // field), not reactive-state propagation, so an `effect` is the right
+    // tool here. Validation failures are funnelled through the injected
+    // `ErrorHandler` so they reach the consumer's handler exactly like the
+    // mount-time `afterNextRender` throw, instead of tearing down the effect.
+    effect(() => {
+        const points = snapPoints();
+        // Track fadeFromIndex too so a runtime range violation is caught.
+        fadeFromIndex();
+        if (!snapConfigMounted) {
+            return;
+        }
+        // A new array reference invalidates the position cache so the next
+        // gesture (and `refreshSnapPositions`) resolves against fresh geometry
+        // instead of the previous array's cached positions.
+        if (snapPositionsCache && snapPositionsCache.snapPoints !== points) {
+            snapPositionsCache = null;
+        }
+        try {
+            validateSnapPointConfig(points);
+            if (points && points.length > 0) {
+                refreshSnapPositions(points);
+            }
+        }
+        catch (error) {
+            errorHandler.handleError(error);
+        }
+    });
+    // ---- Swipe-to-dismiss gate. Arms the pointer listeners only when
+    // `swipeToDismiss` is on AND the user hasn't asked for reduced motion
+    // (drag animations are vestibular-hostile). Both inputs are read
+    // reactively so a runtime flip of either — a `[swipeToDismiss]` rebind or
+    // a live `prefers-reduced-motion` change — arms or disarms the gesture,
+    // mirroring how `ForDrawerScaleCoordinator` already reacts to the
+    // preference. Attaching/detaching listeners is a DOM side effect, so an
+    // `effect` is the right tool; `swipeReady` gates the pre-render run so the
+    // gesture arms on a host already attached via the shell's portal.
+    effect(() => {
+        const shouldArm = config.swipeToDismiss() && !prefersReducedMotion();
+        if (!swipeReady()) {
+            return;
+        }
+        if (shouldArm && swipeCleanup === null) {
+            swipeCleanup = attachSwipe();
+        }
+        else if (!shouldArm && swipeCleanup !== null) {
+            swipeCleanup();
+            swipeCleanup = null;
+        }
+    });
+    inject(DestroyRef).onDestroy(() => {
+        swipeCleanup?.();
+        swipeCleanup = null;
+    });
+    return {
+        dragging: dragging.asReadonly(),
+        dragProgress: dragProgress.asReadonly(),
+        dragTranslate,
+        validateOnMount,
+        arm: () => swipeReady.set(true),
+    };
+}
+
+/**
+ * Headless implementation of the [WAI-ARIA Modal Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/),
+ * specialised as a side / bottom-sheet drawer with optional swipe-to-dismiss
+ * and snap points.
+ *
+ * Apply `[forDrawer]` on the drawer surface itself — not on a wrapper. The
+ * directive moves the host to `document.body` (portal), traps focus, locks
+ * body scroll, listens for Escape, and (when `swipeToDismiss` is on) attaches
+ * pointer-based swipe handlers that translate the surface and resolve to the
+ * nearest snap point or a dismiss on release. `aria-labelledby` and
+ * `aria-describedby` wire automatically via `[forDrawerTitle]` /
+ * `[forDrawerDescription]`; pass `ariaLabel` instead if you don't render
+ * a visible title.
+ *
+ * Mount/unmount is the consumer's responsibility — the directive does not
+ * manage `[hidden]`. Wrap with `@if (open())` and let `animate.enter` /
+ * `animate.leave` handle transitions.
+ *
+ * For programmatic use (open arbitrary components imperatively, manage
+ * lifecycle externally), see `ForDrawerManager.open()`.
+ */
+class ForDrawer {
+    #defaults = inject(FOR_DRAWER_DEFAULTS);
+    /**
+     * Edge the drawer is anchored to. Default `'bottom'` — the most common
+     * mobile-first pattern. The keyboard navigation axis (for swipe direction)
+     * derives from this, as does the `data-side` attribute on the host.
+     */
+    side = input(this.#defaults.side ?? 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /**
+     * When true (default), Escape, backdrop click, pointer-down outside,
+     * focus outside, and a swipe past the close threshold all emit `(dismiss)`.
+     * Disable for confirm flows that must be answered explicitly.
+     */
+    dismissible = input(this.#defaults.dismissible ?? true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true (default), sets `aria-modal="true"`, locks body scroll, traps
+     * focus, and inerts body siblings. Set to `false` for a non-modal
+     * navigation drawer that coexists with the rest of the page.
+     */
+    modal = input(this.#defaults.modal ?? true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true, role becomes `alertdialog` (interrupts assistive tech). */
+    alert = input(false, { ...(ngDevMode ? { debugName: "alert" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true (default), focus returns to the previously focused element on close. */
+    returnFocus = input(this.#defaults.returnFocus ?? true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Where to send focus on mount. `'first'` (default) finds the first
+     * focusable descendant; `'container'` focuses the drawer surface itself
+     * (useful when there's nothing focusable inside).
+     */
+    initialFocus = input(this.#defaults.initialFocus ?? 'first', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /** Manual `aria-label`. Use this when no visible title element exists. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Portal target for the surface. Defaults to `document.body`. Pass a
+     * positioned (`position: relative`) container — paired with
+     * `[modal]="false"` — for a drawer scoped to a region instead of the
+     * viewport. Read once at mount (the portal moves the host once); changing
+     * it after open has no effect. The backdrop portals to the same container.
+     */
+    container = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback invoked just before focus moves into the drawer on mount.
+     * `event.preventDefault()` skips the imperative move (Tab cycling and
+     * return-focus capture still wire up). See Dialog for the same shape and
+     * the rationale for `input<>` rather than `output<>` on free-floating
+     * overlays.
+     */
+    autoFocusOnOpen = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocusOnOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback invoked just before focus returns to the previously focused
+     * element on unmount. `event.preventDefault()` skips the return-focus.
+     */
+    autoFocusOnClose = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoFocusOnClose" }] : /* istanbul ignore next */ []));
+    /** When true (default), swipe toward the anchored edge dismisses past `closeThreshold`. */
+    swipeToDismiss = input(this.#defaults.swipeToDismiss ?? true, { ...(ngDevMode ? { debugName: "swipeToDismiss" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Fraction past which a release dismisses instead of snapping back.
+     * Default `0.25`. Without `snapPoints` it is a fraction of the
+     * full drawer dimension along the dismissal axis (dragged > 25% of the
+     * surface size toward the edge dismisses); with `snapPoints` it is a
+     * fraction of the **lowest snap's** extent, so a small "peek" snap stays
+     * dismissable without dragging it entirely off-screen.
+     */
+    closeThreshold = input(this.#defaults.closeThreshold ?? 0.25, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeThreshold" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the swipe gesture only arms on a pointerdown that started on
+     * the registered `[forDrawerHandle]` element. Useful when the surface
+     * contains scrollable content that should keep its scroll gesture.
+     */
+    handleOnly = input(this.#defaults.handleOnly ?? false, { ...(ngDevMode ? { debugName: "handleOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, asks the registered `[forDrawerWrapper]` to scale and
+     * translate behind this drawer (the "scale background" effect). No
+     * effect under `prefers-reduced-motion: reduce`, and a no-op if no
+     * wrapper is mounted. Default `false` so existing consumers are
+     * untouched.
+     */
+    scaleBackground = input(this.#defaults.scaleBackground ?? false, { ...(ngDevMode ? { debugName: "scaleBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true (default) and `scaleBackground` is active, paints
+     * `<body>` with `scaleBackgroundColor` so the gap between the scaled
+     * wrapper and the viewport edge does not show through. Only applies
+     * when `scaleBackground` is `true`.
+     */
+    setBackgroundColorOnScale = input(this.#defaults.setBackgroundColorOnScale ?? true, { ...(ngDevMode ? { debugName: "setBackgroundColorOnScale" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Snap points: each entry is a `number ∈ [0, 1]`,
+     * a `'NN%'` string, or a `'NNpx'` string. Strictly increasing
+     * (closest-to-edge first). The surface settles at the nearest snap on
+     * release; dragging past the lowest snap by `closeThreshold` of that
+     * snap's own extent dismisses.
+     */
+    snapPoints = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+    /**
+     * Active snap point. Two-way bindable: write via `[(activeSnapPoint)]`
+     * to drive the surface programmatically, or just read for analytics.
+     * Initialised to `snapPoints?.[0]` on mount when the consumer left it
+     * `null`. The implicit `(activeSnapPointChange)` emitter fires on
+     * internal transitions (mount-time default and drag release), and
+     * stays silent on consumer writes through `[(activeSnapPoint)]`.
+     */
+    activeSnapPoint = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSnapPoint" }] : /* istanbul ignore next */ []));
+    /**
+     * First index of `snapPoints` from which the backdrop should reflect
+     * `data-fade-from-active`. Consumers tie a CSS opacity transition to
+     * that attribute. Out-of-range values throw on mount.
+     */
+    fadeFromIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fadeFromIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the drawer wants to close. Consumer wires this to flip
+     * the signal that gates the surrounding `@if`.
+     */
+    dismiss = output();
+    /** Vetoable Escape. `preventDefault()` suppresses the auto `(dismiss)`. */
+    escapeKeyDown = output();
+    /** Vetoable pointer-down outside. `preventDefault()` suppresses the auto `(dismiss)`. */
+    pointerDownOutside = output();
+    /** Vetoable focus-outside. `preventDefault()` suppresses the auto `(dismiss)`. */
+    focusOutside = output();
+    /**
+     * Composite event: fires alongside `pointerDownOutside` and `focusOutside`
+     * and shares their veto state — `preventDefault()` on either suppresses
+     * the auto `(dismiss)`.
+     */
+    interactOutside = output();
+    /** Drag stream. `percentageDragged` ∈ `[0, 1]`. */
+    dragMove = output();
+    /** Release event. The directive has already updated `activeSnapPoint` / requested close. */
+    release = output();
+    // ---- Internal reactive state ----
+    #labelIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labelIds" }] : /* istanbul ignore next */ []));
+    #describedByIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#describedByIds" }] : /* istanbul ignore next */ []));
+    #handleEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#handleEl" }] : /* istanbul ignore next */ []));
+    #backdropEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#backdropEl" }] : /* istanbul ignore next */ []));
+    // Captures the `value` argument from the most recent `requestClose(reason, value)`
+    // call. Read by `ForDrawerManager` to bridge `[forDrawerClose] [closeWith]`
+    // into `ForDrawerRef.close(value)`. Plain in declarative usage (no consumer
+    // ever reads it), so the API surface is unchanged.
+    #lastCloseValue = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#lastCloseValue" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => {
+        const ids = this.#labelIds();
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = this.#describedByIds();
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    activeSnapPointAttr = computed(() => {
+        const v = this.activeSnapPoint();
+        return v == null ? null : String(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeSnapPointAttr" }] : /* istanbul ignore next */ []));
+    fadeFromActive = computed(() => {
+        const idx = this.fadeFromIndex();
+        const points = this.snapPoints();
+        const active = this.activeSnapPoint();
+        if (idx === undefined || !points || active == null) {
+            return false;
+        }
+        const activeIdx = points.indexOf(active);
+        return activeIdx >= 0 && activeIdx >= idx;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fadeFromActive" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
+    #scaleCoordinator = inject(ForDrawerScaleCoordinator);
+    #drawerStack = inject(ForDrawerStack);
+    #parentDrawer = inject(FOR_DRAWER_CONTEXT, { skipSelf: true, optional: true });
+    // Pointer / swipe / snap gesture engine. Owns the velocity tracking,
+    // per-gesture offset bounds, the dimension-keyed snap-position cache, and
+    // the runtime snap re-validation; the directive host-binds the three signals
+    // it returns (`dragging`, `dragProgress`, `dragTranslate`) and drives its
+    // `validateOnMount()` / `arm()` hooks from its own `afterNextRender`s so the
+    // engine's side effects keep `[forDrawer]`'s original ordering relative to
+    // the modal shell.
+    #drag = injectDrawerDrag({
+        side: this.side,
+        snapPoints: this.snapPoints,
+        closeThreshold: this.closeThreshold,
+        handleOnly: this.handleOnly,
+        swipeToDismiss: this.swipeToDismiss,
+        fadeFromIndex: this.fadeFromIndex,
+        activeSnapPoint: this.activeSnapPoint,
+        handleEl: this.#handleEl.asReadonly(),
+        emitDrag: (event) => this.dragMove.emit(event),
+        emitRelease: (event) => this.release.emit(event),
+        requestClose: (reason) => this.requestClose(reason),
+    });
+    /**
+     * `true` while a pointer drag gesture is in flight. Mirrors the host's
+     * `data-dragging` attribute; surfaced through `ForDrawerContext` so pieces
+     * portaled away from the surface (the backdrop) can suppress their own
+     * transitions during the gesture.
+     */
+    dragging = this.#drag.dragging;
+    /**
+     * Progress of the current drag toward the anchored edge, `∈ [0, 1]`.
+     * Surfaced through `ForDrawerContext` so the backdrop can publish it as the
+     * `--for-drawer-drag-progress` custom property.
+     */
+    dragProgress = this.#drag.dragProgress;
+    /**
+     * Live drag displacement as a CSS `translate` value (`"<x> <y>"`),
+     * published on the host as the `--for-drawer-translate` custom property by
+     * the gesture engine. The consumer composes it on the surface with
+     * `translate: var(--for-drawer-translate, 0px 0px)`.
+     *
+     * A **custom property** is used (rather than writing `translate` /
+     * `transform` directly) because `transform` is reserved for
+     * `ForDrawerScaleCoordinator` and a directly-written inline `translate` is
+     * dropped by Angular when the consumer also binds a template `[style.*]` on
+     * the same host. `"0px 0px"` at rest; the write rides the same change-
+     * detection pass as the `data-dragging` / `data-active-snap-point` changes
+     * on release so the consumer's `transition: translate` animates back in
+     * lockstep with the snap transition rather than jumping to the old rest
+     * position first.
+     */
+    dragTranslate = this.#drag.dragTranslate;
+    /** Host element of this drawer surface — exposed via `ForDrawerContext`. */
+    get hostElement() {
+        return this.#host.nativeElement;
+    }
+    /** Depth of this drawer in the nesting stack (0 root, 1 first child, …). */
+    #depth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#depth" }] : /* istanbul ignore next */ []));
+    depthAttr = computed(() => String(this.#depth()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "depthAttr" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` while at least one descendant `[forDrawer]` is registered with
+     * `ForDrawerStack` underneath this one — reflected as
+     * `data-state-nested="true"`. The actual nested-visual transform
+     * (`scale + translate3d`) on the parent surface is owned by
+     * `ForDrawerScaleCoordinator`, which subscribes to the same stack
+     * signal and applies the inline `style.transform` once per affected
+     * host. The check is one-level (direct child) because the visual
+     * contract only cares about whether *some* child is currently covering
+     * this drawer; deeper descendants cascade naturally through their own
+     * ancestor chain.
+     */
+    hasChild = computed(() => {
+        const stack = this.#drawerStack.stack();
+        const me = this.#host.nativeElement;
+        return stack.some((n) => n.parent === me);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChild" }] : /* istanbul ignore next */ []));
+    /**
+     * Reflected as `data-scale-background` on the host: `true` when the
+     * directive opted into the effect AND the coordinator is currently
+     * applying it (wrapper registered, not under reduced-motion). Lets
+     * consumers style the drawer differently in scale mode (e.g. larger
+     * corner radii) without polling the coordinator.
+     */
+    scaleBackgroundActive = computed(() => this.scaleBackground() && this.#scaleCoordinator.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleBackgroundActive" }] : /* istanbul ignore next */ []));
+    // Cleanup refs for drawer-specific side effects (the modal-shell owns its
+    // portal / dismissable / focus-trap / scroll-lock / inert-siblings teardown;
+    // the gesture engine owns its own swipe-listener teardown). They are layered
+    // around the shell on SETUP — the drawer-stack push runs BEFORE the shell's
+    // afterNextRender so descendants see consistent topology, scale runs AFTER so
+    // the coordinator composes on a fully-wired surface — and both are torn down
+    // from a single `DestroyRef.onDestroy` (see the constructor).
+    #scaleCleanup = null;
+    #stackCleanup = null;
+    constructor() {
+        // ---- Pre-shell setup. Runs in its own afterNextRender registered BEFORE
+        // injectModalShell so the drawer-stack push, closeThreshold validation, and
+        // snap-point validation precede the shell's dismissable / focus /
+        // scroll-lock wiring. Descendants observing `hasChild` / depth see
+        // consistent topology throughout their mount sequence; consumers passing bad
+        // closeThreshold / snapPoints get a clear error before the shell focuses.
+        afterNextRender(() => {
+            // 1. Drawer-stack push. The `dragging` signal + resolved
+            //    nested-transform tunables ride along so `ForDrawerScaleCoordinator`
+            //    owns the `style.transform` write for the parent surface (issue #180)
+            //    and reads scope-local defaults through this node.
+            const handle = this.#drawerStack.push({
+                host: this.#host.nativeElement,
+                side: this.side(),
+                scaleBackground: this.scaleBackground(),
+                parent: this.#parentDrawer?.hostElement ?? null,
+                dragging: this.dragging,
+                nestedScaleAmount: this.#defaults.nestedScaleAmount ?? 0.93,
+                nestedTranslateYpx: this.#defaults.nestedTranslateYpx ?? 8,
+            });
+            this.#depth.set(handle.depth);
+            this.#stackCleanup = handle.cleanup;
+            // 2. closeThreshold validation. Throws here so consumers get a clear
+            //    mount-time error instead of a silently-broken dismissal.
+            const ct = this.closeThreshold();
+            if (!Number.isFinite(ct) || ct < 0 || ct > 1) {
+                throw new Error(`[forty-cdk/drawer] closeThreshold must be in [0, 1], got ${ct}.`);
+            }
+            // 3. Snap-point validation (shape + fadeFromIndex range + first
+            //    live-dimension measurement) and mount-time `activeSnapPoint`
+            //    default, owned by the gesture engine. Runs here — after the stack
+            //    push and closeThreshold check — so the mount sequence matches what
+            //    it was before the engine was extracted. Runtime `[snapPoints]`
+            //    rebinds are re-validated by the engine's own effect.
+            this.#drag.validateOnMount();
+        });
+        // ---- The shared modal-shell. Owns: synchronous return-focus capture
+        // (WebKit #136), portal, dismissable layer (triple-veto + composite
+        // `interactOutside`), modal vs non-modal branching (focus trap + scroll
+        // lock + inert siblings), and the `autoFocusOnOpen` / `autoFocusOnClose`
+        // veto hooks. Anything drawer-specific (drag gesture, snap points, scale
+        // coordinator, drawer-stack registration, backdrop exemption) stays in
+        // this directive / the gesture engine.
+        injectModalShell({
+            modal: this.modal,
+            returnFocus: this.returnFocus,
+            initialFocus: this.initialFocus,
+            container: this.container,
+            autoFocusOnOpen: () => this.autoFocusOnOpen(),
+            autoFocusOnClose: () => this.autoFocusOnClose(),
+            dismiss: {
+                dismissible: this.dismissible,
+                requestClose: (reason) => this.requestClose(reason),
+                emitEscapeKeyDown: (veto) => this.escapeKeyDown.emit(veto),
+                emitPointerDownOutside: (veto) => this.pointerDownOutside.emit(veto),
+                emitFocusOutside: (veto) => this.focusOutside.emit(veto),
+                emitInteractOutside: (veto) => this.interactOutside.emit(veto),
+                // The backdrop is portaled to body (sibling of the drawer host), so
+                // without exemption a pointer-down on it fires `pointerDownOutside`
+                // BEFORE the backdrop's click handler runs — the drawer would close
+                // with the wrong reason. Marking it exempt routes the gesture
+                // through the backdrop's own click → `requestClose('backdrop')`
+                // path instead. The handle is a child of the host so it is already
+                // covered by `host.contains(target)`.
+                exemptElements: () => {
+                    const backdrop = this.#backdropEl();
+                    return backdrop ? [backdrop] : [];
+                },
+            },
+        });
+        // ---- Post-shell setup. Runs in its own afterNextRender registered
+        // AFTER injectModalShell so swipe-dismiss arms on a host already attached
+        // to body via the shell's portal, and the scale coordinator composes on
+        // top of a fully-wired surface.
+        afterNextRender(() => {
+            // Register with the scale coordinator last so the wrapper transition
+            // composes after every other side effect has stabilised. The coordinator
+            // enforces the reduced-motion + wrapper-presence gates.
+            if (this.scaleBackground()) {
+                this.#scaleCleanup = this.#scaleCoordinator.registerDrawer({
+                    setBackgroundColorOnScale: this.setBackgroundColorOnScale(),
+                    scaleAmount: this.#defaults.scaleAmount ?? 0.95,
+                    scaleTranslateYpx: this.#defaults.scaleTranslateYpx ?? 14,
+                    scaleBorderRadiusPx: this.#defaults.scaleBorderRadiusPx ?? 8,
+                    scaleBackgroundColor: this.#defaults.scaleBackgroundColor ?? 'black',
+                });
+            }
+            // Arm the swipe gate now that the surface is fully wired. The gesture
+            // engine's effect owns the actual attach/detach; arming unblocks it.
+            this.#drag.arm();
+        });
+        // ---- Drawer-owned teardown, in one hook. Neither step depends on
+        // running before or after the shell's dismissable / focus-trap /
+        // scroll-lock teardown: the scale handle is self-contained (pops the scale
+        // stack), the swipe listeners are detached by the gesture engine's own
+        // destroy hook, and the drawer-stack pop only requires that descendant
+        // *drawers* are already popped — which Angular guarantees by destroying
+        // child components before their parents. Scale cleanup runs first, then the
+        // drawer-stack pop (so any sibling reads of the stack during scale cleanup
+        // still see this node; `ForDrawerStack.cleanup` throws if a descendant is
+        // still registered, surfacing consumer template bugs). The portal's own
+        // destroy hook still removes the host from the DOM after this runs, so
+        // return-focus is unaffected.
+        inject(DestroyRef).onDestroy(() => {
+            this.#scaleCleanup?.();
+            this.#scaleCleanup = null;
+            this.#stackCleanup?.();
+            this.#stackCleanup = null;
+        });
+    }
+    // ---- Context implementation ----
+    registerLabel(id) {
+        this.#labelIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));
+    }
+    unregisterLabel(id) {
+        this.#labelIds.update((arr) => arr.filter((x) => x !== id));
+    }
+    registerDescription(id) {
+        this.#describedByIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));
+    }
+    unregisterDescription(id) {
+        this.#describedByIds.update((arr) => arr.filter((x) => x !== id));
+    }
+    registerHandle(el) {
+        const current = this.#handleEl();
+        if (el !== null && current !== null && current !== el) {
+            throw new Error('[forty-cdk/drawer] Multiple [forDrawerHandle] inside the same [forDrawer]; only one is allowed.');
+        }
+        this.#handleEl.set(el);
+    }
+    registerBackdrop(el) {
+        const current = this.#backdropEl();
+        if (el !== null && current !== null && current !== el) {
+            throw new Error('[forty-cdk/drawer] Multiple [forDrawerBackdrop] inside the same [forDrawer]; only one is allowed.');
+        }
+        this.#backdropEl.set(el);
+    }
+    requestClose(reason, value) {
+        if (reason !== 'closeButton' && reason !== 'programmatic' && !this.dismissible()) {
+            return;
+        }
+        this.#lastCloseValue.set(value);
+        this.dismiss.emit(reason);
+    }
+    /**
+     * The `value` argument from the most recent `requestClose(reason, value)`
+     * call. Read by `ForDrawerManager` to bridge `[forDrawerClose] [closeWith]`
+     * into `ForDrawerRef.close(value)`. Declarative consumers never need this —
+     * it is plumbing for the imperative bootstrap path.
+     *
+     * @internal
+     */
+    lastCloseValue = this.#lastCloseValue.asReadonly();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDrawer, isStandalone: true, selector: "[forDrawer]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, returnFocus: { classPropertyName: "returnFocus", publicName: "returnFocus", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, autoFocusOnOpen: { classPropertyName: "autoFocusOnOpen", publicName: "autoFocusOnOpen", isSignal: true, isRequired: false, transformFunction: null }, autoFocusOnClose: { classPropertyName: "autoFocusOnClose", publicName: "autoFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, swipeToDismiss: { classPropertyName: "swipeToDismiss", publicName: "swipeToDismiss", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null }, handleOnly: { classPropertyName: "handleOnly", publicName: "handleOnly", isSignal: true, isRequired: false, transformFunction: null }, scaleBackground: { classPropertyName: "scaleBackground", publicName: "scaleBackground", isSignal: true, isRequired: false, transformFunction: null }, setBackgroundColorOnScale: { classPropertyName: "setBackgroundColorOnScale", publicName: "setBackgroundColorOnScale", isSignal: true, isRequired: false, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null }, activeSnapPoint: { classPropertyName: "activeSnapPoint", publicName: "activeSnapPoint", isSignal: true, isRequired: false, transformFunction: null }, fadeFromIndex: { classPropertyName: "fadeFromIndex", publicName: "fadeFromIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeSnapPoint: "activeSnapPointChange", dismiss: "dismiss", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", dragMove: "dragMove", release: "release" }, host: { attributes: { "data-state": "open", "tabindex": "-1" }, properties: { "attr.role": "alert() ? \"alertdialog\" : \"dialog\"", "attr.aria-modal": "modal() ? \"true\" : null", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "labelledBy()", "attr.aria-describedby": "describedBy()", "attr.data-side": "side()", "attr.data-active-snap-point": "activeSnapPointAttr()", "attr.data-dragging": "dragging() ? \"\" : null", "attr.data-scale-background": "scaleBackgroundActive() ? \"\" : null", "attr.data-depth": "depthAttr()", "attr.data-state-nested": "hasChild() ? \"true\" : null" } }, providers: [{ provide: FOR_DRAWER_CONTEXT, useExisting: ForDrawer }], exportAs: ["forDrawer"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawer]',
+                    exportAs: 'forDrawer',
+                    host: {
+                        '[attr.role]': 'alert() ? "alertdialog" : "dialog"',
+                        '[attr.aria-modal]': 'modal() ? "true" : null',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-active-snap-point]': 'activeSnapPointAttr()',
+                        '[attr.data-dragging]': 'dragging() ? "" : null',
+                        '[attr.data-scale-background]': 'scaleBackgroundActive() ? "" : null',
+                        '[attr.data-depth]': 'depthAttr()',
+                        '[attr.data-state-nested]': 'hasChild() ? "true" : null',
+                        'data-state': 'open',
+                        tabindex: '-1',
+                    },
+                    providers: [{ provide: FOR_DRAWER_CONTEXT, useExisting: ForDrawer }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], alert: [{ type: i0.Input, args: [{ isSignal: true, alias: "alert", required: false }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocus", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], autoFocusOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocusOnOpen", required: false }] }], autoFocusOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocusOnClose", required: false }] }], swipeToDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeToDismiss", required: false }] }], closeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeThreshold", required: false }] }], handleOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleOnly", required: false }] }], scaleBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleBackground", required: false }] }], setBackgroundColorOnScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "setBackgroundColorOnScale", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], activeSnapPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSnapPoint", required: false }] }, { type: i0.Output, args: ["activeSnapPointChange"] }], fadeFromIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "fadeFromIndex", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], release: [{ type: i0.Output, args: ["release"] }] } });
+
+/**
+ * Button that toggles the drawer when clicked. Apply on a focusable element —
+ * preferably a `<button>` — so keyboard users can reach it.
+ *
+ * Wires `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`, and
+ * `data-state` on the host. Two-way bind `[(open)]` to the same signal that
+ * gates the surrounding `@if` around `[forDrawer]`. Focus return is owned
+ * by `[forDrawer]` (modal mode captures the previously-focused element on
+ * mount and restores it on destroy).
+ *
+ * ```html
+ * <button forDrawerTrigger [(open)]="drawerOpen" controls="my-drawer">Open</button>
+ * @if (drawerOpen()) {
+ *   <div forDrawer id="my-drawer" (dismiss)="drawerOpen.set(false)">…</div>
+ * }
+ * ```
+ */
+class ForDrawerTrigger {
+    /**
+     * Two-way bindable. Bind to the same signal that gates the surrounding
+     * `@if` around `[forDrawer]`. The `model()` change emitter
+     * (`(openChange)`) fires only on internal transitions (trigger click).
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of the controlled drawer surface. Mirrored to `aria-controls` while
+     * the drawer is open. The consumer is responsible for setting the same
+     * `id` on `[forDrawer]`.
+     */
+    controls = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, click is ignored and the host reflects `data-disabled=""`,
+     * `aria-disabled="true"`, and the native `disabled` attribute so the
+     * trigger is announced as disabled by assistive tech and dropped from
+     * the tab order.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    #host = inject(ElementRef);
+    constructor() {
+        reflectDisabled(this.disabled);
+    }
+    onClick() {
+        if (this.disabled()) {
+            return;
+        }
+        // Same WebKit return-focus quirk as ForDialogTrigger (#136): force focus
+        // back onto the trigger before opening so the drawer captures it as the
+        // return target.
+        this.#host.nativeElement.focus();
+        this.open.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDrawerTrigger, isStandalone: true, selector: "[forDrawerTrigger]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.aria-controls": "open() ? controls() : null", "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, exportAs: ["forDrawerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerTrigger]',
+                    exportAs: 'forDrawerTrigger',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'open() ? controls() : null',
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Optional backdrop overlay. Portaled to `document.body` so it sits
+ * underneath the drawer regardless of where it's declared. While mounted
+ * the backdrop is visible; mount/unmount it alongside the drawer with the
+ * same `@if` so `animate.enter` / `animate.leave` works on both.
+ *
+ * Reflects `data-fade-from-active` when `fadeFromIndex` on the drawer root
+ * is set and the active snap point is at or past that index — consumers
+ * tie this to a CSS opacity transition for the "backdrop fades
+ * in once you snap up past N" effect.
+ *
+ * Publishes the live drag progress toward the anchored edge as the
+ * `--for-drawer-drag-progress` custom property (`0` at rest → `1` fully
+ * dragged off-screen) and mirrors the surface's `data-dragging` attribute.
+ * Together these drive the "backdrop fades out as you swipe to
+ * dismiss" effect with pure CSS:
+ *
+ * ```css
+ * [forDrawerBackdrop] {
+ *   opacity: calc(1 - var(--for-drawer-drag-progress, 0));
+ *   transition: opacity 0.3s ease;
+ * }
+ * [forDrawerBackdrop][data-dragging] {
+ *   transition: none; \/* track the pointer 1:1 *\/
+ * }
+ * ```
+ *
+ * The directive applies no visual styles itself.
+ */
+class ForDrawerBackdrop {
+    ctx = injectDrawerContext('ForDrawerBackdrop');
+    #host = inject(ElementRef);
+    /**
+     * Per-instance drawer id when opened through `ForDrawerManager` (reflected
+     * as `data-for-drawer-id` so the manager can pair this portaled backdrop
+     * with its drawer and drive its exit animation). `null` in the declarative
+     * path, where the host binding emits no attribute.
+     */
+    instanceId = inject(FOR_DRAWER_INSTANCE_ID, { optional: true });
+    constructor() {
+        injectPortal({ target: this.ctx.container });
+        // Register so the drawer's dismissable layer treats pointer-down on the
+        // backdrop as "inside" — see ForDrawerContext#registerBackdrop.
+        this.ctx.registerBackdrop(this.#host.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.ctx.registerBackdrop(null));
+    }
+    onClick(event) {
+        // Only close on direct backdrop click, not events bubbled from a child.
+        if (event.target === event.currentTarget) {
+            this.ctx.requestClose('backdrop');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerBackdrop, isStandalone: true, selector: "[forDrawerBackdrop]", host: { attributes: { "data-for-drawer-backdrop": "", "data-for-modal-peer": "", "data-state": "open" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-for-drawer-id": "instanceId", "attr.data-fade-from-active": "ctx.fadeFromActive() ? \"\" : null", "attr.data-dragging": "ctx.dragging() ? \"\" : null", "style.--for-drawer-drag-progress": "ctx.dragProgress()" } }, exportAs: ["forDrawerBackdrop"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerBackdrop]',
+                    exportAs: 'forDrawerBackdrop',
+                    host: {
+                        'data-for-drawer-backdrop': '',
+                        // Marker the inert-siblings utility looks for so the backdrop, which is
+                        // portaled to body alongside the drawer, is not inerted alongside the
+                        // rest of the document.
+                        'data-for-modal-peer': '',
+                        'data-state': 'open',
+                        '[attr.data-for-drawer-id]': 'instanceId',
+                        '[attr.data-fade-from-active]': 'ctx.fadeFromActive() ? "" : null',
+                        '[attr.data-dragging]': 'ctx.dragging() ? "" : null',
+                        '[style.--for-drawer-drag-progress]': 'ctx.dragProgress()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Visual swipe handle (the "grabber" pill at the top of a bottom sheet).
+ * Registers itself with the drawer so that `[handleOnly]="true"` can scope
+ * the swipe gesture to gestures starting on this element. Reflects
+ * `aria-hidden="true"` because the handle is a decorative styling target —
+ * keyboard users dismiss via Escape / a `[forDrawerClose]` button.
+ *
+ * Apply on the visual handle element. Applies no styles itself; the
+ * consumer is responsible for sizing, positioning, and color.
+ */
+class ForDrawerHandle {
+    #ctx = injectDrawerContext('ForDrawerHandle');
+    #host = inject(ElementRef);
+    constructor() {
+        this.#ctx.registerHandle(this.#host.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.#ctx.registerHandle(null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerHandle, isStandalone: true, selector: "[forDrawerHandle]", host: { attributes: { "aria-hidden": "true", "data-for-drawer-handle": "" } }, exportAs: ["forDrawerHandle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerHandle]',
+                    exportAs: 'forDrawerHandle',
+                    host: {
+                        'aria-hidden': 'true',
+                        'data-for-drawer-handle': '',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Convenience: gives the host element a stable id and registers it as the
+ * drawer's accessible name (`aria-labelledby`). Apply on a heading element
+ * (`<h2>`, `<h3>`...) inside `[forDrawer]`.
+ *
+ * If you don't render visible title text, omit this and pass `ariaLabel`
+ * on the drawer root instead.
+ */
+class ForDrawerTitle {
+    id = registerA11yName(injectDrawerContext('ForDrawerTitle'), 'for-drawer-title');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerTitle, isStandalone: true, selector: "[forDrawerTitle]", host: { properties: { "id": "id()" } }, exportAs: ["forDrawerTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerTitle]',
+                    exportAs: 'forDrawerTitle',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+/**
+ * Convenience: gives the host element a stable id and registers it as the
+ * drawer's accessible description (`aria-describedby`). Apply on a `<p>` or
+ * other element inside `[forDrawer]`. Optional — only use when there's
+ * non-title supporting copy.
+ */
+class ForDrawerDescription {
+    id = registerA11yDescription(injectDrawerContext('ForDrawerDescription'), 'for-drawer-description');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerDescription, isStandalone: true, selector: "[forDrawerDescription]", host: { properties: { "id": "id()" } }, exportAs: ["forDrawerDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerDescription]',
+                    exportAs: 'forDrawerDescription',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+/**
+ * Button that closes the surrounding drawer when clicked. Apply on a
+ * `<button>` inside `[forDrawer]`. Pass `[closeWith]` to propagate a return
+ * value to `ForDrawerRef.close()` in programmatic usage; ignored in
+ * declarative usage.
+ */
+class ForDrawerClose {
+    #ctx = injectDrawerContext('ForDrawerClose');
+    /** Optional value passed to `ForDrawerRef.close()` (programmatic mode). */
+    closeWith = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeWith" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.#ctx.requestClose('closeButton', this.closeWith());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDrawerClose, isStandalone: true, selector: "[forDrawerClose]", inputs: { closeWith: { classPropertyName: "closeWith", publicName: "closeWith", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-state": "open" }, listeners: { "click": "onClick()" } }, exportAs: ["forDrawerClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerClose]',
+                    exportAs: 'forDrawerClose',
+                    host: {
+                        type: 'button',
+                        'data-state': 'open',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { closeWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeWith", required: false }] }] } });
+
+/**
+ * Marks the consumer's app-shell wrapper so {@link ForDrawer}'s
+ * `scaleBackground` effect can transform the rest of the page when a
+ * drawer opens — applied through Angular DI rather than a global selector.
+ *
+ * Apply on the element that contains everything the drawer should appear
+ * to recede behind (typically the root shell). Reflects
+ * `data-state="scaled"` while the effect is active and `"idle"` at rest
+ * — useful for layering CSS styling without re-querying the coordinator.
+ *
+ * Only one wrapper may be registered at a time; mounting a second
+ * `[forDrawerWrapper]` while another is alive throws. Drawers that opt
+ * into `scaleBackground` without a registered wrapper are a no-op (no
+ * effect applied) so test composition and partial consumer adoption
+ * remain safe.
+ */
+class ForDrawerWrapper {
+    #coordinator = inject(ForDrawerScaleCoordinator);
+    #host = inject(ElementRef);
+    /** `'scaled'` while the coordinator is applying the effect, otherwise `'idle'`. */
+    state = computed(() => this.#coordinator.active() ? 'scaled' : 'idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const cleanup = this.#coordinator.registerWrapper(this.#host.nativeElement);
+        inject(DestroyRef).onDestroy(cleanup);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerWrapper, isStandalone: true, selector: "[forDrawerWrapper]", host: { properties: { "attr.data-state": "state()" } }, exportAs: ["forDrawerWrapper"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerWrapper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerWrapper]',
+                    exportAs: 'forDrawerWrapper',
+                    host: {
+                        '[attr.data-state]': 'state()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Handle returned by `ForDrawerManager.open()`. Inject inside the opened
+ * component to drive close imperatively. Both reactive (`isClosed`, `result`)
+ * and awaitable (`closed`) APIs are exposed — pick what fits the call site.
+ *
+ * `R` is the close-result type. Default `unknown`; specify it on
+ * `manager.open<C, R>(...)` to get type safety.
+ */
+class ForDrawerRef extends OverlayRef {
+}
+
+/**
+ * @internal Exposes the element injector at a child of the row's `[forDrawer]`
+ * element so the user component rendered via `NgComponentOutlet` resolves
+ * `FOR_DRAWER_CONTEXT` from the enclosing `[forDrawer]` host. The shared body
+ * lives in `OverlayContextInjector`; this only carries the drawer selector.
+ */
+class ForDrawerContextInjector extends OverlayContextInjector {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerContextInjector, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDrawerContextInjector, isStandalone: true, selector: "[forDrawerContextInjector]", exportAs: ["forDrawerContextInjector"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerContextInjector, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDrawerContextInjector]',
+                    exportAs: 'forDrawerContextInjector',
+                }]
+        }] });
+/**
+ * @internal Outlet component created once by `ForDrawerManager` on the first
+ * `open()` call. Renders every live entry from the manager's entries signal
+ * with `@for`, so Angular's control-flow unmount triggers `animate.leave` on
+ * close — identical to the declarative `@if (open()) { <div forDrawer …> }` path.
+ *
+ * Constructed exclusively by `ForDrawerManager`. Not exported from
+ * `public-api.ts`.
+ */
+class ForDrawerOutlet {
+    #destroyRef = inject(DestroyRef);
+    #host = null;
+    /**
+     * @internal Called once by `ForDrawerManager` right after creating this
+     * outlet to wire the reactive entries accessor and the destroy hook.
+     */
+    init(host) {
+        this.#host = host;
+        this.#destroyRef.onDestroy(() => host.closeAllForDestroy());
+    }
+    entries() {
+        return this.#host?.entries() ?? [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ForDrawerOutlet, isStandalone: true, selector: "for-drawer-outlet", ngImport: i0, template: `
+    @for (entry of entries(); track entry.id) {
+      <div
+        forDrawer
+        [attr.data-for-drawer-id]="entry.id"
+        [animate.enter]="entry.animateEnter ?? ''"
+        [class]="entry.hostClass"
+        [side]="entry.side ?? 'bottom'"
+        [dismissible]="entry.dismissible ?? true"
+        [modal]="entry.modal ?? true"
+        [alert]="entry.alert ?? false"
+        [returnFocus]="entry.returnFocus ?? true"
+        [initialFocus]="entry.initialFocus ?? 'first'"
+        [ariaLabel]="entry.ariaLabel ?? null"
+        [container]="entry.container ?? null"
+        [autoFocusOnOpen]="entry.autoFocusOnOpen"
+        [autoFocusOnClose]="entry.autoFocusOnClose"
+        [swipeToDismiss]="entry.swipeToDismiss ?? true"
+        [closeThreshold]="entry.closeThreshold ?? 0.25"
+        [handleOnly]="entry.handleOnly ?? false"
+        [scaleBackground]="entry.scaleBackground ?? false"
+        [setBackgroundColorOnScale]="entry.setBackgroundColorOnScale ?? true"
+        [snapPoints]="entry.snapPoints"
+        [activeSnapPoint]="entry.activeSnapPoint ?? null"
+        [fadeFromIndex]="entry.fadeFromIndex"
+        (dismiss)="entry.handleClose(fd.lastCloseValue())"
+        (escapeKeyDown)="entry.escapeKeyDown?.($event)"
+        (pointerDownOutside)="entry.pointerDownOutside?.($event)"
+        (focusOutside)="entry.focusOutside?.($event)"
+        (interactOutside)="entry.interactOutside?.($event)"
+        (dragMove)="entry.onDrag?.($event)"
+        (release)="entry.onRelease?.($event)"
+        (activeSnapPointChange)="entry.onActiveSnapPointChange?.($event)"
+        #fd="forDrawer"
+      >
+        <ng-container forDrawerContextInjector #ctx="forDrawerContextInjector">
+          <ng-container
+            [ngComponentOutlet]="entry.component"
+            [ngComponentOutletInjector]="entry.injectorFor(ctx.injector)"
+          />
+        </ng-container>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: ForDrawer, selector: "[forDrawer]", inputs: ["side", "dismissible", "modal", "alert", "returnFocus", "initialFocus", "ariaLabel", "container", "autoFocusOnOpen", "autoFocusOnClose", "swipeToDismiss", "closeThreshold", "handleOnly", "scaleBackground", "setBackgroundColorOnScale", "snapPoints", "activeSnapPoint", "fadeFromIndex"], outputs: ["activeSnapPointChange", "dismiss", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dragMove", "release"], exportAs: ["forDrawer"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: ForDrawerContextInjector, selector: "[forDrawerContextInjector]", exportAs: ["forDrawerContextInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'for-drawer-outlet',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ForDrawer, NgComponentOutlet, ForDrawerContextInjector],
+                    template: `
+    @for (entry of entries(); track entry.id) {
+      <div
+        forDrawer
+        [attr.data-for-drawer-id]="entry.id"
+        [animate.enter]="entry.animateEnter ?? ''"
+        [class]="entry.hostClass"
+        [side]="entry.side ?? 'bottom'"
+        [dismissible]="entry.dismissible ?? true"
+        [modal]="entry.modal ?? true"
+        [alert]="entry.alert ?? false"
+        [returnFocus]="entry.returnFocus ?? true"
+        [initialFocus]="entry.initialFocus ?? 'first'"
+        [ariaLabel]="entry.ariaLabel ?? null"
+        [container]="entry.container ?? null"
+        [autoFocusOnOpen]="entry.autoFocusOnOpen"
+        [autoFocusOnClose]="entry.autoFocusOnClose"
+        [swipeToDismiss]="entry.swipeToDismiss ?? true"
+        [closeThreshold]="entry.closeThreshold ?? 0.25"
+        [handleOnly]="entry.handleOnly ?? false"
+        [scaleBackground]="entry.scaleBackground ?? false"
+        [setBackgroundColorOnScale]="entry.setBackgroundColorOnScale ?? true"
+        [snapPoints]="entry.snapPoints"
+        [activeSnapPoint]="entry.activeSnapPoint ?? null"
+        [fadeFromIndex]="entry.fadeFromIndex"
+        (dismiss)="entry.handleClose(fd.lastCloseValue())"
+        (escapeKeyDown)="entry.escapeKeyDown?.($event)"
+        (pointerDownOutside)="entry.pointerDownOutside?.($event)"
+        (focusOutside)="entry.focusOutside?.($event)"
+        (interactOutside)="entry.interactOutside?.($event)"
+        (dragMove)="entry.onDrag?.($event)"
+        (release)="entry.onRelease?.($event)"
+        (activeSnapPointChange)="entry.onActiveSnapPointChange?.($event)"
+        #fd="forDrawer"
+      >
+        <ng-container forDrawerContextInjector #ctx="forDrawerContextInjector">
+          <ng-container
+            [ngComponentOutlet]="entry.component"
+            [ngComponentOutletInjector]="entry.injectorFor(ctx.injector)"
+          />
+        </ng-container>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+/**
+ * Injection token for the `data` payload passed to `ForDrawerManager.open(component, { data })`.
+ * Inject inside the opened component:
+ *
+ * ```ts
+ * readonly data = inject(FOR_DRAWER_DATA) as MyShape;
+ * ```
+ *
+ * Prefer `injectDrawerData<T>()` for typed access without manual casts.
+ */
+const FOR_DRAWER_DATA = new InjectionToken('FOR_DRAWER_DATA');
+/** Typed accessor for the `data` payload. Equivalent to `inject(FOR_DRAWER_DATA) as T`. */
+function injectDrawerData() {
+    return inject(FOR_DRAWER_DATA);
+}
+/**
+ * Programmatic drawer opener — symmetric with `ForDialogManager`. Inject
+ * anywhere, call `open(MyComponent, { data, side, ... })` and get a
+ * `ForDrawerRef<R>` back. Internally the manager renders the user component
+ * inside a manager-owned `@for` outlet, so Angular's control-flow unmount
+ * fires `animate.leave` before the node leaves the DOM — identical to the
+ * declarative `@if (open()) { <div forDrawer animate.leave="…"> }` path.
+ *
+ * Inside the opened component the usual drawer pieces work without any extra
+ * wiring: `[forDrawerTitle]`, `[forDrawerDescription]`, `[forDrawerBackdrop]`,
+ * `[forDrawerHandle]`, `[forDrawerClose]`. `[forDrawerClose] [closeWith]`
+ * propagates through to `ForDrawerRef.close(value)`.
+ *
+ * Inject `ForDrawerRef` to drive close imperatively and `FOR_DRAWER_DATA` (or
+ * `injectDrawerData<T>()`) for the payload.
+ */
+class ForDrawerManager extends OverlayManagerCore {
+    #defaults = inject(FOR_DRAWER_DEFAULTS);
+    constructor() {
+        super({
+            idPrefix: 'for-drawer-instance',
+            idAttribute: 'data-for-drawer-id',
+            backdropAttribute: 'data-for-drawer-backdrop',
+            createOutlet: (environmentInjector) => createComponent(ForDrawerOutlet, { environmentInjector }),
+        });
+    }
+    open(component, config = {}) {
+        if (config.closeThreshold !== undefined) {
+            const ct = config.closeThreshold;
+            if (!Number.isFinite(ct) || ct < 0 || ct > 1) {
+                throw new Error(`[forty-cdk/drawer] closeThreshold must be in [0, 1], got ${ct}.`);
+            }
+        }
+        const { id, remove } = this.nextId();
+        const animateEnter = config.animateEnter ?? this.#defaults.animateEnter;
+        const animateLeave = config.animateLeave ?? this.#defaults.animateLeave;
+        const backdropAnimateLeave = config.backdropAnimateLeave ?? this.#defaults.backdropAnimateLeave;
+        const ref = new ForDrawerRef(() => this.beginLeave(id, animateLeave, backdropAnimateLeave, remove));
+        const hostClass = resolveConfigClass(config) ?? '';
+        const data = config.data ?? null;
+        const entry = {
+            id,
+            component: component,
+            hostClass,
+            side: config.side ?? this.#defaults.side,
+            dismissible: config.dismissible ?? this.#defaults.dismissible,
+            modal: config.modal ?? this.#defaults.modal,
+            alert: config.alert,
+            returnFocus: config.returnFocus ?? this.#defaults.returnFocus,
+            initialFocus: config.initialFocus ?? this.#defaults.initialFocus,
+            ariaLabel: config.ariaLabel,
+            container: config.container,
+            animateEnter,
+            autoFocusOnOpen: config.autoFocusOnOpen,
+            autoFocusOnClose: config.autoFocusOnClose,
+            swipeToDismiss: config.swipeToDismiss ?? this.#defaults.swipeToDismiss,
+            closeThreshold: config.closeThreshold ?? this.#defaults.closeThreshold,
+            handleOnly: config.handleOnly ?? this.#defaults.handleOnly,
+            scaleBackground: config.scaleBackground ?? this.#defaults.scaleBackground,
+            setBackgroundColorOnScale: config.setBackgroundColorOnScale ?? this.#defaults.setBackgroundColorOnScale,
+            snapPoints: config.snapPoints,
+            activeSnapPoint: config.defaultSnapPoint,
+            fadeFromIndex: config.fadeFromIndex,
+            escapeKeyDown: config.escapeKeyDown,
+            pointerDownOutside: config.pointerDownOutside,
+            focusOutside: config.focusOutside,
+            interactOutside: config.interactOutside,
+            onDrag: config.onDrag,
+            onRelease: config.onRelease,
+            onActiveSnapPointChange: config.onActiveSnapPointChange,
+            ref: ref,
+            handleClose(value) {
+                ref.close(value);
+            },
+            injectorFor: this.createInjectorFactory([
+                { provide: FOR_DRAWER_DATA, useValue: data },
+                { provide: FOR_DRAWER_INSTANCE_ID, useValue: id },
+                { provide: ForDrawerRef, useValue: ref },
+                ...(config.providers ?? []),
+            ]),
+        };
+        this.register(entry);
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDrawerManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_DRAWER_CONTEXT, FOR_DRAWER_DATA, FOR_DRAWER_DEFAULTS, ForDrawer, ForDrawerBackdrop, ForDrawerClose, ForDrawerDescription, ForDrawerHandle, ForDrawerManager, ForDrawerRef, ForDrawerTitle, ForDrawerTrigger, ForDrawerWrapper, injectDrawerData, provideForDrawerDefaults };
+//# sourceMappingURL=forty-cdk-drawer.mjs.map