@webority/theme 0.29.0 → 0.31.0

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 {

package/scss/wui/_media.scss

@@ -867,6 +867,18 @@
 .file-preview[aria-busy="true"] {
     cursor: progress;
 }
+// A disabled drop zone (AppDropZone `disabled`): dimmed, no pointer affordance, and no hover lift.
+.file-input[aria-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.file-input[aria-disabled="true"] > .file-input-zone-label {
+    cursor: not-allowed;
+}
+.file-input.file-input-tall[aria-disabled="true"]:hover:not(:focus-within):not(.dragging) {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
+}
 .wui-file-busy {
     position: absolute;
     inset: 0;

package/scss/wui/_shell.scss

@@ -351,6 +351,12 @@
     padding-top: 12px;
     border-top: 1px solid var(--color-border);
 }
+// A node the author places right after a group's links (`groups[].after` /
+// `<app-nav-group-after>`). Like sidebarStart it has no place on the 88px rail.
+.wui-nav-group-after {
+    flex: none;
+    margin-top: 4px;
+}
 .app-nav-group-label {
     padding: 6px 14px;
     font-size: 12px;
@@ -439,6 +445,7 @@
 }
 .app-shell.collapsed .app-nav-badge,
 .app-shell.collapsed .app-nav-group-label,
+.app-shell.collapsed .wui-nav-group-after,
 .app-shell.collapsed .app-sidebar-brand-text,
 .app-shell.collapsed .app-sidebar-start {
     display: none;
@@ -756,6 +763,7 @@
     .app-shell.app-shell.collapsed .app-nav-text,
     .app-shell.app-shell.collapsed .app-nav-badge,
     .app-shell.app-shell.collapsed .app-nav-group-label,
+    .app-shell.app-shell.collapsed .wui-nav-group-after,
     .app-shell.app-shell.collapsed .app-sidebar-start {
         display: revert;
     }

package/scss/wui/_table-server.scss

@@ -8,11 +8,12 @@
 // (`.tbl-empty-block`) reuse the client-side table rules in _data.scss unchanged.
 
 // While a page is in flight the current rows stay in place, dimmed, so the table does not jump;
-// they are not interactive until the new page lands.
+// they are not interactive until the new page lands. A table with no rows shows placeholder rows
+// instead, at full strength.
 .wui-table-server > .table-wrap[aria-busy="true"] {
     cursor: progress;
 }
-.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
     opacity: 0.55;
     pointer-events: none;
     transition: opacity 0.15s ease;
@@ -34,7 +35,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+    .wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
         transition: none;
     }
 }

package/scss/wui/_tour.scss

@@ -0,0 +1,97 @@
+// ── Product tour ──
+// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
+// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>
+// and positions .wui-tour-spot (over the target) and .wui-tour-card (against the spot, through
+// anchorOverlay, which sets position, top and left inline). Everything visual is here, every
+// colour a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
+wui-tour,
+wui-tour-step {
+    display: none;
+}
+
+.wui-tour-layer {
+    position: fixed;
+    inset: 0;
+    z-index: var(--wui-z-tour);
+}
+
+// The dim is the spot's own shadow, so the hole around the target needs no clip-path.
+.wui-tour-spot {
+    position: fixed;
+    border-radius: var(--wui-radius-sm);
+    box-shadow:
+        0 0 0 2px var(--color-primary),
+        0 0 0 100vmax var(--color-scrim-strong);
+    pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+    .wui-tour-spot {
+        transition:
+            top 160ms ease,
+            left 160ms ease,
+            width 160ms ease,
+            height 160ms ease;
+    }
+}
+
+.wui-tour-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: min(360px, calc(100vw - 16px));
+    padding: 16px;
+    overflow-y: auto;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    &:focus {
+        outline: none;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+}
+
+.wui-tour-position {
+    margin: 0;
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-tour-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+.wui-tour-text {
+    margin: 0;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+.wui-tour-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 4px;
+}
+.wui-tour-nav {
+    display: flex;
+    gap: 8px;
+}
+// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
+// moving the row, and Skip reads as the quiet action.
+.wui-tour-skip {
+    color: var(--color-text-muted);
+}
+.wui-tour-back,
+.wui-tour-next {
+    min-width: 64px;
+}