@webority/theme 0.18.1 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.18.1",
+  "version": "0.20.0",
   "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-components.scss

@@ -51,6 +51,7 @@
 @import "wui/dock";
 @import "wui/consent-banner";
 @import "wui/toolbar";
+@import "wui/theme-toggle";
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
 @import "wui/command-palette";
 // Last: restates the settled state of menus other partials style, so it must win.

package/scss/wui/_controls.scss

@@ -993,11 +993,15 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     // flush against the label.
     margin-inline-start: 0;
 }
+// min-width: 0 lets a field shrink to its column in any flex or grid parent; left at auto, a
+// control sized by its content (chips, a date range, OTP boxes) pushes the field, and the page,
+// wider than a phone screen.
 .field {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
+    min-width: 0;
 }
 .field > .label,
 .field label {
@@ -1012,12 +1016,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 .field-row-3 {
     grid-template-columns: 1fr 1fr 1fr;
 }
-// min-width:0 — grid/flex items default to min-width:auto, which lets a long
-// control (e.g. a search-select label) push its track past 1fr and defeat
-// text truncation. Reset to 0 so the ellipsis engages instead of overflowing.
 .field-row .field {
     margin-bottom: 0;
-    min-width: 0;
 }
 // Controls fill their field even though .field aligns children flex-start.
 //
@@ -1050,6 +1050,7 @@ wui-date-range {
 wui-select[compact] {
     display: inline-block;
     width: auto;
+    max-width: 100%;
 }
 .field > wui-select,
 .field > wui-country-select,
@@ -1496,10 +1497,12 @@ wui-select[compact] {
 // letting the segments do the drawing.
 wui-otp {
     display: block;
+    max-width: 100%;
 }
 .otp {
     position: relative;
     display: inline-flex;
+    max-width: 100%;
 }
 .otp-field {
     position: absolute;
@@ -1522,15 +1525,25 @@ wui-otp {
 .otp-field:disabled {
     cursor: not-allowed;
 }
+// The boxes narrow together (to 22px, still room for an 18px digit) rather than push past a
+// phone screen; 8 boxes at 44px need 408px.
 .otp-slots {
     display: inline-flex;
     gap: 8px;
+    min-width: 0;
+}
+@include media-breakpoint-down(sm) {
+    .otp-slots {
+        gap: 4px;
+    }
 }
 .otp-slot {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
+    min-width: 22px;
+    flex: 0 1 auto;
     height: var(--wui-control-height);
     // Colour model matches AppInput exactly: muted resting fill + soft border, same
     // field radius. State rules below mirror AppInput's hover/focus/invalid/disabled.

package/scss/wui/_data.scss

@@ -542,6 +542,8 @@
 }
 .tpg-nav {
     display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
     align-items: center;
     gap: 4px;
 }
@@ -624,6 +626,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    max-width: 100%;
+}
+// Many pages wrap onto a second row rather than push past a phone screen.
+.pagination-nav .pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 4px;
 }
 .pagination-md {
     // Default Bootstrap pagination size (no-op, but explicit for parallelism with sm)
@@ -654,6 +663,13 @@
     scrollbar-width: thin;
     scrollbar-color: var(--color-border-strong) transparent;
 }
+// Visually hidden text (a header's screen-reader label) is absolutely positioned at its static
+// place. Its containing block sits outside the scroll box, so on a wide table it escaped the
+// clipping and widened the page. Pin it to the corner of that containing block instead.
+.table-wrap .visually-hidden:not(.visually-hidden-focusable) {
+    top: 0;
+    left: 0;
+}
 .table-wrap::-webkit-scrollbar {
     height: 6px;
 }

package/scss/wui/_display.scss

@@ -743,6 +743,7 @@ a.info-row:hover .info-value {
     font-size: 14px;
     font-weight: 600;
     color: var(--color-text);
+    overflow-wrap: anywhere;
 }
 // Wraps rather than truncates: an audit line must never hide half the timestamp.
 .timeline-meta {

package/scss/wui/_navigation.scss

@@ -146,6 +146,9 @@
     display: flex;
     align-items: center;
     gap: 4px;
+    // Fits its parent so the tab strip scrolls inside it rather than widening the page.
+    min-width: 0;
+    max-width: 100%;
 }
 
 .app-tabs {
@@ -394,6 +397,11 @@
 
 // Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
 // renders server-side. React composes the strip and its panels itself.
+// The Razor root: fits its parent so the tab strip inside scrolls instead of widening the page.
+.app-tabs-group {
+    min-width: 0;
+    max-width: 100%;
+}
 .app-tabs-group > .tab-content {
     padding-top: 16px;
 }

package/scss/wui/_theme-toggle.scss

@@ -0,0 +1,61 @@
+// AppThemeToggle / <app-theme-toggle>: the light/dark switch and its page-wide transition.
+//
+// The button is the .u-action disc (see _data.scss). While a switch runs, the page is a View
+// Transition: the old theme is a frozen snapshot and the new theme is clipped to the effect's
+// moving shape (transitionTheme in @webority/ui-elements writes the keyframes). The rules below
+// are scoped to the class the engine sets on <html> for the length of one switch, so an
+// ordinary page transition elsewhere keeps the browser's defaults.
+html.wui-theme-switching::view-transition-old(root),
+html.wui-theme-switching::view-transition-new(root) {
+    // No default cross-fade: the old snapshot stays whole above the effect's edge and the new
+    // page whole below it, which is what makes the edge read as a wave or a wipe.
+    animation: none;
+    mix-blend-mode: normal;
+}
+html.wui-theme-switching::view-transition-new(root) {
+    // Hidden until the effect's first frame is attached (a zero-area clip), so a dark page never
+    // flashes in full for the frame or two between the snapshot and the animation start.
+    clip-path: inset(50%);
+}
+// The pressed control carries its own view-transition-name for the switch (the engine sets it),
+// so it is rendered as its own live layer above the sweep: no old image, no cross-fade, just
+// the control as it now is, with its ring sliding or its glyph swapped the moment it is pressed.
+html.wui-theme-switching::view-transition-group(wui-theme-toggle),
+html.wui-theme-switching::view-transition-new(wui-theme-toggle) {
+    animation: none;
+}
+html.wui-theme-switching::view-transition-old(wui-theme-toggle) {
+    animation: none;
+    opacity: 0;
+}
+
+// The new page is rendered live under the moving clip, so anything still changing on it repaints
+// the whole page every frame. A theme flip starts a colour transition on hundreds of elements at
+// once (Bootstrap's buttons, inputs and links all transition color and background), which is
+// enough to stutter the sweep. For the length of the switch those transitions are off: the page
+// jumps to its new colours under the old snapshot, and only the clip moves.
+// The segmented toggle's own thumb and glyph are the one exception: a press on it is what
+// started the switch, and its ring sliding to the pressed option is part of that press.
+html.wui-theme-switching,
+html.wui-theme-switching *:not(.segmented-thumb, .segmented-option > .wui-icon),
+html.wui-theme-switching *::before,
+html.wui-theme-switching *::after {
+    transition: none !important;
+}
+
+// The disc's glyph turns a touch on hover, the one cue that it changes something page-wide. The
+// segmented variant (one option per mode) keeps AppSegmented's own look.
+.u-action.wui-theme-toggle .wui-icon {
+    transition: transform 0.3s var(--wui-ease-out-quart, ease-out);
+}
+.u-action.wui-theme-toggle:hover .wui-icon {
+    transform: rotate(24deg);
+}
+@media (prefers-reduced-motion: reduce) {
+    .u-action.wui-theme-toggle .wui-icon {
+        transition: none;
+    }
+    .u-action.wui-theme-toggle:hover .wui-icon {
+        transform: none;
+    }
+}

package/scss/wui/_typography.scss

@@ -73,9 +73,8 @@
     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.
+// An icon's baseline nudge is meant for icons set in running text; inside the chip's flex row
+// it drops the glyph below the label's centre. Reset it so a leading icon lines up with the label.
 .chip-ic .wui-icon {
     vertical-align: middle;
 }

package/scss/wui/_utilities.scss

@@ -273,6 +273,8 @@
     // one line while it fits — then `.page-header-bar`'s flex-wrap drops the WHOLE actions
     // block onto its own line only once the content genuinely can't share the row.
     flex: none;
+    // Never wider than the bar, so on a phone the buttons wrap among themselves.
+    max-width: 100%;
 }
 
 // ── Size scale ── (`size`): the title and the block's rhythm scale together.
@@ -885,10 +887,10 @@
     height: 24px;
 }
 
-// The leading glyph is a solid circular badge — variant fill, white glyph centred, with
+// The leading glyph is a solid circular badge: variant fill, white glyph centred, with
 // a soft 3px same-colour halo ring around it. Base size is the SINGLE-line badge (20px,
 // 20px glyph); the .alert-stack override above enlarges it when a title and body appear
-// together. (The glyph itself is a Bootstrap Icons font `<i>` sized by the component.)
+// together. (The glyph itself is a library icon, an inline SVG sized by the component.)
 // Custom image in the badge (icon replacement): the image fills the circle, so drop the
 // variant fill and the halo ring and clip it round. Compound selector so it beats the
 // .alert-icon rule below, which sets both.