@ng-doc/ui-kit 22.0.0-beta.2 → 22.0.0

package/types/ng-doc-ui-kit-components-icon.d.ts

@@ -1,27 +1,62 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit } from '@angular/core';
+import { Signal } from '@angular/core';
 import { NgDocIconSize } from '@ng-doc/ui-kit/types';
+import { HttpClient } from '@angular/common/http';
 
-declare class NgDocIconComponent implements OnChanges, OnInit {
+/**
+ * Shows an SVG icon from the UI Kit assets or from the application's custom icons.
+ */
+declare class NgDocIconComponent {
     private readonly elementRef;
+    private readonly registry;
     private readonly httpClient;
     private readonly baseUrl;
+    private readonly assetsPath;
+    private readonly customIconsPath;
     /** Icon name */
-    icon: string;
+    readonly icon: i0.InputSignal<string>;
     /** Custom icon name, if not set, `icon` will be used */
-    customIcon: string;
+    readonly customIcon: i0.InputSignal<string>;
     /** Icon size */
-    size: NgDocIconSize;
-    private readonly reload$;
-    private readonly assetsPath;
-    private readonly customIconsPath;
+    readonly size: i0.InputSignalWithTransform<NgDocIconSize, NgDocIconSize | "16" | "24">;
+    /** URL of the SVG file that the icon shows. */
+    readonly href: Signal<string>;
+    private readonly svg;
     constructor();
-    ngOnChanges(): void;
-    ngOnInit(): void;
-    get href(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocIconComponent, "ng-doc-icon", never, { "icon": { "alias": "icon"; "required": false; }; "customIcon": { "alias": "customIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_size: unknown;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocIconComponent, "ng-doc-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "customIcon": { "alias": "customIcon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Loads SVG icons and keeps them for the lifetime of the application.
+ *
+ * Every URL is requested once and shared by all icons that show it, whether or not the
+ * application registers HTTP interceptors. A failed request is logged and remembered: reading the
+ * icon again does not send a new request, only `retry()` does. A response that is not SVG markup
+ * counts as a failure: dev servers answer a missing file with the application's `index.html`,
+ * which must not be rendered as an icon.
+ */
+declare class NgDocIconRegistry {
+    private readonly rootHttpClient;
+    private readonly icons;
+    /**
+     * Returns the SVG markup stored at `url`, loading it on the first call.
+     * @param url - URL of the SVG file.
+     * @param httpClient - Client for the request; defaults to the root `HttpClient`.
+     * @returns A signal with the markup: `null` while it loads, `''` when the request failed.
+     */
+    get(url: string, httpClient?: HttpClient): Signal<string | null>;
+    /**
+     * Requests `url` again if its last request failed. Does nothing for an icon that has loaded
+     * or is loading.
+     * @param url - URL of the SVG file.
+     * @param httpClient - Client for the request; defaults to the root `HttpClient`.
+     */
+    retry(url: string, httpClient?: HttpClient): void;
+    private load;
+    private fail;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocIconRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
-export { NgDocIconComponent };
+export { NgDocIconComponent, NgDocIconRegistry };

package/types/ng-doc-ui-kit-components-input-wrapper.d.ts

@@ -1,29 +1,43 @@
-import * as i0 from '@angular/core';
-import { AfterViewChecked, ElementRef, ChangeDetectorRef } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { NgDocBaseInput } from '@ng-doc/ui-kit/classes/base-input';
 import { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';
 import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
 import { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';
 import { NgDocContent, NgDocTextAlign } from '@ng-doc/ui-kit/types';
 
-declare class NgDocInputWrapperComponent<T, B = unknown> implements AfterViewChecked, NgDocInputHost<T> {
-    elementRef: ElementRef<HTMLElement>;
-    protected changeDetectorRef: ChangeDetectorRef;
-    blurContent: NgDocContent<NgDocContextWithImplicit<B | null>>;
-    blurContext: B | null;
-    align: NgDocTextAlign;
-    input?: NgDocBaseInput<T>;
-    inputControl?: NgDocBaseInput<T>;
-    focusCatcher?: NgDocFocusCatcherDirective;
-    constructor();
-    ngAfterViewChecked(): void;
-    getBlurContext($implicit: B | null): NgDocContextWithImplicit<B | null>;
+/**
+ * The frame of a text field: it draws the border and the focus state around an `ngDocInputString`
+ * or `ngDocInputNumber` input, holds content at its left and right, and can show `blurContent`
+ * instead of the text while the field is not being edited.
+ */
+declare class NgDocInputWrapperComponent<T, B = unknown> implements NgDocInputHost<T> {
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Content shown instead of the text while the field is not being edited. */
+    readonly blurContent: _angular_core.InputSignal<NgDocContent<NgDocContextWithImplicit<B | null>>>;
+    /** The `$implicit` context of `blurContent`. */
+    readonly blurContext: _angular_core.InputSignal<B | null>;
+    /** Alignment of the text. */
+    readonly align: _angular_core.InputSignal<NgDocTextAlign>;
+    /** Focus state of the frame. */
+    readonly focusCatcher: _angular_core.Signal<NgDocFocusCatcherDirective>;
+    private readonly inputQuery;
+    /** The input in the frame. */
+    get input(): NgDocBaseInput<T> | undefined;
+    /** The input in the frame, as its input host exposes it. */
+    get inputControl(): NgDocBaseInput<T> | undefined;
+    /** Whether the input is disabled. The control keeps it in a signal, so this is reactive. */
     get disabled(): boolean;
+    /** Whether the input has a value. */
     inputHasValue(): boolean;
+    /**
+     * Whether `blurContent` is shown: the field is not focused (focus changes re-render the frame
+     * through its `focusin`/`focusout` listeners), or it is read-only.
+     */
     get blurContentIsVisible(): boolean;
-    emptyEvent(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocInputWrapperComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocInputWrapperComponent<any, any>, "ng-doc-input-wrapper", never, { "blurContent": { "alias": "blurContent"; "required": false; }; "blurContext": { "alias": "blurContext"; "required": false; }; "align": { "alias": "align"; "required": false; }; }, {}, ["input", "inputControl"], ["[ngDocInputWrapperLeft]", "*", "[ngDocInputWrapperRight]"], true, never>;
+    protected emptyEvent(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocInputWrapperComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocInputWrapperComponent<any, any>, "ng-doc-input-wrapper", never, { "blurContent": { "alias": "blurContent"; "required": false; "isSignal": true; }; "blurContext": { "alias": "blurContext"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, ["inputQuery"], ["[ngDocInputWrapperLeft]", "*", "[ngDocInputWrapperRight]"], true, never>;
 }
 
 export { NgDocInputWrapperComponent };

package/types/ng-doc-ui-kit-components-label.d.ts

@@ -1,11 +1,14 @@
+import * as _angular_core from '@angular/core';
 import { NgDocContent, NgDocHorizontalAlign } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/** A `label` with a caption above its content. */
 declare class NgDocLabelComponent {
-    label: NgDocContent;
-    align: NgDocHorizontalAlign;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocLabelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocLabelComponent, "label[ng-doc-label]", never, { "label": { "alias": "ng-doc-label"; "required": false; }; "align": { "alias": "align"; "required": false; }; }, {}, never, ["*"], true, never>;
+    /** The caption: a string or a template. */
+    readonly label: _angular_core.InputSignal<NgDocContent>;
+    /** Alignment of the caption. */
+    readonly align: _angular_core.InputSignal<NgDocHorizontalAlign>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocLabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocLabelComponent, "label[ng-doc-label]", never, { "label": { "alias": "ng-doc-label"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocLabelComponent };

package/types/ng-doc-ui-kit-components-line.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from '@angular/core';
 
+/**
+ * Horizontal divider line.
+ */
 declare class NgDocLineComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocLineComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocLineComponent, "ng-doc-line", never, {}, {}, never, never, true, never>;

package/types/ng-doc-ui-kit-components-list.d.ts

@@ -1,14 +1,25 @@
 import { NgDocListItem } from '@ng-doc/ui-kit/classes/list-item';
 import * as i0 from '@angular/core';
 
+/**
+ * Keyboard navigation for the options inside it: arrow keys move the active option and Enter
+ * selects it. The keys also work from the list host's origin (for example a combobox input).
+ */
 declare class NgDocListComponent {
-    private elementRef;
-    private ngZone;
-    private listHost;
+    private readonly elementRef;
+    private readonly listHost;
     private keyManager;
     private readonly items;
     constructor();
+    /**
+     * Adds an item to the keyboard navigation.
+     * @param item - The item to add.
+     */
     registerItem(item: NgDocListItem): void;
+    /**
+     * Removes an item from the keyboard navigation.
+     * @param item - The item to remove.
+     */
     unregisterItem(item: NgDocListItem): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocListComponent, "ng-doc-list", never, {}, {}, never, ["*"], true, never>;

package/types/ng-doc-ui-kit-components-magnifier-controller.d.ts

@@ -1,8 +1,12 @@
 import * as i0 from '@angular/core';
 import { NgDocMagnifierComponent } from '@ng-doc/ui-kit/components/magnifier';
 
+/**
+ * Buttons that pan, zoom and reset an `ng-doc-magnifier`.
+ */
 declare class MagnifierControllerComponent {
-    magnifier: i0.InputSignal<NgDocMagnifierComponent>;
+    /** The magnifier to control. */
+    readonly magnifier: i0.InputSignal<NgDocMagnifierComponent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MagnifierControllerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MagnifierControllerComponent, "ng-doc-magnifier-controller", never, { "magnifier": { "alias": "magnifier"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/ng-doc-ui-kit-components-magnifier.d.ts

@@ -1,21 +1,36 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, NgZone, DestroyRef } from '@angular/core';
+import { OnInit, Signal, DestroyRef } from '@angular/core';
 
+/**
+ * Lets the user pan its content by dragging and zoom it with the mouse wheel. Use
+ * `ng-doc-magnifier-controller` for buttons that do the same.
+ */
 declare class NgDocMagnifierComponent implements OnInit {
     protected readonly x: _angular_core.WritableSignal<number>;
     protected readonly y: _angular_core.WritableSignal<number>;
     protected readonly scale: _angular_core.WritableSignal<number>;
-    protected readonly transform: _angular_core.Signal<string>;
+    protected readonly transform: Signal<string>;
     protected readonly drag: _angular_core.WritableSignal<boolean>;
     protected readonly document: Document;
     protected readonly element: HTMLElement;
-    protected readonly ngZone: NgZone;
     protected readonly destroyRef: DestroyRef;
-    constructor();
     ngOnInit(): void;
+    /**
+     * Moves the content horizontally.
+     * @param x - Distance in screen pixels.
+     */
     incrementX(x: number): void;
+    /**
+     * Moves the content vertically.
+     * @param y - Distance in screen pixels.
+     */
     incrementY(y: number): void;
+    /**
+     * Zooms in (positive `diff`) or out (negative `diff`); the scale never goes below 1.
+     * @param diff - Zoom step, where 1000 doubles the scale.
+     */
     zoom(diff: number): void;
+    /** Resets the position and the scale. */
     reset(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocMagnifierComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocMagnifierComponent, "ng-doc-magnifier", never, {}, {}, never, ["*"], true, never>;

package/types/ng-doc-ui-kit-components-option-group.d.ts

@@ -1,18 +1,22 @@
 import * as i0 from '@angular/core';
-import { AfterContentInit, QueryList } from '@angular/core';
+import { Signal } from '@angular/core';
 import { NgDocOptionComponent } from '@ng-doc/ui-kit/components/option';
 
+/**
+ * Marks the header content of an option group.
+ */
 declare class NgDocOptionGroupHeaderDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocOptionGroupHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocOptionGroupHeaderDirective, "[ngDocOptionGroupHeader]", never, {}, {}, never, never, true, never>;
 }
-declare class NgDocOptionGroupComponent<T> implements AfterContentInit {
-    private changeDetectorRef;
-    options: QueryList<NgDocOptionComponent<T>>;
-    hasHeader: boolean;
-    private readonly destroyRef;
-    constructor();
-    ngAfterContentInit(): void;
+/**
+ * Group of options with a header. The header is hidden while the group has no options.
+ */
+declare class NgDocOptionGroupComponent<T> {
+    /** Options of the group. */
+    readonly options: Signal<readonly NgDocOptionComponent<T>[]>;
+    /** Whether the header is shown. */
+    readonly hasHeader: Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocOptionGroupComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocOptionGroupComponent<any>, "ng-doc-option-group", never, {}, {}, ["options"], ["[ngDocOptionGroupHeader]", "*"], true, never>;
 }

package/types/ng-doc-ui-kit-components-option.d.ts

@@ -4,14 +4,21 @@ import { NgDocListItem } from '@ng-doc/ui-kit/classes/list-item';
 import { NgDocListComponent } from '@ng-doc/ui-kit/components/list';
 import { DIStateControl } from 'di-controls';
 
+/**
+ * Option of a list. Clicking it, or pressing Enter while it is active, checks it in its host
+ * control; an option that contains a link follows the link instead.
+ */
 declare class NgDocOptionComponent<T> extends DIStateControl<T> implements NgDocListItem, OnDestroy {
-    protected hovered: boolean;
     readonly elementRef: ElementRef<HTMLElement>;
+    /** Whether the option is the active item of the list's keyboard navigation. */
+    protected readonly hovered: i0.WritableSignal<boolean>;
     protected readonly list: NgDocListComponent | null;
     constructor();
-    clickEvent(): void;
+    /** Selects the option as if the user did: follows its link, or checks it. */
     selectByUser(): void;
+    /** Marks the option as the active item. */
     setActiveStyles(): void;
+    /** Clears the active-item mark. */
     setInactiveStyles(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocOptionComponent<any>, never>;

package/types/ng-doc-ui-kit-components-overlay-container.d.ts

@@ -1,40 +1,43 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
 import { NgDocFocusCatcherDirective } from '@ng-doc/ui-kit/directives/focus-catcher';
 import { NgDocOverlayContainer, NgDocOverlayConfig } from '@ng-doc/ui-kit/interfaces';
-import { NgDocContent, NgDocOverlayRelativePosition, NgDocOverlayAnimationEvent, NgDocHorizontalAlign, NgDocVerticalAlign } from '@ng-doc/ui-kit/types';
+import { NgDocContent, NgDocOverlayRelativePosition, NgDocHorizontalAlign, NgDocVerticalAlign, NgDocOverlayAnimationEvent } from '@ng-doc/ui-kit/types';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { Observable } from 'rxjs';
 
+/** The default overlay container: renders the content with the pointer and the open animation. */
 declare class NgDocOverlayContainerComponent implements NgDocOverlayContainer, OnInit, AfterViewInit, OnDestroy {
     private elementRef;
     private documentRef;
     private changeDetectorRef;
-    private ngZone;
     private platformId;
-    content: NgDocContent;
-    config?: NgDocOverlayConfig;
-    contentContainer?: ElementRef<HTMLElement>;
-    focusCatcher?: NgDocFocusCatcherDirective;
-    outlet?: PolymorpheusOutlet<object>;
-    relativePosition: NgDocOverlayRelativePosition | null;
-    private currentPosition?;
+    private destroyRef;
+    /** What the overlay renders: a string, a template or a component. */
+    readonly content: _angular_core.InputSignal<NgDocContent>;
+    /** The configuration the overlay was opened with. */
+    readonly config: _angular_core.InputSignal<NgDocOverlayConfig | undefined>;
+    readonly contentContainer: _angular_core.Signal<ElementRef<any> | undefined>;
+    readonly focusCatcher: _angular_core.Signal<NgDocFocusCatcherDirective | undefined>;
+    readonly outlet: _angular_core.Signal<PolymorpheusOutlet<any> | undefined>;
+    private readonly currentPosition;
+    /** The side of the origin the overlay is on, once the position strategy has placed it. */
+    protected readonly relativePosition: _angular_core.Signal<NgDocOverlayRelativePosition | null>;
+    protected readonly overlayAlign: _angular_core.Signal<NgDocHorizontalAlign | NgDocVerticalAlign | null>;
+    protected readonly contactBorder: _angular_core.Signal<boolean>;
     private animationEvent$;
     private isOpened;
-    constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    get contactBorder(): boolean;
     get isFocused(): boolean;
     get animationEvent(): Observable<NgDocOverlayAnimationEvent>;
-    get overlayAlign(): NgDocHorizontalAlign | NgDocVerticalAlign | null;
     close(): void;
     focus(): void;
     markForCheck(): void;
     private runAnimation;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocOverlayContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocOverlayContainerComponent, "ng-doc-overlay-container", never, { "content": { "alias": "content"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocOverlayContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocOverlayContainerComponent, "ng-doc-overlay-container", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocOverlayContainerComponent };

package/types/ng-doc-ui-kit-components-overlay-pointer.d.ts

@@ -1,12 +1,16 @@
+import * as _angular_core from '@angular/core';
 import { NgDocOverlayRelativePosition, NgDocHorizontalAlign, NgDocVerticalAlign } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/** Frames overlay content and draws the arrow that points at the origin. */
 declare class NgDocOverlayPointerComponent {
-    overlayPosition: NgDocOverlayRelativePosition | null;
-    overlayAlign: NgDocHorizontalAlign | NgDocVerticalAlign | null;
-    withPointer: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocOverlayPointerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocOverlayPointerComponent, "ng-doc-overlay-pointer", never, { "overlayPosition": { "alias": "overlayPosition"; "required": false; }; "overlayAlign": { "alias": "overlayAlign"; "required": false; }; "withPointer": { "alias": "withPointer"; "required": false; }; }, {}, never, ["*"], true, never>;
+    /** The side of the origin the overlay is on. */
+    readonly overlayPosition: _angular_core.InputSignal<NgDocOverlayRelativePosition | null>;
+    /** How the overlay is aligned along that side. */
+    readonly overlayAlign: _angular_core.InputSignal<NgDocHorizontalAlign | NgDocVerticalAlign | null>;
+    /** Draws the arrow. */
+    readonly withPointer: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocOverlayPointerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocOverlayPointerComponent, "ng-doc-overlay-pointer", never, { "overlayPosition": { "alias": "overlayPosition"; "required": false; "isSignal": true; }; "overlayAlign": { "alias": "overlayAlign"; "required": false; "isSignal": true; }; "withPointer": { "alias": "withPointer"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocOverlayPointerComponent };

package/types/ng-doc-ui-kit-components-pane.d.ts

@@ -1,29 +1,45 @@
 import * as i0 from '@angular/core';
-import { OnChanges, ElementRef, SimpleChanges } from '@angular/core';
+import { ElementRef } from '@angular/core';
 
+/** Marks the content in front of an `ng-doc-pane` (the right side). */
 declare class NgDocPaneFrontDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPaneFrontDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocPaneFrontDirective, "[ngDocPaneFront]", never, {}, {}, never, never, true, never>;
 }
+/** Marks the content behind an `ng-doc-pane` (the left side, revealed by dragging). */
 declare class NgDocPaneBackDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPaneBackDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocPaneBackDirective, "[ngDocPaneBack]", never, {}, {}, never, never, true, never>;
 }
-declare class NgDocPaneComponent implements OnChanges {
+/**
+ * Two panes side by side with a resizer between them. Drag the resizer, click it or use the
+ * arrow keys on it to reveal the back pane; Enter or Space toggles it.
+ */
+declare class NgDocPaneComponent {
     private readonly document;
-    private readonly changeDetectorRef;
     private readonly elementRef;
     private readonly ngZone;
-    expanded: boolean;
-    resizer?: ElementRef<HTMLElement>;
-    width: string;
-    dragging: boolean;
+    /** Whether the back pane is revealed. */
+    readonly expanded: i0.InputSignal<boolean>;
+    /** The resizer between the panes. */
+    readonly resizer: i0.Signal<ElementRef<HTMLElement>>;
+    /** Width of the back pane, as a CSS length. */
+    readonly width: i0.WritableSignal<string>;
+    /** Share of the pane the back pane takes, in percent, for assistive technology. */
+    protected readonly valueNow: i0.WritableSignal<number>;
+    /** Whether the resizer is being dragged. */
+    protected readonly dragging: i0.WritableSignal<boolean>;
     constructor();
-    ngOnChanges({ expanded }: SimpleChanges): void;
+    /** Reveals the back pane when it is mostly hidden, and hides it otherwise. */
     toggle(): void;
+    /**
+     * Moves the resizer with the keyboard.
+     * @param event - The key press on the resizer.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
     private addDelta;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPaneComponent, "ng-doc-pane", never, { "expanded": { "alias": "expanded"; "required": false; }; }, {}, never, ["[ngDocPaneBack]", "[ngDocPaneFront]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPaneComponent, "ng-doc-pane", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, {}, never, ["[ngDocPaneBack]", "[ngDocPaneFront]"], true, never>;
 }
 
 export { NgDocPaneBackDirective, NgDocPaneComponent, NgDocPaneFrontDirective };

package/types/ng-doc-ui-kit-components-selection.d.ts

@@ -1,41 +1,79 @@
 import * as i0 from '@angular/core';
-import { AfterViewInit, OnChanges, OnDestroy, ElementRef, SimpleChanges } from '@angular/core';
+import { ElementRef, Signal } from '@angular/core';
 import { NgDocHorizontalAlign, NgDocVerticalAlign } from '@ng-doc/ui-kit/types';
-import { Observable } from 'rxjs';
 
-declare class NgDocSelectionComponent implements AfterViewInit {
+/**
+ * Highlight that slides to the selected `ngDocSelectionOrigin` of the closest
+ * `ngDocSelectionHost`, for example the underline of the active tab or the thumb of a segmented
+ * control. It covers the selected element and moves with a transform.
+ *
+ * The highlight is measured in the browser only. Until it is placed it is hidden and has no
+ * `data-ng-doc-placed` attribute, so the selected element can style itself in the server-rendered
+ * page, for example with `ng-doc-selection:not([data-ng-doc-placed]) ~ .selected`. The first
+ * placement never animates, and nothing animates when the reader prefers reduced motion.
+ */
+declare class NgDocSelectionComponent {
     private readonly elementRef;
     private readonly selectionHost;
-    align: NgDocHorizontalAlign | NgDocVerticalAlign;
     private readonly destroyRef;
+    private readonly resized;
+    private resizeObserver?;
+    private observed?;
+    private destroyed;
+    private placements;
+    /**
+     * Side of the selected element on which the highlight draws its border, or `null` for no
+     * border (a thumb that covers the element, styled by its container).
+     */
+    readonly align: i0.InputSignal<NgDocHorizontalAlign | NgDocVerticalAlign | null>;
     constructor();
-    ngAfterViewInit(): void;
-    private setStyles;
-    private getPosition;
+    private observe;
+    private place;
+    /**
+     * Turns the transition on once the first position has been painted. Turning it on in the same
+     * frame would animate the highlight from the corner of its container; reading the style to
+     * commit the position instead would force a layout for every highlight on the page.
+     */
+    private enableTransition;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSelectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSelectionComponent, "ng-doc-selection", never, { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSelectionComponent, "ng-doc-selection", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class NgDocSelectionOriginDirective implements OnChanges, OnDestroy {
+/**
+ * Element that the `ng-doc-selection` of the closest `ngDocSelectionHost` highlights while
+ * `ngDocSelectionOrigin` is `true`.
+ */
+declare class NgDocSelectionOriginDirective {
+    /** The host element. */
     readonly elementRef: ElementRef<HTMLElement>;
     private readonly selectionHost;
-    selected: boolean;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
-    ngOnChanges({ selected }: SimpleChanges): void;
-    ngOnDestroy(): void;
+    /** Whether the element is selected. */
+    readonly selected: i0.InputSignal<boolean>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSelectionOriginDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocSelectionOriginDirective, "[ngDocSelectionOrigin]", never, { "selected": { "alias": "ngDocSelectionOrigin"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocSelectionOriginDirective, "[ngDocSelectionOrigin]", never, { "selected": { "alias": "ngDocSelectionOrigin"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Tracks which of its `ngDocSelectionOrigin` elements is selected, so that an
+ * `ng-doc-selection` inside it can highlight that element.
+ */
 declare class NgDocSelectionHostDirective {
-    private origins;
-    private selected?;
-    private selectedChange;
-    get selectedChange$(): Observable<HTMLElement | undefined>;
-    addOrigin(origin: NgDocSelectionOriginDirective): void;
-    removeOrigin(origin: NgDocSelectionOriginDirective): void;
+    private readonly selectedElement;
+    /** Element of the selected origin, or `undefined` when none is selected. */
+    readonly selected: Signal<HTMLElement | undefined>;
+    /**
+     * Updates the selection after an origin changed its state or went away.
+     * @param origin - The origin whose state changed.
+     * @param selected - Whether the origin is selected now.
+     */
     changeSelected(origin: NgDocSelectionOriginDirective, selected: boolean): void;
+    /**
+     * Selects an element that cannot carry `ngDocSelectionOrigin`, because Angular does not render
+     * it: for example a tab in the HTML of a generated page.
+     * @param element - The element to highlight, or `undefined` to highlight none.
+     */
+    select(element: HTMLElement | undefined): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSelectionHostDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocSelectionHostDirective, "[ngDocSelectionHost]", never, {}, {}, never, never, true, never>;
 }

package/types/ng-doc-ui-kit-components-sidenav.d.ts

@@ -1,24 +1,33 @@
-import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { NgDocContent } from '@ng-doc/ui-kit/types';
 
+/**
+ * Layout with a side panel next to the projected content.
+ *
+ * At 900px and below the side panel becomes an overlay that slides in from the left; `opened`
+ * shows it and `closeEvent` asks the owner to hide it. The panel has the id `ng-doc-sidenav`, so a
+ * toggle button can point `aria-controls` at it.
+ */
 declare class NgDocSidenavComponent {
     /**
      * Content of the sidenav.
      */
-    sidebar: NgDocContent;
+    readonly sidebar: _angular_core.InputSignal<NgDocContent>;
     /**
      * Indicates whether the sidenav is opened or not.
      * This is used to trigger the animation.
      */
-    opened: boolean;
+    readonly opened: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Indicates whether the sidenav has a backdrop or not.
      */
-    hasBackdrop: boolean;
-    closeEvent: EventEmitter<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSidenavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSidenavComponent, "ng-doc-sidenav", never, { "sidebar": { "alias": "sidebar"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; }, { "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
+    readonly hasBackdrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits when the backdrop is clicked, so the owner can close the sidenav.
+     */
+    readonly closeEvent: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocSidenavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocSidenavComponent, "ng-doc-sidenav", never, { "sidebar": { "alias": "sidebar"; "required": false; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; }, { "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
 }
 
 export { NgDocSidenavComponent };

package/types/ng-doc-ui-kit-components-spinner.d.ts

@@ -1,10 +1,14 @@
-import { NgDocSize } from '@ng-doc/ui-kit/types';
 import * as i0 from '@angular/core';
+import { NgDocSize } from '@ng-doc/ui-kit/types';
 
+/**
+ * Circular loading indicator.
+ */
 declare class NgDocSpinnerComponent {
-    size: NgDocSize;
+    /** Spinner size */
+    readonly size: i0.InputSignal<NgDocSize>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSpinnerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSpinnerComponent, "ng-doc-spinner", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSpinnerComponent, "ng-doc-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocSpinnerComponent };