@webority/theme 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "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

@@ -170,9 +170,9 @@
 // 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.
+// Medium (default): 15px / 600, 24px side padding, 22px squircle radius, 45px tall.
 .btn {
-    --bs-btn-border-radius: var(--wui-radius);
+    --bs-btn-border-radius: 22px;
     --bs-btn-font-size: 0.9375rem;
     --bs-btn-font-weight: 600;
     --bs-btn-padding-x: 1.5rem;
@@ -180,10 +180,10 @@
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 14px, 18px side padding, 8px radius, 35px tall.
+// Small: 14px, 18px side padding, 17px squircle radius (proportional to md), 35px tall.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
-    --bs-btn-border-radius: var(--wui-radius-sm);
+    --bs-btn-border-radius: 17px;
     --bs-btn-font-size: 0.875rem;
     --bs-btn-padding-x: 1.125rem;
     display: inline-flex;
@@ -191,10 +191,10 @@
     justify-content: center;
     min-height: 35px;
 }
-// Large: 17px, 32px side padding, 14px radius, 55px tall — a spacious CTA.
+// Large: 17px, 32px side padding, 27px squircle radius (proportional to md), 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-border-radius: 27px;
     --bs-btn-font-size: 1.0625rem;
     --bs-btn-padding-x: 2rem;
     display: inline-flex;

package/scss/wui/_choice.scss

@@ -894,7 +894,8 @@ button.datepicker-month:hover {
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     // Clip the inner control to the shell's rounded shape — a full-height child was painting
     // over the squircle border at the bottom, which read as a cut-off bottom edge. The dial
     // dropdown is position:fixed, so it is unaffected by this.
@@ -907,10 +908,10 @@ button.datepicker-month:hover {
     background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
-// Match AppInput's focus: a soft primary border, not a full-strength one.
+// Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap: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);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -998,6 +999,20 @@ button.datepicker-month:hover {
     font-weight: 500;
     color: var(--color-text);
 }
+// Country-adornment toggles (AppPhoneNumberInput showFlag / showDialCode). Driven
+// by a host attribute so it survives <wui-phone>'s innerHTML re-renders; the flex
+// gap collapses on its own, leaving no gap where a hidden glyph sat.
+.app-phone-number-input wui-phone[hide-flag] [data-flag] {
+    display: none;
+}
+.app-phone-number-input wui-phone[hide-dial] [data-dial] {
+    display: none;
+}
+// Both hidden → the country toggle is just the chevron; drop its leading pad so
+// the number sits flush like a plain input's.
+.app-phone-number-input wui-phone[hide-flag][hide-dial] .phone-country-adornment {
+    padding-left: 10px;
+}
 
 // Menu, search field and rows all share the .search-select language so the
 // country picker reads as the same component family as every other picker.

package/scss/wui/_controls.scss

@@ -999,7 +999,8 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     transition:
         border-color 0.12s,
         background-color 0.12s;
@@ -1010,8 +1011,8 @@ wui-select[compact] {
     border-color: var(--color-border-strong);
 }
 .num-wrap: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);
 }
 .num-wrap:has(.num-input.error) {
     border-color: var(--color-danger);
@@ -1019,25 +1020,34 @@ wui-select[compact] {
 
 // Numeric input inside the stepper — plain text field, no native spinner.
 // Flows seamlessly between the stepper buttons; the wrapper carries the border.
+// The value reads as the segmented centre cell — centred + semibold like the
+// reference: minus | value | plus, three even cells divided by the button borders.
 .num-wrap .num-input {
     flex: 1;
     border: none;
     border-radius: 0;
     background: transparent;
     min-width: 0;
+    text-align: center;
+    font-weight: 600;
+    color: var(--color-text);
 }
 .num-wrap .num-input:focus {
     box-shadow: none;
 }
 
 // Stepper buttons — decrease/increase the value by step.
-// Positioned left and right of the input, disabled at min/max or when the
-// control is disabled.
+// Positioned left (minus, :first-child) and right (plus, :last-child) of the
+// input; disabled at min/max or when the control is disabled. Each carries the
+// divider on its input-facing edge so the value sits in its own segment.
 .num-btn {
     display: grid;
     place-items: center;
-    width: 40px;
-    height: 100%;
+    width: 44px;
+    // Fill the field height and centre the glyph. `height: 100%` resolved to auto
+    // against the wrap's content-based height and left the button icon-tall, pinned
+    // to the top; align-self:stretch fills the full field so place-items centres it.
+    align-self: stretch;
     border: none;
     background: transparent;
     padding: 0;
@@ -1064,10 +1074,32 @@ wui-select[compact] {
     cursor: not-allowed;
     opacity: 0.5;
 }
-.num-btn:not(:first-child) {
+// Segment dividers: minus divides on its right, plus on its left — so the value
+// cell is bounded on both sides. (DOM order is minus, input, [unit], plus on both
+// surfaces, so :first-child / :last-child land on the two buttons.)
+.num-btn:first-child {
+    border-right: 1px solid var(--color-border);
+}
+.num-btn:last-child {
     border-left: 1px solid var(--color-border);
 }
 
+// ── Size variants ── the inner input carries .input-sm / .input-lg (height +
+// font), the wrapper carries .num-wrap-sm / .num-wrap-lg to scale the button
+// cells to match. Default (md) uses the base 44px cell above.
+.num-wrap-sm .num-btn {
+    width: 36px;
+}
+.num-wrap-sm .num-input {
+    font-size: 13px;
+}
+.num-wrap-lg .num-btn {
+    width: 52px;
+}
+.num-wrap-lg .num-input {
+    font-size: 16px;
+}
+
 // Affix (unit) in the num-wrap — a trailing pill after the input.
 .num-wrap .affix {
     background: var(--color-bg-muted);

package/scss/wui/_display.scss

@@ -63,7 +63,9 @@
 }
 .kpi-value {
     margin-top: 6px;
-    font-size: 28px;
+    // 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 28px.
+    font-size: var(--wui-kpi-value-size, 28px);
     font-weight: 700;
     // Large numerals need negative tracking to stop reading as separate digits;
     // tabular figures stop a live-updating value from shifting width.
@@ -133,17 +135,29 @@
     background: var(--color-warning-soft);
 }
 
+// Compact size — dense dashboards and tight cards. Shrinks the value + chrome.
+.kpi.kpi-sm {
+    padding: 12px 14px;
+    --wui-kpi-value-size: 22px;
+}
+.kpi.kpi-sm .kpi-label {
+    font-size: 12px;
+}
+.kpi.kpi-sm .kpi-icon {
+    width: 32px;
+    height: 32px;
+    margin-bottom: 8px;
+}
+
 // Hero size — the single headline stat above a dashboard. Enlarges the value and its
 // chrome; orthogonal to variant/inline/attention, so it composes with all of them.
 .kpi.kpi-lg {
     padding: 20px;
+    --wui-kpi-value-size: 40px;
 }
 .kpi.kpi-lg .kpi-label {
     font-size: 14px;
 }
-.kpi.kpi-lg .kpi-value {
-    font-size: 40px;
-}
 .kpi.kpi-lg .kpi-icon {
     width: 44px;
     height: 44px;
@@ -158,6 +172,7 @@
     grid-template-columns: minmax(0, 1fr) auto;
     column-gap: 16px;
     padding: 22px 24px;
+    --wui-kpi-value-size: 44px;
 }
 .kpi.kpi-spotlight .kpi-icon {
     grid-column: 2;
@@ -183,8 +198,9 @@
     // The editorial serif is this variant's signature (see the reference tile), so the value gets
     // a serif stack directly — not --wui-font-display, which defaults to the body sans and so would
     // never read as serif. A product that wants its own face overrides this one selector.
+    // Size comes from --wui-kpi-value-size (44px default, set on the spotlight root above), so a
+    // custom `valueSize` (px) can tame a too-large headline.
     font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
-    font-size: 44px;
     line-height: 1;
     font-weight: 600;
 }

package/scss/wui/_flow.scss

@@ -830,16 +830,24 @@ wui-wizard-step[hidden] {
     // A resting min-height so the footer doesn't jump as steps of different length
     // swap in; content taller than this simply grows the panel.
     min-height: 96px;
+    // A rounded squircle card around the step content. The surface (border + fill +
+    // padding) is what makes the radius visible — a radius on a border/background-less
+    // box shows nothing.
+    padding: 20px 24px;
+    border: 1px solid var(--color-border);
+    border-radius: 22px;
+    corner-shape: squircle;
+    background: var(--color-surface);
 }
 .wizard-footer {
-    // The sticky Back/Skip/Next/Finish bar — pinned to the bottom of a scrolling flow
-    // so the actions (and the Skip on an optional step) are always in reach. Runs flush on
-    // the flow (no divider or fill) — the buttons alone read as the footer.
-    position: sticky;
-    bottom: 0;
+    // The Back/Skip/Next/Finish bar sits at the END of the wizard content — NOT
+    // viewport-pinned. A transparent sticky bar (the old behaviour) pinned to the
+    // viewport bottom collided with a page/app footer below the wizard, burying the
+    // buttons behind it. Inline keeps them in the flow, always clear of a page footer.
+    // (For a wizard inside its OWN fixed-height scroll panel, a product can opt back
+    // into sticky on its container.)
     margin-top: 24px;
     padding: 16px 0;
-    z-index: 1;
 }
 .wizard-footer-actions {
     display: flex;

package/scss/wui/_media.scss

@@ -527,16 +527,23 @@
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
-    background: var(--color-surface);
+    // Match AppInput: muted resting fill, lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     overflow: hidden;
     cursor: pointer;
     transition:
         border-color 0.12s,
         box-shadow 0.12s;
 }
-.file-input:hover {
+.file-input:hover:not(:focus-within) {
+    background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
+.file-input:focus-within {
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
+    box-shadow: none;
+}
 .file-input-btn {
     display: inline-flex;
     align-items: center;
@@ -579,21 +586,25 @@
     width: 100%;
     padding: 20px;
     text-align: center;
-    background: var(--color-bg-subtle);
-    border: 1px dashed var(--color-border-strong);
+    // Match AppInput: muted resting fill + resting border (dashed kept as the dropzone
+    // affordance), border-strong on hover, primary border + surface lift on focus/drag.
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border);
     transition:
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
-// Hover, focus and drag-over all take the same soft primary-30% border AppInput shows on
-// focus — a clear hue shift from the resting grey dashed border, without the loud full
-// --color-primary the dropzone used before.
-.file-input.file-input-tall:hover,
+// Hover mirrors AppInput hover — border-strong, fill unchanged.
+.file-input.file-input-tall:hover:not(:focus-within):not(.dragging) {
+    border-color: var(--color-border-strong);
+    background: var(--color-bg-muted);
+}
+// Focus and drag-over mirror AppInput focus — soft primary border, lift onto a clean surface.
 .file-input.file-input-tall:focus-within,
 .file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    background: var(--color-bg-muted);
+    border-color: var(--wui-primary-30);
+    background: var(--color-surface);
     box-shadow: none;
 }
 // A rejected file (wrong type / too large) turns the dropzone border danger to match the
@@ -639,11 +650,11 @@
 .file-input.file-input-tall.has-files:hover,
 .file-input.file-input-tall.has-files:focus-within {
     border-color: var(--color-border-strong);
-    background: var(--color-bg-subtle);
+    background: var(--color-bg-muted);
 }
 .file-input.file-input-tall.has-files.dragging {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    background: var(--color-bg-muted);
+    border-color: var(--wui-primary-30);
+    background: var(--color-surface);
 }
 // Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
 // dropzone to a fixed width instead of the full column. Mirror of the datepicker .date-w-* set.

package/scss/wui/_overlays.scss

@@ -15,8 +15,15 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    background: var(--color-scrim);
+    // Frost the page behind the dialog — the blur is the star, so the dim is kept
+    // SOFT (a heavy scrim would flatten the blur into a muddy grey). A lighter dim
+    // over a strong blur reads as clean frosted glass; the modal is still clearly
+    // the one live surface. The dialog sits in `.modal` (a higher z-index sibling),
+    // so it is never blurred.
+    background: color-mix(in srgb, var(--color-scrim) 55%, transparent);
     z-index: var(--wui-z-modal-backdrop);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
 }
 .modal.wui-modal-shell {
     --bs-modal-bg: transparent;

package/scss/wui/_typography.scss

@@ -68,8 +68,17 @@
 }
 .chip-ic {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
     color: var(--color-text-subtle);
 }
+// Bootstrap Icons carry a -.125em baseline nudge meant for inline-with-text use;
+// inside the chip's flex row it just drops the glyph below the label's centre.
+// Reset it so a library-icon leading glyph lines up with the label.
+.chip-ic .bi::before {
+    vertical-align: middle;
+}
 .chip-avatar {
     display: inline-flex;
     width: 18px;