@webority/theme 0.37.0 → 0.39.0

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@webority/theme",
-  "version": "0.37.0",
+  "version": "0.39.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": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Webority/webority-ui.git",
-    "directory": "packages/theme"
-  },
   "files": [
     "index.scss",
     "scss",
     "fonts",
-    "dist"
+    "dist",
+    "!dist/**/__tests__",
+    "!dist/**/*.test.*",
+    "!dist/**/*.map"
   ],
   "exports": {
     ".": {

package/scss/_components.scss

@@ -82,7 +82,7 @@
 
 .btn-danger {
     // White-on-red destructive look via the --wui-danger-strong token: white fails AA on the
-    // brighter danger fills (#F8285A → 3.86:1, #E82646 → 4.38:1), so the button uses the
+    // brighter danger fill (#E82646 → 4.38:1), so the button uses the
     // deepened fill (5.80:1) that carries white cleanly. Token-driven so a rebrand tracks it;
     // the brighter --wui-danger stays for badges/dots that never carry white text.
     --bs-btn-color: #fff;

package/scss/_tokens.scss

@@ -148,16 +148,16 @@
     // Shared by the portal (aliased to --color-*) and marketing alerts/badges.
     --wui-info-text: #1460ba;
     --wui-info-active: #056EE9;
-    --wui-info: #1B84FF;
+    --wui-info: #056EE9;
     --wui-info-50: #8DC2FF;
     --wui-info-30: #BBDBFF;
     --wui-info-20: #D1E6FF;
     --wui-info-10: #E9F3FF;
     --wui-info-5: #F3F9FF;
 
-    // `-text` variants exist because the status colours are FILLS. #F8285A and #04B440
+    // `-text` variants exist because the status colours are FILLS. #E82646 and #04B440
     // are correct on a button or a badge, and both fail AA as text on a light surface
-    // (3.6:1 and 2.6:1) — which is how a validation error message, of all things, came
+    // (4.4:1 and 2.8:1) — which is how a validation error message, of all things, came
     // to be unreadable. Darkening the base tokens would change every red button and
     // green badge in the system, so text gets its own value and the fills keep theirs.
     --wui-success-text: #0e7531;
@@ -167,7 +167,7 @@
     // the other tokens so buttons/badges keep the vibrant fill.
     --wui-success-strong: #0e7531;
     --wui-success-active: #04B440;
-    --wui-success: #17C653;
+    --wui-success: #04B440;
     --wui-success-50: #8BE3A9;
     --wui-success-30: #BAEECC;
     --wui-success-20: #D1F4DD;
@@ -176,7 +176,7 @@
 
     --wui-warning-text: #876100;
     --wui-warning-active: #DFA000;
-    --wui-warning: #F6B100;
+    --wui-warning: #DFA000;
     --wui-warning-50: #FBD880;
     --wui-warning-30: #FDE8B3;
     --wui-warning-20: #FDEFCC;
@@ -196,7 +196,7 @@
     --wui-danger-strong: #C81340;
     --wui-danger-strong-hover: #AB1036;
     --wui-danger-active: #E82646;
-    --wui-danger: #F8285A;
+    --wui-danger: #E82646;
     --wui-danger-50: #FC94AD;
     --wui-danger-30: #FDBFCE;
     --wui-danger-20: #FED4DE;
@@ -343,6 +343,11 @@
     --wui-z-popover: 1600; // same rung as --wui-z-menu (above modal)
     --wui-z-tooltip: 1650;
     --wui-z-toast: 1700;
+
+    // The weekday every calendar's week starts on: the date picker, the date range and the event
+    // calendar. 0 = Sunday, 1 = Monday, through 6 = Saturday. A product sets it once here, a page or
+    // a section can set it on an ancestor, and a control's own first-day attribute wins over both.
+    --wui-first-day: 1;
 }
 
 // Bootstrap md / xl (not invented px)

package/scss/_variables.scss

@@ -20,6 +20,8 @@ $primary: #4F46E5 !default;
 // second brand colour should use a custom utility or token — do not repurpose
 // $secondary without a coordinated migration.
 $secondary: #4B5675 !default;
+// The status colours match the base --wui-success/-info/-warning/-danger tokens, so a
+// Bootstrap utility (.bg-success, .btn-info, --bs-danger) paints the same fill as the library.
 $success: #04B440 !default;
 $info: #056EE9 !default;
 $warning: #DFA000 !default;

package/scss/_wui-aliases.scss

@@ -28,6 +28,10 @@
   // Ink on a solid status fill (success, warning, danger, info): near-black in both modes, since
   // white fails AA on the bright fills.
   --color-on-status-fill: #0F0F0F;
+  // Ink on a DEEP status fill (the -text tokens, used as a fill the way primary is): white in
+  // light mode, where those shades measure 5.5 to 6.2:1; near-black in dark mode, where -text is
+  // the bright fill.
+  --color-on-status-strong: #FFFFFF;
 
   // Text ramp
   --color-text: var(--wui-text-heading);
@@ -207,29 +211,33 @@
   // Dark mode primary text: #fff on #6B83EC measures 3.5:1, below WCAG AA (4.5:1).
   // Map to a near-black for safe contrast (6.9:1 on --wui-dark-primary) when text sits on primary fill.
   --color-primary-text: #0F0F0F;
+  --color-on-status-strong: #0F0F0F;
 
-  // On a dark surface the FILL colours are already the readable ones — the darkened
-  // `-text` values would sink into the background. So dark mode maps text back to the
-  // bright tokens rather than inheriting light mode's.
-  --color-success-text: var(--wui-success);
-  --color-danger-text: var(--wui-danger);
-  --color-warning-text: var(--wui-warning);
-  --color-info-text: var(--wui-info);
+  // On a dark surface the darkened `-text` values would sink into the background, so dark
+  // mode builds text from the fill instead, lifted with 25% white: the info and danger fills
+  // alone reach only 3.1:1 and 3.4:1 on the muted fill, and the lift clears 4.5:1 on every
+  // dark surface for all four tones.
+  --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
+  --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
+  --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
+  --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
 
   // Text ON a soft tint (an alert heading). The bright tone alone falls under WCAG AA on its own
   // 18% tint over the dark page (info and danger reach only ~3.8:1), so it is lifted with 30%
   // white: every tone then clears 4.5:1 on the dark page, surface and muted fill.
-  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 70%, white);
-  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 70%, white);
-  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 70%, white);
-  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 70%, white);
+  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
+  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
+  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
+  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
 
   // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
-  // Remap to the bright fills so timeline dots / strong accents stay visible (same as -text).
-  --color-success-strong: var(--wui-success);
-  --color-danger-strong: var(--wui-danger);
-  --color-info-strong: var(--wui-info);
-  --color-warning-strong: var(--wui-warning);
+  // Dark mode uses the lifted -text tone, since -strong is a fill that carries near-black text
+  // (progress label, bell count): the bare danger and info fills reach only 4.4:1 and 4.0:1
+  // under that ink, the lifted ones 5.7:1 or better.
+  --color-success-strong: var(--color-success-text);
+  --color-danger-strong: var(--color-danger-text);
+  --color-info-strong: var(--color-info-text);
+  --color-warning-strong: var(--color-warning-text);
 
   --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);

package/scss/wui/_data.scss

@@ -701,6 +701,45 @@
     border-radius: 999px;
 }
 
+// A table wider than its scroller fades out at each edge it continues past, so a cut-off column
+// reads as "more this way". scrollEdges.js (ui-elements) keeps the two data-wui-overflow-*
+// attributes current on scroll and resize. The fade is a mask on the scroller, because a shadow
+// paints under the opaque cells. A mask also hides what a descendant floats outside the box, so
+// it stands aside while a menu or picker inside the table is open (an expanded row, which has no
+// popup, keeps it). A pinned first column never
+// fades at the start: it is the part that stays put.
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]) {
+    --wui-overflow-fade-start: 0px;
+    --wui-overflow-fade-end: 0px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"])[data-wui-overflow-start] {
+    --wui-overflow-fade-start: 32px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"])[data-wui-overflow-end] {
+    --wui-overflow-fade-end: 32px;
+}
+.table-wrap[data-wui-overflow-start]:has(> .wui-table-sticky-first) {
+    --wui-overflow-fade-start: 0px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]):is([data-wui-overflow-start], [data-wui-overflow-end]):not(:has([aria-haspopup][aria-expanded="true"], .dropdown-menu.show)) {
+    mask-image: linear-gradient(
+        90deg,
+        transparent,
+        #000 var(--wui-overflow-fade-start),
+        #000 calc(100% - var(--wui-overflow-fade-end)),
+        transparent
+    );
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]):dir(rtl):is([data-wui-overflow-start], [data-wui-overflow-end]):not(:has([aria-haspopup][aria-expanded="true"], .dropdown-menu.show)) {
+    mask-image: linear-gradient(
+        270deg,
+        transparent,
+        #000 var(--wui-overflow-fade-start),
+        #000 calc(100% - var(--wui-overflow-fade-end)),
+        transparent
+    );
+}
+
 // The identity/name column — a STABLE hook, because position is not one.
 //
 // The library owns .wui-select-cell, so a ledger's first cell is the 44px checkbox when

package/scss/wui/_flow.scss

@@ -25,6 +25,10 @@
 //                          eyebrow, filled rail). Unset, completed steps follow the accent.
 //   --wui-step-size        compact/vertical badge diameter (default 28px)
 //   --wui-step-badge-size  icons-variant badge diameter (default 56px)
+//   --wui-step-journey-size  journey badge diameter (default 40px)
+//   --wui-step-number-font   the step number in a badge (default 12px; journey 13px, icons 22px)
+//   --wui-step-label-font    the step label (default 13px; journey 16px, icons 15px)
+// The `.wui-step-size-sm` / `.wui-step-size-lg` classes (end of this block) set these together.
 // Every variant defaults to the brand primary — active, done and rail share one accent
 // (no multi-colour). Colour variety is opt-in: a `.wui-step-tone-*` class or a var override.
 // ============================================================================
@@ -76,6 +80,15 @@
 .step.done + .step::before {
     background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
+// The active circle's 4px ring would swallow the 4px gap, so both connectors touching the
+// active step start 4px further out and keep the same gap from the ring's edge.
+.step.active + .step::before {
+    left: calc(-50% + var(--wui-step-size, 28px) / 2 + 8px);
+}
+.step.active + .step::before,
+.step.active::before {
+    right: calc(50% + var(--wui-step-size, 28px) / 2 + 8px);
+}
 .step-circle {
     position: relative;
     z-index: 1;
@@ -87,7 +100,7 @@
     border: 1.5px solid var(--color-border);
     border-radius: 999px;
     background: var(--color-surface);
-    font-size: 12px;
+    font-size: var(--wui-step-number-font, 12px);
     font-weight: 600;
     color: var(--color-text-subtle);
 }
@@ -106,7 +119,7 @@
 }
 .step-label {
     max-width: 130px;
-    font-size: 13px;
+    font-size: var(--wui-step-label-font, 13px);
     font-weight: 500;
     line-height: 1.25;
     color: var(--color-text-subtle);
@@ -210,11 +223,11 @@ button.step.done:focus-visible .step-circle {
     content: none;
 }
 .stepper-journey .step-circle {
-    width: 40px;
-    height: 40px;
+    width: var(--wui-step-journey-size, 40px);
+    height: var(--wui-step-journey-size, 40px);
     border: none;
     background: var(--color-bg-muted);
-    font-size: 13px;
+    font-size: var(--wui-step-number-font, 13px);
     font-weight: 700;
     transition:
         background 0.2s ease,
@@ -265,7 +278,7 @@ button.step.done:focus-visible .step-circle {
 .stepper-journey .step-label {
     max-width: none;
     margin-top: 8px;
-    font-size: 16px;
+    font-size: var(--wui-step-label-font, 16px);
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
@@ -406,7 +419,7 @@ button.step.done:focus-visible .step-circle {
     border: none;
     background: var(--color-bg-muted);
     color: var(--color-text-subtle);
-    font-size: 22px;
+    font-size: var(--wui-step-number-font, 22px);
     transition:
         background 0.2s ease,
         color 0.2s ease,
@@ -457,7 +470,7 @@ button.step.done:focus-visible .step-circle {
 }
 .stepper-icons .step-label {
     max-width: 150px;
-    font-size: 15px;
+    font-size: var(--wui-step-label-font, 15px);
     font-weight: 600;
     color: var(--color-text-subtle);
 }
@@ -534,28 +547,29 @@ button.step.done:focus-visible .step-circle {
     --wui-step-soft: var(--color-primary-soft);
     --wui-step-soft-fg: var(--color-primary);
 }
-// Text on a bright status fill: a near-black ink in both modes, where white fails AA.
+// Like primary, each tone fills with its deep shade (the -text token) under white ink in light mode,
+// and with the bright fill under near-black ink in dark mode; both pairs clear AA.
 .wui-step-tone-success {
-    --wui-step-accent: var(--color-success);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-success-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-success-soft);
     --wui-step-soft-fg: var(--color-success-text);
 }
 .wui-step-tone-warning {
-    --wui-step-accent: var(--color-warning);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-warning-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-warning-soft);
     --wui-step-soft-fg: var(--color-warning-text);
 }
 .wui-step-tone-danger {
-    --wui-step-accent: var(--color-danger);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-danger-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-danger-soft);
     --wui-step-soft-fg: var(--color-danger-text);
 }
 .wui-step-tone-info {
-    --wui-step-accent: var(--color-info);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-info-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-info-soft);
     --wui-step-soft-fg: var(--color-info-text);
 }
@@ -572,30 +586,70 @@ button.step.done:focus-visible .step-circle {
     --wui-step-done-soft-fg: var(--color-primary);
 }
 .wui-step-done-tone-success {
-    --wui-step-done-accent: var(--color-success);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-success-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-success-soft);
     --wui-step-done-soft-fg: var(--color-success-text);
 }
 .wui-step-done-tone-warning {
-    --wui-step-done-accent: var(--color-warning);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-warning-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-warning-soft);
     --wui-step-done-soft-fg: var(--color-warning-text);
 }
 .wui-step-done-tone-danger {
-    --wui-step-done-accent: var(--color-danger);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-danger-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-danger-soft);
     --wui-step-done-soft-fg: var(--color-danger-text);
 }
 .wui-step-done-tone-info {
-    --wui-step-done-accent: var(--color-info);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-info-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-info-soft);
     --wui-step-done-soft-fg: var(--color-info-text);
 }
 
+// Size presets: scale the badge, its number and the label together, on every variant. Same
+// placement rules as the tone presets: on the stepper or any ancestor (the wizard host). Medium is
+// the unset default above. The number and label fonts are per-variant here, so these rules name
+// each variant; one class sets them all.
+// ----------------------------------------------------------------------------
+.wui-step-size-sm {
+    --wui-step-size: 22px;
+    --wui-step-badge-size: 44px;
+    --wui-step-journey-size: 32px;
+    --wui-step-number-font: 11px;
+    --wui-step-label-font: 12px;
+}
+.wui-step-size-sm .stepper-journey,
+.wui-step-size-sm.stepper-journey {
+    --wui-step-number-font: 12px;
+    --wui-step-label-font: 14px;
+}
+.wui-step-size-sm .stepper-icons,
+.wui-step-size-sm.stepper-icons {
+    --wui-step-number-font: 18px;
+    --wui-step-label-font: 13px;
+}
+.wui-step-size-lg {
+    --wui-step-size: 36px;
+    --wui-step-badge-size: 68px;
+    --wui-step-journey-size: 48px;
+    --wui-step-number-font: 14px;
+    --wui-step-label-font: 15px;
+}
+.wui-step-size-lg .stepper-journey,
+.wui-step-size-lg.stepper-journey {
+    --wui-step-number-font: 15px;
+    --wui-step-label-font: 18px;
+}
+.wui-step-size-lg .stepper-icons,
+.wui-step-size-lg.stepper-icons {
+    --wui-step-number-font: 26px;
+    --wui-step-label-font: 17px;
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //

package/scss/wui/_utilities.scss

@@ -610,23 +610,22 @@
 // Determinate progress-bar fill tones (AppProgress / AppMeter / <app-progress>) — the fill sits
 // in Bootstrap's .progress track; only the bar colour is brand-toned.
 //
-// success + danger use the DEEPENED -strong fills, not the mid tones: when showLabel is set the
-// bar carries Bootstrap's WHITE label text, and white on the mid --wui-success (#17C653) /
-// --wui-danger (#F8285A) fails AA (2.78:1 / 3.86:1). The -strong fills clear it (both ~5.8:1),
-// the same trick btn-danger uses. info/warning/neutral stay on their mid tones (info/neutral
-// pass with white; warning is not shown with a white label).
+// Every tone fills with its -strong alias, so the label always sits on a fill chosen to carry it.
+// In light mode white label text fails AA on the mid --wui-success (#04B440) / --wui-danger
+// (#E82646) (2.76:1 / 4.38:1), so those two use the deepened fills (both ~5.8:1), the same trick
+// btn-danger uses; info and warning -strong equal their mid tones there.
 //
 // They read the --color-*-strong aliases, not --wui-*-strong, because dark mode remaps the
-// aliases to the bright fills: the deep fills sink into the dark track (about 2:1). The label
+// aliases to the lifted fills: the deep fills sink into the dark track (about 2:1). The label
 // flips to a dark ink there (--color-progress-label), which clears AA on all five dark fills.
 .wui-progress-info {
-    background-color: var(--color-info);
+    background-color: var(--color-info-strong);
 }
 .wui-progress-success {
     background-color: var(--color-success-strong);
 }
 .wui-progress-warning {
-    background-color: var(--color-warning);
+    background-color: var(--color-warning-strong);
 }
 .wui-progress-danger {
     background-color: var(--color-danger-strong);
@@ -1006,15 +1005,51 @@
 .alert-accent.alert-dismissible {
     padding-right: 53px;
 }
-// The dismiss × is Bootstrap's ink-dark glyph; the token whitens it on a dark page.
-.alert .btn-close {
-    filter: var(--color-close-filter);
-}
-// Centre the dismiss × vertically rather than pinning it to the top corner.
+// The dismiss × is a 32px rounded square like the modal close, centred vertically rather
+// than pinned to the top corner. Its 8px glyph takes the variant's text colour: Bootstrap's
+// glyph is a fixed-colour background image, so the button drops it and paints the same
+// shape as a mask on ::before, filled with the colour. Hover tints the square with a
+// transparent wash of the variant. Both colours come from tokens the dark theme remaps, so
+// the close filter is not needed here. A variant without its own tokens falls back to ink.
 .alert-dismissible .btn-close {
     top: 50%;
-    padding: 12px 16px;
+    right: 10px;
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background-image: none;
+    border-radius: var(--radius-lg);
+    corner-shape: squircle;
+    opacity: 1;
+    filter: none;
     transform: translateY(-50%);
+    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.alert-dismissible .btn-close::before {
+    content: "";
+    width: 8px;
+    height: 8px;
+    background-color: var(--alert-text, var(--color-text-muted));
+    mask: var(--bs-btn-close-bg) center / contain no-repeat;
+}
+.alert-dismissible .btn-close:hover {
+    background-color: color-mix(in srgb, var(--alert-accent, var(--color-text-muted)) 8%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+    .alert-dismissible .btn-close {
+        transition: none;
+    }
+}
+// Bootstrap's .btn-close paints a box-shadow ring on :focus (fires on mouse click too).
+// Drop it; keep a keyboard-only outline so dismissal stays reachable without a mouse.
+.alert .btn-close:focus {
+    box-shadow: none;
+}
+.alert .btn-close:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 
 // ============================================================================