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

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

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/core';
-import { RdxControlValueAccessor, NumberInput, BooleanInput } from '@radix-ng/primitives/core';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { RdxControlValueAccessor, NumberInput, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
 export { clamp } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_slider from '@radix-ng/primitives/slider';
 
@@ -18,6 +18,8 @@ declare function getMidpoint(element: Element): {
     x: number;
     y: number;
 };
+/** Calculates the control-relative percent for an edge-aligned thumb. */
+declare function getInsetThumbPositionPercent(control: Element, thumb: Element, thumbValuePercent: number, vertical: boolean): number | undefined;
 /** Converts an array of values into clamped 0–100 percentages. */
 declare function valueArrayToPercentages(values: readonly number[], min: number, max: number): number[];
 /** Number of decimal places in `num`, handling exponential notation for tiny values. */
@@ -90,6 +92,25 @@ declare const ALL_KEYS: Set<string>;
 declare function areValuesEqual(a: number | number[], b: number | number[]): boolean;
 
 type SliderValue = number | number[];
+type RdxSliderThumbAlignment = 'center' | 'edge' | 'edge-client-only';
+type RdxSliderValueChangeReason = 'input-change' | 'track-press' | 'drag' | 'keyboard' | 'none';
+type RdxSliderValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxSliderValueChangeReason> & {
+    activeThumbIndex: number;
+};
+type RdxSliderValueCommitReason = RdxSliderValueChangeReason;
+interface RdxSliderValueCommitEventDetails {
+    reason: RdxSliderValueCommitReason;
+    event: Event;
+    trigger: HTMLElement | undefined;
+}
+interface RdxSliderValueChangeEvent {
+    value: SliderValue;
+    eventDetails: RdxSliderValueChangeEventDetails;
+}
+interface RdxSliderValueCommitEvent {
+    value: SliderValue;
+    eventDetails: RdxSliderValueCommitEventDetails;
+}
 /** Minimal shape a thumb registers with the root, used for hit-testing and focus. */
 interface RdxSliderThumbRef {
     /** The thumb wrapper element. */
@@ -109,6 +130,7 @@ interface RdxSliderThumbRef {
 declare class RdxSliderRoot {
     /** @ignore */
     protected readonly cva: RdxControlValueAccessor<SliderValue>;
+    private readonly document;
     readonly id: _angular_core.InputSignal<string>;
     /**
      * The minimum value of the slider.
@@ -144,12 +166,20 @@ declare class RdxSliderRoot {
      * The reading direction. Mirrors the horizontal axis when set to `'rtl'`.
      * @default 'ltr'
      */
-    readonly dir: _angular_core.InputSignal<"ltr" | "rtl">;
+    readonly dirInput: _angular_core.InputSignal<"ltr" | "rtl" | undefined>;
+    readonly dir: Signal<_radix_ng_primitives_core.Direction>;
     /**
      * How thumbs behave when they meet in a range slider.
      * @default 'push'
      */
     readonly thumbCollisionBehavior: _angular_core.InputSignal<ThumbCollisionBehavior>;
+    /**
+     * How the thumbs align with the control when the value is at min/max.
+     * `center` aligns the thumb center to the control edge; `edge`/`edge-client-only`
+     * inset thumbs so their outer edge aligns to the control edge.
+     * @default 'center'
+     */
+    readonly thumbAlignment: _angular_core.InputSignal<RdxSliderThumbAlignment>;
     /** Options forwarded to `Intl.NumberFormat` when displaying and announcing values. */
     readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
     /** Locale used for value formatting. */
@@ -169,9 +199,9 @@ declare class RdxSliderRoot {
     readonly value: _angular_core.ModelSignal<SliderValue | undefined>;
     readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
     /** Emitted when the value changes (during interaction). */
-    readonly onValueChange: _angular_core.OutputEmitterRef<SliderValue>;
+    readonly onValueChange: _angular_core.OutputEmitterRef<RdxSliderValueChangeEvent>;
     /** Emitted when interaction ends, with the final value — useful for committing to a backend. */
-    readonly onValueCommitted: _angular_core.OutputEmitterRef<SliderValue>;
+    readonly onValueCommitted: _angular_core.OutputEmitterRef<RdxSliderValueCommitEvent>;
     /** @ignore */
     readonly controlRef: _angular_core.WritableSignal<HTMLElement | null>;
     /** @ignore Active thumb index (-1 when none). */
@@ -180,6 +210,8 @@ declare class RdxSliderRoot {
     readonly lastUsedThumbIndex: _angular_core.WritableSignal<number>;
     /** @ignore Whether a pointer drag is in progress. */
     readonly dragging: _angular_core.WritableSignal<boolean>;
+    /** @ignore Edge-aligned thumb/indicator positions, in control-relative percentages. */
+    readonly indicatorPosition: _angular_core.WritableSignal<[number | undefined, number | undefined]>;
     /** @ignore Pointer-drag scratch state (not reactive). */
     pressedThumbIndex: number;
     /** @ignore */
@@ -191,7 +223,13 @@ declare class RdxSliderRoot {
     /** @ignore */
     lastChangeReason: string;
     /** @ignore */
+    lastChangeEvent: Event | undefined;
+    /** @ignore */
     readonly isDisabled: Signal<boolean>;
+    /** @ignore */
+    readonly inset: Signal<boolean>;
+    /** @ignore */
+    readonly renderBeforeHydration: Signal<boolean>;
     /** @ignore The current value source (controlled value, else default, else min). */
     private readonly currentRaw;
     /** Whether the slider has multiple thumbs (the value is an array). */
@@ -212,6 +250,8 @@ declare class RdxSliderRoot {
     /** @ignore */
     focusThumb(index: number): void;
     /** @ignore */
+    setIndicatorPosition(index: number, position: number | undefined): void;
+    /** @ignore */
     formatValue(value: number): string;
     /** @ignore Output value matching the original value shape (number vs array). */
     private outputValue;
@@ -220,19 +260,21 @@ declare class RdxSliderRoot {
      * Applies a new full set of values, preserving the single/range value shape.
      * Returns `false` when the value did not change.
      */
-    setValue(nextValues: number[], reason: string): boolean;
+    setValue(nextValues: number[], reason: RdxSliderValueChangeReason, event?: Event, activeThumbIndex?: number): boolean;
     /** @ignore Keyboard / native input path: clamps to neighbours, commits immediately. */
-    handleInputChange(valueInput: number, index: number, reason?: string): void;
+    handleInputChange(valueInput: number, index: number, reason?: RdxSliderValueChangeReason, event?: Event): void;
     /** @ignore Emits the committed value at the end of a pointer drag. */
-    commitValue(): void;
+    commitValue(event?: Event, reason?: RdxSliderValueCommitReason): void;
     /** @ignore */
     markAsTouched(): void;
     /** @ignore */
     setDragging(dragging: boolean): void;
     /** @ignore */
     resetPressedThumb(): void;
+    /** @ignore */
+    getOwnerWindow(): Window | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSliderRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSliderRoot, "div[rdxSliderRoot]", ["rdxSliderRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "largeStep": { "alias": "largeStep"; "required": false; "isSignal": true; }; "minStepsBetweenValues": { "alias": "minStepsBetweenValues"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "thumbCollisionBehavior": { "alias": "thumbCollisionBehavior"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; "onValueCommitted": "onValueCommitted"; }, never, never, true, [{ directive: typeof i1.RdxControlValueAccessor; inputs: { "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSliderRoot, "div[rdxSliderRoot]", ["rdxSliderRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "largeStep": { "alias": "largeStep"; "required": false; "isSignal": true; }; "minStepsBetweenValues": { "alias": "minStepsBetweenValues"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "thumbCollisionBehavior": { "alias": "thumbCollisionBehavior"; "required": false; "isSignal": true; }; "thumbAlignment": { "alias": "thumbAlignment"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; "onValueCommitted": "onValueCommitted"; }, never, never, true, [{ directive: typeof _radix_ng_primitives_core.RdxControlValueAccessor; inputs: { "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**
@@ -248,14 +290,22 @@ declare class RdxSliderControl {
     private styles;
     private moveCount;
     private currentInteractionValue;
+    private touchId;
+    private insetThumbOffset;
+    private readonly onTouchStart;
     private readonly onMove;
     private readonly onUp;
     private readonly onCancel;
+    private readonly onTouchMove;
+    private readonly onTouchEnd;
     constructor();
     protected onPointerDown(event: PointerEvent): void;
+    private handleTouchStart;
     private handleMove;
     private handleUp;
     private stopListening;
+    private getFingerCoords;
+    private isTargetDisabledThumb;
     private startPressing;
     private setValueFromPointer;
     /** Projects a pointer position onto the track and resolves it to a value (+ collision). */
@@ -310,8 +360,10 @@ declare class RdxSliderThumb implements RdxSliderThumbRef {
     /** The value represented by this thumb. */
     readonly value: _angular_core.Signal<number | undefined>;
     private readonly percent;
+    private readonly insetPosition;
     protected readonly thumbStyle: _angular_core.Signal<Record<string, string | number>>;
     constructor();
+    private updateInsetPosition;
     protected onPointerDown(event: PointerEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSliderThumb, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSliderThumb, "div[rdxSliderThumb]", ["rdxSliderThumb"], { "indexInput": { "alias": "index"; "required": false; "isSignal": true; }; "thumbDisabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -364,7 +416,7 @@ declare class RdxSliderValue {
  *
  * @see https://base-ui.com/react/components/slider
  */
-declare const injectSliderRootContext: i1.InjectContext<RdxSliderRoot>;
+declare const injectSliderRootContext: _radix_ng_primitives_core.InjectContext<RdxSliderRoot>;
 declare const provideSliderRootContext: (useFactory: () => RdxSliderRoot) => _angular_core.Provider;
 
 declare class RdxSliderModule {
@@ -373,5 +425,5 @@ declare class RdxSliderModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxSliderModule>;
 }
 
-export { ALL_KEYS, ARROW_KEYS, COMPOSITE_KEYS, RdxSliderControl, RdxSliderIndicator, RdxSliderModule, RdxSliderRoot, RdxSliderThumb, RdxSliderThumbInput, RdxSliderTrack, RdxSliderValue, areValuesEqual, asc, formatNumber, getControlOffset, getDecimalPrecision, getDefaultAriaValueText, getMidpoint, getNewValue, getPushedThumbValues, getSliderValue, injectSliderRootContext, provideSliderRootContext, replaceArrayItemAtIndex, resolveThumbCollision, roundValueToStep, validateMinimumDistance, valueArrayToPercentages, valueToPercent };
-export type { RdxSliderThumbRef, ResolveThumbCollisionParams, ResolveThumbCollisionResult, SliderOrientation, SliderValue, ThumbCollisionBehavior };
+export { ALL_KEYS, ARROW_KEYS, COMPOSITE_KEYS, RdxSliderControl, RdxSliderIndicator, RdxSliderModule, RdxSliderRoot, RdxSliderThumb, RdxSliderThumbInput, RdxSliderTrack, RdxSliderValue, areValuesEqual, asc, formatNumber, getControlOffset, getDecimalPrecision, getDefaultAriaValueText, getInsetThumbPositionPercent, getMidpoint, getNewValue, getPushedThumbValues, getSliderValue, injectSliderRootContext, provideSliderRootContext, replaceArrayItemAtIndex, resolveThumbCollision, roundValueToStep, validateMinimumDistance, valueArrayToPercentages, valueToPercent };
+export type { RdxSliderThumbAlignment, RdxSliderThumbRef, RdxSliderValueChangeEvent, RdxSliderValueChangeEventDetails, RdxSliderValueChangeReason, RdxSliderValueCommitEvent, RdxSliderValueCommitEventDetails, RdxSliderValueCommitReason, ResolveThumbCollisionParams, ResolveThumbCollisionResult, SliderOrientation, SliderValue, ThumbCollisionBehavior };

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

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { InputSignalWithTransform, Signal, ModelSignal, InputSignal, WritableSignal, InjectionToken } from '@angular/core';
-import { NumberInput, BooleanInput, Direction } from '@radix-ng/primitives/core';
+import { NumberInput, BooleanInput, Direction, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_stepper from '@radix-ng/primitives/stepper';
 import * as i1 from '@radix-ng/primitives/separator';
 
@@ -63,23 +63,31 @@ declare class RdxStepperIndicatorDirective {
 interface StepperRootContext {
     value: ModelSignal<number | undefined>;
     orientation: InputSignal<'vertical' | 'horizontal'>;
-    dir: InputSignal<Direction>;
+    dir: Signal<Direction>;
     linear: InputSignalWithTransform<boolean, BooleanInput>;
     totalStepperItems: WritableSignal<HTMLElement[]>;
+    goToStep(step: number, event?: Event, reason?: string): void;
 }
 declare const STEPPER_ROOT_CONTEXT: InjectionToken<StepperRootContext>;
 declare function injectStepperRootContext(): StepperRootContext;
 
+type RdxStepperValueChangeReason = 'trigger-press' | 'keyboard' | 'none';
+type RdxStepperValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxStepperValueChangeReason>;
+interface RdxStepperValueChangeEvent {
+    value: number;
+    eventDetails: RdxStepperValueChangeEventDetails;
+}
 declare class RdxStepperRootDirective implements StepperRootContext {
     private readonly liveAnnouncer;
     readonly defaultValue: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
     readonly value: _angular_core.ModelSignal<number | undefined>;
     readonly linear: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    readonly dir: _angular_core.InputSignal<Direction>;
+    readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
+    readonly dir: _angular_core.Signal<Direction>;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** @ignore */
     readonly totalStepperItemsArray: _angular_core.Signal<HTMLElement[]>;
-    readonly onValueChange: _angular_core.OutputEmitterRef<number>;
+    readonly onValueChange: _angular_core.OutputEmitterRef<RdxStepperValueChangeEvent>;
     /** @ignore */
     readonly isFirstStep: _angular_core.Signal<boolean>;
     /** @ignore */
@@ -95,9 +103,9 @@ declare class RdxStepperRootDirective implements StepperRootContext {
     private readonly nextStepperItem;
     private readonly prevStepperItem;
     constructor();
-    goToStep(step: number): void;
+    goToStep(step: number, event?: Event, reason?: RdxStepperValueChangeReason): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxStepperRootDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxStepperRootDirective, "[rdxStepperRoot]", ["rdxStepperRoot"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxStepperRootDirective, "[rdxStepperRoot]", ["rdxStepperRoot"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
 }
 
 declare class RdxStepperTriggerDirective {
@@ -119,4 +127,4 @@ declare class RdxStepperModule {
 }
 
 export { RdxStepperDescriptionDirective, RdxStepperIndicatorDirective, RdxStepperItemDirective, RdxStepperModule, RdxStepperRootDirective, RdxStepperSeparatorDirective, RdxStepperTitleDirective, RdxStepperTriggerDirective, STEPPER_ROOT_CONTEXT, injectStepperRootContext };
-export type { StepperRootContext, StepperState };
+export type { RdxStepperValueChangeEvent, RdxStepperValueChangeEventDetails, RdxStepperValueChangeReason, StepperRootContext, StepperState };

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

@@ -2,7 +2,7 @@ import * as _radix_ng_primitives_switch from '@radix-ng/primitives/switch';
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/core';
-import { RdxFormCheckboxControl, RdxControlValueAccessor, BooleanInput } from '@radix-ng/primitives/core';
+import { RdxCancelableChangeEventDetails, RdxFormCheckboxControl, RdxControlValueAccessor, BooleanInput } from '@radix-ng/primitives/core';
 
 /**
  * The hidden native checkbox that mirrors the switch state for form submission and screen readers.
@@ -15,6 +15,12 @@ declare class RdxSwitchInput {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchInput, "input[rdxSwitchInput]", ["rdxSwitchInput"], {}, {}, never, never, true, never>;
 }
 
+type RdxSwitchCheckedChangeReason = 'trigger-press' | 'none';
+type RdxSwitchCheckedChangeEventDetails = RdxCancelableChangeEventDetails<RdxSwitchCheckedChangeReason>;
+interface RdxSwitchCheckedChangeEvent {
+    checked: boolean;
+    eventDetails: RdxSwitchCheckedChangeEventDetails;
+}
 /**
  * A control that toggles between on and off.
  *
@@ -68,13 +74,13 @@ declare class RdxSwitchRoot implements RdxFormCheckboxControl {
     readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Event handler called when the checked state of the switch changes. */
-    readonly onCheckedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly onCheckedChange: _angular_core.OutputEmitterRef<RdxSwitchCheckedChangeEvent>;
     /** @ignore */
     readonly checkedState: _angular_core.Signal<boolean>;
     /** @ignore */
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     /** @ignore Toggles the checked state unless disabled or read-only. */
-    toggle(): void;
+    toggle(event?: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxSwitchRoot, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxSwitchRoot, "button[rdxSwitchRoot]", ["rdxSwitchRoot"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "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; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "submitValue": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "onCheckedChange": "onCheckedChange"; }, never, never, true, [{ directive: typeof i1.RdxControlValueAccessor; inputs: { "value": "checked"; "disabled": "disabled"; }; outputs: {}; }]>;
 }
@@ -118,4 +124,4 @@ declare class RdxSwitchModule {
 }
 
 export { RdxSwitchInput, RdxSwitchModule, RdxSwitchRoot, RdxSwitchThumb, injectSwitchContext, provideSwitchContext, switchImports };
-export type { RdxSwitchContext };
+export type { RdxSwitchCheckedChangeEvent, RdxSwitchCheckedChangeEventDetails, RdxSwitchCheckedChangeReason, RdxSwitchContext };

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

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/presence';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
+import { DataOrientation, RdxCancelableChangeEventDetails, BooleanInput } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_tabs from '@radix-ng/primitives/tabs';
 import * as i1$1 from '@radix-ng/primitives/roving-focus';
 
@@ -28,6 +28,12 @@ type RdxTabsActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
 /** A value that identifies a tab / panel pair. */
 type RdxTabsValue = string | number | null;
 
+type RdxTabsValueChangeReason = 'trigger-press' | 'keyboard' | 'focus' | 'none';
+type RdxTabsValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxTabsValueChangeReason>;
+interface RdxTabsValueChangeEvent {
+    value: RdxTabsValue;
+    eventDetails: RdxTabsValueChangeEventDetails;
+}
 /**
  * Groups the tabs and the corresponding panels.
  *
@@ -54,7 +60,7 @@ declare class RdxTabsRoot {
     /**
      * Event emitted when the selected tab changes.
      */
-    readonly onValueChange: _angular_core.OutputEmitterRef<RdxTabsValue>;
+    readonly onValueChange: _angular_core.OutputEmitterRef<RdxTabsValueChangeEvent>;
     /** @ignore Set by `[rdxTabsList]`. */
     readonly activateOnFocus: _angular_core.WritableSignal<boolean>;
     /** @ignore Set by `[rdxTabsList]`. */
@@ -63,7 +69,7 @@ declare class RdxTabsRoot {
     readonly activationDirection: _angular_core.WritableSignal<RdxTabsActivationDirection>;
     constructor();
     /** @ignore */
-    setValue(value: RdxTabsValue): void;
+    setValue(value: RdxTabsValue, event?: Event, reason?: RdxTabsValueChangeReason): void;
     private computeDirection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsRoot, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsRoot, "[rdxTabsRoot]", ["rdxTabsRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
@@ -124,7 +130,7 @@ declare class RdxTabsTab {
     /** @ignore */
     protected onKeyDown(event: KeyboardEvent): void;
     /** @ignore */
-    protected onFocus(): void;
+    protected onFocus(event: FocusEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsTab, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsTab, "[rdxTabsTab]", ["rdxTabsTab"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: { "allowShiftKey": "allowShiftKey"; }; outputs: {}; }]>;
 }
@@ -227,7 +233,7 @@ interface RdxTabsRootContext {
     /** The `[rdxTabsList]` host element, used to resolve tab order and indicator geometry. */
     readonly tabListElement: Signal<HTMLElement | null>;
     /** Select a tab by value. No-op when the value is unchanged. */
-    setValue(value: RdxTabsValue): void;
+    setValue(value: RdxTabsValue, event?: Event, reason?: string): void;
     /** Mirror the list's `activateOnFocus` input onto the root context. */
     setActivateOnFocus(value: boolean): void;
     /** Register the list host element. */
@@ -244,4 +250,4 @@ declare class RdxTabsModule {
 }
 
 export { RdxTabsIndicator, RdxTabsList, RdxTabsModule, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTab, injectTabsRootContext, provideTabsRootContext, tabsImports };
-export type { RdxTabsActivationDirection, RdxTabsRootContext, RdxTabsValue };
+export type { RdxTabsActivationDirection, RdxTabsRootContext, RdxTabsValue, RdxTabsValueChangeEvent, RdxTabsValueChangeEventDetails, RdxTabsValueChangeReason };

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

@@ -22,7 +22,8 @@ declare class RdxTimeFieldRootDirective {
      * The locale to use for formatting dates.
      */
     readonly locale: _angular_core.InputSignal<string>;
-    readonly dir: _angular_core.InputSignal<Direction>;
+    readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
+    readonly dir: Signal<Direction>;
     /**
      * The minimum valid date that can be entered.
      */
@@ -138,7 +139,7 @@ declare class RdxTimeFieldRootDirective {
      */
     setFocusedElement(el: HTMLElement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTimeFieldRootDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTimeFieldRootDirective, "[rdxTimeFieldRoot]", ["rdxTimeFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, ["segmentInputs"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTimeFieldRootDirective, "[rdxTimeFieldRoot]", ["rdxTimeFieldRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "hourCycle": { "alias": "hourCycle"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "hideTimeZone": { "alias": "hideTimeZone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "placeholder": "placeholderChange"; }, ["segmentInputs"], never, true, never>;
 }
 
 declare class RdxTimeFieldInputDirective {

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

@@ -207,16 +207,16 @@ declare class RdxToastViewport {
 
 /**
  * Positions an anchored toast against an element — the Angular counterpart of `<Toast.Positioner>`.
- * Composes the popper machinery so a toast can point at a trigger instead of living in the stack.
  *
- * Bind `anchor` (and optionally `side`/`align`/offsets) — typically from a toast's `positionerProps`.
- * It hosts its own `RdxPopper` so it is self-contained (no surrounding `rdxPopperRoot` needed), and
- * mirrors the popper measurements as friendlier CSS variables plus `data-side` / `data-align`.
+ * A "thin" positioner (ADR 0012): it inherits the popper positioning surface (inputs, `placed`
+ * output, unified vars + placement attrs) from {@link RdxPopperContentWrapper}. Bind `anchor` (and
+ * optionally `side`/`align`/offsets) — typically from a toast's `positionerProps`. It also composes
+ * its own {@link RdxPopper} so it is self-contained (no surrounding `rdxPopperRoot` needed), and
+ * mirrors the anchor width / transform origin as friendlier `--toast-*` CSS variables.
  */
-declare class RdxToastPositioner {
-    protected readonly wrapper: RdxPopperContentWrapper;
+declare class RdxToastPositioner extends RdxPopperContentWrapper {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxToastPositioner, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastPositioner, "[rdxToastPositioner]", ["rdxToastPositioner"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxPopper; inputs: {}; outputs: {}; }, { directive: typeof i1$1.RdxPopperContentWrapper; inputs: { "anchor": "anchor"; "side": "side"; "sideOffset": "sideOffset"; "align": "align"; "alignOffset": "alignOffset"; "arrowPadding": "arrowPadding"; "avoidCollisions": "avoidCollisions"; "collisionBoundary": "collisionBoundary"; "collisionPadding": "collisionPadding"; "sticky": "sticky"; "hideWhenDetached": "hideWhenDetached"; "positionStrategy": "positionStrategy"; "updatePositionStrategy": "updatePositionStrategy"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToastPositioner, "[rdxToastPositioner]", ["rdxToastPositioner"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxPopper; inputs: {}; outputs: {}; }]>;
 }
 
 /** Direction a swipe travels to dismiss a toast. */

package/types/radix-ng-primitives-toggle-group.d.ts

@@ -1,7 +1,7 @@
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { DataOrientation, BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
-import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import { Direction } from '@radix-ng/primitives/roving-focus';
 import { ControlValueAccessor } from '@angular/forms';
@@ -19,11 +19,17 @@ interface RdxToggleGroupContext {
     /** The orientation of the group. */
     readonly orientation: Signal<DataOrientation>;
     /** Toggle the pressed state of `value` within the group. */
-    toggle(value: string): void;
+    toggle(value: string, event?: Event): void;
 }
 declare const injectToggleGroupContext: _radix_ng_primitives_core.InjectContext<RdxToggleGroupContext>;
 declare const provideToggleGroupContext: (useFactory: () => RdxToggleGroupContext) => _angular_core.Provider;
 
+type RdxToggleGroupValueChangeReason = 'trigger-press' | 'none';
+type RdxToggleGroupValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxToggleGroupValueChangeReason>;
+interface RdxToggleGroupValueChangeEvent {
+    value: string[];
+    eventDetails: RdxToggleGroupValueChangeEventDetails;
+}
 /** Builds the shared context a {@link RdxToggle} reads when it belongs to this group. */
 declare function toggleGroupContext(instance: RdxToggleGroupBase): RdxToggleGroupContext;
 /**
@@ -58,7 +64,7 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
      */
     readonly orientation: _angular_core.InputSignal<DataOrientation>;
     /** Event emitted when the pressed values change. */
-    readonly onValueChange: _angular_core.OutputEmitterRef<string[]>;
+    readonly onValueChange: _angular_core.OutputEmitterRef<RdxToggleGroupValueChangeEvent>;
     /** @ignore */
     readonly pressedValues: _angular_core.Signal<string[]>;
     protected readonly accessorDisabled: _angular_core.WritableSignal<boolean>;
@@ -68,7 +74,7 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
     protected onTouched?: () => void;
     constructor();
     /** @ignore */
-    toggle(value: string): void;
+    toggle(value: string, event?: Event): void;
     /** @ignore */
     writeValue(value: string[] | string | null): void;
     /** @ignore */
@@ -89,7 +95,8 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
  */
 declare class RdxToggleGroup extends RdxToggleGroupBase {
     /** Text direction for arrow-key navigation. */
-    readonly dir: _angular_core.InputSignal<Direction>;
+    readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
+    readonly dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
     /**
      * Whether keyboard navigation should loop from the last item back to the first.
      *
@@ -99,7 +106,7 @@ declare class RdxToggleGroup extends RdxToggleGroupBase {
     private readonly rovingFocusGroup;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroup, "[rdxToggleGroup]", ["rdxToggleGroup"], { "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroup, "[rdxToggleGroup]", ["rdxToggleGroup"], { "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -114,4 +121,4 @@ declare class RdxToggleGroupWithoutFocus extends RdxToggleGroupBase {
 }
 
 export { RdxToggleGroup, RdxToggleGroupBase, RdxToggleGroupWithoutFocus, injectToggleGroupContext, provideToggleGroupContext, toggleGroupContext };
-export type { RdxToggleGroupContext };
+export type { RdxToggleGroupContext, RdxToggleGroupValueChangeEvent, RdxToggleGroupValueChangeEventDetails, RdxToggleGroupValueChangeReason };

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

@@ -1,8 +1,14 @@
 import * as _angular_core from '@angular/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
+import { BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
 import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
+type RdxTogglePressedChangeReason = 'trigger-press' | 'none';
+type RdxTogglePressedChangeEventDetails = RdxCancelableChangeEventDetails<RdxTogglePressedChangeReason>;
+interface RdxTogglePressedChangeEvent {
+    pressed: boolean;
+    eventDetails: RdxTogglePressedChangeEventDetails;
+}
 /**
  * A two-state button that can be either on (pressed) or off.
  *
@@ -42,7 +48,7 @@ declare class RdxToggle {
      */
     readonly nativeButton: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /** Event emitted when the pressed state changes (standalone). */
-    readonly onPressedChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly onPressedChange: _angular_core.OutputEmitterRef<RdxTogglePressedChangeEvent>;
     private readonly internalPressed;
     /** @ignore Whether the toggle is currently pressed (from the group when grouped). */
     readonly pressedState: _angular_core.Signal<boolean>;
@@ -50,7 +56,7 @@ declare class RdxToggle {
     readonly isDisabled: _angular_core.Signal<boolean>;
     constructor();
     /** @ignore */
-    protected onClick(): void;
+    protected onClick(event?: Event): void;
     /** @ignore */
     protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggle, never>;
@@ -63,3 +69,4 @@ declare class RdxToggleVisuallyHiddenInputDirective {
 }
 
 export { RdxToggle, RdxToggleVisuallyHiddenInputDirective };
+export type { RdxTogglePressedChangeEvent, RdxTogglePressedChangeEventDetails, RdxTogglePressedChangeReason };

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

@@ -31,7 +31,8 @@ declare class RdxToolbarRoot {
      */
     readonly orientation: _angular_core.InputSignal<DataOrientation>;
     /** Text direction for arrow-key navigation. */
-    readonly dir: _angular_core.InputSignal<Direction>;
+    readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
+    readonly dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
     /**
      * Whether keyboard navigation should loop from the last item back to the first.
      *
@@ -47,7 +48,7 @@ declare class RdxToolbarRoot {
     private readonly rovingFocusGroup;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }
 
 /**