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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.10",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",
@@ -19,21 +19,19 @@
     "@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",
+    "chart.js": "^4.5.1",
+    "primeicons": "^7.0.0",
+    "primeng": "~20.4.0",
     "tslib": "^2.8.1"
   },
   "exports": {

package/primeng/index.d.ts

@@ -5,7 +5,7 @@ import { PrimeNGConfigType } from 'primeng/config';
 
 /**
  * Azure Electric primary ramp. Same hex values as `--dw-primary-*` in
- * src/styles/tokens/primitives.css — PrimeNG needs literal hex for the
+ * tokens/primitives.css — PrimeNG needs literal hex for the
  * primitive ramp because it derives other tokens from it at build time.
  */
 declare const AZURE_PRIMARY_RAMP: {
@@ -23,8 +23,8 @@ declare const AZURE_PRIMARY_RAMP: {
 };
 /**
  * PrimeNG color scheme, used for both light and dark. Every value points at a
- * design-system CSS variable, so PrimeNG follows src/styles/tokens/semantic.css
- * and semantic-dark.css: switching theme re-points the variables, the preset
+ * design-system CSS variable, so PrimeNG follows the semantic tokens (tokens/semantic.css
+ * and semantic-dark.css): switching theme re-points the variables, the preset
  * never changes. (The surface ramp is the raw neutral scale, light → dark,
  * which is the order Aura's own light and dark schemes expect.)
  */
@@ -608,8 +608,48 @@ 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";
+type SizedInstance = {
+    size?: () => string | null | undefined;
+};
+/**
+ * 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).
+ */
+declare const DW_PRIMENG_PT: {
+    readonly select: {
+        readonly overlay: ({ instance }: {
+            instance?: SizedInstance;
+        }) => {
+            class: string;
+        } | {
+            class?: undefined;
+        };
+    };
+    readonly multiselect: {
+        readonly overlay: ({ instance }: {
+            instance?: SizedInstance;
+        }) => {
+            class: string;
+        } | {
+            class?: undefined;
+        };
+    };
+};
+/**
+ * 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.
@@ -620,4 +660,4 @@ declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
  */
 declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
 
-export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, 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/base.css

@@ -1,12 +1,12 @@
 /* ============================================================================
    Dataworkz Design System — BASE
-   The ONLY place in the app that declares font-family (element-base.css is
-   its equivalent for the federated elements on the legacy page). Everything else
+   The ONLY place in the theme that declares font-family (element-base.css is
+   its equivalent for components embedded in a page crystal doesn't own). Everything else
    inherits (`font: inherit`) or uses the typography classes.
    ============================================================================ */
 
-/* ── Reset — the element defaults the app was built on (ported from the
-   Bootstrap 4 Reboot when Bootstrap was removed) ── */
+/* ── Reset — the element defaults the components are built on (in the spirit of the
+   Bootstrap 4 Reboot) ── */
 *,
 *::before,
 *::after {

package/styles/components/button.css

@@ -325,6 +325,9 @@
 .dw-icon-btn.is-active { background: var(--dw-accent-tint); color: var(--dw-accent); }
 /* Hovering the active (selected) button keeps it accented, a step stronger */
 .dw-icon-btn.is-active:hover:not(:disabled) { background: var(--dw-accent-tint-strong); color: var(--dw-accent); }
+/* A selected danger toggle (e.g. a "not helpful" rating) keeps its danger colour instead of the accent. */
+.dw-icon-btn--danger.is-active,
+.dw-icon-btn--danger.is-active:hover:not(:disabled) { background: var(--dw-danger-tint); color: var(--dw-danger-solid); }
 .dw-icon-btn--inverse { color: var(--dw-text-muted); }
 .dw-icon-btn--inverse:hover:not(:disabled),
 .dw-icon-btn--inverse.is-active { background: color-mix(in srgb, var(--dw-text-inverse) 12%, transparent); color: var(--dw-text-inverse); }

package/styles/components/content.css

@@ -153,108 +153,106 @@ dw-markdown.dw-prose { display: block; }
 .dw-prose--compact { font-size: var(--dw-font-size-12); line-height: 1.5; }
 .dw-prose--compact p { margin-bottom: var(--dw-space-1); }
 
-/* ── Citation chip — numbered source reference in rendered answers (RAG run,
-   Q&A history, probe). The markup is generated by the RAG answer services. ── */
-.dw-rag-cite-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
-  margin: 0 2px;
-  border-radius: var(--dw-radius-sm);
-  border: 1px solid var(--dw-border-accent);
-  background: var(--dw-accent-tint);
-  color: var(--dw-accent-text);
-  font-size: var(--dw-font-size-12);
-  font-weight: var(--dw-font-weight-semibold);
-  line-height: var(--dw-line-height-20);
-  text-decoration: none;
-  vertical-align: middle;
-}
-
-a.dw-rag-cite-chip:hover {
-  background: var(--dw-accent-tint-strong);
-  text-decoration: none;
-}
-
 /* ── 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; } }
 
-/* ── Chat message: avatar · author line · bubble ──
-   <div class="dw-msg dw-msg--user"><span class="dw-msg__avatar"><i class="pi pi-user"></i></span>
-   <div class="dw-msg__main"><div class="dw-msg__head"><span class="dw-msg__author">Ana</span>
-   <span class="dw-msg__role">User query</span></div><div class="dw-msg__bubble">…</div></div></div> */
-.dw-msg { display: flex; gap: 10px; }
-.dw-msg + .dw-msg { margin-top: 14px; }
-.dw-msg__avatar {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  margin-top: 2px;
-  border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-full);
-  background: var(--dw-surface-pressed);
-  color: var(--dw-text-secondary);
-  font-size: var(--dw-font-size-12);
+/* ── dw-accordion: panels that open and close under a header row (PrimeNG's p-accordion underneath) ──
+   PrimeNG reads its accordion design tokens as --p-accordion-* variables, so the look is set through them (no
+   specificity race with its own :hover / :first-child rules). flush (default): rows on the container, a divider
+   between panels; card: each panel a bordered card, the list spaced, a divider under an open header. */
+.dw-accordion {
+  display: block;
+  min-width: 0;
+  --p-accordion-panel-border-width: 0;
+  --p-accordion-panel-border-color: var(--dw-border);
+  --p-accordion-header-padding: var(--dw-space-3) var(--dw-space-4);
+  --p-accordion-header-font-weight: var(--dw-font-weight-semibold);
+  --p-accordion-header-color: var(--dw-text-strong);
+  --p-accordion-header-hover-color: var(--dw-text-strong);
+  --p-accordion-header-active-color: var(--dw-text-strong);
+  --p-accordion-header-active-hover-color: var(--dw-text-strong);
+  --p-accordion-header-background: transparent;
+  --p-accordion-header-hover-background: var(--dw-surface-hover);
+  --p-accordion-header-active-background: transparent;
+  --p-accordion-header-active-hover-background: var(--dw-surface-hover);
+  --p-accordion-header-border-width: 0;
+  --p-accordion-header-border-color: var(--dw-border);
+  --p-accordion-header-border-radius: 0;
+  --p-accordion-header-first-border-width: 0;
+  --p-accordion-header-first-top-border-radius: 0;
+  --p-accordion-header-last-bottom-border-radius: 0;
+  --p-accordion-header-last-active-bottom-border-radius: 0;
+  --p-accordion-header-focus-ring-width: 0;
+  --p-accordion-header-focus-ring-shadow: inset var(--dw-focus-ring);
+  --p-accordion-content-background: transparent;
+  --p-accordion-content-color: var(--dw-text);
+  --p-accordion-content-padding: 0 var(--dw-space-4) var(--dw-space-4);
 }
-.dw-msg__main { flex: 1; min-width: 0; }
-.dw-msg__head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--dw-space-1); }
-.dw-msg__author { color: var(--dw-text); font-size: var(--dw-font-size-12); font-weight: var(--dw-font-weight-semibold); }
-.dw-msg__role { color: var(--dw-text-secondary); font-size: var(--dw-font-size-12); }
-.dw-msg__bubble {
-  padding: 10px 14px;
-  border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-md) var(--dw-radius-md) var(--dw-radius-md) 2px;
-  background: var(--dw-surface-pressed);
-  color: var(--dw-text);
+
+.dw-accordion .p-accordionheader {
+  gap: var(--dw-space-3);
   font-size: var(--dw-font-size-14);
-  line-height: var(--dw-line-height-20);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
+  line-height: 1.4;
 }
-.dw-msg--user .dw-msg__avatar { border-color: var(--dw-border-accent); background: var(--dw-accent-tint); color: var(--dw-accent); }
-.dw-msg--user .dw-msg__bubble { border-color: var(--dw-border-accent); background: var(--dw-accent-tint); color: var(--dw-accent-text); }
-.dw-msg--agent .dw-msg__avatar { border-color: var(--dw-status-success-border); background: var(--dw-status-success-bg); color: var(--dw-status-success-fg); }
-
-/* ── Chat composer: a borderless textarea + toolbar inside one card ──
-   <div class="dw-composer"><textarea class="dw-composer__input" …></textarea>
-   <div class="dw-composer__toolbar"><dw-button …/><span class="dw-composer__spacer"></span>
-   <span class="dw-composer__hint">⌘ Enter</span><dw-button label="Send" …/></div></div> */
-.dw-composer {
+
+.dw-accordion__header {
   display: flex;
-  flex-direction: column;
+  flex: 1 1 auto;
+  align-items: center;
   gap: var(--dw-space-2);
-  padding: var(--dw-space-3) var(--dw-space-3) var(--dw-space-2);
+  min-width: 0;
+}
+
+.dw-accordion__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.dw-accordion__chevron {
+  flex: none;
+  font-size: var(--dw-font-size-12);
+  color: var(--dw-text-secondary);
+  transition: transform var(--dw-dur-enter) var(--dw-ease);
+}
+
+.dw-accordion .p-accordionpanel-active > .p-accordionheader .dw-accordion__chevron { transform: rotate(180deg); }
+.dw-accordion .p-accordionpanel.p-disabled > .p-accordionheader { cursor: default; }
+
+/* flush: a divider between panels */
+.dw-accordion--flush .p-accordionpanel + .p-accordionpanel { --p-accordion-panel-border-width: 1px 0 0; }
+
+/* card: each panel its own card; a closed one lifts on hover, an open one divides its header from its content */
+.dw-accordion--card {
+  --p-accordion-header-hover-background: transparent;
+  --p-accordion-header-active-hover-background: transparent;
+  --p-accordion-header-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-header-first-top-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-header-last-bottom-border-radius: calc(var(--dw-radius-card) - 1px);
+  --p-accordion-content-padding: var(--dw-space-4);
+}
+
+.dw-accordion--card > .p-accordion { display: flex; flex-direction: column; gap: var(--dw-space-2); }
+
+.dw-accordion--card .p-accordionpanel {
   border: 1px solid var(--dw-border);
-  border-radius: var(--dw-radius-xl);
+  border-radius: var(--dw-radius-card);
   background: var(--dw-surface);
-  box-shadow: var(--dw-shadow-sm);
-  transition: border-color var(--dw-dur-micro) var(--dw-ease), box-shadow var(--dw-dur-micro) var(--dw-ease);
+  transition: box-shadow var(--dw-dur-enter) var(--dw-ease);
 }
-.dw-composer:focus-within { border-color: var(--dw-border-accent); box-shadow: var(--dw-focus-ring); }
-.dw-composer__input {
-  width: 100%;
-  min-height: 84px;
-  max-height: 220px;
-  padding: 0;
-  border: 0;
-  outline: none;
-  resize: none;
-  background: transparent;
-  color: var(--dw-text);
-  font-size: var(--dw-font-size-14);
-  line-height: var(--dw-line-height-20);
+
+.dw-accordion--card .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover { box-shadow: var(--dw-shadow-md); }
+
+.dw-accordion--card .p-accordionpanel-active {
+  --p-accordion-header-border-width: 0 0 1px;
+  --p-accordion-header-first-border-width: 0 0 1px;
+  --p-accordion-header-border-radius: calc(var(--dw-radius-card) - 1px) calc(var(--dw-radius-card) - 1px) 0 0;
+  --p-accordion-header-last-active-bottom-border-radius: 0;
 }
-.dw-composer__input::placeholder { color: var(--dw-text-muted); }
-.dw-composer__toolbar { display: flex; align-items: center; gap: var(--dw-space-2); }
-.dw-composer__spacer { flex: 1; }
-.dw-composer__hint {
-  color: var(--dw-text-muted);
-  font-size: var(--dw-font-size-12);
+
+@media (prefers-reduced-motion: reduce) {
+  .dw-accordion__chevron,
+  .dw-accordion--card .p-accordionpanel { transition: none; }
 }

package/styles/components/data.css

@@ -79,7 +79,7 @@
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-/* Dense detail panels (e.g. the Probe): 13px values; key column and spacing unchanged. */
+/* Dense detail panels: 13px values; key column and spacing unchanged. */
 .dw-kv-list--sm .dw-kv-list__value { font-size: var(--dw-font-size-13); }
 .dw-kv-list__action { flex-shrink: 0; opacity: 0; transition: opacity var(--dw-dur-micro) var(--dw-ease); }
 .dw-kv-list__row:hover .dw-kv-list__action,
@@ -138,6 +138,29 @@ body .p-treetable .p-treetable-tbody > tr.p-treetable-row-selected {
   border-left: 1px solid var(--dw-tree-spine);
 }
 
+/* dw-tree: no box of its own (it sits on its container); --framed draws one. Node content fills the row, so a
+   dwTreeNode template can lay out across it. */
+.dw-tree-view { display: block; min-width: 0; }
+.dw-tree-view > .p-tree { padding: 0; border: 0; border-radius: 0; background: transparent; }
+.dw-tree-view.dw-tree-view--framed > .p-tree {
+  padding: var(--dw-space-2);
+  border: 1px solid var(--dw-border-strong);
+  border-radius: var(--dw-radius-control);
+  background: var(--dw-surface);
+}
+.dw-tree-view .p-tree-node-label { flex: 1 1 auto; min-width: 0; }
+/* --sm: compact rows, through PrimeNG's own tree variables (row ~28px instead of ~36px). */
+.dw-tree-view.dw-tree-view--sm {
+  --p-tree-node-padding: var(--dw-space-1) var(--dw-space-2);
+  --p-tree-node-gap: var(--dw-space-1);
+  --p-tree-node-toggle-button-size: var(--dw-space-5);
+  --p-tree-gap: 0;
+  font-size: var(--dw-font-size-13);
+}
+/* --marker: the selected row's accent bar, as dw-nav-list [marker] (an inset shadow, so nothing shifts). Specific
+   enough to outlast PrimeNG's focus styles, which it loads after crystal. */
+.dw-tree-view.dw-tree-view--marker .p-tree-node-content.p-tree-node-selected { box-shadow: inset 3px 0 0 var(--dw-accent); }
+
 /* ── Skeleton ── */
 .dw-skeleton {
   height: 20px;

package/styles/components/form.css

@@ -225,14 +225,15 @@ dw-field.dw-field--inline:has(.dw-field__control :is(.p-inputtext-sm, .p-textare
 .dw-field__control > :first-child:not([dwFieldSuffix]) { flex: 1 1 auto; min-width: 0; }
 /* Switches, checkboxes and radios keep their own size — stretching one turns a toggle into a bar. */
 /* (Same specificity as the stretch rule above, plus the element, so it wins.) */
-.dw-field__control > :is(p-toggleswitch, p-checkbox, p-radiobutton):first-child:not([dwFieldSuffix]) { flex: none; }
+.dw-field__control > :is(p-toggleswitch, p-checkbox, p-radiobutton, dw-switch, dw-checkbox, dw-radio):first-child:not([dwFieldSuffix]) { flex: none; }
 .dw-field__control > input,
 .dw-field__control > textarea,
 .dw-field__control > p-select,
 .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, dw-date-picker, dw-autocomplete, dw-slider) { 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. */
@@ -391,12 +392,6 @@ dw-search-input.dw-search--block { width: 100%; }
   display: none;
 }
 
-/* PrimeNG's slider host is inline; give it the field's width. */
-p-slider {
-  display: block;
-  width: 100%;
-}
-
 /* pSize="small" inputs: base.css's `font: inherit` would keep them at 14px, so restate the
    small type here — 5px padding + 16px line + 1px borders = 28px, the small dw-button height. */
 /* Small selects match small inputs exactly (28px): their label gets the same 16px line
@@ -470,12 +465,14 @@ p-slider {
 
 
 /* Small selects (size="small"): their option list matches the 12px trigger instead of the default
-   14px rows. The list renders inside the select unless it is appended elsewhere (appendTo); a list
-   appended to <body> takes the panel class `dw-select-panel--sm` for the same sizing. */
+   14px rows. A list rendered inside the select matches `.p-select-sm`; a list appended elsewhere
+   (appendTo="body") gets `dw-select-panel--sm` from provideCrystalPrimeNG()'s pass-through, so no
+   screen sets it by hand. */
 .p-select-sm .p-select-option,
 .p-multiselect-sm .p-multiselect-option,
 .dw-select-panel--sm .p-select-option,
-.dw-select-panel--sm .p-multiselect-option {
+.dw-select-panel--sm .p-multiselect-option,
+.dw-autocomplete-panel--sm .p-autocomplete-option {
   padding: 5px 10px;
   font-size: var(--dw-font-size-12);
   line-height: var(--dw-line-height-16);
@@ -483,7 +480,8 @@ p-slider {
 .p-select-sm .p-select-empty-message,
 .p-multiselect-sm .p-multiselect-empty-message,
 .dw-select-panel--sm .p-select-empty-message,
-.dw-select-panel--sm .p-multiselect-empty-message {
+.dw-select-panel--sm .p-multiselect-empty-message,
+.dw-autocomplete-panel--sm .p-autocomplete-empty-message {
   padding: 5px 10px;
   font-size: var(--dw-font-size-12);
 }
@@ -635,7 +633,7 @@ body .dw-var-field .p-textarea {
 .dw-check-toggle.is-on .dw-check-toggle__label { color: var(--dw-text-strong); font-weight: var(--dw-font-weight-medium); }
 
 /* Compact calendar (inline in popovers): smaller day cells and type, quieter weekday row and a
-   tighter time picker. <p-datepicker styleClass="dw-datepicker--compact" [inline]="true" />.
+   tighter time picker. <dw-date-picker [compact]="true" [inline]="true" />.
    Two classes per rule so they outrank PrimeNG's own (unlayered) datepicker styles. */
 .dw-datepicker--compact .p-datepicker-header { padding: 0 0 var(--dw-space-2); }
 .dw-datepicker--compact .p-datepicker-title,
@@ -675,3 +673,108 @@ body .dw-var-field .p-textarea {
 .config-form-body .toggle-label { margin: 0; cursor: pointer; }
 /* Host of a config form component inside .config-drawer-body: fill the drawer height. */
 .config-form-host { display: flex; flex: 1; flex-direction: column; min-height: 0; }
+
+/* ── dw-select / dw-multiselect (components) ──
+   The host takes the screen's sizing (a width, `dw-w-full`, a grid track) and the PrimeNG control fills it; with no
+   width set, the host is as wide as the control would be on its own. */
+.dw-select,
+.dw-multiselect {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.dw-select > p-select,
+.dw-multiselect > p-multiselect {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.dw-select.dw-select--fluid,
+.dw-multiselect.dw-multiselect--fluid {
+  display: flex;
+  width: 100%;
+}
+
+/* ── dw-checkbox / dw-radio / dw-switch (components): the control and its label on one line (dw-check) ── */
+.dw-checkbox__label--empty:empty,
+.dw-radio__label--empty:empty { display: none; }
+
+/* ── dw-number-input (component): sized by the screen like dw-select ── */
+.dw-number-input { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-number-input > p-inputnumber { flex: 1 1 auto; min-width: 0; }
+.dw-number-input.dw-number-input--fluid { display: flex; width: 100%; }
+
+/* ── dw-date-picker (component): sized by the screen like dw-select; the inline calendar keeps its own width unless fluid ── */
+.dw-date-picker { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-date-picker > p-datepicker { flex: 1 1 auto; min-width: 0; }
+.dw-date-picker.dw-date-picker--fluid { display: flex; width: 100%; }
+.dw-date-picker.dw-date-picker--inline > p-datepicker { flex: none; }
+.dw-date-picker.dw-date-picker--inline.dw-date-picker--fluid > p-datepicker { flex: 1 1 auto; }
+/* flush: the inline calendar loses its own box and sits on its container's surface (a popover or a panel pads it). */
+.dw-date-picker.dw-date-picker--flush .p-datepicker-panel-inline {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ── dw-autocomplete (component): sized by the screen like dw-select; the text input fills it ──
+   (The extra elements outweigh PrimeNG's `width: 1%` on the input beside a dropdown button, whose styles load after ours.) */
+.dw-autocomplete { display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
+.dw-autocomplete > p-autocomplete { display: flex; flex: 1 1 auto; min-width: 0; }
+.dw-autocomplete > p-autocomplete.p-autocomplete > input.p-autocomplete-input { flex: 1 1 auto; width: auto; min-width: 0; }
+.dw-autocomplete.dw-autocomplete--fluid { display: flex; width: 100%; }
+/* Its list (appended to <body>, so styled by its panel classes): rows in the 14px body type, unless small. */
+body .dw-autocomplete-panel:not(.dw-autocomplete-panel--sm) :is(.p-autocomplete-option, .p-autocomplete-empty-message) {
+  font-size: var(--dw-font-size-14);
+}
+/* panelWidth="field": exactly as wide as the field, as select lists are (see above): PrimeNG puts the field's width in
+   the overlay's inline min-width, a zero width lets it win, and long suggestions ellipsise. */
+.p-overlay:has(> .p-overlay-content > .dw-autocomplete-panel--field) { width: 0; }
+.dw-autocomplete-panel--field .p-autocomplete-option > * {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* size="sm" gives it the small select rows (`.dw-autocomplete-panel--sm`, with the small select lists above). */
+
+/* ── dw-slider (component): fills its container, in crystal's tokens ──
+   A 4px track in the meter's colours (dw-meter) and a 16px accent handle with a surface centre; the padding keeps the
+   handle clear of what sits above and below. PrimeNG draws it from these variables. */
+.dw-slider {
+  --p-slider-track-size: 4px;
+  --p-slider-track-background: var(--dw-surface-pressed);
+  --p-slider-track-border-radius: var(--dw-radius-full);
+  --p-slider-range-background: var(--dw-accent);
+  --p-slider-handle-width: 16px;
+  --p-slider-handle-height: 16px;
+  --p-slider-handle-border-radius: var(--dw-radius-full);
+  --p-slider-handle-background: var(--dw-accent);
+  --p-slider-handle-hover-background: var(--dw-accent-hover);
+  --p-slider-handle-content-width: 8px;
+  --p-slider-handle-content-height: 8px;
+  --p-slider-handle-content-border-radius: var(--dw-radius-full);
+  --p-slider-handle-content-background: var(--dw-surface);
+  --p-slider-handle-content-hover-background: var(--dw-surface);
+  --p-slider-handle-content-shadow: none;
+  --p-slider-handle-focus-ring-width: 0;
+  --p-slider-handle-focus-ring-shadow: var(--dw-focus-ring);
+
+  display: block;
+  width: 100%;
+  padding-block: var(--dw-space-2);
+}
+/* PrimeNG shows a grab cursor on the handle; show it grabbing while held. */
+.dw-slider .p-slider-handle:active { cursor: grabbing; }
+.dw-slider.dw-slider--invalid {
+  --p-slider-range-background: var(--dw-danger-solid);
+  --p-slider-handle-background: var(--dw-danger-solid);
+  --p-slider-handle-hover-background: var(--dw-danger-solid);
+  --p-slider-handle-focus-ring-shadow: var(--dw-focus-ring-danger);
+}
+.dw-slider.dw-slider--vertical { display: inline-block; width: auto; height: 100%; padding-block: 0; padding-inline: var(--dw-space-2); }
+.dw-slider.dw-slider--vertical > p-slider { height: 100%; }
+/* p-slider used directly (until its screens move to dw-slider): a block as wide as its field. */
+p-slider { display: block; width: 100%; }
+.dw-slider--vertical > p-slider { width: var(--p-slider-track-size); }

package/styles/components/navigation.css

@@ -215,7 +215,7 @@
 }
 
 /* Selected marker: an accent left border that follows the item's rounded corners. Only the agents
-   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-selected-marker); every
+   list page's sidebar has it (dw-nav-list [marker], and its tags tree: dw-tree [marker]); every
    other selection is the plain selected fill. An inset shadow, not a border, so the item's content
    does not shift when it is selected. */
 .dw-nav-list--marker .dw-nav-item.is-active,
@@ -547,6 +547,36 @@ dw-nav-list.dw-nav-list--minimizable { overflow: hidden; padding-bottom: 0; }
 .dw-steps__item.is-done .dw-steps__no { border-color: var(--dw-accent); background: var(--dw-accent); color: var(--dw-text-inverse); }
 .dw-steps__sep { flex: 0 0 48px; height: 1px; background: var(--dw-border-strong); }
 
+/* ── dw-stepper: the component over .dw-steps. Each step is a button; a done step goes back,
+   an upcoming step of a linear stepper is disabled but drawn as upcoming (not faded).
+   --inline drops the sub-header strip (a wizard header); --md is the wizard size, --sm the strip above. ── */
+.dw-stepper { display: block; min-width: 0; }
+.dw-steps--inline { padding: 0; border-bottom: 0; }
+.dw-steps__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dw-space-2);
+  margin: calc(-1 * var(--dw-space-1));
+  padding: var(--dw-space-1);
+  border: 0;
+  border-radius: var(--dw-radius-md);
+  background: transparent;
+  color: inherit;
+  font-weight: inherit;
+  white-space: nowrap;
+  transition: color var(--dw-dur-micro) var(--dw-ease);
+}
+.dw-steps__btn:disabled,
+.dw-steps__btn[aria-current='step'] { cursor: default; }
+.dw-steps__btn:not(:disabled, [aria-current='step']):hover { color: var(--dw-text-link); }
+.dw-steps__btn:focus-visible { outline: none; box-shadow: var(--dw-focus-ring); }
+.dw-steps__no { flex: none; transition: background-color var(--dw-dur-micro) var(--dw-ease), border-color var(--dw-dur-micro) var(--dw-ease); }
+.dw-steps__item.is-disabled { opacity: 0.5; }
+.dw-steps__item.is-disabled .dw-steps__btn { cursor: not-allowed; }
+.dw-steps__sep.is-done { background: var(--dw-accent); }
+.dw-steps--md .dw-steps__no { width: 32px; height: 32px; border-width: 2px; font-size: var(--dw-font-size-14); }
+.dw-steps--md .dw-steps__sep { height: 2px; }
+
 /* ── dw-rail-tabs: vertical icon-over-label tab strip at a panel edge ── */
 .dw-rail-tabs { display: flex; flex-shrink: 0; width: 64px; }
 .dw-rail-tabs__nav {

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%;