ngwr 9.0.1 → 9.1.0

package/llms-full.txt

@@ -113,7 +113,7 @@
 - import: `import { WrCascader } from 'ngwr/cascader'`
 - selector: `wr-cascader`
 - exports: WrCascader, type WrCascaderOption, type WrCascaderSize
-- Multi-level select. Drills through hierarchical categories one column at a time; picking a leaf commits the full path. Implements `ControlValueAccessor` — model is `readonly T[]`.
+- Multi-level select. Drills through hierarchical categories one column at a time; picking a leaf commits the full path. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model (`readonly T[]`). `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/checkbox
 - import: `import { WrCheckbox } from 'ngwr/checkbox'`
@@ -195,8 +195,8 @@
 
 ## ngwr/date-picker
 - import: `import { WrDatePicker } from 'ngwr/date-picker'`
-- selector: `wr-date-picker`
-- exports: WrDatePicker
+- selector: `wr-date-picker`, `wr-date-range-picker`
+- exports: WrDatePicker, WrDateRangePicker, WrDateRange
 - Unified date / time / date-time picker. `<input>` + popover for every mode — overlay content swaps based on `[mode]`. Parses on every keystroke (silently — only emits when valid), reformats canonical on blur. Format driven by `WrDateAdapter`.
 
 ## ngwr/decrypt-text
@@ -218,7 +218,7 @@
 
 ## ngwr/dialog
 - import: `import { WrDialog } from 'ngwr/dialog'`
-- exports: WrDialog, WrDialogRef, WR_DIALOG_DATA, WrDialogOptions, WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose
+- exports: WrDialog, WrDialogRef, WR_DIALOG_DATA, WR_DIALOG_REF, WrDialogOptions, WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose
 - Modal dialogs via a service that wraps @angular/cdk/dialog. Open any component as a dialog and read its close result as a Promise.
 
 ## ngwr/directives
@@ -247,8 +247,8 @@
 ## ngwr/drawer
 - import: `import { WrDrawer } from 'ngwr/drawer'`
 - selector: `wr-drawer`
-- exports: WrDrawer, WrDrawerTitle, WrDrawerContent, WrDrawerFooter, WrDrawerClose, WrDrawerPosition
-- Side panel that slides in from any edge. Two-way binds `open`; renders into a CDK overlay so it sits above page content.
+- exports: WrDrawer, WrDrawerManager, WrDrawerRef, WR_DRAWER_DATA, WR_DRAWER_REF, WrDrawerTitle, WrDrawerContent, WrDrawerFooter, WrDrawerClose, WrDrawerOptions, WrDrawerPosition
+- Side panel that slides in from any edge. Use the component when the markup lives in your template, or `WrDrawerManager` to open any component as a drawer and read its close result.
 
 ## ngwr/dropdown
 - import: `import { WrDropdown } from 'ngwr/dropdown'`
@@ -470,7 +470,7 @@
 - import: `import { WrRadio } from 'ngwr/radio'`
 - selector: `wr-radio-group`, `wr-radio`
 - exports: WrRadio, WrRadioSize, WrRadioGroup, WR_RADIO_GROUP, type WrRadioGroupContext
-- Single-choice option. Always used inside <wr-radio-group>, which implements ControlValueAccessor.
+- Single-choice option. Always used inside <wr-radio-group>, which is the form control: it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/rating
 - import: `import { WrRating } from 'ngwr/rating'`
@@ -504,7 +504,7 @@
 - import: `import { WrSelect } from 'ngwr/select'`
 - selector: `wr-option-group`, `wr-option`, `wr-select`
 - exports: WrSelect, WrOption, WrOptionGroup, WR_SELECT, type WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator, WrSelectSize
-- Native-like select built on CDK Overlay. Implements ControlValueAccessor.
+- Native-like select built on CDK Overlay. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/shiny-text
 - import: `import { WrShinyText } from 'ngwr/shiny-text'`
@@ -527,7 +527,7 @@
 - import: `import { WrSlider } from 'ngwr/slider'`
 - selector: `wr-slider`
 - exports: WrSlider, WrSliderValue
-- Drag-to-pick numeric input. Single-thumb by default, optional dual-thumb range mode. Implements `ControlValueAccessor` so it plays nicely with template-driven and reactive forms.
+- Drag-to-pick numeric input. Single-thumb by default, optional dual-thumb range mode. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and template-driven `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/sparkline
 - import: `import { WrSparkline } from 'ngwr/sparkline'`
@@ -600,7 +600,7 @@
 - import: `import { WrSwitch } from 'ngwr/switch'`
 - selector: `wr-switch`
 - exports: WrSwitch, WrSwitchSize
-- Boolean toggle with an iOS-style slider. Implements ControlValueAccessor.
+- Boolean toggle with an iOS-style slider. A signal-forms native control — it implements `FormCheckboxControl`, so `[formField]` binds straight to its `checked` model. `[(checked)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/table
 - import: `import { WrTable } from 'ngwr/table'`
@@ -618,7 +618,7 @@
 - import: `import { WrTextarea } from 'ngwr/textarea'`
 - selector: `wr-textarea`
 - exports: WrTextarea, WrTextareaSize, WrTextareaResize
-- Multi-line text input. Implements ControlValueAccessor. Optional autosize.
+- Multi-line text input with optional autosize. A signal-forms native control — it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through Angular's bridge.
 
 ## ngwr/theme
 - import: `import { WR_COLORS } from 'ngwr/theme'`

package/llms.txt

@@ -74,10 +74,13 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 ## Common components (selector — import)
 
 - **Form** — `wr-btn` (ngwr/button), `wrInput` (ngwr/input), `wr-select`
-  (ngwr/select; modes single/multi/search/tag), `wr-checkbox` (form state is
-  `[(checked)]`; inside `<wr-checkbox-group>` the identity input is
-  `checkboxValue`, NOT `value`), `wr-switch`, `wr-slider`, `wr-input-number`,
-  `wr-input-otp`, `wr-date-picker` (date/time/datetime), `wr-file-upload`,
+  (ngwr/select; modes single/multi/search/tag, plus `searchable` for a
+  multi-with-typeahead and `(searchChange)` for server-side search),
+  `wr-checkbox` (form state is `[(checked)]`; inside `<wr-checkbox-group>` the
+  identity input is `checkboxValue`, NOT `value`), `wr-switch`, `wr-slider`,
+  `wr-input-number`, `wr-input-otp`, `wr-date-picker` (date/time/datetime) and
+  `wr-date-range-picker` (both in ngwr/date-picker; the range value is
+  `[start, end]`, hence a separate component), `wr-file-upload`,
   `wr-form-field`, `wr-color-picker`.
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
   expandable rows, grouping, summary rows, CSV export, virtualized body),
@@ -89,9 +92,12 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `wr-toolbar`, `wr-descriptions`, `wr-statistic`, `wr-lightbox`,
   `wr-pull-to-refresh`.
 - **Navigation** — `wr-tabs`, `wr-stepper`, `wr-breadcrumbs`, `wr-dropdown-menu`.
-- **Overlays** — `wr-drawer`, `wr-action-sheet`, `[wrPopover]` (directive; has a
+- **Overlays** — `wr-drawer` (or `WrDrawerManager.open()` to open a component as
+  a drawer from code), `wr-action-sheet`, `[wrPopover]` (directive; has a
   `tooltip` mode), `wr-command-palette`, `wr-context-menu`, `wr-popconfirm`.
-  (Dialog and toast are service-opened — inject `WrDialog` / `WrToast`.)
+  (Dialog and toast are service-opened — inject `WrDialog` / `WrToast`.
+  Content inside a service-opened dialog or drawer can `inject(WrDialogRef)` /
+  `inject(WrDrawerRef)` to close itself.)
 
 ## Patterns
 

package/package.json

@@ -1,15 +1,31 @@
 {
   "name": "ngwr",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "license": "MIT",
-  "description": "NGWR – Angular UI components library",
+  "description": "Signals-first Angular UI library: 100+ standalone, zoneless-ready components with native Signal Forms, SSR-safe rendering and CSS-variable theming.",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
   "keywords": [
     "ngwr",
     "angular",
-    "ui",
-    "ux",
-    "framework",
+    "angular-components",
+    "angular-ui",
+    "angular-library",
+    "component-library",
+    "ui-components",
+    "design-system",
+    "signals",
+    "signal-forms",
+    "zoneless",
+    "standalone",
+    "ssr",
+    "accessibility",
+    "a11y",
+    "scss",
+    "theming",
+    "dark-mode",
+    "tree-shakable",
+    "data-table",
+    "typescript",
     "frontend"
   ],
   "homepage": "https://ngwr.dev",

package/schematics/use/symbol-map.json

@@ -84,6 +84,8 @@
   "WrDateFnsAdapter": "ngwr/date-adapter-fns",
   "WrLuxonAdapter": "ngwr/date-adapter-luxon",
   "WrDatePicker": "ngwr/date-picker",
+  "WrDateRangePicker": "ngwr/date-picker",
+  "WrDateRange": "ngwr/date-picker",
   "WrDecryptText": "ngwr/decrypt-text",
   "WrDecryptTextAnimateOn": "ngwr/decrypt-text",
   "WrDecryptTextClickMode": "ngwr/decrypt-text",
@@ -113,10 +115,13 @@
   "WrSortableReorderEvent": "ngwr/drag-drop",
   "WrDragHandle": "ngwr/drag-drop",
   "WrDrawer": "ngwr/drawer",
+  "WrDrawerManager": "ngwr/drawer",
+  "WrDrawerRef": "ngwr/drawer",
   "WrDrawerTitle": "ngwr/drawer",
   "WrDrawerContent": "ngwr/drawer",
   "WrDrawerFooter": "ngwr/drawer",
   "WrDrawerClose": "ngwr/drawer",
+  "WrDrawerOptions": "ngwr/drawer",
   "WrDrawerPosition": "ngwr/drawer",
   "WrDropdown": "ngwr/dropdown",
   "WrDropdownMenu": "ngwr/dropdown",

package/types/ngwr-date-picker.d.ts

@@ -130,4 +130,170 @@ declare class WrDatePicker implements FormValueControl<Date | null> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDatePicker, "wr-date-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
-export { WrDatePicker };
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The `<wr-date-range-picker>` value — `[start, end]`.
+ *
+ * Either end can be `null` while the range is half-picked, so a partially
+ * filled range is still representable. Structurally identical to
+ * `WrCalendarRange`, which the picker forwards it to.
+ */
+type WrDateRange = readonly [Date | null, Date | null];
+
+/**
+ * Date-range picker — two text inputs sharing one range calendar.
+ *
+ * Separate from `<wr-date-picker>` because the value is a different type: a
+ * range is `[start, end]`, and folding that into the single picker's
+ * `Date | null` would break `[formField]` inference for every existing usage.
+ * Everything else matches — same input skeleton, same overlay, same
+ * {@link WrDateAdapter} formats.
+ *
+ * - `'date'` (default) — popover renders a range calendar. Picking the second
+ *   date closes the overlay.
+ * - `'datetime'` — popover adds a time stepper per end. Picking dates does NOT
+ *   close, since the user typically sets the times next.
+ *
+ * A signal-forms native control: it implements
+ * `FormValueControl<WrDateRange | null>`, so `[formField]` binds straight to
+ * its `value` model. `[(value)]` works standalone, and classic `[(ngModel)]` /
+ * reactive forms keep working through Angular's bridge.
+ *
+ * Either end may be `null` while the range is half-picked. Out-of-order ends
+ * are swapped on commit, matching the calendar's own behaviour.
+ *
+ * @example
+ * ```html
+ * <!-- signal forms -->
+ * <wr-date-range-picker [formField]="form.period" format="dd.MM.yyyy" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-date-range-picker [(value)]="period" [minDate]="minDate" />
+ *
+ * <!-- date + time on both ends -->
+ * <wr-date-range-picker mode="datetime" [(value)]="window" timeFormat="24h" />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/date-picker
+ */
+declare class WrDateRangePicker implements FormValueControl<WrDateRange | null> {
+    /** Picker behavior — see class doc. @default 'date' */
+    readonly mode: _angular_core.InputSignal<"date" | "datetime">;
+    /**
+     * Format used for both display and parsing, on both ends. When `null`
+     * (default), it is derived from `mode` (`shortDate` / `shortDateTime`). Pass
+     * a named key or raw token string to override.
+     */
+    readonly format: _angular_core.InputSignal<WrDateFormat | (string & {}) | null>;
+    /** Placeholder for the start input. */
+    readonly startPlaceholder: _angular_core.InputSignal<string>;
+    /** Placeholder for the end input. */
+    readonly endPlaceholder: _angular_core.InputSignal<string>;
+    /** Glyph rendered between the two inputs. @default '–' */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Min selectable date, applied to both ends. */
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    /** Max selectable date, applied to both ends. */
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    /** Predicate to disable specific dates (forwarded to the calendar). */
+    readonly dateFilter: _angular_core.InputSignal<((date: Date) => boolean) | null>;
+    /** Time-panel 12 / 24-hour format. Applies in `datetime` mode. @default 'auto' */
+    readonly timeFormat: _angular_core.InputSignal<"auto" | "12h" | "24h">;
+    /** Render the seconds column. Applies in `datetime` mode. @default false */
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Minute / second step for the time panels. @default 1 */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Disable interaction. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Read-only — inputs not typeable, but the trigger icon still opens the overlay. @default false */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly adapter;
+    private readonly overlay;
+    private readonly scrollStrategies;
+    private readonly host;
+    private readonly destroyRef;
+    protected readonly startEl: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** The picked range. Bound by `[formField]`, or two-way via `[(value)]`. */
+    readonly value: _angular_core.ModelSignal<WrDateRange | null>;
+    /** Emitted on blur so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /** Text currently in each input (may be partial / invalid mid-type). */
+    protected readonly startText: _angular_core.WritableSignal<string>;
+    protected readonly endText: _angular_core.WritableSignal<string>;
+    /** Whether the popover is currently open. */
+    protected readonly overlayOpen: _angular_core.WritableSignal<boolean>;
+    /** Resolved format — falls back to a mode-appropriate default. */
+    protected readonly resolvedFormat: _angular_core.Signal<string>;
+    protected readonly isDateTime: _angular_core.Signal<boolean>;
+    protected readonly triggerLabel: string;
+    protected readonly startLabel: string;
+    protected readonly endLabel: string;
+    protected readonly classes: _angular_core.Signal<string>;
+    private overlayRef;
+    /** Live panel ref while the popover is open — lets typed edits move the
+     * displayed month in real time (not just on reopen). */
+    private readonly panelRef;
+    /** Last range we pushed into the model ourselves, so the sync effect can skip
+     * the echo of our own edits and never reformat text mid-type. */
+    private lastValue;
+    constructor();
+    protected onStartInput(event: Event): void;
+    protected onEndInput(event: Event): void;
+    protected onBlur(event: FocusEvent): void;
+    /** Called by an input's click — opens the overlay if it isn't open already. */
+    protected openOnInput(): void;
+    protected toggleOverlay(): void;
+    private onRangeInput;
+    private openOverlay;
+    /**
+     * Close the popover. `restoreFocus` returns focus to the start input — needed
+     * when the overlay is dismissed while focus lives inside it (picking the
+     * second date), because disposing then leaves focus on a removed element and
+     * the browser falls back to `<body>`.
+     */
+    private closeOverlay;
+    private dispose;
+    /**
+     * Push to the model and refresh the text of whichever ends changed. Returns
+     * what was actually committed.
+     *
+     * `normalise` swaps out-of-order ends. The calendar and blur ask for it; a
+     * keystroke does not, because reordering while the user is still typing would
+     * move their in-progress text into the other input.
+     */
+    private commitRange;
+    private current;
+    private display;
+    private parseText;
+    /** Keep `[start, end]` in chronological order once both ends exist. */
+    private normalise;
+    /**
+     * Chronological comparison at the precision the mode needs. The adapter's
+     * `compareDate` is day-precision by contract, which would leave an inverted
+     * same-day `datetime` range (18:00 → 09:00) unswapped.
+     */
+    private compareEnds;
+    /**
+     * Whether a typed date must be rejected. Covers `dateFilter` as well as the
+     * bounds — the calendar disables filtered days, so accepting them from the
+     * keyboard would make the two entry paths disagree.
+     */
+    private isOutOfBounds;
+    private sameDate;
+    private sameRange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrDateRangePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrDateRangePicker, "wr-date-range-picker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "timeFormat": { "alias": "timeFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+}
+
+export { WrDatePicker, WrDateRangePicker };
+export type { WrDateRange };

package/types/ngwr-dialog.d.ts

@@ -3,7 +3,7 @@ import { ConfigurableFocusTrap } from '@angular/cdk/a11y';
 import { OverlayRef } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { ComponentRef, InjectionToken, ElementRef } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ReplaySubject } from 'rxjs';
 
 /**
  * @license
@@ -15,18 +15,43 @@ import { Subject } from 'rxjs';
 /**
  * Handle returned by `WrDialog.open()`.
  *
- * Wraps the underlying `OverlayRef` and tracks the close result.
+ * Wraps the underlying `OverlayRef` and tracks the close result. It is also
+ * provided inside the dialog's own injector, so the projected content can
+ * inject it and close itself — the counterpart to `[wrDialogClose]` when the
+ * close is programmatic (after a save succeeds, say) rather than a click.
  *
  * @example
  * ```ts
+ * // Caller side.
  * const ref = dialog.open<ConfirmComponent, boolean>(ConfirmComponent);
  * const result = await ref.awaitClose(); // boolean | undefined
  * ```
+ *
+ * @example
+ * ```ts
+ * // Content side — the dialog closes itself.
+ * @Component({...})
+ * export class ConfirmComponent {
+ *   private readonly ref = inject(WrDialogRef);
+ *
+ *   save(): void {
+ *     this.store.save();
+ *     this.ref.close(true);
+ *   }
+ * }
+ * ```
  */
 declare class WrDialogRef<C, R = unknown> {
     private readonly _overlayRef;
-    /** Emits the close result once and completes. */
-    readonly closed: Subject<R | undefined>;
+    /**
+     * Emits the close result once and completes.
+     *
+     * A `ReplaySubject`, not a plain `Subject`, so the result survives a late
+     * subscriber: content can close itself before `open()` has even returned, and
+     * `awaitClose()` may be called long after the dismissal — both would otherwise
+     * see only `complete` and resolve `undefined`.
+     */
+    readonly closed: ReplaySubject<R | undefined>;
     /** @internal */
     componentRef: ComponentRef<C> | null;
     /** @internal */
@@ -36,8 +61,10 @@ declare class WrDialogRef<C, R = unknown> {
     constructor(_overlayRef: OverlayRef);
     /** The instantiated dialog component. */
     get componentInstance(): C;
+    private isClosed;
     /** Close the dialog, optionally returning a result. */
     close(result?: R): void;
+    private teardown;
     /** Resolves with the close result when the dialog is dismissed. */
     awaitClose(): Promise<R | undefined>;
     /** Underlying overlay ref — escape hatch for advanced cases. */
@@ -128,6 +155,42 @@ declare class WrDialog {
  */
 declare const WR_DIALOG_DATA: InjectionToken<unknown>;
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Token exposing the open dialog's `WrDialogRef` to components and
+ * directives rendered inside it (e.g. `[wrDialogClose]`).
+ *
+ * **Prefer `inject(WrDialogRef)`** — the ref is provided under the class token
+ * too, and the class path is the documented one. It already covers both cases
+ * you might reach for a token for: `inject(WrDialogRef, { optional: true })`
+ * works for content that also renders outside a dialog, and
+ * `inject<WrDialogRef<ConfirmComponent, boolean>>(WrDialogRef)` types the
+ * generics without a cast.
+ *
+ * This token is the same object under a second key. It exists for the library's
+ * own directives (`[wrDialogClose]`) and for swapping the provider out — a test
+ * stub, say — without touching the class.
+ *
+ * @example
+ * ```ts
+ * @Component({...})
+ * export class ConfirmComponent {
+ *   private readonly ref = inject<WrDialogRef<ConfirmComponent, boolean>>(WrDialogRef);
+ *
+ *   confirm(): void {
+ *     this.ref.close(true);
+ *   }
+ * }
+ * ```
+ */
+declare const WR_DIALOG_REF: InjectionToken<WrDialogRef<unknown, unknown>>;
+
 /**
  * @license
  *
@@ -203,15 +266,15 @@ declare class WrDialogFooter {
  */
 declare class WrDialogClose<R = unknown> {
     /**
-     * Value to pass to `close()`. When unset, the dialog closes with
-     * `undefined`.
+     * Value to pass to `close()`. When unset — or used as a bare attribute — the
+     * dialog closes with `undefined`.
      */
-    readonly result: i0.InputSignal<R | undefined>;
+    readonly result: i0.InputSignalWithTransform<R | undefined, "" | R | undefined>;
     private readonly ref;
     protected onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrDialogClose<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<WrDialogClose<any>, "[wrDialogClose]", never, { "result": { "alias": "wrDialogClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { WR_DIALOG_DATA, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogRef, WrDialogTitle };
+export { WR_DIALOG_DATA, WR_DIALOG_REF, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogRef, WrDialogTitle };
 export type { WrDialogOptions };