@dataworkz/crystal 0.1.0-beta.2 → 0.1.0-beta.3

package/icons/index.d.ts

@@ -171,6 +171,8 @@ declare const DW_LOGO_URIS: {
     readonly "tools/snowflake": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='%2329b5e8' clip-path='url(%23a)'%3E%3Cpath d='m13.75 12.194-3.386-1.951a1 1 0 0 0-1.359.364 1 1 0 0 0-.128.592v3.813a.99.99 0 0 0 1.982 0V12.82l1.896 1.093a.996.996 0 0 0 1.36-.364.99.99 0 0 0-.365-1.354M5.33 8.013a.97.97 0 0 0-.486-.857l-3.386-1.95a.973.973 0 0 0-1.328.355.97.97 0 0 0 .356 1.325l1.952 1.123L.486 9.133a.96.96 0 0 0-.452.588.96.96 0 0 0 .096.736.975.975 0 0 0 1.328.355l3.386-1.95a.97.97 0 0 0 .486-.85M2.226 3.825l3.386 1.95a1 1 0 0 0 1.194-.15.98.98 0 0 0 .32-.728V.99a.99.99 0 0 0-1.982 0v2.225L3.22 2.106a.996.996 0 0 0-1.36.363.99.99 0 0 0 .365 1.356M9.84 8.171a.4.4 0 0 1-.097.233L8.401 9.743a.38.38 0 0 1-.233.096h-.342a.38.38 0 0 1-.233-.096L6.249 8.404a.4.4 0 0 1-.096-.233v-.34c0-.077.043-.18.096-.233l1.344-1.34a.38.38 0 0 1 .233-.097h.342a.38.38 0 0 1 .233.096l1.342 1.34a.38.38 0 0 1 .097.233zm-1.198-.164v-.014a.3.3 0 0 0-.07-.171l-.397-.394a.27.27 0 0 0-.172-.072H7.99a.28.28 0 0 0-.172.072l-.395.394a.28.28 0 0 0-.07.17v.015c0 .056.032.133.07.171l.395.396c.04.039.117.07.172.07h.014a.28.28 0 0 0 .172-.07l.396-.396a.28.28 0 0 0 .07-.17m1.722-2.234 3.386-1.95a.99.99 0 0 0 .365-1.355.996.996 0 0 0-1.36-.363L10.86 3.2V.99a.99.99 0 0 0-1.982 0v3.83a.992.992 0 0 0 1.487.955m-4.074 4.353a1 1 0 0 0-.679.115l-3.386 1.951a.99.99 0 0 0-.364 1.354.995.995 0 0 0 1.359.364l1.923-1.107v2.207a.99.99 0 0 0 1.982 0v-3.908a.99.99 0 0 0-.835-.976m9.575-4.578a.995.995 0 0 0-1.359-.364l-3.386 1.95a.99.99 0 0 0-.497.877.99.99 0 0 0 .497.868l3.386 1.952a1 1 0 0 0 1.36-.364.99.99 0 0 0-.365-1.356l-1.918-1.104 1.918-1.105a.99.99 0 0 0 .364-1.354'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E";
     readonly "tools/workflow": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%231f2a37' d='M13.333 0H8.667v2.388c.344-.143.533-.433 1.192-.433 1.137 0 2.062.925 2.062 2.062A2.064 2.064 0 0 1 9.86 6.079c-.659 0-.847-.29-1.192-.434v1.688h2.254c.26 0 .469.408.469.667 0 .509-.175.858-.315 1.14-.12.24-.216.431-.216.719 0 .62.504 1.125 1.124 1.125s1.125-.505 1.125-1.125c0-.288-.095-.478-.216-.72-.14-.28-.315-.63-.315-1.139 0-.259.21-.667.469-.667H16V2.667C16 1.333 14.667 0 13.333 0'/%3E%3Cpath fill='%239ca3af' d='M1.954 6.141c0-1.137.926-2.062 2.063-2.062s2.062.925 2.062 2.062c0 .659-.29.847-.434 1.192h1.688V5.08c0-.259.408-.469.667-.469.509 0 .858.175 1.14.315.24.12.431.216.719.216.62 0 1.125-.504 1.125-1.124s-.505-1.125-1.125-1.125c-.288 0-.478.095-.72.216-.28.14-.63.315-1.139.315-.259 0-.667-.21-.667-.469V0H2.667C1.333 0 0 1.333 0 2.667v4.666h2.388c-.143-.344-.434-.533-.434-1.192m12.092 3.718a2.065 2.065 0 0 1-2.063 2.062A2.064 2.064 0 0 1 9.921 9.86c0-.659.29-.847.434-1.192H8.667v2.254c0 .26-.408.469-.667.469-.51 0-.858-.175-1.14-.315-.24-.12-.431-.216-.719-.216-.62 0-1.125.504-1.125 1.124s.505 1.125 1.125 1.125c.288 0 .478-.095.72-.216.28-.14.63-.315 1.139-.315.259 0 .667.21.667.469V16h4.666C14.667 16 16 14.667 16 13.333V8.667h-2.388c.143.344.434.533.434 1.192'/%3E%3Cpath fill='%231f2a37' d='M6.141 14.046a2.064 2.064 0 0 1-2.062-2.063c0-1.137.925-2.062 2.062-2.062.659 0 .847.29 1.192.434V8.667H5.08c-.259 0-.469-.408-.469-.667 0-.51.175-.858.315-1.14.12-.24.216-.431.216-.719 0-.62-.504-1.125-1.124-1.125s-1.125.505-1.125 1.125c0 .288.095.478.216.72.14.28.315.63.315 1.139 0 .259-.21.667-.469.667H0v4.666C0 14.667 1.333 16 2.667 16h4.666v-2.388c-.344.143-.533.434-1.192.434'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E";
 };
+/** A PrimeIcons name (without `pi-`), from the installed primeicons package. */
+type DwPrimeIcon = "address-book" | "align-center" | "align-justify" | "align-left" | "align-right" | "amazon" | "android" | "angle-double-down" | "angle-double-left" | "angle-double-right" | "angle-double-up" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "apple" | "arrow-circle-down" | "arrow-circle-left" | "arrow-circle-right" | "arrow-circle-up" | "arrow-down" | "arrow-down-left" | "arrow-down-left-and-arrow-up-right-to-center" | "arrow-down-right" | "arrow-left" | "arrow-right" | "arrow-right-arrow-left" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrow-up-right-and-arrow-down-left-from-center" | "arrows-alt" | "arrows-h" | "arrows-v" | "asterisk" | "at" | "backward" | "ban" | "barcode" | "bars" | "bell" | "bell-slash" | "bitcoin" | "bolt" | "book" | "bookmark" | "bookmark-fill" | "box" | "briefcase" | "building" | "building-columns" | "bullseye" | "calculator" | "calendar" | "calendar-clock" | "calendar-minus" | "calendar-plus" | "calendar-times" | "camera" | "car" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "cart-arrow-down" | "cart-minus" | "cart-plus" | "chart-bar" | "chart-line" | "chart-pie" | "chart-scatter" | "check" | "check-circle" | "check-square" | "chevron-circle-down" | "chevron-circle-left" | "chevron-circle-right" | "chevron-circle-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "circle" | "circle-fill" | "circle-off" | "circle-on" | "clipboard" | "clock" | "clone" | "cloud" | "cloud-download" | "cloud-upload" | "code" | "cog" | "comment" | "comments" | "compass" | "copy" | "credit-card" | "crown" | "database" | "delete-left" | "desktop" | "directions" | "directions-alt" | "discord" | "dollar" | "download" | "eject" | "ellipsis-h" | "ellipsis-v" | "envelope" | "equals" | "eraser" | "ethereum" | "euro" | "exclamation-circle" | "exclamation-triangle" | "expand" | "external-link" | "eye" | "eye-slash" | "face-smile" | "facebook" | "fast-backward" | "fast-forward" | "file" | "file-arrow-up" | "file-check" | "file-edit" | "file-excel" | "file-export" | "file-import" | "file-o" | "file-pdf" | "file-plus" | "file-word" | "filter" | "filter-fill" | "filter-slash" | "flag" | "flag-fill" | "folder" | "folder-open" | "folder-plus" | "forward" | "gauge" | "gift" | "github" | "globe" | "google" | "graduation-cap" | "hammer" | "hashtag" | "headphones" | "heart" | "heart-fill" | "history" | "home" | "hourglass" | "id-card" | "image" | "images" | "inbox" | "indian-rupee" | "info" | "info-circle" | "instagram" | "key" | "language" | "lightbulb" | "link" | "linkedin" | "list" | "list-check" | "lock" | "lock-open" | "map" | "map-marker" | "mars" | "megaphone" | "microchip" | "microchip-ai" | "microphone" | "microsoft" | "minus" | "minus-circle" | "mobile" | "money-bill" | "moon" | "objects-column" | "palette" | "paperclip" | "pause" | "pause-circle" | "paypal" | "pen-to-square" | "pencil" | "percentage" | "phone" | "pinterest" | "play" | "play-circle" | "plus" | "plus-circle" | "pound" | "power-off" | "prime" | "print" | "qrcode" | "question" | "question-circle" | "receipt" | "reddit" | "refresh" | "replay" | "reply" | "save" | "search" | "search-minus" | "search-plus" | "send" | "server" | "share-alt" | "shield" | "shop" | "shopping-bag" | "shopping-cart" | "sign-in" | "sign-out" | "sitemap" | "slack" | "sliders-h" | "sliders-v" | "sort" | "sort-alpha-down" | "sort-alpha-down-alt" | "sort-alpha-up" | "sort-alpha-up-alt" | "sort-alt" | "sort-alt-slash" | "sort-amount-down" | "sort-amount-down-alt" | "sort-amount-up" | "sort-amount-up-alt" | "sort-down" | "sort-down-fill" | "sort-numeric-down" | "sort-numeric-down-alt" | "sort-numeric-up" | "sort-numeric-up-alt" | "sort-up" | "sort-up-fill" | "sparkles" | "spinner" | "spinner-dotted" | "star" | "star-fill" | "star-half" | "star-half-fill" | "step-backward" | "step-backward-alt" | "step-forward" | "step-forward-alt" | "stop" | "stop-circle" | "stopwatch" | "sun" | "sync" | "table" | "tablet" | "tag" | "tags" | "telegram" | "th-large" | "thumbs-down" | "thumbs-down-fill" | "thumbs-up" | "thumbs-up-fill" | "thumbtack" | "ticket" | "tiktok" | "times" | "times-circle" | "trash" | "trophy" | "truck" | "turkish-lira" | "twitch" | "twitter" | "undo" | "unlock" | "upload" | "user" | "user-edit" | "user-minus" | "user-plus" | "users" | "venus" | "verified" | "video" | "vimeo" | "volume-down" | "volume-off" | "volume-up" | "wallet" | "warehouse" | "wave-pulse" | "whatsapp" | "wifi" | "window-maximize" | "window-minimize" | "wrench" | "youtube";
 
 /**
  * The Dataworkz glyphs (what PrimeIcons lacks: hand, brain, workflow…), one file each in
@@ -242,4 +244,4 @@ declare function storageIcon(key: string | null | undefined, options?: StorageIc
 declare function fileIconByExtension(extension: string): string;
 
 export { DW_ICON_NAMES, DW_ICON_PREFIX, DW_LOGO_URIS, GENERIC_COLLECTION_ICON, GENERIC_STORAGE_ICON, GENERIC_TOOL_ICON, TOOL_ICON_KEYS, dwIconName, fileIconByExtension, icon, isGlyphName, isToolIconKey, storageIcon, storageIconKeys, toolIcon };
-export type { DwIconName, IconName, StorageIconKey, StorageIconOptions, StorageIconSet, ToolIconKey };
+export type { DwIconName, DwPrimeIcon, IconName, StorageIconKey, StorageIconOptions, StorageIconSet, ToolIconKey };

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 } 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 { 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';
 
@@ -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 -->
@@ -1325,7 +1328,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 +1351,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 +2347,390 @@ 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. */
+type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar';
+/**
+ * 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>
+ * ```
+ */
+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>;
+    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; }; }, {}, 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).
+     */
+    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>;
+    /** 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>;
+    private readonly prime;
+    constructor();
+    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; }; "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>;
+    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>;
+    /** 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();
+    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; }; }, { "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/off: its value is a boolean.
+ * 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" />
+ * <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 extends DwFormControl<boolean> {
+    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, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DwCheckboxComponent, "dw-checkbox", never, { "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>;
+}
+
 /**
  * Backend timestamp normalization.
  *
@@ -2673,13 +3060,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 +3079,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-…`. */
@@ -2879,5 +3278,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_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, DwActionBarComponent, DwAvatarComponent, DwBadgeComponent, DwBannerComponent, DwBoxComponent, DwBreadcrumbComponent, DwButtonComponent, DwCardComponent, DwCellDirective, DwCheckToggleComponent, DwCheckboxComponent, DwChipComponent, DwClockService, DwColumnPickerComponent, DwConfirmDialogComponent, DwConfirmHostComponent, DwConfirmService, DwCopyButtonComponent, 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, DwSpinnerComponent, DwStackDirective, DwStatusPillComponent, DwSwitchComponent, DwTabPanelDirective, DwTableComponent, DwTableEmptyComponent, DwTabsComponent, DwTagColorButtonComponent, DwTagColorPickerComponent, DwTagComponent, DwTagListComponent, DwTextareaDirective, DwTileComponent, DwTimestampComponent, DwToastHostComponent, DwToastService, DwToggleCardBodyDirective, DwToggleCardComponent, DwToggleCardControlDirective, DwTooltipDirective, DwTooltipIfTruncatedDirective, 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, DwAlign, DwAvatarTint, DwBadgeKind, DwBadgeTone, DwBreadcrumb, DwButtonAppearance, DwButtonSize, DwButtonVariant, DwCanClose, DwCardTint, DwCardVariant, DwColumn, DwConfirmOptions, DwConfirmSeverity, DwConfirmSummaryRow, DwConfirmWarning, DwControlSize, 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, DwSupportedType, DwSwitchSize, DwTabOption, DwTabValue, DwTagItem, DwTheme, DwToast, DwToastOptions, DwToastPosition, DwToastSeverity, DwTone, DwTooltipPosition, DwTooltipVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",
@@ -19,21 +19,18 @@
     "@angular/forms": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
-    "@primeng/themes": "^21.0.0",
     "ngx-markdown": "^20.0.0",
-    "primeicons": "^7.0.0",
-    "primeng": "^20.4.0",
     "rxjs": "~7.8.0"
   },
   "peerDependenciesMeta": {
-    "@primeng/themes": {
-      "optional": true
-    },
     "ngx-markdown": {
       "optional": true
     }
   },
   "dependencies": {
+    "@primeng/themes": "^21.0.0",
+    "primeicons": "^7.0.0",
+    "primeng": "~20.4.0",
     "tslib": "^2.8.1"
   },
   "exports": {

package/styles/components/content.css

@@ -156,3 +156,8 @@ dw-markdown.dw-prose { display: block; }
 /* ── dw-icon: app SVG glyphs, drawn in currentColor at the text size ── */
 .dw-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.125em; }
 .dw-icon svg { display: block; }
+/* A PrimeIcons glyph (dw-icon pi="…") is a font glyph: it needs a line box, which the SVG case sets to 0. */
+.dw-icon.pi { line-height: 1; }
+.dw-icon--spin { animation: dw-icon-spin 1s linear infinite; }
+@keyframes dw-icon-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .dw-icon--spin, .dw-icon.pi-spin { animation-duration: 3s; } }