@dataworkz/crystal 0.1.0-beta.1 → 0.1.0-beta.10

package/index.d.ts

@@ -1,12 +1,15 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef } from '@angular/core';
-import { StorageIconSet } from '@dataworkz/crystal/icons';
-export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
+import { InjectionToken, EnvironmentProviders, OnDestroy, TemplateRef, OnInit, OutputEmitterRef } from '@angular/core';
+import { StorageIconSet, DwPrimeIcon } from '@dataworkz/crystal/icons';
+export { DW_ICON_NAMES, DW_ICON_PREFIX, DwIconName, DwPrimeIcon, IconName, dwIconName, icon } from '@dataworkz/crystal/icons';
 import { ValidationErrors, AbstractControl, NgModel, NgControl, ControlValueAccessor } from '@angular/forms';
-import { MenuItem, SortMeta, SortEvent } from 'primeng/api';
+import { MenuItem } from 'primeng/api';
 import { UrlTree } from '@angular/router';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Observable } from 'rxjs';
+import * as i1 from 'primeng/tooltip';
+import * as i1$1 from 'primeng/inputtext';
+import * as i2 from 'primeng/textarea';
 import { TablePageEvent, Table } from 'primeng/table';
 import { SafeHtml } from '@angular/platform-browser';
 
@@ -596,7 +599,7 @@ declare class DwMeterComponent {
  * "Show deprecated" beside a list's search, "Tree view" beside a tree's. Controlled: it shows
  * `checked` and emits the flipped value; the host decides.
  *
- * A button with role="checkbox" rather than a <label>-wrapped <input>: a label-wrapped input
+ * A button with role="checkbox" rather than a `<label>`-wrapped `<input>`: a label-wrapped input
  * forwards a synthetic click to the input, which bubbles back to the label and double-fires.
  *
  * ```html
@@ -935,12 +938,12 @@ type DwShowErrorsWhen = 'touched' | 'dirty' | 'touchedOrDirty' | 'always';
  *
  * ```html
  * <dw-field label="Name" [control]="form.controls.name" help="Shown to end users" [maxLength]="100">
- *   <input pInputText formControlName="name" />
+ *   <input dwInput formControlName="name" />
  * </dw-field>
  *
  * <dw-field label="Prompt" layout="inline" info="Supports {{ '{{' }}variables}}">
  *   <a dwFieldActions class="dw-link" (click)="generate()">Generate with AI</a>
- *   <textarea pTextarea [(ngModel)]="prompt" #p="ngModel" required></textarea>
+ *   <textarea dwInput [(ngModel)]="prompt" #p="ngModel" required></textarea>
  * </dw-field>
  *
  * <dw-field label="Region" [error]="regionError">…</dw-field>      <!-- template-driven / manual -->
@@ -1195,6 +1198,10 @@ declare const DW_MENU_PLAIN_GROUP = "dw-menu-plain-group";
  * <!-- external trigger -->
  * <dw-button label="Create" trailingIcon="pi pi-chevron-down" (clicked)="createMenu.toggle($event)" />
  * <dw-menu #createMenu [items]="createItems" trigger="none" />
+ *
+ * <!-- context menu: opens at the pointer; commands get what was right-clicked -->
+ * <div (contextmenu)="rowMenu.openAt($event, row)">…</div>
+ * <dw-menu #rowMenu [items]="rowItems" trigger="none" />
  * ```
  * Items with `danger: true` are styled red and separated from the rest.
  *
@@ -1221,6 +1228,8 @@ declare class DwMenuComponent<T = unknown> {
     readonly closed: _angular_core.OutputEmitterRef<void>;
     readonly itemClick: _angular_core.OutputEmitterRef<DwMenuItem<T>>;
     readonly open: _angular_core.WritableSignal<boolean>;
+    /** Set by `openAt`: where the panel goes and the context its commands get, until opened another way. */
+    private readonly atPoint;
     readonly header: _angular_core.Signal<DwMenuHeaderDirective | undefined>;
     private readonly listMenu;
     private readonly tieredMenu;
@@ -1228,6 +1237,12 @@ declare class DwMenuComponent<T = unknown> {
     readonly model: _angular_core.Signal<MenuItem[]>;
     toggle(event: Event): void;
     show(event: Event): void;
+    /**
+     * Opens the menu as a context menu: at the pointer (kept inside the viewport) instead of under a trigger, without the
+     * browser's own menu. Commands receive `context` (what was right-clicked) instead of the `context` input. Opening
+     * it again while it is open moves it.
+     */
+    openAt(event: MouseEvent, context?: T | null): void;
     hide(): void;
     onShow(): void;
     onHide(): void;
@@ -1240,6 +1255,8 @@ declare class DwMenuComponent<T = unknown> {
     private groupLooseItems;
     private toMenuItems;
     private toMenuItem;
+    /** Puts the panel's corner at the pointer, flipping left / up where it would leave the viewport. */
+    private placeAtPoint;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwMenuComponent<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwMenuComponent<any>, "dw-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "triggerVariant": { "alias": "triggerVariant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "itemClick": "itemClick"; }, ["header"], never, true, never>;
 }
@@ -1325,7 +1342,7 @@ declare class DwCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCardComponent, "dw-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "clampLines": { "alias": "clampLines"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTint": { "alias": "iconTint"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeTone": { "alias": "badgeTone"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReason": { "alias": "disabledReason"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "menuContext": { "alias": "menuContext"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelStyle": { "alias": "labelStyle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueSuffix": { "alias": "valueSuffix"; "required": false; "isSignal": true; }; "infoPosition": { "alias": "infoPosition"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "hasBody": { "alias": "hasBody"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "activate": "activate"; }, never, ["*", "[dwStatLabelEnd]", "[dwCardHeaderEnd]", "[dwCardTags]", "[dwCardFooter]"], true, never>;
 }
 
-/** Marks the switch (usually `<p-toggleswitch formControlName=…>`) shown at the card's leading edge. */
+/** Marks the switch (usually `<dw-switch formControlName=…>`) shown at the card's leading edge. */
 declare class DwToggleCardControlDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwToggleCardControlDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwToggleCardControlDirective, "[dwToggleCardControl]", never, {}, {}, never, never, true, never>;
@@ -1348,7 +1365,7 @@ declare class DwToggleCardBodyDirective {
  * <dw-toggle-card title="Full Text Search Index" description="Enable full text search"
  *   icon="pi pi-search" [expanded]="form.value.fullTextSearchIndex"
  *   [disabledReason]="graphDbOn ? '' : 'Requires Graph Database Storage to be enabled'">
- *   <p-toggleswitch dwToggleCardControl formControlName="fullTextSearchIndex" />
+ *   <dw-switch dwToggleCardControl formControlName="fullTextSearchIndex" />
  *   <ng-template dwToggleCardBody>…configuration fields…</ng-template>
  * </dw-toggle-card>
  * ```
@@ -2344,6 +2361,1043 @@ declare class DwTooltipIfTruncatedDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTooltipIfTruncatedDirective, "[dwTooltipIfTruncated]", never, { "truncationTarget": { "alias": "truncationTarget"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type DwTooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * `multiline` keeps line breaks (up to 360px), `code` monospace, `error` danger red, `toolbar` a slate chip, `preview`
+ * a long value shown whole (up to 720 × 340px, then scrolled; pair it with `dwTooltipInteractive`).
+ */
+type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar' | 'preview';
+/**
+ * A tooltip on any element, in crystal's look (PrimeNG's Tooltip underneath, which the app never imports). It opens
+ * on hover and focus, above the element unless told otherwise, appended to `<body>` so nothing clips it.
+ *
+ * ```html
+ * <button dwTooltip="Refresh">…</button>
+ * <span [dwTooltip]="fullName" dwTooltipPosition="bottom" [dwTooltipDelay]="300">{{ shortName }}</span>
+ * <i dwTooltip="Line one&#10;line two" dwTooltipVariant="multiline"></i>
+ * <span [dwTooltip]="token" [dwTooltipInteractive]="true">Token</span>   <!-- hover into it to copy -->
+ * ```
+ */
+declare class DwTooltipDirective {
+    private readonly prime;
+    readonly dwTooltipPosition: _angular_core.InputSignal<DwTooltipPosition>;
+    /** Milliseconds before it opens. */
+    readonly dwTooltipDelay: _angular_core.InputSignal<number>;
+    readonly dwTooltipVariant: _angular_core.InputSignal<DwTooltipVariant>;
+    /** Stays open while the pointer moves onto it, so its text can be selected and copied. */
+    readonly dwTooltipInteractive: _angular_core.InputSignal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTooltipDirective, "[dwTooltip]", never, { "dwTooltipPosition": { "alias": "dwTooltipPosition"; "required": false; "isSignal": true; }; "dwTooltipDelay": { "alias": "dwTooltipDelay"; "required": false; "isSignal": true; }; "dwTooltipVariant": { "alias": "dwTooltipVariant"; "required": false; "isSignal": true; }; "dwTooltipInteractive": { "alias": "dwTooltipInteractive"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "dwTooltip"; "tooltipDisabled": "dwTooltipDisabled"; }; outputs: {}; }]>;
+}
+
+type DwInputSize = 'sm' | 'md' | 'lg';
+/**
+ * Crystal's text input: a native `<input>` in crystal's look (PrimeNG's InputText underneath, which the app never
+ * imports). Works with ngModel and reactive forms, and inside `dw-field`, which wires its label and error.
+ *
+ * ```html
+ * <input dwInput placeholder="Name" [(ngModel)]="name" />
+ * <input dwInput size="sm" type="number" formControlName="limit" />
+ * <input dwInput [fluid]="true" [invalid]="!!serverError" />
+ * ```
+ */
+declare class DwInputDirective {
+    private readonly prime;
+    /** `md` by default; `sm` matches small buttons (28px). Shadows the native character-count `size` attribute. */
+    set size(size: DwInputSize | null | undefined);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwInputDirective, "input[dwInput]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1$1.InputText; inputs: { "fluid": "fluid"; "invalid": "invalid"; }; outputs: {}; }]>;
+}
+/**
+ * Crystal's multi-line text input: a native `<textarea>` in crystal's look (PrimeNG's Textarea underneath).
+ * `autoResize` grows it with its content.
+ *
+ * ```html
+ * <textarea dwInput rows="3" [(ngModel)]="prompt"></textarea>
+ * <textarea dwInput [autoResize]="true" formControlName="notes"></textarea>
+ * ```
+ */
+declare class DwTextareaDirective {
+    private readonly prime;
+    /** `md` by default; `sm` uses the 12px type. */
+    set size(size: DwInputSize | null | undefined);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTextareaDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTextareaDirective, "textarea[dwInput]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i2.Textarea; inputs: { "autoResize": "autoResize"; "fluid": "fluid"; "invalid": "invalid"; }; outputs: {}; }]>;
+}
+/** Both: `imports: [DW_INPUT]` covers `<input dwInput>` and `<textarea dwInput>`. */
+declare const DW_INPUT: readonly [typeof DwInputDirective, typeof DwTextareaDirective];
+
+/**
+ * What every crystal form control shares (dw-select, dw-checkbox, dw-switch…): it works with ngModel, formControlName
+ * and formControl, or on its own through `[(value)]`; it is disabled by the form or by `disabled`; and it shows
+ * itself invalid once its control is invalid and touched or dirty (as crystal's inputs do), or when `invalid` says so.
+ *
+ * A subclass renders its PrimeNG control from `isDisabled()` and `showInvalid()` and hands it to `drive()`, which keeps
+ * it in step with `value()`; or it calls `commit(value)` itself when the user changes the value, and `markTouched()`
+ * when the control loses focus.
+ */
+declare abstract class DwFormControl<T> implements ControlValueAccessor, OnInit {
+    private readonly ngControl;
+    private readonly destroyRef;
+    /** The value, for use without forms: `[(value)]`. With forms, bind ngModel / formControlName instead. */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Shows the invalid state whatever the form says (e.g. a server error). */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The user changed the value (not emitted when the form or `[value]` sets one). */
+    readonly changed: _angular_core.OutputEmitterRef<T | null>;
+    private readonly formDisabled;
+    /** Bumped on every status / value / touched event of the bound control, so `showInvalid` re-evaluates. */
+    private readonly controlEvents;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly showInvalid: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    constructor();
+    ngOnInit(): void;
+    writeValue(value: T | null | undefined): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    /** The user changed the value. */
+    protected commit(value: T | null): void;
+    /**
+     * Keeps a PrimeNG control (its own value accessor) in step with this one, synchronously: the value goes in through
+     * its `writeValue`, the user's changes and blurs come back. Call from the constructor with the control's viewChild.
+     * (A second ngModel on the PrimeNG control would write a microtask after the app's, one render behind.)
+     * `prepare` runs just before each write, for inputs the control reads while writing (a radio's own value).
+     * Only this control's value and what `prepare` reads are tracked: PrimeNG's own signals, which `writeValue` reads and
+     * sets, are not, or a write that changes one would run the effect again, without end.
+     * The user's own change is not written back (as with ngModel): the control has it already, and some redraw on a
+     * write (a date picker turns its calendar to the written date's month).
+     */
+    protected drive<C extends DwPrimeValueAccessor<T>>(prime: () => C | undefined, prepare?: (control: C) => void): void;
+    /** The control lost focus. */
+    protected markTouched(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwFormControl<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwFormControl<any>, never, never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+}
+/** The part of a PrimeNG form control that `drive()` uses: Angular's value accessor. */
+interface DwPrimeValueAccessor<T> {
+    writeValue(value: T | null): void;
+    registerOnChange(fn: (value: T | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+}
+type DwControlSize = 'sm' | 'md' | 'lg';
+/** Crystal's control sizes in PrimeNG's words: `md` is PrimeNG's default. */
+declare function primeSize(size: DwControlSize): 'small' | 'large' | undefined;
+
+/** Context of an option template: the option itself. */
+interface DwSelectOptionContext<T = unknown> {
+    $implicit: T;
+}
+/**
+ * How each option of a dw-select / dw-multiselect is drawn in its list.
+ *
+ * ```html
+ * <dw-select [options]="llms" optionLabel="name" optionValue="id" [(ngModel)]="llmId">
+ *   <ng-template dwSelectOption let-llm><dw-entity-icon kind="llm" [type]="llm.provider" /> {{ llm.name }}</ng-template>
+ * </dw-select>
+ * ```
+ */
+declare class DwSelectOptionDirective<T = unknown> {
+    readonly template: TemplateRef<DwSelectOptionContext<T>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectOptionDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectOptionDirective<any>, "ng-template[dwSelectOption]", never, {}, {}, never, never, true, never>;
+}
+/** How a dw-select draws its selected option in the closed control (defaults to the option template's look). */
+declare class DwSelectValueDirective<T = unknown> {
+    readonly template: TemplateRef<DwSelectOptionContext<T>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectValueDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectValueDirective<any>, "ng-template[dwSelectValue]", never, {}, {}, never, never, true, never>;
+}
+/** Content under the option list (e.g. a "Create new" action). */
+declare class DwSelectFooterDirective {
+    readonly template: TemplateRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSelectFooterDirective, "ng-template[dwSelectFooter]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Crystal's single select (PrimeNG's Select underneath, which the app never imports). The option list is appended to
+ * `<body>`, as wide as the control; long options end in an ellipsis. Works with ngModel and reactive forms, inside
+ * `dw-field`, or on its own with `[(value)]`.
+ *
+ * ```html
+ * <dw-select [options]="regions" optionLabel="name" optionValue="id" placeholder="Region" formControlName="region" />
+ * <dw-select size="sm" [options]="llms" [(ngModel)]="llm" [filter]="true" filterBy="name" (changed)="save($event)">
+ *   <ng-template dwSelectOption let-llm>{{ llm.name }}</ng-template>
+ * </dw-select>
+ * <dw-select [options]="providers" [readonly]="true" [(value)]="provider" />
+ * ```
+ */
+declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
+    readonly options: _angular_core.InputSignal<unknown[] | null | undefined>;
+    /** The option field to show; options are shown as they are when omitted (strings, numbers). */
+    readonly optionLabel: _angular_core.InputSignal<string | undefined>;
+    /** The option field to bind; the whole option is the value when omitted. */
+    readonly optionValue: _angular_core.InputSignal<string | undefined>;
+    /** The option field that disables an option. */
+    readonly optionDisabled: _angular_core.InputSignal<string | undefined>;
+    /** The field that identifies an option when the value is an object. */
+    readonly dataKey: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** A search box at the top of the list. */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Fields to search, comma-separated; the label by default. */
+    readonly filterBy: _angular_core.InputSignal<string | undefined>;
+    readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly emptyFilterMessage: _angular_core.InputSignal<string>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A clear (×) button once something is selected. */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Lets the user type a value of their own. */
+    readonly editable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Height of the list before it scrolls. */
+    readonly scrollHeight: _angular_core.InputSignal<string>;
+    readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Id of the focusable element, for a `<label for>` outside dw-field. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    /** Fills the width of its container. */
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stacks the list above this z-index (as dw-dialog / dw-drawer / dw-popover's `baseZIndex`), for a select inside a
+     *  layer that sets its own z-index, e.g. a page that hosts crystal in a high layer. 0 = PrimeNG's own stacking. */
+    readonly baseZIndex: _angular_core.InputSignal<number>;
+    /** Reads as a fixed value, not a control: no arrow, the value in body text. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    protected readonly optionTemplate: _angular_core.Signal<DwSelectOptionDirective<any> | undefined>;
+    protected readonly valueTemplate: _angular_core.Signal<DwSelectValueDirective<any> | undefined>;
+    protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    protected readonly overlayOptions: _angular_core.Signal<{
+        baseZIndex: number;
+    } | undefined>;
+    private readonly prime;
+    constructor();
+    /** Opens the list (e.g. when an editable select's text is clicked). */
+    open(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSelectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSelectComponent<any>, "dw-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "valueTemplate", "footerTemplate"], never, true, never>;
+}
+
+/**
+ * Crystal's multiple select (PrimeNG's MultiSelect underneath, which the app never imports): a checkbox per option,
+ * a search box and "select all" by default, the picks shown as a comma list (or chips) up to `maxSelectedLabels`.
+ * The list is appended to `<body>`. Its value is an array.
+ *
+ * ```html
+ * <dw-multiselect [options]="tags" optionLabel="name" optionValue="id" placeholder="Tags" formControlName="tags" />
+ * <dw-multiselect [options]="columns" [(ngModel)]="shown" display="chip" [filter]="false" />
+ * ```
+ */
+declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
+    readonly options: _angular_core.InputSignal<unknown[] | undefined>;
+    readonly optionLabel: _angular_core.InputSignal<string | undefined>;
+    readonly optionValue: _angular_core.InputSignal<string | undefined>;
+    readonly optionDisabled: _angular_core.InputSignal<string | undefined>;
+    readonly dataKey: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** A search box at the top of the list (on by default, as in PrimeNG). */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly filterBy: _angular_core.InputSignal<string | undefined>;
+    readonly filterPlaceholder: _angular_core.InputSignal<string | undefined>;
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly emptyFilterMessage: _angular_core.InputSignal<string>;
+    /** A "select all" checkbox above the options. */
+    readonly showToggleAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** How many picks are listed before it says "{0} items selected"; `null` lists them all. */
+    readonly maxSelectedLabels: _angular_core.InputSignal<number | null>;
+    /** The summary past `maxSelectedLabels`; `{0}` is the count. */
+    readonly selectedItemsLabel: _angular_core.InputSignal<string | undefined>;
+    readonly display: _angular_core.InputSignal<"comma" | "chip">;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly scrollHeight: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Stacks the list above this z-index (as dw-dialog / dw-drawer / dw-popover's `baseZIndex`), for a select inside a
+     *  layer that sets its own z-index, e.g. a page that hosts crystal in a high layer. 0 = PrimeNG's own stacking. */
+    readonly baseZIndex: _angular_core.InputSignal<number>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    protected readonly optionTemplate: _angular_core.Signal<DwSelectOptionDirective<any> | undefined>;
+    protected readonly footerTemplate: _angular_core.Signal<DwSelectFooterDirective | undefined>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    protected readonly overlayOptions: _angular_core.Signal<{
+        baseZIndex: number;
+    } | undefined>;
+    /** PrimeNG reads a null maxSelectedLabels as 0 (summarise everything), so "list them all" is a ceiling no list reaches. */
+    protected readonly listAll: number;
+    private readonly prime;
+    constructor();
+    /** Opens the list from code. */
+    open(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwMultiselectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwMultiselectComponent<any>, "dw-multiselect", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterBy": { "alias": "filterBy"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "footerTemplate"], never, true, never>;
+}
+
+/**
+ * Crystal's checkbox (PrimeNG's Checkbox underneath, which the app never imports). On its own it is on/off: its value
+ * is a boolean. With an `option`, it is one box of a set that fills one array: ticked while the array holds the option,
+ * and clicking adds or removes it (as dw-radio's `option`, for many picks). With a `label` (or projected content) the
+ * label sits beside it on one line and toggles it too.
+ *
+ * ```html
+ * <dw-checkbox label="Remember me" [(ngModel)]="remember" />
+ * @for (f of filters; track f.name) {
+ *   <dw-checkbox [option]="f.name" [label]="f.name" [(ngModel)]="selectedFilterNames" />
+ * }
+ * <dw-checkbox formControlName="agree">I accept the <a href="/terms">terms</a></dw-checkbox>
+ * <dw-checkbox ariaLabel="Select row" [indeterminate]="some" [(value)]="all" />
+ * ```
+ */
+declare class DwCheckboxComponent<T = boolean> extends DwFormControl<T> {
+    /** Makes this box one of a set: the value is an array, and this box stands for this entry of it. */
+    readonly option: _angular_core.InputSignal<unknown>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** For a checkbox with no visible label. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Id of the native checkbox; generated when omitted. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    /** The "some, not all" state of a select-all checkbox. */
+    readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    private readonly generatedId;
+    protected readonly id: _angular_core.Signal<string>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwCheckboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCheckboxComponent<any>, "dw-checkbox", never, { "option": { "alias": "option"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, ["*"], true, never>;
+}
+
+/**
+ * One radio button of a choice (PrimeNG's RadioButton underneath, which the app never imports). Every radio of the
+ * choice binds the same model and `name`; each has its own `option`, and is checked while the model equals it.
+ *
+ * ```html
+ * <dw-radio name="schedule" option="daily" label="Daily" [(ngModel)]="schedule" />
+ * <dw-radio name="schedule" option="weekly" label="Weekly" [(ngModel)]="schedule" />
+ * ```
+ */
+declare class DwRadioComponent<T = unknown> extends DwFormControl<T> {
+    /** The value this radio stands for: the model takes it when the radio is picked. */
+    readonly option: _angular_core.InputSignal<T>;
+    /** Groups the radios of one choice (keyboard arrows move between them). */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    private readonly generatedId;
+    protected readonly id: _angular_core.Signal<string>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwRadioComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwRadioComponent<any>, "dw-radio", never, { "option": { "alias": "option"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, ["*"], true, never>;
+}
+
+type DwSwitchSize = 'xs' | 'sm' | 'md';
+/**
+ * Crystal's on/off switch (PrimeNG's ToggleSwitch underneath, which the app never imports); its value is a boolean.
+ * `sm` sits beside small buttons in a toolbar, `xs` in dense settings rows.
+ *
+ * ```html
+ * <dw-switch label="Enabled" formControlName="enabled" />
+ * <dw-switch size="xs" ariaLabel="Stream responses" [(ngModel)]="stream" (changed)="save()" />
+ * ```
+ */
+declare class DwSwitchComponent extends DwFormControl<boolean> {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwSwitchSize>;
+    /** Shows the state without letting the user change it. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    private readonly generatedId;
+    protected readonly id: _angular_core.Signal<string>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSwitchComponent, "dw-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "blurred": "blurred"; }, never, never, true, never>;
+}
+
+/**
+ * Crystal's number input (PrimeNG's InputNumber underneath, which the app never imports): typed digits only, kept
+ * within `min` / `max`, with optional prefix / suffix text, fraction digits and +/− buttons. Its value is a number.
+ *
+ * ```html
+ * <dw-number-input [min]="1" [max]="100" suffix=" %" formControlName="threshold" />
+ * <dw-number-input size="sm" [showButtons]="true" buttonLayout="horizontal" [(ngModel)]="retries" />
+ * ```
+ */
+declare class DwNumberInputComponent extends DwFormControl<number> {
+    readonly min: _angular_core.InputSignal<number | null | undefined>;
+    readonly max: _angular_core.InputSignal<number | null | undefined>;
+    /** How far the buttons and arrow keys move it. */
+    readonly step: _angular_core.InputSignal<number>;
+    readonly prefix: _angular_core.InputSignal<string | undefined>;
+    readonly suffix: _angular_core.InputSignal<string | undefined>;
+    readonly minFractionDigits: _angular_core.InputSignal<number | undefined>;
+    readonly maxFractionDigits: _angular_core.InputSignal<number | undefined>;
+    /** Thousands separators (on by default, as in PrimeNG). */
+    readonly useGrouping: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** +/− buttons: stacked arrows on the right, or − and + on either side (`horizontal`). */
+    readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly buttonLayout: _angular_core.InputSignal<"horizontal" | "stacked">;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwNumberInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwNumberInputComponent, "dw-number-input", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; "isSignal": true; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; "isSignal": true; }; "useGrouping": { "alias": "useGrouping"; "required": false; "isSignal": true; }; "showButtons": { "alias": "showButtons"; "required": false; "isSignal": true; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+}
+
+/** What a date picker holds: one date, or a list of them for `selectionMode="range"` (start, end) and `"multiple"`. */
+type DwDateValue = Date | (Date | null)[];
+/**
+ * Crystal's date (and time) picker, PrimeNG's DatePicker underneath, which the app never imports. A text field that
+ * opens a calendar appended to `<body>`, or the calendar alone with `inline`. It picks one date, a range or several
+ * dates, optionally with a time. Works with ngModel and reactive forms, inside `dw-field`, or on its own with
+ * `[(value)]`.
+ *
+ * `dateFormat` uses PrimeNG's tokens: `yy` is the four-digit year, `mm` / `M` the month as a number / short name and
+ * `dd` the day, so `"yy-mm-dd"` shows 2026-03-14 and `"M dd, yy"` shows Mar 14, 2026.
+ *
+ * ```html
+ * <dw-date-picker dateFormat="yy-mm-dd" [maxDate]="today" placeholder="Start date" formControlName="start" />
+ * <dw-date-picker [showTime]="true" [showSeconds]="true" [showIcon]="true" [(ngModel)]="runAt" (changed)="save()" />
+ * <dw-date-picker [inline]="true" selectionMode="range" [numberOfMonths]="2" [compact]="true" [(value)]="range" />
+ * <dw-date-picker [inline]="true" [flush]="true" [fluid]="true" [(ngModel)]="expiry" />
+ * ```
+ */
+declare class DwDatePickerComponent<T extends DwDateValue = Date> extends DwFormControl<T> {
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    /** How the field shows the date, in PrimeNG's tokens (see above); PrimeNG's locale format (`mm/dd/yy`) when omitted. */
+    readonly dateFormat: _angular_core.InputSignal<string | undefined>;
+    /** Picks a time as well as a date. */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hourFormat: _angular_core.InputSignal<"12" | "24">;
+    /** The earliest and latest dates that can be picked. */
+    readonly minDate: _angular_core.InputSignal<Date | null | undefined>;
+    readonly maxDate: _angular_core.InputSignal<Date | null | undefined>;
+    /** One date, a start and an end (`range`), or any number of dates (`multiple`). */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "range" | "multiple">;
+    /** Shows the calendar itself, always open, instead of a field. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly numberOfMonths: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Shows the days of the months before and after, greyed. */
+    readonly showOtherMonths: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A calendar icon: a button beside the field, or drawn inside it (`iconDisplay="input"`). */
+    readonly showIcon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly iconDisplay: _angular_core.InputSignal<"button" | "input">;
+    /** An × in the field that clears it. */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Smaller day cells, type and time picker, for a calendar inside a popover or a narrow panel. */
+    readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * An inline calendar without a box of its own (border, fill, radius, padding): it sits on its container's surface,
+     * a popover's or a panel's, which pads it. Inline only.
+     */
+    readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The calendar's z-index floor, for a picker inside an overlay that sits above crystal's own layers. */
+    readonly baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    /** Fills its container: the field, or the inline calendar. */
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A day (or time) was picked in the calendar; `changed` also follows typing. */
+    readonly selected: _angular_core.OutputEmitterRef<Date>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwDatePickerComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwDatePickerComponent<any>, "dw-date-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "showOtherMonths": { "alias": "showOtherMonths"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "iconDisplay": { "alias": "iconDisplay"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "focused": "focused"; "blurred": "blurred"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type DwChartType = 'line' | 'bar' | 'doughnut' | 'pie' | 'polarArea' | 'radar' | 'scatter' | 'bubble';
+/** A click on a bar, point or slice: the chart.js element and its dataset. */
+interface DwChartSelectEvent {
+    originalEvent: Event;
+    element: {
+        datasetIndex: number;
+        index: number;
+    };
+    dataset: unknown[];
+}
+/**
+ * Crystal's chart: a chart.js canvas (through PrimeNG's Chart, which the app never imports; chart.js comes with
+ * crystal). `data` and `options` are chart.js's own; a new object for either redraws the chart, and so does a new
+ * `type`, size or `plugins`. A canvas cannot read CSS variables, so resolve colours from the tokens first: `cssVar()` and
+ * `chartPalette()` from `@dataworkz/crystal/tokens`.
+ *
+ * The chart fills its container's width and keeps chart.js's aspect ratio, unless it is given a `height` (or the
+ * options say `maintainAspectRatio: false` and the container has one).
+ *
+ * ```html
+ * <dw-chart type="line" [data]="requests()" [options]="lineOptions" />
+ * <dw-chart [type]="kind()" [data]="series()" [options]="options()" height="240px" (dataSelect)="drill($event)" />
+ * ```
+ */
+declare class DwChartComponent {
+    readonly type: _angular_core.InputSignal<DwChartType>;
+    /** chart.js data: `{ labels, datasets }`. */
+    readonly data: _angular_core.InputSignal<object | null | undefined>;
+    /** chart.js options. */
+    readonly options: _angular_core.InputSignal<object | null | undefined>;
+    /** chart.js plugins for this chart only. */
+    readonly plugins: _angular_core.InputSignal<unknown[]>;
+    /** A CSS width / height for the canvas box (`240px`, `100%`); chart.js sizes it when omitted. */
+    readonly width: _angular_core.InputSignal<string | undefined>;
+    readonly height: _angular_core.InputSignal<string | undefined>;
+    /** Redraws the chart when its container resizes. */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** A bar, point or slice was clicked. */
+    readonly dataSelect: _angular_core.OutputEmitterRef<DwChartSelectEvent>;
+    private readonly prime;
+    constructor();
+    /** Redraws the chart in place (animating), after the app changed `data` or `options` without a new object. */
+    refresh(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwChartComponent, "dw-chart", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "dataSelect": "dataSelect"; }, never, never, true, never>;
+}
+
+/**
+ * A node of a `dw-tree`. `children` are its sub-nodes; a node with `leaf: false` and no children yet shows an expand
+ * toggle, for children loaded when it opens (`nodeExpand`). The tree sets `expanded`, `parent` and, for checkboxes,
+ * `partialSelected` as the user works it.
+ */
+interface DwTreeNode<T = unknown> {
+    /** Unique among the tree's nodes; selection and re-renders match nodes by it. */
+    key?: string;
+    label?: string;
+    data?: T;
+    /** A `pi pi-…` icon before the label; `expandedIcon` / `collapsedIcon` swap it as the node opens. */
+    icon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    children?: DwTreeNode<T>[];
+    /** `false`: can be expanded although it has no children yet. */
+    leaf?: boolean;
+    expanded?: boolean;
+    /** `false`: shown, but cannot be selected. */
+    selectable?: boolean;
+    /** Shows a spinner in place of the toggle while its children load. */
+    loading?: boolean;
+    partialSelected?: boolean;
+    parent?: DwTreeNode<T>;
+    /** A class on the node's row, for the screen's own layout of its content. */
+    styleClass?: string;
+}
+/** The node a `dw-tree` event is about, with the browser event that caused it. */
+interface DwTreeNodeEvent<T = unknown> {
+    originalEvent: Event;
+    node: DwTreeNode<T>;
+}
+/** What a tree selects: one node (`single`), or a list of them (`multiple`, `checkbox`). */
+type DwTreeSelection<T = unknown> = DwTreeNode<T> | DwTreeNode<T>[] | null;
+/**
+ * A node's content, instead of its label: `<ng-template dwTreeNode let-node>…</ng-template>`. `node` is the
+ * `DwTreeNode`, untyped in the template (as in PrimeNG's own), so it can read the screen's own `data`.
+ */
+declare class DwTreeNodeDirective {
+    readonly template: TemplateRef<{
+        $implicit: DwTreeNode;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTreeNodeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwTreeNodeDirective, "ng-template[dwTreeNode]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Crystal's tree, PrimeNG's Tree underneath, which the app never imports. Nodes open and close with their toggle or the
+ * arrow keys; a tree can select one node, several (with modifier keys), or check them (`checkbox`, where checking a
+ * parent checks its children and a parent of partly checked children shows a dash).
+ *
+ * Children can load when a node opens: give it `leaf: false`, then fill `children` in `nodeExpand` (set `loading` on
+ * the node meanwhile). `contextMenu` takes a `dw-menu` (`trigger="none"`) that opens at the pointer on right-click, its
+ * commands receiving the node.
+ *
+ * The tree has no box of its own and sits on its container; `framed` gives it a border and padding, and
+ * `scrollHeight` a height after which it scrolls. `size="sm"` makes rows compact (a smaller toggle and type), for a
+ * sidebar or a narrow panel; `marker` adds an accent bar to the selected row, as on `dw-nav-list`. `.dw-tree` (no `-view`) is the markup-only guide-line tree for
+ * hand-built lists.
+ *
+ * ```html
+ * <dw-tree [value]="folders" selectionMode="single" [(selection)]="folder" (nodeExpand)="loadChildren($event.node)" />
+ * <dw-tree [value]="privileges" selectionMode="checkbox" [(selection)]="granted" scrollHeight="320px" [framed]="true" />
+ * <dw-tree [value]="dirs" [contextMenu]="dirMenu" ariaLabel="Directories">
+ *   <ng-template dwTreeNode let-node><span class="dw-truncate">{{ node.label }}</span></ng-template>
+ * </dw-tree>
+ * <dw-menu #dirMenu [items]="dirActions" trigger="none" />
+ * ```
+ */
+declare class DwTreeComponent<T = unknown> {
+    readonly value: _angular_core.InputSignal<DwTreeNode<T>[] | null | undefined>;
+    /** No selection (`null`), one node, several with Ctrl / Cmd and Shift (`multiple`), or checkboxes. */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "multiple" | "checkbox" | null>;
+    /** The selected node, or nodes (`multiple`, `checkbox`). */
+    readonly selection: _angular_core.ModelSignal<DwTreeSelection<T>>;
+    /** Checkboxes: checking a node checks its children, and its parent once all of them are. */
+    readonly propagateSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A loading state for the whole tree, its nodes dimmed under a spinner (`mask`), or a spinner beside them (`icon`). */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loadingMode: _angular_core.InputSignal<"mask" | "icon">;
+    /** A CSS height after which the tree scrolls (`320px`, `calc(100vh - 250px)`); it grows with its nodes when omitted. */
+    readonly scrollHeight: _angular_core.InputSignal<string | undefined>;
+    /** Shown when there are no nodes. */
+    readonly emptyMessage: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** A border, radius and padding around the tree, for one that is not already inside a framed surface. */
+    readonly framed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `sm`: compact rows (smaller toggle, padding and type), for a sidebar or a narrow panel. */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** An accent bar at the start of the selected row (or rows), as `dw-nav-list`'s `marker`. */
+    readonly marker: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** A `dw-menu` (`trigger="none"`) opened at the pointer when a node is right-clicked; its commands get the node. */
+    readonly contextMenu: _angular_core.InputSignal<DwMenuComponent<DwTreeNode<T>> | undefined>;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    readonly nodeUnselect: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    /** A node opened: the moment to load its children. */
+    readonly nodeExpand: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    readonly nodeCollapse: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    /** A node was right-clicked, with `contextMenu` set; the menu is opening. */
+    readonly nodeContextMenu: _angular_core.OutputEmitterRef<DwTreeNodeEvent<T>>;
+    protected readonly nodeTemplate: _angular_core.Signal<DwTreeNodeDirective | undefined>;
+    /**
+     * PrimeNG shows its context menu itself, before saying which node it is for; it gets this stand-in, and the
+     * `dw-menu` opens once the node is known (`openMenu`).
+     */
+    protected readonly menuBridge: _angular_core.Signal<{
+        show: () => undefined;
+        hide: () => void | undefined;
+    } | undefined>;
+    protected openMenu(event: DwTreeNodeEvent<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwTreeComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwTreeComponent<any>, "dw-tree", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "propagateSelection": { "alias": "propagateSelection"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMode": { "alias": "loadingMode"; "required": false; "isSignal": true; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "marker": { "alias": "marker"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "nodeSelect": "nodeSelect"; "nodeUnselect": "nodeUnselect"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeContextMenu": "nodeContextMenu"; }, ["nodeTemplate"], never, true, never>;
+}
+
+/** `flush`: rows on their container with a divider between panels; `card`: each panel its own bordered card. */
+/** What PrimeNG's Accordion and its panels take as a value. */
+type PrimeAccordionValue = string | number | string[] | number[] | null | undefined;
+type DwAccordionVariant = 'flush' | 'card';
+/** What a `dw-accordion` holds open: one panel's value, or a list of them (`multiple`); `null` when none. */
+type DwAccordionValue<V = unknown> = V | V[] | null;
+/** A panel the user opened or closed: its `value` (its index when it has none) and its index among the panels. */
+interface DwAccordionToggleEvent<V = unknown> {
+    value: V;
+    index: number;
+}
+/** What a header template gets: `let-active` (or `let-open`, the implicit value) is whether the panel is open. */
+interface DwAccordionHeaderContext {
+    $implicit: boolean;
+    active: boolean;
+}
+/**
+ * A panel's header row, instead of its `header` text: `<ng-template dwAccordionHeader let-open>…</ng-template>`.
+ * Clicking the row toggles the panel; mark controls inside it with `dwAccordionHeaderAction` so they don't.
+ */
+declare class DwAccordionHeaderDirective {
+    readonly template: TemplateRef<DwAccordionHeaderContext>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAccordionHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwAccordionHeaderDirective, "ng-template[dwAccordionHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * A panel's content, created the first time the panel opens (and kept, so a form in it keeps its state):
+ * `<ng-template dwAccordionContent>…</ng-template>`. Content placed directly in the panel is created up front.
+ */
+declare class DwAccordionContentDirective {
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAccordionContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwAccordionContentDirective, "ng-template[dwAccordionContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks a control inside a panel's header (a menu button, an editable title, a switch) whose clicks and keys belong to
+ * it: they don't toggle the panel, and the header's own keys (Enter, Space, the arrows) don't reach the panel.
+ */
+declare class DwAccordionHeaderActionDirective {
+    protected stop(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAccordionHeaderActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwAccordionHeaderActionDirective, "[dwAccordionHeaderAction]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * One panel of a `dw-accordion`: a header row (`header` text, or a `dwAccordionHeader` template) over its content.
+ * The accordion renders it; the panel element itself is not placed in the page, so style its content, not the tag.
+ */
+declare class DwAccordionPanelComponent<V = unknown> {
+    /** What `value` of the accordion holds while this panel is open; its index among the panels when omitted. */
+    readonly value: _angular_core.InputSignal<V | undefined>;
+    /** The header's text, when there is no `dwAccordionHeader` template. */
+    readonly header: _angular_core.InputSignal<string>;
+    /** Shown, but cannot be opened or closed. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly testId: _angular_core.InputSignal<string | null>;
+    readonly headerTemplate: _angular_core.Signal<DwAccordionHeaderDirective | undefined>;
+    readonly lazyContent: _angular_core.Signal<DwAccordionContentDirective | undefined>;
+    readonly body: _angular_core.Signal<TemplateRef<unknown>>;
+    /** Whether the panel has been open once, so its lazy content stays created. */
+    readonly loaded: _angular_core.WritableSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAccordionPanelComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwAccordionPanelComponent<any>, "dw-accordion-panel", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, ["headerTemplate", "lazyContent"], ["*"], true, never>;
+}
+/**
+ * Crystal's accordion, PrimeNG's Accordion underneath, which the app never imports: panels that open and close under
+ * their header row, one at a time or several (`multiple`). `[(value)]` is what is open, by each panel's `value` (its
+ * index when it has none). `opened` / `closed` say which panel the user opened or closed, once its animation is done,
+ * so content that measures itself (an editor, a chart) can refresh then.
+ *
+ * Headers are buttons (Enter or Space toggles, the arrow keys, Home and End move between them), each controlling its
+ * region. A header template can hold controls of its own: mark them `dwAccordionHeaderAction` (or stop the event's
+ * propagation) so using them doesn't toggle the panel. `dwAccordionContent` creates a panel's content the first time
+ * it opens.
+ *
+ * `variant="flush"` (default) lays the panels on their container with a divider between them; `card` makes each one
+ * a bordered card, the list spaced, a divider under the header while it is open.
+ *
+ * ```html
+ * <dw-accordion [multiple]="true" [(value)]="open" variant="card" (opened)="load($event.value)">
+ *   @for (tool of tools; track tool.id) {
+ *     <dw-accordion-panel [value]="tool.id">
+ *       <ng-template dwAccordionHeader>
+ *         <span class="dw-truncate">{{ tool.name }}</span>
+ *         <dw-icon-button dwAccordionHeaderAction icon="pi pi-ellipsis-v" ariaLabel="More" (clicked)="menu.toggle($event)" />
+ *       </ng-template>
+ *       <ng-template dwAccordionContent><app-tool-form [tool]="tool" /></ng-template>
+ *     </dw-accordion-panel>
+ *   }
+ * </dw-accordion>
+ * ```
+ */
+declare class DwAccordionComponent<V = unknown> {
+    /** Several panels open at once; `value` is then a list. */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The open panel's value (a list of them with `multiple`); `null` when none is open. */
+    readonly value: _angular_core.ModelSignal<DwAccordionValue<V>>;
+    readonly variant: _angular_core.InputSignal<DwAccordionVariant>;
+    /** The user opened a panel; emitted once it has finished opening. */
+    readonly opened: OutputEmitterRef<DwAccordionToggleEvent<V>>;
+    /** The user closed a panel; emitted once it has finished closing. */
+    readonly closed: OutputEmitterRef<DwAccordionToggleEvent<V>>;
+    protected readonly panels: _angular_core.Signal<readonly DwAccordionPanelComponent<V>[]>;
+    /** Crystal's motion (`--dw-dur-pop`, `--dw-ease`) for the open and close animation. */
+    protected readonly transition = "240ms cubic-bezier(0.2, 0.6, 0.2, 1)";
+    private readonly host;
+    private readonly injector;
+    private destroyed;
+    constructor();
+    /** PrimeNG types panel values as strings and numbers; it only compares them, so the panels' own values pass through. */
+    protected readonly primeValue: _angular_core.Signal<PrimeAccordionValue>;
+    protected primeKey(panel: DwAccordionPanelComponent<V>, index: number): string | number;
+    protected onPrimeValueChange(next: PrimeAccordionValue): void;
+    protected keyOf(panel: DwAccordionPanelComponent<V>, index: number): V;
+    protected isOpen(key: V): boolean;
+    /** PrimeNG changed what is open (a header clicked, or Enter / Space on it): say which panels opened and closed. */
+    protected onValueChange(next: DwAccordionValue<V> | undefined): void;
+    private openKeys;
+    /** Emits once the panel's open / close animation (if any) has finished. */
+    private emitWhenSettled;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAccordionComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwAccordionComponent<any>, "dw-accordion", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; }, ["panels"], never, true, never>;
+}
+/** Everything an accordion is built from: `imports: [...DW_ACCORDION]`. */
+declare const DW_ACCORDION: readonly [typeof DwAccordionComponent, typeof DwAccordionPanelComponent, typeof DwAccordionHeaderDirective, typeof DwAccordionContentDirective, typeof DwAccordionHeaderActionDirective];
+
+type DwStepValue = string | number;
+interface DwStep<V extends DwStepValue = DwStepValue> {
+    value: V;
+    label: string;
+    /** Can't be chosen, whatever `linear` says. */
+    disabled?: boolean;
+}
+/**
+ * Step indicator for a wizard: numbered steps joined by connector lines, each step done (before the
+ * current one), current (`aria-current="step"`) or upcoming. A done step stays clickable, to go back.
+ * It draws the step list only; the wizard shows its own panels for `value`.
+ *
+ * - `linear`: the steps after the current one can't be chosen (the wizard moves forward with its own Next).
+ * - Arrow keys, Home and End move focus between the steps that can be chosen; Enter or Space chooses one.
+ * - `framed` adds the sub-header strip (padding and a bottom rule) for a drawer or panel top.
+ *
+ * ```html
+ * <dw-stepper [steps]="[{ value: 1, label: 'Source' }, { value: 2, label: 'Target' }]" [(value)]="step" [linear]="true" />
+ * <dw-stepper dwDrawerSubheader [steps]="steps" [value]="step" size="sm" [framed]="true" doneIcon="check" />
+ * ```
+ */
+declare class DwStepperComponent {
+    readonly steps: _angular_core.InputSignal<readonly DwStep<DwStepValue>[]>;
+    /** The current step's value. Two-way: `[(value)]`, or `[value]` + `(valueChange)`. */
+    readonly value: _angular_core.ModelSignal<DwStepValue | null>;
+    /** Only the current step and the ones before it can be chosen. */
+    readonly linear: _angular_core.InputSignal<boolean>;
+    /** Every step is locked (a wizard that is saving). */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** `md` (32px numbers, a wizard header) or `sm` (24px, a drawer sub-header). */
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    /** Sub-header strip: padding and a bottom rule around the steps. */
+    readonly framed: _angular_core.InputSignal<boolean>;
+    /** PrimeIcons name (`check`) shown in place of the number of a done step. */
+    readonly doneIcon: _angular_core.InputSignal<"" | DwPrimeIcon>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly buttons;
+    readonly activeIndex: _angular_core.Signal<number>;
+    readonly listClass: _angular_core.Signal<string>;
+    /** Locked by its own `disabled` or the stepper's (drawn faded), as opposed to an upcoming step of a linear stepper. */
+    isBlocked(index: number): boolean;
+    isStepDisabled(index: number): boolean;
+    select(index: number): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwStepperComponent, "dw-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "framed": { "alias": "framed"; "required": false; "isSignal": true; }; "doneIcon": { "alias": "doneIcon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+/** What the user typed, sent when the suggestions should be (re)computed. `query` is `''` from the dropdown button. */
+interface DwAutocompleteSearchEvent {
+    query: string;
+    originalEvent: Event;
+}
+/**
+ * How the suggestion list is sized: as wide as the field, long suggestions ending in an ellipsis (`field`, crystal's
+ * select rule), or at least as wide as the field and wider for long suggestions (`auto`).
+ */
+type DwAutocompletePanelWidth = 'field' | 'auto';
+/**
+ * A suggestion's content, instead of its label: `<ng-template dwAutocompleteItem let-item>…</ng-template>`. `item` is
+ * the suggestion, untyped in the template (as in PrimeNG's own), so it can read the screen's own fields.
+ */
+declare class DwAutocompleteItemDirective {
+    readonly template: TemplateRef<{
+        $implicit: unknown;
+        index: number;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAutocompleteItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwAutocompleteItemDirective, "ng-template[dwAutocompleteItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Crystal's autocomplete, PrimeNG's AutoComplete underneath, which the app never imports. A text field that suggests
+ * as the user types: on `search` the screen filters its own list and passes the matches back as `suggestions`, shown
+ * in a list appended to `<body>`. The value is what the user typed, or the suggestion they picked (its `value` field
+ * when it has one, else the suggestion itself); `forceSelection` clears typed text that matches no suggestion. Works
+ * with ngModel and reactive forms, inside `dw-field`, or on its own with `[(value)]`.
+ *
+ * `size="sm"` gives the list the small select rows too, and `panelWidth="field"` (the default) keeps it exactly as wide
+ * as the field. `testId` lands on the text input.
+ *
+ * ```html
+ * <dw-autocomplete formControlName="mimeType" [suggestions]="mimeMatches" [dropdown]="true" (search)="filter($event.query)"
+ *   placeholder="Search or add…" testId="mime-type-autocomplete" [fluid]="true" />
+ * <dw-autocomplete #tags size="sm" [(ngModel)]="text" [suggestions]="tagMatches" optionLabel="name" [dropdown]="true"
+ *   [showEmptyMessage]="false" (search)="searchTags($event)" (selected)="pick($event)" (keydown.esc)="tags.hide()">
+ *   <ng-template dwAutocompleteItem let-tag><dw-tag [label]="tag.name" [color]="tag.color" /></ng-template>
+ * </dw-autocomplete>
+ * ```
+ */
+declare class DwAutocompleteComponent<T = unknown> extends DwFormControl<T | string> {
+    /** The suggestions to show for the last `search`: strings, or objects shown by `optionLabel` (or their `label`). */
+    readonly suggestions: _angular_core.InputSignal<T[] | null | undefined>;
+    /** The suggestion field to show; a suggestion's `label`, or the suggestion itself, when omitted. */
+    readonly optionLabel: _angular_core.InputSignal<string | undefined>;
+    /** A button beside the field that shows every suggestion (a `search` with an empty query). */
+    readonly dropdown: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Only a picked suggestion is a value: typed text that matches none is cleared when the field loses focus. */
+    readonly forceSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Shows `emptyMessage` when a search finds nothing; off, the list just stays closed. */
+    readonly showEmptyMessage: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** PrimeNG's locale text ("No results found") when omitted. */
+    readonly emptyMessage: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Id of the text input, for a `<label for>` outside dw-field. */
+    readonly inputId: _angular_core.InputSignal<string | undefined>;
+    /** Milliseconds after the last keystroke before `search` is sent. */
+    readonly delay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Characters typed before a `search` is sent. */
+    readonly minLength: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly size: _angular_core.InputSignal<DwControlSize>;
+    /** Fills the width of its container. */
+    readonly fluid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly panelWidth: _angular_core.InputSignal<DwAutocompletePanelWidth>;
+    /** Stacks the list above this z-index, for a field inside a layer that sets its own (as dw-select's). */
+    readonly baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `data-testid` on the text input. */
+    readonly testId: _angular_core.InputSignal<string | null | undefined>;
+    /** The suggestions are wanted for this query: set `suggestions` in reply. */
+    readonly search: _angular_core.OutputEmitterRef<DwAutocompleteSearchEvent>;
+    /** A suggestion was picked from the list; `changed` also follows typing. */
+    readonly selected: _angular_core.OutputEmitterRef<T>;
+    /** A key went down in the text input, before the autocomplete handles it. */
+    readonly inputKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    readonly focused: _angular_core.OutputEmitterRef<void>;
+    readonly blurred: _angular_core.OutputEmitterRef<void>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly itemTemplate: _angular_core.Signal<DwAutocompleteItemDirective | undefined>;
+    protected readonly primeSize: _angular_core.Signal<"small" | "large" | undefined>;
+    protected readonly overlayOptions: _angular_core.Signal<{
+        baseZIndex: number;
+    } | undefined>;
+    protected readonly panelClass: _angular_core.Signal<string>;
+    private readonly prime;
+    private readonly host;
+    constructor();
+    /** Opens the suggestion list (with the suggestions it has). */
+    show(): void;
+    /** Closes the suggestion list. */
+    hide(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwAutocompleteComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwAutocompleteComponent<any>, "dw-autocomplete", never, { "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "dropdown": { "alias": "dropdown"; "required": false; "isSignal": true; }; "forceSelection": { "alias": "forceSelection"; "required": false; "isSignal": true; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "search": "search"; "selected": "selected"; "inputKeydown": "inputKeydown"; "focused": "focused"; "blurred": "blurred"; "opened": "opened"; "closed": "closed"; }, ["itemTemplate"], never, true, never>;
+}
+
+/**
+ * Crystal's slider, PrimeNG's Slider underneath, which the app never imports: a track with a handle that picks a number
+ * between `min` and `max`, in `step`s, by dragging, clicking the track or the arrow / Page / Home / End keys. Its value is
+ * a number. Works with ngModel and reactive forms, inside `dw-field`, or on its own with `[(value)]`.
+ *
+ * The slider fills its container's width (or, `vertical`, a height the screen gives it, 100px at least). It draws no
+ * value of its own: the screen shows it where it reads best, e.g. a `dw-badge` beside its label. `changed` follows
+ * every step of a drag; `slideEnd` fires once the handle is let go, for work too heavy to do on every step.
+ *
+ * ```html
+ * <dw-slider [min]="1" [max]="20" ariaLabel="Simultaneous OCR page reads" formControlName="ocrParallel" />
+ * <dw-slider [min]="0" [max]="1" [step]="0.1" [(ngModel)]="temperature" (slideEnd)="save($event)" />
+ * ```
+ */
+declare class DwSliderComponent extends DwFormControl<number> {
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * The increment a drag snaps to and a key press moves by (fractions allowed: `0.1`). Omitted, a drag picks whole
+     * numbers and the arrow keys move by 1, Page Up / Down by 10.
+     */
+    readonly step: _angular_core.InputSignal<number | undefined>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** The handle's accessible name, when no `ariaLabelledBy` names it. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Id of the element that names the handle (a label beside it). */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /** The handle was let go (or the track clicked), with the value it ended on. */
+    readonly slideEnd: _angular_core.OutputEmitterRef<number | null>;
+    private readonly prime;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSliderComponent, "dw-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; }, { "slideEnd": "slideEnd"; }, never, never, true, never>;
+}
+
+/** The pane sizes a `dw-splitter` reports, in % of the space the panes share (they add up to 100). */
+interface DwSplitterResizeEvent {
+    sizes: number[];
+}
+/** A pane of a `dw-splitter`, in order: `<ng-template dwSplitterPanel>…</ng-template>`. */
+declare class DwSplitterPanelDirective {
+    readonly template: TemplateRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSplitterPanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DwSplitterPanelDirective, "ng-template[dwSplitterPanel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Two or more panes side by side (`layout="horizontal"`) or stacked (`vertical`), with a `dw-resizer` between each pair
+ * that drags their shared edge. `panelSizes` are the starting sizes in % (a missing one takes an equal share);
+ * `minSizes` are the smallest each pane may get, in %.
+ *
+ * `stateKey` remembers the sizes in `localStorage` (or `sessionStorage`, with `stateStorage="session"`) under that key,
+ * as a JSON array of percentages, the format PrimeNG's Splitter used, so widths saved by a `p-splitter` with the same
+ * key carry over. Once the user has resized (or a saved state was restored), their sizes win over `panelSizes`.
+ *
+ * The panes are flat: a hairline between them turns accent while hovered, focused or dragged. `variant="rail-start"`
+ * is for a grey list rail beside its detail: the rail's grey runs up to the hairline. Each pane is a flex box whose
+ * child fills it, so a pane's content sets its own scrolling.
+ *
+ * Keyboard: focus a gutter, then ←/→ (↑/↓ when vertical) move it 16px (64 with Shift), Home / End to the limits.
+ *
+ * ```html
+ * <dw-splitter [panelSizes]="[22, 78]" [minSizes]="[15, 40]" stateKey="dw.agentEdit.scenariosSplit" variant="rail-start">
+ *   <ng-template dwSplitterPanel><app-scenario-list /></ng-template>
+ *   <ng-template dwSplitterPanel><app-scenario-detail /></ng-template>
+ * </dw-splitter>
+ * ```
+ */
+declare class DwSplitterComponent implements OnInit {
+    /** `horizontal`: panes side by side, resized by width; `vertical`: stacked, resized by height. */
+    readonly layout: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Starting size of each pane, in %; a missing one takes an equal share. Scaled to add up to 100. */
+    readonly panelSizes: _angular_core.InputSignal<readonly number[]>;
+    /** Smallest size of each pane, in %; a missing one is 0. */
+    readonly minSizes: _angular_core.InputSignal<readonly number[]>;
+    /** Thickness of each gutter, in px. */
+    readonly gutterSize: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Remembers the sizes under this key (a JSON array of %, as PrimeNG's Splitter stored them). */
+    readonly stateKey: _angular_core.InputSignal<string | null | undefined>;
+    /** Where `stateKey` keeps the sizes. */
+    readonly stateStorage: _angular_core.InputSignal<"local" | "session">;
+    /** `rail-start`: the first pane is a grey rail (a list beside its detail); its grey runs up to the hairline. */
+    readonly variant: _angular_core.InputSignal<"default" | "rail-start">;
+    /** Accessible name of each gutter. */
+    readonly gutterAriaLabel: _angular_core.InputSignal<string>;
+    /** A drag or a keyboard move ended, with the new sizes (already saved under `stateKey`). */
+    readonly resizeEnd: _angular_core.OutputEmitterRef<DwSplitterResizeEvent>;
+    protected readonly panels: _angular_core.Signal<readonly DwSplitterPanelDirective[]>;
+    /** Sizes the user set by resizing, or restored from `stateKey`; `null` while `panelSizes` rules. */
+    private readonly userSizes;
+    /** The current size of each pane, in % (adds up to 100). */
+    readonly sizes: _angular_core.Signal<number[]>;
+    /** Index of the gutter being dragged. */
+    protected readonly dragging: _angular_core.WritableSignal<number | null>;
+    protected readonly horizontal: _angular_core.Signal<boolean>;
+    private readonly host;
+    private readonly document;
+    private drag;
+    ngOnInit(): void;
+    protected round(value: number): number;
+    /** Smallest size the pane before gutter `i` can take. */
+    protected minOf(i: number): number;
+    /** Largest size the pane before gutter `i` can take: what the pair has, less the next pane's minimum. */
+    protected maxOf(i: number): number;
+    protected onDragStart(i: number): void;
+    protected onDrag(i: number, event: DwResizerDrag): void;
+    protected onDragEnd(): void;
+    /** A keyboard move of `px` (negative: towards the start), or ±Infinity to a limit. */
+    protected onNudge(i: number, px: number): void;
+    /** Moves gutter `i` by `delta` % from `from`, keeping both its panes at or above their minimum. */
+    private resize;
+    private commit;
+    private isRtl;
+    private storage;
+    private readState;
+    private writeState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwSplitterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwSplitterComponent, "dw-splitter", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "panelSizes": { "alias": "panelSizes"; "required": false; "isSignal": true; }; "minSizes": { "alias": "minSizes"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "stateStorage": { "alias": "stateStorage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "gutterAriaLabel": { "alias": "gutterAriaLabel"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; }, ["panels"], never, true, never>;
+}
+
 /**
  * Backend timestamp normalization.
  *
@@ -2387,6 +3441,32 @@ type BackendTimestamp = string | number | null | undefined;
 
 type DateLike = BackendTimestamp | Date;
 
+/** One sorted column: its field, and the direction (`1` ascending, `-1` descending). */
+interface DwSortMeta {
+    field: string;
+    order: number;
+}
+/**
+ * What `sortFunction` hands a screen that sorts its own rows (`customSort`): the rows to sort in place, and how —
+ * one column (`field`, `order`) or several (`multiSortMeta`, `mode: 'multiple'`).
+ */
+interface DwSortEvent<T = unknown> {
+    data?: T[];
+    mode?: 'single' | 'multiple';
+    field?: string;
+    order?: number;
+    multiSortMeta?: DwSortMeta[];
+}
+/**
+ * What `sortChange` reports: the sorted column (`{ field, order }`), every sorted column (`{ multisortmeta }`, with
+ * `multiSortMeta`), or `{ field: null, order: 0 }` / `{ multisortmeta: [] }` once a third click clears the sort.
+ */
+type DwSortChange = DwSortMeta | {
+    field: null;
+    order: 0;
+} | {
+    multisortmeta: DwSortMeta[];
+};
 interface DwColumn<T = any> {
     field: string;
     header: string;
@@ -2514,7 +3594,7 @@ declare class DwTableComponent<T = any> {
     readonly totalRecords: _angular_core.InputSignal<number | null>;
     readonly sortField: _angular_core.InputSignal<string | null>;
     readonly sortOrder: _angular_core.InputSignal<1 | -1>;
-    readonly multiSortMeta: _angular_core.InputSignal<SortMeta[] | null>;
+    readonly multiSortMeta: _angular_core.InputSignal<DwSortMeta[] | null>;
     /**
      * A third click on a sorted column clears its sort (asc → desc → unsorted) and
      * the rows fall back to the order `value` arrived in. `sortChange` then emits
@@ -2572,8 +3652,8 @@ declare class DwTableComponent<T = any> {
     readonly rowEnter: _angular_core.OutputEmitterRef<T>;
     readonly rowLeave: _angular_core.OutputEmitterRef<T>;
     readonly pageChange: _angular_core.OutputEmitterRef<TablePageEvent>;
-    readonly sortChange: _angular_core.OutputEmitterRef<unknown>;
-    readonly sortFunction: _angular_core.OutputEmitterRef<SortEvent>;
+    readonly sortChange: _angular_core.OutputEmitterRef<DwSortChange>;
+    readonly sortFunction: _angular_core.OutputEmitterRef<DwSortEvent<T>>;
     readonly table: _angular_core.Signal<Table<any> | undefined>;
     /** Every frozen header / body cell (PrimeNG's pFrozenColumn). */
     private readonly frozenCells;
@@ -2634,8 +3714,16 @@ declare class DwTableComponent<T = any> {
     dateTooltip(row: T, col: DwColumn<T>): string;
     textStyleClass(col: DwColumn<T>): string;
     onPage(event: TablePageEvent): void;
-    onSort(event: SortMeta | {
-        multisortmeta?: SortMeta[];
+    /** PrimeNG types the sort mode as any string; it is only ever `single` or `multiple` (the table's `sortMode`). */
+    emitSortFunction(event: {
+        data?: T[];
+        mode?: string;
+        field?: string;
+        order?: number;
+        multiSortMeta?: DwSortMeta[];
+    }): void;
+    onSort(event: DwSortMeta | {
+        multisortmeta?: DwSortMeta[];
     }): void;
     onRowClick(row: T, event: MouseEvent): void;
     onRowKey(row: T, event: Event): void;
@@ -2673,13 +3761,18 @@ declare class DwColumnPickerComponent<T = any> {
 }
 
 /**
- * One of crystal's SVG glyphs (icons/svg/glyphs), or an icon the app registered with provideCrystalIcons(), drawn at
- * 1em so it follows the font size of its context; glyphs draw in `currentColor`, so they take its colour too.
+ * One icon, drawn at 1em so it follows the font size of its context, in `currentColor`:
+ * - `name`: one of crystal's SVG glyphs (icons/svg/glyphs), or an icon the app registered with provideCrystalIcons();
+ * - `pi`: a PrimeIcons glyph, by its name without `pi-` (crystal ships the icon font, so an app never loads it).
+ *
+ * Give it one of the two. It is decorative (hidden from assistive tech) unless it has a `label`.
  *
  * ```html
  * <dw-icon name="hand" />
  * <dw-icon name="workflow" size="16px" class="dw-text-accent" />
  * <dw-icon name="rocket" />   <!-- registered by the app -->
+ * <dw-icon pi="trash" />
+ * <dw-icon pi="spinner" [spin]="true" label="Loading" />
  * ```
  */
 declare class DwIconComponent {
@@ -2687,11 +3780,18 @@ declare class DwIconComponent {
     private readonly registry;
     /** A crystal glyph name, or a name registered with provideCrystalIcons(). */
     readonly name: _angular_core.InputSignal<"link" | "reset" | "code" | "search" | "info" | "workflow" | "agent" | "agentBuilder" | "alertError" | "alertWarn" | "attach" | "autoplay" | "back" | "bell" | "bolt" | "book" | "brain" | "bulb" | "chart" | "check" | "chevDown" | "chevLeft" | "chevRight" | "chevUp" | "close" | "cog" | "collapse" | "comment" | "comments" | "copy" | "cpu" | "expand" | "file" | "gear" | "hand" | "home" | "kebab" | "layers" | "notesPad" | "panelCollapse" | "panelExpand" | "paperclip" | "parse" | "pencil" | "play" | "plus" | "reference" | "refresh" | "robot" | "send" | "sidebarCollapse" | "sidebarExpand" | "sparkle" | "tag" | "tagFilled" | "testShield" | "trash" | "users" | "wrench" | (string & {})>;
+    /** A PrimeIcons name without `pi-` (`trash`, `check-circle`…), checked against the installed font. */
+    readonly pi: _angular_core.InputSignal<"" | DwPrimeIcon>;
     /** CSS length; defaults to the surrounding font size. */
     readonly size: _angular_core.InputSignal<string>;
+    /** Spins the icon (a loader). */
+    readonly spin: _angular_core.InputSignal<boolean>;
+    /** Makes the icon meaningful: read out as an image with this text. */
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hostClass: _angular_core.Signal<string>;
     readonly svg: _angular_core.Signal<SafeHtml>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DwIconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwIconComponent, "dw-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwIconComponent, "dw-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "pi": { "alias": "pi"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Icon names starting with this (any case) are crystal's: `dw…` and `dwi-…`. */
@@ -2803,8 +3903,8 @@ type DwTheme = 'light' | 'dark';
 declare const DW_THEME_STORAGE_KEY = "dw-theme";
 interface CrystalThemeConfig {
     /**
-     * Set `data-theme` on <html> at start-up and on every switch. `false` for federated elements: the host page owns
-     * its <html>. Default true.
+     * Set `data-theme` on `<html>` at start-up and on every switch. `false` for federated elements: the host page owns
+     * its `<html>`. Default true.
      */
     apply?: boolean;
     /** Theme used until the viewer picks one. Default 'light'. */
@@ -2820,13 +3920,13 @@ interface CrystalConfig {
 declare const DW_CRYSTAL_CONFIG: InjectionToken<CrystalConfig>;
 /**
  * Light / dark theme switch. The theme is the `data-theme` attribute on
- * <html>: semantic-dark.css re-points the --dw-* tokens under
+ * `<html>`: semantic-dark.css re-points the --dw-* tokens under
  * [data-theme="dark"] and PrimeNG's darkModeSelector follows the same
  * attribute. The choice is remembered per browser (light until chosen).
  *
  * `provideCrystal()` applies it once at start-up so a stored dark choice
  * doesn't flash light. With `theme.apply: false` (federated elements on a
- * page crystal doesn't own) it never touches <html>.
+ * page crystal doesn't own) it never touches `<html>`.
  */
 declare class ThemeService {
     private readonly document;
@@ -2834,7 +3934,7 @@ declare class ThemeService {
     private readonly storageKey;
     private readonly applies;
     readonly theme: _angular_core.WritableSignal<DwTheme>;
-    /** Puts the current theme on <html> (unless `theme.apply` is false). */
+    /** Puts the current theme on `<html>` (unless `theme.apply` is false). */
     init(): void;
     setTheme(theme: DwTheme): void;
     toggle(): void;
@@ -2846,7 +3946,7 @@ declare class ThemeService {
 
 /**
  * Crystal's app-level setup: the theme. With `theme.apply` (the default) it puts the stored or
- * initial theme on <html> before the first render, so a dark choice doesn't flash light.
+ * initial theme on `<html>` before the first render, so a dark choice doesn't flash light.
  *
  * ```ts
  * providers: [provideCrystal(), provideCrystalPrimeNG()]                            // an app
@@ -2879,5 +3979,5 @@ declare function installCrystalHostTheme({ fonts }?: CrystalHostThemeOptions): v
 /** Removes the host theme again (e.g. a host that unloads crystal, or a test). */
 declare function removeCrystalHostTheme(): void;
 
-export { DW_APP_FIELD_MESSAGES, DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_ICON_RESOLVERS, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwCheckToggleComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSkeletonComponent, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipIfTruncatedDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
-export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSupportedType, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone };
+export { DW_ACCORDION, DW_APP_FIELD_MESSAGES, DW_CLOCK_TICK_MS, DW_CRYSTAL_CONFIG, DW_DIALOG, DW_DRAWER, DW_FIELD_MESSAGES, DW_HOST_THEME_ATTR, DW_ICON_RESOLVERS, DW_INPUT, DW_IN_PROGRESS_STATUSES, DW_LAYOUT, DW_MENU_PLAIN_GROUP, DW_OVERLAY_ANCHOR_ATTR, DW_OVERLAY_ANCHOR_GAP, DW_POPOVER, DW_RESERVED_ICON_PREFIX, DW_STATUS_TONES, DW_TABLE, DW_TAG_PALETTE, DW_THEME_STORAGE_KEY, DW_TOGGLE_CARD, DwAccordionComponent, DwAccordionContentDirective, DwAccordionHeaderActionDirective, DwAccordionHeaderDirective, DwAccordionPanelComponent, DwActionBarComponent, DwAutocompleteComponent, DwAutocompleteItemDirective, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwChartComponent, DwCheckToggleComponent, DwCheckboxComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, DwDatePickerComponent, DwDialogComponent, DwDialogFooterDirective, DwDialogHeaderDirective, DwDialogTitleSuffixDirective, DwDividerComponent, DwDrawerComponent, DwDrawerFooterDirective, DwDrawerHeaderDirective, DwDrawerSubheaderDirective, DwEmptyStateComponent, DwEntityIconComponent, DwFieldComponent, DwFileDropzoneComponent, DwFileListComponent, DwFormControl, DwFormSectionHeaderComponent, DwGridDirective, DwHeaderDirective, DwHstackDirective, DwIconButtonComponent, DwIconComponent, DwIconRegistry, IdBlockComponent as DwIdBlockComponent, DwInputDirective, DwMenuComponent, DwMenuHeaderDirective, DwMeterComponent, DwMultiselectComponent, DwNavItemActionsDirective, DwNavItemExtraDirective, DwNavListComponent, DwNumberInputComponent, DwPageHeaderComponent, DwPopoverComponent, DwPopoverFooterDirective, DwRadioComponent, DwRailTabsComponent, DwResizerComponent, DwRowActionsDirective, DwRowExpansionDirective, DwSearchInputComponent, DwSectionComponent, DwSelectComponent, DwSelectFooterDirective, DwSelectOptionDirective, DwSelectValueDirective, DwSkeletonComponent, DwSliderComponent, DwSpinnerComponent, DwSplitterComponent, DwSplitterPanelDirective, DwStackDirective, DwStatusPillComponent, DwStepperComponent, DwSwitchComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTextareaDirective, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipDirective, DwTooltipIfTruncatedDirective, DwTreeComponent, DwTreeNodeDirective, ThemeService, alignUnderOverlayAnchor, extensionOf, fieldErrorMessage, formatBytes, gapToken, hashTagIndex, humanizeStatus, initialsOf, installCrystalHostTheme, isImageIcon, isTruncated, normalizeStatus, primeSize, provideCrystal, provideCrystalFieldMessages, provideCrystalIconResolvers, provideCrystalIcons, removeCrystalHostTheme, tagColorVar, tintFor, toneForStatus };
+export type { CrystalConfig, CrystalHostThemeOptions, CrystalThemeConfig, DwAccordionHeaderContext, DwAccordionToggleEvent, DwAccordionValue, DwAccordionVariant, DwAlign, DwAutocompletePanelWidth, DwAutocompleteSearchEvent, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwChartSelectEvent, DwChartType, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwControlSize, DwDateValue, DwDialogSize, DwDividerOrientation, DwDividerSpacing, DwDrawerAction, DwDrawerSize, DwEntityKind, DwEntityTint, DwFieldMessage, DwFileItem, DwFileRejectReason, DwFileRejection, DwFileStatus, DwGap, DwIconButtonVariant, DwIconResolvers, DwInitialsStrategy, DwInputSize, DwJustify, DwMenuItem, DwNavGroup, DwNavItem, DwNavItemDot, DwNavReorder, DwPrimeValueAccessor, DwRailTab, DwResizerDrag, DwRowClickEvent, DwSelectOptionContext, DwSeverity, DwShowErrorsWhen, DwSkeletonPreset, DwSortChange, DwSortEvent, DwSortMeta, DwSplitterResizeEvent, DwStep, DwStepValue, DwSupportedType, DwSwitchSize, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone, DwTooltipPosition, DwTooltipVariant, DwTreeNode, DwTreeNodeEvent, DwTreeSelection };