@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

package/fesm2022/radix-ng-primitives-drawer.mjs

@@ -0,0 +1,1059 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, Directive, inject, input, model, booleanAttribute, output, effect, untracked, assertInInjectionContext, PLATFORM_ID, ElementRef, DestroyRef, Injector, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/dialog';
+import { RdxDialogRoot, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, injectRdxDialogRootContext, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalPresence, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, RdxDialogHandle, createRdxDialogHandle } from '@radix-ng/primitives/dialog';
+import { createContext, clamp, elementSize } from '@radix-ng/primitives/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * App-level coordinator that tracks every open drawer so background content can react to them
+ * (the page-scale / indent effect). Provide it once near the app root with
+ * {@link provideRdxDrawerProvider} or the `[rdxDrawerProvider]` directive; drawers that find it in
+ * their injector register while open. It is optional — drawers work without it.
+ */
+class RdxDrawerProvider {
+    constructor() {
+        this.stack = signal([], ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
+        /** Number of open drawers. */
+        this.count = computed(() => this.stack().length, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+        /** Whether any drawer is open. */
+        this.active = computed(() => this.count() > 0, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** The most recently opened (frontmost) drawer, or `null`. */
+        this.frontmost = computed(() => this.stack().at(-1) ?? null, ...(ngDevMode ? [{ debugName: "frontmost" }] : /* istanbul ignore next */ []));
+        /** The frontmost drawer's measured size (px), or `0` when none is open. */
+        this.frontmostHeight = computed(() => this.frontmost()?.height() ?? 0, ...(ngDevMode ? [{ debugName: "frontmostHeight" }] : /* istanbul ignore next */ []));
+    }
+    /** Register an open drawer; returns a disposer that removes it. */
+    register(registration) {
+        this.stack.update((stack) => [...stack, registration]);
+        return () => this.stack.update((stack) => stack.filter((entry) => entry !== registration));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerProvider, decorators: [{
+            type: Injectable
+        }] });
+/** Provide a {@link RdxDrawerProvider} for an app (e.g. in `app.config.ts`). */
+function provideRdxDrawerProvider() {
+    return [RdxDrawerProvider];
+}
+/**
+ * Hosts a {@link RdxDrawerProvider} for its subtree. Put it on a wrapping element so descendant
+ * drawer roots and `rdxDrawerIndent*` parts share one coordinator.
+ */
+class RdxDrawerProviderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerProviderDirective, isStandalone: true, selector: "[rdxDrawerProvider]", providers: [RdxDrawerProvider], exportAs: ["rdxDrawerProvider"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerProviderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerProvider]',
+                    exportAs: 'rdxDrawerProvider',
+                    providers: [RdxDrawerProvider]
+                }]
+        }] });
+
+const [injectRdxDrawerRootContext, provideRdxDrawerRootContext] = createContext('RdxDrawerRootContext');
+const context = () => {
+    const root = inject(RdxDrawerRoot);
+    return {
+        swipeDirection: root.swipeDirection,
+        swipeProgress: root.swipeProgress.asReadonly(),
+        setSwipeProgress: (value) => root.swipeProgress.set(value),
+        snapPoints: root.normalizedSnapPoints,
+        hasSnapPoints: root.hasSnapPoints,
+        activeSnapPoint: root.snapPoint,
+        sequentialSnap: root.snapToSequentialPoints,
+        setActiveSnapPoint: (value, emit) => root.setActiveSnapPoint(value, emit),
+        nestedDrawerOpen: root.nestedDrawerOpen,
+        nestedDrawerCount: root.nestedDrawerCount,
+        frontmostHeight: root.frontmostHeight,
+        reportPopupHeight: (height) => root.popupHeight.set(height)
+    };
+};
+/**
+ * Groups all parts of the drawer.
+ *
+ * Composes the Dialog primitive directly (modal-by-default but user-overridable) and layers the
+ * drawer-specific swipe and snap-point contract on top via {@link RdxDrawerRootContext}. Modality,
+ * dismissal and detached-trigger handling are the dialog's: the `modal`, `disablePointerDismissal`
+ * and `handle` inputs are proxied straight through, so a drawer is a modal dialog the user can make
+ * non-modal.
+ */
+class RdxDrawerRoot {
+    constructor() {
+        this.dialog = inject(RdxDialogRoot);
+        this.provider = inject(RdxDrawerProvider, { optional: true });
+        /** The popup's measured size (px) along its dismiss axis, reported by the popup. */
+        this.popupHeight = signal(0, ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * Direction a swipe travels to dismiss the drawer. The visual side of the drawer is consumer
+         * CSS; this controls the dismiss gesture and the `data-swipe-direction` styling hook.
+         */
+        this.swipeDirection = input('down', ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+        /**
+         * Resting positions the drawer snaps to along the dismiss axis. Order ascending by openness; the
+         * last entry is the default the drawer opens to. Omit for a plain open/closed drawer.
+         */
+        this.snapPoints = input(...(ngDevMode ? [undefined, { debugName: "snapPoints" }] : /* istanbul ignore next */ []));
+        /** The active snap point (controlled / uncontrolled with `[(snapPoint)]`). */
+        this.snapPoint = model(null, ...(ngDevMode ? [{ debugName: "snapPoint" }] : /* istanbul ignore next */ []));
+        /** The snap point the drawer opens to when uncontrolled; defaults to the most open point. */
+        this.defaultSnapPoint = input(...(ngDevMode ? [undefined, { debugName: "defaultSnapPoint" }] : /* istanbul ignore next */ []));
+        /** Step at most one snap point per release instead of letting velocity skip points. */
+        this.snapToSequentialPoints = input(false, { ...(ngDevMode ? { debugName: "snapToSequentialPoints" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Emits when the active snap point changes through a gesture. */
+        this.onSnapPointChange = output();
+        /** 0..1 progress of the active dismiss gesture, written by the popup's swipe engine. */
+        this.swipeProgress = signal(0, ...(ngDevMode ? [{ debugName: "swipeProgress" }] : /* istanbul ignore next */ []));
+        this.normalizedSnapPoints = computed(() => this.snapPoints() ?? [], ...(ngDevMode ? [{ debugName: "normalizedSnapPoints" }] : /* istanbul ignore next */ []));
+        this.hasSnapPoints = computed(() => this.normalizedSnapPoints().length > 0, ...(ngDevMode ? [{ debugName: "hasSnapPoints" }] : /* istanbul ignore next */ []));
+        /** Whether a drawer nested inside this one is open (reuses the dialog's nesting detection). */
+        this.nestedDrawerOpen = this.dialog.nestedDialogOpen;
+        /** Number of open drawers nested inside this one. */
+        this.nestedDrawerCount = this.dialog.nestedOpenCount.asReadonly();
+        /** The app-wide frontmost drawer's measured size (px); `0` without a provider. */
+        this.frontmostHeight = computed(() => this.provider?.frontmostHeight() ?? 0, ...(ngDevMode ? [{ debugName: "frontmostHeight" }] : /* istanbul ignore next */ []));
+        /** Whether the drawer is open (read-only mirror of the composed dialog state). */
+        this.open = this.dialog.open;
+        /** The active trigger's id. */
+        this.triggerId = this.dialog.triggerId;
+        /** Payload of the active trigger. */
+        this.payload = this.dialog.payload;
+        // Apply the default snap point when opening without one set. The active snap point is left
+        // untouched on close: clearing it would clobber a controlled `[(snapPoint)]` binding, and an
+        // uncontrolled drawer simply reopens where it was left.
+        effect(() => {
+            const open = this.dialog.open();
+            untracked(() => {
+                const points = this.normalizedSnapPoints();
+                if (open && this.snapPoint() === null && points.length > 0) {
+                    this.snapPoint.set(this.defaultSnapPoint() ?? points[points.length - 1]);
+                }
+            });
+        });
+        // Reset live swipe progress when closed so a reopened drawer never starts mid-gesture.
+        effect(() => {
+            if (!this.dialog.open()) {
+                untracked(() => this.swipeProgress.set(0));
+            }
+        });
+        // Register with the optional app-level provider while open so background content can react.
+        effect((onCleanup) => {
+            if (this.dialog.open() && this.provider) {
+                onCleanup(untracked(() => this.provider.register({ id: this.dialog.contentId, height: this.popupHeight.asReadonly() })));
+            }
+        });
+    }
+    setActiveSnapPoint(value, emit) {
+        this.snapPoint.set(value);
+        if (emit) {
+            this.onSnapPointChange.emit(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDrawerRoot, isStandalone: true, selector: "[rdxDrawerRoot]", inputs: { swipeDirection: { classPropertyName: "swipeDirection", publicName: "swipeDirection", isSignal: true, isRequired: false, transformFunction: null }, snapPoints: { classPropertyName: "snapPoints", publicName: "snapPoints", isSignal: true, isRequired: false, transformFunction: null }, snapPoint: { classPropertyName: "snapPoint", publicName: "snapPoint", isSignal: true, isRequired: false, transformFunction: null }, defaultSnapPoint: { classPropertyName: "defaultSnapPoint", publicName: "defaultSnapPoint", isSignal: true, isRequired: false, transformFunction: null }, snapToSequentialPoints: { classPropertyName: "snapToSequentialPoints", publicName: "snapToSequentialPoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapPoint: "snapPointChange", onSnapPointChange: "onSnapPointChange" }, providers: [provideRdxDrawerRootContext(context)], exportAs: ["rdxDrawerRoot"], hostDirectives: [{ directive: i1.RdxDialogRoot, inputs: ["open", "open", "defaultOpen", "defaultOpen", "triggerId", "triggerId", "defaultTriggerId", "defaultTriggerId", "handle", "handle", "modal", "modal", "disablePointerDismissal", "disablePointerDismissal"], outputs: ["openChange", "openChange", "triggerIdChange", "triggerIdChange", "onOpenChange", "onOpenChange", "onOpenChangeComplete", "onOpenChangeComplete"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerRoot]',
+                    exportAs: 'rdxDrawerRoot',
+                    hostDirectives: [
+                        {
+                            directive: RdxDialogRoot,
+                            inputs: [
+                                'open',
+                                'defaultOpen',
+                                'triggerId',
+                                'defaultTriggerId',
+                                'handle',
+                                'modal',
+                                'disablePointerDismissal'
+                            ],
+                            outputs: ['openChange', 'triggerIdChange', 'onOpenChange', 'onOpenChangeComplete']
+                        }
+                    ],
+                    providers: [provideRdxDrawerRootContext(context)]
+                }]
+        }], ctorParameters: () => [], propDecorators: { swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }], snapPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoints", required: false }] }], snapPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapPoint", required: false }] }, { type: i0.Output, args: ["snapPointChange"] }], defaultSnapPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSnapPoint", required: false }] }], snapToSequentialPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToSequentialPoints", required: false }] }], onSnapPointChange: [{ type: i0.Output, args: ["onSnapPointChange"] }] } });
+
+/**
+ * An overlay displayed beneath the drawer popup.
+ *
+ * Composes the dialog backdrop and additionally exposes `--drawer-swipe-progress` (0..1) so the
+ * consumer can fade it in step with the dismiss gesture.
+ */
+class RdxDrawerBackdrop {
+    constructor() {
+        this.drawerContext = injectRdxDrawerRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerBackdrop, isStandalone: true, selector: "[rdxDrawerBackdrop]", host: { properties: { "style.--drawer-swipe-progress": "drawerContext.swipeProgress()", "attr.data-nested-drawer-open": "drawerContext.nestedDrawerOpen() ? \"\" : undefined" } }, exportAs: ["rdxDrawerBackdrop"], hostDirectives: [{ directive: i1.RdxDialogBackdrop }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerBackdrop]',
+                    exportAs: 'rdxDrawerBackdrop',
+                    hostDirectives: [RdxDialogBackdrop],
+                    host: {
+                        '[style.--drawer-swipe-progress]': 'drawerContext.swipeProgress()',
+                        '[attr.data-nested-drawer-open]': 'drawerContext.nestedDrawerOpen() ? "" : undefined'
+                    }
+                }]
+        }] });
+
+/**
+ * A button that closes the drawer.
+ */
+class RdxDrawerClose {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerClose, isStandalone: true, selector: "button[rdxDrawerClose]", exportAs: ["rdxDrawerClose"], hostDirectives: [{ directive: i1.RdxDialogClose }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxDrawerClose]',
+                    exportAs: 'rdxDrawerClose',
+                    hostDirectives: [RdxDialogClose]
+                }]
+        }] });
+
+/**
+ * The scrollable body of the drawer.
+ *
+ * A structural marker so the anatomy matches Base UI. The popup's swipe engine yields to scrolling
+ * inside this region automatically (it only starts a dismiss gesture when the scroll is at its
+ * edge), so no extra wiring is needed. Opt individual elements out of swiping with the
+ * `data-base-ui-swipe-ignore` attribute.
+ */
+class RdxDrawerContent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerContent, isStandalone: true, selector: "[rdxDrawerContent]", exportAs: ["rdxDrawerContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerContent]',
+                    exportAs: 'rdxDrawerContent'
+                }]
+        }] });
+
+/**
+ * An accessible description announced when the drawer is opened.
+ */
+class RdxDrawerDescription {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerDescription, isStandalone: true, selector: "[rdxDrawerDescription]", exportAs: ["rdxDrawerDescription"], hostDirectives: [{ directive: i1.RdxDialogDescription }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerDescription]',
+                    exportAs: 'rdxDrawerDescription',
+                    hostDirectives: [RdxDialogDescription]
+                }]
+        }] });
+
+/**
+ * Background content that scales/indents while any drawer is open.
+ *
+ * Reads the nearest {@link RdxDrawerProvider} and exposes styling hooks; the visual transform is
+ * consumer CSS (headless):
+ * - `[data-active]` — present while at least one drawer is open.
+ * - `--nested-drawers` — the number of open drawers.
+ * - `--drawer-frontmost-height` — the frontmost drawer's measured size, in pixels.
+ */
+class RdxDrawerIndent {
+    constructor() {
+        this.provider = inject(RdxDrawerProvider, { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerIndent, isStandalone: true, selector: "[rdxDrawerIndent]", host: { properties: { "attr.data-active": "provider?.active() ? \"\" : undefined", "style.--nested-drawers": "provider?.count() ?? 0", "style.--drawer-frontmost-height": "(provider?.frontmostHeight() ?? 0) + \"px\"" } }, exportAs: ["rdxDrawerIndent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerIndent]',
+                    exportAs: 'rdxDrawerIndent',
+                    host: {
+                        '[attr.data-active]': 'provider?.active() ? "" : undefined',
+                        '[style.--nested-drawers]': 'provider?.count() ?? 0',
+                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"'
+                    }
+                }]
+        }] });
+
+/**
+ * The page background layer that scales/indents while any drawer is open.
+ *
+ * Behaves like {@link RdxDrawerIndent} (same `[data-active]` / `--nested-drawers` /
+ * `--drawer-frontmost-height` contract); kept as a distinct part so the page backdrop and the
+ * indented content can be styled independently, mirroring Base UI.
+ */
+class RdxDrawerIndentBackground {
+    constructor() {
+        this.provider = inject(RdxDrawerProvider, { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndentBackground, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerIndentBackground, isStandalone: true, selector: "[rdxDrawerIndentBackground]", host: { properties: { "attr.data-active": "provider?.active() ? \"\" : undefined", "style.--nested-drawers": "provider?.count() ?? 0", "style.--drawer-frontmost-height": "(provider?.frontmostHeight() ?? 0) + \"px\"" } }, exportAs: ["rdxDrawerIndentBackground"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndentBackground, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerIndentBackground]',
+                    exportAs: 'rdxDrawerIndentBackground',
+                    host: {
+                        '[attr.data-active]': 'provider?.active() ? "" : undefined',
+                        '[style.--nested-drawers]': 'provider?.count() ?? 0',
+                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"'
+                    }
+                }]
+        }] });
+
+/**
+ * Resolve a snap point to the number of pixels of the drawer revealed at that point. `rootFontSize`
+ * (px) resolves `rem` units; it defaults to the CSS initial value of `16`.
+ */
+function snapPointReveal(value, size, rootFontSize = 16) {
+    if (typeof value === 'number') {
+        return value > 0 && value <= 1 ? value * size : clamp(value, 0, size);
+    }
+    const trimmed = value.trim();
+    if (trimmed.endsWith('%')) {
+        return clamp((parseFloat(trimmed) / 100) * size, 0, size);
+    }
+    const parsed = parseFloat(trimmed);
+    if (Number.isNaN(parsed)) {
+        return size;
+    }
+    if (trimmed.endsWith('rem')) {
+        return clamp(parsed * rootFontSize, 0, size);
+    }
+    // A bare unit-less value still follows the number rule (`<= 1` is a fraction).
+    return trimmed.endsWith('px')
+        ? clamp(parsed, 0, size)
+        : parsed > 0 && parsed <= 1
+            ? parsed * size
+            : clamp(parsed, 0, size);
+}
+/**
+ * Build the snap entries for a given drawer size, sorted by openness (most open / smallest offset
+ * first). `offset = size - reveal`, so a fully-revealed point sits at offset `0`.
+ */
+function buildSnapEntries(values, size, rootFontSize = 16) {
+    return values
+        .map((value) => {
+        const reveal = snapPointReveal(value, size, rootFontSize);
+        return { value, reveal, offset: clamp(size - reveal, 0, size) };
+    })
+        .sort((a, b) => a.offset - b.offset);
+}
+/** How many milliseconds of momentum a release's velocity projects forward when picking a target. */
+const MOMENTUM_MS = 120;
+/** Pick the snap point (or dismissal) a release lands on. */
+function resolveSnapTarget(options) {
+    const { offsets, activeIndex, projected, velocity, size, sequential, canDismiss } = options;
+    if (sequential) {
+        const active = offsets[activeIndex] ?? 0;
+        if (projected > active) {
+            const next = activeIndex + 1 < offsets.length ? offsets[activeIndex + 1] : canDismiss ? size : active;
+            const midpoint = (active + next) / 2;
+            if (projected >= midpoint) {
+                if (activeIndex + 1 >= offsets.length) {
+                    return canDismiss ? { dismiss: true } : { index: activeIndex };
+                }
+                return { index: activeIndex + 1 };
+            }
+            return { index: activeIndex };
+        }
+        const previous = activeIndex - 1 >= 0 ? offsets[activeIndex - 1] : 0;
+        const midpoint = (previous + active) / 2;
+        return projected <= midpoint && activeIndex - 1 >= 0 ? { index: activeIndex - 1 } : { index: activeIndex };
+    }
+    const target = projected + velocity * MOMENTUM_MS;
+    let bestIndex = 0;
+    let bestDistance = Infinity;
+    offsets.forEach((offset, index) => {
+        const distance = Math.abs(offset - target);
+        if (distance < bestDistance) {
+            bestDistance = distance;
+            bestIndex = index;
+        }
+    });
+    if (canDismiss && Math.abs(size - target) < bestDistance) {
+        return { dismiss: true };
+    }
+    return { index: bestIndex };
+}
+/** The unit translate vector pointing toward dismissal for a direction. */
+function dismissUnitVector(direction) {
+    switch (direction) {
+        case 'down':
+            return { x: 0, y: 1 };
+        case 'up':
+            return { x: 0, y: -1 };
+        case 'right':
+            return { x: 1, y: 0 };
+        case 'left':
+            return { x: -1, y: 0 };
+    }
+}
+
+/** Pointer travel (px) before a press becomes a drag — below this a press stays a click/tap. */
+const DRAG_THRESHOLD = 4;
+/**
+ * Shared pointer-drag lifecycle for the drawer gestures (popup swipe and swipe-area open).
+ *
+ * A press only becomes a drag once the pointer moves past {@link DRAG_THRESHOLD}; until then it is a
+ * plain tap, so clicks on buttons inside the drawer keep working (the gesture never captures the
+ * pointer for a tap). Once dragging, the pointer is captured so a drag that leaves the element still
+ * completes, and `lostpointercapture` / `pointercancel` count as a non-committed end — a swallowed
+ * `pointerup` (native context menu, OS gesture, tab switch) can never wedge the gesture. No-op
+ * outside the browser, keeping SSR safe.
+ *
+ * Must be called from an injection context (a directive/component constructor).
+ */
+function usePointerDrag(handlers) {
+    assertInInjectionContext(usePointerDrag);
+    if (!isPlatformBrowser(inject(PLATFORM_ID))) {
+        return;
+    }
+    const host = inject(ElementRef).nativeElement;
+    let pointerId = null;
+    let downEvent = null;
+    let dragging = false;
+    const removeWindowListeners = () => {
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        window.removeEventListener('pointercancel', onPointerUp);
+    };
+    const reset = (event, committed) => {
+        if (pointerId === null) {
+            return;
+        }
+        const wasDragging = dragging;
+        try {
+            host.releasePointerCapture?.(pointerId);
+        }
+        catch {
+            // Capture may already be gone (e.g. on lostpointercapture); ignore.
+        }
+        pointerId = null;
+        downEvent = null;
+        dragging = false;
+        removeWindowListeners();
+        // A press that never crossed the threshold was a tap — leave the click untouched.
+        if (wasDragging) {
+            handlers.onEnd(event, committed);
+        }
+    };
+    function onPointerMove(event) {
+        if (event.pointerId !== pointerId || !downEvent) {
+            return;
+        }
+        if (!dragging) {
+            const dx = event.clientX - downEvent.clientX;
+            const dy = event.clientY - downEvent.clientY;
+            if (Math.hypot(dx, dy) < DRAG_THRESHOLD) {
+                return;
+            }
+            dragging = true;
+            try {
+                host.setPointerCapture?.(pointerId);
+            }
+            catch {
+                // Not all environments support pointer capture; the window listeners still drive the gesture.
+            }
+            handlers.onStart(downEvent);
+        }
+        if (handlers.onMove(event) === false) {
+            reset(event, false);
+        }
+    }
+    function onPointerUp(event) {
+        if (event.pointerId !== pointerId) {
+            return;
+        }
+        reset(event, event.type === 'pointerup');
+    }
+    const onLostCapture = (event) => {
+        if (event.pointerId === pointerId) {
+            reset(event, false);
+        }
+    };
+    const onPointerDown = (event) => {
+        if (pointerId !== null || !event.isPrimary || event.button !== 0 || !handlers.canStart(event)) {
+            return;
+        }
+        pointerId = event.pointerId;
+        downEvent = event;
+        dragging = false;
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    };
+    host.addEventListener('pointerdown', onPointerDown);
+    host.addEventListener('lostpointercapture', onLostCapture);
+    inject(DestroyRef).onDestroy(() => {
+        host.removeEventListener('pointerdown', onPointerDown);
+        host.removeEventListener('lostpointercapture', onLostCapture);
+        removeWindowListeners();
+    });
+}
+
+/** iOS-style rubber-band resistance for dragging *past* the fully-open position. */
+const RUBBER_BAND_CONSTANT = 0.55;
+/** Idle time (ms) since the last movement past which a release counts as a hold, not a flick. */
+const FLICK_IDLE_MS = 66;
+const rubberBand = (distance, dimension) => dimension <= 0 ? 0 : (1 - 1 / ((Math.abs(distance) * RUBBER_BAND_CONSTANT) / dimension + 1)) * dimension;
+const isVertical = (direction) => direction === 'up' || direction === 'down';
+/**
+ * Whether a scrollable region between `target` and `boundary` can still scroll in the direction the
+ * swipe would reveal — in which case the gesture must yield to scrolling instead of dismissing.
+ */
+function scrollGuards(target, boundary, direction) {
+    let node = target;
+    while (node && node !== boundary) {
+        if (node instanceof HTMLElement) {
+            const style = getComputedStyle(node);
+            const vertical = isVertical(direction);
+            const overflow = vertical ? style.overflowY : style.overflowX;
+            if (overflow === 'auto' || overflow === 'scroll') {
+                const scrollPos = vertical ? node.scrollTop : node.scrollLeft;
+                const maxScroll = vertical
+                    ? node.scrollHeight - node.clientHeight
+                    : node.scrollWidth - node.clientWidth;
+                // Pulling the drawer in the dismiss direction reveals the *start* edge for
+                // down/right and the *end* edge for up/left; only swipe when already at that edge.
+                const atStartEdge = scrollPos <= 0;
+                const atEndEdge = scrollPos >= maxScroll - 1;
+                const needsStartEdge = direction === 'down' || direction === 'right';
+                if (maxScroll > 0 && (needsStartEdge ? !atStartEdge : !atEndEdge)) {
+                    return true;
+                }
+            }
+        }
+        node = node.parentElement;
+    }
+    return false;
+}
+/**
+ * Headless swipe gesture for the drawer popup: dismiss, snap-back, and movement between snap points.
+ *
+ * Writes a small contract the consumer styles against (no transform is applied for you, keeping the
+ * primitive headless):
+ * - `--drawer-swipe-movement-x` / `--drawer-swipe-movement-y` — signed px offset along the axis,
+ *   including the active snap point's resting offset while idle.
+ * - `--drawer-swipe-strength` — 0..1 live dismiss progress (`0` at rest).
+ * - `[data-swiping]` — present while a gesture is active (drive `transition: none` off this).
+ * - `[data-swipe-direction]` — the active direction.
+ * - `[data-swipe-dismiss]` — present briefly when a release commits to dismissal.
+ *
+ * While idle the movement variables hold the active snap offset; releasing without dismissing writes
+ * the target offset so the consumer's `transition` animates between snap points and home.
+ *
+ * Must be called from an injection context (a directive/component constructor).
+ */
+function useDrawerSwipe(config) {
+    assertInInjectionContext(useDrawerSwipe);
+    const element = () => config.element();
+    const axisSize = () => (isVertical(config.direction()) ? element().offsetHeight : element().offsetWidth);
+    let active = false;
+    let startX = 0;
+    let startY = 0;
+    let startOffset = 0;
+    let pendingProjected = 0;
+    let lastProjected = 0;
+    let lastTime = 0;
+    let velocity = 0;
+    let rafId = 0;
+    const cancelRaf = () => {
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+        }
+    };
+    /** Write the movement variables for a translate magnitude (px) and a 0..1 dismiss strength. */
+    const writeMovement = (offset, strength) => {
+        const unit = dismissUnitVector(config.direction());
+        const el = element();
+        el.style.setProperty('--drawer-swipe-movement-x', `${unit.x * offset}px`);
+        el.style.setProperty('--drawer-swipe-movement-y', `${unit.y * offset}px`);
+        el.style.setProperty('--drawer-swipe-strength', `${strength}`);
+    };
+    const writeLive = () => {
+        rafId = 0;
+        const size = axisSize();
+        const visual = pendingProjected >= 0 ? pendingProjected : -rubberBand(pendingProjected, size);
+        const strength = clamp(pendingProjected / (size || 1), 0, 1);
+        writeMovement(visual, strength);
+        config.onProgress?.(strength);
+    };
+    const scheduleWrite = () => {
+        if (!rafId) {
+            rafId = requestAnimationFrame(writeLive);
+        }
+    };
+    /** Settle to a resting snap offset (animates via the consumer's transition); rest is not dismissing. */
+    const settleTo = (offset) => {
+        cancelRaf();
+        writeMovement(offset, 0);
+        config.onProgress?.(0);
+    };
+    usePointerDrag({
+        canStart: (event) => {
+            if (!config.enabled()) {
+                return false;
+            }
+            const target = event.target;
+            if (target?.closest('[data-base-ui-swipe-ignore]')) {
+                return false;
+            }
+            return !scrollGuards(target, element(), config.direction());
+        },
+        onStart: (event) => {
+            active = true;
+            startX = event.clientX;
+            startY = event.clientY;
+            startOffset = config.restingOffset();
+            pendingProjected = startOffset;
+            lastProjected = startOffset;
+            lastTime = event.timeStamp;
+            velocity = 0;
+            const el = element();
+            el.setAttribute('data-swiping', '');
+            el.removeAttribute('data-swipe-dismiss');
+        },
+        onMove: (event) => {
+            // Abort if the drawer closed mid-drag; the end handler settles back.
+            if (!config.enabled()) {
+                return false;
+            }
+            const unit = dismissUnitVector(config.direction());
+            const drag = (event.clientX - startX) * unit.x + (event.clientY - startY) * unit.y;
+            pendingProjected = startOffset + drag;
+            const dt = event.timeStamp - lastTime;
+            if (dt > 0) {
+                velocity = (pendingProjected - lastProjected) / dt;
+                lastProjected = pendingProjected;
+                lastTime = event.timeStamp;
+            }
+            scheduleWrite();
+            return true;
+        },
+        onEnd: (event, committed) => {
+            active = false;
+            cancelRaf();
+            element().removeAttribute('data-swiping');
+            // A pause before lift is a hold, not a flick: drop stale velocity.
+            if (event.timeStamp - lastTime > FLICK_IDLE_MS) {
+                velocity = 0;
+            }
+            const release = config.resolveRelease(pendingProjected, velocity, committed && config.enabled());
+            if (release.type === 'dismiss') {
+                element().setAttribute('data-swipe-dismiss', '');
+                config.onDismiss(event);
+                return;
+            }
+            settleTo(release.offset);
+        }
+    });
+    // Keep the idle resting offset in sync with snap state and reset live progress to 0 at rest.
+    // Skipped while dragging (the gesture owns the variables) and writes nothing while closed so the
+    // exit keyframe starts from the last visible offset.
+    effect(() => {
+        const offset = config.restingOffset();
+        const enabled = config.enabled();
+        if (active) {
+            return;
+        }
+        if (enabled) {
+            writeMovement(offset, 0);
+        }
+        config.onProgress?.(0);
+    });
+    inject(DestroyRef).onDestroy(cancelRaf);
+}
+
+/** Fraction of the drawer size a plain (no-snap) release must pass to dismiss. */
+const DISMISS_FRACTION = 0.5;
+/** Dismiss-axis velocity (px/ms) past which a plain release dismisses regardless of distance. */
+const DISMISS_VELOCITY = 0.4;
+/** Root font size (px) for resolving `rem` snap points; `16` (the CSS initial value) outside the browser. */
+function rootFontSize() {
+    if (typeof document === 'undefined') {
+        return 16;
+    }
+    return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+}
+/**
+ * A container for the drawer contents.
+ *
+ * Composes the dialog popup (focus trap, dismissal, scroll lock, a11y wiring) and owns the drawer
+ * gesture on top of it: swipe-to-dismiss, snap-back, and movement between snap points. The gesture
+ * publishes a CSS-variable / data-attribute contract (see {@link useDrawerSwipe}); the consumer
+ * styles the actual transform and snap-back transition off it, keeping the primitive headless.
+ */
+class RdxDrawerPopup {
+    constructor() {
+        this.drawerContext = injectRdxDrawerRootContext();
+        this.dialogContext = injectRdxDialogRootContext();
+        this.elementRef = inject(ElementRef);
+        this.element = this.elementRef.nativeElement;
+        /** Live popup size (px); a ResizeObserver keeps it current so snap geometry never goes stale. */
+        this.size = elementSize({ elementRef: this.elementRef, injector: inject(Injector) });
+        /** Snap entries for the current size; built once and shared by the offset/expanded reads. */
+        this.snapEntries = computed(() => buildSnapEntries(this.drawerContext.snapPoints(), this.axisSize(), rootFontSize()), ...(ngDevMode ? [{ debugName: "snapEntries" }] : /* istanbul ignore next */ []));
+        /** Resting translate magnitude (px) of the active snap point; `0` when fully open / no snaps. */
+        this.restingOffset = computed(() => {
+            const active = this.drawerContext.activeSnapPoint();
+            if (active === null || !this.drawerContext.hasSnapPoints()) {
+                return 0;
+            }
+            return this.snapEntries().find((candidate) => candidate.value === active)?.offset ?? 0;
+        }, ...(ngDevMode ? [{ debugName: "restingOffset" }] : /* istanbul ignore next */ []));
+        /** Whether the active snap point is the most open one. */
+        this.expanded = computed(() => {
+            const active = this.drawerContext.activeSnapPoint();
+            if (active === null || !this.drawerContext.hasSnapPoints()) {
+                return false;
+            }
+            const entries = this.snapEntries();
+            return entries.length > 0 && entries[0].value === active;
+        }, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** The frontmost nested drawer's height for `--drawer-frontmost-height`, or unset when none. */
+        this.frontmostHeightPx = computed(() => {
+            const height = this.drawerContext.frontmostHeight();
+            return this.drawerContext.nestedDrawerOpen() && height > 0 ? `${height}px` : null;
+        }, ...(ngDevMode ? [{ debugName: "frontmostHeightPx" }] : /* istanbul ignore next */ []));
+        useDrawerSwipe({
+            element: () => this.element,
+            direction: this.drawerContext.swipeDirection,
+            enabled: computed(() => this.dialogContext.isOpen()),
+            restingOffset: this.restingOffset,
+            resolveRelease: (projected, velocity, canDismiss) => this.resolveRelease(projected, velocity, canDismiss),
+            onDismiss: (event) => this.dialogContext.close('swipe', event),
+            onProgress: (strength) => this.drawerContext.setSwipeProgress(strength)
+        });
+        // Publish informational snap variables and report the measured size to the provider.
+        effect(() => {
+            const offset = this.restingOffset();
+            const size = this.axisSize();
+            if (!this.dialogContext.isOpen()) {
+                return;
+            }
+            this.element.style.setProperty('--drawer-height', `${size}px`);
+            this.element.style.setProperty('--drawer-snap-point-offset', `${offset}px`);
+            this.drawerContext.reportPopupHeight(size);
+        });
+    }
+    axisSize() {
+        const direction = this.drawerContext.swipeDirection();
+        const size = this.size();
+        return direction === 'up' || direction === 'down' ? size.height : size.width;
+    }
+    resolveRelease(projected, velocity, canDismiss) {
+        const size = this.axisSize();
+        const dismissAllowed = canDismiss && !this.dialogContext.disablePointerDismissal();
+        if (!this.drawerContext.hasSnapPoints()) {
+            const strength = projected / (size || 1);
+            return dismissAllowed && (strength >= DISMISS_FRACTION || velocity >= DISMISS_VELOCITY)
+                ? { type: 'dismiss' }
+                : { type: 'snap', offset: 0 };
+        }
+        const entries = this.snapEntries();
+        const offsets = entries.map((entry) => entry.offset);
+        const active = this.drawerContext.activeSnapPoint();
+        const activeIndex = Math.max(0, entries.findIndex((entry) => entry.value === active));
+        const target = resolveSnapTarget({
+            offsets,
+            activeIndex,
+            projected,
+            velocity,
+            size,
+            sequential: this.drawerContext.sequentialSnap(),
+            canDismiss: dismissAllowed
+        });
+        if ('dismiss' in target) {
+            return { type: 'dismiss' };
+        }
+        const entry = entries[target.index];
+        if (entry.value !== active) {
+            this.drawerContext.setActiveSnapPoint(entry.value, true);
+        }
+        return { type: 'snap', offset: entry.offset };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerPopup, isStandalone: true, selector: "[rdxDrawerPopup]", host: { properties: { "attr.data-swipe-direction": "drawerContext.swipeDirection()", "attr.data-expanded": "expanded() ? \"\" : undefined", "attr.data-nested-drawer-open": "drawerContext.nestedDrawerOpen() ? \"\" : undefined", "style.--nested-drawers": "drawerContext.nestedDrawerCount()", "style.--drawer-frontmost-height": "frontmostHeightPx()" } }, exportAs: ["rdxDrawerPopup"], hostDirectives: [{ directive: i1.RdxDialogPopup, outputs: ["escapeKeyDown", "escapeKeyDown", "pointerDownOutside", "pointerDownOutside", "focusOutside", "focusOutside", "interactOutside", "interactOutside", "openAutoFocus", "openAutoFocus", "closeAutoFocus", "closeAutoFocus"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPopup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerPopup]',
+                    exportAs: 'rdxDrawerPopup',
+                    hostDirectives: [
+                        {
+                            directive: RdxDialogPopup,
+                            outputs: [
+                                'escapeKeyDown',
+                                'pointerDownOutside',
+                                'focusOutside',
+                                'interactOutside',
+                                'openAutoFocus',
+                                'closeAutoFocus'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[attr.data-swipe-direction]': 'drawerContext.swipeDirection()',
+                        '[attr.data-expanded]': 'expanded() ? "" : undefined',
+                        '[attr.data-nested-drawer-open]': 'drawerContext.nestedDrawerOpen() ? "" : undefined',
+                        '[style.--nested-drawers]': 'drawerContext.nestedDrawerCount()',
+                        '[style.--drawer-frontmost-height]': 'frontmostHeightPx()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Moves the drawer to a different part of the DOM. Defaults to `document.body`.
+ */
+class RdxDrawerPortal {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerPortal, isStandalone: true, selector: "[rdxDrawerPortal]", exportAs: ["rdxDrawerPortal"], hostDirectives: [{ directive: i1.RdxDialogPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerPortal]',
+                    exportAs: 'rdxDrawerPortal',
+                    hostDirectives: [
+                        {
+                            directive: RdxDialogPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Mounts the portal while the drawer is open and waits for CSS exit keyframes before unmounting.
+ */
+class RdxDrawerPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerPortalPresence, isStandalone: true, selector: "ng-template[rdxDrawerPortalPresence]", hostDirectives: [{ directive: i1.RdxDialogPortalPresence }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxDrawerPortalPresence]',
+                    hostDirectives: [RdxDialogPortalPresence]
+                }]
+        }] });
+
+/** Pointer travel (px) inward past which the swipe area opens the drawer. */
+const OPEN_THRESHOLD = 30;
+/** Inward pointer travel (toward the open drawer) for a given direction and pointer delta. */
+function inwardDistance(direction, dx, dy) {
+    switch (direction) {
+        case 'down':
+            return -dy;
+        case 'up':
+            return dy;
+        case 'left':
+            return dx;
+        case 'right':
+            return -dx;
+    }
+}
+/**
+ * An off-canvas region (typically pinned to a screen edge) that opens the drawer when swiped inward.
+ *
+ * Phase 1 opens on a threshold crossing rather than following the pointer live (the popup is not
+ * mounted while closed); the live-follow open will land with snap points. Shares the drawer's
+ * pointer-drag lifecycle so capture/cancel handling stays consistent with the popup gesture.
+ */
+class RdxDrawerSwipeArea {
+    constructor() {
+        this.drawerContext = injectRdxDrawerRootContext();
+        this.dialogContext = injectRdxDialogRootContext();
+        /** Direction the swipe area opens from; defaults to the root's `swipeDirection`. */
+        this.swipeDirection = input(...(ngDevMode ? [undefined, { debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+        /** Whether the swipe area should ignore user interaction. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isOpen = computed(() => this.dialogContext.isOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.direction = computed(() => this.swipeDirection() ?? this.drawerContext.swipeDirection(), ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.swiping = signal(false, ...(ngDevMode ? [{ debugName: "swiping" }] : /* istanbul ignore next */ []));
+        this.startX = 0;
+        this.startY = 0;
+        usePointerDrag({
+            canStart: () => !this.disabled() && !this.isOpen(),
+            onStart: (event) => {
+                this.startX = event.clientX;
+                this.startY = event.clientY;
+                this.swiping.set(true);
+            },
+            onMove: (event) => {
+                if (this.disabled()) {
+                    return false;
+                }
+                const distance = inwardDistance(this.direction(), event.clientX - this.startX, event.clientY - this.startY);
+                if (distance >= OPEN_THRESHOLD) {
+                    this.dialogContext.open(undefined, undefined, undefined, 'swipe', event);
+                    return false;
+                }
+                return true;
+            },
+            onEnd: () => this.swiping.set(false)
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerSwipeArea, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDrawerSwipeArea, isStandalone: true, selector: "[rdxDrawerSwipeArea]", inputs: { swipeDirection: { classPropertyName: "swipeDirection", publicName: "swipeDirection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-open": "isOpen() ? \"\" : undefined", "attr.data-closed": "isOpen() ? undefined : \"\"", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-swiping": "swiping() ? \"\" : undefined", "attr.data-swipe-direction": "direction()" } }, exportAs: ["rdxDrawerSwipeArea"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerSwipeArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerSwipeArea]',
+                    exportAs: 'rdxDrawerSwipeArea',
+                    host: {
+                        '[attr.data-open]': 'isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'isOpen() ? undefined : ""',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-swiping]': 'swiping() ? "" : undefined',
+                        '[attr.data-swipe-direction]': 'direction()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * An accessible title announced when the drawer is opened.
+ */
+class RdxDrawerTitle {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerTitle, isStandalone: true, selector: "[rdxDrawerTitle]", exportAs: ["rdxDrawerTitle"], hostDirectives: [{ directive: i1.RdxDialogTitle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerTitle]',
+                    exportAs: 'rdxDrawerTitle',
+                    hostDirectives: [RdxDialogTitle]
+                }]
+        }] });
+
+/**
+ * A button that opens the drawer. Behaves exactly like the dialog trigger.
+ */
+class RdxDrawerTrigger {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerTrigger, isStandalone: true, selector: "button[rdxDrawerTrigger]", exportAs: ["rdxDrawerTrigger"], hostDirectives: [{ directive: i1.RdxDialogTrigger, inputs: ["handle", "handle", "payload", "payload", "id", "id", "disabled", "disabled"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxDrawerTrigger]',
+                    exportAs: 'rdxDrawerTrigger',
+                    hostDirectives: [
+                        {
+                            directive: RdxDialogTrigger,
+                            inputs: ['handle', 'payload', 'id', 'disabled']
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * A positioning container for the drawer popup that can be made scrollable.
+ *
+ * Exposes the dialog viewport's `data-nested` / `data-nested-dialog-open` state for styling.
+ */
+class RdxDrawerViewport {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerViewport, isStandalone: true, selector: "[rdxDrawerViewport]", exportAs: ["rdxDrawerViewport"], hostDirectives: [{ directive: i1.RdxDialogViewport }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxDrawerViewport]',
+                    exportAs: 'rdxDrawerViewport',
+                    hostDirectives: [RdxDialogViewport]
+                }]
+        }] });
+
+/**
+ * Connects a drawer root with trigger elements rendered elsewhere in the DOM.
+ *
+ * Drawers reuse the dialog handle implementation unchanged.
+ */
+const RdxDrawerHandle = RdxDialogHandle;
+function createRdxDrawerHandle() {
+    return createRdxDialogHandle();
+}
+
+const drawerImports = [
+    RdxDrawerProviderDirective,
+    RdxDrawerRoot,
+    RdxDrawerTrigger,
+    RdxDrawerSwipeArea,
+    RdxDrawerPortalPresence,
+    RdxDrawerPortal,
+    RdxDrawerBackdrop,
+    RdxDrawerViewport,
+    RdxDrawerPopup,
+    RdxDrawerContent,
+    RdxDrawerTitle,
+    RdxDrawerDescription,
+    RdxDrawerClose,
+    RdxDrawerIndent,
+    RdxDrawerIndentBackground
+];
+class RdxDrawerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerModule, imports: [RdxDrawerProviderDirective,
+            RdxDrawerRoot,
+            RdxDrawerTrigger,
+            RdxDrawerSwipeArea,
+            RdxDrawerPortalPresence,
+            RdxDrawerPortal,
+            RdxDrawerBackdrop,
+            RdxDrawerViewport,
+            RdxDrawerPopup,
+            RdxDrawerContent,
+            RdxDrawerTitle,
+            RdxDrawerDescription,
+            RdxDrawerClose,
+            RdxDrawerIndent,
+            RdxDrawerIndentBackground], exports: [RdxDrawerProviderDirective,
+            RdxDrawerRoot,
+            RdxDrawerTrigger,
+            RdxDrawerSwipeArea,
+            RdxDrawerPortalPresence,
+            RdxDrawerPortal,
+            RdxDrawerBackdrop,
+            RdxDrawerViewport,
+            RdxDrawerPopup,
+            RdxDrawerContent,
+            RdxDrawerTitle,
+            RdxDrawerDescription,
+            RdxDrawerClose,
+            RdxDrawerIndent,
+            RdxDrawerIndentBackground] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...drawerImports],
+                    exports: [...drawerImports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalPresence, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe, usePointerDrag };
+//# sourceMappingURL=radix-ng-primitives-drawer.mjs.map