@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

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

@@ -1,13 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterViewInit, WritableSignal, InputSignal, ModelSignal, Signal, InjectionToken } from '@angular/core';
+import { Signal, WritableSignal, InjectionToken, InputSignal, ModelSignal } from '@angular/core';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { TimeValue, HourCycle, Granularity, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
+import { TimeValue, HourCycle, Granularity, Direction, BooleanInput, DateStep, Formatter, SegmentValueObj, SegmentPart } from '@radix-ng/primitives/core';
 import * as _internationalized_date from '@internationalized/date';
-import { Direction } from '@angular/cdk/bidi';
-import { BooleanInput } from '@angular/cdk/coercion';
 
-declare class RdxTimeFieldRootDirective implements OnInit, AfterViewInit {
-    private readonly elementRef;
+declare class RdxTimeFieldRootDirective {
     /**
      * The controlled checked state of the calendar.
      */
@@ -47,47 +44,61 @@ declare class RdxTimeFieldRootDirective implements OnInit, AfterViewInit {
      * The stepping interval for the time fields. Defaults to 1
      */
     readonly step: _angular_core.InputSignal<DateStep | undefined>;
-    readonly step$: _angular_core.Signal<DateStep>;
+    readonly step$: Signal<DateStep>;
     /**
+     * Locale- and hour-cycle-aware formatter. Recomputed whenever `locale` or
+     * `hourCycle` change so segments always render with the current settings.
      * @ignore
      */
-    readonly defaultDate: _angular_core.Signal<TimeValue>;
+    readonly formatter: Signal<Formatter>;
+    /**
+     * @ignore
+     */
+    readonly defaultDate: Signal<TimeValue>;
     /**
      * The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
      */
     readonly placeholder: _angular_core.ModelSignal<TimeValue | undefined>;
     /**
+     * Segment input parts, collected from the projected content in DOM order. This
+     * stays in sync with `segmentContents()` (granularity / locale / value changes
+     * add or remove segments) instead of being captured once after view init.
      * @ignore
      */
-    readonly segmentElements: _angular_core.WritableSignal<Set<HTMLElement>>;
+    private readonly segmentInputs;
     /**
+     * The focusable (non-literal) segment elements, in DOM order.
      * @ignore
      */
-    readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
+    readonly segmentElements: Signal<HTMLElement[]>;
     /**
      * @ignore
      */
-    formatter: Formatter;
+    readonly currentFocusedElement: _angular_core.WritableSignal<HTMLElement | null>;
     /**
      * @ignore
      */
-    readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
+    readonly inferredGranularity: Signal<Granularity>;
+    readonly convertedMinValue: Signal<_internationalized_date.CalendarDateTime | _internationalized_date.ZonedDateTime | undefined>;
+    readonly convertedMaxValue: Signal<_internationalized_date.CalendarDateTime | _internationalized_date.ZonedDateTime | undefined>;
+    readonly convertedModelValue: _angular_core.WritableSignal<TimeValue | undefined>;
+    readonly convertedPlaceholder: _angular_core.WritableSignal<TimeValue>;
     /**
+     * The per-segment values. Writable so segment editing (via `useDateField`) can
+     * update individual parts, but re-synced from the model whenever the value,
+     * granularity or formatter change — so a controlled `value` set after init is
+     * reflected, and an empty field re-initializes when granularity changes.
      * @ignore
      */
-    readonly inferredGranularity: _angular_core.Signal<Granularity | undefined>;
-    readonly convertedMinValue: _angular_core.Signal<_internationalized_date.CalendarDateTime | _internationalized_date.ZonedDateTime | undefined>;
-    readonly convertedMaxValue: _angular_core.Signal<_internationalized_date.CalendarDateTime | _internationalized_date.ZonedDateTime | undefined>;
-    readonly convertedModelValue: _angular_core.WritableSignal<TimeValue | undefined>;
-    readonly convertedPlaceholder: _angular_core.WritableSignal<TimeValue>;
+    readonly segmentValues: _angular_core.WritableSignal<SegmentValueObj>;
     /**
      * @ignore
      */
-    readonly isInvalid: _angular_core.Signal<boolean>;
+    readonly isInvalid: Signal<boolean>;
     /**
      * @ignore
      */
-    readonly allSegmentContent: _angular_core.Signal<{
+    readonly allSegmentContent: Signal<{
         obj: _radix_ng_primitives_core.SegmentContentObj;
         arr: {
             part: _radix_ng_primitives_core.SegmentPart;
@@ -97,29 +108,27 @@ declare class RdxTimeFieldRootDirective implements OnInit, AfterViewInit {
     /**
      * An array of segments that should be readonly, which prevent user input on them.
      */
-    readonly segmentContents: _angular_core.Signal<{
+    readonly segmentContents: Signal<{
         part: _radix_ng_primitives_core.SegmentPart;
         value: string;
     }[]>;
     /**
      * @ignore
      */
-    readonly currentSegmentIndex: _angular_core.Signal<number>;
+    readonly currentSegmentIndex: Signal<number>;
     /**
      * @ignore
      */
-    readonly prevFocusableSegment: _angular_core.Signal<HTMLElement | null>;
+    readonly prevFocusableSegment: Signal<HTMLElement | null>;
     /**
      * @ignore
      */
-    readonly nextFocusableSegment: _angular_core.Signal<HTMLElement | null>;
+    readonly nextFocusableSegment: Signal<HTMLElement | null>;
     /**
      * @ignore
      */
     readonly focusNext: () => void;
     constructor();
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
     /**
      * @ignore
      */
@@ -129,11 +138,17 @@ declare class RdxTimeFieldRootDirective implements OnInit, AfterViewInit {
      */
     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"; }, never, 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; }; "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>;
 }
 
 declare class RdxTimeFieldInputDirective {
     private readonly el;
+    /**
+     * The host element of this segment. Consumed by the root to collect focusable
+     * segments in DOM order.
+     * @ignore
+     */
+    readonly element: HTMLElement;
     private readonly rootContext;
     /**
      * The part of the date to render
@@ -190,7 +205,7 @@ interface TimeFieldContextToken {
     isInvalid: Signal<boolean>;
     disabled: InputSignal<boolean>;
     readonly: InputSignal<boolean>;
-    formatter: Formatter;
+    formatter: Signal<Formatter>;
     hourCycle: InputSignal<HourCycle>;
     segmentValues: WritableSignal<SegmentValueObj>;
     focusNext: () => void;

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

@@ -1,195 +1,116 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken } from '@angular/core';
-import * as _radix_ng_primitives_toggle_group from '@radix-ng/primitives/toggle-group';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { Signal } from '@angular/core';
+import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
-import * as i2 from '@radix-ng/primitives/toggle';
+import { Direction } from '@radix-ng/primitives/roving-focus';
 import { ControlValueAccessor } from '@angular/forms';
-import { AcceptableValue } from '@radix-ng/primitives/core';
 
 /**
- * @group Components
+ * Shared state a {@link RdxToggle} reads when it participates in a toggle group.
  */
-declare class RdxToggleGroupItemDirective {
-    private readonly rdxToggleDirective;
-    private readonly rdxRovingFocusItemDirective;
-    /**
-     * Access the toggle group.
-     * @ignore
-     */
-    protected readonly rootContext: _radix_ng_primitives_toggle_group.IRdxToggleGroup;
-    /**
-     * The value of this toggle button.
-     *
-     * @group Props
-     */
-    readonly value: _angular_core.InputSignal<string>;
-    /**
-     * Whether this toggle button is disabled.
-     * @defaultValue false
-     * @group Props
-     */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    private readonly isPressed;
-    private readonly isDisabled;
-    constructor();
-    /**
-     * @ignore
-     */
-    toggle(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupItemDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupItemDirective, "[rdxToggleGroupItem]", ["rdxToggleGroupItem"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; "active": "active"; "allowShiftKey": "allowShiftKey"; }; outputs: {}; }, { directive: typeof i2.RdxToggleDirective; inputs: { "pressed": "pressed"; "disabled": "disabled"; }; outputs: {}; }]>;
+interface RdxToggleGroupContext {
+    /** The currently pressed values. */
+    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>;
+    /** Toggle the pressed state of `value` within the group. */
+    toggle(value: string): void;
 }
+declare const injectToggleGroupContext: (optional?: boolean) => RdxToggleGroupContext | null;
+declare const provideToggleGroupContext: (useFactory: () => RdxToggleGroupContext) => _angular_core.Provider;
 
-declare const RdxToggleGroupItemToken: InjectionToken<RdxToggleGroupItemDirective>;
-declare function injectToggleGroupItem(): RdxToggleGroupItemDirective;
-
-declare class RdxToggleGroupWithoutFocusDirective implements ControlValueAccessor {
-    /**
-     * @ignore
-     */
-    readonly id: string;
+/** 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
+ * ({@link RdxToggleGroup}) or omit it when an ancestor already owns focus, e.g. a toolbar
+ * ({@link RdxToggleGroupWithoutFocus}).
+ */
+declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
     /**
-     * @group Props
+     * The pressed values. Always an array — a single value is `[value]`. Use with `(onValueChange)`
+     * for controlled state.
      */
-    readonly value: _angular_core.ModelSignal<string | string[] | undefined>;
+    readonly value: _angular_core.ModelSignal<string[] | undefined>;
+    /** The values pressed when the group is initially rendered (uncontrolled). */
+    readonly defaultValue: _angular_core.InputSignal<string[] | undefined>;
     /**
-     * @group Props
+     * Whether multiple items can be pressed at the same time.
+     *
+     * @default false
      */
-    readonly type: _angular_core.InputSignal<"single" | "multiple">;
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * Whether the toggle group is disabled.
-     * @defaultValue false
-     * @group Props
+     * Whether the whole group is disabled.
+     *
+     * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * Event emitted when the selected toggle button changes.
-     * @group Emits
-     */
-    readonly onValueChange: _angular_core.OutputEmitterRef<string | string[] | undefined>;
-    /**
-     * The value change callback.
-     */
+     * The orientation of the group, controlling arrow-key navigation.
+     *
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<DataOrientation>;
+    /** Event emitted when the pressed values change. */
+    readonly onValueChange: _angular_core.OutputEmitterRef<string[]>;
+    /** @ignore */
+    readonly pressedValues: _angular_core.Signal<string[]>;
+    protected readonly accessorDisabled: _angular_core.WritableSignal<boolean>;
+    /** @ignore */
+    readonly isDisabled: _angular_core.Signal<boolean>;
     private onChange?;
-    /**
-     * onTouch function registered via registerOnTouch (ControlValueAccessor).
-     */
     protected onTouched?: () => void;
-    /**
-     * Toggle a value.
-     * @param value The value to toggle.
-     * @ignore
-     */
+    constructor();
+    /** @ignore */
     toggle(value: string): void;
-    /**
-     * Select a value from Angular forms.
-     * @param value The value to select.
-     * @ignore
-     */
-    writeValue(value: string): void;
-    /**
-     * Register a callback to be called when the value changes.
-     * @param fn The callback to register.
-     * @ignore
-     */
-    registerOnChange(fn: (value: string | string[] | undefined) => void): void;
-    /**
-     * Register a callback to be called when the toggle group is touched.
-     * @param fn The callback to register.
-     * @ignore
-     */
+    /** @ignore */
+    writeValue(value: string[] | string | null): void;
+    /** @ignore */
+    registerOnChange(fn: (value: string[]) => void): void;
+    /** @ignore */
     registerOnTouched(fn: () => void): void;
-    private readonly accessorDisabled;
-    /**
-     * Set the disabled state of the toggle group.
-     * @param isDisabled Whether the toggle group is disabled.
-     * @ignore
-     */
+    /** @ignore */
     setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocusDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocusDirective, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupBase, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
 }
 
 /**
- * @group Components
+ * A set of two-state buttons that can be toggled on or off. Owns roving keyboard focus over its
+ * `[rdxToggle]` children.
+ *
+ * @see https://base-ui.com/react/components/toggle-group
  */
-declare class RdxToggleGroupDirective implements ControlValueAccessor {
-    /**
-     * @ignore
-     */
-    readonly id: string;
-    /**
-     * @group Props
-     */
-    readonly value: _angular_core.ModelSignal<AcceptableValue | AcceptableValue[] | undefined>;
-    /**
-     * @group Props
-     */
-    readonly type: _angular_core.InputSignal<"single" | "multiple">;
-    /**
-     * Whether the toggle group is disabled.
-     * @defaultValue false
-     * @group Props
-     */
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Event emitted when the selected toggle button changes.
-     * @group Emits
-     */
-    readonly onValueChange: _angular_core.OutputEmitterRef<AcceptableValue | AcceptableValue[] | undefined>;
-    /**
-     * The value change callback.
-     */
-    private onChange?;
-    /**
-     * onTouch function registered via registerOnTouch (ControlValueAccessor).
-     */
-    protected onTouched?: () => void;
+declare class RdxToggleGroup extends RdxToggleGroupBase {
+    /** Text direction for arrow-key navigation. */
+    readonly dir: _angular_core.InputSignal<Direction>;
     /**
-     * Toggle a value.
-     * @param value The value to toggle.
-     * @ignore
-     */
-    toggle(value: AcceptableValue): void;
-    /**
-     * Select a value from Angular forms.
-     * @param value The value to select.
-     * @ignore
-     */
-    writeValue(value: string): void;
-    /**
-     * Register a callback to be called when the value changes.
-     * @param fn The callback to register.
-     * @ignore
-     */
-    registerOnChange(fn: (value: AcceptableValue | AcceptableValue[] | undefined) => void): void;
-    /**
-     * Register a callback to be called when the toggle group is touched.
-     * @param fn The callback to register.
-     * @ignore
-     */
-    registerOnTouched(fn: () => void): void;
-    readonly accessorDisabled: _angular_core.WritableSignal<boolean>;
-    /**
-     * Set the disabled state of the toggle group.
-     * @param isDisabled Whether the toggle group is disabled.
-     * @ignore
+     * Whether keyboard navigation should loop from the last item back to the first.
+     *
+     * @default true
      */
-    setDisabledState(isDisabled: boolean): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupDirective, "[rdxToggleGroup]", ["rdxToggleGroup"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "dir": "dir"; "orientation": "orientation"; "loop": "loop"; }; outputs: {}; }]>;
+    readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    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: {}; }]>;
 }
 
-interface IRdxToggleGroup {
-    toggle(value: string): void;
-    disabled: any;
-    value: any;
-    type: any;
-    accessorDisabled: any;
+/**
+ * A toggle group that does NOT create its own roving-focus group, 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
+ * when nested in a toolbar.
+ */
+declare class RdxToggleGroupWithoutFocus extends RdxToggleGroupBase {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleGroupWithoutFocus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleGroupWithoutFocus, "[rdxToggleGroupWithoutFocus]", ["rdxToggleGroupWithoutFocus"], {}, {}, never, never, true, never>;
 }
-declare const RdxToggleGroupToken: InjectionToken<IRdxToggleGroup>;
-declare function injectToggleGroup(): IRdxToggleGroup;
 
-export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupToken, RdxToggleGroupWithoutFocusDirective, injectToggleGroup, injectToggleGroupItem };
-export type { IRdxToggleGroup };
+export { RdxToggleGroup, RdxToggleGroupBase, RdxToggleGroupWithoutFocus, injectToggleGroupContext, provideToggleGroupContext, toggleGroupContext };
+export type { RdxToggleGroupContext };

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

@@ -1,75 +1,65 @@
 import * as _angular_core from '@angular/core';
-import { OutputEmitterRef } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/visually-hidden';
-import { BooleanInput } from '@angular/cdk/coercion';
-import * as i1$1 from '@radix-ng/primitives/core';
-import { RdxControlValueAccessor } from '@radix-ng/primitives/core';
+import { BooleanInput } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/roving-focus';
+import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
-declare class RdxToggleVisuallyHiddenInputDirective {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleVisuallyHiddenInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleVisuallyHiddenInputDirective, "input[rdxToggleVisuallyHiddenInput]", ["rdxToggleVisuallyHiddenInput"], {}, {}, never, never, true, [{ directive: typeof i1.RdxVisuallyHiddenInputDirective; inputs: { "name": "name"; "required": "required"; "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
-}
-
-interface ToggleProps {
-    /**
-     * The controlled state of the toggle.
-     */
-    pressed?: boolean;
-    /**
-     * The state of the toggle when initially rendered. Use `defaultPressed`
-     * if you do not need to control the state of the toggle.
-     * @defaultValue false
-     */
-    defaultPressed?: boolean;
-    /**
-     * The callback that fires when the state of the toggle changes.
-     */
-    onPressedChange?: OutputEmitterRef<boolean>;
-    /**
-     * Whether the toggle is disabled.
-     * @defaultValue false
-     */
-    disabled?: boolean;
-}
-type DataState = 'on' | 'off';
 /**
- * @group Components
+ * 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.
+ *
+ * @see https://base-ui.com/react/components/toggle
  */
-declare class RdxToggleDirective {
+declare class RdxToggle {
+    private readonly group;
+    private readonly rovingItem;
     /**
-     * @ignore
+     * A value identifying this toggle inside a `[rdxToggleGroup]`. Required when used in a group.
      */
-    readonly cva: RdxControlValueAccessor<any>;
+    readonly value: _angular_core.InputSignal<string | undefined>;
     /**
-     * The pressed state of the toggle when it is initially rendered.
-     * Use when you do not need to control its pressed state.
+     * The pressed state when initially rendered (uncontrolled, standalone only).
      *
-     * @group Props
+     * @default false
      */
     readonly defaultPressed: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * The controlled pressed state of the toggle.
-     * Must be used in conjunction with `onPressedChange`.
-     *
-     * @group Props
+     * The controlled pressed state (standalone). Use with `(onPressedChange)` or two-way `[(pressed)]`.
      */
-    readonly pressed: _angular_core.ModelSignal<boolean>;
+    readonly pressed: _angular_core.ModelSignal<boolean | undefined>;
     /**
-     * When true, prevents the user from interacting with the toggle.
+     * Whether the toggle is disabled.
      *
-     * @group Props
+     * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * Event handler called when the pressed state of the toggle changes.
+     * Whether the host is a native `<button>`. When `false`, the toggle adds `role="button"` and
+     * handles Enter/Space itself.
      *
-     * @group Emits
+     * @default true
      */
-    readonly onPressedChange: _angular_core.OutputRef<any>;
+    readonly nativeButton: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Event emitted when the pressed state changes (standalone). */
+    readonly onPressedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly internalPressed;
+    /** @ignore Whether the toggle is currently pressed (from the group when grouped). */
+    readonly pressedState: _angular_core.Signal<boolean>;
+    /** @ignore */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    constructor();
+    /** @ignore */
     protected onClick(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleDirective, "[rdxToggle]", ["rdxToggle"], { "defaultPressed": { "alias": "defaultPressed"; "required": false; "isSignal": true; }; "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "onPressedChange": "onPressedChange"; }, never, never, true, [{ directive: typeof i1$1.RdxControlValueAccessor; inputs: { "value": "pressed"; "disabled": "disabled"; }; outputs: {}; }]>;
+    /** @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: {}; }]>;
+}
+
+declare class RdxToggleVisuallyHiddenInputDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToggleVisuallyHiddenInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToggleVisuallyHiddenInputDirective, "input[rdxToggleVisuallyHiddenInput]", ["rdxToggleVisuallyHiddenInput"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxVisuallyHiddenInputBubbleDirective; inputs: { "name": "name"; "required": "required"; "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
-export { RdxToggleDirective, RdxToggleVisuallyHiddenInputDirective };
-export type { DataState, ToggleProps };
+export { RdxToggle, RdxToggleVisuallyHiddenInputDirective };