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

package/primeng/index.d.ts

@@ -610,6 +610,35 @@ declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base
 
 /** 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 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 +649,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_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };

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

@@ -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; } }

package/styles/components/form.css

@@ -225,7 +225,7 @@ 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,
@@ -470,8 +470,9 @@ 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,
@@ -675,3 +676,33 @@ 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%; }

package/styles/crystal-no-fonts.css

@@ -4,6 +4,8 @@
  *
  * 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 './tokens/primitives.css';
 @import './tokens/semantic.css';
 @import './tokens/semantic-dark.css';