@webority/theme 0.13.5 → 0.15.0

package/scss/wui/_controls.scss

@@ -348,7 +348,7 @@ textarea.form-control.autosize {
     background-color: var(--color-surface);
     color: var(--color-text);
     // Soft brand border is the focus cue (per the reference) — no ring/shadow.
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .form-control::placeholder,
@@ -625,6 +625,14 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     color: var(--color-text);
     -webkit-text-fill-color: var(--color-text);
 }
+// ...but -webkit-text-fill-color is inherited by ::placeholder and beats its `color`, so the rule
+// above painted the placeholder as bright as a typed value. Hand the placeholder its own subtle
+// ink back (the same --color-text-subtle every other placeholder uses).
+:root[data-theme="dark"] .form-control.error::placeholder,
+:root[data-theme="dark"] .input.error::placeholder {
+    color: var(--color-text-subtle);
+    -webkit-text-fill-color: var(--color-text-subtle);
+}
 
 // Field-relative wrap for trailing affixes (error icon, password toggle).
 .input-wrap {
@@ -793,9 +801,10 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 .input-affixed:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
-.input-affixed:has(.input.error) {
+.input-affixed:has(.input.error),
+.input-affixed:has(.input[aria-invalid="true"]) {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
@@ -806,9 +815,18 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     border-radius: 0;
     background: transparent;
 }
+// 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.
+.input-affixed > wui-select {
+    flex: 1;
+    min-width: 0;
+}
 .input-affixed .affix {
     display: flex;
     align-items: center;
+    // A one-character affix (₹, $, #) still reads as a box, centred in it, not a sliver.
+    justify-content: center;
+    min-width: 44px;
     padding: 0 12px;
     // Transparent so the affix inherits the wrapper fill — the addon and the input read as
     // one continuous surface (only the separator border divides them).
@@ -993,6 +1011,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 // into a plain div, a grid cell, a table cell — it would still collapse. Being a flex
 // item blockifies it; nothing else does.
 wui-select,
+wui-country-select,
 wui-autocomplete,
 wui-multiselect,
 wui-taginput,
@@ -1010,6 +1029,7 @@ wui-select[compact] {
     width: auto;
 }
 .field > wui-select,
+.field > wui-country-select,
 .field > wui-autocomplete,
 .field > wui-multiselect,
 .field > wui-taginput,
@@ -1069,7 +1089,7 @@ wui-select[compact] {
 }
 .input-with-unit:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .input-with-unit:has(.num-input.error) {
     background: var(--color-surface);
@@ -1142,7 +1162,7 @@ wui-select[compact] {
 }
 .num-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .num-wrap:has(.num-input.error),
 .num-wrap:has(.num-input.is-invalid),
@@ -1512,7 +1532,7 @@ wui-otp {
 // surface fill + soft brand border, no ring.
 .otp-slot.active {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .otp-field:disabled ~ .otp-slots .otp-slot {

package/scss/wui/_display.scss

@@ -407,15 +407,26 @@ a.info-row:hover .info-value {
 // ============================================================================
 // Segmented control — 2–4 mutually-exclusive options shown side by side.
 // The theme toggle (light/dark/system) is the canonical use.
+//
+// The selected segment is an OUTLINED pill: a primary ring over a faint primary tint, with the
+// label in primary. The tint is 8% so the label clears AA on it in both themes (light 5.6:1,
+// dark 4.5:1); a stronger tint drops the dark label under 4.5:1.
 // ============================================================================
+// Each size sets one option height, icon size and note size, so a text, icon or note option in
+// the same control lines up, and the four sizes step evenly: 28 / 32 / 38 / 44px tall overall
+// (the track adds 8px), xl matching the 44px field height. A note option grows past the height.
 .segmented {
+    --segmented-selected-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
+    --segmented-option-h: 24px;
+    --segmented-icon: 13px;
+    --segmented-note: 10px;
     position: relative;
     display: inline-flex;
     gap: 2px;
     padding: 3px;
     border: 1px solid var(--color-border);
     border-radius: 999px;
-    background: var(--color-bg-muted);
+    background: var(--color-surface);
 }
 .segmented-option {
     position: relative;
@@ -423,7 +434,10 @@ a.info-row:hover .info-value {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    padding: 5px 12px;
+    min-height: var(--segmented-option-h);
+    // A small fixed vertical padding: the min-height sets the height, so an icon cannot push
+    // one option taller than its text-only siblings. Only a two-line note option grows.
+    padding: 4px 12px;
     border: 0;
     border-radius: 999px;
     background: transparent;
@@ -432,7 +446,7 @@ a.info-row:hover .info-value {
     font-weight: 600;
     line-height: 1;
     white-space: nowrap;
-    color: var(--color-text-muted);
+    color: var(--color-text);
     cursor: pointer;
     transition:
         background 0.14s ease,
@@ -457,7 +471,7 @@ a.info-row:hover .info-value {
     white-space: nowrap;
 }
 .segmented-option:hover {
-    color: var(--color-text);
+    color: var(--color-primary);
 }
 // A per-option sub-label under the main text — optional, so a segment without one keeps the
 // plain single-line layout above untouched.
@@ -473,20 +487,20 @@ a.info-row:hover .info-value {
     color: inherit;
 }
 .segmented-option-note {
-    font-size: 10px;
+    font-size: var(--segmented-note);
     font-weight: 400;
-    // Inherits the option's current text colour (muted, hover, or white-on-checked) rather
+    // Inherits the option's current text colour (plain, hover, or primary-on-checked) rather
     // than a fixed token, so it always matches without a separate state per variant. No opacity
     // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
     // distinguishes it from the label.
     color: currentColor;
 }
+// Without JS this per-option pill stands in for the sliding thumb below, so it carries the
+// same ring and tint.
 .segmented-option:has(.segmented-input:checked) {
-    background: var(--color-primary);
-    // Token, not fixed white: the pill is always the brand fill, so its label must
-    // contrast with THAT fill, not the page — a light-primary brand overrides
-    // --wui-primary-text to a dark value and this follows automatically.
-    color: var(--color-primary-text);
+    background: var(--segmented-selected-bg);
+    box-shadow: inset 0 0 0 2px var(--color-primary);
+    color: var(--color-primary);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {
@@ -504,21 +518,41 @@ a.info-row:hover .info-value {
     width: 0;
     z-index: 0;
     border-radius: 999px;
-    background: var(--color-primary);
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 32%, transparent);
+    background: var(--segmented-selected-bg);
+    // An inset ring, not a border: a border would add to the width JS measures and sets.
+    box-shadow: inset 0 0 0 2px var(--color-primary);
     opacity: 0;
     pointer-events: none;
 }
 .segmented.is-animated .segmented-thumb {
     opacity: 1;
-    // A spring easing that overshoots a touch and settles — livelier than a flat slide.
+    // A fast ease-out that never overshoots. A spring easing slid the thumb past its target, so
+    // at the first or last segment the ring crossed the track's edge mid-slide. Clipping the
+    // track instead is not an option: it would also clip the options' focus outline.
     transition:
-        transform 0.36s cubic-bezier(0.34, 1.42, 0.5, 1),
-        width 0.36s cubic-bezier(0.34, 1.42, 0.5, 1);
+        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+        width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
 }
-// While the thumb draws the fill, the checked option drops its own background (keeps white text).
+// While the thumb draws the pill, the checked option drops its own (keeps the primary label).
 .segmented.is-animated .segmented-option:has(.segmented-input:checked) {
     background: transparent;
+    box-shadow: none;
+}
+// A two-line note option keeps a little more air inside the ring than a one-line option needs.
+.segmented-option:has(.segmented-option-note) {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+.segmented-option > .wui-icon {
+    flex: none;
+    width: var(--segmented-icon);
+    height: var(--segmented-icon);
+}
+// Borderless (bordered={false} / bordered="false") — the selected pill keeps its tint and primary
+// label but drops the ring, on both the sliding thumb and the no-JS per-option pill.
+.segmented-borderless .segmented-thumb,
+.segmented-borderless .segmented-option:has(.segmented-input:checked) {
+    box-shadow: none;
 }
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
 .segmented-option:has(.segmented-input:checked) .wui-icon {
@@ -526,19 +560,39 @@ a.info-row:hover .info-value {
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .segmented-sm .segmented-thumb,
-.segmented-lg .segmented-thumb {
+.segmented-lg .segmented-thumb,
+.segmented-xl .segmented-thumb {
     top: 3px;
     bottom: 3px;
 }
+.segmented-sm {
+    --segmented-option-h: 20px;
+    --segmented-icon: 12px;
+}
+.segmented-lg {
+    --segmented-option-h: 30px;
+    --segmented-icon: 15px;
+    --segmented-note: 11px;
+}
+.segmented-xl {
+    --segmented-option-h: 36px;
+    --segmented-icon: 17px;
+    --segmented-note: 12px;
+}
 .segmented-sm .segmented-option {
     padding: 4px 9px;
     font-size: 11px;
 }
 .segmented-lg .segmented-option {
     gap: 6px;
-    padding: 8px 16px;
+    padding: 4px 16px;
     font-size: 13px;
 }
+.segmented-xl .segmented-option {
+    gap: 7px;
+    padding: 4px 20px;
+    font-size: 15px;
+}
 // Full width — segments share the row equally (a toggle spanning a card or toolbar).
 .segmented-full {
     display: flex;

package/scss/wui/_flow.scss

@@ -260,11 +260,18 @@ button.step:focus-visible .step-circle {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+// Where connectors are drawn, a step takes only its content's width (and still shrinks to
+// ellipsize its text) and the connector takes the rest, so the rail joins each step to the
+// next. A journey bar without connectors keeps its evenly spread steps.
+.stepper-journey:has(> .step-line) > .step {
+    flex: 0 1 auto;
+}
 .stepper-journey .step-line {
-    flex: none;
-    width: 32px;
+    flex: 1 1 32px;
+    min-width: 24px;
     height: 2px;
-    margin: 0 6px;
+    margin: 0 16px;
+    border-radius: 999px;
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {

package/scss/wui/_media.scss

@@ -552,7 +552,7 @@
 }
 .file-input:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .file-input-btn {
@@ -614,7 +614,7 @@
 .file-input.file-input-tall:focus-within,
 .file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     background: var(--color-surface);
     box-shadow: none;
 }
@@ -664,7 +664,7 @@
     background: var(--color-bg-muted);
 }
 .file-input.file-input-tall.has-files.dragging {
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     background: var(--color-surface);
 }
 // Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
@@ -820,7 +820,9 @@
     gap: 8px;
     padding: 9px 18px;
     background: rgba(255, 255, 255, 0.96);
-    color: var(--color-text);
+    // The pill stays white in every theme, so its ink is fixed too: --color-text flips light in
+    // dark mode and would vanish on the white pill.
+    color: var(--wui-text-heading);
     font-size: 14px;
     font-weight: 600;
     border-radius: 999px;

package/scss/wui/_overlays.scss

@@ -316,18 +316,23 @@
 // keeps a non-square source whole rather than cropping it.
 .wui-confirm-icon img {
     display: block;
-    width: 80px;
-    height: 80px;
+    width: var(--wui-confirm-icon-size, 120px);
+    height: var(--wui-confirm-icon-size, 120px);
     object-fit: contain;
 }
-// Icon size tracks the copy: a title+message dialog keeps the full 80px badge (set on
-// the element), but a lone title (no message) is one line and gets a smaller badge.
-// `.wui-confirm-msg` is a real element rendered only when a message exists, so `:has()`
-// is reliable here; CSS width/height override the SVG's own width/height attributes.
+.wui-confirm-icon svg {
+    width: var(--wui-confirm-icon-size, 120px);
+    height: var(--wui-confirm-icon-size, 120px);
+}
+// Icon size tracks the copy: a title+message dialog keeps the full 120px badge, but a lone
+// title (no message) is one line and gets a smaller badge. `.wui-confirm-msg` is a real
+// element rendered only when a message exists, so `:has()` is reliable here; CSS width/height
+// override the SVG's own width/height attributes. An explicit iconSize / icon-size sets
+// --wui-confirm-icon-size on the badge and wins in both cases.
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg,
 .wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon img {
-    width: 56px;
-    height: 56px;
+    width: var(--wui-confirm-icon-size, 84px);
+    height: var(--wui-confirm-icon-size, 84px);
 }
 .wui-confirm-title {
     margin: 0 0 10px;

package/scss/wui/_shell.scss

@@ -194,8 +194,12 @@
 .app-shell {
     --app-sidebar-w: 260px;
     --app-sidebar-rail-w: 88px;
+    // The sidebar's bottom band, from the rule above the collapse toggle to the sidebar's
+    // bottom edge, is the height of a one-line footer. The rule then continues the footer's
+    // top edge across the shell. The toggle fills what is left after the rule and two gaps.
+    --app-shell-foot-h: 39px;
     // The equal space above (below the rule) and below the collapse toggle.
-    --app-sidebar-toggle-gap: 12px;
+    --app-sidebar-toggle-gap: 4px;
 
     position: relative;
     display: grid;
@@ -552,7 +556,9 @@
     justify-content: center;
     width: 100%;
     position: relative;
-    min-height: var(--wui-control-height);
+    // The band height less the rule and the gaps above and below the toggle, so rule + toggle
+    // + bottom inset add up to exactly --app-shell-foot-h.
+    height: calc(var(--app-shell-foot-h) - 1px - 2 * var(--app-sidebar-toggle-gap));
     // 8px above the rule, the 1px rule, then the same gap below it as under the row.
     margin-top: calc(9px + var(--app-sidebar-toggle-gap));
     padding: 0;