@webority/theme 0.17.4 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.17.4",
+  "version": "0.18.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/_card.scss

@@ -38,7 +38,7 @@
 // so they must stay in the layer that loads after Bootstrap.
 .card-title {
     margin: 0;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.3;
     color: var(--color-text);

package/scss/wui/_controls.scss

@@ -74,6 +74,32 @@
     grid-column: 2;
 }
 
+// AppRadioGroup: options in a column, or a wrapping row with `inline`.
+.wui-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.wui-radio-group-inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 24px;
+}
+.wui-radio-group > .form-check {
+    margin-bottom: 0;
+}
+// A lone .form-check lets its label shrink to nothing so long consent text can wrap; in a row
+// of options that broke words mid-way ("Mont hly"). Keep each option's words whole and let the
+// row wrap instead.
+.wui-radio-group .form-check-label {
+    min-width: auto;
+}
+// Beside-label forms centre a label on a text control; a radio group's first option is shorter,
+// so its label lines up with that row instead.
+.wui-form-labels-start .field:has(> .wui-radio-group) > .label {
+    padding-top: 0;
+}
+
 // Glyph — shared by BS form-check-input and the wui-check alias.
 .form-check-input,
 .wui-check,

package/scss/wui/_flow.scss

@@ -780,9 +780,20 @@ button.step:focus-visible .step-circle {
     flex-direction: column;
     gap: 6px;
 }
+// Consecutive sections are separated by space and a light rule, and the action bar keeps its
+// distance from the last field, so a long form never reads as one run of fields.
+.form-section + .form-section {
+    margin-top: 32px;
+    padding-top: 32px;
+    border-top: 1px solid var(--color-border);
+}
+.form-section + .form-actions {
+    margin-top: 32px;
+}
+// Ranks below the card title (16px) a section usually sits in, and above the 14px field labels.
 .form-section-title {
     margin: 0;
-    font-size: 17px;
+    font-size: 15px;
     font-weight: 600;
     line-height: 1.3;
     color: var(--color-text);
@@ -799,6 +810,65 @@ button.step:focus-visible .step-circle {
     gap: 16px;
 }
 
+// layout="side": the title and description take a column beside the fields. Below lg the
+// section stacks as usual, since a 240px column would starve the fields.
+@include media-breakpoint-up(lg) {
+    .wui-form-side {
+        display: grid;
+        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
+        column-gap: 32px;
+        align-items: start;
+    }
+    .wui-form-side > .form-section-body {
+        grid-column: 2;
+    }
+}
+
+// labels="start": each label sits beside its control, one field per row. The label column is
+// narrower when the section title already takes a column of its own. Below md labels return
+// to the top.
+.wui-form-labels-start {
+    --wui-form-label-width: 180px;
+}
+.wui-form-side.wui-form-labels-start {
+    --wui-form-label-width: 150px;
+}
+@include media-breakpoint-up(md) {
+    // Two classes outrank the row's own column count.
+    .wui-form-labels-start .form-row-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .wui-form-labels-start .field {
+        display: grid;
+        grid-template-columns: var(--wui-form-label-width) minmax(0, 1fr);
+        column-gap: 20px;
+        row-gap: 4px;
+        align-items: start;
+    }
+    // Centres the label's first line on the control beside it, at any control height.
+    .wui-form-labels-start .field > .label {
+        grid-column: 1;
+        padding-top: calc((var(--wui-control-height) - 1.2em) / 2);
+    }
+    .wui-form-labels-start .field > :not(.label) {
+        grid-column: 2;
+    }
+    // A checkbox or switch has its label after the box; line the box up with the controls.
+    .wui-form-labels-start .form-row-grid > .form-check {
+        margin-left: calc(var(--wui-form-label-width) + 20px);
+    }
+}
+
+// density="compact": small-tier controls and tighter gaps, for admin screens and dialogs.
+.wui-form-compact {
+    --wui-control-height: var(--wui-control-height-sm);
+    gap: 12px;
+}
+.wui-form-compact .form-section-body,
+.wui-form-compact .form-row-grid {
+    gap: 12px;
+}
+
 // ============================================================================
 .form-row-grid {
     display: grid;

package/scss/wui/_typography.scss

@@ -441,20 +441,8 @@ wui-multiselect[collapse-chips] .ms-chips {
 .ms-input:focus {
     outline: none;
 }
-// AppTagInput lays the input on the LEFT with the chips filling and wrapping to its
-// right (its template renders the input before the chips). Multiselect keeps its
-// chips-first layout, so these overrides are scoped to `wui-taginput`.
-wui-taginput .ms-input {
-    // Don't grow to fill — hold a modest resting width on the left; the chips take
-    // everything to the right. (align-items:center on the control centres the input
-    // against the chip row, so it needs no min-height of its own.)
-    flex: 0 1 auto;
-    flex-basis: 120px;
-    min-width: 96px;
-}
-wui-taginput .ms-chips {
-    flex: 1 1 auto;
-}
+// AppTagInput renders its input inside the chip row, after the chips, so the shared
+// `.ms-chips > .ms-input` rule above lets it wrap with them and fill the rest of the line.
 // Match AppInput's per-size heights: the shared `.search-select-multi` floors md at
 // 40px, but AppInput's md is the 44px control-height token — raise the floor so the
 // sm/md/lg progression lines up with a text field beside it. (sm 36 / lg 52 already

package/scss/wui/_utilities.scss

@@ -765,6 +765,32 @@
     --alert-text: var(--color-danger-text-on-soft);
 }
 
+// AppErrorSummary: a danger alert holding a heading and one link per field error. It takes
+// focus when it appears, so its focus ring is the alert's own edge rather than an outline.
+.wui-error-summary:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-danger-soft), 0 0 0 4px var(--alert-accent);
+}
+.wui-error-summary-title {
+    margin: 0 0 6px;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--alert-text);
+}
+.wui-error-summary-list {
+    margin: 0;
+    padding-left: 20px;
+}
+.wui-error-summary-list li + li {
+    margin-top: 2px;
+}
+.wui-error-summary-list a {
+    color: var(--alert-text);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
 // Borderless variant (`bordered={false}` / `bordered="false"`): drop the soft ring and
 // keep only the tint fill. `transparent` rather than `border: 0` so the box keeps its
 // 1px so nothing shifts when toggling the border on and off.