@webority/theme 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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/wui/_controls.scss

@@ -1283,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;

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/_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;
 }