@webority/theme 0.7.7 → 0.7.8

package/package.json

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

@@ -6,14 +6,15 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
-// Default-size buttons match the shared control height so a button next to an
-// input in a filter bar or form row lines up exactly. sm/lg opt out — they are
-// deliberately a different size.
+// Button heights are fixed to the design reference — large 55px, medium 45px,
+// small 35px — via min-height, with the label flex-centred. (These are button-
+// specific and intentionally a touch taller than the shared --wui-control-height
+// input ladder; sm/lg pin their own height in their size blocks below.)
 .btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--wui-control-height);
+    min-height: 45px;
 }
 
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
@@ -37,7 +38,24 @@
     --bs-btn-color: var(--wui-primary-text);
     --bs-btn-hover-color: var(--wui-primary-text);
     --bs-btn-active-color: var(--wui-primary-text);
-    --bs-btn-disabled-color: var(--wui-primary-text);
+}
+
+// Secondary — a soft brand tint (matches the design reference's secondary): a
+// low-alpha wash of the brand rather than an opaque fill, so it reads as a
+// quieter companion to the solid primary. Colour comes from the brand token;
+// only the TRANSPARENCY is taken from the reference — the tint deepens on hover
+// then press. No border (the tint carries the shape). Disabled is the shared
+// neutral-grey state below, like every other variant.
+.btn-secondary {
+    --bs-btn-color: var(--color-primary);
+    --bs-btn-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-primary);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-primary);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
 }
 
 .btn-danger {
@@ -128,11 +146,13 @@
 // instead, reusing the same tokens .input:disabled already uses so a disabled button and
 // a disabled field read as the same state.
 //
-// Excludes .btn-primary and .btn-danger, which already theme their OWN disabled state
-// above (a faded version of their own fill, driven by --bs-btn-disabled-*) — :not() keeps
-// this rule from fighting theirs rather than relying on source order.
-.btn:disabled:not(.btn-primary):not(.btn-danger),
-.btn.disabled:not(.btn-primary):not(.btn-danger) {
+// Applies to EVERY variant except .btn-danger — matching the design reference, where a
+// disabled button of any kind reads as one neutral greyed-out state, not a faded tint of
+// its own colour. (Primary would otherwise fall back to a washed-out indigo, secondary to a
+// faint brand tint.) .btn-danger keeps its own faded-red disabled (defined above), since the
+// reference doesn't cover it and a greyed destructive button loses its warning read.
+.btn:disabled:not(.btn-danger),
+.btn.disabled:not(.btn-danger) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border);
     color: var(--color-text-subtle);
@@ -146,19 +166,160 @@
 // reached them. Re-drive the radius from the tokens — the way the dropdown above
 // already does — so overriding the radius tokens once flows to every control.
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
+// Per-size type + padding scale, matched to the design reference: the three
+// sizes step font-size, horizontal padding and radius together (vertical size
+// comes from --wui-control-height, so a button lines up with an input). Weight
+// is 600 on every rung — buttons read as a deliberate action, not body text.
+// Medium (default): 15px / 600, 24px side padding, 10px radius, 44px tall.
 .btn {
     --bs-btn-border-radius: var(--wui-radius);
+    --bs-btn-font-size: 0.9375rem;
+    --bs-btn-font-weight: 600;
+    --bs-btn-padding-x: 1.5rem;
     // Progressive enhancement only (Chrome/Safari recent). Unsupported engines
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-.btn-sm,
-.btn-group-sm > .btn {
+// Small: 14px, 18px side padding, 8px radius, 35px tall.
+.btn-sm:not(.btn-icon),
+.btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: var(--wui-radius-sm);
+    --bs-btn-font-size: 0.875rem;
+    --bs-btn-padding-x: 1.125rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 35px;
 }
-.btn-lg,
-.btn-group-lg > .btn {
+// Large: 17px, 32px side padding, 14px radius, 55px tall — a spacious CTA.
+.btn-lg:not(.btn-icon),
+.btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: var(--wui-radius-lg);
+    --bs-btn-font-size: 1.0625rem;
+    --bs-btn-padding-x: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 55px;
+}
+
+// ---- Hover animation options (opt-in modifiers) ---------------------
+// Every .btn animates on hover. The DEFAULT is the royal sheen sweep; switch a
+// button to a different feel with a .btn-anim-* modifier, or turn motion off
+// with .btn-anim-none. Every option reads on EVERY variant — the moving layer
+// is tinted from the button's OWN colour (color-mix on currentColor / the
+// resolved --bs-btn fill), so it's a pale sheen on solid fills, a brand shimmer
+// on outline/ghost, a neutral gloss on subtle/light. All snap off under
+// prefers-reduced-motion (below). Icon-only / link-style actions never animate.
+//
+//   (default)         royal angled sheen sweep + a restrained −1px lift
+//   .btn-anim-sheen   the same sheen, named (to override a product default)
+//   .btn-anim-fill    a tint wipes in left→right
+//   .btn-anim-expand  a radial glow blooms from the centre
+//   .btn-anim-glow    a soft colour-matched glow ring + lift
+//   .btn-anim-none    no hover motion
+//
+// Shared plumbing — a clipped, isolated box so a z-index:-1 layer can sit above
+// the fill but below the label; overflow clips it to the squircle corners.
+.btn:not(.btn-icon):not(.u-action) {
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+}
+
+// --- Sheen (default + .btn-anim-sheen): slim angled glossy band sweeps across.
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"])::before,
+.btn-anim-sheen::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    width: 55%;
+    background: linear-gradient(
+        100deg,
+        transparent,
+        color-mix(in srgb, currentColor 16%, transparent),
+        transparent
+    );
+    transform: translateX(-200%) skewX(-18deg);
+    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+    pointer-events: none;
+}
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled)::before,
+.btn-anim-sheen:hover:not(:disabled)::before {
+    transform: translateX(320%) skewX(-18deg);
+}
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled),
+.btn-anim-sheen:hover:not(:disabled) {
+    transform: translateY(-1px);
+}
+
+// --- Fill: a soft currentColor tint wipes in from the left.
+.btn-anim-fill::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: currentColor;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition:
+        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.35s ease;
+    pointer-events: none;
+}
+.btn-anim-fill:hover:not(:disabled)::before {
+    opacity: 0.12;
+    transform: scaleX(1);
+}
+
+// --- Expand: a radial glow blooms from the centre (aspect-ratio keeps it round).
+.btn-anim-expand::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: -1;
+    width: 0;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition:
+        width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.45s ease;
+    pointer-events: none;
+}
+.btn-anim-expand:hover:not(:disabled)::before {
+    width: 250%;
+    opacity: 0.12;
+}
+
+// --- Glow: a soft ring in the button's own fill colour + lift. Opt-in premium
+// look that deliberately steps outside the flat/no-shadow default. Falls back
+// through the resolved --bs-btn fill to currentColor so it works on every variant.
+.btn-anim-glow {
+    transition:
+        box-shadow 0.3s ease,
+        transform 0.3s ease;
+}
+.btn-anim-glow:hover:not(:disabled) {
+    box-shadow: 0 4px 18px
+        color-mix(in srgb, var(--bs-btn-hover-bg, var(--bs-btn-bg, currentColor)) 45%, transparent);
+    transform: translateY(-1px);
+}
+
+// --- None: opt out of hover motion entirely.
+.btn-anim-none::before {
+    display: none;
+}
+.btn-anim-none:hover:not(:disabled) {
+    transform: none;
+    box-shadow: none;
 }
 
 // ---- Dropdown menu (AppDropdown / <app-dropdown>) -------------------
@@ -547,6 +708,15 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
     .shimmer::after {
         animation: none;
     }
+    // Hover animation options: hide the moving layer and drop lift/glow so no
+    // option animates, regardless of which .btn-anim-* is applied.
+    .btn:not(.btn-icon):not(.u-action)::before {
+        display: none;
+    }
+    .btn:not(.btn-icon):not(.u-action):hover:not(:disabled) {
+        transform: none;
+        box-shadow: none;
+    }
 }
 
 // ---- Theme-flipped typography utilities ------------------------------------

package/scss/_tokens.scss

@@ -64,6 +64,10 @@
     --wui-shadow-overlay: #{$wui-shadow-overlay};
     --wui-shadow-overlay-lg: #{$wui-shadow-overlay-lg};
 
+    // Component-specific shadows. Used by slider thumbs and other interactive elements.
+    --wui-shadow-thumb: 0 2px 6px rgba(0, 0, 0, 0.1);
+    --wui-shadow-thumb-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+
     // One height for every form control. Buttons, inputs and selects share form
     // rows, so they must line up — they were 46.8px and 45px, which reads as a
     // misalignment on every filter bar. 44px is also the WCAG touch-target floor.
@@ -186,9 +190,9 @@
     --wui-danger-5: #FEF4F6;
 
     // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
-    --wui-radius-sm: 6px;
-    --wui-radius: 8px;
-    --wui-radius-lg: 12px;
+    --wui-radius-sm: 8px;
+    --wui-radius: 10px;
+    --wui-radius-lg: 14px;
     --wui-radius-xl: 16px;
 
     // ---- Portal dark palette ----------------------------------------
@@ -206,6 +210,10 @@
     --wui-dark-primary: #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
 
+    // Dark mode shadow remaps — lighter shadows (white ink) for visibility on dark surfaces.
+    --wui-dark-shadow-thumb: 0 2px 6px rgba(255, 255, 255, 0.1);
+    --wui-dark-shadow-thumb-hover: 0 2px 12px rgba(255, 255, 255, 0.2);
+
     // ---- Fluid type scale --------------------------------------------
     // clamp(min, preferred, max) so type scales smoothly between viewports instead of
     // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body

package/scss/_wui-aliases.scss

@@ -48,7 +48,8 @@
   --color-info-20: var(--wui-info-20);
   --color-info-10: var(--wui-info-10);
   --color-info-5: var(--wui-info-5);
-  --color-info-strong: var(--color-info-active);
+  // No dedicated --wui-info-strong; active is the deepest info fill.
+  --color-info-strong: var(--wui-info-active);
   --color-info-soft: var(--color-info-10);
   // Use this — never --color-info — when the colour IS the text.
   --color-info-text: var(--wui-info-text);
@@ -60,7 +61,7 @@
   --color-success-20: var(--wui-success-20);
   --color-success-10: var(--wui-success-10);
   --color-success-5: var(--wui-success-5);
-  --color-success-strong: var(--color-success-active);
+  --color-success-strong: var(--wui-success-strong);
   --color-success-soft: var(--color-success-10);
   // Use this — never --color-success — when the colour IS the text.
   --color-success-text: var(--wui-success-text);
@@ -72,7 +73,8 @@
   --color-warning-20: var(--wui-warning-20);
   --color-warning-10: var(--wui-warning-10);
   --color-warning-5: var(--wui-warning-5);
-  --color-warning-strong: var(--color-warning-active);
+  // No dedicated --wui-warning-strong; active is the deepest warning fill.
+  --color-warning-strong: var(--wui-warning-active);
   --color-warning-soft: var(--color-warning-10);
   // Use this — never --color-warning — when the colour IS the text.
   --color-warning-text: var(--wui-warning-text);
@@ -84,7 +86,7 @@
   --color-danger-20: var(--wui-danger-20);
   --color-danger-10: var(--wui-danger-10);
   --color-danger-5: var(--wui-danger-5);
-  --color-danger-strong: var(--color-danger-active);
+  --color-danger-strong: var(--wui-danger-strong);
   --color-danger-soft: var(--color-danger-10);
   // Use this — never --color-danger — when the colour IS the text.
   --color-danger-text: var(--wui-danger-text);
@@ -115,7 +117,14 @@
   --radius-xl: var(--wui-radius-xl);
 }
 
-:root[data-theme="dark"] {
+// Dark mode tokens — shared by manual toggle ([data-theme="dark"], [data-bs-theme="dark"])
+// and automatic detection (@media (prefers-color-scheme: dark) when [data-theme="auto"]).
+// Extracted as a mixin to avoid duplication and ensure byte-identical output.
+@mixin wui-dark-theme {
+  // Token-level remap so every consumer of the shadow tokens flips in ALL dark
+  // paths (manual attributes and the auto media query) without per-component overrides.
+  --wui-shadow-thumb: var(--wui-dark-shadow-thumb);
+  --wui-shadow-thumb-hover: var(--wui-dark-shadow-thumb-hover);
   --color-bg: var(--wui-dark-bg-page);
   --color-bg-subtle: var(--wui-dark-bg-elevated);
   --color-bg-muted: var(--wui-dark-bg-muted);
@@ -170,6 +179,13 @@
   --color-warning-text: var(--wui-warning);
   --color-info-text: var(--wui-info);
 
+  // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
+  // Remap to the bright fills so timeline dots / strong accents stay visible (same as -text).
+  --color-success-strong: var(--wui-success);
+  --color-danger-strong: var(--wui-danger);
+  --color-info-strong: var(--wui-info);
+  --color-warning-strong: var(--wui-warning);
+
   --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
   --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
@@ -179,6 +195,20 @@
   --color-scrim: color-mix(in srgb, black 45%, transparent);
   --color-scrim-strong: color-mix(in srgb, black 62%, transparent);
   --color-on-scrim: var(--wui-bg-light);
+}
 
+// Manual dark mode — set data-theme="dark" and/or data-bs-theme="dark" on <html>
+// to flip both wui and Bootstrap native components together.
+:root[data-theme="dark"],
+:root[data-bs-theme="dark"] {
+  @include wui-dark-theme;
   color-scheme: dark;
 }
+
+// Automatic dark mode — when data-theme="auto", detect system preference and apply dark tokens.
+:root[data-theme="auto"] {
+  @media (prefers-color-scheme: dark) {
+    @include wui-dark-theme;
+    color-scheme: dark;
+  }
+}

package/scss/_wui-components.scss

@@ -35,6 +35,9 @@
 @import "wui/display";
 @import "wui/flow";
 @import "wui/scrollbar";
+// After `navigation`/`overlays`: the switcher restates dropdown-item chrome those partials
+// set, so it has to win on equal specificity.
+@import "wui/workspace";
 
 // Flags belong here because <wui-phone> cannot render without them.
 //

package/scss/wui/_card.scss

@@ -40,9 +40,9 @@
 // ── Variants ──────────────────────────────────────────────────────────────────
 // `default` is the flat surface above. The rest are opt-in visual treatments,
 // chosen by the `variant` prop (React) / attribute (Razor).
+// Flat elevation: no in-page drop shadow — stronger border is the edge cue.
 .card-elevated {
-    border-color: transparent;
-    box-shadow: var(--shadow-md);
+    border-color: var(--color-border-strong);
 }
 .card-outlined {
     border-width: 2px;

package/scss/wui/_choice.scss

@@ -171,12 +171,16 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
-.search-select-control:hover:not(:disabled) {
+.search-select-control:hover:not(:disabled):not(.open) {
+    // Not while open — an open control keeps its active (primary) border, not the grey hover one.
     border-color: var(--color-border-strong);
 }
 .search-select-control.open {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    // White fill + the active/focus border, matching a focused text input (which lifts off the
+    // muted resting fill onto white with a --wui-primary-30 border). Keeps the control seamless
+    // with the open menu and the floated label's white mask.
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -1095,7 +1099,8 @@ button.datepicker-month:hover {
     display: none !important;
 }
 .country-dropdown-item:hover,
-.country-dropdown-item:focus {
+.country-dropdown-item:focus,
+.country-dropdown-item.is-active {
     background: var(--color-primary-soft) !important;
     color: var(--color-primary) !important;
 }
@@ -1120,9 +1125,11 @@ button.datepicker-month:hover {
 // On a tinted row the label must ride the row colour, not stay grey.
 .country-dropdown-item:hover .country-name-text,
 .country-dropdown-item:focus .country-name-text,
+.country-dropdown-item.is-active .country-name-text,
 .country-dropdown-item.selected .country-name-text,
 .country-dropdown-item:hover .country-code-text,
 .country-dropdown-item:focus .country-code-text,
+.country-dropdown-item.is-active .country-code-text,
 .country-dropdown-item.selected .country-code-text {
     color: currentColor;
 }

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;