@webority/theme 0.75.1 → 0.76.0

package/package.json

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

@@ -536,7 +536,8 @@ textarea.form-control.autosize {
 // 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.
+// GET form. .wui-form-compact on any container opts a form out with the small control height;
+// .wui-form-inline opts out and changes nothing else, for a field and button on one row.
 .wui-field-message {
     display: grid;
     margin-top: -2px;
@@ -550,7 +551,7 @@ 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 {
+:is(.wui-form-compact, .wui-form-inline, .wui-filter-bar, .wui-filter-popover, .wui-table-toolbar, .wui-inline-edit) .wui-field-message:empty {
     display: none;
 }
 .wui-field-message > .field-hint,
@@ -1028,6 +1029,42 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 .field-float .input[aria-invalid="true"] ~ .float-label {
     background: var(--color-surface);
 }
+// Above placement (floatingLabel="above"): the same slide, but the label comes to rest above
+// the box at the top-left, clear of the border, so it needs no mask. The shell reserves the
+// label's line above the box, so a floated label never overlaps what sits above the field.
+.field-float.wui-float-above {
+    --wui-float-above-space: 22px;
+    padding-top: var(--wui-float-above-space);
+}
+.field-float.wui-float-above .float-label {
+    // Centred on the box, not the shell: the shell is the reserved line plus the box.
+    top: calc(50% + var(--wui-float-above-space) / 2);
+    background: transparent;
+    transition:
+        top 0.15s var(--wui-ease-ui),
+        left 0.15s var(--wui-ease-ui),
+        padding 0.15s var(--wui-ease-ui),
+        transform 0.15s var(--wui-ease-ui),
+        color 0.15s var(--wui-ease-ui);
+}
+.field-float.wui-float-above .input:focus ~ .float-label,
+.field-float.wui-float-above .input:not(:placeholder-shown) ~ .float-label {
+    top: 0;
+    left: 0;
+    padding: 0;
+    transform: scale(0.86);
+    font-weight: 500;
+}
+.field-float.wui-float-above .input:not(:focus):not(:placeholder-shown):not(.error):not(.is-invalid) ~ .float-label {
+    color: var(--color-text);
+}
+.field-float.wui-float-above .input ~ .float-label,
+.field-float.wui-float-above .input:focus ~ .float-label,
+.field-float.wui-float-above .input.error ~ .float-label,
+.field-float.wui-float-above .input.is-invalid ~ .float-label,
+.field-float.wui-float-above .input[aria-invalid="true"] ~ .float-label {
+    background: transparent;
+}
 // Floating label for AppSelect — the trigger is a <button>, so there is no
 // :placeholder-shown to key off. :has() raises the label when the control is
 // focused/open, or once a value is chosen (the label span drops