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

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

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
 import { Signal } from '@angular/core';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { BooleanInput, NumberInput } from '@radix-ng/primitives/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. */
@@ -15,7 +16,7 @@ interface RdxContextMenuRootContext {
     /** Close the menu. */
     close: () => void;
 }
-declare const injectRdxContextMenuRootContext: (optional?: boolean) => RdxContextMenuRootContext | null;
+declare const injectRdxContextMenuRootContext: _radix_ng_primitives_core.InjectContext<RdxContextMenuRootContext>;
 declare const provideRdxContextMenuRootContext: (useFactory: () => RdxContextMenuRootContext) => i0.Provider;
 /**
  * Groups all parts of a context menu. Composes the Menu primitive but, instead of anchoring the

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

@@ -151,15 +151,28 @@ declare function roundToStepPrecision(value: number, step: number): number;
  */
 declare function snapValueToStep(value: number, min: number | undefined, max: number | undefined, step: number): number;
 
+/**
+ * Retrieves the context value from Angular's dependency injection.
+ * Overloaded so the non-optional call returns a non-nullable `T` (no `!` needed),
+ * while the optional call may return `null`.
+ */
+interface InjectContext<T> {
+    (): T;
+    (optional: false): T;
+    (optional: true): T | null;
+    (optional?: boolean): T | null;
+}
 /**
  * Creates a context with injector and provider functions for a given type
  * @template T The type of the context value
  * @param description Descriptive string for the context (used in token creation)
+ * @param docs Documentation path for the owning primitive (e.g. `'components/accordion'`),
+ *   appended to the missing-context error as a link to the required anatomy
  * @returns A tuple containing:
  *   - injectContext: Function to retrieve the context value
  *   - provideContext: Function to create a provider for the context
  */
-declare function createContext<T>(description: string): readonly [injectContext: (optional?: boolean) => T | null, provideContext: (useFactory: () => T) => Provider];
+declare function createContext<T>(description: string, docs?: string): readonly [injectContext: InjectContext<T>, provideContext: (useFactory: () => T) => Provider];
 
 declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
 declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
@@ -332,6 +345,12 @@ declare function areAllDaysBetweenValid(start: DateValue, end: DateValue, isUnav
 type TimeValue = Time | CalendarDateTime | ZonedDateTime;
 type Granularity = 'day' | 'hour' | 'minute' | 'second';
 type TimeGranularity = 'hour' | 'minute' | 'second';
+/**
+ * The granularities that require a time component (and therefore a `CalendarDateTime`
+ * rather than a `CalendarDate`). Single source of truth — used by both the default-date
+ * builder and the segment-value initializer.
+ */
+declare const TIME_GRANULARITIES: readonly Granularity[];
 type GetDefaultDateProps = {
     defaultValue?: DateValue | DateValue[] | undefined;
     defaultPlaceholder?: DateValue | undefined;
@@ -394,7 +413,7 @@ type SyncTimeSegmentValuesProps = {
     formatter: Formatter;
 };
 declare function syncTimeSegmentValues(props: SyncTimeSegmentValuesProps): SegmentValueObj;
-declare function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
+declare function initializeSegmentValues(granularity: Granularity, isTimeValue?: boolean): SegmentValueObj;
 type SharedContentProps = {
     granularity: Granularity;
     dateRef: DateValue;
@@ -451,54 +470,9 @@ type SegmentAttrProps = {
     placeholder: DateValue;
     formatter: Formatter;
 };
-declare function daySegmentAttrs(props: SegmentAttrProps): {
-    'aria-label': string;
-    'aria-valuemin': number;
-    'aria-valuemax': number;
-    'aria-valuenow': number;
-    'aria-valuetext': string;
-    'data-placeholder': string | undefined;
-    role: string;
-    contenteditable: boolean;
-    tabindex: number | undefined;
-    spellcheck: boolean;
-    inputmode: string;
-    autocorrect: string;
-    enterkeyhint: string;
-    style: string;
-};
-declare function monthSegmentAttrs(props: SegmentAttrProps): {
-    'aria-label': string;
-    contenteditable: boolean;
-    'aria-valuemin': number;
-    'aria-valuemax': number;
-    'aria-valuenow': number;
-    'aria-valuetext': string;
-    'data-placeholder': string | undefined;
-    role: string;
-    tabindex: number | undefined;
-    spellcheck: boolean;
-    inputmode: string;
-    autocorrect: string;
-    enterkeyhint: string;
-    style: string;
-};
-declare function yearSegmentAttrs(props: SegmentAttrProps): {
-    'aria-label': string;
-    'aria-valuemin': number;
-    'aria-valuemax': number;
-    'aria-valuenow': number;
-    'aria-valuetext': string;
-    'data-placeholder': string | undefined;
-    role: string;
-    contenteditable: boolean;
-    tabindex: number | undefined;
-    spellcheck: boolean;
-    inputmode: string;
-    autocorrect: string;
-    enterkeyhint: string;
-    style: string;
-};
+declare function daySegmentAttrs(props: SegmentAttrProps): {};
+declare function monthSegmentAttrs(props: SegmentAttrProps): {};
+declare function yearSegmentAttrs(props: SegmentAttrProps): {};
 declare function hourSegmentAttrs(props: SegmentAttrProps): {};
 declare function minuteSegmentAttrs(props: SegmentAttrProps): {};
 declare function secondSegmentAttrs(props: SegmentAttrProps): {};
@@ -605,6 +579,36 @@ declare class RdxIdGenerator {
  */
 declare function injectId(prefix: string): string;
 
+/**
+ * A comparator for list-item values, aligned with Base UI's `isItemEqualToValue` naming.
+ *
+ * - a **function** `(a, b) => boolean` — full control over equality;
+ * - a **string** — an object key whose values are compared with {@link isEqual} (Reka-style `by`);
+ * - omitted — structural deep equality via {@link isEqual}.
+ */
+type ItemValueComparator<T = unknown> = ((a: T, b: T) => boolean) | string;
+/**
+ * Converts an item value to the string shown to the user.
+ *
+ * Strings pass through unchanged; `null`/`undefined` become an empty string; everything else is
+ * coerced with `String()`. Primitives that hold object values (e.g. combobox) typically pass their
+ * own `itemToStringLabel` to render a field off the object instead.
+ */
+declare function itemToStringLabel(value: unknown): string;
+/**
+ * Converts an item value to the string used for form serialization. Defaults to the same rules as
+ * {@link itemToStringLabel}; kept as a separate export so a primitive can diverge label vs. value.
+ */
+declare function itemToStringValue(value: unknown): string;
+/**
+ * Compares two item values for equality using an optional {@link ItemValueComparator}.
+ *
+ * @example
+ * isItemEqualToValue({ id: 1 }, { id: 1 }, 'id'); // true — compares the `id` key
+ * isItemEqualToValue({ id: 1 }, { id: 1 });       // true — deep equality fallback
+ */
+declare function isItemEqualToValue<T>(a: T, b: T, comparator?: ItemValueComparator<T>): boolean;
+
 declare const ALT = "Alt";
 declare const ARROW_DOWN = "ArrowDown";
 declare const ARROW_LEFT = "ArrowLeft";
@@ -745,15 +749,27 @@ interface RdxFormUiControl {
     readonly invalid?: RdxFormStateInput<boolean>;
     readonly hidden?: RdxFormStateInput<boolean>;
     readonly pending?: RdxFormStateInput<boolean>;
-    readonly touched?: RdxFormStateInput<boolean>;
+    /**
+     * Touched status the form writes into the control.
+     *
+     * The two API generations disagree on the notification half: the 21.x
+     * experimental implementation listens to a `touched` **model**'s
+     * `touchedChange` output, while stable Angular 22 reverted to a plain
+     * `touched` input plus a separate {@link touch} output. A `model()` set on
+     * blur **plus** an emitted `touch` output satisfies both (`ModelSignal`
+     * extends `InputSignalWithTransform`, so it type-checks as the 22 input).
+     */
+    readonly touched?: ModelSignal<boolean> | RdxFormStateInput<boolean> | OutputRef<boolean>;
     readonly dirty?: RdxFormStateInput<boolean>;
     readonly name?: RdxFormStateInput<string | undefined>;
     readonly errors?: RdxFormStateInput<readonly RdxValidationError[]>;
     readonly minLength?: RdxFormStateInput<number | undefined>;
     readonly maxLength?: RdxFormStateInput<number | undefined>;
     readonly pattern?: RdxFormStateInput<readonly RegExp[]>;
-    /** Notifies the form that the control was touched (mirror of Angular's `touch` output). */
+    /** Notifies the form the control was touched (stable Angular 22 contract; ignored by 21.x). */
     readonly touch?: OutputRef<void>;
+    /** Resets the control's UI state (optional method added in stable Angular 22). */
+    reset?(): void;
 }
 /**
  * Mirror of `FormValueControl<TValue>` — a control that edits a single value via
@@ -802,8 +818,13 @@ declare function resizeEffect(options: {
 }): EffectRef;
 
 /**
- * Locks `document.body` scrolling while `active()` is `true`, and restores the original overflow
- * when it becomes `false` or the calling context is destroyed.
+ * Locks page scrolling while `active()` is `true`, and restores the original state when it becomes
+ * `false` or the calling context is destroyed.
+ *
+ * Locks **both** `<body>` and `<html>`: a `body { overflow: hidden }` lock alone does *not* stop the
+ * page when `<html>` is the scroller (e.g. a global `overflow-y: scroll`, as Storybook sets), because
+ * body-overflow only propagates to the viewport when `<html>`'s overflow is `visible`. The width of
+ * the removed scrollbar is added as `padding-right` on `<html>` so the page doesn't shift.
  *
  * Lock ownership is shared across all callers via a single module-level counter, so nested or
  * concurrent overlays compose correctly. Must be called in an injection context.
@@ -874,6 +895,39 @@ interface ArrowNavigationOptions {
  */
 declare function useArrowNavigation(e: KeyboardEvent, currentElement: HTMLElement, parentElement: HTMLElement | undefined, options?: ArrowNavigationOptions): HTMLElement | null;
 
+/**
+ * Locale-aware string matching backed by `Intl.Collator`, mirroring Base UI's `useFilter`.
+ *
+ * The collator defaults to `sensitivity: 'base'`, so matching is both case-insensitive and
+ * diacritic-insensitive (`"Äpfel"` matches `"ap"`, `"résumé"` matches `"resume"`). Pass `locale`
+ * and/or any `Intl.Collator` options to override.
+ */
+interface UseFilterOptions extends Intl.CollatorOptions {
+    /** Locale(s) for the collator. Defaults to the runtime's default locale. */
+    locale?: Intl.LocalesArgument;
+}
+/** Predicates returned by {@link useFilter}. An empty `query` always matches. */
+interface FilterPredicates {
+    /** Whether `text` contains `query`. */
+    contains: (text: string, query: string) => boolean;
+    /** Whether `text` starts with `query`. */
+    startsWith: (text: string, query: string) => boolean;
+    /** Whether `text` ends with `query`. */
+    endsWith: (text: string, query: string) => boolean;
+}
+/**
+ * Creates locale-aware `contains` / `startsWith` / `endsWith` predicates.
+ *
+ * Matching uses `Intl.Collator` with `sensitivity: 'base'` and `usage: 'search'` by default, so
+ * comparisons ignore case and diacritics. An empty (or whitespace-only) `query` matches everything,
+ * which is the natural "no filter applied" state for a combobox.
+ *
+ * @example
+ * const { contains } = useFilter();
+ * contains('Äpfel', 'ap'); // true
+ */
+declare function useFilter(options?: UseFilterOptions): FilterPredicates;
+
 /**
  * Keeps hover content open while the pointer crosses the gap between a trigger and a popup.
  */
@@ -882,6 +936,83 @@ declare function useGraceArea(triggerEl: Signal<HTMLElement | null | undefined>,
     onPointerExit: (callback: (value: void) => void) => () => void;
 };
 
+/** Options for {@link useListHighlight}. */
+interface UseListHighlightOptions<T> {
+    /** All items in DOM order (e.g. a collection provider's `items()`). */
+    items: Signal<readonly T[]>;
+    /**
+     * Whether an item can be highlighted — must return `false` for hidden (filtered-out) and
+     * disabled items. Navigation and self-healing both consult this.
+     */
+    isNavigable: (item: T) => boolean;
+    /** Resolves the item's element id, exposed as {@link ListHighlight.activeId} for `aria-activedescendant`. */
+    getId: (item: T) => string | undefined;
+    /** Whether navigation wraps at the boundaries. Defaults to `true`. */
+    loop?: Signal<boolean>;
+    /** Injector to bind the self-healing effect to when not called in an injection context. */
+    injector?: Injector;
+}
+/** Highlight-model navigation API returned by {@link useListHighlight}. */
+interface ListHighlight<T> {
+    /** The currently highlighted item, or `null`. DOM focus is never moved by this state. */
+    readonly highlightedItem: Signal<T | null>;
+    /** The highlighted item's element id, or `undefined`. Bind to `aria-activedescendant`. */
+    readonly activeId: Signal<string | undefined>;
+    /** Highlight the first navigable item. */
+    first(): void;
+    /** Highlight the last navigable item. */
+    last(): void;
+    /** Highlight the next navigable item (wraps when `loop`). */
+    next(): void;
+    /** Highlight the previous navigable item (wraps when `loop`). */
+    previous(): void;
+    /** Highlight a specific item (ignored if not navigable); pass `null` to clear. */
+    set(item: T | null): void;
+    /** Clear the highlight. */
+    clear(): void;
+}
+/**
+ * Highlight-model list navigation over a set of items, decoupled from DOM focus.
+ *
+ * Unlike roving `tabindex`, the highlight is pure state: callers move it with the keyboard while DOM
+ * focus stays on a single controlling element (e.g. a combobox `<input>`), which exposes
+ * {@link ListHighlight.activeId} as `aria-activedescendant`. Navigation only ever lands on items for
+ * which `isNavigable` returns `true`, so hidden (filtered-out) and disabled items are skipped. A
+ * self-healing effect clears the highlight if its item stops being navigable or leaves the list, so
+ * `activeId` never references a detached or hidden element.
+ *
+ * Must be called in an injection context, or given an `injector`.
+ */
+declare function useListHighlight<T>(options: UseListHighlightOptions<T>): ListHighlight<T>;
+
+interface RdxPointerDragHandlers {
+    /** Whether a press may begin a drag (e.g. enabled, not on an opt-out element, at a scroll edge). */
+    canStart: (event: PointerEvent) => boolean;
+    /** A drag actually began (the pointer moved past the start threshold). */
+    onStart: (event: PointerEvent) => void;
+    /** Pointer moved during a drag. Return `false` to end the gesture early (treated as not committed). */
+    onMove: (event: PointerEvent) => void | boolean;
+    /** The drag ended. `committed` is true only for a normal `pointerup`, false for cancel/lost-capture/early-stop. */
+    onEnd: (event: PointerEvent, committed: boolean) => void;
+}
+/**
+ * Shared pointer-drag lifecycle for gesture primitives (drawer swipe, toast swipe, etc.).
+ *
+ * A press only becomes a drag once the pointer moves past {@link DRAG_THRESHOLD}; until then it is a
+ * plain tap, so clicks on buttons inside the element keep working (the gesture never captures the
+ * pointer for a tap). Once dragging, the pointer is captured so a drag that leaves the element still
+ * completes, and `lostpointercapture` / `pointercancel` count as a non-committed end — a swallowed
+ * `pointerup` (native context menu, OS gesture, tab switch) can never wedge the gesture. Only the
+ * primary pointer is tracked, so a second finger can't start a parallel gesture. No-op outside the
+ * browser, keeping SSR safe.
+ *
+ * `onEnd` is NOT called if the host is destroyed mid-drag — callers that pair `onStart`/`onEnd`
+ * (e.g. to pause/resume timers) should balance that case in their own `DestroyRef` cleanup.
+ *
+ * Must be called from an injection context (a directive/component constructor).
+ */
+declare function usePointerDrag(handlers: RdxPointerDragHandlers): void;
+
 /**
  * Lifecycle phase of an open/close transition.
  *
@@ -969,5 +1100,5 @@ declare enum RdxPositionAlign {
     End = "end"
 }
 
-export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RdxControlValueAccessor, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, a, areAllDaysBetweenValid, clamp, createContent, createContext, createFormatter, createMonth, createMonths, elementSize, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isNullish, isNumberString, isSegmentNavigationKey, isZonedDateTime, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideToken, provideValueAccessor, resizeEffect, roundToStepPrecision, segmentBuilders, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useArrowNavigation, useDateField, useGraceArea, useScrollLock, useTransitionStatus, watch };
-export type { AcceptableValue, AnyExceptLiteral, AriaLivePoliteness, BooleanInput, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, Direction, EditableSegmentPart, Formatter, Granularity, HourCycle, Month, NonEditableSegmentPart, Nullable, NumberInput, PlaceholderMap, RdxFormCheckboxControl, RdxFormStateInput, RdxFormUiControl, RdxFormValueControl, RdxTransitionStatus, RdxTransitionStatusRef, RdxValidationError, SafeFunction, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeSegmentObj, TimeSegmentPart, TimeValue, UseDateFieldProps };
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RdxControlValueAccessor, RdxIdGenerator, RdxLiveAnnouncer, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, TIME_GRANULARITIES, a, areAllDaysBetweenValid, clamp, createContent, createContext, createFormatter, createMonth, createMonths, elementSize, getActiveElement, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getMaxTransitionDuration, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getWeekNumber, handleAndDispatchCustomEvent, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectId, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isItemEqualToValue, isNullish, isNumberString, isSegmentNavigationKey, isZonedDateTime, itemToStringLabel, itemToStringValue, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideToken, provideValueAccessor, resizeEffect, roundToStepPrecision, segmentBuilders, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useArrowNavigation, useDateField, useFilter, useGraceArea, useListHighlight, usePointerDrag, useScrollLock, useTransitionStatus, watch };
+export type { AcceptableValue, AnyExceptLiteral, AriaLivePoliteness, BooleanInput, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, Direction, EditableSegmentPart, FilterPredicates, Formatter, Granularity, HourCycle, InjectContext, ItemValueComparator, ListHighlight, Month, NonEditableSegmentPart, Nullable, NumberInput, PlaceholderMap, RdxFormCheckboxControl, RdxFormStateInput, RdxFormUiControl, RdxFormValueControl, RdxPointerDragHandlers, RdxTransitionStatus, RdxTransitionStatusRef, RdxValidationError, SafeFunction, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeSegmentObj, TimeSegmentPart, TimeValue, UseDateFieldProps, UseFilterOptions, UseListHighlightOptions };

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

@@ -1,28 +1,21 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, InputSignal, WritableSignal } from '@angular/core';
-import { NumberInput } from '@radix-ng/primitives/core';
+import { InputSignal, Signal } from '@angular/core';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
+import { NumberInput, BooleanInput } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_cropper from '@radix-ng/primitives/cropper';
 
-interface CropperContextToken {
-    image: InputSignal<string>;
-    getImageProps: () => {
-        [key: string]: any;
-    };
-    getImageWrapperStyle: () => Record<string, string>;
-    getCropAreaStyle: () => Record<string, string>;
-    descriptionId: WritableSignal<string>;
-}
-declare const CROPPER_ROOT_CONTEXT: InjectionToken<CropperContextToken>;
-declare function injectCropperRootContext(): CropperContextToken;
-
+/** A crop rectangle in the source image's natural-pixel coordinate space. */
 type Area = {
     x: number;
     y: number;
     width: number;
     height: number;
 };
-declare class RdxCropperRootDirective implements CropperContextToken {
+
+declare class RdxCropperRootDirective {
     private readonly elementRef;
+    private readonly injector;
+    private readonly isBrowser;
     private readonly CROPPER_DESC_WARN_MESSAGE;
     readonly image: _angular_core.InputSignal<string>;
     readonly cropPadding: _angular_core.InputSignalWithTransform<number, unknown>;
@@ -30,29 +23,55 @@ declare class RdxCropperRootDirective implements CropperContextToken {
     readonly minZoom: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly maxZoom: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly zoomSensitivity: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pan distance (px) per arrow-key press. */
     readonly keyboardStep: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Zoom delta per `+` / `-` / `PageUp` / `PageDown` press. */
+    readonly zoomKeyboardStep: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly zoom: _angular_core.InputSignalWithTransform<number | undefined, NumberInput>;
+    /** Accessible name for the cropper widget. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Disables all interaction (drag, wheel/pinch zoom, keyboard); exposed as `data-disabled`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     readonly onCropChange: _angular_core.OutputEmitterRef<Area | null>;
     readonly onZoomChange: _angular_core.OutputEmitterRef<number>;
     private readonly imgWidth;
     private readonly imgHeight;
+    /** Raw content-box size (px) of the root, fed by the ResizeObserver / initial measure. */
+    private readonly containerSize;
+    /**
+     * Crop-area size derived from the container minus padding, fitted to `aspectRatio`. A `computed`
+     * (not a written signal) so it stays reactive to `aspectRatio` / `cropPadding` changes, not only
+     * to container resizes — previously these inputs were read inside the ResizeObserver closure and
+     * never recomputed until the next resize.
+     */
+    private readonly cropAreaSize;
     private readonly cropAreaWidth;
     private readonly cropAreaHeight;
     private readonly imageWrapperWidth;
     private readonly imageWrapperHeight;
-    private readonly offsetX;
-    private readonly offsetY;
+    /** Raw (unclamped) pan-offset intent (px) written by gestures; clamping lives in `clampedOffset`. */
+    private readonly offset;
     private readonly internalZoom;
-    private readonly isDragging;
-    readonly descriptionId: _angular_core.WritableSignal<string>;
+    protected readonly isDragging: _angular_core.WritableSignal<boolean>;
+    readonly descriptionId: string;
     private readonly isZoomControlled;
     protected readonly effectiveZoom: _angular_core.Signal<number>;
-    protected readonly zoomValueText: _angular_core.Signal<string>;
+    /**
+     * The applied pan offset (px): the raw intent clamped to keep the image covering the crop window
+     * at the current geometry/zoom. Derived (not an effect) so it self-corrects when the container
+     * resizes or the zoom/aspect-ratio changes — no write-back, no `untracked` re-entrancy. This is the
+     * value the view renders and the crop math reads.
+     */
+    private readonly clampedOffset;
+    /**
+     * Crop rectangle derived from the rendered pan/zoom — the single source of truth for emission.
+     * `onCropChange` fires from one effect watching this, so interactions/handlers never emit directly
+     * (which previously double-emitted). Value equality keeps it from notifying on equal results.
+     */
+    private readonly cropData;
     private readonly dragStartPoint;
     private readonly dragStartOffset;
-    private readonly latestRestrictedOffset;
     private readonly latestZoom;
-    private readonly isInitialSetupDone;
     private readonly initialPinchDistance;
     private readonly initialPinchZoom;
     private readonly isPinching;
@@ -62,75 +81,89 @@ declare class RdxCropperRootDirective implements CropperContextToken {
     private initializeContainerDimensions;
     private setupImageLoadEffect;
     private setupDimensionsEffects;
+    /** Current rendered geometry the crop math operates on, read from the state signals. */
+    private geometry;
     private restrictOffset;
-    private calculateCropData;
-    private setupCropCalculationEffect;
     private setupAccessibilityWarningEffect;
+    /**
+     * Single attachment point for every interaction listener. Re-runs on `disabled()`, so a disabled
+     * cropper has NO interaction listeners bound at all — there is no per-handler `disabled` check to
+     * forget, and a new gesture path can't accidentally bypass the gate. Uses `{ passive: false }` so
+     * the handlers can `preventDefault()` (wheel/touch scrolling, arrow-key page scroll).
+     */
     private setupEventListenersEffect;
-    private handleInteractionEnd;
+    private onMouseDown;
     /**
-     * @ignore
+     * Zoom toward an anchor point (coordinates relative to the root's center). `fromZoom`/`fromOffset`
+     * are the zoom/offset the anchor is measured against — the live state for wheel/keyboard, the
+     * gesture-start baseline for pinch. Emits the zoom request via {@link updateZoom}, then re-anchors
+     * the pan offset **only when the zoom is uncontrolled**: in controlled mode the rendered zoom does
+     * not change until the parent writes `zoom` back, so writing an offset for a not-yet-applied zoom
+     * would pan the image without rescaling it (`clampedOffset` re-derives once the new zoom applies).
      */
-    onMouseDown(e: MouseEvent): void;
+    private zoomToPoint;
     private handleWheel;
     private getPinchDistance;
     private getPinchCenter;
     private handleTouchStart;
     private handleTouchMove;
     private handleTouchEnd;
+    private onKeyDown;
+    /** Zoom by `delta` keeping the crop center fixed (the keyboard counterpart of wheel/pinch zoom). */
+    private zoomFromCenter;
     /**
-     * @ignore
+     * Inline style for the image wrapper: measured size, centered in the root, then translated and
+     * scaled by the current pan offset and zoom. A `computed` (not a method) so the `[style]` binding
+     * only re-applies when an input actually changes — a per-change-detection method call would
+     * allocate a new object every tick and force a constant re-bind.
      */
-    onKeyDown(e: KeyboardEvent): void;
-    /**
-     * @ignore
-     */
-    onKeyUp(e: KeyboardEvent): void;
-    /**
-     * @ignore
-     */
-    getImageProps(): {
-        [key: string]: any;
-    };
-    /**
-     * @ignore
-     */
-    getImageWrapperStyle(): Record<string, string>;
-    /**
-     * @ignore
-     */
-    getCropAreaStyle(): Record<string, string>;
+    readonly imageWrapperStyle: _angular_core.Signal<Record<string, string>>;
+    /** Inline style for the crop-area overlay (its measured width/height). */
+    readonly cropAreaStyle: _angular_core.Signal<Record<string, string>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperRootDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperRootDirective, "[rdxCropperRoot]", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "cropPadding": { "alias": "cropPadding"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSensitivity": { "alias": "zoomSensitivity"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; }, { "onCropChange": "onCropChange"; "onZoomChange": "onZoomChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperRootDirective, "[rdxCropperRoot]", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "cropPadding": { "alias": "cropPadding"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSensitivity": { "alias": "zoomSensitivity"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "zoomKeyboardStep": { "alias": "zoomKeyboardStep"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onCropChange": "onCropChange"; "onZoomChange": "onZoomChange"; }, never, never, true, never>;
 }
 
 declare class RdxCropperImageComponent {
-    protected readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    protected readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     readonly imgClass: _angular_core.InputSignal<string | undefined>;
     readonly imgStyles: _angular_core.InputSignal<string | undefined>;
-    protected readonly imgClasses: _angular_core.Signal<string | undefined>;
-    protected readonly imgStyless: _angular_core.Signal<string | undefined>;
+    /**
+     * `alt` text for the rendered image. Defaults to `''` (decorative — screen readers skip it, since
+     * the cropper widget describes itself via the root's label/description). Set a non-empty value to
+     * give the image a meaningful accessible name.
+     */
+    readonly imgAlt: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperImageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxCropperImageComponent, "[rdxCropperImage]", never, { "imgClass": { "alias": "imgClass"; "required": false; "isSignal": true; }; "imgStyles": { "alias": "imgStyles"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RdxCropperImageComponent, "[rdxCropperImage]", never, { "imgClass": { "alias": "imgClass"; "required": false; "isSignal": true; }; "imgStyles": { "alias": "imgStyles"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class RdxCropperCropAreaDirective {
-    readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperCropAreaDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperCropAreaDirective, "[rdxCropperCropArea]", never, {}, {}, never, never, true, never>;
 }
 
 declare class RdxCropperDescriptionDirective {
-    readonly rootContext: _radix_ng_primitives_cropper.CropperContextToken;
+    readonly rootContext: _radix_ng_primitives_cropper.CropperRootContext;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperDescriptionDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxCropperDescriptionDirective, "[rdxCropperDescription]", never, {}, {}, never, never, true, never>;
 }
 
+interface CropperRootContext {
+    image: InputSignal<string>;
+    imageWrapperStyle: Signal<Record<string, string>>;
+    cropAreaStyle: Signal<Record<string, string>>;
+    descriptionId: string;
+}
+declare const injectCropperRootContext: _radix_ng_primitives_core.InjectContext<CropperRootContext>;
+declare const provideCropperRootContext: (useFactory: () => CropperRootContext) => _angular_core.Provider;
+
 declare class RdxCropperModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxCropperModule, never>;
     static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxCropperModule, never, [typeof RdxCropperRootDirective, typeof RdxCropperImageComponent, typeof RdxCropperCropAreaDirective, typeof RdxCropperDescriptionDirective], [typeof RdxCropperRootDirective, typeof RdxCropperImageComponent, typeof RdxCropperCropAreaDirective, typeof RdxCropperDescriptionDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxCropperModule>;
 }
 
-export { CROPPER_ROOT_CONTEXT, RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext };
-export type { Area, CropperContextToken };
+export { RdxCropperCropAreaDirective, RdxCropperDescriptionDirective, RdxCropperImageComponent, RdxCropperModule, RdxCropperRootDirective, injectCropperRootContext, provideCropperRootContext };
+export type { Area, CropperRootContext };

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

@@ -6,11 +6,11 @@ import { DateValue } from '@internationalized/date';
 
 declare class RdxDateFieldRootDirective {
     /**
-     * The controlled checked state of the calendar.
+     * The controlled value of the date field.
      */
     readonly value: _angular_core.ModelSignal<DateValue | undefined>;
     /**
-     * A callback fired when the date field's value is invalid.
+     * A matcher that marks specific dates as unavailable; a matched value makes the field invalid.
      */
     readonly isDateUnavailable: _angular_core.InputSignal<DateMatcher | undefined>;
     /**
@@ -178,14 +178,20 @@ declare class RdxDateFieldInputDirective {
     private readonly fieldData;
     private readonly attributes;
     /**
+     * Attribute keys applied imperatively on the previous effect run, so keys that
+     * disappear from `attributes()` are removed instead of lingering as stale state.
      * @ignore
      */
-    handleSegmentClick: (e: Event) => void;
+    private appliedAttrs;
+    constructor();
     /**
      * @ignore
      */
-    handleSegmentKeydown: (e: Event) => void;
-    constructor();
+    handleSegmentClick(event: Event): void;
+    /**
+     * @ignore
+     */
+    handleSegmentKeydown(event: Event): void;
     /**
      * @ignore
      */

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

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, Provider, Signal, ElementRef } from '@angular/core';
 import * as i1 from '@radix-ng/primitives/presence';
+import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { RdxTransitionStatus, BooleanInput } from '@radix-ng/primitives/core';
 import * as _radix_ng_primitives_dialog from '@radix-ng/primitives/dialog';
 import * as i1$1 from '@radix-ng/primitives/portal';
@@ -93,7 +94,7 @@ interface RdxDialogRootContext {
     close: (reason?: RdxDialogOpenChangeReason, event?: Event) => void;
     toggle: (triggerId: string, trigger: HTMLElement, payload?: unknown, event?: Event) => void;
 }
-declare const injectRdxDialogRootContext: (optional?: boolean) => RdxDialogRootContext | null;
+declare const injectRdxDialogRootContext: _radix_ng_primitives_core.InjectContext<RdxDialogRootContext>;
 declare const provideRdxDialogRootContext: (useFactory: () => RdxDialogRootContext) => _angular_core.Provider;
 /**
  * Groups all parts of the dialog.