@webority/theme 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.31.0",
+  "version": "0.32.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/_kanban.scss

@@ -5,7 +5,8 @@
 // classes, so a React re-render never wipes it.
 //
 // 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.
+// 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.
 //
 // Sizing variables, set on .wui-kanban (or any ancestor) to override:
 //   --wui-kanban-column-width       basis width of an open column (288px)
@@ -13,6 +14,8 @@
 //   --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)
+//   --wui-kanban-sticky-top         where the phone switcher sticks (0, or under the app shell's
+//                                   topbar inside .app-shell)
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
@@ -21,11 +24,18 @@
     --wui-kanban-collapsed-width: 56px;
     --wui-kanban-gap: 16px;
     --wui-kanban-column-min-height: 560px;
+    --wui-kanban-sticky-top: 0px;
     display: block;
     position: relative;
     min-width: 0;
     max-width: 100%;
 }
+// The shell's topbar is sticky too, so the switcher stops below it. 72px is .app-topbar's
+// min-height in _shell.scss; change both together. :where() keeps this at .wui-kanban's own
+// weight, so a page's `.wui-kanban { --wui-kanban-sticky-top: … }` still wins inside the shell.
+:where(.app-shell) .wui-kanban {
+    --wui-kanban-sticky-top: 72px;
+}
 
 .wui-kanban-board {
     display: flex;
@@ -210,9 +220,42 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.wui-kanban-card[hidden] {
+.wui-kanban-card[hidden],
+.wui-kanban-card[data-wui-overflow] {
+    display: none;
+}
+
+// "Show N more" under a capped column's cards; "Show fewer" once it is open.
+.wui-kanban-more {
+    display: block;
+    width: calc(100% - 16px);
+    min-height: 36px;
+    margin: 0 8px 8px;
+    padding: 6px 10px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+.wui-kanban-more[hidden] {
     display: none;
 }
+.wui-kanban-more:hover {
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+.wui-kanban-more:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+@media (pointer: coarse) {
+    .wui-kanban-more {
+        min-height: 44px;
+    }
+}
 .wui-kanban[readonly] .wui-kanban-card,
 .wui-kanban-card[data-wui-locked] {
     cursor: default;
@@ -354,6 +397,7 @@
     }
     .wui-kanban-summary,
     .wui-kanban-body,
+    .wui-kanban-more,
     .wui-kanban-empty {
         display: none;
     }
@@ -365,18 +409,34 @@
     }
 }
 
-// ── Phone column switcher (hidden from md up) ──
-.wui-kanban-switcher {
+// ── Phone column switcher and swipe hint (hidden from md up) ──
+.wui-kanban-switcher,
+.wui-kanban-hint {
     display: none;
 }
 
 @media (max-width: 767.98px) {
+    // Sticky over the page's own background, under the shell topbar (z-index 10).
     .wui-kanban-switcher {
+        position: sticky;
+        top: var(--wui-kanban-sticky-top);
+        z-index: 5;
         display: flex;
         gap: 6px;
         margin-bottom: 12px;
+        padding-block: 6px;
         overflow-x: auto;
         scrollbar-width: none;
+        background: var(--color-bg);
+    }
+    .wui-kanban-hint {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        margin: -6px 0 12px;
+        color: var(--color-text-muted);
+        font-size: 0.75rem;
     }
     .wui-kanban-switch {
         display: inline-flex;
@@ -443,6 +503,9 @@
         .wui-kanban-body {
             display: flex;
         }
+        .wui-kanban-more:not([hidden]) {
+            display: block;
+        }
         .wui-kanban-empty:not([hidden]) {
             display: block;
         }