@webority/theme 0.73.1 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.73.1",
+  "version": "0.75.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/_controls.scss

@@ -70,9 +70,14 @@
     row-gap: 2px;
 }
 .form-check > .field-hint,
-.form-check > .field-error {
+.form-check > .field-error,
+.form-check > .wui-field-message {
     grid-column: 2;
 }
+// Clears the underline of a link in the label (it hangs 3px under the text) by 4px more.
+.form-check > .wui-field-message {
+    margin-top: 5px;
+}
 
 // AppRadioGroup: options in a column, or a wrapping row with `inline`.
 .wui-radio-group {
@@ -527,6 +532,66 @@ textarea.form-control.autosize {
     margin-top: -2px;
 }
 
+// The message line under a field: the hint and the error share one grid cell, so the error takes
+// the hint's place instead of adding a line. Inside a form an empty line still keeps its height, so
+// showing an error never moves the form; elsewhere (toolbars, filter bars, inline edits) an empty
+// line takes no space. The library's compact containers never reserve it, since a Razor filter bar is a
+// GET form. .wui-form-compact on any container opts a form out.
+.wui-field-message {
+    display: grid;
+    margin-top: -2px;
+    font-size: 12px;
+    line-height: 16px;
+}
+.wui-field-message:empty {
+    display: none;
+}
+form .wui-field-message:empty {
+    display: grid;
+    min-height: 16px;
+}
+:is(.wui-form-compact, .wui-filter-bar, .wui-filter-popover, .wui-table-toolbar, .wui-inline-edit) .wui-field-message:empty {
+    display: none;
+}
+.wui-field-message > .field-hint,
+.wui-field-message > .field-error {
+    grid-area: 1 / 1;
+    margin-top: 0;
+    line-height: inherit;
+    transition:
+        opacity 150ms ease,
+        transform 150ms ease,
+        visibility 0s;
+}
+.wui-field-message > .field-error:not(:empty) {
+    animation: wui-field-message-in 150ms ease both;
+}
+// A cleared error fades out with its text still in place (React keeps it for the fade).
+.wui-field-message > .field-error.wui-leaving {
+    opacity: 0;
+    transform: translateY(-2px);
+}
+.wui-field-message:has(> .field-error:not(:empty):not(.wui-leaving)) > .field-hint {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 150ms ease,
+        visibility 0s linear 150ms;
+}
+@keyframes wui-field-message-in {
+    from {
+        opacity: 0;
+        transform: translateY(-2px);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-field-message > .field-hint,
+    .wui-field-message > .field-error {
+        transition: none;
+        animation: none;
+    }
+}
+
 // Native select with a rounded squircle, custom chevron, off-surface fill.
 .select {
     appearance: none;
@@ -1114,7 +1179,8 @@ wui-select[compact] {
 .field > .datepicker,
 .field > .file-input,
 .field > .file-preview,
-.field > .field-error {
+.field > .field-error,
+.field > .wui-field-message {
     align-self: stretch;
 }
 // A file picker fills its column by default (align-self:stretch fills the field on the cross

package/scss/wui/_drawer.scss

@@ -103,8 +103,10 @@
     min-width: 0;
     font-weight: 500;
 }
+// !important: a consumer's footer is often a Bootstrap display utility (.d-flex is display:flex !important),
+// which would otherwise keep Cancel and Submit showing beside the discard question.
 .wui-drawer-discarding > :not(.wui-drawer-discard) {
-    display: none;
+    display: none !important;
 }
 
 // Side drawer: from md up.

package/scss/wui/_theme-toggle.scss

@@ -17,18 +17,6 @@ html.wui-theme-switching::view-transition-new(root) {
     // flashes in full for the frame or two between the snapshot and the animation start.
     clip-path: inset(50%);
 }
-// The pressed control carries its own view-transition-name for the switch (the engine sets it),
-// so it is rendered as its own live layer above the sweep: no old image, no cross-fade, just
-// the control as it now is, with its ring sliding or its glyph swapped the moment it is pressed.
-html.wui-theme-switching::view-transition-group(wui-theme-toggle),
-html.wui-theme-switching::view-transition-new(wui-theme-toggle) {
-    animation: none;
-}
-html.wui-theme-switching::view-transition-old(wui-theme-toggle) {
-    animation: none;
-    opacity: 0;
-}
-
 // The new page is rendered live under the moving clip, so anything still changing on it repaints
 // the whole page every frame. A theme flip starts a colour transition on hundreds of elements at
 // once (Bootstrap's buttons, inputs and links all transition color and background), which is