@radix-ng/primitives 1.0.10 → 1.1.0

package/types/radix-ng-primitives-date-field.d.ts

@@ -4,11 +4,12 @@ import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { RdxFormUiControlBase, RdxFormValueControl, DateMatcher, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
 import { DateValue } from '@internationalized/date';
 
-declare class RdxDateFieldRootDirective extends RdxFormUiControlBase implements RdxFormValueControl<DateValue | undefined> {
+declare class RdxDateFieldRootDirective extends RdxFormUiControlBase implements RdxFormValueControl<DateValue | null> {
     /**
-     * The controlled value of the date field.
+     * The controlled value of the date field. `null` represents an empty field and keeps the value
+     * addressable as an Angular Signal Forms child field (`undefined` denotes an absent optional path).
      */
-    readonly value: _angular_core.ModelSignal<DateValue | undefined>;
+    readonly value: _angular_core.ModelSignal<DateValue | null>;
     /**
      * A matcher that marks specific dates as unavailable; a matched value makes the field invalid.
      */
@@ -122,6 +123,8 @@ declare class RdxDateFieldRootDirective extends RdxFormUiControlBase implements
     private readonly userInteracted;
     /** @ignore Mark the field touched (model + `touch` output) for Signal Forms. Called on segment blur. */
     markAsTouched(): void;
+    /** Reset segment interaction so the form-owned value write remains pristine. */
+    reset(): void;
     /**
      * @ignore
      */
@@ -235,7 +238,7 @@ declare class RdxDateFieldInputDirective {
 
 interface DateFieldContextToken {
     locale: InputSignal<string>;
-    value: ModelSignal<DateValue | undefined>;
+    value: ModelSignal<DateValue | null>;
     disabled: Signal<boolean>;
     readonly: Signal<boolean>;
     isInvalid: Signal<boolean>;

package/types/radix-ng-primitives-field.d.ts

@@ -63,6 +63,15 @@ declare class RdxFieldError {
      * @group Props
      */
     readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Shows this error only for a matching validation-error key. Bind `true` to keep it visible under
+     * external control; omit it for the field's default error behavior.
+     *
+     * @group Props
+     */
+    readonly match: _angular_core.InputSignal<string | boolean | undefined>;
+    /** Whether this error part is currently presented. */
+    readonly visible: _angular_core.Signal<boolean>;
     /**
      * The field's validation messages — client (provider / form name-routing, once `validationMode`
      * reveals them) then server (the Form's `errors` input, always); `[]` when none. Render them
@@ -73,12 +82,11 @@ declare class RdxFieldError {
     constructor();
     protected readonly dataAttr: (value: boolean) => "" | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFieldError, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFieldError, "[rdxFieldError]", ["rdxFieldError"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFieldError, "[rdxFieldError]", ["rdxFieldError"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "match": { "alias": "match"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * External owner of field state. An adapter (e.g. a future Signal Forms
- * `[rdxSignalField]` directive, or a Reactive Forms bridge) registers one via
+ * External owner of field state. An adapter (`rdxSignalField` or `rdxNgControlField`) registers one via
  * `setStateProvider` so Field reads authoritative form state instead of
  * self-computing it from the DOM. Each member is an optional signal-like
  * accessor; only the states the adapter owns need to be provided — the rest
@@ -86,15 +94,19 @@ declare class RdxFieldError {
  * `() => boolean` accessors keeps Field framework-agnostic (no dependency on
  * `@angular/forms/signals`).
  *
- * See ADR 0004 and `signal-forms-readiness.md` (prep #4).
+ * See ADR 0004, ADR 0021, and `signal-forms-readiness.md` (prep #4).
  */
 interface RdxFieldState {
+    /** Field name inferred by an adapter. An explicit `rdxFieldRoot[name]` always wins. */
+    name?: () => string | undefined;
     /**
      * The control's **actual** invalidity (ungated). The Field decides *when* to display it from its
      * `validationMode` (e.g. only after blur) — the adapter just reports the real state. A non-empty
      * `errors()` also counts as invalid.
      */
     invalid?: () => boolean;
+    /** Whether async validation is pending. Pending validity remains neutral, never falsely valid. */
+    pending?: () => boolean;
     disabled?: () => boolean;
     required?: () => boolean;
     dirty?: () => boolean;
@@ -108,7 +120,7 @@ interface RdxFieldState {
      * any enclosing Form's server messages. Uses `core`'s framework-free shim type so the seam stays free of
      * `@angular/forms/signals` (ADR 0004 amendment).
      */
-    errors?: () => RdxValidationError[];
+    errors?: () => readonly RdxValidationError[];
 }
 interface RdxFieldRootContext {
     controlId: Signal<string>;
@@ -116,6 +128,8 @@ interface RdxFieldRootContext {
     descriptionIds: Signal<string[]>;
     errorIds: Signal<string[]>;
     messages: Signal<string[]>;
+    /** Whether the currently displayed client errors contain this validation kind. */
+    matchesError: (kind: string) => boolean;
     notifyEdited: () => void;
     /** Tri-state *displayed* validity (`true` valid / `false` invalid / `null` neutral), gated by the
      * field's `validationMode`. The source for `data-valid` / `data-invalid` on the field and its controls. */
@@ -229,6 +243,8 @@ declare class RdxFieldRoot {
     private readonly stateProvider;
     /** Whether an external adapter currently owns field state. */
     readonly hasStateProvider: Signal<boolean>;
+    /** Explicit field name wins; an adapter may infer one from its form-control binding. */
+    readonly effectiveName: Signal<string | undefined>;
     /** Error content from a registered state provider (e.g. a Signal Forms adapter). */
     private readonly providerErrors;
     /** **Client** validation errors routed by a form-level provider (`rdxSignalForm`) — gated by `validationMode`. */
@@ -246,6 +262,8 @@ declare class RdxFieldRoot {
      * field state), so deduping renders it once while still surfacing distinct messages from each source.
      */
     readonly messages: Signal<string[]>;
+    /** Whether a client validation error of `kind` is currently revealed by the field. */
+    matchesError(kind: string): boolean;
     /** Effective validation-display mode: this field's override → the enclosing Form's → the default. */
     readonly effectiveValidationMode: Signal<RdxValidationMode>;
     /** Whether client-side validity is revealed yet, per {@link effectiveValidationMode} + interaction. */
@@ -276,6 +294,7 @@ declare class RdxFieldRoot {
      * the provider/input `invalid`.
      */
     readonly actualInvalidState: Signal<boolean>;
+    readonly pendingState: Signal<boolean>;
     readonly disabledState: Signal<boolean>;
     readonly requiredState: Signal<boolean>;
     readonly dirtyState: Signal<boolean>;
@@ -310,8 +329,8 @@ declare class RdxFieldRoot {
     clearStateProvider(provider: RdxFieldState | null, previous: RdxFieldState | null): void;
     /**
      * Prefer the registered provider's value for `key` when it exposes one,
-     * otherwise fall back to the root inputs / DOM-derived signals. `errors` (content) and `valid`
-     * (tri-state `boolean | null`) are resolved separately, so they're excluded from this boolean key.
+     * otherwise fall back to the root inputs / DOM-derived signals. `name` and `errors` are resolved
+     * separately, so they're excluded from this boolean key.
      */
     private resolve;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxFieldRoot, never>;
@@ -369,5 +388,33 @@ declare class RdxFieldLabel {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxFieldLabel, "[rdxFieldLabel]", ["rdxFieldLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { RdxFieldControl, RdxFieldDescription, RdxFieldError, RdxFieldItem, RdxFieldLabel, RdxFieldRoot, injectFieldRootContext, provideFieldRootContext };
+/**
+ * Bridges a same-host Reactive Forms or template-driven `NgControl` into an enclosing `rdxFieldRoot`.
+ * Place it next to `formControl`, `formControlName`, or `ngModel`; Angular remains the source of value,
+ * validation, and interaction state while Field owns when that state is displayed.
+ *
+ * ```html
+ * <div rdxFieldRoot>
+ *   <label rdxFieldLabel>Email</label>
+ *   <input formControlName="email" rdxFieldControl rdxNgControlField />
+ *   <p match="required" rdxFieldError>Email is required.</p>
+ * </div>
+ * ```
+ *
+ * The adapter also infers the Field name from `formControlName` / `ngModel` for Form-level server-error
+ * routing. An explicit `name` on `rdxFieldRoot` takes precedence (useful for nested or remapped keys).
+ *
+ * @group Components
+ */
+declare class RdxNgControlField {
+    private readonly ngControlState;
+    private readonly fieldContext;
+    /** Normalized Angular validation errors (`{ kind, message? }[]`). */
+    readonly validationErrors: _angular_core.Signal<readonly _radix_ng_primitives_core.RdxValidationError[]>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNgControlField, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNgControlField, "[formControl][rdxNgControlField], [formControlName][rdxNgControlField], [ngModel][rdxNgControlField]", ["rdxNgControlField"], {}, {}, never, never, true, never>;
+}
+
+export { RdxFieldControl, RdxFieldDescription, RdxFieldError, RdxFieldItem, RdxFieldLabel, RdxFieldRoot, RdxNgControlField, injectFieldRootContext, provideFieldRootContext };
 export type { RdxFieldRootContext, RdxFieldState };

package/types/radix-ng-primitives-form.d.ts

@@ -49,6 +49,13 @@ interface RdxFormState {
     dirty?: () => boolean;
     touched?: () => boolean;
     submitting?: () => boolean;
+    /**
+     * Optional Angular-owned submission lifecycle. Returning `undefined` keeps the Form's Base UI-style
+     * synchronous submit path; returning a Promise delegates this submit to the adapter. Signal Forms
+     * uses this only when its opt-in `rdxSignalSubmit` input is present, and calls Angular's public
+     * `submit()` API so validation, touched state, concurrency, and submission errors stay Angular-owned.
+     */
+    submit?: () => Promise<boolean> | undefined;
     /**
      * Per-name **client** validation errors (e.g. `rdxSignalForm`'s Signal Forms name-routing). Surfaced
      * through the Form's `clientErrorsFor` channel and gated by `validationMode` like any client validity.
@@ -190,6 +197,8 @@ declare class RdxFormRoot {
      */
     clearStateProvider(provider: RdxFormState | null, previous: RdxFormState | null): void;
     onSubmit(event: SubmitEvent): void;
+    private finishDelegatedSubmit;
+    private focusFirstInvalidField;
     onReset(): void;
     private readonly resetTimers;
     constructor();

package/types/radix-ng-primitives-input.d.ts

@@ -24,6 +24,7 @@ interface RdxInputValueChangeEvent {
 declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | undefined> {
     private readonly element;
     private readonly fieldRootContext;
+    private readonly ngControlState;
     private initialValue;
     private defaultValueApplied;
     private readonly filledValue;
@@ -78,6 +79,8 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
      * @group Props
      */
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether async validation is pending. Pending inputs publish neither valid nor invalid state. */
+    readonly pending: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Whether the input has been touched. A two-way model: the input sets it on
      * blur (emitting `touchedChange`, which Signal Forms' `[formField]` listens
@@ -133,8 +136,11 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
      * @group Emits
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
-    /** The input's own binary invalidity (its `invalid` input or a non-empty `errors` list). */
+    /** Validation errors from the input and a same-host Reactive/template-driven form control. */
+    readonly validationErrors: _angular_core.Signal<readonly RdxValidationError[]>;
+    /** The input's binary invalidity, including a same-host Reactive/template-driven form control. */
     private readonly ownInvalid;
+    private readonly pendingState;
     /**
      * Tri-state *displayed* validity: inside a `rdxFieldRoot` the field's gated `validState` is the single
      * source (so a field whose `validationMode` defers display (e.g. `onBlur`) keeps the input neutral until revealed), otherwise
@@ -153,11 +159,13 @@ declare class RdxInputDirective implements RdxFormValueControl<RdxInputValue | u
     onFocus(): void;
     onBlur(): void;
     onInput(event: Event): void;
+    /** Reset the interaction baseline; Angular Signal Forms calls this from `FieldState.reset()`. */
+    reset(): void;
     syncFieldState(): void;
     private writeValue;
     protected readonly dataAttr: (value: boolean) => "" | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxInputDirective, "input[rdxInput]", ["rdxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "onValueChange": "onValueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxInputDirective, "input[rdxInput]", ["rdxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "onValueChange": "onValueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { RdxInputDirective };

package/types/radix-ng-primitives-menu.d.ts

@@ -11,6 +11,29 @@ import * as i1$1 from '@radix-ng/primitives/composite';
 import * as i1$2 from '@radix-ng/primitives/portal';
 import { RdxOutsidePressDomEvent } from '@radix-ng/primitives/dismissable-layer';
 
+/**
+ * Submenu "safe polygon" — a faithful port of Floating UI's `safePolygon` algorithm
+ * (https://floating-ui.com/docs/useHover#safepolygon), adapted to this library.
+ *
+ * While a submenu is open by hover, the parent submenu owns the decision to close itself: a
+ * document-level `mousemove` handler keeps it open as long as the cursor is heading toward the
+ * popup inside a safe quadrilateral (built from the cursor's exit point and the popup rect), and
+ * closes it once the cursor leaves that area. Combined with the pointer-events "tunnel" below
+ * (`applyPointerTunnel`), siblings cannot steal the open submenu during a diagonal traversal.
+ *
+ * Differences from the upstream implementation:
+ * - `elements.domReference` / `elements.floating` → `reference` / `floating` (plain elements).
+ * - `placement.split('-')[0]` → the `side` option (read live from the popup's `data-side`).
+ * - the Floating UI tree (`tree` / `nodeId`) → the `hasOpenChild` callback, backed by the
+ *   module-level open-submenu registry.
+ *
+ * This deliberately does NOT reuse the core `useGraceArea` composable (tooltip / navigation-menu /
+ * popover): that one is a simpler convex-hull grace area with no velocity gating, trough handling, or
+ * pointer-events tunnel — none of which it needs, but all of which the submenu does to match Base UI
+ * and to stop sibling triggers from stealing the open submenu mid-traversal.
+ */
+type MenuSide = 'top' | 'bottom' | 'left' | 'right';
+
 type RdxMenuTransitionStatus = 'starting' | 'ending' | undefined;
 /**
  * Why an open/close happened instantly (no transition). Mirrors Base UI's menu `data-instant`:
@@ -81,6 +104,12 @@ interface RdxMenuRootContext {
     trigger: Signal<HTMLElement | undefined>;
     /** The popup element, once mounted. Used by submenu safe-polygon geometry. */
     popupElement: Signal<HTMLElement | undefined>;
+    /**
+     * The popup's **physical** placed side (`top`/`bottom`/`left`/`right`) for safe-polygon geometry —
+     * never the popup's `data-side`, which is the logical `inline-start`/`inline-end` echo when a logical
+     * side was requested and which the geometry cannot interpret.
+     */
+    popupPhysicalSide: Signal<MenuSide | undefined>;
     beforeContentFocusGuard: Signal<HTMLElement | null>;
     transitionStatus: Signal<RdxMenuTransitionStatus>;
     close: (reason?: RdxMenuOpenChangeReason, event?: Event) => void;
@@ -92,7 +121,7 @@ interface RdxMenuRootContext {
     /** Open the menu without moving focus into the popup (used for menubar hover-switching). */
     showWithoutAutoFocus: (reason?: RdxMenuOpenChangeReason, event?: Event) => void;
     registerTrigger: (el: HTMLElement) => () => void;
-    registerPopup: (el: HTMLElement) => () => void;
+    registerPopup: (el: HTMLElement, physicalSide?: Signal<MenuSide | undefined>) => () => void;
     setBeforeContentFocusGuard: (element: HTMLElement | null) => void;
     registerTransitionElement: (element: HTMLElement) => () => void;
     registerPopupArrowNavigationHandler: (handler: (offset: 1 | -1) => boolean) => () => void;
@@ -195,6 +224,9 @@ declare class RdxMenuRoot {
     readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
     readonly trigger: _angular_core.WritableSignal<HTMLElement | undefined>;
     readonly popupElement: _angular_core.WritableSignal<HTMLElement | undefined>;
+    private readonly popupPhysicalSideSource;
+    /** Physical placed side read through the popup's own signal (undefined until the popup is placed). */
+    readonly popupPhysicalSide: Signal<MenuSide | undefined>;
     readonly beforeContentFocusGuard: _angular_core.WritableSignal<HTMLElement | null>;
     readonly transitionStatus: Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
     readonly activeIndex: _angular_core.WritableSignal<number | null>;
@@ -239,7 +271,7 @@ declare class RdxMenuRoot {
      */
     closeEntireMenu(reason?: RdxMenuOpenChangeReason, event?: Event): void;
     registerTrigger(el: HTMLElement): () => void;
-    registerPopup(el: HTMLElement): () => void;
+    registerPopup(el: HTMLElement, physicalSide?: Signal<MenuSide | undefined>): () => void;
     setBeforeContentFocusGuard(element: HTMLElement | null): void;
     registerTransitionElement(element: HTMLElement): () => void;
     registerPopupArrowNavigationHandler(handler: (offset: 1 | -1) => boolean): () => void;
@@ -359,6 +391,15 @@ declare class RdxMenuSubTrigger {
     protected onArrowLeft(event: Event): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerLeave(): void;
+    /**
+     * Backup cancellation for a `pointerleave` that Chrome can drop during a fast pointer sweep across
+     * adjacent triggers, which would otherwise leave the delayed hover-open armed and open a stale
+     * submenu for a trigger the pointer has already left (stranding the parent at `pointer-events: none`).
+     * `pointerout` bubbles, so it also fires while crossing between the trigger's own descendants — those
+     * (where `relatedTarget` is still inside the trigger) must not cancel the pending open. Base UI parity
+     * (`guardStaleOpen`); safe on this single, hover-driven trigger.
+     */
+    protected onPointerOut(event: PointerEvent): void;
     protected clearHighlight(): void;
     private closeSiblingSubmenus;
     private clearSiblingHighlights;
@@ -433,7 +474,7 @@ declare class RdxMenuPopup {
     private search;
     private searchTimer;
     protected readonly align: _angular_core.Signal<"center" | "end" | "start" | undefined>;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1.SideOrLogical | undefined>;
     /**
      * Event handler called when the escape key is pressed. Can be prevented.
      */
@@ -520,7 +561,7 @@ declare class RdxMenuBackdrop {
 declare class RdxMenuArrow {
     protected readonly rootContext: _radix_ng_primitives_menu.RdxMenuRootContext;
     private readonly wrapper;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1.SideOrLogical | undefined>;
     protected readonly align: _angular_core.Signal<"center" | "end" | "start" | undefined>;
     protected readonly uncentered: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenuArrow, never>;

package/types/radix-ng-primitives-navigation-menu.d.ts

@@ -383,7 +383,7 @@ declare class RdxNavigationMenuPopup {
     private readonly registration;
     private readonly wrapper;
     private readonly elementRef;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
     protected readonly id: _angular_core.Signal<string>;
     /**
@@ -420,7 +420,7 @@ declare class RdxNavigationMenuPopup {
 declare class RdxNavigationMenuArrow {
     protected readonly rootContext: _radix_ng_primitives_navigation_menu.RdxNavigationMenuRootContext;
     private readonly wrapper;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
     protected readonly uncentered: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuArrow, never>;

package/types/radix-ng-primitives-popover.d.ts

@@ -304,7 +304,7 @@ declare class RdxPopoverPopup {
     private readonly focusScope;
     private readonly wrapper;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     /** Event handler called when the escape key is down. Can be prevented. */
     readonly escapeKeyDown: _angular_core.OutputEmitterRef<KeyboardEvent>;
     /** Event handler called when a pointerdown event happens outside of the popup. Can be prevented. */
@@ -328,7 +328,7 @@ declare class RdxPopoverPopup {
 declare class RdxPopoverArrow {
     protected readonly rootContext: _radix_ng_primitives_popover.RdxPopoverRootContext;
     private readonly wrapper;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
     protected readonly uncentered: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverArrow, never>;

package/types/radix-ng-primitives-popper.d.ts

@@ -1,8 +1,9 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, Signal, Provider, Type, InjectionToken } from '@angular/core';
 import { ReferenceElement, Placement, Middleware, VirtualElement } from '@floating-ui/dom';
+import * as _radix_ng_primitives_popper from '@radix-ng/primitives/popper';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { NumberInput, BooleanInput } from '@radix-ng/primitives/core';
+import { Direction, NumberInput, BooleanInput } from '@radix-ng/primitives/core';
 
 declare class RdxPopperAnchor {
     readonly elementRef: ElementRef<HTMLElement>;
@@ -25,7 +26,8 @@ declare class RdxPopperContent {
      * simply no-op.
      */
     protected readonly popperContentWrapper: {
-        placedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+        placedSide: _angular_core.Signal<_radix_ng_primitives_popper.SideOrLogical | undefined>;
+        physicalPlacedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
         placedAlign: _angular_core.Signal<"start" | "center" | "end" | undefined>;
         arrowX: _angular_core.Signal<number | undefined>;
         arrowY: _angular_core.Signal<number | undefined>;
@@ -48,6 +50,23 @@ declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
 declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
 type Side = (typeof SIDE_OPTIONS)[number];
 type Align = (typeof ALIGN_OPTIONS)[number];
+/** Logical (writing-direction-relative) inline sides, resolved to a physical {@link Side} by text direction. */
+type LogicalSide = 'inline-start' | 'inline-end';
+/** A physical {@link Side} or a {@link LogicalSide} — accepted by the positioner's `side` input. */
+type SideOrLogical = Side | LogicalSide;
+/**
+ * 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.
+ */
+declare function resolvePhysicalSide(side: SideOrLogical, isRtl: boolean): 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.
+ */
+declare function toLogicalSide(requestedSide: SideOrLogical, renderedSide: Side, isRtl: boolean): SideOrLogical;
 /**
  * How the popper avoids collisions with the boundary edges (Base UI `collisionAvoidance`).
  *
@@ -72,11 +91,12 @@ type ResolvedCollisionAvoidance = Required<RdxCollisionAvoidance>;
 /**
  * Function form of `sideOffset` / `alignOffset` (Base UI `OffsetFunction`). Receives the resolved
  * placement and the measured anchor / positioner dimensions, and returns the offset in pixels — e.g.
- * `({ anchor }) => anchor.width` to offset by the trigger's own width. `side` is the physical side the
- * popup is placed against.
+ * `({ anchor }) => anchor.width` to offset by the trigger's own width. `side` is the side the popup is
+ * placed against — reported logically (`inline-start` / `inline-end`) when a logical side was
+ * requested, otherwise physical (Base UI parity).
  */
 type OffsetFunction = (data: {
-    side: Side;
+    side: SideOrLogical;
     align: Align;
     anchor: {
         width: number;
@@ -96,7 +116,8 @@ declare function getSideAndAlignFromPlacement(placement: Placement): readonly ["
 
 type RdxPopperAnchorElement = Element | ElementRef<Element> | VirtualElement | (() => Element | VirtualElement | null) | null | undefined;
 declare const context: () => {
-    placedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    placedSide: Signal<SideOrLogical | undefined>;
+    physicalPlacedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
     placedAlign: Signal<"start" | "center" | "end" | undefined>;
     arrowX: Signal<number | undefined>;
     arrowY: Signal<number | undefined>;
@@ -106,7 +127,8 @@ declare const context: () => {
 };
 type PopperContentWrapperContext = ReturnType<typeof context>;
 declare const injectPopperContentWrapperContext: _radix_ng_primitives_core.InjectContext<{
-    placedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    placedSide: Signal<SideOrLogical | undefined>;
+    physicalPlacedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
     placedAlign: Signal<"start" | "center" | "end" | undefined>;
     arrowX: Signal<number | undefined>;
     arrowY: Signal<number | undefined>;
@@ -115,7 +137,8 @@ declare const injectPopperContentWrapperContext: _radix_ng_primitives_core.Injec
     anchorHidden: Signal<boolean>;
 }>;
 declare const providePopperContentWrapperContext: (useFactory: () => {
-    placedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    placedSide: Signal<SideOrLogical | undefined>;
+    physicalPlacedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
     placedAlign: Signal<"start" | "center" | "end" | undefined>;
     arrowX: Signal<number | undefined>;
     arrowY: Signal<number | undefined>;
@@ -136,8 +159,21 @@ declare 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.
      */
-    readonly side: _angular_core.InputSignal<"top" | "right" | "bottom" | "left">;
+    readonly side: _angular_core.InputSignal<SideOrLogical>;
+    /**
+     * 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`.
+     */
+    readonly dir: _angular_core.InputSignal<Direction | undefined>;
+    private readonly direction;
+    /** The `side` input with any logical inline value resolved to a physical side for the direction. */
+    private readonly resolvedSide;
     /**
      * 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.
@@ -253,9 +289,18 @@ declare class RdxPopperContentWrapper {
         align: Align;
     } | undefined>;
     /**
-     * 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.
+     */
+    readonly physicalPlacedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    /**
+     * 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.
      */
-    readonly placedSide: Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    readonly placedSide: Signal<SideOrLogical | undefined>;
     /**
      * The current alignment of the panel.
      */
@@ -292,7 +337,7 @@ declare class RdxPopperContentWrapper {
     private readonly afterRenderEffect;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopperContentWrapper, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopperContentWrapper, "[rdxPopperContentWrapper]", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "collisionAvoidance": { "alias": "collisionAvoidance"; "required": false; "isSignal": true; }; "collisionBoundary": { "alias": "collisionBoundary"; "required": false; "isSignal": true; }; "collisionPadding": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "updatePositionStrategy": { "alias": "updatePositionStrategy"; "required": false; "isSignal": true; }; }, { "placed": "placed"; }, ["arrow"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopperContentWrapper, "[rdxPopperContentWrapper]", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignOffset": { "alias": "alignOffset"; "required": false; "isSignal": true; }; "arrowPadding": { "alias": "arrowPadding"; "required": false; "isSignal": true; }; "avoidCollisions": { "alias": "avoidCollisions"; "required": false; "isSignal": true; }; "collisionAvoidance": { "alias": "collisionAvoidance"; "required": false; "isSignal": true; }; "collisionBoundary": { "alias": "collisionBoundary"; "required": false; "isSignal": true; }; "collisionPadding": { "alias": "collisionPadding"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "hideWhenDetached": { "alias": "hideWhenDetached"; "required": false; "isSignal": true; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; "isSignal": true; }; "updatePositionStrategy": { "alias": "updatePositionStrategy"; "required": false; "isSignal": true; }; }, { "placed": "placed"; }, ["arrow"], never, true, never>;
 }
 /**
  * Providers a "thin" positioner that `extends RdxPopperContentWrapper` must include. Angular
@@ -351,7 +396,7 @@ declare class RdxPopperArrow {
  * `undefined` falls back to the wrapper's built-in default. Consumer template bindings always win.
  */
 interface RdxPopperContentConfig {
-    side?: Side;
+    side?: SideOrLogical;
     align?: Align;
     sideOffset?: number | OffsetFunction;
     alignOffset?: number | OffsetFunction;
@@ -390,5 +435,5 @@ declare function provideRdxPopperContentConfig(config: RdxPopperContentConfig):
 
 declare const popperImports: (typeof RdxPopperAnchor | typeof RdxPopper | typeof RdxPopperContentWrapper | typeof RdxPopperContent)[];
 
-export { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE, RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, legacyPopperVars, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, provideRdxPopperContentWrapper, transformOrigin };
-export type { Align, OffsetFunction, PopperContentWrapperContext, RdxCollisionAvoidance, RdxPopperAnchorElement, RdxPopperContentConfig, ResolvedCollisionAvoidance, Side };
+export { DROPDOWN_COLLISION_AVOIDANCE, POPUP_COLLISION_AVOIDANCE, RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentConfigToken, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, legacyPopperVars, popperImports, providePopperContentWrapperContext, provideRdxPopperContentConfig, provideRdxPopperContentWrapper, resolvePhysicalSide, toLogicalSide, transformOrigin };
+export type { Align, LogicalSide, OffsetFunction, PopperContentWrapperContext, RdxCollisionAvoidance, RdxPopperAnchorElement, RdxPopperContentConfig, ResolvedCollisionAvoidance, Side, SideOrLogical };

package/types/radix-ng-primitives-preview-card.d.ts

@@ -268,7 +268,7 @@ declare class RdxPreviewCardPopup {
     private readonly registration;
     private readonly wrapper;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     /**
      * Event handler called when the escape key is down. Can be prevented.
      */
@@ -296,7 +296,7 @@ declare class RdxPreviewCardPopup {
 declare class RdxPreviewCardArrow {
     protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
     private readonly wrapper;
-    protected readonly side: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
+    protected readonly side: _angular_core.Signal<i1$1.SideOrLogical | undefined>;
     protected readonly align: _angular_core.Signal<"start" | "center" | "end" | undefined>;
     protected readonly uncentered: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardArrow, never>;