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

package/icons/index.d.ts

@@ -176,7 +176,7 @@ type DwPrimeIcon = "address-book" | "align-center" | "align-justify" | "align-le
 
 /**
  * The Dataworkz glyphs (what PrimeIcons lacks: hand, brain, workflow…), one file each in
- * `icons/svg/glyphs/<name>.svg`, drawn in currentColor. Render with <dw-icon name="hand" />, or pass `dwi-hand` to
+ * `icons/svg/glyphs/<name>.svg`, drawn in currentColor. Render with `<dw-icon name="hand" />`, or pass `dwi-hand` to
  * the `icon` input of dw-nav-list, dw-rail-tabs or dw-chip. Markup is crystal-owned constants, so it is safe to bind
  * as HTML.
  *

package/index.d.ts

@@ -599,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
@@ -2348,8 +2348,11 @@ declare class DwTooltipIfTruncatedDirective {
 }
 
 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';
+/**
+ * `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.
@@ -2358,6 +2361,7 @@ type DwTooltipVariant = 'default' | 'multiline' | 'code' | 'error' | 'toolbar';
  * <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 {
@@ -2366,9 +2370,11 @@ declare class DwTooltipDirective {
     /** 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; }; }, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "dwTooltip"; "tooltipDisabled": "dwTooltipDisabled"; }; outputs: {}; }]>;
+    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';
@@ -2447,6 +2453,8 @@ declare abstract class DwFormControl<T> implements ControlValueAccessor, OnInit
      * 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.
      */
     protected drive<C extends DwPrimeValueAccessor<T>>(prime: () => C | undefined, prepare?: (control: C) => void): void;
     /** The control lost focus. */
@@ -2540,6 +2548,9 @@ declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
     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>;
@@ -2550,10 +2561,16 @@ declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
     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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "valueTemplate", "footerTemplate"], never, true, 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>;
 }
 
 /**
@@ -2593,6 +2610,9 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     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>;
@@ -2600,25 +2620,38 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     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; }; }, { "opened": "opened"; "closed": "closed"; "focused": "focused"; "blurred": "blurred"; }, ["optionTemplate", "footerTemplate"], never, true, 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/off: its value is a boolean.
- * With a `label` (or projected content) the label sits beside it on one line and toggles it too.
+ * 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 extends DwFormControl<boolean> {
+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>;
@@ -2634,8 +2667,8 @@ declare class DwCheckboxComponent extends DwFormControl<boolean> {
     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>;
+    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>;
 }
 
 /**
@@ -3202,8 +3235,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'. */
@@ -3219,13 +3252,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;
@@ -3233,7 +3266,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;
@@ -3245,7 +3278,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",

package/primeng/index.d.ts

@@ -608,7 +608,7 @@ declare const DW_PRESET_OVERRIDES: {
 /** Dataworkz PrimeNG preset: Aura retargeted to the design system. */
 declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base.AuraBaseDesignTokens>;
 
-/** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on <html>. */
+/** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on `<html>`. */
 declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
 /** Panel class that sizes a select's option list for a small trigger (components/form.css). */
 declare const DW_SELECT_PANEL_SM = "dw-select-panel--sm";
@@ -617,7 +617,7 @@ type SizedInstance = {
 };
 /**
  * Crystal's pass-through defaults: a small `p-select` / `p-multiselect` gets small options even when its list is
- * appended to <body> (where CSS can't see the trigger).
+ * appended to `<body>` (where CSS can't see the trigger).
  */
 declare const DW_PRIMENG_PT: {
     readonly select: {
@@ -639,6 +639,17 @@ declare const DW_PRIMENG_PT: {
         };
     };
 };
+/**
+ * PrimeNG's z-index bases, with tooltips raised to 5000: PrimeNG already stacks a tooltip above the overlays it manages
+ * (dialogs, drawers, popovers), and the higher base keeps it above layers that set their own z-index too (a panel or
+ * page chrome with `z-index` in CSS), so a tooltip is never hidden under what it describes.
+ */
+declare const DW_PRIMENG_Z_INDEX: {
+    readonly modal: 1100;
+    readonly overlay: 1000;
+    readonly menu: 1000;
+    readonly tooltip: 5000;
+};
 /**
  * PrimeNG with the Dataworkz preset, dark mode on `[data-theme="dark"]`. Pass app-specific PrimeNG settings
  * (ripple, zIndex, translation…) as `config`; its `theme.options` are merged over crystal's.
@@ -649,4 +660,4 @@ declare const DW_PRIMENG_PT: {
  */
 declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
 
-export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };
+export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };

package/styles/components/form.css

@@ -232,7 +232,8 @@ dw-field.dw-field--inline:has(.dw-field__control :is(.p-inputtext-sm, .p-textare
 .dw-field__control > p-multiselect,
 .dw-field__control > p-inputnumber,
 .dw-field__control > p-datepicker,
-.dw-field__control > p-autocomplete { width: 100%; }
+.dw-field__control > p-autocomplete,
+.dw-field__control > :is(dw-select, dw-multiselect, dw-number-input) { width: 100%; }
 .dw-field__error { display: inline-flex; align-items: center; gap: var(--dw-space-1); }
 /* Field errors are text only (the red text and border carry the state): no leading icon, even in
    hand-written error lines. */

package/styles/components/overlay.css

@@ -339,9 +339,24 @@ body .p-drawer-right {
 }
 .p-tooltip.dw-tooltip--multiline .p-tooltip-text { white-space: pre-line; }
 .p-tooltip.dw-tooltip--error .p-tooltip-text { background: var(--dw-status-danger-fg); color: var(--dw-text-inverse); }
+/* Preview (dwTooltipVariant="preview"): a long value shown whole, up to 720 × 340px, then scrolled; line breaks kept,
+   long tokens broken anywhere. Pair it with dwTooltipInteractive so the pointer can scroll it. */
+.p-tooltip.dw-tooltip--preview { width: auto; max-width: min(720px, 68vw); }
+.p-tooltip.dw-tooltip--preview .p-tooltip-text {
+  display: inline-block;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(720px, 68vw);
+  max-height: min(42vh, 340px);
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: var(--dw-font-size-12);
+  line-height: 1.45;
+}
 .p-tooltip.dw-tooltip--error .p-tooltip-arrow { border-top-color: var(--dw-status-danger-fg); }
 /* Long code / JSON: wide, scrollable, monospace, wrapped. */
-.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); z-index: 5000; }
+.p-tooltip.dw-tooltip--code { width: min(520px, calc(100vw - 48px)); max-width: min(520px, calc(100vw - 48px)); }
 .p-tooltip.dw-tooltip--code .p-tooltip-text {
   display: block;
   width: 100%;

package/styles/crystal-no-fonts.css

@@ -5,7 +5,7 @@
  * Rules: colours only in tokens/primitives.css (everything else uses semantic tokens); font-family only in base.css.
  */
 /* PrimeIcons (pi pi-*): crystal's dependency, so an app never installs or loads it itself. Its font is local. */
-@import 'primeicons/primeicons.css';
+@import './icons.css';
 @import './tokens/primitives.css';
 @import './tokens/semantic.css';
 @import './tokens/semantic-dark.css';

package/styles/icons.css

@@ -0,0 +1,6 @@
+/*
+ * @dataworkz/crystal — the PrimeIcons font (`pi pi-*`, `<dw-icon pi>`), shipped as @dataworkz/crystal/styles/icons.css.
+ * Crystal depends on primeicons, so an app never installs or loads it itself: crystal.css / crystal-no-fonts.css import
+ * this file; an app that imports crystal's styles file by file imports it too. The font files are local (no CDN).
+ */
+@import 'primeicons/primeicons.css';