@webority/theme 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.34.0",
+  "version": "0.35.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-components.scss

@@ -30,6 +30,7 @@
 @import "wui/choice";
 @import "wui/media";
 @import "wui/image-crop";
+@import "wui/avatar-picker";
 @import "wui/navigation";
 @import "wui/card";
 @import "wui/data";

package/scss/wui/_avatar-picker.scss

@@ -0,0 +1,116 @@
+// ── Avatar picker ──
+// AppAvatarPicker / <app-avatar-picker>: a profile photo (or its placeholder) beside the actions
+// that change it. The crop dialog it opens is <wui-image-crop> (_image-crop.scss). The diameter
+// comes from --wui-avatar-size on .wui-avatar-picker, which both wrappers set from `size`.
+// 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-avatar-picker {
+    // The md diameter; both wrappers set their own size inline, which wins.
+    --wui-avatar-size: 96px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+}
+
+.wui-avatar-picker-face {
+    position: relative;
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: var(--wui-avatar-size);
+    height: var(--wui-avatar-size);
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
+    color: var(--color-primary);
+    font: inherit;
+    cursor: pointer;
+}
+.wui-avatar-picker-face:disabled {
+    cursor: default;
+}
+.wui-avatar-picker-face[aria-busy="true"] {
+    cursor: progress;
+}
+.wui-avatar-picker-face:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+}
+// A file held over the photo: the ring says it can be dropped there.
+.wui-avatar-picker.is-dragging .wui-avatar-picker-face {
+    outline: 2px dashed var(--color-primary);
+    outline-offset: 3px;
+}
+
+.wui-avatar-picker-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.wui-avatar-picker-placeholder {
+    display: grid;
+    place-items: center;
+    font-size: calc(var(--wui-avatar-size) * 0.36);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1;
+}
+
+// The camera mark on the ring's edge, so the photo reads as something you can change.
+.wui-avatar-picker-badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
+    width: calc(max(28px, var(--wui-avatar-size) * 0.3));
+    height: calc(max(28px, var(--wui-avatar-size) * 0.3));
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+}
+.wui-avatar-picker-face:disabled:not([aria-busy="true"]) .wui-avatar-picker-badge {
+    display: none;
+}
+
+.wui-avatar-picker-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+.wui-avatar-picker-actions .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+.wui-avatar-picker-actions [hidden] {
+    display: none;
+}
+
+// "Take photo" opens the front camera, which only a phone or tablet has: it shows on touch screens.
+.wui-avatar-picker-actions .wui-avatar-picker-camera {
+    display: none;
+}
+@media (pointer: coarse) {
+    .wui-avatar-picker-actions .wui-avatar-picker-camera:not([hidden]) {
+        display: inline-flex;
+    }
+    .wui-avatar-picker-actions .btn {
+        min-height: 44px;
+    }
+}
+
+// On a phone the actions sit under the photo, full width, so each is an easy target.
+@media (max-width: 575.98px) {
+    .wui-avatar-picker {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}

package/scss/wui/_image-crop.scss

@@ -1,5 +1,5 @@
 // ── Image crop ──
-// <wui-image-crop>: the crop surface AppLogoPicker / <app-logo-picker> shows in a dialog before
+// <wui-image-crop>: the crop surface AppLogoPicker / AppAvatarPicker (and their Razor tags) show 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.
@@ -33,6 +33,11 @@ wui-image-crop {
     position: absolute;
     max-width: none;
     pointer-events: none;
+    // A phone photo carries its orientation in EXIF; pinned here so a page rule cannot turn it off,
+    // because the element and the canvas both rely on the browser drawing it the right way up.
+    image-orientation: from-image;
+    // The element turns the image about its centre for rotate().
+    transform-origin: 50% 50%;
 }
 .wui-crop-img[hidden],
 .wui-crop-frame[hidden] {
@@ -144,3 +149,67 @@ wui-image-crop {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
+
+// Rotate and Reset (the rotatable attribute), on their own row so the zoom slider keeps its width
+// on a phone.
+.wui-crop-tools {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 12px;
+}
+.wui-crop-tools[hidden],
+.wui-crop-previews[hidden] {
+    display: none;
+}
+.wui-crop-toolbtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 0 14px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    font-size: 0.875rem;
+    cursor: pointer;
+}
+.wui-crop-toolbtn:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-crop-toolbtn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// Live copies of the crop (the previews attribute), drawn by the element on a canvas each.
+.wui-crop-previews {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 16px;
+}
+.wui-crop-preview {
+    flex: none;
+    border-radius: var(--radius);
+    background: var(--color-bg-muted);
+    box-shadow: 0 0 0 1px var(--color-border);
+}
+.wui-crop-previews--round .wui-crop-preview {
+    border-radius: 50%;
+}
+
+// A finger needs a 44px target; a mouse keeps the compact controls.
+@media (pointer: coarse) {
+    .wui-crop-zoombtn {
+        width: 44px;
+        height: 44px;
+    }
+    .wui-crop-toolbtn {
+        min-height: 44px;
+    }
+}

package/scss/wui/_kanban.scss

@@ -53,7 +53,9 @@
     min-width: 0;
     max-width: 100%;
     min-height: var(--wui-kanban-column-min-height);
-    background: var(--color-bg-muted);
+    // A lane is the neutral grey-blue in every brand: a brand layer retints --color-bg-muted (Signal
+    // makes it violet), but leaves --bs-tertiary-bg alone. Dark mode maps it to --wui-dark-bg-muted.
+    background: var(--bs-tertiary-bg);
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
     transition:
@@ -132,36 +134,63 @@
     display: none;
 }
 
-.wui-kanban-collapse {
+// The page's own controls at the right of the column head (a "+" that adds a card, say). They sit
+// before the collapse button, which then gives up its auto margin.
+.wui-kanban-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: none;
+    margin-inline-start: auto;
+}
+.wui-kanban-actions + .wui-kanban-collapse {
+    margin-inline-start: 0;
+}
+
+// Shown only on a collapsed column that refuses the carried card (see the collapsed rail below).
+.wui-kanban-lock {
+    display: none;
+    flex: none;
+    color: var(--color-text-muted);
+}
+
+// .wui-kanban-action is the icon button a page puts in the actions slot; it matches the toggle.
+.wui-kanban-collapse,
+.wui-kanban-action {
     display: inline-grid;
     place-items: center;
     flex: none;
     width: 32px;
     height: 32px;
-    margin-inline-start: auto;
     padding: 0;
     border: 0;
     border-radius: var(--wui-radius);
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
+}
+.wui-kanban-collapse {
+    margin-inline-start: auto;
 
     svg {
         transition: transform 160ms var(--wui-ease-ui);
     }
 }
 // The column itself is the muted fill, so hover lifts to the surface.
-.wui-kanban-collapse:hover {
+.wui-kanban-collapse:hover,
+.wui-kanban-action:hover {
     background: var(--color-surface);
     color: var(--color-text);
 }
 .wui-kanban-collapse:focus-visible,
+.wui-kanban-action:focus-visible,
 .wui-kanban-switch:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
 @media (pointer: coarse) {
-    .wui-kanban-collapse {
+    .wui-kanban-collapse,
+    .wui-kanban-action {
         width: 44px;
         height: 44px;
     }
@@ -224,6 +253,19 @@
 .wui-kanban-card[data-wui-overflow] {
     display: none;
 }
+// A card's title, for the product's card content: two lines at every width, phones included, so
+// one long title never stretches a card past its neighbours.
+.wui-kanban-card-title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow-wrap: anywhere;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.35;
+}
 
 // "Show N more" under a capped column's cards; "Show fewer" once it is open.
 .wui-kanban-more {
@@ -373,7 +415,9 @@
     border: 1px dashed var(--color-border-strong);
 }
 
-// ── Collapsed column: a narrow strip that still takes drops ──
+// ── Collapsed column: a narrow rail that still takes drops ──
+// Top to bottom: the count, a lock while the carried card cannot land here, the title on its side,
+// then the expand button.
 .wui-kanban-column[data-collapsed] {
     flex: 0 0 var(--wui-kanban-collapsed-width);
     align-self: stretch;
@@ -381,20 +425,33 @@
     .wui-kanban-head {
         flex-direction: column;
         flex-wrap: nowrap;
-        padding: 10px 6px;
+        gap: 12px;
+        padding: 14px 6px;
+    }
+    .wui-kanban-count {
+        order: 1;
+    }
+    .wui-kanban-lock {
+        order: 2;
+    }
+    &[data-wui-drop="refused"] .wui-kanban-lock {
+        display: inline-flex;
     }
     .wui-kanban-title {
+        order: 3;
         writing-mode: vertical-rl;
         flex: none;
         white-space: nowrap;
     }
     .wui-kanban-collapse {
-        order: -1;
+        order: 4;
         margin-inline-start: 0;
     }
     .wui-kanban-collapse svg {
         transform: rotate(180deg);
     }
+    .wui-kanban-dot,
+    .wui-kanban-actions,
     .wui-kanban-summary,
     .wui-kanban-body,
     .wui-kanban-more,
@@ -487,13 +544,25 @@
         .wui-kanban-head {
             flex-direction: row;
             flex-wrap: wrap;
+            gap: 6px 8px;
             padding: 12px 12px 8px;
         }
+        .wui-kanban-count,
+        .wui-kanban-lock,
+        .wui-kanban-title {
+            order: 0;
+        }
         .wui-kanban-title {
             writing-mode: horizontal-tb;
             flex: 0 1 auto;
             white-space: normal;
         }
+        .wui-kanban-dot {
+            display: block;
+        }
+        .wui-kanban-actions {
+            display: inline-flex;
+        }
         .wui-kanban-collapse {
             display: none;
         }
@@ -516,6 +585,10 @@
     .wui-kanban-summary:empty {
         display: none;
     }
+    // The drop note already says why; the rail's lock is a wide-screen cue.
+    .wui-kanban-column[data-collapsed][data-wui-drop="refused"] .wui-kanban-lock {
+        display: none;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {