@webority/theme 0.86.0 → 0.86.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.86.0",
+  "version": "0.86.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/_tokens.scss

@@ -478,6 +478,8 @@
     --wui-fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
     /// meaning: Small step of the fluid type scale; a product opts in per element.
     --wui-fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    /// meaning: Step between the small and body sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-smb: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);
     /// meaning: Body-size step of the fluid type scale, close to Bootstrap's 1rem.
     --wui-fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
     /// meaning: Large step of the fluid type scale; a product opts in per element.
@@ -488,10 +490,14 @@
     --wui-fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
     /// meaning: Triple extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-3xl: clamp(1.875rem, 1.5rem + 1.75vw, 2.75rem);
+    /// meaning: Step between the triple and fourth extra-large sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-48: clamp(2.5rem, 2.2rem + 1.5vw, 3rem);
     /// meaning: Fourth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-4xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
     /// meaning: Fifth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-5xl: clamp(2.75rem, 1.9rem + 3.75vw, 4.5rem);
+    /// meaning: Step between the fifth and sixth extra-large sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-64: clamp(3rem, 2.6rem + 2.5vw, 4rem);
     /// meaning: Sixth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-6xl: clamp(3.5rem, 2.2rem + 5.5vw, 6rem);
 
@@ -557,6 +563,21 @@
     --wui-first-day: 1;
 }
 
+// The neutral surfaces follow the dark theme, so a neutral alert or table row stays dark on a dark
+// page. The selectors match the dark theme (manual attribute, and the automatic media query).
+:root[data-theme="dark"],
+:root[data-bs-theme="dark"] {
+    --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+}
+
+:root[data-theme="auto"] {
+    @media (prefers-color-scheme: dark) {
+        --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+        --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+    }
+}
+
 // A finger needs 44px: on a phone-width or touch screen the default control takes the lg rung. The
 // same query sizes the modal and drawer close buttons (wui/_overlays.scss).
 @media (max-width: 575.98px), (pointer: coarse) {

package/scss/wui/_choice.scss

@@ -319,6 +319,13 @@
     font-size: 16px;
     border-radius: var(--wui-field-radius-lg);
 }
+// xl: the 52px select, the same height as an AppInput at size="xl". A literal height, as on the input.
+.wui-search-select-xl .search-select-control {
+    height: 52px;
+    min-height: 52px;
+    font-size: 16px;
+    border-radius: var(--wui-field-radius-lg);
+}
 // Multi-select grows with its chips, so a size sets the FLOOR (min-height from the rule
 // above) but never a fixed height — reset height:auto so a second row of chips can appear.
 .search-select-sm .search-select-multi,

package/scss/wui/_controls.scss

@@ -423,6 +423,15 @@
     font-size: 16px;
     border-radius: var(--wui-field-radius-lg);
 }
+// xl (size="xl"): the 52px control for large forms. A literal height, because the control-height
+// ladder stops at 44px and its tokens live in the theme's token file. A floating label needs no
+// rule of its own: it centres on the field's box, so it stays inside at 52px.
+.wui-input-xl {
+    height: 52px;
+    padding: 9px 16px;
+    font-size: 16px;
+    border-radius: var(--wui-field-radius-lg);
+}
 .textarea,
 textarea.form-control {
     height: auto;
@@ -850,7 +859,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     --wui-input-icon-size: 14px;
     --wui-input-icon-gap: 10px;
 }
-.input-icon:has(> .input-lg) {
+.input-icon:has(> .input-lg),
+.input-icon:has(> .wui-input-xl) {
     --wui-input-icon-slot: 48px;
     --wui-input-icon-size: 18px;
     --wui-input-icon-gap: 14px;
@@ -1372,6 +1382,9 @@ wui-select[compact] {
 .input-with-unit .num-input.input-lg {
     height: calc(var(--wui-control-height-lg) - 2px);
 }
+.input-with-unit .num-input.wui-input-xl {
+    height: calc(52px - 2px);
+}
 .input-with-unit .num-input:focus {
     box-shadow: none;
 }

package/scss/wui/_interaction.scss

@@ -11,7 +11,7 @@
 // ---- Default ring -----------------------------------------------------------
 // Anything focusable that no partial styles gets the shared ring instead of the browser's.
 // Zero specificity, so every component rule (including a panel's deliberate `outline: none`)
-// still wins. Text fields are not in this list; the Text fields block below rings them.
+// still wins. Text fields are not in this list; their focus border marks them.
 :where(
     a[href],
     area[href],
@@ -83,30 +83,8 @@
 }
 
 // ---- Text fields --------------------------------------------------------------
-// A text field keeps its soft focus border and also draws the shared ring. Browsers match
-// :focus-visible on a text field after a pointer click too, so the ring shows whenever the caret is
-// in the field. A field drawn inside a shell (phone, unit, stepper, input group, one-time code) rings
-// the shell and the bare input inside it draws nothing; so does the borderless .input-bare, which
-// sits inside another control's chrome.
-:is(.form-control, .form-select, .input, .select, .textarea):not(.input-bare):focus-visible {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-.app-phone-number-input .phone-input-wrap:has(> .input:focus-visible),
-.input-with-unit:has(.num-input:focus-visible),
-.num-wrap:has(.num-input:focus-visible),
-.wui-input-group:has(> :is(.form-control, .input):focus-visible),
-.otp:has(.otp-field:focus-visible) .otp-slot.active {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-// After the ring rule: these tie with it on specificity, so source order decides.
-.app-phone-number-input .phone-input-wrap > .input:focus-visible,
-.input-with-unit .num-input:focus-visible,
-.num-wrap .num-input:focus-visible,
-.wui-input-group > :is(.form-control, .input):focus-visible {
-    outline: none;
-}
+// A text field (and a shell around one: phone, unit, stepper, input group, one-time code) draws no
+// outer ring. Its soft focus border in _controls.scss is the focus cue.
 
 // ---- Not obscured (WCAG 2.4.11) ---------------------------------------------
 // A control focused by Tab scrolls clear of the sticky shell topbar (72px) and a sticky form

package/scss/wui/_shell.scss

@@ -384,7 +384,8 @@
     align-items: center;
     gap: 12px;
     // Comfortable row: 44px, which with the 2px group gap is a 46px pitch. Compact sets its own below.
-    min-height: var(--wui-control-height-lg);
+    // An explicit itemHeight sets --wui-nav-item-height on the shell and replaces all three heights.
+    min-height: var(--wui-nav-item-height, var(--wui-control-height-lg));
     padding: 9px 14px;
     border-radius: var(--radius-xl);
     corner-shape: squircle;
@@ -400,11 +401,11 @@
 }
 // Compact: 40px rows, a 42px pitch. The touch floor holds on a coarse pointer whatever the density.
 .app-shell[data-density="compact"] .app-nav-item:not(.app-nav-subitem) {
-    min-height: 40px;
+    min-height: var(--wui-nav-item-height, 40px);
 }
 @media (pointer: coarse) {
     .app-shell[data-density="compact"] .app-nav-item:not(.app-nav-subitem) {
-        min-height: var(--wui-control-height-lg);
+        min-height: var(--wui-nav-item-height, var(--wui-control-height-lg));
     }
 }
 .app-nav-item:hover {

package/scss/wui/_utilities.scss

@@ -819,6 +819,16 @@
     // AA-safe text colour for the heading and an accented <strong>.
     --alert-text: var(--color-danger-text-on-soft);
 }
+// Neutral (`variant="neutral"`): a plain notice with no semantic colour. It sits on the neutral surface
+// pair, its body and heading take the same ink as the status variants, and its edge is the muted text
+// colour, so nothing in it reads as a status.
+.alert-neutral {
+    --bs-alert-bg: var(--wui-neutral-bg-light);
+    --bs-alert-border-color: var(--wui-neutral-bg-dark);
+    --bs-alert-color: var(--color-text-body);
+    --alert-accent: var(--color-text-muted);
+    --alert-text: var(--color-text-body);
+}
 
 // AppErrorSummary: a danger alert holding a heading and one link per field error. It takes
 // focus when it appears, so its focus ring is the alert's own edge rather than an outline.
@@ -1001,6 +1011,9 @@
 .alert-danger .alert-heading {
     color: var(--alert-text);
 }
+.alert-neutral .alert-heading {
+    color: var(--alert-text);
+}
 
 // Heading and body type step with the size: sm 13px / 11px, md 14px / 12px (the base above),
 // lg 16px / 14px. Declared after the base heading rule so these override it.

package/token-meanings.json

@@ -180,12 +180,15 @@
     "--wui-font-mono": "Monospace typeface for code, identifiers and figures that must line up.",
     "--wui-fs-2xl": "Double extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-3xl": "Triple extra-large step of the fluid type scale; a product opts in per element.",
+    "--wui-fs-48": "Step between the triple and fourth extra-large sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-4xl": "Fourth extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-5xl": "Fifth extra-large step of the fluid type scale; a product opts in per element.",
+    "--wui-fs-64": "Step between the fifth and sixth extra-large sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-6xl": "Sixth extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-base": "Body-size step of the fluid type scale, close to Bootstrap's 1rem.",
     "--wui-fs-lg": "Large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-sm": "Small step of the fluid type scale; a product opts in per element.",
+    "--wui-fs-smb": "Step between the small and body sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-xl": "Extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-xs": "Extra-small step of the fluid type scale; a product opts in per element.",
     "--wui-hero-gradient": "Background gradient of the hero band on marketing pages.",