@webority/theme 0.27.3 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.27.3",
+  "version": "0.29.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/wui/_data.scss

@@ -509,6 +509,19 @@
 .wui-filter-bar {
     min-width: 0;
 }
+// Facets size themselves: a select, multi-select or date range takes about 180 to 240px and the
+// search box a wider 260 to 320px, so they wrap as a compact row instead of stacking at full
+// width. Segments keep their own width.
+.wui-filter-bar > .field {
+    flex: 1 1 180px;
+    min-width: 0;
+    max-width: 240px;
+}
+.wui-filter-bar > .search-wrap {
+    flex: 1 1 260px;
+    min-width: 0;
+    max-width: 320px;
+}
 
 // Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
 // range and no total; the page buttons say where you are.

package/scss/wui/_flow.scss

@@ -20,6 +20,9 @@
 //   --wui-step-soft        soft tint (active ring; the journey/icons "done" badge bg)
 //   --wui-step-soft-fg     text/icon on the soft tint (the "done" badge check)
 //   --wui-step-connector   the incomplete-rail colour
+//   --wui-step-done-accent, --wui-step-done-accent-fg, --wui-step-done-soft,
+//   --wui-step-done-soft-fg   the same four, for COMPLETED steps only (badge, "STEP n"
+//                          eyebrow, filled rail). Unset, completed steps follow the accent.
 //   --wui-step-size        compact/vertical badge diameter (default 28px)
 //   --wui-step-badge-size  icons-variant badge diameter (default 56px)
 // Every variant defaults to the brand primary — active, done and rail share one accent
@@ -71,7 +74,7 @@
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 .step-circle {
     position: relative;
@@ -95,9 +98,9 @@
     box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .step-circle {
-    border-color: var(--wui-step-accent, var(--color-primary));
-    background: var(--wui-step-accent, var(--color-primary));
-    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    border-color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+    color: var(--wui-step-done-accent-fg, var(--wui-step-accent-fg, var(--color-on-scrim)));
 }
 .step-label {
     max-width: 130px;
@@ -147,6 +150,22 @@ button.step:focus-visible .step-circle {
         0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
         0 0 0 6px var(--wui-step-accent, var(--color-primary));
 }
+// A completed step keeps its own colour while hovered or focused, so a done-tone step does
+// not flash the main accent. Unset, these resolve to the same accent as the rules above.
+a.step.done:hover .step-circle,
+button.step.done:hover .step-circle {
+    box-shadow: 0 0 0 4px var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+}
+a.step.done:hover .step-label,
+button.step.done:hover .step-label {
+    color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+}
+a.step.done:focus-visible .step-circle,
+button.step.done:focus-visible .step-circle {
+    box-shadow:
+        0 0 0 4px var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft))),
+        0 0 0 6px var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+}
 // A step that failed its stage — a red circle with an alert, so an invalid step
 // reads as wrong at a glance rather than merely "not done".
 .step.error .step-circle {
@@ -201,8 +220,8 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--wui-step-soft, var(--color-primary-soft));
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-journey .step.active .step-circle {
     background: var(--wui-step-accent, var(--color-primary));
@@ -227,7 +246,7 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-journey .step.active .step-index {
     color: var(--wui-step-accent, var(--color-primary));
@@ -275,7 +294,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // Below xl the four label+title pairs no longer fit side by side, so the bar
 // becomes a vertical list and the connectors go away.
@@ -353,7 +372,7 @@ button.step:focus-visible .step-circle {
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // The journey bar stacked vertically reuses its own narrow-width treatment: a plain
 // column with the horizontal connectors dropped (a real vertical rail here would
@@ -403,8 +422,8 @@ button.step:focus-visible .step-circle {
 }
 .stepper-icons .step.done .step-circle {
     border: none;
-    background: var(--wui-step-soft, var(--color-primary-soft));
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-icons .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -429,7 +448,7 @@ button.step:focus-visible .step-circle {
     color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -455,7 +474,7 @@ button.step:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
 }
 .stepper-icons .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
 // lifts on hover instead.
@@ -483,6 +502,14 @@ button.step:focus-visible .step-circle {
     }
 }
 
+// No connectors: the wizard's hide-connectors option drops the line between steps on every
+// variant and orientation. Placed after the variants so it outranks their equal-specificity
+// rails; the journey bar's .step-line siblings are simply not emitted.
+.wui-stepper-no-connectors .step + .step::before,
+.wui-stepper-no-connectors .step:not(:last-child)::after {
+    content: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
     button.step:hover .step-circle,
@@ -531,6 +558,42 @@ button.step:focus-visible .step-circle {
     --wui-step-soft-fg: var(--color-info-text);
 }
 
+// Done-tone presets — recolour COMPLETED steps only (their badge, "STEP n" eyebrow and the
+// filled rail after them), leaving the active step on the accent above. Same ramps and the
+// same placement rules as the tone presets: on the stepper or any ancestor (the wizard host).
+// Error and skipped steps keep their own look.
+// ----------------------------------------------------------------------------
+.wui-step-done-tone-primary {
+    --wui-step-done-accent: var(--color-primary);
+    --wui-step-done-accent-fg: var(--color-primary-text);
+    --wui-step-done-soft: var(--color-primary-soft);
+    --wui-step-done-soft-fg: var(--color-primary);
+}
+.wui-step-done-tone-success {
+    --wui-step-done-accent: var(--color-success);
+    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-soft: var(--color-success-soft);
+    --wui-step-done-soft-fg: var(--color-success-text);
+}
+.wui-step-done-tone-warning {
+    --wui-step-done-accent: var(--color-warning);
+    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-soft: var(--color-warning-soft);
+    --wui-step-done-soft-fg: var(--color-warning-text);
+}
+.wui-step-done-tone-danger {
+    --wui-step-done-accent: var(--color-danger);
+    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-soft: var(--color-danger-soft);
+    --wui-step-done-soft-fg: var(--color-danger-text);
+}
+.wui-step-done-tone-info {
+    --wui-step-done-accent: var(--color-info);
+    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-soft: var(--color-info-soft);
+    --wui-step-done-soft-fg: var(--color-info-text);
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //