@webority/theme 0.17.3 → 0.18.0

package/package.json

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

@@ -470,6 +470,14 @@
     margin-left: auto;
     gap: 8px;
 }
+// A filter control wider than a phone (a four-option segmented strip) scrolls inside the toolbar
+// instead of widening the page.
+.wui-table-toolbar-filters {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
 // The search box is full-width on its own; in a toolbar it is one control among several.
 .wui-table-toolbar .search-wrap {
     width: min(320px, 100%);
@@ -722,6 +730,166 @@
         inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
 }
 
+// Columns menu (AppColumnMenu / <app-column-menu>) and the column it hides on Razor.
+.table-ledger .wui-col-hidden {
+    display: none;
+}
+.wui-column-menu {
+    min-width: 200px;
+    padding: 8px 0;
+}
+.wui-column-menu-title {
+    padding: 4px 14px 8px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--color-text-subtle);
+}
+.wui-column-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 14px;
+    font-size: 14px;
+    color: var(--color-text);
+    cursor: pointer;
+}
+.wui-column-menu-item:hover {
+    background: var(--color-bg-subtle);
+}
+
+// A row that opens its record (AppDataTable rowHref / onRowClick, Razor data-href).
+.table-ledger tbody tr.wui-row-link {
+    cursor: pointer;
+}
+.table-ledger tbody tr.wui-row-link:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+
+// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below sm each row is a
+// card. The first column (after the library's select/expand cells) leads the card at full width,
+// every other cell is a "label: value" line from its data-label, the select checkbox sits in the
+// card's top corner and the row actions close the card. The header row is visually hidden, not
+// removed, so the column names stay available to assistive technology.
+@include media-breakpoint-down(sm) {
+    // Cards flow with the page: no sideways scroll, and no maxHeight scroll box (an inline
+    // max-height from `maxHeight` has to be overridden, hence !important).
+    .table-wrap:has(> .table-ledger.wui-table-stack) {
+        overflow: visible;
+        max-height: none !important;
+    }
+    .table-wrap:has(> .table-ledger.wui-table-stack) .table-ledger thead th {
+        position: static;
+    }
+    .table-ledger.wui-table-stack,
+    .table-ledger.wui-table-stack > tbody,
+    .table-ledger.wui-table-stack > tfoot,
+    .table-ledger.wui-table-stack > tbody > tr,
+    .table-ledger.wui-table-stack > tfoot > tr {
+        display: block;
+        width: 100%;
+    }
+    .table-ledger.wui-table-stack > thead {
+        // Block, so overflow:hidden applies; a table-header-group ignores it and its row still
+        // widened the page.
+        display: block;
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+    .table-ledger.wui-table-stack > tbody > tr,
+    .table-ledger.wui-table-stack > tfoot > tr {
+        position: relative;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg, 12px);
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td,
+    .table-ledger.wui-table-stack > tfoot > tr > td {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        height: auto;
+        min-height: 0;
+        padding: 6px 0;
+        border: 0;
+        text-align: right;
+        // A pinned column has nothing to pin to in a card. The pinned-column selectors outrank this
+        // one by design (they must beat every table rule), so the card layout overrides them here.
+        position: static !important;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td::before,
+    .table-ledger.wui-table-stack > tfoot > tr > td::before {
+        content: attr(data-label);
+        flex: none;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--color-text-subtle);
+        text-align: left;
+    }
+    // A value takes the space beside its label and wraps inside the card rather than running past
+    // its edge (a long email under an avatar did).
+    .table-ledger.wui-table-stack > * > tr > td > * {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td .u-meta {
+        align-items: flex-end;
+    }
+    // The leading cell is the card's title line: full width, no label.
+    .table-ledger.wui-table-stack > * > tr > td:not(.wui-select-cell, .wui-expand-cell):is(:first-child, .wui-select-cell + td, .wui-expand-cell + td) {
+        justify-content: flex-start;
+        padding: 0 32px 6px 0;
+        text-align: left;
+    }
+    .table-ledger.wui-table-stack > * > tr > td:not(.wui-select-cell, .wui-expand-cell):is(:first-child, .wui-select-cell + td, .wui-expand-cell + td) .u-meta {
+        align-items: flex-start;
+    }
+    .table-ledger.wui-table-stack > * > tr > td:not(.wui-select-cell, .wui-expand-cell):is(:first-child, .wui-select-cell + td, .wui-expand-cell + td)::before {
+        content: none;
+    }
+    // Empty cells (a footer's blank columns) take no line.
+    .table-ledger.wui-table-stack > * > tr > td:empty {
+        display: none;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td.wui-select-cell,
+    .table-ledger.wui-table-stack > tbody > tr > td.wui-expand-cell {
+        // !important for the same reason as the static rule above: a pinned-column `left` with this
+        // `right` would stretch the cell across the card.
+        position: absolute !important;
+        top: 12px;
+        left: auto !important;
+        right: 12px;
+        width: auto;
+        min-width: 0;
+        max-width: none;
+        padding: 0;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td:has(> .u-row-actions) {
+        justify-content: flex-end;
+        margin-top: 6px;
+        padding-top: 10px;
+        border-top: 1px solid var(--color-border);
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td:has(> .u-row-actions)::before {
+        content: none;
+    }
+    // The status bar becomes the card's left edge.
+    .table-ledger.wui-table-stack > tbody > tr[data-status] {
+        border-left: 3px solid var(--wui-row-status);
+    }
+    .table-ledger.wui-table-stack > tbody > tr[data-status] > td:first-child {
+        box-shadow: none;
+    }
+}
+
 // Totals row (AppDataTable column `footer`, or an author <tfoot> on Razor).
 .table-ledger tfoot td {
     height: 48px;

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,12 +810,74 @@ 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;
     grid-template-columns: repeat(var(--form-cols, 2), minmax(0, 1fr));
     gap: 16px;
     align-items: start;
+    // In a form row every field fills its column, so a date picker drops its compact standalone
+    // width here and lines up with the fields beside it. A .date-w-* class on the field still wins.
+    --wui-datepicker-width: 100%;
 }
 // Below md, collapse to 1 column.
 @include media-breakpoint-down(md) {

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.