@webority/theme 0.80.8 → 0.80.9

package/package.json

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

@@ -267,9 +267,17 @@
   --color-warning-strong: var(--color-warning-text);
 
   --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
+  --color-success-5: color-mix(in srgb, var(--wui-success) 8%, transparent);
+  --color-success-10: color-mix(in srgb, var(--wui-success) 12%, transparent);
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
+  --color-warning-5: color-mix(in srgb, var(--wui-warning) 8%, transparent);
+  --color-warning-10: color-mix(in srgb, var(--wui-warning) 12%, transparent);
   --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
+  --color-danger-5: color-mix(in srgb, var(--wui-danger) 8%, transparent);
+  --color-danger-10: color-mix(in srgb, var(--wui-danger) 12%, transparent);
   --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+  --color-info-5: color-mix(in srgb, var(--wui-info) 8%, transparent);
+  --color-info-10: color-mix(in srgb, var(--wui-info) 12%, transparent);
   // The -50 border tone: the light hex would glow on a dark page, so it becomes a translucent
   // mix of the vivid tone that reads as a border on the dark tint.
   --color-success-50: color-mix(in srgb, var(--wui-success) 45%, transparent);

package/scss/wui/_avatar-picker.scss

@@ -68,8 +68,8 @@
     bottom: 0;
     display: grid;
     place-items: center;
-    width: calc(max(28px, var(--wui-avatar-size) * 0.3));
-    height: calc(max(28px, var(--wui-avatar-size) * 0.3));
+    width: calc(max(22px, calc(var(--wui-avatar-size) * 0.3)));
+    height: calc(max(22px, calc(var(--wui-avatar-size) * 0.3)));
     border: 2px solid var(--color-surface);
     border-radius: 50%;
     background: var(--color-primary);

package/scss/wui/_chart-card.scss

@@ -25,6 +25,10 @@
 .wui-chart-card .card-header-actions {
     gap: 4px;
 }
+.wui-chart-card > .card-footer {
+    font-size: 12.5px;
+    color: var(--color-text-muted);
+}
 .wui-chart-card-tool[aria-pressed="true"] {
     background: var(--color-primary-soft);
     color: var(--color-primary-ink);

package/scss/wui/_chat.scss

@@ -76,7 +76,7 @@ wui-chat[position="start"] .wui-chat-panel {
 }
 
 // The question box starts one line tall, as tall as Send beside it, and grows with its text
-// up to a few lines. It overrides the textarea's 120px minimum and uneven padding.
+// up to a few lines. Its padding is equal top and bottom, so one line of text sits centred in it.
 .wui-chat-composer .form-control {
     min-height: var(--wui-control-height);
     max-height: 9rem;

package/scss/wui/_choice.scss

@@ -38,7 +38,8 @@
 
 // A card that cannot change: its input is disabled directly or by a disabled fieldset.
 .struct-card:has(.struct-card-input:disabled) {
-    cursor: default;
+    opacity: 0.55;
+    cursor: not-allowed;
 }
 .struct-card:has(.struct-card-input:disabled):hover {
     border-color: var(--color-border);
@@ -258,7 +259,7 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
-.search-select-control:hover:not(:disabled):not(.open):not([aria-invalid="true"]) {
+.search-select-control:hover:not(:disabled):not(.open):not([aria-invalid="true"]):not(:has(.search-select-ac-input:disabled)):not([aria-disabled="true"]) {
     // Not while open — an open control keeps its active (primary) border, not the grey hover one.
     // Not while invalid — an errored control (aria-invalid mirrored from the host) holds its red
     // border on hover rather than reverting to the grey hover one.

package/scss/wui/_controls.scss

@@ -418,7 +418,6 @@
 .textarea,
 textarea.form-control {
     height: auto;
-    min-height: 120px;
     padding: 12px 15px 16px;
     line-height: 1.5;
     resize: vertical;
@@ -442,7 +441,7 @@ textarea.form-control.autosize {
 .form-select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open):not([aria-expanded="true"]):not(
         .phone-input-wrap > .input
-    ),
+    ):not(:has(.search-select-ac-input:disabled)):not([aria-disabled="true"]),
 .select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .textarea:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-field-bg);
@@ -1290,7 +1289,8 @@ wui-select[compact] {
 .field > .file-input,
 .field > .file-preview,
 .field > .field-error,
-.field > .wui-field-message {
+.field > .wui-field-message,
+.field > .wui-score-scale {
     align-self: stretch;
 }
 // A file picker fills its column by default (align-self:stretch fills the field on the cross
@@ -1825,7 +1825,8 @@ wui-otp {
 // Invalid — soft danger border on a clean surface, mirroring AppInput's .error (danger
 // at 30%, no ring), not a solid alarm box.
 .field-error ~ .otp .otp-slot,
-.otp.error .otp-slot {
+.otp.error .otp-slot,
+wui-otp[aria-invalid="true"] .otp-slot {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
     box-shadow: none;
@@ -1849,11 +1850,19 @@ wui-otp {
     display: flex;
     align-items: center;
     gap: 12px;
-    position: relative;
     user-select: none;
     height: 36px;
     min-width: 200px;
 }
+// The value label sits beside the rail, so the fill and thumbs measure the track alone.
+.wui-slider-rail {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    min-width: 0;
+}
 // One continuous pill: the filled part runs up to the thumb in the primary accent, the
 // rest stays the neutral border tone.
 .slider-track {
@@ -1864,8 +1873,8 @@ wui-otp {
     border-radius: 999px;
     cursor: pointer;
 }
-// The fill and the thumbs are siblings of the track, positioned against .slider, so each
-// centres itself on the track's midline rather than inheriting the container's height.
+// The fill and the thumbs are positioned against the rail, so each centres itself on the
+// track's midline rather than inheriting the container's height.
 .slider-fill {
     position: absolute;
     top: 50%;

package/scss/wui/_display.scss

@@ -811,7 +811,9 @@ a.info-row:hover .info-value {
     font-size: 12.5px;
     color: var(--color-text-muted);
 }
-.timeline-at,
+.timeline-at {
+    color: var(--color-text-subtle);
+}
 .timeline-time {
     color: var(--color-text-subtle);
     font-variant-numeric: tabular-nums;
@@ -1497,6 +1499,10 @@ a.info-row:hover .info-value {
 .wui-link:hover {
     color: var(--color-primary-ink);
 }
+.wui-link.wui-link--surface-dark,
+.wui-link.wui-link--surface-dark:hover {
+    color: var(--color-on-scrim);
+}
 .wui-link:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 3px;

package/scss/wui/_flow.scss

@@ -307,10 +307,10 @@ button.step.done:focus-visible .step-circle {
     flex: 0 1 auto;
 }
 .stepper-journey .step-line {
-    flex: 1 1 32px;
-    min-width: 24px;
+    flex: 1 1 8px;
+    min-width: 8px;
     height: 2px;
-    margin: 0 16px;
+    margin: 0 8px;
     border-radius: 999px;
     background: var(--color-border-strong);
 }
@@ -1264,6 +1264,35 @@ wui-wizard-step[hidden] {
 .wizard-stepper {
     margin-bottom: 24px;
 }
+// The rail sits beside the panel and footer, so it stays in view while a long step scrolls.
+// A hidden step list (hide-stepper) keeps the stacked layout, so the panel never sits beside an empty column.
+@include media-breakpoint-up(md) {
+    wui-wizard:has(> .stepper-vertical:not([hidden])) {
+        display: grid;
+        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
+        column-gap: 32px;
+        align-items: start;
+    }
+    wui-wizard:has(> .stepper-vertical:not([hidden])) > * {
+        grid-column: 2;
+    }
+    wui-wizard:has(> .stepper-vertical:not([hidden])) > .wui-wizard-topbar {
+        grid-column: 1 / -1;
+    }
+    wui-wizard:has(> .stepper-vertical:not([hidden])) > .stepper-vertical {
+        grid-column: 1;
+        grid-row: span 2;
+        margin-bottom: 0;
+        position: sticky;
+        top: 16px;
+    }
+    wui-wizard:has(> .wui-wizard-topbar):has(> .stepper-vertical:not([hidden])) > .stepper-vertical {
+        grid-row: 2 / span 2;
+    }
+    wui-wizard:has(> .wui-wizard-topbar):has(> .stepper-vertical:not([hidden])) > wui-wizard-step {
+        margin-top: 16px;
+    }
+}
 // The optional bar above the stepper (`top-bar`): the title at the start, then the step count and the
 // close button at the end.
 .wui-wizard-topbar {

package/scss/wui/_groups.scss

@@ -46,11 +46,14 @@
 .wui-split-button .btn:focus-visible {
     z-index: 2;
 }
+.wui-split-button > .btn.btn-text:first-child {
+    padding-inline-end: 0.5rem;
+}
 
 // ── Input group ──
 .wui-addon-group {
     display: flex;
-    align-items: stretch;
+    align-items: flex-start;
     width: 100%;
 }
 .wui-addon-group > * {
@@ -78,15 +81,24 @@
     white-space: nowrap;
 }
 .wui-addon-group-sm .wui-addon {
-    min-height: 35px;
+    min-height: var(--wui-control-height-sm);
     padding-inline: 0.75rem;
     font-size: 0.75rem;
 }
 .wui-addon-group-lg .wui-addon {
-    min-height: 55px;
+    min-height: var(--wui-control-height-lg);
     padding-inline: 1.25rem;
     font-size: 1rem;
 }
+.wui-addon-group > .btn {
+    height: var(--wui-control-height);
+}
+.wui-addon-group-sm > .btn {
+    height: var(--wui-control-height-sm);
+}
+.wui-addon-group-lg > .btn {
+    height: var(--wui-control-height-lg);
+}
 
 // Square the sides that meet, and let the shared border overlap.
 .wui-addon-group > :not(:first-child),

package/scss/wui/_inline-edit.scss

@@ -25,7 +25,7 @@
     align-items: center;
     gap: 6px;
     min-width: 0;
-    max-width: 100%;
+    max-width: calc(100% + 12px);
     min-height: 32px;
     // The text lines up with its neighbours; only the hover tint reaches past it.
     margin-inline: -6px;

package/scss/wui/_media.scss

@@ -1056,6 +1056,9 @@
 .set-uploader[aria-busy="true"] {
     cursor: progress;
 }
+.set-uploader[aria-busy="true"] .set-uploader-logo {
+    visibility: hidden;
+}
 .set-uploader-hint {
     margin: 12px 0 0;
     max-width: 240px;

package/scss/wui/_navigation.scss

@@ -397,6 +397,9 @@
     flex: 1 1 0;
     justify-content: center;
 }
+.app-tabs-wrap > .app-tabs-fitted {
+    flex: 1 1 auto;
+}
 
 // Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
 // renders server-side. React composes the strip and its panels itself.
@@ -651,7 +654,7 @@
 .search-field,
 .search-input {
     width: 100%;
-    padding-left: 40px;
+    padding-left: calc(13px + var(--wui-search-icon-size, 18px) + 9px);
     padding-right: 36px;
 }
 .search-clear {
@@ -746,7 +749,7 @@
 // track the height so they stay centred and clear of the text.
 .search-wrap.search-sm .search-input {
     height: var(--wui-control-height-sm);
-    padding-left: 34px;
+    padding-left: calc(13px + var(--wui-search-icon-size, 12px) + 9px);
     padding-right: 32px;
     font-size: 13px;
 }
@@ -761,7 +764,7 @@
 }
 .search-wrap.search-lg .search-input {
     height: var(--wui-control-height-lg);
-    padding-left: 46px;
+    padding-left: calc(13px + var(--wui-search-icon-size, 24px) + 9px);
     padding-right: 40px;
     font-size: 16px;
 }

package/scss/wui/_notification-center.scss

@@ -16,19 +16,19 @@
 // White on the strong danger fill, ringed in the surface colour so it reads as sitting on the bell.
 .wui-notification-center-count {
     position: absolute;
-    top: 2px;
-    right: 0;
-    box-sizing: content-box;
+    top: -2px;
+    right: -2px;
+    box-sizing: border-box;
     min-width: 18px;
     height: 18px;
-    padding: 0 5px;
+    padding: 0 3px;
     border: 2px solid var(--color-surface);
     border-radius: 999px;
     background: var(--color-danger-strong);
     color: var(--color-progress-label);
     font-size: 11px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 14px;
     text-align: center;
     pointer-events: none;
 }

package/scss/wui/_overlays.scss

@@ -570,7 +570,7 @@
 // Fills that carry white text use the AA-cleared -strong tokens; warning stays dark-on-yellow.
 .tooltip.wui-tooltip.tone-dark {
     --wui-tooltip-bg: var(--color-text);
-    --wui-tooltip-color: #fff;
+    --wui-tooltip-color: var(--color-bg);
     --wui-tooltip-border: transparent;
 }
 .tooltip.wui-tooltip.tone-primary {

package/scss/wui/_sections.scss

@@ -228,6 +228,12 @@
     filter: none;
     opacity: 1;
 }
+.wui-section-logo-text {
+    font-family: inherit;
+    font-weight: 600;
+    color: var(--color-text-subtle);
+    font-size: var(--wui-fs-lg);
+}
 
 // ── Testimonials ──
 .wui-section-testimonials-list {

package/scss/wui/_shell-parts.scss

@@ -244,19 +244,19 @@
 // reads as sitting on the bell rather than touching it.
 .wui-bell-count {
     position: absolute;
-    top: 2px;
-    right: 0;
-    box-sizing: content-box;
+    top: -2px;
+    right: -2px;
+    box-sizing: border-box;
     min-width: 18px;
     height: 18px;
-    padding: 0 5px;
+    padding: 0 3px;
     border: 2px solid var(--color-surface);
     border-radius: 999px;
     background: var(--color-danger-strong);
     color: var(--color-progress-label);
     font-size: 11px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 14px;
     text-align: center;
 }
 .wui-bell-count[hidden] {

package/scss/wui/_shell.scss

@@ -797,21 +797,31 @@
 [data-density="compact"] .app-content {
     --app-content-padding-top: 12px;
 }
-// The skip link is the shell's first stop. It stays off screen until it takes focus, and being
+// The skip link is the shell's first stop. It stays visually hidden until it takes focus, and being
 // absolutely placed it takes no cell of the shell's grid.
 .wui-skip-link {
     position: absolute;
     top: 8px;
     left: 8px;
     z-index: var(--wui-z-fixed);
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
     padding: 8px 12px;
     border-radius: var(--wui-radius);
     background: var(--color-surface);
     color: var(--color-text);
-    transform: translateY(-200%);
+}
+.wui-skip-link:focus,
+.wui-skip-link:focus-visible {
+    width: auto;
+    height: auto;
+    clip-path: none;
+    overflow: visible;
 }
 .wui-skip-link:focus-visible {
-    transform: none;
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
 }

package/scss/wui/_typography.scss

@@ -301,6 +301,18 @@
     cursor: text;
     padding-right: 8px;
 }
+.search-select-ac:has(.search-select-ac-input:disabled) {
+    background: var(--color-border);
+    border-color: transparent;
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.search-select-multi[aria-disabled="true"] {
+    background: var(--color-border);
+    border-color: transparent;
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
 .search-select-ac-input {
     flex: 1 1 auto;
     min-width: 0;

package/scss/wui/_utilities.scss

@@ -693,6 +693,17 @@
     }
 }
 
+.wui-progress-labelled {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.wui-progress-label {
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+    line-height: 1.3;
+}
+
 // ── Spinner / shimmer ──
 .wui-spinner {
     width: 18px;
@@ -726,7 +737,7 @@
     position: relative;
     overflow: hidden;
     display: block;
-    background: var(--color-bg-muted);
+    background: var(--color-border);
     border-radius: var(--radius-sm);
 }
 .skeleton::after {