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

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

@@ -0,0 +1,247 @@
+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 * as _radix_ng_primitives_tabs from '@radix-ng/primitives/tabs';
+import * as i1$1 from '@radix-ng/primitives/roving-focus';
+
+/**
+ * Structural directive that mounts the tab panel contents only while the panel is active,
+ * unmounting them once the exit animation finishes. Apply it inside an `[rdxTabsPanel]` to get
+ * Base UI's default unmounting behavior; combine with `keepMounted` on the panel to keep the
+ * contents mounted instead.
+ *
+ * The presence state is read from the parent panel through {@link RdxPresenceDirective}.
+ */
+declare class RdxTabsPanelPresence {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsPanelPresence, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanelPresence, "ng-template[rdxTabsPanelPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * The direction in which the active tab moved relative to the previously active tab.
+ * Mirrors Base UI's `Tabs.Tab.ActivationDirection`.
+ */
+type RdxTabsActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none';
+/** A value that identifies a tab / panel pair. */
+type RdxTabsValue = string | number | null;
+
+/**
+ * Groups the tabs and the corresponding panels.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+declare class RdxTabsRoot {
+    /** @ignore */
+    readonly baseId: string;
+    /**
+     * The value of the currently selected tab. Use together with `(onValueChange)` for controlled state.
+     */
+    readonly value: _angular_core.ModelSignal<RdxTabsValue | undefined>;
+    /**
+     * The value of the tab that should be initially selected when uncontrolled.
+     */
+    readonly defaultValue: _angular_core.InputSignal<RdxTabsValue | undefined>;
+    /**
+     * The orientation the tabs are laid out. Controls arrow-key navigation
+     * (left/right vs. up/down).
+     *
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<DataOrientation>;
+    /**
+     * Event emitted when the selected tab changes.
+     */
+    readonly onValueChange: _angular_core.OutputEmitterRef<RdxTabsValue>;
+    /** @ignore Set by `[rdxTabsList]`. */
+    readonly activateOnFocus: _angular_core.WritableSignal<boolean>;
+    /** @ignore Set by `[rdxTabsList]`. */
+    readonly tabListElement: _angular_core.WritableSignal<HTMLElement | null>;
+    /** @ignore */
+    readonly activationDirection: _angular_core.WritableSignal<RdxTabsActivationDirection>;
+    constructor();
+    /** @ignore */
+    setValue(value: RdxTabsValue): 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>;
+}
+
+/**
+ * Groups the individual tab buttons and manages keyboard navigation.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+declare class RdxTabsList {
+    protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
+    private readonly elementRef;
+    private readonly rovingFocusGroup;
+    /**
+     * Whether a tab is activated when it receives focus (automatic activation).
+     * When `false`, tabs are only activated on click or Enter/Space.
+     *
+     * @default false
+     */
+    readonly activateOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether keyboard navigation should loop from the last tab back to the first.
+     *
+     * @default true
+     */
+    readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    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: {}; }]>;
+}
+
+/**
+ * An individual interactive tab button that activates its corresponding panel.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+declare class RdxTabsTab {
+    protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
+    private readonly rovingFocusItem;
+    /**
+     * A unique value that associates the tab with a panel.
+     */
+    readonly value: _angular_core.InputSignal<RdxTabsValue>;
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @ignore */
+    protected readonly tabId: _angular_core.Signal<string>;
+    /** @ignore */
+    protected readonly panelId: _angular_core.Signal<string>;
+    /** @ignore */
+    protected readonly active: _angular_core.Signal<boolean>;
+    constructor();
+    /** @ignore */
+    protected onMouseDown(event: MouseEvent): void;
+    /** @ignore */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** @ignore */
+    protected onFocus(): 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: {}; }]>;
+}
+
+/**
+ * A panel displayed when its corresponding tab is active.
+ *
+ * By default the panel stays in the DOM and is toggled with the `hidden` attribute. To unmount the
+ * contents while inactive (Base UI's default `keepMounted: false`), nest a `*rdxTabsPanelPresence`
+ * structural directive inside it; set `keepMounted` to keep the contents mounted regardless.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+declare class RdxTabsPanel {
+    private readonly elementRef;
+    protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
+    /**
+     * A unique value that associates the panel with a tab.
+     */
+    readonly value: _angular_core.InputSignal<RdxTabsValue>;
+    /**
+     * Keep the panel contents mounted in the DOM while inactive (the contents are still hidden).
+     * Only relevant together with `*rdxTabsPanelPresence`, which otherwise unmounts them.
+     *
+     * @default false
+     */
+    readonly keepMounted: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly transition;
+    /** Reactive enter/exit transition phase (`'starting'` | `'ending'` | `undefined`). */
+    readonly transitionStatus: _angular_core.Signal<_radix_ng_primitives_core.RdxTransitionStatus>;
+    /** @ignore */
+    protected readonly panelId: _angular_core.Signal<string>;
+    /** @ignore */
+    protected readonly tabId: _angular_core.Signal<string>;
+    /** Whether this panel's tab is currently selected. */
+    readonly active: _angular_core.Signal<boolean>;
+    /** `true` once a `*rdxTabsPanelPresence` child takes over mounting. */
+    private readonly hasPresence;
+    /**
+     * Whether the contents should be present for `*rdxTabsPanelPresence`. Flips with `active` so the
+     * presence directive owns the exit-animation timing (it keeps the node mounted until its exit
+     * `@keyframes` finishes); `keepMounted` keeps them mounted regardless.
+     */
+    readonly present: _angular_core.Signal<boolean>;
+    /**
+     * The `hidden` attribute value. The panel is shown while active or while its exit transition
+     * runs. When a presence child unmounts the contents we no longer force `hidden` (the empty
+     * element renders nothing), unless `keepMounted` keeps the inactive contents around.
+     */
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    /** @ignore Index of the panel, derived from the order of its associated tab. */
+    protected readonly index: _angular_core.Signal<number | null>;
+    private previousActive;
+    private isFirstRun;
+    constructor();
+    /** @ignore Called by `RdxTabsPanelPresence` so the panel stops forcing `hidden`. */
+    markHasPresence(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsPanel, "[rdxTabsPanel]", ["rdxTabsPanel"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface TabGeometry {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * A visual element that tracks the position and size of the active tab. Exposes the active tab
+ * geometry as CSS variables (`--active-tab-{top,right,bottom,left,width,height}`) so it can be
+ * animated with CSS.
+ *
+ * @see https://base-ui.com/react/components/tabs
+ */
+declare class RdxTabsIndicator {
+    protected readonly rootContext: _radix_ng_primitives_tabs.RdxTabsRootContext;
+    private readonly destroyRef;
+    /** @ignore */
+    protected readonly geometry: _angular_core.WritableSignal<TabGeometry | null>;
+    constructor();
+    private scheduleMeasure;
+    private measure;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsIndicator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxTabsIndicator, "[rdxTabsIndicator]", ["rdxTabsIndicator"], {}, {}, never, never, true, never>;
+}
+
+interface RdxTabsRootContext {
+    /** Stable id used to derive tab / panel ids. */
+    readonly baseId: string;
+    /** The value of the currently selected tab. */
+    readonly value: Signal<RdxTabsValue | undefined>;
+    /** The orientation of the tabs. */
+    readonly orientation: Signal<DataOrientation>;
+    /** Direction the selection moved relative to the previously active tab. */
+    readonly activationDirection: Signal<RdxTabsActivationDirection>;
+    /** Whether tabs are activated on focus (set by the list). */
+    readonly activateOnFocus: Signal<boolean>;
+    /** 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;
+    /** Mirror the list's `activateOnFocus` input onto the root context. */
+    setActivateOnFocus(value: boolean): void;
+    /** Register the list host element. */
+    setTabListElement(element: HTMLElement | null): void;
+}
+declare const injectTabsRootContext: (optional?: boolean) => RdxTabsRootContext | null;
+declare const provideTabsRootContext: (useFactory: () => RdxTabsRootContext) => _angular_core.Provider;
+
+declare const tabsImports: (typeof RdxTabsPanelPresence)[];
+declare class RdxTabsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxTabsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxTabsModule, never, [typeof RdxTabsRoot, typeof RdxTabsList, typeof RdxTabsTab, typeof RdxTabsPanel, typeof RdxTabsPanelPresence, typeof RdxTabsIndicator], [typeof RdxTabsRoot, typeof RdxTabsList, typeof RdxTabsTab, typeof RdxTabsPanel, typeof RdxTabsPanelPresence, typeof RdxTabsIndicator]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxTabsModule>;
+}
+
+export { RdxTabsIndicator, RdxTabsList, RdxTabsModule, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTab, injectTabsRootContext, provideTabsRootContext, tabsImports };
+export type { RdxTabsActivationDirection, RdxTabsRootContext, RdxTabsValue };

package/{time-field/index.d.ts → 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,43 +108,47 @@ 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
      */
-    onKeydown(event: KeyboardEvent): void;
+    onKeydown(event: Event): void;
     /**
      * @ignore
      */
     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
@@ -165,16 +180,16 @@ declare class RdxTimeFieldInputDirective {
     /**
      * @ignore
      */
-    handleSegmentClick: (e: MouseEvent) => void;
+    handleSegmentClick: (e: Event) => void;
     /**
      * @ignore
      */
-    handleSegmentKeydown: (e: KeyboardEvent) => void;
+    handleSegmentKeydown: (e: Event) => void;
     constructor();
     /**
      * @ignore
      */
-    onFocus(e: FocusEvent): void;
+    onFocus(e: Event): void;
     /**
      * @ignore
      */
@@ -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

@@ -0,0 +1,116 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/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';
+
+/**
+ * Shared state a {@link RdxToggle} reads when it participates in a toggle group.
+ */
+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;
+
+/** 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 {
+    /**
+     * The pressed values. Always an array — a single value is `[value]`. Use with `(onValueChange)`
+     * for controlled state.
+     */
+    readonly value: _angular_core.ModelSignal<string[] | undefined>;
+    /** The values pressed when the group is initially rendered (uncontrolled). */
+    readonly defaultValue: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * Whether multiple items can be pressed at the same time.
+     *
+     * @default false
+     */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the whole group is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * 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?;
+    protected onTouched?: () => void;
+    constructor();
+    /** @ignore */
+    toggle(value: string): void;
+    /** @ignore */
+    writeValue(value: string[] | string | null): void;
+    /** @ignore */
+    registerOnChange(fn: (value: string[]) => void): void;
+    /** @ignore */
+    registerOnTouched(fn: () => void): void;
+    /** @ignore */
+    setDisabledState(isDisabled: boolean): void;
+    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>;
+}
+
+/**
+ * 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 RdxToggleGroup extends RdxToggleGroupBase {
+    /** Text direction for arrow-key navigation. */
+    readonly dir: _angular_core.InputSignal<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;
+    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: {}; }]>;
+}
+
+/**
+ * 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>;
+}
+
+export { RdxToggleGroup, RdxToggleGroupBase, RdxToggleGroupWithoutFocus, injectToggleGroupContext, provideToggleGroupContext, toggleGroupContext };
+export type { RdxToggleGroupContext };

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

@@ -0,0 +1,65 @@
+import * as _angular_core from '@angular/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';
+
+/**
+ * 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 RdxToggle {
+    private readonly group;
+    private readonly rovingItem;
+    /**
+     * A value identifying this toggle inside a `[rdxToggleGroup]`. Required when used in a group.
+     */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The pressed state when initially rendered (uncontrolled, standalone only).
+     *
+     * @default false
+     */
+    readonly defaultPressed: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The controlled pressed state (standalone). Use with `(onPressedChange)` or two-way `[(pressed)]`.
+     */
+    readonly pressed: _angular_core.ModelSignal<boolean | undefined>;
+    /**
+     * Whether the toggle is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the host is a native `<button>`. When `false`, the toggle adds `role="button"` and
+     * handles Enter/Space itself.
+     *
+     * @default true
+     */
+    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;
+    /** @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 { RdxToggle, RdxToggleVisuallyHiddenInputDirective };