@webority/theme 0.9.1 → 0.9.3

package/package.json

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

@@ -109,6 +109,25 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Secondary-danger — the destructive counterpart of .btn-secondary: a soft red wash
+// instead of a solid red fill, for a quieter destructive action (e.g. a "Remove" that
+// shouldn't shout like a solid .btn-danger). Mirrors .btn-secondary exactly — low-alpha
+// tint deepening on hover/press, no border — but keyed off the danger tokens. The label
+// uses --wui-danger-text (the AA-safe error red designed to read on a light red tint),
+// not the brighter --color-danger. Disabled falls through to the shared neutral-grey
+// state below (it is not .btn-danger), like .btn-secondary.
+.btn-secondary-danger {
+    --bs-btn-color: var(--wui-danger-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--wui-danger-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--wui-danger-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
+}
+
 // Soft neutral tinted button — a quieter alternative to .btn-light for a secondary
 // action that shouldn't compete with a primary/danger CTA in the same row.
 .btn-subtle {
@@ -177,6 +196,8 @@
 // key the wash and the label off the accent (text) colour so the hue still shows.
 .btn-secondary.is-loading:disabled,
 .btn-secondary.is-loading.disabled,
+.btn-secondary-danger.is-loading:disabled,
+.btn-secondary-danger.is-loading.disabled,
 .btn-ghost.is-loading:disabled,
 .btn-ghost.is-loading.disabled,
 .btn-subtle.is-loading:disabled,

package/scss/wui/_choice.scss

@@ -107,6 +107,12 @@
     opacity: 1;
     transform: scale(1);
 }
+// The tick reads a touch bolder than the icon's default 1.5 hairline, so the confirmation
+// stays crisp at the small top-corner size (CSS beats the glyph's stroke-width attribute;
+// applies on both surfaces since both render the same stroke-based check).
+.struct-card-check svg path {
+    stroke-width: 2.25;
+}
 
 // Tile variant: big centered illustration + label. Opt in with
 // className="struct-card-tile".
@@ -171,8 +177,10 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
-.search-select-control:hover:not(:disabled):not(.open) {
+.search-select-control:hover:not(:disabled):not(.open):not([aria-invalid="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.
     border-color: var(--color-border-strong);
 }
 .search-select-control.open {
@@ -484,7 +492,12 @@
     --wui-datepicker-width: 100%;
 }
 .datepicker.open .datepicker-trigger {
-    background-color: var(--color-field-bg);
+    // While the calendar is open the trigger reads as a focused field — clean white surface, not
+    // the muted resting fill. Opening moves focus INTO the popup, so :focus drops off the trigger;
+    // this .open rule keeps it white (matching .search-select-control.open) instead of snapping
+    // back to grey the moment the dropdown appears. It stays white on close too (_close refocuses
+    // the trigger → :focus), greying only on an outside click that blurs it.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -805,7 +818,8 @@ button.datepicker-month:hover {
     color: var(--color-text-subtle);
 }
 .daterange.open .daterange-trigger {
-    background-color: var(--color-field-bg);
+    // Stay white while the two-month popover is open — see the note on .datepicker.open above.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -906,7 +920,9 @@ button.datepicker-month:hover {
         border-color 0.12s,
         background-color 0.12s;
 }
-.app-phone-number-input .phone-input-wrap:hover:not(:focus-within) {
+// Not while invalid — an errored control holds its red border/fill on hover (the host carries
+// aria-invalid, so scope the hover treatment to a non-invalid host).
+.app-phone-number-input wui-phone:not([aria-invalid="true"]) .phone-input-wrap:hover:not(:focus-within) {
     background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
@@ -1256,7 +1272,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     --wui-timepicker-width: 100%;
 }
 .timepicker.open .timepicker-trigger {
-    background-color: var(--color-field-bg);
+    // Stay white while the time list is open — see the note on .datepicker.open above.
+    background-color: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }

package/scss/wui/_controls.scss

@@ -52,6 +52,23 @@
     user-select: none;
 }
 
+// Checkbox / radio / switch hint & error sit BELOW the label on their own line, indented to
+// align under the label text (past the glyph + gap) — not inline beside it. `.form-check` is a
+// flex row for glyph+label; a full-width flex basis wraps the message to a second line.
+.form-check {
+    flex-wrap: wrap;
+    --wui-check-hint-indent: 28px; // 20px glyph + 8px gap
+}
+.form-switch {
+    --wui-check-hint-indent: 48px; // 40px track + 8px gap
+}
+.form-check > .field-hint,
+.form-check > .field-error {
+    flex-basis: 100%;
+    margin-top: 2px;
+    padding-left: var(--wui-check-hint-indent);
+}
+
 // Glyph — shared by BS form-check-input and the wui-check alias.
 .form-check-input,
 .wui-check,
@@ -299,9 +316,13 @@ textarea.form-control.autosize {
     overflow: hidden;
 }
 // Hover/error guards: without them the hover fill repaints over an invalid border.
+// `:not([aria-expanded="true"])` on the `.input` line: a combobox/dialog trigger whose popup is
+// OPEN (datepicker/date-range/time-picker triggers set aria-expanded on the trigger, but carry
+// their `.open` class on the WRAPPER, not the trigger) must keep its open white fill — without
+// this the resting-hover grey repaints over it the moment the cursor sits on the open trigger.
 .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):not(.open),
+.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open):not([aria-expanded="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);
@@ -1052,7 +1073,9 @@ wui-select[compact] {
         background-color 0.12s;
     overflow: hidden;
 }
-.num-wrap:hover:not(:focus-within) {
+// Not while invalid — an errored control holds its red border/fill on hover rather than
+// reverting to the grey hover one (matches AppInput, whose hover rule excludes the error state).
+.num-wrap:hover:not(:focus-within):not(:has(.num-input.error)):not(:has(.num-input.is-invalid)):not(:has(.num-input[aria-invalid="true"])) {
     background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
@@ -1260,7 +1283,7 @@ wui-select[compact] {
     align-items: center;
     gap: 8px;
     padding: 9px 14px;
-    border: 1.5px solid var(--color-border);
+    border: 1px solid var(--color-border);
     border-radius: 999px;
     font-size: 14px;
     font-weight: 500;
@@ -1286,7 +1309,9 @@ wui-select[compact] {
     pointer-events: none;
 }
 .choice-chip.checked {
-    border-color: var(--color-primary);
+    // Match AppChoiceCard's checked border: a soft primary-30 edge, not the
+    // full-strength primary line (they read as the same selection language).
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }

package/scss/wui/_data.scss

@@ -58,6 +58,19 @@
     align-items: center;
     text-align: center;
     padding: 40px 24px;
+    // An empty ledger still renders its header row, whose nowrap cells can push the
+    // table wider than the viewport, so `.table-wrap` scrolls horizontally with no
+    // data to justify it. This state row spans the full scroll width, so without a
+    // pin the message centres over that width and slides off screen on mobile.
+    // Stick it to the scrollport's left edge and size it to the visible wrap width
+    // (`100cqw`, from the container on `.table-wrap`), so the message stays centred
+    // and fully in view no matter how far the header scrolls. `left: 0` is relative
+    // to the scroll container; on a wide screen `100cqw` equals the content width, so
+    // this is a no-op there.
+    position: sticky;
+    left: 0;
+    width: 100cqw;
+    box-sizing: border-box;
 }
 .tbl-empty-icon {
     display: inline-grid;
@@ -96,10 +109,23 @@
 }
 // The empty state owns its own padding and is not a row you can act on — no
 // cell padding, no border, and no hover fill from .table / .table-ledger.
-.table td.wui-table-empty:has(> .tbl-empty) {
+.table td.wui-table-empty:has(> .tbl-empty),
+.table td.wui-table-empty:has(> .tbl-empty-plain) {
     padding: 0;
     border-bottom: 0;
 }
+// A plain-string empty (no `.tbl-empty` wrapper) — carries the padding the cell
+// used to own, plus the same viewport pin as `.tbl-empty` so it stays on screen
+// when a narrow ledger scrolls horizontally (see the pin note on `.tbl-empty`).
+.tbl-empty-plain {
+    padding: 36px 24px;
+    text-align: center;
+    color: var(--color-text-muted);
+    position: sticky;
+    left: 0;
+    width: 100cqw;
+    box-sizing: border-box;
+}
 .table tbody tr:hover td.wui-table-empty:has(> .tbl-empty),
 .table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
     background: transparent;
@@ -253,6 +279,11 @@
     // class (set --wui-table-pad) without overriding this selector. Bottom padding is now
     // included (was 0) so the last row isn't flush against the card edge.
     padding: var(--wui-table-pad, 20px);
+    // Query container for the empty-state pin below. The header row can force the
+    // ledger wider than the viewport, so on a narrow screen `.table-wrap` scrolls
+    // horizontally; `100cqw` here is the *visible* wrap width regardless of that
+    // scroll, which is what keeps the empty message on screen (see `.tbl-empty`).
+    container-type: inline-size;
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_media.scss

@@ -893,6 +893,10 @@
     border: 1px dashed color-mix(in srgb, var(--color-border-strong) 75%, transparent);
     cursor: pointer;
     transition: border-color 0.18s;
+    // Query container so the overlay can drop its label on a small ring (see the @container
+    // rule after .set-uploader-overlay). container-type also makes the ring the containing
+    // block for the absolute overlay — same role its position:relative already plays.
+    container-type: inline-size;
 }
 .set-uploader-ring:hover,
 .set-uploader:hover .set-uploader-ring,
@@ -925,10 +929,16 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 4px;
+    // Label + gap scale with the ring so a small (sm, 72px) ring's overlay stays legible and
+    // uncramped instead of wrapping a fixed 11px "Update photo" into a tight disc where it
+    // overlaps the initials. Clamped so md/lg land on the same 11px / 4px gap as before.
+    gap: clamp(2px, calc(var(--wui-logo-size) * 0.035), 4px);
+    padding: 0 6%;
     background: var(--color-scrim-strong);
     color: #fff;
-    font-size: 11px;
+    font-size: clamp(9px, calc(var(--wui-logo-size) * 0.1), 11px);
+    line-height: 1.15;
+    text-align: center;
     font-weight: 600;
     opacity: 0;
     transition: opacity 0.18s;
@@ -938,6 +948,62 @@
 .set-uploader:focus-visible .set-uploader-overlay {
     opacity: 1;
 }
+// A ring too small to fit "Update photo" without cramping it over the initials (sm = 72px,
+// and any custom size below ~95px) drops the label and shows the icon alone — a compact edit
+// affordance. The lone icon grows a little so it reads as the whole overlay's cue. Driven by a
+// container query on the ring, so it works for every size, preset or custom px.
+@container (max-width: 95px) {
+    .set-uploader-overlay > span {
+        display: none;
+    }
+    .set-uploader-overlay > .wui-icon {
+        width: calc(var(--wui-logo-size) * 0.34);
+        height: calc(var(--wui-logo-size) * 0.34);
+    }
+    // The label has no room in the ring, so surface it as a hover/focus tooltip below the ring
+    // (reusing the AppTooltip surface look). Text comes from data-overlay-label on the ring — a
+    // distinct attribute from data-wui-tip so the global tooltip rule never fires this on a large
+    // ring. Only rendered inside this container query, so md/lg (label visible) never get it.
+    .set-uploader-ring[data-overlay-label]::after {
+        content: attr(data-overlay-label);
+        position: absolute;
+        top: calc(100% + 8px);
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: var(--wui-z-menu, 1080);
+        width: max-content;
+        max-width: 160px;
+        padding: 6px 10px;
+        border-radius: var(--radius, 10px);
+        corner-shape: squircle;
+        background: var(--color-surface);
+        color: var(--color-text);
+        border: 1px solid var(--color-border-light);
+        box-shadow: var(--wui-shadow-overlay);
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1.3;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            opacity 0.12s ease,
+            visibility 0.12s;
+    }
+    // :not(:disabled) — a disabled/loading picker can't be updated, so it shows no tooltip
+    // (mirrors the overlay, which isn't rendered in those states).
+    .set-uploader:not(:disabled):hover .set-uploader-ring[data-overlay-label]::after,
+    .set-uploader:not(:disabled):focus-visible .set-uploader-ring[data-overlay-label]::after {
+        opacity: 1;
+        visibility: visible;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .set-uploader-ring[data-overlay-label]::after {
+            transition: none;
+        }
+    }
+}
 // While uploading: keep the overlay (spinner) visible and signal it's not
 // clickable.
 .set-uploader-overlay.is-loading {

package/scss/wui/_navigation.scss

@@ -213,14 +213,12 @@
     font-weight: 600;
 }
 // Static fallback underline (no-JS / first paint); the sliding ink bar takes over once
-// wired. Inset 10px (tab padding is 14px) so the bar runs the label width + 4px each side
-// — reads as belonging to the label yet never touches a rounded container edge. Matches
-// the wired ink bar's inset below.
+// wired. Spans the tab's full width (inset defaults to 0), matching the wired ink bar below.
 .app-tab.active::after {
     content: "";
     position: absolute;
-    left: var(--wui-tab-underline-inset, 10px);
-    right: var(--wui-tab-underline-inset, 10px);
+    left: var(--wui-tab-underline-inset, 0px);
+    right: var(--wui-tab-underline-inset, 0px);
     bottom: -1px;
     height: 2px;
     border-radius: 2px;
@@ -268,18 +266,22 @@
     left: 0;
     bottom: -1px;
     height: 2px;
-    // Inset 10px each side (tab padding is 14px) so the bar runs the label width + 4px per
-    // side — clear of a rounded container edge; falls to 0 rather than going negative on a
-    // tab narrower than the inset. Pills reset the inset to 0 (the pill fills the tab).
-    width: max(0px, calc(var(--wui-tab-w, 0) - var(--wui-tab-underline-inset, 10px) * 2));
+    // Spans the tab's FULL width (the inset defaults to 0). A consumer can inset it via
+    // `--wui-tab-underline-inset`; falls to 0 rather than going negative on a tab narrower than
+    // any inset it sets. Pills keep the inset at 0 too (the pill fills the tab).
+    width: max(0px, calc(var(--wui-tab-w, 0) - var(--wui-tab-underline-inset, 0px) * 2));
     background: var(--color-primary);
     border-radius: 2px;
-    transform: translateX(calc(var(--wui-tab-x, 0) + var(--wui-tab-underline-inset, 10px)));
+    transform: translateX(calc(var(--wui-tab-x, 0) + var(--wui-tab-underline-inset, 0px)));
     opacity: 0;
     pointer-events: none;
+    // Smooth ease-OUT (no overshoot), not the elastic bounce: a full-width bar sits flush to the
+    // edge tabs, so an elastic overshoot would push it past the strip and the `overflow-x: auto`
+    // clip would shear off its rounded corner. A decelerating slide reaches the tab exactly and
+    // never crosses the edge, so the radius is always intact.
     transition:
-        transform 0.42s var(--wui-ease-elastic),
-        width 0.42s var(--wui-ease-elastic),
+        transform 0.42s var(--wui-ease-out-quart),
+        width 0.42s var(--wui-ease-out-quart),
         opacity 0.15s ease;
 }
 .app-tabs[data-wui-tabs] .app-tab-indicator {

package/scss/wui/_overlays.scss

@@ -309,12 +309,6 @@
     line-height: 0;
     margin-bottom: 22px;
 }
-// Lift the badge off the modal surface with a soft outer shadow. `drop-shadow` traces
-// the SVG's circular alpha (a `box-shadow` would cast a square), and takes no spread —
-// so this is authored spread-free rather than reusing the `--wui-shadow-overlay` token.
-.wui-confirm-icon svg {
-    filter: drop-shadow(0 10px 18px rgba(7, 20, 55, 0.18));
-}
 // 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()`
@@ -345,17 +339,18 @@
 .wui-modal-footer:has(.wui-confirm-actions) {
     border-top: none;
     padding-top: 0;
-}
+    // The full-width CTA row makes the footer's insets read as a frame, so the gap below the
+    // buttons matches the 22px on their left and right (the base footer's 16px bottom looked
+    // cramped against the equal side gaps).
+    padding-bottom: 22px;
+}
+// Layout ONLY — the two CTAs share the row equally. Their chrome (radius, height, type
+// scale, weight, padding) comes entirely from AppButton, so a confirm button reads identically
+// to an AppButton anywhere else in the app. No separate button styling lives here: the dialog
+// used to re-skin its buttons (10px radius, 14px/500 type, forced height), which made the confirm
+// CTAs look like a different button than every other AppButton.
 .wui-confirm-actions .btn {
     flex: 1;
-    min-height: var(--wui-control-height);
-    height: var(--wui-control-height);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    padding-left: 16px;
-    padding-right: 16px;
-    font-size: 14px;
-    font-weight: 500;
 }
 
 // ── Tooltip ──

package/scss/wui/_utilities.scss

@@ -600,13 +600,17 @@
 
     display: flex;
     align-items: center;
+    // On phones the trailing action drops onto its own row BELOW the content (the flex `gap`
+    // supplies the vertical space) so a button never crushes the message into a sliver; from md
+    // up it sits inline at the right — a VIEWPORT rule, not the callout's own width. See the
+    // `.info-callout-action` breakpoint below.
+    flex-wrap: wrap;
     gap: 12px;
     padding: 14px 18px;
     border: 1px solid var(--callout-border);
     // A thick coloured left edge — the callout's signature aside marker.
     border-left: 4px solid var(--callout-accent);
-    border-radius: 20px;
-    corner-shape: squircle;
+    border-radius: 8px;
     background: var(--callout-bg);
     font-size: 14px;
     // Sub-content (the body/subtitle) reads at #252F4A / 400; the heading and the
@@ -690,14 +694,30 @@
     min-width: 0;
     font-size: 12px;
 }
-// Trailing action slot — a button (or any node) pinned to the right, vertically centred.
+// Trailing action slot — a button (or any node). Mobile-first: on phones it takes its own full
+// row below the content (left-aligned there); from md up it collapses to its natural width and
+// sits inline at the right edge of the content row.
 .info-callout-action {
-    flex: none;
+    flex: 1 1 100%;
     align-self: center;
-    display: inline-flex;
+    display: flex;
+    justify-content: flex-start;
     align-items: center;
     gap: 8px;
 }
+// From md up the row never wraps — the content shrinks to seat the action inline at the right,
+// so a button stays beside the text on any large screen, even when the callout sits in a narrow
+// column (the wrap-below is a phones-only treatment).
+@include media-breakpoint-up(md) {
+    .info-callout {
+        flex-wrap: nowrap;
+    }
+    .info-callout-action {
+        flex: none;
+        justify-content: initial;
+        margin-left: auto;
+    }
+}
 .info-callout-heading {
     font-size: 14px;
     font-weight: 600;
@@ -751,9 +771,8 @@
 // the heading to the variant. Only the heading takes the variant colour — the body
 // stays dark ink so the message reads calmly.
 .alert {
-    --bs-alert-border-radius: 20px;
-    border-radius: 20px;
-    corner-shape: squircle;
+    --bs-alert-border-radius: 8px;
+    border-radius: 8px;
     padding: 16px 18px;
     border-width: 1px;
 }