@webority/theme 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.25.0",
+  "version": "0.26.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/_fonts.scss

@@ -1,7 +1,8 @@
 // Webority Sans and Webority Serif, shipped with the theme. URLs are relative to the compiled CSS:
 // dist/webority-theme.css reads ../fonts (the npm package) and wwwroot/css/webority-theme.css reads
 // ../fonts (the Razor static web asset, _content/Webority.Ui.Razor/fonts). Sans is SIL OFL 1.1
-// (fonts/sans/OFL.txt travels with it).
+// (fonts/sans/OFL.txt travels with it). The sans files are the webority-fonts Latin cut (Latin, ₹, basic
+// Greek, arrows), about 42 KB each; a character outside it falls back to the next font in the stack.
 @font-face {
     font-family: 'Webority Sans';
     font-style: normal;

package/scss/_wui-components.scss

@@ -34,6 +34,7 @@
 @import "wui/card";
 @import "wui/data";
 @import "wui/table-server";
+@import "wui/kanban";
 @import "wui/overlays";
 @import "wui/modal-remote";
 @import "wui/utilities";

package/scss/wui/_data.scss

@@ -791,12 +791,14 @@
     outline-offset: -2px;
 }
 
-// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below sm each row is a
-// card. The first column (after the library's select/expand cells) leads the card at full width,
-// every other cell is a "label: value" line from its data-label, the select checkbox sits in the
-// card's top corner and the row actions close the card. The header row is visually hidden, not
-// removed, so the column names stay available to assistive technology.
-@include media-breakpoint-down(sm) {
+// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below md (768px) each
+// row is a card. The first column (after the library's select/expand cells) leads the card at full
+// width, every other cell is a "label: value" line from its data-label, the select checkbox sits in
+// the card's top corner and the row actions close the card. The header row is visually hidden, not
+// removed, so the column names stay available to assistive technology. 768 matches the phone shell
+// (its bottom tab bar shows below the same width): a ledger squeezed into a 600px column scrolled
+// sideways while the rest of the page was already in its phone layout.
+@include media-breakpoint-down(md) {
     // Cards flow with the page: no sideways scroll, and no maxHeight scroll box (an inline
     // max-height from `maxHeight` has to be overridden, hence !important).
     .table-wrap:has(> .table-ledger.wui-table-stack) {

package/scss/wui/_kanban.scss

@@ -0,0 +1,434 @@
+// ── Kanban board ──
+// AppKanban / <app-kanban> over <wui-kanban>. The library owns the column shell, the card shell
+// and every drag state; card CONTENT is the product's. State lives in data attributes the element
+// writes (data-wui-drop, data-wui-over, data-wui-dragging, data-collapsed, aria-busy), never in
+// 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.
+//
+// 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;
+    display: block;
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.wui-kanban-board {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--wui-kanban-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    padding-bottom: 8px;
+}
+
+.wui-kanban-column {
+    display: flex;
+    flex-direction: column;
+    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);
+    border-radius: var(--wui-radius-lg);
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        border-color 160ms var(--wui-ease-ui);
+}
+
+// ── Column head ──
+.wui-kanban-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    padding: 12px 12px 8px;
+}
+
+.wui-kanban-dot {
+    flex: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-text-subtle);
+}
+.wui-kanban-column[data-tone="primary"] .wui-kanban-dot {
+    background: var(--color-primary);
+}
+.wui-kanban-column[data-tone="info"] .wui-kanban-dot {
+    background: var(--color-info);
+}
+.wui-kanban-column[data-tone="success"] .wui-kanban-dot {
+    background: var(--color-success);
+}
+.wui-kanban-column[data-tone="warning"] .wui-kanban-dot {
+    background: var(--color-warning);
+}
+.wui-kanban-column[data-tone="danger"] .wui-kanban-dot {
+    background: var(--color-danger);
+}
+
+.wui-kanban-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+}
+
+.wui-kanban-count {
+    flex: none;
+    min-width: 24px;
+    padding: 1px 8px;
+    border-radius: 999px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.5;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+}
+.wui-kanban-count:empty {
+    display: none;
+}
+
+.wui-kanban-collapse {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+
+    svg {
+        transition: transform 160ms var(--wui-ease-ui);
+    }
+}
+.wui-kanban-collapse:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-kanban-collapse:focus-visible,
+.wui-kanban-switch:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+@media (pointer: coarse) {
+    .wui-kanban-collapse {
+        width: 44px;
+        height: 44px;
+    }
+}
+
+.wui-kanban-summary {
+    flex: 1 0 100%;
+    padding-left: 18px;
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+}
+.wui-kanban-summary:empty {
+    display: none;
+}
+
+// ── Body, cards, empty state ──
+.wui-kanban-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 64px;
+    padding: 0 8px 8px;
+}
+
+.wui-kanban-empty {
+    margin: 0 8px 8px;
+    padding: 16px 8px;
+    border: 1px dashed var(--color-border);
+    border-radius: var(--wui-radius);
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    text-align: center;
+}
+.wui-kanban-card {
+    position: relative;
+    min-height: 44px;
+    padding: 12px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    color: var(--color-text);
+    cursor: grab;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+    transition:
+        box-shadow 160ms var(--wui-ease-ui),
+        opacity 160ms var(--wui-ease-ui);
+}
+.wui-kanban-card:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-kanban-card:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.wui-kanban-card[hidden] {
+    display: none;
+}
+.wui-kanban[readonly] .wui-kanban-card,
+.wui-kanban-card[data-wui-locked] {
+    cursor: default;
+}
+// The card while it is carried: its place stays, as a faint outline.
+.wui-kanban-card[data-wui-dragging] {
+    opacity: 0.35;
+    border-style: dashed;
+}
+// Picked up by keyboard: the card itself shows it is lifted.
+.wui-kanban-card[data-wui-lifted] {
+    box-shadow: var(--wui-shadow-overlay);
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+// Saving: the card cannot move again until the server answers.
+.wui-kanban-card[aria-busy="true"] {
+    cursor: progress;
+    opacity: 0.7;
+}
+.wui-kanban-card[aria-busy="true"]::after {
+    content: "";
+    position: absolute;
+    inset: auto 0 0;
+    height: 3px;
+    border-radius: 0 0 var(--wui-radius) var(--wui-radius);
+    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
+    background-size: 200% 100%;
+    animation: wui-kanban-saving 1.1s linear infinite;
+}
+@keyframes wui-kanban-saving {
+    from {
+        background-position: 100% 0;
+    }
+    to {
+        background-position: -100% 0;
+    }
+}
+
+.wui-kanban-ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--wui-z-tooltip);
+    margin: 0;
+    pointer-events: none;
+    cursor: grabbing;
+    box-shadow: var(--wui-shadow-overlay);
+    rotate: 2deg;
+}
+.wui-kanban[data-wui-dragging] {
+    cursor: grabbing;
+}
+
+// ── Drop states, while a card is carried ──
+.wui-kanban-drop-note {
+    margin: 0 8px 8px;
+    padding: 8px 10px;
+    border-radius: var(--wui-radius);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+}
+.wui-kanban-column[data-wui-drop="ok"] {
+    border: 1px dashed var(--color-primary);
+}
+.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;
+}
+.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="refused"] {
+    border-color: var(--color-border);
+    background-image: repeating-linear-gradient(
+        135deg,
+        var(--color-bg-muted) 0 8px,
+        transparent 8px 16px
+    );
+    cursor: not-allowed;
+}
+.wui-kanban-column[data-wui-drop="refused"] .wui-kanban-body {
+    opacity: 0.55;
+}
+.wui-kanban-column[data-wui-drop="refused"] .wui-kanban-drop-note {
+    color: var(--color-danger-text);
+    border: 1px solid var(--color-danger-soft);
+}
+.wui-kanban-column[data-wui-drop="refused"][data-wui-over],
+.wui-kanban-column[data-wui-drop="refused"][data-wui-target] {
+    border-color: var(--color-danger);
+}
+.wui-kanban-column[data-wui-drop="source"][data-wui-target] {
+    border: 1px dashed var(--color-border-strong);
+}
+
+// ── Collapsed column: a narrow strip that still takes drops ──
+.wui-kanban-column[data-collapsed] {
+    flex: 0 0 var(--wui-kanban-collapsed-width);
+    align-self: stretch;
+
+    .wui-kanban-head {
+        flex-direction: column;
+        flex-wrap: nowrap;
+        padding: 10px 6px;
+    }
+    .wui-kanban-title {
+        writing-mode: vertical-rl;
+        flex: none;
+        white-space: nowrap;
+    }
+    .wui-kanban-collapse {
+        order: -1;
+    }
+    .wui-kanban-collapse svg {
+        transform: rotate(180deg);
+    }
+    .wui-kanban-summary,
+    .wui-kanban-body,
+    .wui-kanban-empty {
+        display: none;
+    }
+    .wui-kanban-drop-note {
+        margin: 0 4px 8px;
+        padding: 6px 4px;
+        font-size: 0.75rem;
+        writing-mode: vertical-rl;
+    }
+}
+
+// ── Phone column switcher (hidden from md up) ──
+.wui-kanban-switcher {
+    display: none;
+}
+
+@media (max-width: 767.98px) {
+    .wui-kanban-switcher {
+        display: flex;
+        gap: 6px;
+        margin-bottom: 12px;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+    .wui-kanban-switch {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        flex: none;
+        min-height: 44px;
+        padding: 0 14px;
+        border: 1px solid var(--color-border);
+        border-radius: 999px;
+        background: var(--color-surface);
+        color: var(--color-text-muted);
+        font-size: 0.875rem;
+        font-weight: 500;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+    // A long column title shortens rather than widening its pill.
+    .wui-kanban-switch-title {
+        max-width: 14ch;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .wui-kanban-switch[aria-current="true"] {
+        border-color: var(--color-primary);
+        background: var(--color-primary-soft);
+        color: var(--color-text);
+    }
+
+    .wui-kanban-board {
+        gap: 12px;
+        scroll-snap-type: x mandatory;
+        scrollbar-width: none;
+    }
+    .wui-kanban-board::-webkit-scrollbar,
+    .wui-kanban-switcher::-webkit-scrollbar {
+        display: none;
+    }
+    // Collapse is a wide-screen space saver: on a phone every column is full width.
+    .wui-kanban-column,
+    .wui-kanban-column[data-collapsed] {
+        flex: 0 0 100%;
+        scroll-snap-align: start;
+        align-self: flex-start;
+
+        .wui-kanban-head {
+            flex-direction: row;
+            flex-wrap: wrap;
+            padding: 12px 12px 8px;
+        }
+        .wui-kanban-title {
+            writing-mode: horizontal-tb;
+            flex: 1 1 auto;
+            white-space: normal;
+        }
+        .wui-kanban-collapse {
+            display: none;
+        }
+        .wui-kanban-summary {
+            display: block;
+        }
+        .wui-kanban-body {
+            display: flex;
+        }
+        .wui-kanban-empty:not([hidden]) {
+            display: block;
+        }
+        .wui-kanban-drop-note {
+            writing-mode: horizontal-tb;
+        }
+    }
+    .wui-kanban-summary:empty {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-kanban-ghost {
+        rotate: none;
+    }
+    .wui-kanban-card[aria-busy="true"]::after {
+        animation: none;
+        background: var(--color-primary);
+    }
+}

package/scss/wui/_modal-remote.scss

@@ -1,3 +1,55 @@
-// Server-loaded modal: loading skeleton, error state and the fullscreen size.
+// Server-loaded modal: loading skeleton, error state and the submit-failure alert. The fullscreen
+// size lives with the modal itself in _overlays.scss, since a page modal uses it too.
 //
 // Part of the wui-components layer; imported after its base partial (see _wui-components.scss).
+
+// The loading card: three shimmer lines in the body while the fragment is on its way. The
+// `.skeleton` shimmer is the shared utility; this only shapes the lines.
+.wui-modal-loading {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 4px 0 8px;
+}
+.wui-modal-skeleton {
+    height: 14px;
+    border-radius: var(--radius-sm);
+}
+.wui-modal-skeleton--short {
+    width: 60%;
+}
+
+// The error card: a centred message with Close and Try again, in place of the content that did
+// not load. The dialog stays open so the user decides what happens next.
+.wui-modal-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 8px 8px;
+    text-align: center;
+}
+.wui-modal-state-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-modal-state-text {
+    margin: 0;
+    max-width: 40ch;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+.wui-modal-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+// A failed submit keeps the form and says so above it.
+.wui-modal-submit-error {
+    margin-bottom: 16px;
+}

package/scss/wui/_overlays.scss

@@ -296,6 +296,45 @@
     }
 }
 
+// Fullscreen size: the card is the whole viewport. Both surfaces put `wui-modal-fullscreen` on the
+// `.modal` shell (Razor's size="fullscreen", React's size="fullscreen"); neither sets a max-width.
+// Header and footer are flex: none, so they stay pinned while the body scrolls between them, and
+// they pad past a notch or home indicator. `100dvh` follows the phone's collapsing toolbar; `100vh`
+// is the fallback for a browser without dynamic viewport units.
+// 100vw, not the shell's 100%: the document reserves a stable scrollbar gutter, which a fixed box's
+// 100% leaves uncovered, so a fullscreen card would stop short of the right edge.
+.modal.wui-modal-shell.wui-modal-fullscreen {
+    width: 100vw;
+    padding: 0;
+}
+.modal.wui-modal-shell.wui-modal-fullscreen .modal-dialog.wui-rb-dialog {
+    width: 100%;
+    height: 100%;
+    align-items: stretch;
+}
+.wui-modal-fullscreen .wui-modal {
+    width: 100vw;
+    max-width: none;
+    height: 100vh;
+    height: 100dvh;
+    max-height: none;
+    border-radius: 0;
+}
+.wui-modal-fullscreen .wui-modal-header {
+    padding-top: max(16px, env(safe-area-inset-top));
+    padding-left: max(20px, env(safe-area-inset-left));
+    padding-right: max(20px, env(safe-area-inset-right));
+}
+.wui-modal-fullscreen .wui-modal-body {
+    padding-left: max(22px, env(safe-area-inset-left));
+    padding-right: max(22px, env(safe-area-inset-right));
+}
+.wui-modal-fullscreen .wui-modal-footer {
+    padding-bottom: max(16px, env(safe-area-inset-bottom));
+    padding-left: max(22px, env(safe-area-inset-left));
+    padding-right: max(22px, env(safe-area-inset-right));
+}
+
 // ── Confirm dialog ──
 // Confirmation dialog — centred status icon + title + message, two equal
 // side-by-side CTAs. Runs headerless (Modal hideHeader), so the body