@radix-ng/primitives 1.0.0-beta.2 → 1.0.0-beta.3

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, Directive, inject, input, model, booleanAttribute, output, effect, untracked, assertInInjectionContext, DestroyRef, ElementRef, Injector, NgModule } from '@angular/core';
+import { signal, computed, Injectable, Directive, inject, input, model, booleanAttribute, output, effect, untracked, assertInInjectionContext, DestroyRef, ElementRef, Injector, isDevMode, 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 { RdxDialogRoot, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, injectRdxDialogRootContext, RdxDialogPopup, RdxDialogPortal, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, RdxDialogHandle, createRdxDialogHandle } from '@radix-ng/primitives/dialog';
 import { createContext, clamp, usePointerDrag, elementSize } from '@radix-ng/primitives/core';
 export { usePointerDrag } from '@radix-ng/primitives/core';
 
@@ -22,6 +22,8 @@ class RdxDrawerProvider {
         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 */ []));
+        /** The frontmost drawer's live dismiss progress, or `0` when none is open. */
+        this.swipeProgress = computed(() => this.frontmost()?.swipeProgress() ?? 0, ...(ngDevMode ? [{ debugName: "swipeProgress" }] : /* istanbul ignore next */ []));
     }
     /** Register an open drawer; returns a disposer that removes it. */
     register(registration) {
@@ -62,6 +64,12 @@ const context = () => {
         swipeDirection: root.swipeDirection,
         swipeProgress: root.swipeProgress.asReadonly(),
         setSwipeProgress: (value) => root.swipeProgress.set(value),
+        openingSwipeActive: root.openingSwipeActive.asReadonly(),
+        openingSwipeDistance: root.openingSwipeDistance.asReadonly(),
+        setOpeningSwipe: (active, distance) => {
+            root.openingSwipeDistance.set(distance);
+            root.openingSwipeActive.set(active);
+        },
         snapPoints: root.normalizedSnapPoints,
         hasSnapPoints: root.hasSnapPoints,
         activeSnapPoint: root.snapPoint,
@@ -95,12 +103,12 @@ class RdxDrawerRoot {
         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.
+         * first 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. */
+        /** The snap point the drawer opens to when uncontrolled; defaults to the first 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 });
@@ -108,6 +116,9 @@ class RdxDrawerRoot {
         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 */ []));
+        /** Live SwipeArea reveal state; the popup converts distance into its measured-axis movement. */
+        this.openingSwipeActive = signal(false, ...(ngDevMode ? [{ debugName: "openingSwipeActive" }] : /* istanbul ignore next */ []));
+        this.openingSwipeDistance = signal(0, ...(ngDevMode ? [{ debugName: "openingSwipeDistance" }] : /* 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). */
@@ -130,20 +141,28 @@ class RdxDrawerRoot {
             untracked(() => {
                 const points = this.normalizedSnapPoints();
                 if (open && this.snapPoint() === null && points.length > 0) {
-                    this.snapPoint.set(this.defaultSnapPoint() ?? points[points.length - 1]);
+                    this.snapPoint.set(this.defaultSnapPoint() ?? points[0]);
                 }
             });
         });
         // Reset live swipe progress when closed so a reopened drawer never starts mid-gesture.
         effect(() => {
             if (!this.dialog.open()) {
-                untracked(() => this.swipeProgress.set(0));
+                untracked(() => {
+                    this.swipeProgress.set(0);
+                    this.openingSwipeActive.set(false);
+                    this.openingSwipeDistance.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() })));
+                onCleanup(untracked(() => this.provider.register({
+                    id: this.dialog.contentId,
+                    height: this.popupHeight.asReadonly(),
+                    swipeProgress: this.swipeProgress.asReadonly()
+                })));
             }
         });
     }
@@ -191,7 +210,7 @@ class RdxDrawerBackdrop {
         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 }); }
+    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-swiping": "drawerContext.openingSwipeActive() ? \"\" : undefined", "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,
@@ -201,6 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     hostDirectives: [RdxDialogBackdrop],
                     host: {
                         '[style.--drawer-swipe-progress]': 'drawerContext.swipeProgress()',
+                        '[attr.data-swiping]': 'drawerContext.openingSwipeActive() ? "" : undefined',
                         '[attr.data-nested-drawer-open]': 'drawerContext.nestedDrawerOpen() ? "" : undefined'
                     }
                 }]
@@ -264,6 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * 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.
+ * - `--drawer-swipe-progress` — 0..1 live dismiss progress of the frontmost drawer.
  * - `--nested-drawers` — the number of open drawers.
  * - `--drawer-frontmost-height` — the frontmost drawer's measured size, in pixels.
  */
@@ -272,7 +293,7 @@ class RdxDrawerIndent {
         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 }); }
+    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\"", "style.--drawer-swipe-progress": "provider?.swipeProgress() ?? 0" } }, exportAs: ["rdxDrawerIndent"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndent, decorators: [{
             type: Directive,
@@ -282,7 +303,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-active]': 'provider?.active() ? "" : undefined',
                         '[style.--nested-drawers]': 'provider?.count() ?? 0',
-                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"'
+                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"',
+                        '[style.--drawer-swipe-progress]': 'provider?.swipeProgress() ?? 0'
                     }
                 }]
         }] });
@@ -290,16 +312,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 /**
  * 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.
+ * Behaves like {@link RdxDrawerIndent} (same `[data-active]` / `--drawer-swipe-progress` /
+ * `--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 }); }
+    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\"", "style.--drawer-swipe-progress": "provider?.swipeProgress() ?? 0" } }, exportAs: ["rdxDrawerIndentBackground"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerIndentBackground, decorators: [{
             type: Directive,
@@ -309,7 +331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     host: {
                         '[attr.data-active]': 'provider?.active() ? "" : undefined',
                         '[style.--nested-drawers]': 'provider?.count() ?? 0',
-                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"'
+                        '[style.--drawer-frontmost-height]': '(provider?.frontmostHeight() ?? 0) + "px"',
+                        '[style.--drawer-swipe-progress]': 'provider?.swipeProgress() ?? 0'
                     }
                 }]
         }] });
@@ -462,7 +485,7 @@ function scrollGuards(target, boundary, direction) {
 function useDrawerSwipe(config) {
     assertInInjectionContext(useDrawerSwipe);
     const element = () => config.element();
-    const axisSize = () => (isVertical(config.direction()) ? element().offsetHeight : element().offsetWidth);
+    const axisSize = () => config.size?.() ?? (isVertical(config.direction()) ? element().offsetHeight : element().offsetWidth);
     let active = false;
     let startX = 0;
     let startY = 0;
@@ -514,7 +537,7 @@ function useDrawerSwipe(config) {
             if (target?.closest('[data-base-ui-swipe-ignore]')) {
                 return false;
             }
-            return !scrollGuards(target, element(), config.direction());
+            return !scrollGuards(target, config.boundary?.() ?? element(), config.direction());
         },
         onStart: (event) => {
             active = true;
@@ -574,8 +597,8 @@ function useDrawerSwipe(config) {
         }
         if (enabled) {
             writeMovement(offset, 0);
+            config.onProgress?.(0);
         }
-        config.onProgress?.(0);
     });
     inject(DestroyRef).onDestroy(cancelRaf);
 }
@@ -633,8 +656,10 @@ class RdxDrawerPopup {
         }, ...(ngDevMode ? [{ debugName: "frontmostHeightPx" }] : /* istanbul ignore next */ []));
         useDrawerSwipe({
             element: () => this.element,
+            boundary: () => this.swipeBoundary(),
+            size: () => this.visibleAxisSize(),
             direction: this.drawerContext.swipeDirection,
-            enabled: computed(() => this.dialogContext.isOpen()),
+            enabled: computed(() => this.dialogContext.isOpen() && !this.drawerContext.openingSwipeActive()),
             restingOffset: this.restingOffset,
             resolveRelease: (projected, velocity, canDismiss) => this.resolveRelease(projected, velocity, canDismiss),
             onDismiss: (event) => this.dialogContext.close('swipe', event),
@@ -651,14 +676,55 @@ class RdxDrawerPopup {
             this.element.style.setProperty('--drawer-snap-point-offset', `${offset}px`);
             this.drawerContext.reportPopupHeight(size);
         });
+        effect(() => {
+            const active = this.drawerContext.openingSwipeActive();
+            const distance = this.drawerContext.openingSwipeDistance();
+            if (!active) {
+                if (distance === Number.POSITIVE_INFINITY) {
+                    this.element.style.setProperty('--drawer-swipe-movement-x', '0px');
+                    this.element.style.setProperty('--drawer-swipe-movement-y', '0px');
+                    this.element.style.setProperty('--drawer-swipe-strength', '0');
+                    this.drawerContext.setSwipeProgress(0);
+                }
+                this.element.removeAttribute('data-swiping');
+                return;
+            }
+            const size = this.axisSize() || this.axisElementSize();
+            const movement = Math.max(0, size - distance);
+            const strength = size > 0 ? movement / size : 1;
+            const unit = dismissUnitVector(this.drawerContext.swipeDirection());
+            this.element.setAttribute('data-swiping', '');
+            this.element.style.setProperty('--drawer-swipe-movement-x', `${unit.x * movement}px`);
+            this.element.style.setProperty('--drawer-swipe-movement-y', `${unit.y * movement}px`);
+            this.element.style.setProperty('--drawer-swipe-strength', `${strength}`);
+            this.drawerContext.setSwipeProgress(strength);
+        });
     }
     axisSize() {
         const direction = this.drawerContext.swipeDirection();
         const size = this.size();
-        return direction === 'up' || direction === 'down' ? size.height : size.width;
+        const measured = direction === 'up' || direction === 'down' ? size.height : size.width;
+        return measured || this.axisElementSize();
+    }
+    axisElementSize() {
+        const direction = this.drawerContext.swipeDirection();
+        return direction === 'up' || direction === 'down' ? this.element.offsetHeight : this.element.offsetWidth;
+    }
+    swipeBoundary() {
+        return this.element.closest('[rdxDrawerViewport]') ?? this.element;
+    }
+    visibleAxisSize() {
+        const popupSize = this.axisSize();
+        const boundary = this.swipeBoundary();
+        if (boundary === this.element) {
+            return popupSize;
+        }
+        const direction = this.drawerContext.swipeDirection();
+        const boundarySize = direction === 'up' || direction === 'down' ? boundary.clientHeight : boundary.clientWidth;
+        return boundarySize > 0 ? Math.min(popupSize, boundarySize) : popupSize;
     }
     resolveRelease(projected, velocity, canDismiss) {
-        const size = this.axisSize();
+        const size = this.drawerContext.hasSnapPoints() ? this.axisSize() : this.visibleAxisSize();
         const dismissAllowed = canDismiss && !this.dialogContext.disablePointerDismissal();
         if (!this.drawerContext.hasSnapPoints()) {
             const strength = projected / (size || 1);
@@ -720,99 +786,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * Moves the drawer to a different part of the DOM. Defaults to `document.body`.
+ * Structural directive that teleports the drawer content (backdrop + popup) into a container (default
+ * `document.body`) while the drawer is open, keeping it mounted until its CSS exit `@keyframes`
+ * finish. It composes the structural {@link RdxDialogPortal}, inheriting the dialog presence context.
+ *
+ * Use the explicit `<ng-template rdxDrawerPortal>` form; pass `[container]` for a custom target.
  */
 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerPortal, isStandalone: true, selector: "ng-template[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]',
+                    selector: 'ng-template[rdxDrawerPortal]',
                     exportAs: 'rdxDrawerPortal',
-                    hostDirectives: [
-                        {
-                            directive: RdxDialogPortal,
-                            inputs: ['container']
-                        }
-                    ]
+                    hostDirectives: [{ directive: RdxDialogPortal, inputs: ['container'] }]
                 }]
         }] });
-
 /**
- * Mounts the portal while the drawer is open and waits for CSS exit keyframes before unmounting.
+ * Dev-mode guard: `rdxDrawerPortal` is now structural, so the old `<div rdxDrawerPortal>` markup would
+ * silently stop portaling — fail loudly instead.
  */
-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 }); }
+class RdxDrawerPortalMisuseGuard {
+    constructor() {
+        if (isDevMode()) {
+            throw new Error('[rdxDrawerPortal] is now a structural directive. ' +
+                'Use `<ng-template rdxDrawerPortal>` around the backdrop and popup. ' +
+                'rdxDrawerPortalPresence has been removed. See https://radix-ng.com/components/drawer.md');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortalMisuseGuard, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDrawerPortalMisuseGuard, isStandalone: true, selector: "[rdxDrawerPortal]:not(ng-template)", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortalPresence, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerPortalMisuseGuard, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'ng-template[rdxDrawerPortalPresence]',
-                    hostDirectives: [RdxDialogPortalPresence]
+                    selector: '[rdxDrawerPortal]:not(ng-template)'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-/** Pointer travel (px) inward past which the swipe area opens the drawer. */
+/** Pointer travel (px) inward past which releasing the swipe keeps the drawer open. */
 const OPEN_THRESHOLD = 30;
-/** Inward pointer travel (toward the open drawer) for a given direction and pointer delta. */
-function inwardDistance(direction, dx, dy) {
+/** Pointer travel in a given direction. */
+function directionalDistance(direction, dx, dy) {
     switch (direction) {
         case 'down':
-            return -dy;
-        case 'up':
             return dy;
+        case 'up':
+            return -dy;
         case 'left':
-            return dx;
-        case 'right':
             return -dx;
+        case 'right':
+            return dx;
     }
 }
+const oppositeDirection = {
+    up: 'down',
+    down: 'up',
+    left: 'right',
+    right: 'left'
+};
+const touchAction = (direction) => direction === 'left' || direction === 'right' ? 'pan-y' : 'pan-x';
 /**
  * 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.
+ * Opens the drawer at the start of a drag so its popup can follow the pointer live. Releasing past
+ * the threshold settles open; releasing before it or cancelling animates the drawer back out.
  */
 class RdxDrawerSwipeArea {
     constructor() {
         this.drawerContext = injectRdxDrawerRootContext();
         this.dialogContext = injectRdxDialogRootContext();
-        /** Direction the swipe area opens from; defaults to the root's `swipeDirection`. */
+        /** Direction the opening gesture travels; defaults to the opposite of the root's dismiss direction. */
         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.direction = computed(() => this.swipeDirection() ?? oppositeDirection[this.drawerContext.swipeDirection()], ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.resolvedTouchAction = computed(() => touchAction(this.direction()), ...(ngDevMode ? [{ debugName: "resolvedTouchAction" }] : /* istanbul ignore next */ []));
         this.swiping = signal(false, ...(ngDevMode ? [{ debugName: "swiping" }] : /* istanbul ignore next */ []));
         this.startX = 0;
         this.startY = 0;
+        this.distance = 0;
         usePointerDrag({
             canStart: () => !this.disabled() && !this.isOpen(),
             onStart: (event) => {
                 this.startX = event.clientX;
                 this.startY = event.clientY;
+                this.distance = 0;
                 this.swiping.set(true);
+                this.drawerContext.setOpeningSwipe(true, 0);
+                this.dialogContext.open(undefined, undefined, undefined, 'swipe', event);
             },
             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;
-                }
+                this.distance = Math.max(0, directionalDistance(this.direction(), event.clientX - this.startX, event.clientY - this.startY));
+                this.drawerContext.setOpeningSwipe(true, this.distance);
                 return true;
             },
-            onEnd: () => this.swiping.set(false)
+            onEnd: (event, committed) => {
+                const keepOpen = committed && this.distance >= OPEN_THRESHOLD;
+                this.drawerContext.setOpeningSwipe(false, keepOpen ? Number.POSITIVE_INFINITY : this.distance);
+                if (!keepOpen) {
+                    this.dialogContext.close('swipe', event);
+                }
+                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 }); }
+    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: { attributes: { "role": "presentation", "aria-hidden": "true" }, 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()", "style.pointer-events": "disabled() || isOpen() ? \"none\" : undefined", "style.touch-action": "resolvedTouchAction()" } }, exportAs: ["rdxDrawerSwipeArea"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDrawerSwipeArea, decorators: [{
             type: Directive,
@@ -824,7 +910,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.data-closed]': 'isOpen() ? undefined : ""',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '[attr.data-swiping]': 'swiping() ? "" : undefined',
-                        '[attr.data-swipe-direction]': 'direction()'
+                        '[attr.data-swipe-direction]': 'direction()',
+                        '[style.pointer-events]': 'disabled() || isOpen() ? "none" : undefined',
+                        '[style.touch-action]': 'resolvedTouchAction()',
+                        role: 'presentation',
+                        'aria-hidden': 'true'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -899,8 +989,8 @@ const drawerImports = [
     RdxDrawerRoot,
     RdxDrawerTrigger,
     RdxDrawerSwipeArea,
-    RdxDrawerPortalPresence,
     RdxDrawerPortal,
+    RdxDrawerPortalMisuseGuard,
     RdxDrawerBackdrop,
     RdxDrawerViewport,
     RdxDrawerPopup,
@@ -917,8 +1007,8 @@ class RdxDrawerModule {
             RdxDrawerRoot,
             RdxDrawerTrigger,
             RdxDrawerSwipeArea,
-            RdxDrawerPortalPresence,
             RdxDrawerPortal,
+            RdxDrawerPortalMisuseGuard,
             RdxDrawerBackdrop,
             RdxDrawerViewport,
             RdxDrawerPopup,
@@ -931,8 +1021,8 @@ class RdxDrawerModule {
             RdxDrawerRoot,
             RdxDrawerTrigger,
             RdxDrawerSwipeArea,
-            RdxDrawerPortalPresence,
             RdxDrawerPortal,
+            RdxDrawerPortalMisuseGuard,
             RdxDrawerBackdrop,
             RdxDrawerViewport,
             RdxDrawerPopup,
@@ -956,5 +1046,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * 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 };
+export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalMisuseGuard, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe };
 //# sourceMappingURL=radix-ng-primitives-drawer.mjs.map