@webority/theme 0.35.2 → 0.37.0

package/package.json

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

@@ -41,6 +41,10 @@
     // combobox/phone/date/number wrappers) — a touch lighter than --wui-bg-muted so fields read
     // as their own surface. Change here to restyle every field's background at once.
     --wui-field-bg: #F9FBFC;
+    // Resting and hover border of every input-like control. They clear WCAG 1.4.11's 3:1
+    // against the field fill and the surface, so a field's edge is visible without focus.
+    --wui-field-border: #80899F;
+    --wui-field-border-hover: #687088;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
     // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
@@ -253,6 +257,9 @@
     --wui-dark-bg-surface: #181b23;
     --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#3a414f;
+    // Field borders on the dark fills: 3:1 or better against the dark field fill and surface.
+    --wui-dark-field-border: #6E7586;
+    --wui-dark-field-border-hover: #8a90a0;
     // Lighter than the dark page, surface and muted fill, so the empty track shows on all three.
     --wui-dark-progress-track: #323845;
     --wui-dark-text: #e6e8ee;

package/scss/_wui-aliases.scss

@@ -18,6 +18,10 @@
   --color-border: var(--wui-border-light);
   --color-border-light: var(--wui-border-soft);
   --color-border-strong: var(--wui-text-5);
+  // The resting and hover border of an input-like control (3:1 against the field and surface).
+  // Decorative card and table borders stay on --color-border.
+  --color-field-border: var(--wui-field-border);
+  --color-field-border-hover: var(--wui-field-border-hover);
   --color-progress-track: var(--wui-progress-track);
   // Label text inside a progress bar fill.
   --color-progress-label: var(--wui-bg-light);
@@ -32,7 +36,9 @@
   // A dark-ink glyph such as Bootstrap's .btn-close needs no filter on a light surface.
   --color-close-filter: none;
   // The border of a focused / open / active control (input, select, OTP slot, dropzone).
-  --color-focus-border: var(--wui-primary-30);
+  // It is the only focus cue on a field, so it must clear 3:1 against the field and surface
+  // (WCAG 1.4.11): the full primary, not a tint.
+  --color-focus-border: var(--wui-primary);
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 
@@ -153,6 +159,8 @@
   --color-border: var(--wui-dark-border);
   --color-border-light: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
   --color-border-strong: var(--wui-dark-border-strong);
+  --color-field-border: var(--wui-dark-field-border);
+  --color-field-border-hover: var(--wui-dark-field-border-hover);
   --color-progress-track: var(--wui-dark-progress-track);
   // Same near-black as --color-primary-text below: 4.97:1 or better on every bright fill.
   --color-progress-label: #0F0F0F;

package/scss/wui/_choice.scss

@@ -244,7 +244,7 @@
     // 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);
+    border-color: var(--color-field-border-hover);
 }
 .search-select-control.open {
     // White fill + the active/focus border, matching a focused text input (which lifts off the
@@ -414,7 +414,7 @@
     margin: 4px;
     padding: 0 12px;
     height: 40px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--radius);
     // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
     background: var(--color-field-bg);
@@ -426,7 +426,7 @@
 // Hover and focus follow AppInput, as the phone country search does: a stronger border on hover,
 // then a clean surface fill + soft primary border on focus.
 .search-select-search:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .search-select-search:focus-within {
     background: var(--color-surface);
@@ -581,7 +581,7 @@
 wui-datepicker:not([aria-invalid="true"]) .datepicker:not(.open) .datepicker-trigger:focus:not(:focus-visible),
 wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible) {
     background-color: var(--color-field-bg);
-    border-color: var(--color-border);
+    border-color: var(--color-field-border);
 }
 // Portalled to <body> and fixed-positioned from JS so a modal's
 // overflow:hidden can't clip it; top/left come from inline styles. z-index
@@ -1003,7 +1003,7 @@ button.datepicker-month:hover {
     align-items: center;
     width: 100%;
     height: var(--wui-control-height);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Match AppInput's field-radius ladder exactly (18px md), not the generic --radius (10px).
     border-radius: var(--wui-field-radius);
     // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
@@ -1024,7 +1024,7 @@ button.datepicker-month:hover {
     wui-phone:not([aria-invalid="true"])
     .phone-input-wrap:hover:not(:focus-within):not(:has(> .input.error)):not(:has(> .input.is-invalid)):not(:has(> .input[aria-invalid="true"])) {
     background: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
@@ -1238,7 +1238,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     width: 100%;
     height: 40px;
     padding: 0 12px 0 36px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--radius);
     font-size: 14px;
     color: var(--color-text);
@@ -1248,7 +1248,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .dropdown-search-input:hover:not(:focus) {
     background: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // Border is the focus cue everywhere else in the system — no glow ring here.
 // AppInput's exact focus: clean surface fill + its soft primary border token.

package/scss/wui/_controls.scss

@@ -301,7 +301,7 @@
     height: var(--wui-control-height);
     padding: 12px;
     border-radius: var(--wui-field-radius);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     background: var(--color-field-bg);
     font-size: 14px;
     line-height: 1.5;
@@ -359,7 +359,7 @@ textarea.form-control.autosize {
 .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);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .form-control:focus,
 .form-select:focus,
@@ -462,7 +462,10 @@ textarea.form-control.autosize {
 .input[readonly],
 .select[readonly],
 .textarea[readonly] {
-    background: var(--color-bg-subtle);
+    // The light decorative border and the muted fill, never the field border, so a read-only
+    // value never looks typeable.
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
     color: var(--color-text-muted);
     cursor: default;
 }
@@ -810,7 +813,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     display: flex;
     align-items: stretch;
     width: 100%;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     // Soft-filled at rest, white on focus — one shared fill for the whole control so the
     // prefix/suffix and the input body are always the SAME colour combination as the field.
@@ -820,7 +823,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
         background-color 0.12s ease;
 }
 .input-affixed:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .input-affixed:focus-within {
     background: var(--color-surface);
@@ -1098,7 +1101,7 @@ wui-select[compact] {
 .input-with-unit {
     display: flex;
     align-items: stretch;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
     // one wrapper fill, same colour combination as every other field.
@@ -1109,7 +1112,7 @@ wui-select[compact] {
     overflow: hidden;
 }
 .input-with-unit:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .input-with-unit:focus-within {
     background: var(--color-surface);
@@ -1168,7 +1171,7 @@ wui-select[compact] {
 .num-wrap {
     display: flex;
     align-items: stretch;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Field radius ladder (matches AppInput): md 18px; sm/lg step below.
     border-radius: var(--wui-field-radius);
     // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
@@ -1182,7 +1185,7 @@ wui-select[compact] {
 // 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);
+    border-color: var(--color-field-border-hover);
 }
 .num-wrap:focus-within {
     background: var(--color-surface);
@@ -1547,7 +1550,7 @@ wui-otp {
     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.
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     background: var(--color-field-bg);
     font-size: 18px;
@@ -1561,7 +1564,7 @@ wui-otp {
 // Hover — the whole field lifts its border to strong (AppInput hover), but not while a
 // slot is active (focus wins) or the field is disabled.
 .otp:hover:not(:focus-within):not(:has(.otp-field:disabled)) .otp-slot {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // The caret cannot be seen through a transparent input, so the ACTIVE box carries the
 // affordance instead — derived from selectionStart. Matches AppInput's focus: clean

package/scss/wui/_kanban.scss

@@ -8,14 +8,24 @@
 // above it that stays at the top of the viewport while the page scrolls. The board scrolls inside
 // itself, so the page never scrolls sideways.
 //
+// A board with the `fill` attribute (React `fill`, Razor fill="true") fits the screen from md up:
+// the board is the viewport's height less --wui-kanban-fill-offset, every column stretches to it,
+// and each column's card list scrolls inside the column under its fixed head. A long column then
+// never scrolls the page, so every column stays under the pointer while a card is carried. Below
+// md a fill board keeps the phone layout unchanged: the page scrolls, which a thumb expects and
+// which keeps the sticky switcher, rather than a short scroll box nested inside a short screen.
+//
 // Sizing variables, set on .wui-kanban (or any ancestor) to override:
 //   --wui-kanban-column-width       basis width of an open column (288px)
 //   --wui-kanban-collapsed-width    width of a collapsed column strip (56px)
 //   --wui-kanban-gap                space between columns (16px)
 //   --wui-kanban-column-min-height  least height of a column, so short columns still read as
-//                                   lanes (560px; not applied in the phone one-column mode)
+//                                   lanes (560px; not applied in the phone one-column mode or on
+//                                   a fill board)
 //   --wui-kanban-sticky-top         where the phone switcher sticks (0, or under the app shell's
 //                                   topbar inside .app-shell)
+//   --wui-kanban-fill-offset        the height a fill board leaves for the page around it: the
+//                                   topbar, the page head, filters (240px)
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
@@ -25,6 +35,7 @@
     --wui-kanban-gap: 16px;
     --wui-kanban-column-min-height: 560px;
     --wui-kanban-sticky-top: 0px;
+    --wui-kanban-fill-offset: 240px;
     display: block;
     position: relative;
     min-width: 0;
@@ -466,6 +477,30 @@
     }
 }
 
+// ── Fill: the board fits the screen and each column scrolls inside itself (md and up) ──
+@media (min-width: 768px) {
+    .wui-kanban[fill] .wui-kanban-board {
+        align-items: stretch;
+        height: calc(100dvh - var(--wui-kanban-fill-offset));
+    }
+    .wui-kanban[fill] .wui-kanban-column {
+        min-height: 0;
+    }
+    // 4px off the head and onto the list keeps the spacing, and leaves room inside the scroll box
+    // for the 2px focus ring of the first card.
+    .wui-kanban[fill] .wui-kanban-column:not([data-collapsed]) .wui-kanban-head {
+        flex: none;
+        padding-bottom: 4px;
+    }
+    .wui-kanban[fill] .wui-kanban-body {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+        padding-top: 4px;
+    }
+}
+
 // ── Phone column switcher and swipe hint (hidden from md up) ──
 .wui-kanban-switcher,
 .wui-kanban-hint {

package/scss/wui/_media.scss

@@ -537,7 +537,7 @@
     width: 100%;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Match AppInput: muted resting fill, lifts to a clean surface on focus.
     background: var(--color-bg-muted);
     overflow: hidden;
@@ -548,7 +548,7 @@
 }
 .file-input:hover:not(:focus-within) {
     background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .file-input:focus-within {
     background: var(--color-surface);
@@ -600,14 +600,14 @@
     // Match AppInput: muted resting fill + resting border (dashed kept as the dropzone
     // affordance), border-strong on hover, primary border + surface lift on focus/drag.
     background: var(--color-bg-muted);
-    border: 1px dashed var(--color-border);
+    border: 1px dashed var(--color-field-border);
     transition:
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
 // Hover mirrors AppInput hover — border-strong, fill unchanged.
 .file-input.file-input-tall:hover:not(:focus-within):not(.dragging) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
     background: var(--color-bg-muted);
 }
 // Focus and drag-over mirror AppInput focus — soft primary border, lift onto a clean surface.
@@ -877,7 +877,7 @@
 }
 .file-input.file-input-tall[aria-disabled="true"]:hover:not(:focus-within):not(.dragging) {
     background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    border-color: var(--color-field-border);
 }
 .wui-file-busy {
     position: absolute;

package/scss/wui/_rich-text.scss

@@ -21,7 +21,7 @@ wui-rich-text:not(:defined) > textarea {
     display: flex;
     flex-direction: column;
     width: 100%;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     background: var(--color-field-bg);
     color: var(--color-text);
@@ -33,7 +33,7 @@ wui-rich-text:not(:defined) > textarea {
         background-color 0.12s;
 }
 .wui-rich-text-shell:hover {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .wui-rich-text-shell:focus-within {
     background: var(--color-surface);

package/scss/wui/_shell.scss

@@ -547,12 +547,25 @@
 .app-nav-sub.expanded {
     grid-template-rows: 1fr;
 }
-// Child link indented under the parent label (icon slot + gap), smaller, no icon.
-.app-nav-subitem {
+// Child row indented under the parent label (icon slot + gap), smaller, no icon. A nested
+// group's toggle is a sub-item too (`.app-nav-item.app-nav-subitem` outranks the group button's
+// `font: inherit`), and each level below the first adds a 16px step through --wui-nav-depth
+// (set on the row from depth 2), so a nested group's children sit visibly under it.
+.app-nav-item.app-nav-subitem {
     min-height: 38px;
-    padding-left: 46px;
+    padding-left: calc(46px + (var(--wui-nav-depth, 1) - 1) * 16px);
     font-size: 13px;
 }
+// A sub-item label wraps to two lines before it is cut, so a long child label stays readable.
+// Top-level labels keep the single-line ellipsis.
+.app-nav-subitem .app-nav-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
 
 // ── Collapsed rail: label tooltip ────────────────────────────────────────────
 // The rail hides labels, so surface each on hover/focus as a chip to the right —