@webority/theme 0.127.0 → 0.128.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.127.0",
+  "version": "0.128.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": {
@@ -47,7 +47,7 @@
     "postcss": "^8.5.31"
   },
   "devDependencies": {
-    "@webority/tokens": "0.127.0",
+    "@webority/tokens": "0.128.0",
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.127.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.128.0 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_components.scss

@@ -877,8 +877,9 @@
 // compiled $card-border-radius. Background is an ELEVATED surface, not the page
 // colour — so a card stays visible on a tinted page, and flips correctly in dark
 // mode because --color-surface is themed in the alias layer.
+// A brand that draws rounder cards than its controls sets --wui-card-radius in its token file.
 .card {
-    --bs-card-border-radius: var(--wui-radius-lg);
+    --bs-card-border-radius: var(--wui-card-radius, var(--wui-radius-lg));
     --bs-card-bg: var(--color-surface);
 }
 
@@ -897,6 +898,13 @@
     align-items: center;
     gap: 0.5rem;
     margin-left: auto;
+    // Natural width: a long title wraps beside the actions instead of squeezing a button. The cap keeps
+    // wide actions (a segmented filter) inside a phone-width header, where they shrink as before.
+    flex: 0 0 auto;
+    max-width: 100%;
+}
+.card-header-actions .btn {
+    white-space: nowrap;
 }
 
 // Close button (React `onClose` / Razor `dismissible`): the last control in the header, pushed

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.127.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.128.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/wui/_card.scss

@@ -46,11 +46,12 @@
 }
 // Bootstrap has its own `.card-title` (a bare margin-bottom) — these override it,
 // so they must stay in the layer that loads after Bootstrap.
-// A product sets its title type with --wui-card-title-fs and --wui-card-title-lh.
+// A product sets its title type with --wui-card-title-font-family, -fs, -fw and -lh.
 .card-title {
     margin: 0;
+    font-family: var(--wui-card-title-font-family, inherit);
     font-size: var(--wui-card-title-fs, 16px);
-    font-weight: 600;
+    font-weight: var(--wui-card-title-fw, 600);
     line-height: var(--wui-card-title-lh, 1.3);
     color: var(--color-text);
 }

package/scss/wui/_choice.scss

@@ -1238,7 +1238,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 // NOT scoped under `.country-dropdown` — <wui-phone> renders the toggle inside
 // `.phone-country-adornment`, with no such wrapper. Scoping it there left the
 // button on raw UA styling (2px outset border + grey fill) inside the field.
-.country-toggle {
+.country-toggle,
+.wui-phone-prefix {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -1276,6 +1277,10 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     cursor: not-allowed;
     opacity: var(--wui-disabled-opacity);
 }
+// A locked country: the dial code is a static prefix, laid out like the toggle but not a control.
+.wui-phone-prefix {
+    cursor: default;
+}
 // Flag glyphs come from the generated .wui-flag-* classes (_flags.scss).
 .app-phone-number-input .phone-chevron {
     color: var(--color-text-muted);

package/scss/wui/_controls.scss

@@ -676,6 +676,8 @@ textarea.form-control.autosize {
     // Tighten the space above the message: .field's 10px gap → effective 8px, without
     // touching the label→control gap.
     margin-top: -2px;
+    // Start-aligned, so a message under a centred container sits under the field's edge, not its middle.
+    text-align: start;
 }
 
 // The message line under a field: the hint and the error share one grid cell, so the error takes
@@ -1069,6 +1071,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     // Soft-filled at rest, white on focus — one shared fill for the whole control so the
     // prefix/suffix and the input body are always the SAME colour combination as the field.
     background: var(--color-field-bg);
+    // Clip the square inner input to the wrapper's rounded corners on hover and focus.
+    overflow: clip;
     transition:
         border-color 0.12s ease,
         background-color 0.12s ease;
@@ -1091,6 +1095,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     border: 0;
     border-radius: 0;
     background: transparent;
+    // The wrapper's focus border is the cue (.input-affixed:focus-within above), so the inner outline would only poke past the corners.
+    outline: none;
 }
 // A select in the affixed shell (AppSelect prefix/suffix): the custom element is the flex
 // item, and its inner .input control already loses its own border through the rule above.
@@ -1250,6 +1256,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     margin-top: 2px;
     font-size: 12px;
     color: var(--color-text-subtle);
+    text-align: start;
 }
 // Character counter — a right-aligned count under the field; turns danger at the limit.
 .field-count {

package/scss/wui/_data.scss

@@ -226,8 +226,12 @@
 .table-ledger tbody tr:focus-within {
     --bs-table-bg-state: var(--color-bg-muted);
 }
+// The identity block is a flex child of its cell: without a zero floor it keeps a long email's full
+// width inside a phone card and the subline's truncation never starts. Column sizing is unaffected,
+// because a min-width of zero lowers no min-content contribution.
 .table-ledger .u-meta {
     gap: 2px;
+    min-width: 0;
 }
 .table-ledger .u-name {
     min-width: 0;

package/scss/wui/_dialog-motion.scss

@@ -10,6 +10,7 @@
 // so the slide never runs underneath it. Close stays Bootstrap's own quick fade of the modal.
 // Side panels (offcanvas, drawers) keep their slide: they come from an edge by nature.
 //
+// The status icon in a dialog header springs in with the dialog (rules below).
 // Imported after menu-motion, whose wui-menu-zoom keyframes it reuses.
 
 :root {
@@ -27,8 +28,97 @@
     animation: var(--wui-dialog-anim) var(--wui-dialog-anim-duration) var(--wui-dialog-anim-ease);
 }
 
+// The three beats of an SVG tone (error) run 600ms end to end and overlap, so the icon reads as
+// one movement. The rules key on position, so a new SVG tone inherits the same beats.
+// The origin is the icon's centre, not the viewBox corner, so every scale grows in place.
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon {
+    display: inline-flex;
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > rect,
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > g {
+    transform-box: view-box;
+    transform-origin: 87px 87px;
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > rect:first-child {
+    animation: wui-dialog-icon-halo 260ms var(--wui-ease-out) 0ms both;
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > rect:nth-child(2) {
+    animation: wui-dialog-icon-ring 300ms var(--wui-ease-out) 140ms both;
+}
+
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > g {
+    animation: wui-dialog-icon-core 340ms var(--wui-ease-elastic) 260ms both;
+}
+
+// Raster tones get one beat because they have no parts to stage.
+:root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > img {
+    animation: wui-dialog-icon-raster 340ms var(--wui-ease-elastic) 0ms both;
+}
+
+@keyframes wui-dialog-icon-halo {
+    from {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes wui-dialog-icon-ring {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes wui-dialog-icon-core {
+    from {
+        opacity: 0;
+        transform: scale(0.55);
+    }
+    60% {
+        opacity: 1;
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes wui-dialog-icon-raster {
+    from {
+        opacity: 0;
+        transform: scale(0.55);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     :root:not([data-wui-dialog-motion="slide"]) .modal.show .modal-dialog {
         animation: none;
     }
+
+    :root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > svg > :is(rect, g) {
+        animation: none;
+        opacity: 1;
+        transform: none;
+    }
+
+    :root:not([data-wui-dialog-motion="slide"]) .modal.show wui-status-icon > img {
+        animation: none;
+        opacity: 1;
+        transform: none;
+    }
 }

package/scss/wui/_display.scss

@@ -63,6 +63,8 @@
 }
 .kpi-value {
     margin-top: 6px;
+    // A product sets the figure's face with --wui-kpi-value-font-family; unset, it inherits the page font.
+    font-family: var(--wui-kpi-value-font-family, inherit);
     // The value ("main heading") size flows from one var, so a size tier (sm/md/lg,
     // spotlight) or a custom `valueSize` (px) can drive it. Default (md) is 24px.
     font-size: var(--wui-kpi-value-size, 24px);
@@ -188,7 +190,7 @@
 }
 .kpi.kpi-spotlight .kpi-value {
     margin-top: 14px;
-    // No font-family: the value inherits the product's own font like every other tile.
+    // The face comes from --wui-kpi-value-font-family on .kpi-value, as on every other tile.
     // Size comes from --wui-kpi-value-size (36px default, set on the spotlight root above), so a
     // custom `valueSize` (px) can tame a too-large headline.
     line-height: 1;

package/scss/wui/_interaction.scss

@@ -268,9 +268,17 @@ html:has(.form-actions-sticky) {
     .app-tabs-scroll-btn {
         min-width: 44px;
     }
-    wui-select[compact] .search-select-control {
+    wui-select .search-select-control {
         min-height: 44px;
     }
+    .app-tabs-sm .app-tab {
+        min-height: 44px;
+    }
+    // An inline link grows its hit area, not its line: the negative margin pays the padding back.
+    .wui-link {
+        padding-block: var(--wui-space-md);
+        margin-block: calc(-1 * var(--wui-space-md));
+    }
 }
 
 // Touch pointers at any width: the same 44px floor for controls the phone block does not reach.

package/scss/wui/_overlays.scss

@@ -93,7 +93,15 @@
     max-height: calc(100vh - 40px);
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    // clip, not hidden: hidden makes the card a scroll container, so a focused control near its foot scrolled the card, not .wui-modal-body.
+    overflow: clip;
+}
+// The document gutter is reserved (html, body in _components.scss) and AppModal locks the page itself
+// (ui-react lib/pageScrollLock.js), so the modal manager's scrollbar padding on body only bares a strip of
+// page beside the backdrop. Bootstrap and react-bootstrap write it inline, which only !important outranks.
+body.modal-open,
+body[data-rr-ui-modal-open] {
+    padding-right: 0 !important;
 }
 // The centred card opens with the shared dialog motion (wui/_dialog-motion.scss: soft zoom by
 // default). Width comes from `size`, which both surfaces resolve to `--wui-modal-max-width` on

package/scss/wui/_pagination.scss

@@ -119,6 +119,16 @@
 }
 // A finger needs a 44px target: the pager's controls grow to the control height on a phone.
 @media (max-width: 575.98px) {
+    // On a phone the parts spread across the row and the page buttons take their own centred line.
+    .table-pagination {
+        justify-content: space-between;
+        gap: var(--wui-space-sm) var(--wui-space-md);
+        padding: var(--wui-space-md);
+    }
+    .tpg-nav {
+        flex-basis: 100%;
+        justify-content: center;
+    }
     .select.tpg-select {
         height: var(--wui-control-md);
         min-height: var(--wui-control-md);

package/scss/wui/_shell-parts.scss

@@ -246,6 +246,23 @@
     color: var(--color-text-body);
     font-weight: var(--wui-fw-medium);
 }
+.wui-usermenu-extra {
+    margin-top: var(--wui-space-xxs);
+    font-size: var(--wui-fs-xs);
+    line-height: var(--wui-lh-body);
+    color: var(--color-text-muted);
+}
+// 6px is the menu's row gap: no token sits between xs and sm, so it is the two below it.
+.wui-usermenu-section {
+    margin-bottom: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    padding-bottom: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-usermenu-foot {
+    margin-top: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    padding-top: var(--wui-space-sm);
+    border-top: 1px solid var(--color-border);
+}
 .wui-usermenu-logout {
     margin: 0;
 }

package/scss/wui/_shell.scss

@@ -222,6 +222,15 @@
 .app-shell.no-sidebar .app-footer {
     left: 0;
 }
+// Below lg the drawer and the phone tab bar carry the navigation, so the topbar menu waits for lg.
+.app-shell.wui-shell-top .wui-shell-top-nav {
+    display: none;
+}
+.wui-shell-top-brand {
+    display: flex;
+    align-items: center;
+    flex: none;
+}
 
 // Sticky always makes a stacking context, so without a z-index here the page content after the
 // sidebar paints over anything the sidebar lets out, such as an open workspace switcher menu.
@@ -715,6 +724,21 @@
     display: none;
 }
 @include media-breakpoint-up(lg) {
+    .app-shell.wui-shell-top {
+        grid-template-columns: 1fr;
+    }
+    .app-shell.wui-shell-top .app-sidebar,
+    .app-shell.wui-shell-top .app-sidebar-toggle {
+        display: none;
+    }
+    .app-shell.wui-shell-top .app-footer {
+        left: 0;
+    }
+    .app-shell.wui-shell-top .wui-shell-top-nav {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
     .app-shell.collapsed .app-nav-item[data-label]::after {
         content: attr(data-label);
         position: absolute;

package/scss/wui/_utilities.scss

@@ -725,6 +725,10 @@
 // They read the --color-*-strong aliases, not --wui-*-strong, because dark mode remaps the
 // aliases to the lifted fills: the deep fills sink into the dark track (about 2:1). The label
 // flips to a dark ink there (--color-progress-label), which clears AA on all five dark fills.
+// The product's own primary, for a bar that tracks a brand action.
+.wui-progress-primary {
+    background-color: var(--color-primary);
+}
 .wui-progress-info {
     background-color: var(--color-info-strong);
 }

package/scss/wui/_workspace.scss

@@ -121,6 +121,18 @@
     height: 32px;
     padding: 0;
 }
+// A finger needs a 44px target: the small and compact switchers grow on a phone or a touch screen.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .workspace-switcher-sm .workspace-switcher-trigger {
+        min-height: 44px;
+    }
+    .workspace-switcher-trigger.is-compact,
+    .workspace-switcher-sm .workspace-switcher-trigger.is-compact {
+        width: 44px;
+        height: 44px;
+        min-height: 44px;
+    }
+}
 .workspace-switcher-sm .workspace-switcher-mark {
     width: 24px;
     height: 24px;