@radix-ng/primitives 1.0.0-beta.4 → 1.0.1

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 _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { RdxControlValueAccessor, NumberInput, BooleanInput } 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.
@@ -151,6 +173,13 @@ declare class RdxSliderRoot {
      * @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. */
@@ -170,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). */
@@ -181,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 */
@@ -192,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). */
@@ -213,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;
@@ -221,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; }; "dirInput": { "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 _radix_ng_primitives_core.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: {}; }]>;
 }
 
 /**
@@ -249,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). */
@@ -311,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>;
@@ -374,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';
 
@@ -66,10 +66,17 @@ interface StepperRootContext {
     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>;
@@ -80,7 +87,7 @@ declare class RdxStepperRootDirective implements StepperRootContext {
     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 */
@@ -96,7 +103,7 @@ 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; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
 }
@@ -120,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,9 +2,9 @@ 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';
+import * as i1$1 from '@radix-ng/primitives/composite';
 
 /**
  * Structural directive that mounts the tab panel contents only while the panel is active,
@@ -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>;
@@ -77,7 +83,7 @@ declare class RdxTabsRoot {
 declare class RdxTabsList {
     protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
     private readonly elementRef;
-    private readonly rovingFocusGroup;
+    private readonly compositeRoot;
     /**
      * Whether a tab is activated when it receives focus (automatic activation).
      * When `false`, tabs are only activated on click or Enter/Space.
@@ -91,9 +97,12 @@ declare class RdxTabsList {
      * @default true
      */
     readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly tabMetadata;
+    private readonly disabledIndices;
+    private readonly activeIndex;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsList, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsList, "[rdxTabsList]", ["rdxTabsList"], { "activateOnFocus": { "alias": "activateOnFocus"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsList, "[rdxTabsList]", ["rdxTabsList"], { "activateOnFocus": { "alias": "activateOnFocus"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -103,7 +112,7 @@ declare class RdxTabsList {
  */
 declare class RdxTabsTab {
     protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
-    private readonly rovingFocusItem;
+    private readonly compositeItem;
     /**
      * A unique value that associates the tab with a panel.
      */
@@ -124,9 +133,9 @@ 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: {}; }]>;
+    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.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -227,7 +236,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 +253,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-toggle-group.d.ts

@@ -1,11 +1,11 @@
-import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
 import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/roving-focus';
-import { Direction } from '@radix-ng/primitives/roving-focus';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { DataOrientation, RdxCancelableChangeEventDetails, BooleanInput, Direction } from '@radix-ng/primitives/core';
 import { ControlValueAccessor } from '@angular/forms';
+import * as i1 from '@radix-ng/primitives/composite';
 
+type RdxToggleGroupContextChangeReason = 'none';
 /**
  * Shared state a {@link RdxToggle} reads when it participates in a toggle group.
  */
@@ -14,20 +14,26 @@ interface RdxToggleGroupContext {
     readonly value: Signal<string[]>;
     /** Whether the whole group is disabled. */
     readonly disabled: Signal<boolean>;
-    /** Whether more than one item can be pressed at a time. */
-    readonly multiple: Signal<boolean>;
     /** The orientation of the group. */
     readonly orientation: Signal<DataOrientation>;
+    /** Whether the group value was initialized by `value` or `defaultValue`. */
+    readonly isValueInitialized: Signal<boolean>;
     /** Toggle the pressed state of `value` within the group. */
-    toggle(value: string): void;
+    toggle(value: string, event?: Event, eventDetails?: RdxCancelableChangeEventDetails<RdxToggleGroupContextChangeReason>): void;
 }
 declare const injectToggleGroupContext: _radix_ng_primitives_core.InjectContext<RdxToggleGroupContext>;
 declare const provideToggleGroupContext: (useFactory: () => RdxToggleGroupContext) => _angular_core.Provider;
 
+type RdxToggleGroupValueChangeReason = '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;
 /**
- * Shared state and behavior for the toggle group. Concrete directives add the roving-focus group
+ * Shared state and behavior for the toggle group. Concrete directives add the composite root
  * ({@link RdxToggleGroup}) or omit it when an ancestor already owns focus, e.g. a toolbar
  * ({@link RdxToggleGroupWithoutFocus}).
  */
@@ -58,17 +64,21 @@ 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[]>;
+    /** @ignore */
+    readonly isValueInitialized: _angular_core.Signal<boolean>;
     protected readonly accessorDisabled: _angular_core.WritableSignal<boolean>;
     /** @ignore */
     readonly isDisabled: _angular_core.Signal<boolean>;
     private onChange?;
     protected onTouched?: () => void;
     constructor();
+    /** @ignore Extra disabled state inherited from composite parents such as Toolbar. */
+    protected isExternallyDisabled(): boolean;
     /** @ignore */
-    toggle(value: string): void;
+    toggle(value: string, event?: Event, eventDetails?: RdxToggleGroupValueChangeEventDetails): void;
     /** @ignore */
     writeValue(value: string[] | string | null): void;
     /** @ignore */
@@ -82,37 +92,44 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
 }
 
 /**
- * A set of two-state buttons that can be toggled on or off. Owns roving keyboard focus over its
+ * A set of two-state buttons that can be toggled on or off. Owns composite keyboard focus over its
  * `[rdxToggle]` children.
  *
  * @see https://base-ui.com/react/components/toggle-group
  */
 declare class RdxToggleGroup extends RdxToggleGroupBase {
+    private readonly elementRef;
     /** Text direction for arrow-key navigation. */
     readonly dirInput: _angular_core.InputSignal<Direction | undefined>;
-    readonly dir: _angular_core.Signal<_radix_ng_primitives_core.Direction>;
+    readonly dir: _angular_core.Signal<Direction>;
     /**
      * Whether keyboard navigation should loop from the last item back to the first.
      *
      * @default true
      */
     readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    private readonly rovingFocusGroup;
+    private readonly compositeRoot;
+    private readonly itemMetadata;
+    private readonly disabledIndices;
+    private readonly activeIndex;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroup, never>;
-    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: {}; }]>;
+    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.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
 }
 
 /**
- * A toggle group that does NOT create its own roving-focus group, for use inside a container that
+ * A toggle group that does NOT create its own composite root, for use inside a container that
  * already owns keyboard focus (e.g. a toolbar). The `[rdxToggle]` children register with the nearest
- * ancestor roving-focus group instead. Mirrors Base UI's behavior of skipping its composite root
+ * ancestor composite root instead. Mirrors Base UI's behavior of skipping its composite root
  * when nested in a toolbar.
  */
 declare class RdxToggleGroupWithoutFocus extends RdxToggleGroupBase {
+    private readonly toolbarRootContext;
+    private readonly toolbarGroupContext;
+    protected isExternallyDisabled(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocus, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocus, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], {}, {}, never, never, true, never>;
 }
 
 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,19 +1,25 @@
 import * as _angular_core from '@angular/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
-import * as i1 from '@radix-ng/primitives/roving-focus';
+import { BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/composite';
 import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
+type RdxTogglePressedChangeReason = 'none';
+type RdxTogglePressedChangeEventDetails = RdxCancelableChangeEventDetails<RdxTogglePressedChangeReason>;
+interface RdxTogglePressedChangeEvent {
+    pressed: boolean;
+    eventDetails: RdxTogglePressedChangeEventDetails;
+}
 /**
  * A two-state button that can be either on (pressed) or off.
  *
  * Works standalone or as an item of a `[rdxToggleGroup]`: inside a group it derives its pressed
- * state from the group's value (matched by `value`) and participates in the group's roving focus.
+ * state from the group's value (matched by `value`) and participates in the group's composite focus.
  *
  * @see https://base-ui.com/react/components/toggle
  */
 declare class RdxToggle {
     private readonly group;
-    private readonly rovingItem;
+    private readonly compositeItem;
     /**
      * A value identifying this toggle inside a `[rdxToggleGroup]`. Required when used in a group.
      */
@@ -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,11 +56,11 @@ 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>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggle, "[rdxToggle]", ["rdxToggle"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggle, "[rdxToggle]", ["rdxToggle"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, [{ directive: typeof i1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
 declare class RdxToggleVisuallyHiddenInputDirective {
@@ -63,3 +69,4 @@ declare class RdxToggleVisuallyHiddenInputDirective {
 }
 
 export { RdxToggle, RdxToggleVisuallyHiddenInputDirective };
+export type { RdxTogglePressedChangeEvent, RdxTogglePressedChangeEventDetails, RdxTogglePressedChangeReason };