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

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

@@ -0,0 +1,337 @@
+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_types_radix_ng_primitives_core from '@radix-ng/primitives/types/radix-ng-primitives-core';
+import * as i1$1 from '@radix-ng/primitives/core';
+import { BooleanInput, RdxFormCheckboxControl } from '@radix-ng/primitives/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+declare class RdxCheckboxIndicatorPresenceDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxIndicatorPresenceDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxIndicatorPresenceDirective, "ng-template[rdxCheckboxIndicatorPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare class RdxCheckboxInputDirective {
+    protected readonly rootContext: {
+        checked: _angular_core.Signal<boolean>;
+        indeterminate: _angular_core.Signal<boolean>;
+        disabled: _angular_core.Signal<boolean>;
+        required: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        value: _angular_core.InputSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
+        parent: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        form: _angular_core.InputSignal<string | undefined>;
+        readonly: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+        toggle(): void;
+    };
+    private readonly input;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxInputDirective, "input[rdxCheckboxInput]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Internal tri-state used only for the derived `parent` (select-all) state in
+ * `rdxCheckboxGroup` and the `data-state` string. The public `checked` member is
+ * a plain `boolean`; mixed state is exposed via the separate `indeterminate`
+ * member (Base UI shape).
+ */
+type CheckedState = boolean | 'indeterminate';
+declare function isIndeterminate(checked?: CheckedState): checked is 'indeterminate';
+declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+declare const rootContext: () => {
+    checked: _angular_core.Signal<boolean>;
+    indeterminate: _angular_core.Signal<boolean>;
+    disabled: _angular_core.Signal<boolean>;
+    required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    value: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    parent: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    form: _angular_core.InputSignal<string | undefined>;
+    readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+    toggle(): void;
+};
+type CheckboxRootContext = ReturnType<typeof rootContext>;
+declare const injectCheckboxRootContext: (optional?: boolean) => {
+    checked: _angular_core.Signal<boolean>;
+    indeterminate: _angular_core.Signal<boolean>;
+    disabled: _angular_core.Signal<boolean>;
+    required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    value: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    parent: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    form: _angular_core.InputSignal<string | undefined>;
+    readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+    toggle(): void;
+} | null;
+declare const provideCheckboxRootContext: (useFactory: () => {
+    checked: _angular_core.Signal<boolean>;
+    indeterminate: _angular_core.Signal<boolean>;
+    disabled: _angular_core.Signal<boolean>;
+    required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    value: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    parent: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    form: _angular_core.InputSignal<string | undefined>;
+    readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+    toggle(): void;
+}) => _angular_core.Provider;
+/**
+ * @group Components
+ */
+declare class RdxCheckboxRootDirective implements RdxFormCheckboxControl {
+    private readonly controlValueAccessor;
+    /** The group this checkbox belongs to, if it is rendered inside a `rdxCheckboxGroup`. */
+    private readonly group;
+    /**
+     * @ignore
+     * Reflects the effective disabled state (CVA, covering reactive-forms `.disable()`, plus the
+     * group's disabled state), used for the `data-disabled` host attribute.
+     */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /**
+     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
+     *
+     * Mixed state is no longer expressed through `checked` — use the separate
+     * `indeterminate` input (Base UI shape). This `boolean` model is what
+     * `RdxFormCheckboxControl` / Angular Signal Forms bind to.
+     * @group Props
+     */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked nor unticked.
+     * Orthogonal to `checked` and not part of the submitted form value. A user
+     * click resolves the checkbox to `checked` and clears `indeterminate`.
+     * @group Props
+     */
+    readonly indeterminate: _angular_core.ModelSignal<boolean>;
+    /**
+     * The value of the checkbox. This is what is submitted with the form when the checkbox is checked.
+     *
+     * Bound publicly as `[value]`; the TS member is named `submitValue` so the
+     * directive can satisfy `RdxFormCheckboxControl`, whose contract reserves a
+     * `value` member for `RdxFormValueControl` and forbids it on checkbox-style
+     * controls. (Checkbox is not yet marked `implements` — its `checked` is still
+     * `CheckedState`; see the `indeterminate` half of collision #1.)
+     * @group Props
+     */
+    readonly submitValue: _angular_core.InputSignal<string>;
+    /**
+     * Whether or not the checkbox button is disabled. This prevents the user from interacting with it.
+     * @group Props
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     * @group Props
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether or not the checkbox is required.
+     * @group Props
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Name of the form control. Submitted with the form as part of a name/value pair. Inside a
+     * `rdxCheckboxGroup` this also identifies the checkbox in the group's value array.
+     * @group Props
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * When inside a `rdxCheckboxGroup`, marks this as the "select all" checkbox: its state is
+     * derived from the group's `allValues`, and toggling it checks or unchecks every child.
+     * @group Props
+     */
+    readonly parent: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Associates the control with a form element.
+     * @group Props
+     */
+    readonly form: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Event emitted when the checkbox checked state changes.
+     * @group Emits
+     */
+    readonly onCheckedChange: _angular_core.OutputRef<any>;
+    /**
+     * @ignore
+     * The effective checked state as a `boolean`. Inside a `rdxCheckboxGroup` it is derived from the
+     * group (a `parent` checkbox is checked only when every child is; a child from whether its `name`
+     * is in the group value); standalone it reads the CVA value.
+     */
+    readonly checkedState: _angular_core.Signal<boolean>;
+    /**
+     * @ignore
+     * The effective mixed state. A `parent` checkbox is indeterminate when some — but not all —
+     * children are checked; otherwise it follows the `indeterminate` input.
+     */
+    readonly indeterminateState: _angular_core.Signal<boolean>;
+    /** @ignore The effective disabled state, including the group. */
+    readonly disabledState: _angular_core.Signal<boolean>;
+    readonly state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+    constructor();
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxRootDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxRootDirective, "[rdxCheckboxRoot]", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "submitValue": { "alias": "value"; "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; }; "parent": { "alias": "parent"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "onCheckedChange": "onCheckedChange"; }, never, never, true, [{ directive: typeof i1$1.RdxControlValueAccessor; inputs: { "value": "checked"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Directive: rdxCheckboxButton
+ * Purpose: Turns a native <button> into an accessible checkbox control bound to the Radix Checkbox context.
+ * It mirrors the checkbox state via ARIA/data attributes, toggles on click, and prevents Enter activation per WAI-ARIA.
+ * In forms, it stops the button's click from bubbling so only the hidden input emits the native event used for form/validator integration.
+ */
+declare class RdxCheckboxButtonDirective {
+    protected readonly rootContext: {
+        checked: _angular_core.Signal<boolean>;
+        indeterminate: _angular_core.Signal<boolean>;
+        disabled: _angular_core.Signal<boolean>;
+        required: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        value: _angular_core.InputSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
+        parent: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        form: _angular_core.InputSignal<string | undefined>;
+        readonly: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+        toggle(): void;
+    };
+    private readonly group;
+    private readonly elementRef;
+    /** A `parent` checkbox lists the ids of the children it controls. */
+    protected readonly ariaControls: _angular_core.Signal<string | undefined>;
+    constructor();
+    protected clicked(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxButtonDirective, "button[rdxCheckboxButton]", never, {}, {}, never, never, true, never>;
+}
+
+declare class RdxCheckboxIndicatorDirective {
+    protected readonly rootContext: {
+        checked: _angular_core.Signal<boolean>;
+        indeterminate: _angular_core.Signal<boolean>;
+        disabled: _angular_core.Signal<boolean>;
+        required: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        value: _angular_core.InputSignal<string>;
+        name: _angular_core.InputSignal<string | undefined>;
+        parent: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        form: _angular_core.InputSignal<string | undefined>;
+        readonly: _angular_core.InputSignalWithTransform<boolean, _radix_ng_primitives_types_radix_ng_primitives_core.BooleanInput>;
+        state: _angular_core.Signal<"indeterminate" | "checked" | "unchecked">;
+        toggle(): void;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxIndicatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxIndicatorDirective, "[rdxCheckboxIndicator]", never, {}, {}, never, never, true, never>;
+}
+
+interface RdxCheckboxGroupContext {
+    /** The names of the currently checked checkboxes. */
+    value: Signal<string[]>;
+    /** All checkbox names, used by a `parent` checkbox to check/uncheck every child. */
+    allValues: Signal<string[]>;
+    /** Whether the whole group is disabled. */
+    disabled: Signal<boolean>;
+    /** The derived state of a `parent` checkbox: all / none / some checked. */
+    parentState: Signal<CheckedState>;
+    /** The space-separated control ids the `parent` checkbox controls (for `aria-controls`). */
+    controlledIds: Signal<string | undefined>;
+    /** A stable id for a child's control element, derived from the group id and the child name. */
+    controlId: (name: string) => string;
+    /** Toggle a single child by name. */
+    toggleValue: (name: string) => void;
+    /** Toggle every child on or off (used by a `parent` checkbox). */
+    toggleAll: () => void;
+    /** Register a child's name and disabled state so the parent can preserve disabled items. */
+    registerChild: (name: string, disabled: Signal<boolean>) => () => void;
+    /** Register a child's control element id so the parent can reference it via `aria-controls`. */
+    registerControl: (name: string, id: string) => () => void;
+}
+declare const injectCheckboxGroupContext: (optional?: boolean) => RdxCheckboxGroupContext | null;
+declare const provideCheckboxGroupContext: (useFactory: () => RdxCheckboxGroupContext) => _angular_core.Provider;
+/**
+ * Groups a set of checkboxes that share a single array value (the names of the checked boxes).
+ *
+ * Each child `rdxCheckboxRoot` participates by its `name`. A child marked `parent` becomes a
+ * "select all" checkbox whose state is derived from `allValues`.
+ */
+declare class RdxCheckboxGroupDirective implements ControlValueAccessor {
+    /** The names of the currently checked checkboxes. Use with `onValueChange` or `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<string[]>;
+    /** The names checked initially when the group is uncontrolled. */
+    readonly defaultValue: _angular_core.InputSignal<string[] | undefined>;
+    /** All checkbox names in the group. Required for a `parent` (select-all) checkbox. */
+    readonly allValues: _angular_core.InputSignal<string[]>;
+    /** Whether the whole group is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Emits the new array of checked names whenever the value changes. */
+    readonly onValueChange: _angular_core.OutputEmitterRef<string[]>;
+    private readonly disabledByCva;
+    readonly disabledState: Signal<boolean>;
+    /** Derived state for a `parent` checkbox: `true` (all), `false` (none) or `'indeterminate'`. */
+    readonly parentState: Signal<CheckedState>;
+    /**
+     * The value as last set directly by a child (or the initial value) — the "remembered" partial
+     * selection that a `parent` checkbox cycles back to, mirroring Base UI's `uncontrolledStateRef`.
+     */
+    private uncontrolledState;
+    private seeded;
+    /** Where the parent is in its mixed → on → off cycle. Reset to `mixed` on any direct child change. */
+    private parentStatus;
+    /** Per-name disabled signals, so the parent can preserve disabled-but-checked children. */
+    private readonly disabledByName;
+    /** Stable group id used to derive child control ids when the consumer sets none. */
+    private readonly elementId;
+    /** Registered control element ids, keyed by child name. */
+    private readonly controlIds;
+    /** The space-separated control ids in `allValues` order, for the parent's `aria-controls`. */
+    readonly controlledIds: Signal<string | undefined>;
+    private hasAppliedDefault;
+    private onChange;
+    onTouched: () => void;
+    constructor();
+    /** @ignore Register a child's disabled signal keyed by its name. */
+    registerChild(name: string, disabled: Signal<boolean>): () => void;
+    /** A stable control id for a child, derived from the group id and the child name. */
+    controlId(name: string): string;
+    /** @ignore Register a child's control element id so the parent can list it in `aria-controls`. */
+    registerControl(name: string, id: string): () => void;
+    /** Add/remove a single child name from the value (a direct child change). */
+    toggleValue(name: string): void;
+    /**
+     * Toggle from the `parent` checkbox. Mirrors Base UI's `useCheckboxGroupParent`:
+     *
+     * - When the remembered selection is all/none, this is a plain check-all ↔ uncheck-all toggle.
+     * - When it is a partial selection, clicks cycle: partial → all → none → partial → …, so the
+     *   user's original partial choice is restored rather than lost.
+     *
+     * Disabled-but-checked children are always preserved (they cannot be toggled programmatically).
+     */
+    toggleAll(): void;
+    private isNameDisabled;
+    /** Seed the remembered selection from the current value the first time the parent is used. */
+    private ensureSeeded;
+    private emit;
+    /** @ignore */
+    writeValue(value: 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<RdxCheckboxGroupDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCheckboxGroupDirective, "[rdxCheckboxGroup]", ["rdxCheckboxGroup"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "allValues": { "alias": "allValues"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "onValueChange": "onValueChange"; }, never, never, true, never>;
+}
+
+declare const checkboxImports: (typeof RdxCheckboxIndicatorPresenceDirective)[];
+declare class RdxCheckboxModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCheckboxModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxCheckboxModule, never, [typeof RdxCheckboxInputDirective, typeof RdxCheckboxRootDirective, typeof RdxCheckboxButtonDirective, typeof RdxCheckboxIndicatorDirective, typeof RdxCheckboxIndicatorPresenceDirective, typeof RdxCheckboxGroupDirective], [typeof RdxCheckboxInputDirective, typeof RdxCheckboxRootDirective, typeof RdxCheckboxButtonDirective, typeof RdxCheckboxIndicatorDirective, typeof RdxCheckboxIndicatorPresenceDirective, typeof RdxCheckboxGroupDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCheckboxModule>;
+}
+
+export { RdxCheckboxButtonDirective, RdxCheckboxGroupDirective, RdxCheckboxIndicatorDirective, RdxCheckboxIndicatorPresenceDirective, RdxCheckboxInputDirective, RdxCheckboxModule, RdxCheckboxRootDirective, checkboxImports, getState, injectCheckboxGroupContext, injectCheckboxRootContext, isIndeterminate, provideCheckboxGroupContext, provideCheckboxRootContext };
+export type { CheckboxRootContext, CheckedState, RdxCheckboxGroupContext };

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

@@ -0,0 +1,159 @@
+import * as _angular_core from '@angular/core';
+import { Signal, ModelSignal, WritableSignal } from '@angular/core';
+import * as _radix_ng_primitives_collapsible from '@radix-ng/primitives/collapsible';
+import { BooleanInput, RdxTransitionStatus } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/presence';
+
+/**
+ * A panel with the collapsible contents.
+ */
+declare class RdxCollapsiblePanelDirective {
+    private readonly elementRef;
+    protected readonly rootContext: _radix_ng_primitives_collapsible.CollapsibleRootContext;
+    /**
+     * Whether to keep the element in the DOM while the panel is closed.
+     * When `true`, the closed panel keeps its element (no `hidden` attribute) so the consumer's
+     * `data-closed` CSS is responsible for visually collapsing it.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly keepMounted: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
+    /**
+     * Allows the browser's built-in page search to find and expand the panel contents.
+     * When `true`, the closed panel uses `hidden="until-found"` instead of plain `hidden`.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly hiddenUntilFound: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
+    readonly height: _angular_core.WritableSignal<number | null>;
+    readonly width: _angular_core.WritableSignal<number | null>;
+    /**
+     * The `hidden` attribute value. The panel is shown while open or while its exit transition runs;
+     * a kept-mounted panel stays visible (the consumer collapses it via CSS); otherwise the closed
+     * panel is hidden — with `until-found` when find-in-page support is requested.
+     */
+    readonly hidden: _angular_core.Signal<"" | "until-found" | undefined>;
+    /**
+     * The first measurement (the initial mount) must not re-enable animations, so an element that
+     * mounts already open renders at its final size without playing the open animation.
+     */
+    private isFirstMeasure;
+    private originalStyles?;
+    constructor();
+    private updateDimensions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollapsiblePanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollapsiblePanelDirective, "[rdxCollapsiblePanel]", never, { "keepMounted": { "alias": "keepMounted"; "required": false; "isSignal": true; }; "hiddenUntilFound": { "alias": "hiddenUntilFound"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type RdxCollapsibleState = 'open' | 'closed';
+interface CollapsibleRootContext {
+    /** Stable id linking the trigger's `aria-controls` to the panel. */
+    panelId: Signal<string>;
+    /** Writable so composing primitives (Accordion) can drive the state. */
+    open: ModelSignal<boolean>;
+    disabled: Signal<boolean>;
+    /** Open/close transition phase, for `data-starting-style` / `data-ending-style`. */
+    transitionStatus: Signal<RdxTransitionStatus>;
+    /** `true` while the panel should stay rendered: open, or running its exit transition. */
+    mounted: Signal<boolean>;
+    /**
+     * Composition fallbacks. The standalone Panel inputs write here, and Accordion writes here
+     * directly; the Panel reads these so both wiring paths converge on a single source of truth.
+     */
+    keepMounted: WritableSignal<boolean>;
+    hiddenUntilFound: WritableSignal<boolean>;
+    toggle: () => void;
+    /** Registers the panel element whose transition duration gates the close completion. */
+    registerTransitionElement: (element: HTMLElement) => () => void;
+}
+declare const injectCollapsibleRootContext: (optional?: boolean) => CollapsibleRootContext | null;
+declare const provideCollapsibleRootContext: (useFactory: () => CollapsibleRootContext) => _angular_core.Provider;
+/**
+ * Groups all parts of the collapsible.
+ *
+ * @group Components
+ */
+declare class RdxCollapsibleRootDirective {
+    private readonly transition;
+    /** Reactive open/close transition phase (`'starting'` | `'ending'` | `undefined`). */
+    readonly transitionStatus: Signal<RdxTransitionStatus>;
+    /** Registers the panel element whose transition duration gates the close completion. */
+    readonly registerTransitionElement: (element: HTMLElement) => () => void;
+    /**
+     * The controlled open state of the collapsible.
+     * `true` - expanded, `false` - collapsed.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly open: ModelSignal<boolean>;
+    /**
+     * The open state of the collapsible when it is initially rendered.
+     * Use when you do not need to control its open state.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly defaultOpen: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the component should ignore user interaction.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Stable id linking the trigger's `aria-controls` to the panel. */
+    readonly panelId: _angular_core.InputSignal<string>;
+    /** Composition fallbacks (see {@link CollapsibleRootContext}). Default `false`. */
+    readonly keepMountedContext: WritableSignal<boolean>;
+    readonly hiddenUntilFoundContext: WritableSignal<boolean>;
+    /** `true` while the panel must stay rendered: open, or mid exit transition. */
+    readonly mounted: Signal<boolean>;
+    /**
+     * Event handler called when the open state of the collapsible changes.
+     *
+     * @group Emits
+     */
+    readonly onOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Event handler called after the open/close transition has finished.
+     *
+     * @group Emits
+     */
+    readonly onOpenChangeComplete: _angular_core.OutputEmitterRef<boolean>;
+    private hasAppliedDefaultOpen;
+    private previousOpen;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollapsibleRootDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollapsibleRootDirective, "[rdxCollapsibleRoot]", ["rdxCollapsibleRoot"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "panelId": { "alias": "panelId"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "onOpenChange": "onOpenChange"; "onOpenChangeComplete": "onOpenChangeComplete"; }, never, never, true, never>;
+}
+
+/**
+ * A button that opens and closes the collapsible panel.
+ */
+declare class RdxCollapsibleTriggerDirective {
+    protected readonly rootContext: _radix_ng_primitives_collapsible.CollapsibleRootContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollapsibleTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollapsibleTriggerDirective, "[rdxCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Structural directive that mounts the collapsible panel contents only while open, unmounting them
+ * once the exit animation finishes. Opt into this when the closed contents should leave the DOM;
+ * otherwise apply `rdxCollapsiblePanel` directly (optionally with `keepMounted`).
+ */
+declare class RdxCollapsiblePanelPresenceDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollapsiblePanelPresenceDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollapsiblePanelPresenceDirective, "ng-template[rdxCollapsiblePanelPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare class RdxCollapsibleModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollapsibleModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxCollapsibleModule, never, [typeof RdxCollapsiblePanelDirective, typeof RdxCollapsibleRootDirective, typeof RdxCollapsibleTriggerDirective, typeof RdxCollapsiblePanelPresenceDirective], [typeof RdxCollapsiblePanelDirective, typeof RdxCollapsibleRootDirective, typeof RdxCollapsibleTriggerDirective, typeof RdxCollapsiblePanelPresenceDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCollapsibleModule>;
+}
+
+export { RdxCollapsibleModule, RdxCollapsiblePanelDirective, RdxCollapsiblePanelPresenceDirective, RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, injectCollapsibleRootContext, provideCollapsibleRootContext };
+export type { CollapsibleRootContext, RdxCollapsibleState };

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

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Marks an element as a member of a collection. Items are discovered by the
+ * {@link RdxCollectionProvider} via `contentChildren`, so registration is automatic — no manual
+ * book-keeping or marker attributes are needed.
+ *
+ * @group Components
+ */
+declare class RdxCollectionItem<T = unknown> {
+    /** The host element of the item, read straight off the instance. */
+    readonly element: HTMLElement;
+    /** Arbitrary data associated with the item. */
+    readonly value: _angular_core.InputSignal<T | undefined>;
+    /** Whether the item is disabled. Disabled items are excluded from {@link RdxCollectionProvider.enabledItems}. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollectionItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollectionItem<any>, "[rdxCollectionItem]", ["rdxCollectionItem"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Collects {@link RdxCollectionItem} descendants in DOM order, reactively, using Angular's
+ * `contentChildren`. Matches host directives too, so items composed via `hostDirectives` are found.
+ *
+ * @group Components
+ */
+declare class RdxCollectionProvider {
+    /** All items, in DOM order. */
+    readonly items: _angular_core.Signal<readonly RdxCollectionItem<any>[]>;
+    /** Items that are not disabled. Recomputes when an item's `disabled` flag changes. */
+    readonly enabledItems: _angular_core.Signal<RdxCollectionItem<any>[]>;
+    /** Returns the collection items, excluding disabled ones unless `includeDisabled` is `true`. */
+    getItems(includeDisabled?: boolean): readonly RdxCollectionItem[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCollectionProvider, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCollectionProvider, "[rdxCollectionProvider]", ["rdxCollectionProvider"], {}, {}, ["items"], never, true, never>;
+}
+
+/**
+ * Convenience accessor for the nearest {@link RdxCollectionProvider}. Equivalent to
+ * `inject(RdxCollectionProvider)`; returns the provider with its reactive `items`/`enabledItems`.
+ */
+declare function useCollection(): RdxCollectionProvider;
+
+export { RdxCollectionItem, RdxCollectionProvider, useCollection };

package/{config/index.d.ts → types/radix-ng-primitives-config.d.ts}

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
-import { Direction } from '@angular/cdk/bidi';
+import { Direction } from '@radix-ng/primitives/core';
 
 type RadixNGConfig = {
     /**

package/types/radix-ng-primitives-context-menu.d.ts

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/menu';
+import { RdxMenuRoot, RdxMenuAutoFocusInput } from '@radix-ng/primitives/menu';
+import * as _radix_ng_primitives_context_menu from '@radix-ng/primitives/context-menu';
+import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
+
+interface RdxContextMenuRootContext {
+    /** Whether the context menu is currently open. */
+    isOpen: Signal<boolean>;
+    /** Whether the whole menu is disabled. */
+    disabled: Signal<boolean>;
+    /** Open the menu anchored at the given viewport coordinates. */
+    openAt: (clientX: number, clientY: number, autoFocus?: RdxMenuAutoFocusInput) => void;
+    /** Close the menu. */
+    close: () => void;
+}
+declare const injectRdxContextMenuRootContext: (optional?: boolean) => RdxContextMenuRootContext | null;
+declare const provideRdxContextMenuRootContext: (useFactory: () => RdxContextMenuRootContext) => i0.Provider;
+/**
+ * Groups all parts of a context menu. Composes the Menu primitive but, instead of anchoring the
+ * popup to a trigger element, anchors it to the pointer position captured by `rdxContextMenuTrigger`.
+ *
+ * Reuse the Menu popup parts inside it — `rdxMenuPositioner`, `rdxMenuPopup`, `rdxMenuItem`,
+ * `rdxMenuCheckboxItem`, `rdxMenuRadioGroup`, `rdxMenuSubTrigger`, `rdxMenuSeparator`, … all behave
+ * identically here.
+ */
+declare class RdxContextMenuRoot {
+    readonly menuRoot: RdxMenuRoot;
+    private readonly popper;
+    /**
+     * Open the menu with the popup anchored at the given viewport coordinates.
+     *
+     * `autoFocus` defaults to `'popup'` so a right-click opens with the popup focused but no item
+     * highlighted (matching Base UI's pointer behavior). Pass `'first'` for keyboard opening.
+     */
+    openAt(clientX: number, clientY: number, autoFocus?: RdxMenuAutoFocusInput): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuRoot, "[rdxContextMenuRoot]", ["rdxContextMenuRoot"], {}, {}, never, never, true, [{ directive: typeof i1.RdxMenuRoot; inputs: { "open": "open"; "modal": "modal"; "loopFocus": "loopFocus"; "highlightItemOnHover": "highlightItemOnHover"; }; outputs: { "openChange": "openChange"; "onOpenChange": "onOpenChange"; "onOpenChangeComplete": "onOpenChangeComplete"; }; }]>;
+}
+
+/**
+ * An area that opens the context menu on right click (or a touch long-press).
+ *
+ * Apply it to the element that should respond to the context-menu gesture; the popup is positioned
+ * at the pointer, not against this element.
+ */
+declare class RdxContextMenuTrigger {
+    protected readonly rootContext: _radix_ng_primitives_context_menu.RdxContextMenuRootContext;
+    /** Whether the trigger is disabled. */
+    readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    /** How long (ms) a touch must be held before the menu opens. */
+    readonly longPressDelay: i0.InputSignalWithTransform<number, NumberInput>;
+    private longPressTimer;
+    private longPressOrigin;
+    private lastPointerDownTime;
+    constructor();
+    protected onContextMenu(event: MouseEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected cancelLongPress(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxContextMenuTrigger, "[rdxContextMenuTrigger]", ["rdxContextMenuTrigger"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "longPressDelay": { "alias": "longPressDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class RdxContextMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxContextMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxContextMenuModule, never, [typeof RdxContextMenuRoot, typeof RdxContextMenuTrigger], [typeof RdxContextMenuRoot, typeof RdxContextMenuTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RdxContextMenuModule>;
+}
+
+export { RdxContextMenuModule, RdxContextMenuRoot, RdxContextMenuTrigger, injectRdxContextMenuRootContext, provideRdxContextMenuRootContext };
+export type { RdxContextMenuRootContext };