@radix-ng/primitives 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -166,11 +166,13 @@ interface InjectContext<T> {
  * 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: InjectContext<T>, 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"];
@@ -343,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;
@@ -405,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;
@@ -462,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): {};
@@ -616,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";
@@ -756,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
@@ -813,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.
@@ -885,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.
  */
@@ -893,6 +936,55 @@ 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;
@@ -1008,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, usePointerDrag, useScrollLock, useTransitionStatus, watch };
-export type { AcceptableValue, AnyExceptLiteral, AriaLivePoliteness, BooleanInput, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, Direction, EditableSegmentPart, Formatter, Granularity, HourCycle, InjectContext, Month, NonEditableSegmentPart, Nullable, NumberInput, PlaceholderMap, RdxFormCheckboxControl, RdxFormStateInput, RdxFormUiControl, RdxFormValueControl, RdxPointerDragHandlers, 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-dialog.d.ts

@@ -1,20 +1,40 @@
 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 i1 from '@radix-ng/primitives/portal';
+import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 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';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
-import * as i1$2 from '@radix-ng/primitives/dismissable-layer';
+import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
 import * as i2 from '@radix-ng/primitives/focus-scope';
 
 /**
- * Mounts the portal while the dialog is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the dialog content (backdrop + popup) into a container (default
+ * `document.body`) while the dialog is open, and keeps it mounted until the CSS exit `@keyframes` on
+ * every root element finish.
+ *
+ * Dialog has two root nodes (backdrop + popup), so use the explicit `<ng-template rdxDialogPortal>`
+ * form. Pass `[container]` to portal into a different element.
+ */
+declare class RdxDialogPortal {
+    /**
+     * Optional container to portal the content into. Defaults to `document.body`. Declared here (and
+     * forwarded to the composed {@link RdxPortalPresence}) so that the drawer and alert-dialog portals
+     * can re-expose it through their own `hostDirectives`.
+     */
+    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPortal, "ng-template[rdxDialogPortal]", ["rdxDialogPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxDialogPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxDialogPortal>` markup would silently stop portaling — fail loudly
+ * instead.
  */
-declare class RdxDialogPortalPresence {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogPortalPresence, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPortalPresence, "ng-template[rdxDialogPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+declare class RdxDialogPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPortalMisuseGuard, "[rdxDialogPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -210,19 +230,6 @@ declare class RdxDialogTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogTrigger, "button[rdxDialogTrigger]", ["rdxDialogTrigger"], { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Moves the dialog to a different part of the DOM.
- */
-declare class RdxDialogPortal {
-    protected readonly rootContext: _radix_ng_primitives_dialog.RdxDialogRootContext;
-    /**
-     * Optional container to portal the content into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPortal, "[rdxDialogPortal]", ["rdxDialogPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
-}
-
 /**
  * An overlay displayed beneath the dialog popup.
  */
@@ -279,7 +286,7 @@ declare class RdxDialogPopup {
     constructor();
     private isEventOnTrigger;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogPopup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPopup, "[rdxDialogPopup]", ["rdxDialogPopup"], {}, { "escapeKeyDown": "escapeKeyDown"; "pointerDownOutside": "pointerDownOutside"; "focusOutside": "focusOutside"; "interactOutside": "interactOutside"; "openAutoFocus": "openAutoFocus"; "closeAutoFocus": "closeAutoFocus"; }, never, never, true, [{ directive: typeof i1$2.RdxDismissableLayer; inputs: {}; outputs: {}; }, { directive: typeof i2.RdxFocusScope; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogPopup, "[rdxDialogPopup]", ["rdxDialogPopup"], {}, { "escapeKeyDown": "escapeKeyDown"; "pointerDownOutside": "pointerDownOutside"; "focusOutside": "focusOutside"; "interactOutside": "interactOutside"; "openAutoFocus": "openAutoFocus"; "closeAutoFocus": "closeAutoFocus"; }, never, never, true, [{ directive: typeof i1$1.RdxDismissableLayer; inputs: {}; outputs: {}; }, { directive: typeof i2.RdxFocusScope; inputs: {}; outputs: {}; }]>;
 }
 
 /**
@@ -313,12 +320,12 @@ declare class RdxDialogClose {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxDialogClose, "button[rdxDialogClose]", ["rdxDialogClose"], {}, {}, never, never, true, never>;
 }
 
-declare const dialogImports: (typeof RdxDialogPortalPresence)[];
+declare const dialogImports: (typeof RdxDialogPortalMisuseGuard)[];
 declare class RdxDialogModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxDialogModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxDialogModule, never, [typeof RdxDialogRoot, typeof RdxDialogTrigger, typeof RdxDialogPortalPresence, typeof RdxDialogPortal, typeof RdxDialogBackdrop, typeof RdxDialogViewport, typeof RdxDialogPopup, typeof RdxDialogTitle, typeof RdxDialogDescription, typeof RdxDialogClose], [typeof RdxDialogRoot, typeof RdxDialogTrigger, typeof RdxDialogPortalPresence, typeof RdxDialogPortal, typeof RdxDialogBackdrop, typeof RdxDialogViewport, typeof RdxDialogPopup, typeof RdxDialogTitle, typeof RdxDialogDescription, typeof RdxDialogClose]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxDialogModule, never, [typeof RdxDialogRoot, typeof RdxDialogTrigger, typeof RdxDialogPortal, typeof RdxDialogPortalMisuseGuard, typeof RdxDialogBackdrop, typeof RdxDialogViewport, typeof RdxDialogPopup, typeof RdxDialogTitle, typeof RdxDialogDescription, typeof RdxDialogClose], [typeof RdxDialogRoot, typeof RdxDialogTrigger, typeof RdxDialogPortal, typeof RdxDialogPortalMisuseGuard, typeof RdxDialogBackdrop, typeof RdxDialogViewport, typeof RdxDialogPopup, typeof RdxDialogTitle, typeof RdxDialogDescription, typeof RdxDialogClose]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxDialogModule>;
 }
 
-export { RDX_DIALOG_VARIANT, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, RdxDialogHandle, RdxDialogModule, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalPresence, RdxDialogRoot, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, createRdxDialogHandle, dialogImports, injectRdxDialogRootContext, provideRdxDialogRootContext, provideRdxDialogVariant };
+export { RDX_DIALOG_VARIANT, RdxDialogBackdrop, RdxDialogClose, RdxDialogDescription, RdxDialogHandle, RdxDialogModule, RdxDialogPopup, RdxDialogPortal, RdxDialogPortalMisuseGuard, RdxDialogRoot, RdxDialogTitle, RdxDialogTrigger, RdxDialogViewport, createRdxDialogHandle, dialogImports, injectRdxDialogRootContext, provideRdxDialogRootContext, provideRdxDialogVariant };
 export type { RdxDialogModal, RdxDialogOpenChange, RdxDialogOpenChangeReason, RdxDialogRole, RdxDialogRootContext, RdxDialogVariant };

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

@@ -13,6 +13,8 @@ interface RdxDrawerRegistration {
     id: string;
     /** The drawer popup's measured size (px) along its dismiss axis. */
     height: Signal<number>;
+    /** 0..1 live dismiss progress of this drawer. */
+    swipeProgress: Signal<number>;
 }
 /**
  * App-level coordinator that tracks every open drawer so background content can react to them
@@ -30,6 +32,8 @@ declare class RdxDrawerProvider {
     readonly frontmost: Signal<RdxDrawerRegistration | null>;
     /** The frontmost drawer's measured size (px), or `0` when none is open. */
     readonly frontmostHeight: Signal<number>;
+    /** The frontmost drawer's live dismiss progress, or `0` when none is open. */
+    readonly swipeProgress: Signal<number>;
     /** Register an open drawer; returns a disposer that removes it. */
     register(registration: RdxDrawerRegistration): () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerProvider, never>;
@@ -62,6 +66,10 @@ type RdxDrawerRelease = {
 interface RdxDrawerSwipeConfig {
     /** The popup element the gesture lives on (CSS variables + data attributes are written here). */
     element: () => HTMLElement;
+    /** Gesture boundary used to discover scrollable ancestors around the popup. */
+    boundary?: () => HTMLElement;
+    /** Visible size along the dismiss axis, used to normalize live swipe progress. */
+    size?: () => number;
     /** Active swipe direction. */
     direction: Signal<RdxDrawerSwipeDirection>;
     /** Whether the gesture is currently armed (typically `open`). */
@@ -109,8 +117,8 @@ declare function useDrawerSwipe(config: RdxDrawerSwipeConfig): void;
  * - a string — `'148px'` (pixels), `'30rem'` (root-em), `'40%'` (fraction of size), or a bare number
  *   as above.
  *
- * Order the `snapPoints` array ascending by openness; the last entry is treated as "most open" and
- * is the default the drawer opens to when `defaultSnapPoint` is not set.
+ * Order the `snapPoints` array ascending by openness; the first entry is the default the drawer opens
+ * to when `defaultSnapPoint` is not set.
  */
 type RdxDrawerSnapPoint = number | string;
 /**
@@ -166,6 +174,12 @@ interface RdxDrawerRootContext {
     swipeProgress: Signal<number>;
     /** Reports gesture progress from the popup's swipe engine. */
     setSwipeProgress: (value: number) => void;
+    /** Whether the drawer is currently being revealed from a SwipeArea. */
+    openingSwipeActive: Signal<boolean>;
+    /** Pointer travel (px) inward from the SwipeArea while revealing the drawer. */
+    openingSwipeDistance: Signal<number>;
+    /** Starts or updates the SwipeArea reveal gesture. */
+    setOpeningSwipe: (active: boolean, distance: number) => void;
     /** Configured snap points (empty when the drawer has none). */
     snapPoints: Signal<readonly RdxDrawerSnapPoint[]>;
     /** Whether the drawer rests at discrete snap points. */
@@ -208,12 +222,12 @@ declare class RdxDrawerRoot {
     readonly swipeDirection: i0.InputSignal<RdxDrawerSwipeDirection>;
     /**
      * Resting positions the drawer snaps to along the dismiss axis. Order ascending by openness; the
-     * last entry is the default the drawer opens to. Omit for a plain open/closed drawer.
+     * first entry is the default the drawer opens to. Omit for a plain open/closed drawer.
      */
     readonly snapPoints: i0.InputSignal<readonly RdxDrawerSnapPoint[] | undefined>;
     /** The active snap point (controlled / uncontrolled with `[(snapPoint)]`). */
     readonly snapPoint: i0.ModelSignal<RdxDrawerSnapPoint | null>;
-    /** The snap point the drawer opens to when uncontrolled; defaults to the most open point. */
+    /** The snap point the drawer opens to when uncontrolled; defaults to the first point. */
     readonly defaultSnapPoint: i0.InputSignal<RdxDrawerSnapPoint | undefined>;
     /** Step at most one snap point per release instead of letting velocity skip points. */
     readonly snapToSequentialPoints: i0.InputSignalWithTransform<boolean, BooleanInput>;
@@ -221,6 +235,9 @@ declare class RdxDrawerRoot {
     readonly onSnapPointChange: i0.OutputEmitterRef<RdxDrawerSnapPoint>;
     /** 0..1 progress of the active dismiss gesture, written by the popup's swipe engine. */
     readonly swipeProgress: i0.WritableSignal<number>;
+    /** Live SwipeArea reveal state; the popup converts distance into its measured-axis movement. */
+    readonly openingSwipeActive: i0.WritableSignal<boolean>;
+    readonly openingSwipeDistance: i0.WritableSignal<number>;
     readonly normalizedSnapPoints: Signal<readonly RdxDrawerSnapPoint[]>;
     readonly hasSnapPoints: Signal<boolean>;
     /** Whether a drawer nested inside this one is open (reuses the dialog's nesting detection). */
@@ -252,41 +269,47 @@ declare class RdxDrawerTrigger {
 /**
  * An off-canvas region (typically pinned to a screen edge) that opens the drawer when swiped inward.
  *
- * Phase 1 opens on a threshold crossing rather than following the pointer live (the popup is not
- * mounted while closed); the live-follow open will land with snap points. Shares the drawer's
- * pointer-drag lifecycle so capture/cancel handling stays consistent with the popup gesture.
+ * Opens the drawer at the start of a drag so its popup can follow the pointer live. Releasing past
+ * the threshold settles open; releasing before it or cancelling animates the drawer back out.
  */
 declare class RdxDrawerSwipeArea {
     private readonly drawerContext;
     private readonly dialogContext;
-    /** Direction the swipe area opens from; defaults to the root's `swipeDirection`. */
+    /** Direction the opening gesture travels; defaults to the opposite of the root's dismiss direction. */
     readonly swipeDirection: i0.InputSignal<RdxDrawerSwipeDirection | undefined>;
     /** Whether the swipe area should ignore user interaction. */
     readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
     protected readonly isOpen: i0.Signal<boolean>;
     protected readonly direction: i0.Signal<RdxDrawerSwipeDirection>;
+    protected readonly resolvedTouchAction: i0.Signal<"pan-y" | "pan-x">;
     protected readonly swiping: i0.WritableSignal<boolean>;
     private startX;
     private startY;
+    private distance;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerSwipeArea, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerSwipeArea, "[rdxDrawerSwipeArea]", ["rdxDrawerSwipeArea"], { "swipeDirection": { "alias": "swipeDirection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * Mounts the portal while the drawer is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the drawer content (backdrop + popup) into a container (default
+ * `document.body`) while the drawer is open, keeping it mounted until its CSS exit `@keyframes`
+ * finish. It composes the structural {@link RdxDialogPortal}, inheriting the dialog presence context.
+ *
+ * Use the explicit `<ng-template rdxDrawerPortal>` form; pass `[container]` for a custom target.
  */
-declare class RdxDrawerPortalPresence {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerPortalPresence, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerPortalPresence, "ng-template[rdxDrawerPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxDialogPortalPresence; inputs: {}; outputs: {}; }]>;
+declare class RdxDrawerPortal {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerPortal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerPortal, "ng-template[rdxDrawerPortal]", ["rdxDrawerPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxDialogPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
 }
-
 /**
- * Moves the drawer to a different part of the DOM. Defaults to `document.body`.
+ * Dev-mode guard: `rdxDrawerPortal` is now structural, so the old `<div rdxDrawerPortal>` markup would
+ * silently stop portaling — fail loudly instead.
  */
-declare class RdxDrawerPortal {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerPortal, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerPortal, "[rdxDrawerPortal]", ["rdxDrawerPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxDialogPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
+declare class RdxDrawerPortalMisuseGuard {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerPortalMisuseGuard, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerPortalMisuseGuard, "[rdxDrawerPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -336,6 +359,9 @@ declare class RdxDrawerPopup {
     protected readonly frontmostHeightPx: i0.Signal<string | null>;
     constructor();
     private axisSize;
+    private axisElementSize;
+    private swipeBoundary;
+    private visibleAxisSize;
     private resolveRelease;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerPopup, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxDrawerPopup, "[rdxDrawerPopup]", ["rdxDrawerPopup"], {}, {}, never, never, true, [{ directive: typeof i1.RdxDialogPopup; inputs: {}; outputs: { "escapeKeyDown": "escapeKeyDown"; "pointerDownOutside": "pointerDownOutside"; "focusOutside": "focusOutside"; "interactOutside": "interactOutside"; "openAutoFocus": "openAutoFocus"; "closeAutoFocus": "closeAutoFocus"; }; }]>;
@@ -384,6 +410,7 @@ declare class RdxDrawerClose {
  * Reads the nearest {@link RdxDrawerProvider} and exposes styling hooks; the visual transform is
  * consumer CSS (headless):
  * - `[data-active]` — present while at least one drawer is open.
+ * - `--drawer-swipe-progress` — 0..1 live dismiss progress of the frontmost drawer.
  * - `--nested-drawers` — the number of open drawers.
  * - `--drawer-frontmost-height` — the frontmost drawer's measured size, in pixels.
  */
@@ -396,9 +423,9 @@ declare class RdxDrawerIndent {
 /**
  * The page background layer that scales/indents while any drawer is open.
  *
- * Behaves like {@link RdxDrawerIndent} (same `[data-active]` / `--nested-drawers` /
- * `--drawer-frontmost-height` contract); kept as a distinct part so the page backdrop and the
- * indented content can be styled independently, mirroring Base UI.
+ * Behaves like {@link RdxDrawerIndent} (same `[data-active]` / `--drawer-swipe-progress` /
+ * `--nested-drawers` / `--drawer-frontmost-height` contract); kept as a distinct part so the page
+ * backdrop and the indented content can be styled independently, mirroring Base UI.
  */
 declare class RdxDrawerIndentBackground {
     protected readonly provider: RdxDrawerProvider | null;
@@ -418,9 +445,9 @@ declare function createRdxDrawerHandle<Payload = unknown>(): RdxDrawerHandle<Pay
 declare const drawerImports: (typeof RdxDrawerProviderDirective)[];
 declare class RdxDrawerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxDrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxDrawerModule, never, [typeof RdxDrawerProviderDirective, typeof RdxDrawerRoot, typeof RdxDrawerTrigger, typeof RdxDrawerSwipeArea, typeof RdxDrawerPortalPresence, typeof RdxDrawerPortal, typeof RdxDrawerBackdrop, typeof RdxDrawerViewport, typeof RdxDrawerPopup, typeof RdxDrawerContent, typeof RdxDrawerTitle, typeof RdxDrawerDescription, typeof RdxDrawerClose, typeof RdxDrawerIndent, typeof RdxDrawerIndentBackground], [typeof RdxDrawerProviderDirective, typeof RdxDrawerRoot, typeof RdxDrawerTrigger, typeof RdxDrawerSwipeArea, typeof RdxDrawerPortalPresence, typeof RdxDrawerPortal, typeof RdxDrawerBackdrop, typeof RdxDrawerViewport, typeof RdxDrawerPopup, typeof RdxDrawerContent, typeof RdxDrawerTitle, typeof RdxDrawerDescription, typeof RdxDrawerClose, typeof RdxDrawerIndent, typeof RdxDrawerIndentBackground]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxDrawerModule, never, [typeof RdxDrawerProviderDirective, typeof RdxDrawerRoot, typeof RdxDrawerTrigger, typeof RdxDrawerSwipeArea, typeof RdxDrawerPortal, typeof RdxDrawerPortalMisuseGuard, typeof RdxDrawerBackdrop, typeof RdxDrawerViewport, typeof RdxDrawerPopup, typeof RdxDrawerContent, typeof RdxDrawerTitle, typeof RdxDrawerDescription, typeof RdxDrawerClose, typeof RdxDrawerIndent, typeof RdxDrawerIndentBackground], [typeof RdxDrawerProviderDirective, typeof RdxDrawerRoot, typeof RdxDrawerTrigger, typeof RdxDrawerSwipeArea, typeof RdxDrawerPortal, typeof RdxDrawerPortalMisuseGuard, typeof RdxDrawerBackdrop, typeof RdxDrawerViewport, typeof RdxDrawerPopup, typeof RdxDrawerContent, typeof RdxDrawerTitle, typeof RdxDrawerDescription, typeof RdxDrawerClose, typeof RdxDrawerIndent, typeof RdxDrawerIndentBackground]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RdxDrawerModule>;
 }
 
-export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalPresence, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe };
+export { RdxDrawerBackdrop, RdxDrawerClose, RdxDrawerContent, RdxDrawerDescription, RdxDrawerHandle, RdxDrawerIndent, RdxDrawerIndentBackground, RdxDrawerModule, RdxDrawerPopup, RdxDrawerPortal, RdxDrawerPortalMisuseGuard, RdxDrawerProvider, RdxDrawerProviderDirective, RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerTitle, RdxDrawerTrigger, RdxDrawerViewport, buildSnapEntries, createRdxDrawerHandle, dismissUnitVector, drawerImports, injectRdxDrawerRootContext, provideRdxDrawerProvider, provideRdxDrawerRootContext, resolveSnapTarget, snapPointReveal, useDrawerSwipe };
 export type { RdxDrawerRegistration, RdxDrawerRelease, RdxDrawerRootContext, RdxDrawerSnapEntry, RdxDrawerSnapPoint, RdxDrawerSnapResolveOptions, RdxDrawerSnapTarget, RdxDrawerSwipeConfig, RdxDrawerSwipeDirection };