@webority/theme 0.127.0 → 0.129.0

package/scss/_wui-components.scss

@@ -36,6 +36,7 @@
 @import "wui/navigation";
 @import "wui/nav-list";
 @import "wui/card";
+@import "wui/card-options";
 @import "wui/empty-state";
 @import "wui/data";
 @import "wui/pagination";
@@ -89,6 +90,7 @@
 @import "wui/filter-popover";
 @import "wui/metric-strip";
 @import "wui/due-date";
+@import "wui/cell";
 
 // Country flags are NOT part of this aggregate. The 245 `.wui-flag-*` rules are about 187KB raw
 // (38KB Brotli) of inlined SVG, and most sites never render a phone field or country picker.
@@ -96,15 +98,16 @@
 // <wui-phone> and <wui-country-select> show an empty grey box where the flag should be.
 @import "wui/shell";
 @import "wui/shell-parts";
+@import "wui/account-switcher";
 @import "wui/dock";
 @import "wui/consent-banner";
 @import "wui/file-viewer";
 @import "wui/lightbox";
 @import "wui/toolbar";
 @import "wui/theme-toggle";
+@import "wui/auth-layout";
 @import "wui/tree";
 @import "wui/floating";
-@import "wui/chat";
 @import "wui/code-block";
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
 @import "wui/command-palette";
@@ -114,6 +117,9 @@
 @import "wui/hover-card";
 @import "wui/notification-center";
 @import "wui/whats-new";
+// Before field-floor, which restates the font sizes the size steps set.
+@import "wui/field-busy";
+@import "wui/field-sizes";
 // After every component partial: restates each field's own font size with a 16px floor on touch screens.
 @import "wui/field-floor";
 // After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.

package/scss/_wui-core.scss

@@ -28,6 +28,7 @@
 @import "wui/navigation";
 @import "wui/nav-list";
 @import "wui/card";
+@import "wui/card-options";
 @import "wui/empty-state";
 @import "wui/data";
 @import "wui/pagination";
@@ -75,6 +76,7 @@
 @import "wui/filter-popover";
 @import "wui/metric-strip";
 @import "wui/due-date";
+@import "wui/cell";
 
 // Country flags are NOT part of this layer. The 245 `.wui-flag-*` rules are about 187KB raw
 // (38KB Brotli) of inlined SVG, and most sites never render a phone field or country picker.
@@ -82,10 +84,12 @@
 // <wui-phone> and <wui-country-select> show an empty grey box where the flag should be.
 @import "wui/shell";
 @import "wui/shell-parts";
+@import "wui/account-switcher";
 @import "wui/consent-banner";
 @import "wui/lightbox";
 @import "wui/toolbar";
 @import "wui/theme-toggle";
+@import "wui/auth-layout";
 @import "wui/floating";
 @import "wui/code-block";
 @import "wui/context-menu";
@@ -93,6 +97,9 @@
 @import "wui/hover-card";
 @import "wui/notification-center";
 @import "wui/whats-new";
+// Before field-floor, which restates the font sizes the size steps set.
+@import "wui/field-busy";
+@import "wui/field-sizes";
 // After every component partial: restates each field's own font size with a 16px floor on touch screens.
 @import "wui/field-floor";
 // After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.

package/scss/wui/_account-switcher.scss

@@ -0,0 +1,70 @@
+// Account switcher: shared by React <AppAccountSwitcher> and Razor <app-account-switcher>.
+// Rows are Bootstrap dropdown items inside the shell's user menu (.wui-usermenu-menu, see
+// _shell-parts.scss), so they inherit that menu's padding and hover. Every rule here is scoped
+// under .wui-account-switcher so it wins over Bootstrap's .dropdown-item specificity.
+
+.wui-account-switcher {
+    padding-block: var(--wui-space-xxs);
+}
+
+.wui-account-switcher-label {
+    padding: var(--wui-space-sm);
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+}
+
+.wui-account-switcher-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 40vh;
+    overflow-y: auto;
+}
+
+.wui-account-switcher .wui-account-switcher-option {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+}
+
+.wui-account-switcher-option-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.wui-account-switcher-option-name {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-account-switcher-option-note {
+    display: block;
+    overflow: hidden;
+    font-size: var(--wui-fs-xs);
+    color: var(--color-text-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-account-switcher-badge {
+    flex: none;
+    padding: var(--wui-space-xxs) var(--wui-space-sm);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+}
+
+// The current account keeps its tint through hover, so the tick is never the only cue.
+.wui-account-switcher .wui-account-switcher-option.is-active,
+.wui-account-switcher .wui-account-switcher-option.is-active:hover {
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+}
+
+.wui-account-switcher-tick {
+    flex: none;
+    color: var(--color-primary-text);
+}

package/scss/wui/_auth-layout.scss

@@ -0,0 +1,77 @@
+// ── Auth layout ──
+// AppAuthLayout / <app-auth-layout>: a sign-in page, centred by default. The form panel sits in
+// the middle of the page; `.wui-auth-split` (variant="split") adds an aside on the right from the
+// lg tier up, and below lg the aside is hidden so the form is alone and centred.
+//   <div class="wui-auth wui-auth-centred|wui-auth-split">
+//     <div class="wui-auth-main"><div class="wui-auth-panel">logo, body, footer</div></div>
+//     <aside class="wui-auth-aside">…</aside>
+// The aside follows the form in the DOM and sits on the right; nothing reorders it.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-auth {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: var(--wui-auth-min-height, 100dvh);
+    background: var(--color-bg);
+    color: var(--color-text);
+}
+
+.wui-auth-main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    padding: var(--wui-space-xl) var(--wui-space-lg);
+}
+
+.wui-auth-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-xl);
+    width: 100%;
+    max-width: var(--wui-auth-width, 420px);
+}
+
+.wui-auth-logo {
+    display: flex;
+    justify-content: center;
+}
+.wui-auth-logo img,
+.wui-auth-logo svg {
+    max-width: 100%;
+    max-height: 48px;
+    height: auto;
+}
+
+.wui-auth-body {
+    padding: var(--wui-space-xl);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    background: var(--color-surface);
+}
+
+.wui-auth-footer {
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-sm);
+    text-align: center;
+}
+
+.wui-auth-aside {
+    display: none;
+}
+
+@include media-breakpoint-up(lg) {
+    .wui-auth-split {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .wui-auth-split .wui-auth-aside {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        padding: var(--wui-space-3xl);
+        background: var(--color-primary-soft);
+        color: var(--color-text);
+    }
+}

package/scss/wui/_card-options.scss

@@ -0,0 +1,45 @@
+// Card options: `flush` (content runs to the card's rounded corners) and `divided`
+// (a rule under the header).
+//
+// Part of the wui-components layer, see _wui-components.scss for the load
+// order. This partial loads directly after `wui/card`, because its padding
+// rules must win over the header rule in _card.scss.
+
+// A consumer class can set --wui-card-divider-color to retune the rule.
+.card {
+    --wui-card-divider-color: var(--color-border);
+}
+
+// The card's own border-radius clips the content, so a table or image keeps the corners.
+.card-flush {
+    overflow: hidden;
+}
+
+// A 1px hairline stays raw: it is a rule, not a spacing or type value.
+.card-divided > .card-header {
+    border-bottom: 1px solid var(--wui-card-divider-color);
+}
+// _card.scss removes the body's top padding under any header. A divided card keeps the
+// body's padding step, so each padding class restores its own value here.
+.card-divided > .card-header + .card-body {
+    padding-top: var(--bs-card-spacer-y);
+}
+.card-pad-sm.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-md);
+}
+.card-pad-lg.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-xl);
+}
+.card-pad-none.card-divided > .card-header + .card-body {
+    padding-top: 0;
+}
+.card-compact.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-lg);
+}
+
+// Last, so it wins every tie: flush clears the body only, as `.card-pad-none` does.
+// The header and footer keep their padding.
+.card.card-flush > .card-body,
+.card.card-flush > .card-header + .card-body {
+    padding: 0;
+}

package/scss/wui/_card.scss

@@ -46,11 +46,13 @@
 }
 // 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.
-.card-title {
+// A product sets its title type with --wui-card-title-font-family, -fs, -fw and -lh.
+.card-title,
+.result-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/_cell.scss

@@ -0,0 +1,56 @@
+// ── Cell ──
+// AppCell / <app-cell>: one table or list cell with a primary line and an optional secondary line.
+// Markup contract, shared by both surfaces and the rules below:
+//
+// Component:  React AppCell        Razor <app-cell>
+// Props:      primary    string|node   Razor: attribute `primary`, or the tag child content when `primary` is absent
+//             secondary  string|node   Razor: attribute `secondary`; absent or empty draws no second line
+//             href       string        when set the primary is an <a>, else a <span>
+//             mono       bool, false   monospace on the primary line only
+//             numeric    bool, false   right-aligned, tabular digits, both lines
+//             className  string        React; Razor uses plain `class`
+// Markup (identical on both surfaces, class order fixed):
+//   <div class="wui-cell [wui-cell-numeric] [wui-cell-mono] [extra]" data-wui="AppCell">
+//     <a|span class="wui-cell-primary" [href="..."]>PRIMARY</a|span>
+//     <span class="wui-cell-secondary">SECONDARY</span>      (omitted when no secondary)
+//   </div>
+// Empty primary (null, undefined, "" and no child content) draws the placeholder "-" (React EMPTY_PLACEHOLDER from ../lib/emptyValue, Razor EmptyValue.Placeholder).
+// 0 is real data and draws as "0".
+// Classes (all new, all wui-*): wui-cell, wui-cell-primary, wui-cell-secondary, wui-cell-numeric, wui-cell-mono
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-cell {
+    display: block;
+    min-width: 0;
+    line-height: var(--wui-lh-heading);
+}
+
+.wui-cell-primary {
+    display: block;
+    font-weight: var(--wui-fw-medium);
+    color: var(--color-text);
+}
+
+a.wui-cell-primary {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.wui-cell-secondary {
+    display: block;
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+}
+
+.wui-cell-numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.wui-cell-mono > .wui-cell-primary {
+    font-family: var(--wui-font-mono);
+}

package/scss/wui/_choice.scss

@@ -336,13 +336,6 @@
     font-size: 16px;
     border-radius: var(--wui-field-lg-radius);
 }
-// xl: the 52px select, the same height as an AppInput at size="xl". A literal height, as on the input.
-.wui-search-select-xl .search-select-control {
-    height: 52px;
-    min-height: 52px;
-    font-size: 16px;
-    border-radius: var(--wui-field-lg-radius);
-}
 // Multi-select grows with its chips, so a size sets the FLOOR (min-height from the rule
 // above) but never a fixed height — reset height:auto so a second row of chips can appear.
 .search-select-sm .search-select-multi,
@@ -1238,7 +1231,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 +1270,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

@@ -479,15 +479,6 @@
     font-size: 16px;
     border-radius: var(--wui-field-lg-radius);
 }
-// xl (size="xl"): the 52px control for large forms. A literal height, because the control-height
-// ladder stops at 44px and its tokens live in the theme's token file. A floating label needs no
-// rule of its own: it centres on the field's box, so it stays inside at 52px.
-.wui-input-xl {
-    height: 52px;
-    padding: 9px 16px;
-    font-size: 16px;
-    border-radius: var(--wui-field-lg-radius);
-}
 .textarea,
 textarea.form-control {
     height: auto;
@@ -676,6 +667,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
@@ -915,8 +908,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     --wui-input-icon-size: 14px;
     --wui-input-icon-gap: 10px;
 }
-.input-icon:has(> .input-lg),
-.input-icon:has(> .wui-input-xl) {
+.input-icon:has(> .input-lg) {
     --wui-input-icon-slot: 48px;
     --wui-input-icon-size: 18px;
     --wui-input-icon-gap: 14px;
@@ -1069,6 +1061,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 +1085,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 +1246,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 {
@@ -1470,9 +1467,6 @@ wui-select[compact] {
 .input-with-unit .num-input.input-lg {
     height: calc(var(--wui-control-lg) - 2px);
 }
-.input-with-unit .num-input.wui-input-xl {
-    height: calc(52px - 2px);
-}
 .input-with-unit .num-input:focus {
     box-shadow: none;
 }

package/scss/wui/_data.scss

@@ -97,10 +97,11 @@
 }
 
 // ── Table ──
-// DataTable cell helpers
+// DataTable cell helpers. End-aligned cells use tabular digits so the figures in a column line up.
 .table-ledger .wui-cell-end,
 .table-ledger thead th.wui-cell-end {
     text-align: right;
+    font-variant-numeric: tabular-nums;
 }
 
 // Row expansion (renderExpanded) — a narrow leading toggle column, a chevron that rotates when
@@ -226,8 +227,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;
@@ -1494,6 +1496,15 @@ button.wui-link {
     z-index: 0;
     white-space: var(--wui-link-label-white-space, nowrap);
 }
+// maxLines: the label wraps and stops at that many lines, the clamp drawing the ellipsis. The
+// underline sits 1px inside the label's bottom edge, so overflow: hidden does not clip it.
+.wui-link--clamp .wui-link__label {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wui-link-max-lines, none);
+    overflow: hidden;
+}
 // A link in a table cell may wrap: a nowrap label runs under the pinned actions column.
 .table-ledger td .wui-link__label {
     --wui-link-label-white-space: normal;

package/scss/wui/_field-busy.scss

@@ -0,0 +1,50 @@
+// The busy state of a form field (React loading, Razor loading, <wui-*> loading). Part of the wui-components layer, see _wui-components.scss for load order.
+
+@property --wui-busy-angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+@keyframes wui-field-busy-spin {
+    to {
+        --wui-busy-angle: 360deg;
+    }
+}
+
+.wui-field-busy {
+    cursor: progress;
+    pointer-events: none;
+}
+
+.input.wui-field-busy,
+.textarea.wui-field-busy,
+.form-control.wui-field-busy,
+.select.wui-field-busy {
+    padding-inline-end: var(--wui-space-2xl);
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 18px 18px;
+    background-image:
+        radial-gradient(circle, var(--color-surface) 0 5px, transparent 5.5px),
+        conic-gradient(from var(--wui-busy-angle), transparent 0 30%, var(--color-primary) 30% 100%);
+    animation: wui-field-busy-spin 0.7s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .input.wui-field-busy,
+    .textarea.wui-field-busy,
+    .form-control.wui-field-busy,
+    .select.wui-field-busy {
+        animation: none;
+    }
+}
+
+.form-check-input.wui-field-busy,
+.segmented.wui-field-busy,
+.struct-card.wui-field-busy,
+.choice-chip.wui-field-busy,
+.wui-rating.wui-field-busy,
+.slider.wui-field-busy,
+.otp.wui-field-busy {
+    opacity: var(--wui-disabled-opacity);
+}

package/scss/wui/_field-floor.scss

@@ -39,10 +39,6 @@
         font-size: max(16px, #{$form-select-font-size-lg});
     }
 
-    .wui-input-xl {
-        font-size: max(16px, 16px);
-    }
-
     input,
     textarea,
     select {