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

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
@@ -2358,6 +2358,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 +2367,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 +2450,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. */
@@ -2552,6 +2557,9 @@ declare class DwSelectComponent<T = unknown> extends DwFormControl<T> {
     protected readonly primeSize: _angular_core.Signal<"small" | "large" | 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>;
 }
@@ -2604,6 +2612,9 @@ declare class DwMultiselectComponent<T = unknown> extends DwFormControl<T[]> {
     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>;
 }
@@ -3202,8 +3213,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 +3230,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 +3244,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 +3256,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.4",
   "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: {

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. */