@webority/theme 0.7.6 → 0.7.8

package/scss/wui/_controls.scss

@@ -191,6 +191,11 @@
 // deltas on top of Bootstrap's $input-* vars: shared control height, hover
 // fill, brand-border focus (no glow), soft invalid border.
 //
+// Soft-filled resting look (per the field design reference): the field rests on a
+// muted fill with a barely-there border, then lifts to a white surface + brand
+// border + a soft focus ring on focus. "Filled" is the same resting look with a
+// value; the state ladder is default/filled → hover → focus → disabled → error.
+//
 // Keep shell utilities (.input-wrap, .input-icon, .input-sm, …) — those are
 // structure, not a parallel visual system.
 .form-control,
@@ -204,7 +209,7 @@
     padding: 12px;
     border-radius: var(--radius);
     border: 1px solid var(--color-border);
-    background: var(--color-surface);
+    background: var(--color-bg-muted);
     font-size: 14px;
     line-height: 1.5;
     color: var(--color-text);
@@ -246,7 +251,7 @@ textarea.form-control.autosize {
 // Hover/error guards: without them the hover fill repaints over an invalid border.
 .form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .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),
+.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open),
 .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-bg-muted);
@@ -258,10 +263,11 @@ textarea.form-control.autosize {
 .select:focus,
 .textarea:focus {
     outline: none;
-    background-color: var(--color-bg-muted);
+    // Lift off the muted resting fill onto a clean white surface while active.
+    background-color: var(--color-surface);
     color: var(--color-text);
-    // Full-strength brand border is the focus cue (no glow) — WCAG 2.2 SC 1.4.11.
-    border-color: var(--color-primary);
+    // Soft brand border is the focus cue (per the reference) — no ring/shadow.
+    border-color: var(--wui-primary-30);
     box-shadow: none;
 }
 .form-control::placeholder,
@@ -297,8 +303,10 @@ textarea.form-control.autosize {
 .input:disabled,
 .select:disabled,
 .textarea:disabled {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    // A touch deeper than the resting fill so a disabled field stays distinct now that
+    // the resting state is itself filled (per the reference's disabled field).
+    background: color-mix(in srgb, var(--color-bg-muted) 72%, var(--color-border));
+    border-color: transparent;
     color: var(--color-text-subtle);
     cursor: not-allowed;
 }
@@ -350,7 +358,9 @@ textarea.form-control.autosize {
 .input.error:focus,
 .textarea.error:focus {
     background: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+    // Soft danger border (danger at 30%, mirroring the primary-30 focus border) — no ring,
+    // so the field reads as a quiet error, not a solid alarm box.
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
     box-shadow: none;
     // Kill Bootstrap's default invalid SVG + extra padding when .is-invalid is used.
     background-image: none;
@@ -618,17 +628,23 @@ textarea.form-control.autosize {
     width: 100%;
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
-    background: var(--color-surface);
-    transition: border-color 0.12s ease;
+    // 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-bg-muted);
+    transition:
+        border-color 0.12s ease,
+        background-color 0.12s ease;
 }
 .input-affixed:hover:not(:focus-within) {
     border-color: var(--color-border-strong);
 }
 .input-affixed:focus-within {
-    border-color: var(--color-primary);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .input-affixed:has(.input.error) {
-    border-color: var(--color-danger);
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 .input-affixed .input {
     flex: 1;
@@ -641,7 +657,9 @@ textarea.form-control.autosize {
     display: flex;
     align-items: center;
     padding: 0 12px;
-    background: var(--color-bg-muted);
+    // Transparent so the affix inherits the wrapper fill — the addon and the input read as
+    // one continuous surface (only the separator border divides them).
+    background: transparent;
     color: var(--color-text-subtle);
     font-size: 14px;
     white-space: nowrap;
@@ -669,19 +687,27 @@ textarea.form-control.autosize {
     transform: translateY(-50%);
     transform-origin: left center;
     margin: 0;
-    padding: 0 4px;
+    padding: 0 6px;
+    // Rounded so the background mask reads as a soft pill sitting on the border, not a sharp
+    // rectangle. Invisible at rest (label fill == field fill); only shows once it floats up.
+    border-radius: var(--radius-sm);
     max-width: calc(100% - 24px);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 14px;
     color: var(--color-text-subtle);
-    background: var(--color-surface);
+    // The floated label sits ON the top border, so its background masks the border under the
+    // text. It MUST match the field's own fill, or the mask reads as a separate patch. The
+    // resting/filled fill is --color-bg-muted (a white notch on the grey fill was the tell); it
+    // only lifts to --color-surface on focus/invalid, matched below.
+    background: var(--color-bg-muted);
     pointer-events: none;
     transition:
         top 0.15s var(--wui-ease-ui),
         transform 0.15s var(--wui-ease-ui),
-        color 0.15s var(--wui-ease-ui);
+        color 0.15s var(--wui-ease-ui),
+        background-color 0.12s;
 }
 .field-float .input:focus ~ .float-label,
 .field-float .input:not(:placeholder-shown) ~ .float-label {
@@ -694,6 +720,14 @@ textarea.form-control.autosize {
 .field-float .input.error ~ .float-label {
     color: var(--color-danger-text);
 }
+// Track the field's fill: it lifts to --color-surface while focused or invalid, so the label
+// mask follows to stay seamless in those states too.
+.field-float .input:focus ~ .float-label,
+.field-float .input.error ~ .float-label,
+.field-float .input.is-invalid ~ .float-label,
+.field-float .input[aria-invalid="true"] ~ .float-label {
+    background: var(--color-surface);
+}
 // Floating label for AppSelect — the trigger is a <button>, so there is no
 // :placeholder-shown to key off. :has() raises the label when the control is
 // focused/open, or once a value is chosen (the label span drops
@@ -707,6 +741,9 @@ textarea.form-control.autosize {
 .field-float:has(.search-select-control:focus) .float-label,
 .field-float:has(.search-select-control.open) .float-label {
     color: var(--color-primary);
+    // The control turns white while focused/open, so the label mask follows (a filled-but-closed
+    // select keeps the default muted mask, matching its muted resting fill).
+    background: var(--color-surface);
 }
 
 .hint,
@@ -859,22 +896,24 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
+    // one wrapper fill, same colour combination as every other field.
+    background: var(--color-bg-muted);
     transition:
         border-color 0.12s,
         background-color 0.12s;
     overflow: hidden;
 }
 .input-with-unit:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
 .input-with-unit:focus-within {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .input-with-unit:has(.num-input.error) {
-    border-color: var(--color-danger);
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 
 // Numeric inputs are plain text fields — no native spinner, no stepper. The
@@ -889,7 +928,8 @@ wui-select[compact] {
     box-shadow: none;
 }
 .input-with-unit .unit {
-    background: var(--color-bg-muted);
+    // Transparent so the pill inherits the wrapper fill — one continuous surface.
+    background: transparent;
     border: none;
     border-left: 1px solid var(--color-border);
     padding: 9px 14px;
@@ -1311,7 +1351,7 @@ wui-otp {
     background-color: var(--color-primary);
     border: 2px solid var(--color-surface);
     border-radius: 50%;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--wui-shadow-thumb);
     cursor: pointer;
     transition:
         background-color 0.15s ease,
@@ -1319,7 +1359,7 @@ wui-otp {
         border-color 0.15s ease;
 }
 .slider-thumb:hover:not(:disabled) {
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--wui-shadow-thumb-hover);
 }
 .slider-thumb:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1342,6 +1382,7 @@ wui-otp {
     white-space: nowrap;
 }
 
+// Dark mode: slider shadows need light ink for visibility.
 // Size variants
 .slider-sm {
     height: 28px;

package/scss/wui/_data.scss

@@ -230,6 +230,10 @@
     background: var(--color-bg-muted);
     color: var(--color-text);
 }
+.wui-expand-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .wui-expand-toggle .bi {
     transition: transform 0.18s var(--wui-ease-out-quart, ease);
 }
@@ -429,6 +433,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.tpg-arrow:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 // Text-5 already reads as "unavailable" — no opacity dimming on top of it.
 .tpg-arrow:disabled {
     color: var(--color-border-strong);
@@ -460,6 +468,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.tpg-page:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .tpg-page.is-active {
     background: var(--color-primary);
     color: var(--color-primary-text);
@@ -627,6 +639,10 @@
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
     color: var(--color-primary);
 }
+.u-action:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .u-action:disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -729,6 +745,10 @@
     cursor: pointer;
     user-select: none;
 }
+.table th.sortable:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
 .table th.sortable .sort-icon {
     // Reserved space so the header does not jump width when the arrow appears.
     display: inline-block;

package/scss/wui/_media.scss

@@ -127,7 +127,7 @@
     padding: 0 4px;
     border-radius: 999px;
     background: var(--color-danger);
-    color: #fff;
+    color: var(--wui-bg-light);
     font-size: 10px;
     font-weight: 700;
     line-height: 1;
@@ -312,6 +312,14 @@
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
 }
+// The hidden input is a sibling of the label (not a descendant), so :focus-within on
+// .attach-drop never fires — reach the label through the general sibling combinator instead.
+.attach-drop:has(+ input:focus-visible) {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .attach-drop-icon {
     flex: 0 0 auto;
     width: 36px;

package/scss/wui/_navigation.scss

@@ -42,7 +42,9 @@
     height: 100vh;
     background: var(--color-surface);
     border-left: 1px solid var(--color-border);
-    z-index: 200;
+    // Same rung as the mobile sidebar drawer — the highest shell-chrome rung below
+    // the modal ladder, so this panel is never trapped under sticky/fixed shell chrome.
+    z-index: var(--wui-z-shell-drawer);
     transform: translateX(100%);
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
@@ -58,7 +60,7 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
-    z-index: 150;
+    z-index: var(--wui-z-shell-scrim);
 }
 .drawer-backdrop.open {
     opacity: 1;

package/scss/wui/_overlays.scss

@@ -329,46 +329,275 @@
     font-weight: 500;
 }
 
+// ── Tooltip ──
+// Both surfaces render Bootstrap's .tooltip / .tooltip-inner (React via react-bootstrap
+// <Tooltip>, Razor via Bootstrap's own tooltip JS). The wrappers tag the tooltip element with
+// `wui-tooltip` (React className, Razor data-bs-custom-class), so this design lands on App
+// tooltips only and never on a raw Bootstrap one. Every colour flows --wui-tooltip-* →
+// Bootstrap's own --bs-tooltip-* vars, so the arrow (which Bootstrap paints from
+// --bs-tooltip-bg) always tracks the body. Customisation seam: override a --wui-tooltip-* var
+// from a caller className for any colour, or add a tone-* class for a preset.
+//
+// The --wui-tooltip-* defaults sit at ZERO specificity (:where) so a caller's own single class
+// (or inline style) overrides them; the tone presets are ordinary (0,3,0) rules that win over
+// the defaults but lose to nothing a caller would reasonably write.
+:where(.tooltip.wui-tooltip) {
+    --wui-tooltip-bg: var(--color-surface);
+    --wui-tooltip-color: var(--color-text);
+    --wui-tooltip-border: var(--color-border-light);
+    --wui-tooltip-radius: var(--radius, 10px);
+    --wui-tooltip-shadow: var(--wui-shadow-overlay);
+    // Size is these four vars — the `md` default. A size-* class swaps them; a caller can
+    // override any one from its own className for a fully custom size.
+    --wui-tooltip-max-width: 240px;
+    --wui-tooltip-font-size: 0.8125rem;
+    --wui-tooltip-padding-y: 7px;
+    --wui-tooltip-padding-x: 11px;
+}
+.tooltip.wui-tooltip {
+    --bs-tooltip-bg: var(--wui-tooltip-bg);
+    --bs-tooltip-color: var(--wui-tooltip-color);
+    --bs-tooltip-max-width: var(--wui-tooltip-max-width);
+    --bs-tooltip-border-radius: var(--wui-tooltip-radius);
+    --bs-tooltip-font-size: var(--wui-tooltip-font-size);
+    --bs-tooltip-padding-y: var(--wui-tooltip-padding-y);
+    --bs-tooltip-padding-x: var(--wui-tooltip-padding-x);
+    --bs-tooltip-opacity: 1;
+}
+.tooltip.wui-tooltip .tooltip-inner {
+    // Padding + font-size come from the --bs-tooltip-* vars above (driven by --wui-tooltip-*),
+    // so a size-* class or a custom var resizes the tip without touching this rule.
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: left;
+    border: 1px solid var(--wui-tooltip-border);
+    box-shadow: var(--wui-tooltip-shadow);
+}
+
+// Size presets — swap the four size vars. `md` is the :where default (no class).
+.tooltip.wui-tooltip.size-sm {
+    --wui-tooltip-max-width: 200px;
+    --wui-tooltip-font-size: 0.75rem;
+    --wui-tooltip-padding-y: 4px;
+    --wui-tooltip-padding-x: 8px;
+}
+.tooltip.wui-tooltip.size-lg {
+    --wui-tooltip-max-width: 300px;
+    --wui-tooltip-font-size: 0.9375rem;
+    --wui-tooltip-padding-y: 10px;
+    --wui-tooltip-padding-x: 14px;
+}
+// A hairline shadow so the light default's white arrow still reads on a white page; on a tinted
+// tone the arrow is coloured and this just adds subtle depth.
+.tooltip.wui-tooltip .tooltip-arrow {
+    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--color-text) 14%, transparent));
+}
+
+// Tone presets — swap the three colour vars; the arrow follows --bs-tooltip-bg automatically.
+// 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-border: transparent;
+}
+.tooltip.wui-tooltip.tone-primary {
+    --wui-tooltip-bg: var(--color-primary);
+    --wui-tooltip-color: var(--color-primary-text);
+    --wui-tooltip-border: transparent;
+}
+.tooltip.wui-tooltip.tone-success {
+    --wui-tooltip-bg: var(--wui-success-strong);
+    --wui-tooltip-color: #fff;
+    --wui-tooltip-border: transparent;
+}
+.tooltip.wui-tooltip.tone-danger {
+    --wui-tooltip-bg: var(--wui-danger-strong);
+    --wui-tooltip-color: #fff;
+    --wui-tooltip-border: transparent;
+}
+.tooltip.wui-tooltip.tone-warning {
+    --wui-tooltip-bg: var(--color-warning);
+    --wui-tooltip-color: var(--color-text);
+    --wui-tooltip-border: transparent;
+}
+
 // ── Toast (notifications) ──
-// Bootstrap toast styling + wui extensions for title/action buttons.
-// Used by both React AppToastContainer and Razor WUI.toast.
+// Surface-card toasts shared by React <AppToast/> and Razor <app-toast>/WUI.toast: an elevated
+// card with a left accent bar + variant icon, an auto-dismiss progress bar (pauses on hover/focus),
+// and swipe-to-dismiss. The variant tint drives one custom prop so every part stays in step.
 
-// Toast header with title
-.wui-toast-header {
+.wui-toast-container {
+    z-index: var(--wui-z-toast);
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 10px;
+    max-width: min(92vw, 400px);
+}
+
+.wui-toast {
+    --wui-toast-accent: var(--color-primary);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
     gap: 12px;
-    padding: 10px 12px;
-    border: none;
+    width: 100%;
+    padding: 14px 14px 14px 18px;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border-light);
+    border-radius: var(--radius-lg, 12px);
+    box-shadow: var(--wui-shadow-overlay);
+    overflow: hidden;
+    touch-action: pan-y;
+    user-select: none;
+    transition:
+        transform 0.2s ease,
+        opacity 0.2s ease;
+    animation: wui-toast-in 0.24s ease;
 }
 
-.wui-toast-header strong {
-    font-size: 14px;
+// The left accent bar reads the variant tint.
+.wui-toast::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 4px;
+    background: var(--wui-toast-accent);
+}
+
+// While a swipe is in progress the toast follows the pointer with no transition.
+.wui-toast--dragging {
+    transition: none;
+    cursor: grabbing;
+}
+
+.wui-toast--success {
+    --wui-toast-accent: var(--color-success);
+}
+.wui-toast--info {
+    --wui-toast-accent: var(--color-info);
+}
+.wui-toast--warning {
+    --wui-toast-accent: var(--color-warning);
+}
+.wui-toast--error,
+.wui-toast--danger {
+    --wui-toast-accent: var(--color-danger);
+}
+
+.wui-toast-icon {
+    flex: none;
+    display: inline-flex;
+    margin-top: 1px;
+    color: var(--wui-toast-accent);
+    line-height: 1;
+}
+
+.wui-toast-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.wui-toast-title {
+    font-size: 0.9375rem;
     font-weight: 600;
-    color: inherit;
+    color: var(--color-text);
 }
 
-// Toast action button — inherits text color from the variant tone. Scoped to the
-// component class, not every .btn-link a consumer might place in a toast body.
-.toast .wui-toast-action {
-    color: inherit;
+.wui-toast-message {
+    font-size: 0.875rem;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+}
+
+// Action button — tinted with the variant accent, scoped to the toast so it never
+// restyles an arbitrary .btn-link a rich body might contain.
+.wui-toast-action {
+    flex: none;
+    align-self: center;
+    color: var(--wui-toast-accent);
     text-decoration: none;
-    font-size: 13px;
-    font-weight: 500;
+    font-size: 0.8125rem;
+    font-weight: 600;
     padding: 2px 8px;
     white-space: nowrap;
+}
+.wui-toast-action:hover {
+    color: var(--wui-toast-accent);
+    text-decoration: underline;
+}
+.wui-toast-action:focus-visible {
+    outline: 2px solid var(--wui-toast-accent);
+    outline-offset: 2px;
+}
+
+.wui-toast-close {
     flex: none;
-    opacity: 0.9;
-    transition: opacity 150ms;
+    margin-top: 1px;
+    font-size: 0.65rem;
 }
 
-.toast .wui-toast-action:hover {
-    opacity: 1;
-    text-decoration: underline;
+// A pure-CSS auto-dismiss countdown: the bar shrinks over the toast's duration; the JS side
+// listens for animationend to remove it. Because :hover/:focus-within pause the animation,
+// animationend cannot fire while the toast is being read — a self-synchronising timer.
+.wui-toast-progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+    transform-origin: left center;
+    background: var(--wui-toast-accent);
+    opacity: 0.5;
+    animation-name: wui-toast-countdown;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+}
+.wui-toast:hover .wui-toast-progress,
+.wui-toast:focus-within .wui-toast-progress {
+    animation-play-state: paused;
 }
 
-.toast .wui-toast-action:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+// "+N more" chip when the stack exceeds maxVisible.
+.wui-toast-more {
+    align-self: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-subtle);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-light);
+    border-radius: 999px;
+    padding: 2px 12px;
+    box-shadow: var(--wui-shadow-overlay);
+}
+
+@keyframes wui-toast-countdown {
+    from {
+        transform: scaleX(1);
+    }
+    to {
+        transform: scaleX(0);
+    }
+}
+
+@keyframes wui-toast-in {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    // Drop the entrance slide; the countdown bar stays — it is the auto-dismiss timer, not decoration.
+    .wui-toast {
+        animation: none;
+        transition: none;
+    }
 }