@webority/theme 0.24.0 → 0.26.0

package/scss/wui/_image-crop.scss

@@ -0,0 +1,146 @@
+// ── Image crop ──
+// <wui-image-crop>: the crop surface AppLogoPicker / <app-logo-picker> shows in a dialog before
+// upload. The image is fitted into the stage; the frame is positioned by the element (inline
+// left/top/width/height) and dims everything outside it with a very large box-shadow, which the
+// stage clips. Every colour is a theme token, so dark mode follows the token flip.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-image-crop {
+    display: block;
+}
+
+.wui-crop-stage {
+    position: relative;
+    height: min(360px, 55vh);
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-muted);
+    // The frame is dragged with a finger, so the browser must not scroll or zoom the page instead.
+    touch-action: none;
+    user-select: none;
+    cursor: grab;
+}
+.wui-crop-stage:active {
+    cursor: grabbing;
+}
+.wui-crop-stage:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.wui-crop-img {
+    position: absolute;
+    max-width: none;
+    pointer-events: none;
+}
+.wui-crop-img[hidden],
+.wui-crop-frame[hidden] {
+    display: none;
+}
+
+.wui-crop-frame {
+    position: absolute;
+    border: 2px solid #fff;
+    box-shadow:
+        0 0 0 9999px rgb(0 0 0 / 55%),
+        0 0 0 1px rgb(0 0 0 / 35%);
+    // Thirds guide, so a person lining up a face or a logo has something to hold against.
+    background-image:
+        linear-gradient(to right, transparent 33.2%, rgb(255 255 255 / 35%) 33.3%, transparent 33.5%, transparent 66.5%, rgb(255 255 255 / 35%) 66.7%, transparent 66.8%),
+        linear-gradient(to bottom, transparent 33.2%, rgb(255 255 255 / 35%) 33.3%, transparent 33.5%, transparent 66.5%, rgb(255 255 255 / 35%) 66.7%, transparent 66.8%);
+}
+.wui-crop-frame--round {
+    border-radius: 50%;
+    background-image: none;
+}
+
+// A corner handle is a 44px tap target drawn as a small square at its corner.
+.wui-crop-handle {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: nwse-resize;
+}
+.wui-crop-handle::after {
+    content: "";
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 45%);
+}
+.wui-crop-handle:focus-visible::after {
+    background: var(--color-primary);
+}
+.wui-crop-handle--nw {
+    top: -22px;
+    left: -22px;
+}
+.wui-crop-handle--ne {
+    top: -22px;
+    right: -22px;
+    cursor: nesw-resize;
+}
+.wui-crop-handle--sw {
+    bottom: -22px;
+    left: -22px;
+    cursor: nesw-resize;
+}
+.wui-crop-handle--se {
+    right: -22px;
+    bottom: -22px;
+}
+.wui-crop-handle--nw::after {
+    top: 15px;
+    left: 15px;
+}
+.wui-crop-handle--ne::after {
+    top: 15px;
+    right: 15px;
+}
+.wui-crop-handle--sw::after {
+    bottom: 15px;
+    left: 15px;
+}
+.wui-crop-handle--se::after {
+    right: 15px;
+    bottom: 15px;
+}
+
+.wui-crop-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 16px;
+}
+.wui-crop-zoom {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+}
+.wui-crop-zoombtn {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+}
+.wui-crop-zoombtn:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-crop-zoombtn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}

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

@@ -0,0 +1,55 @@
+// 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