@webority/theme 0.74.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.74.0",
+  "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