@webority/theme 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.29.0",
+  "version": "0.30.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/_choice.scss

@@ -579,8 +579,7 @@
 // shut, the trigger keeps the focus look only for keyboard focus (:focus-visible); a pick or
 // close by pointer returns it to rest. An errored field (aria-invalid on the host) keeps its red.
 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),
-wui-timepicker:not([aria-invalid="true"]) .timepicker:not(.open) .timepicker-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);
 }
@@ -1350,37 +1349,56 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     font-size: 14px;
 }
 
-// timepicker — time-of-day field with listbox popover (min/max bounds, step granularity, 12/24 display).
+// timepicker — time-of-day text field (type "7:45 pm") with a clock button that opens hour /
+// minute / AM-PM columns (min/max bounds, step granularity, 12/24 display).
 .timepicker {
     position: relative;
     width: var(--wui-timepicker-width, 12rem);
     max-width: 100%;
 }
+.wui-timepicker-field {
+    position: relative;
+}
+// The input leaves room on the right for the clock button laid over it.
 .timepicker-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    text-align: left;
-    cursor: pointer;
+    padding-right: 44px;
 }
-.timepicker-trigger [data-trigger-label] {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.timepicker-trigger.input-sm {
+    padding-right: 36px;
 }
-.timepicker-trigger > .wui-icon {
-    flex-shrink: 0;
+.wui-timepicker-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    padding: 0;
+    border: none;
+    border-radius: 0 var(--wui-field-radius) var(--wui-field-radius) 0;
+    background: transparent;
     color: var(--color-text-subtle);
+    cursor: pointer;
+    transition: color 0.12s ease;
 }
-// The label span carries this while nothing is selected — same dim ink the trigger's
-// :not(.has-value) fallback uses, kept as its own rule so the span reads as placeholder
-// even when the trigger classes are toggled independently.
-.timepicker-placeholder {
-    color: var(--color-text-subtle);
+.timepicker-trigger.input-sm + .wui-timepicker-toggle {
+    width: 36px;
 }
-.timepicker-trigger:not(.has-value) {
-    color: var(--color-text-subtle);
+.wui-timepicker-toggle:hover:not(:disabled),
+.timepicker.open .wui-timepicker-toggle {
+    color: var(--color-primary);
+}
+.wui-timepicker-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -4px;
+}
+.wui-timepicker-toggle:disabled {
+    cursor: not-allowed;
+}
+// The control's own message for typed text it refuses; the shell's .field-error sits below it.
+.wui-timepicker-error {
+    margin-top: 4px;
 }
 // Width presets.
 .time-w-sm {
@@ -1396,18 +1414,21 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     --wui-timepicker-width: 100%;
 }
 .timepicker.open .timepicker-trigger {
-    // Stay white while the time list is open — see the note on .datepicker.open above.
+    // Stay white while the columns are open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
     border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// Refused typed text keeps the soft danger border while the columns are open, as the shell's
+// host-level aria-invalid already does.
+.timepicker.open .timepicker-trigger[aria-invalid="true"] {
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
 .timepicker-pop {
     position: fixed;
     z-index: var(--wui-z-menu);
-    width: 180px;
+    width: max-content;
     max-width: calc(100vw - 16px);
-    max-height: 360px;
-    overflow-y: auto;
     padding: 8px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
@@ -1439,14 +1460,37 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
         transform: translateY(0);
     }
 }
+.wui-timepicker-cols {
+    display: flex;
+    gap: 4px;
+}
+// Each column scrolls on its own; overscroll stays inside so a flick never scrolls the page.
+.wui-timepicker-col {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 56px;
+    max-height: 264px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+}
+.wui-timepicker-col + .wui-timepicker-col {
+    padding-left: 4px;
+    border-left: 1px solid var(--color-border);
+}
 .timepicker-option {
     display: block;
+    flex-shrink: 0;
     width: 100%;
-    padding: 8px 12px;
+    min-height: 36px;
+    padding: 6px 12px;
     border: none;
     background: transparent;
-    text-align: left;
+    text-align: center;
     font-size: 14px;
+    font-variant-numeric: tabular-nums;
     color: var(--color-text);
     cursor: pointer;
     border-radius: var(--radius-sm);
@@ -1454,7 +1498,13 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
         background 0.1s,
         color 0.1s;
 }
-.timepicker-option:hover,
+// Touch screens get full 44px rows.
+@media (pointer: coarse) {
+    .timepicker-option {
+        min-height: 44px;
+    }
+}
+.timepicker-option:hover:not(:disabled),
 .timepicker-option.is-active {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
     color: var(--color-primary);
@@ -1464,6 +1514,11 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     color: var(--color-primary-text);
     font-weight: 600;
 }
+.timepicker-option:disabled {
+    color: var(--color-text-subtle);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
 .timepicker-option:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px var(--color-primary);

package/scss/wui/_kanban.scss

@@ -7,12 +7,20 @@
 // Below md the board is one column per screen: a scroll-snapped strip with a column switcher
 // above it. The board scrolls inside itself, so the page never scrolls sideways.
 //
+// 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)
+//
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
 .wui-kanban {
     --wui-kanban-column-width: 288px;
     --wui-kanban-collapsed-width: 56px;
     --wui-kanban-gap: 16px;
+    --wui-kanban-column-min-height: 560px;
     display: block;
     position: relative;
     min-width: 0;
@@ -34,8 +42,9 @@
     flex: 1 0 var(--wui-kanban-column-width);
     min-width: 0;
     max-width: 100%;
-    background: var(--color-bg-subtle);
-    border: 1px solid var(--color-border-light);
+    min-height: var(--wui-kanban-column-min-height);
+    background: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
     transition:
         background-color 160ms var(--wui-ease-ui),
@@ -74,12 +83,14 @@
     background: var(--color-danger);
 }
 
+// The title takes its own width so the count sits right beside it; the collapse button keeps to
+// the far edge through its own auto margin.
 .wui-kanban-title {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     min-width: 0;
     margin: 0;
-    font-size: 0.9375rem;
-    font-weight: 600;
+    font-size: 0.875rem;
+    font-weight: 700;
     line-height: 1.3;
     color: var(--color-text);
     overflow-wrap: anywhere;
@@ -117,6 +128,7 @@
     flex: none;
     width: 32px;
     height: 32px;
+    margin-inline-start: auto;
     padding: 0;
     border: 0;
     border-radius: var(--wui-radius);
@@ -128,8 +140,9 @@
         transition: transform 160ms var(--wui-ease-ui);
     }
 }
+// The column itself is the muted fill, so hover lifts to the surface.
 .wui-kanban-collapse:hover {
-    background: var(--color-bg-muted);
+    background: var(--color-surface);
     color: var(--color-text);
 }
 .wui-kanban-collapse:focus-visible,
@@ -247,7 +260,11 @@
     margin: 0;
     pointer-events: none;
     cursor: grabbing;
-    box-shadow: var(--wui-shadow-overlay);
+    // A 2px primary edge drawn as border plus ring, so the clone keeps the card's exact box.
+    border-color: var(--color-primary);
+    box-shadow:
+        0 0 0 1px var(--color-primary),
+        var(--wui-shadow-overlay-lg);
     rotate: 2deg;
 }
 .wui-kanban[data-wui-dragging] {
@@ -267,17 +284,30 @@
 .wui-kanban-column[data-wui-drop="ok"] {
     border: 1px dashed var(--color-primary);
 }
+// The column under the card: a 2px dashed primary edge (an inset outline over a hidden border,
+// so nothing inside shifts) on the soft primary fill, and the note becomes a filled label bar.
 .wui-kanban-column[data-wui-drop="ok"][data-wui-over],
 .wui-kanban-column[data-wui-drop="ok"][data-wui-target] {
     background: var(--color-primary-soft);
-    border-style: solid;
+    border-color: transparent;
+    outline: 2px dashed var(--color-primary);
+    outline-offset: -2px;
 }
 .wui-kanban-column[data-wui-drop="ok"] .wui-kanban-drop-note {
     color: var(--color-text);
 }
-// Refused: hatched and locked, with the reason in the note.
+.wui-kanban-column[data-wui-drop="ok"][data-wui-over] .wui-kanban-drop-note,
+.wui-kanban-column[data-wui-drop="ok"][data-wui-target] .wui-kanban-drop-note {
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    font-weight: 600;
+}
+// Refused: hatched and locked, with the reason in the note. The hatch is drawn over the subtle
+// fill, since its stripes are the muted fill an open column already has.
 .wui-kanban-column[data-wui-drop="refused"] {
     border-color: var(--color-border);
+    background-color: var(--color-bg-subtle);
     background-image: repeating-linear-gradient(
         135deg,
         var(--color-bg-muted) 0 8px,
@@ -317,6 +347,7 @@
     }
     .wui-kanban-collapse {
         order: -1;
+        margin-inline-start: 0;
     }
     .wui-kanban-collapse svg {
         transform: rotate(180deg);
@@ -389,6 +420,7 @@
     .wui-kanban-column,
     .wui-kanban-column[data-collapsed] {
         flex: 0 0 100%;
+        min-height: 0;
         scroll-snap-align: start;
         align-self: flex-start;
 
@@ -399,7 +431,7 @@
         }
         .wui-kanban-title {
             writing-mode: horizontal-tb;
-            flex: 1 1 auto;
+            flex: 0 1 auto;
             white-space: normal;
         }
         .wui-kanban-collapse {