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

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, RdxCancelableChangeEventDetails } 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,17 +14,17 @@ 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, event?: Event): 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 = 'trigger-press' | 'none';
+type RdxToggleGroupValueChangeReason = 'none';
 type RdxToggleGroupValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxToggleGroupValueChangeReason>;
 interface RdxToggleGroupValueChangeEvent {
     value: string[];
@@ -33,7 +33,7 @@ interface RdxToggleGroupValueChangeEvent {
 /** 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}).
  */
@@ -67,14 +67,18 @@ declare abstract class RdxToggleGroupBase implements ControlValueAccessor {
     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, event?: Event): void;
+    toggle(value: string, event?: Event, eventDetails?: RdxToggleGroupValueChangeEventDetails): void;
     /** @ignore */
     writeValue(value: string[] | string | null): void;
     /** @ignore */
@@ -88,34 +92,41 @@ 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>;
 }

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

@@ -1,9 +1,9 @@
 import * as _angular_core from '@angular/core';
 import { BooleanInput, RdxCancelableChangeEventDetails } from '@radix-ng/primitives/core';
-import * as i1 from '@radix-ng/primitives/roving-focus';
+import * as i1 from '@radix-ng/primitives/composite';
 import * as i1$1 from '@radix-ng/primitives/visually-hidden';
 
-type RdxTogglePressedChangeReason = 'trigger-press' | 'none';
+type RdxTogglePressedChangeReason = 'none';
 type RdxTogglePressedChangeEventDetails = RdxCancelableChangeEventDetails<RdxTogglePressedChangeReason>;
 interface RdxTogglePressedChangeEvent {
     pressed: boolean;
@@ -13,13 +13,13 @@ interface RdxTogglePressedChangeEvent {
  * 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.
      */
@@ -60,7 +60,7 @@ declare class RdxToggle {
     /** @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 {

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

@@ -2,9 +2,8 @@ import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/separator';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
-import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
-import * as i1$1 from '@radix-ng/primitives/roving-focus';
-import { Direction } from '@radix-ng/primitives/roving-focus';
+import { DataOrientation, Direction, BooleanInput } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/composite';
 import * as _radix_ng_primitives_toolbar from '@radix-ng/primitives/toolbar';
 
 /**
@@ -19,7 +18,7 @@ declare class RdxToolbarSeparator {
 
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or menus.
- * Owns roving keyboard focus over its items.
+ * Owns composite keyboard focus over its items.
  *
  * @see https://base-ui.com/react/components/toolbar
  */
@@ -32,7 +31,7 @@ declare class RdxToolbarRoot {
     readonly orientation: _angular_core.InputSignal<DataOrientation>;
     /** 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.
      *
@@ -45,10 +44,17 @@ declare class RdxToolbarRoot {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    private readonly rovingFocusGroup;
+    private readonly compositeRoot;
+    private readonly itemMetadata;
+    private readonly disabledIndices;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarRoot, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dirInput": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeRoot; inputs: {}; outputs: {}; }]>;
+}
+interface RdxToolbarItemMetadata {
+    [key: string]: unknown;
+    disabled: boolean;
+    focusableWhenDisabled: boolean;
 }
 
 /**
@@ -59,7 +65,7 @@ declare class RdxToolbarRoot {
 declare class RdxToolbarButton {
     protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
     private readonly groupContext;
-    private readonly rovingItem;
+    private readonly compositeItem;
     /**
      * Whether the button is disabled.
      *
@@ -85,7 +91,7 @@ declare class RdxToolbarButton {
     /** @ignore */
     protected onClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarButton, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarButton, "[rdxToolbarButton]", ["rdxToolbarButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarButton, "[rdxToolbarButton]", ["rdxToolbarButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -95,14 +101,16 @@ declare class RdxToolbarButton {
  */
 declare class RdxToolbarLink {
     protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
+    private readonly compositeItem;
+    constructor();
     /** @ignore Space activates a link, matching native button behavior in a toolbar. */
     protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarLink, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarLink, "[rdxToolbarLink]", ["rdxToolbarLink"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarLink, "[rdxToolbarLink]", ["rdxToolbarLink"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
 /**
- * A native input within a toolbar. Participates in the toolbar's roving focus while keeping native
+ * A native input within a toolbar. Participates in the toolbar's composite focus while keeping native
  * text-editing: the arrow keys move the caret within the text and only move focus to the
  * neighbouring toolbar item once the caret is at the corresponding edge (Base UI "composite" input).
  *
@@ -111,7 +119,7 @@ declare class RdxToolbarLink {
 declare class RdxToolbarInput {
     protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
     private readonly groupContext;
-    private readonly rovingItem;
+    private readonly compositeItem;
     private readonly elementRef;
     private readonly isBrowser;
     /** The initial value of the uncontrolled input. */
@@ -134,7 +142,7 @@ declare class RdxToolbarInput {
     constructor();
     private handleCaretKeydown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarInput, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxCompositeItem; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -179,4 +187,4 @@ declare class RdxToolbarModule {
 }
 
 export { RdxToolbarButton, RdxToolbarGroup, RdxToolbarInput, RdxToolbarLink, RdxToolbarModule, RdxToolbarRoot, RdxToolbarSeparator, injectToolbarGroupContext, injectToolbarRootContext, provideToolbarGroupContext, provideToolbarRootContext, toolbarImports };
-export type { RdxToolbarGroupContext, RdxToolbarRootContext };
+export type { RdxToolbarGroupContext, RdxToolbarItemMetadata, RdxToolbarRootContext };