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

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/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,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) { 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. */
@@ -676,3 +677,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';