@radix-ng/primitives 1.0.9 → 1.1.0

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, contentChild, signal, InjectionToken, Injector, input, numberAttribute, booleanAttribute, output, forwardRef, computed, resource, linkedSignal, afterRenderEffect, afterNextRender, EnvironmentInjector, effect, createComponent, inputBinding } from '@angular/core';
+import { inject, ElementRef, Directive, contentChild, signal, InjectionToken, numberAttribute, Injector, input, computed, booleanAttribute, output, forwardRef, resource, linkedSignal, afterRenderEffect, afterNextRender, EnvironmentInjector, effect, createComponent, inputBinding } from '@angular/core';
 import { RdxArrow } from '@radix-ng/primitives/arrow';
-import { computePosition, offset, shift, limitShift, flip, size, arrow, hide, autoUpdate } from '@floating-ui/dom';
+import { flip, shift, limitShift, computePosition, offset, size, arrow, hide, autoUpdate } from '@floating-ui/dom';
 import { createContext, elementSize, watch } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
 
 class RdxPopperAnchor {
     constructor() {
@@ -35,6 +36,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { anchor: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RdxPopperAnchor), { isSignal: true }] }] } });
 
+/**
+ * Collision-avoidance preset for dropdown-style popups (Base UI `DROPDOWN_COLLISION_AVOIDANCE`).
+ *
+ * Dropdowns (select / combobox / autocomplete / menu) strictly prefer their top/bottom placement and
+ * cap their height with `var(--available-height)`, so they must **not** fall back to the perpendicular
+ * (left/right) axis. `side`/`align` fall back to the wrapper default (`'flip'`).
+ */
+const DROPDOWN_COLLISION_AVOIDANCE = { fallbackAxisSide: 'none' };
+/**
+ * Collision-avoidance preset for regular popups (Base UI `POPUP_COLLISION_AVOIDANCE`).
+ *
+ * Popovers / tooltips / preview cards aren't height-capped and may freely flip to the perpendicular
+ * axis, preferring the logical end side. This equals the wrapper's built-in default; it is exported so
+ * popups can state the intent explicitly.
+ */
+const POPUP_COLLISION_AVOIDANCE = { fallbackAxisSide: 'end' };
 const RdxPopperContentConfigToken = new InjectionToken('RdxPopperContentConfig', {
     factory: () => ({})
 });
@@ -46,6 +63,39 @@ function provideRdxPopperContentConfig(config) {
 const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'];
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ALIGN_OPTIONS = ['start', 'center', 'end'];
+/**
+ * Resolve a logical inline side to a physical one for the current text direction; physical sides pass
+ * through unchanged (Base UI `useAnchorPositioning`). `inline-start` is the reading-start edge
+ * (`left` in LTR, `right` in RTL); `inline-end` is the reading-end edge.
+ */
+function resolvePhysicalSide(side, isRtl) {
+    if (side === 'inline-start') {
+        return isRtl ? 'right' : 'left';
+    }
+    if (side === 'inline-end') {
+        return isRtl ? 'left' : 'right';
+    }
+    return side;
+}
+/**
+ * Report a rendered physical side back in the same "kind" the consumer requested (Base UI
+ * `getLogicalSide`): when a logical side was requested, a `left`/`right` rendered side is mapped back
+ * to `inline-start`/`inline-end` for the direction (so a post-collision flip surfaces logically); a
+ * physical request, or a `top`/`bottom` rendered side, passes through unchanged.
+ */
+function toLogicalSide(requestedSide, renderedSide, isRtl) {
+    const requestedLogical = requestedSide === 'inline-start' || requestedSide === 'inline-end';
+    if (!requestedLogical) {
+        return renderedSide;
+    }
+    if (renderedSide === 'left') {
+        return isRtl ? 'inline-end' : 'inline-start';
+    }
+    if (renderedSide === 'right') {
+        return isRtl ? 'inline-start' : 'inline-end';
+    }
+    return renderedSide;
+}
 function isNotNull(value) {
     return value !== null;
 }
@@ -90,10 +140,19 @@ function getSideAndAlignFromPlacement(placement) {
     return [side, align];
 }
 
+/**
+ * `input()` transform for `sideOffset` / `alignOffset`: coerce string/number attribute values to a
+ * number but pass an {@link OffsetFunction} through untouched. A **named** module-level function (not
+ * an inline arrow) so compodoc parses the file — see CLAUDE.md's compodoc gotcha.
+ */
+function coerceOffset(value) {
+    return typeof value === 'function' ? value : numberAttribute(value);
+}
 const context = () => {
     const popperContentWrapper = inject(RdxPopperContentWrapper);
     return {
         placedSide: popperContentWrapper.placedSide,
+        physicalPlacedSide: popperContentWrapper.physicalPlacedSide,
         placedAlign: popperContentWrapper.placedAlign,
         arrowX: popperContentWrapper.arrowX,
         arrowY: popperContentWrapper.arrowY,
@@ -106,14 +165,18 @@ const [injectPopperContentWrapperContext, providePopperContentWrapperContext] =
 class RdxPopperContentWrapper {
     positionParams() {
         return {
+            positioningActive: this.positioningActive(),
             anchor: this.resolvedAnchor(),
             strategy: this.positionStrategy(),
             placement: this.desiredPlacement(),
+            side: this.side(),
+            isRtl: this.direction() === 'rtl',
+            align: this.align(),
             sideOffset: this.sideOffset(),
             alignOffset: this.alignOffset(),
             arrowHeight: this.arrowSize()().height,
             arrowWidth: this.arrowSize()().width,
-            avoidCollisions: this.avoidCollisions(),
+            collisionAvoidance: this.effectiveCollisionAvoidance(),
             sticky: this.sticky(),
             detectOverflowOptions: this.detectOverflowOptions(),
             arrow: this.arrow(),
@@ -135,27 +198,83 @@ class RdxPopperContentWrapper {
         /**
          * The preferred side of the anchor to render against when open.
          * Will be reversed when collisions occur and avoidCollisions is enabled.
+         *
+         * Accepts the logical `'inline-start'` / `'inline-end'` in addition to the physical sides; those
+         * resolve to `left` / `right` for the text direction (Base UI parity). The placed side reported via
+         * `data-side` / `placedSide()` echoes the requested kind: logical in → logical out (even after a
+         * collision flip), physical in → physical out.
          */
         this.side = input(this.config.side ?? 'bottom', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         /**
-         * Distance between the anchor and the popup in pixels.
+         * Text direction, used only to resolve a logical `side` (`inline-start` / `inline-end`) to a
+         * physical one. Falls back to an enclosing direction provider, then `ltr`.
+         */
+        this.dir = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+        this.direction = injectDirection(this.dir);
+        /** The `side` input with any logical inline value resolved to a physical side for the direction. */
+        this.resolvedSide = computed(() => resolvePhysicalSide(this.side(), this.direction() === 'rtl'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
+        /**
+         * Distance between the anchor and the popup in pixels. Also accepts an {@link OffsetFunction} that
+         * reads the anchor / positioner dimensions and the resolved side / align.
          */
-        this.sideOffset = input(this.config.sideOffset ?? 0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.sideOffset = input(this.config.sideOffset ?? 0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: coerceOffset });
         /**
          * How to align the popup relative to the specified side. May change when collisions occur.
          */
         this.align = input(this.config.align ?? 'center', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-        /** An offset in pixels from the `start` or `end` alignment options. */
-        this.alignOffset = input(this.config.alignOffset ?? 0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * An offset in pixels from the `start` or `end` alignment options. Also accepts an
+         * {@link OffsetFunction} (same signature as `sideOffset`).
+         */
+        this.alignOffset = input(this.config.alignOffset ?? 0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: coerceOffset });
         /**
          * Minimum distance to maintain between the arrow and the edges of the popup.
          * If your content has border-radius, this will prevent it from overflowing the corners.
          */
         this.arrowPadding = input(this.config.arrowPadding ?? 0, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /** When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges. */
+        /**
+         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
+         *
+         * @deprecated Use {@link collisionAvoidance} for fine-grained control (Base UI parity). Still honored:
+         * `false` disables all avoidance (unless a `collisionAvoidance` object is provided, which wins).
+         */
         this.avoidCollisions = input(this.config.avoidCollisions ?? true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * How the popup avoids colliding with the boundary edges, per axis (Base UI `collisionAvoidance`).
+         * Overrides the deprecated `avoidCollisions` and any per-primitive preset. An object here **fully
+         * replaces** the preset — omitted fields fall back to `side: 'flip'`, `align: 'flip'`,
+         * `fallbackAxisSide: 'end'`, never to the preset. See {@link RdxCollisionAvoidance}.
+         */
+        this.collisionAvoidance = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collisionAvoidance" }] : /* istanbul ignore next */ []));
+        /**
+         * Collision avoidance resolved against the deprecated `avoidCollisions` flag, the per-primitive
+         * config preset, and the wrapper defaults. Precedence: an explicit `collisionAvoidance` input →
+         * a legacy `avoidCollisions=false` (disables everything) → the config preset → the Base UI defaults.
+         */
+        this.effectiveCollisionAvoidance = computed(() => {
+            const explicit = this.collisionAvoidance();
+            // Legacy escape hatch (deprecated): `avoidCollisions=false` disables avoidance entirely — unless
+            // the consumer passes an explicit `collisionAvoidance` object, which always wins. Checked before
+            // the preset so `[avoidCollisions]="false"` still works on a positioner that ships a preset.
+            if (!explicit && this.avoidCollisions() === false) {
+                return { side: 'none', align: 'none', fallbackAxisSide: 'none' };
+            }
+            // A consumer object fully REPLACES the preset (Base UI parity — the preset is only the default
+            // when the consumer passes nothing); omitted fields fall back to the global defaults, not the
+            // preset. `??` (not spread-merge) is what enforces the "replaces, not merges" semantics.
+            const source = explicit ?? this.config.collisionAvoidance;
+            return {
+                side: source?.side ?? 'flip',
+                align: source?.align ?? 'flip',
+                fallbackAxisSide: source?.fallbackAxisSide ?? 'end'
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveCollisionAvoidance" }] : /* istanbul ignore next */ []));
         /**
          * The element used as the collision boundary.
          * By default this is the viewport, though you can provide additional element(s) to be included in this check.
@@ -214,7 +333,7 @@ class RdxPopperContentWrapper {
         ...(ngDevMode ? [{ debugName: "arrowY" }] : /* istanbul ignore next */ []));
         this.anchorHidden = computed(() => this.position.value()?.middlewareData.hide?.referenceHidden === true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "anchorHidden" }] : /* istanbul ignore next */ []));
-        this.desiredPlacement = computed(() => (this.side() + (this.align() !== 'center' ? '-' + this.align() : '')), /* @ts-ignore */
+        this.desiredPlacement = computed(() => (this.resolvedSide() + (this.align() !== 'center' ? '-' + this.align() : '')), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "desiredPlacement" }] : /* istanbul ignore next */ []));
         this.arrowSize = computed(() => {
             const arrowElementRef = this.arrow()?.elementRef;
@@ -264,26 +383,71 @@ class RdxPopperContentWrapper {
         ...(ngDevMode ? [{ debugName: "resolvedAnchor" }] : /* istanbul ignore next */ []));
         this.position = resource({ ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), params: () => this.positionParams(),
             loader: ({ params }) => {
-                if (!params.anchor) {
+                // Skip computing a position for a paused (closed keep-mounted) positioner.
+                if (!params.positioningActive || !params.anchor) {
                     return Promise.resolve(null);
                 }
+                const ca = params.collisionAvoidance;
+                // Ported from Base UI `useAnchorPositioning`: `side`/`align`/`fallbackAxisSide` select and
+                // configure the `flip()` / `shift()` middleware instead of the old boolean toggle.
+                const shiftDisabled = ca.align === 'none' && ca.side !== 'shift';
+                const crossAxisShiftEnabled = !shiftDisabled && (params.sticky === 'always' || ca.side === 'shift');
+                const flipMiddleware = ca.side === 'none'
+                    ? undefined
+                    : flip({
+                        ...params.detectOverflowOptions,
+                        mainAxis: ca.side === 'flip',
+                        crossAxis: ca.align === 'flip' ? 'alignment' : false,
+                        fallbackAxisSideDirection: ca.fallbackAxisSide
+                    });
+                const shiftMiddleware = shiftDisabled
+                    ? undefined
+                    : shift({
+                        ...params.detectOverflowOptions,
+                        mainAxis: ca.align !== 'none',
+                        crossAxis: crossAxisShiftEnabled,
+                        // `partial` keeps the popup attached to the anchor (limitShift); `always` keeps it
+                        // fully inside the boundary regardless (no limiter).
+                        limiter: params.sticky === 'partial' ? limitShift() : undefined
+                    });
+                // https://floating-ui.com/docs/flip#combining-with-shift — run shift first when shifting is
+                // the primary correction (or for center alignment), otherwise flip first.
+                const collisionMiddleware = ca.side === 'shift' || ca.align === 'shift' || params.align === 'center'
+                    ? [shiftMiddleware, flipMiddleware]
+                    : [flipMiddleware, shiftMiddleware];
                 return computePosition(params.anchor, this.elementRef.nativeElement, {
                     // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
                     strategy: params.strategy,
                     placement: params.placement,
                     middleware: [
-                        offset({
-                            mainAxis: params.sideOffset + params.arrowHeight || 0,
-                            alignmentAxis: params.alignOffset
+                        offset((state) => {
+                            const [placedSide, placedAlign] = getSideAndAlignFromPlacement(state.placement);
+                            const data = {
+                                // Report the placed side in the same kind the consumer requested: logical
+                                // when a logical `side` was passed (so a post-collision flip stays logical),
+                                // physical otherwise (Base UI parity).
+                                side: toLogicalSide(params.side, placedSide, params.isRtl),
+                                align: placedAlign,
+                                anchor: {
+                                    width: state.rects.reference.width,
+                                    height: state.rects.reference.height
+                                },
+                                positioner: {
+                                    width: state.rects.floating.width,
+                                    height: state.rects.floating.height
+                                }
+                            };
+                            const sideAxis = typeof params.sideOffset === 'function' ? params.sideOffset(data) : params.sideOffset;
+                            const alignAxis = typeof params.alignOffset === 'function' ? params.alignOffset(data) : params.alignOffset;
+                            return {
+                                mainAxis: sideAxis + params.arrowHeight || 0,
+                                // both axes so `alignOffset` also applies to center-aligned popups
+                                // (`alignmentAxis` overrides `crossAxis` for start/end placements)
+                                crossAxis: alignAxis,
+                                alignmentAxis: alignAxis
+                            };
                         }),
-                        params.avoidCollisions &&
-                            shift({
-                                mainAxis: true,
-                                crossAxis: false,
-                                limiter: params.sticky === 'partial' ? limitShift() : undefined,
-                                ...params.detectOverflowOptions
-                            }),
-                        params.avoidCollisions && flip({ ...params.detectOverflowOptions }),
+                        ...collisionMiddleware,
                         size({
                             ...params.detectOverflowOptions,
                             apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -344,9 +508,22 @@ class RdxPopperContentWrapper {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
         /**
-         * The side the panel is currently placed against.
+         * The physical side the panel is currently placed against. Internal geometry (arrow position,
+         * transform origins) must use this — never {@link placedSide}, which can be logical.
+         */
+        this.physicalPlacedSide = computed(() => this.placement()?.side, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "physicalPlacedSide" }] : /* istanbul ignore next */ []));
+        /**
+         * The side the panel is currently placed against, reported in the kind the consumer requested
+         * (Base UI positioner `side`): when a logical `side` was passed, a placed `left`/`right` maps back
+         * to `inline-start`/`inline-end` for the direction — so a post-collision flip stays logical and
+         * `[data-side="inline-start"]` CSS is direction-agnostic. A physical request is always reported
+         * physically.
          */
-        this.placedSide = computed(() => this.placement()?.side, /* @ts-ignore */
+        this.placedSide = computed(() => {
+            const side = this.placement()?.side;
+            return side === undefined ? undefined : toLogicalSide(this.side(), side, this.direction() === 'rtl');
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placedSide" }] : /* istanbul ignore next */ []));
         /**
          * The current alignment of the panel.
@@ -395,7 +572,22 @@ class RdxPopperContentWrapper {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the positioner should actively track its anchor (recompute + `autoUpdate`). Defaults to
+         * always-on — the historical behavior, correct for a positioner that unmounts when its layer closes.
+         * A positioner that can stay mounted while closed (`keepMounted`) **overrides** this with its
+         * open/presence signal so a closed, hidden positioner doesn't spin an endless `autoUpdate`
+         * `requestAnimationFrame` loop (only relevant when `updatePositionStrategy: 'always'`). It's a
+         * reassignable field (not `readonly`) because the render effect below reads it lazily, after the
+         * subclass constructor has swapped it in.
+         */
+        this.positioningActive = computed(() => true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positioningActive" }] : /* istanbul ignore next */ []));
         this.afterRenderEffect = afterRenderEffect((onCleanup) => {
+            // Closed keep-mounted positioner: skip positioning entirely so `autoUpdate` doesn't keep firing.
+            if (!this.positioningActive()) {
+                return;
+            }
             this.position.reload();
             const anchor = this.resolvedAnchor();
             if (!anchor) {
@@ -416,7 +608,7 @@ class RdxPopperContentWrapper {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopperContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: RdxPopperContentWrapper, isStandalone: true, selector: "[rdxPopperContentWrapper]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { attributes: { "data-radix-popper-content-wrapper": "" }, properties: { "attr.data-side": "placedSide()", "attr.data-align": "placedAlign()", "attr.data-anchor-hidden": "anchorHidden() ? \"\" : undefined", "style": "style()" } }, providers: [providePopperContentWrapperContext(context)], queries: [{ propertyName: "arrow", first: true, predicate: i0.forwardRef(() => RdxPopperArrow), descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: RdxPopperContentWrapper, isStandalone: true, selector: "[rdxPopperContentWrapper]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionAvoidance: { classPropertyName: "collisionAvoidance", publicName: "collisionAvoidance", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { attributes: { "data-radix-popper-content-wrapper": "" }, properties: { "attr.data-side": "placedSide()", "attr.data-align": "placedAlign()", "attr.data-anchor-hidden": "anchorHidden() ? \"\" : undefined", "style": "style()" } }, providers: [providePopperContentWrapperContext(context)], queries: [{ propertyName: "arrow", first: true, predicate: i0.forwardRef(() => RdxPopperArrow), descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: RdxPopperContentWrapper, decorators: [{
             type: Directive,
@@ -433,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         '[style]': 'style()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }], arrow: [{ type: i0.ContentChild, args: [forwardRef(() => RdxPopperArrow), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionAvoidance: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionAvoidance", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }], arrow: [{ type: i0.ContentChild, args: [forwardRef(() => RdxPopperArrow), { isSignal: true }] }] } });
 /**
  * Providers a "thin" positioner that `extends RdxPopperContentWrapper` must include. Angular
  * inherits a base directive's inputs/outputs/host bindings/queries but **not** its `providers`, so
@@ -485,7 +677,9 @@ class RdxPopperArrow {
         this.elementRef = inject(ElementRef);
         this.width = input(10, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.height = input(5, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.baseSide = computed(() => OPPOSITE_SIDE[this.popperContentContext.placedSide()], /* @ts-ignore */
+        // Geometry is physical: the arrow reads `physicalPlacedSide` (`placedSide` can be logical
+        // `inline-start`/`inline-end` when a logical side was requested — a styling hook, not a direction).
+        this.baseSide = computed(() => OPPOSITE_SIDE[this.popperContentContext.physicalPlacedSide()], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseSide" }] : /* istanbul ignore next */ []));
         this.style = computed(() => {
             return {
@@ -498,13 +692,13 @@ class RdxPopperArrow {
                     right: '0 0',
                     bottom: 'center 0',
                     left: '100% 0'
-                }[this.popperContentContext.placedSide()],
+                }[this.popperContentContext.physicalPlacedSide()],
                 transform: {
                     top: 'translateY(100%)',
                     right: 'translateY(50%) rotate(90deg) translateX(-50%)',
                     bottom: `rotate(180deg)`,
                     left: 'translateY(50%) rotate(-90deg) translateX(50%)'
-                }[this.popperContentContext.placedSide()],
+                }[this.popperContentContext.physicalPlacedSide()],
                 visibility: this.popperContentContext.shouldHideArrow() ? 'hidden' : undefined
             };
         }, /* @ts-ignore */
@@ -575,5 +769,5 @@ const popperImports = [RdxPopper, RdxPopperArrow, RdxPopperContentWrapper, RdxPo
  * Generated bundle index. Do not edit.
  */
 
-export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, legacyPopperVars, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, provideRdxPopperContentWrapper, transformOrigin };
+export { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE, RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, legacyPopperVars, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, provideRdxPopperContentWrapper, resolvePhysicalSide, toLogicalSide, transformOrigin };
 //# sourceMappingURL=radix-ng-primitives-popper.mjs.map