@webority/theme 0.7.5 → 0.7.7

package/scss/wui/_flow.scss

@@ -10,6 +10,10 @@
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
 // ============================================================================
 .stepper {
+    // Full width so the flex:1 steps spread evenly across the container. Without it,
+    // a stepper dropped into a flex/grid parent shrinks to its content and the steps
+    // bunch at one edge, colliding their labels.
+    width: 100%;
     display: flex;
     align-items: flex-start;
     gap: 0;
@@ -79,27 +83,61 @@
 .step.done .step-label {
     color: var(--color-text);
 }
-// A step that is an <a> is a deep link back to an earlier stage of the wizard.
+// An interactive step — an <a> deep-linking back to a stage, or a <button> in a
+// JS-driven wizard. A button needs its chrome stripped so it reads as a step.
+button.step {
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+}
 a.step {
     text-decoration: none;
+}
+a.step,
+button.step {
     cursor: pointer;
 }
-a.step:hover .step-circle {
+a.step:hover .step-circle,
+button.step:hover .step-circle {
     box-shadow: 0 0 0 4px var(--color-primary-soft);
     transform: scale(1.04);
 }
-a.step:hover .step-label {
+a.step:hover .step-label,
+button.step:hover .step-label {
     color: var(--color-primary);
 }
-a.step:focus-visible {
+a.step:focus-visible,
+button.step:focus-visible {
     outline: none;
 }
-// The ring moves onto the circle: an outline on the <a> would box the whole column.
-a.step:focus-visible .step-circle {
+// The ring moves onto the circle: an outline on the <a>/<button> would box the whole column.
+a.step:focus-visible .step-circle,
+button.step:focus-visible .step-circle {
     box-shadow:
         0 0 0 4px var(--color-primary-soft),
         0 0 0 6px var(--color-primary);
 }
+// A step that failed its stage — a red circle with an alert, so an invalid step
+// reads as wrong at a glance rather than merely "not done".
+.step.error .step-circle {
+    border-color: var(--color-danger);
+    background: var(--color-danger);
+    color: var(--color-on-scrim);
+}
+.step.error .step-label {
+    color: var(--color-danger-text);
+}
+// A secondary line under the label — a short "what this step is for". Muted and
+// narrow so it never competes with the label it explains.
+.step-desc {
+    max-width: 130px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--color-text-muted);
+    overflow-wrap: break-word;
+}
 
 .stepper-journey {
     display: flex;
@@ -166,6 +204,15 @@ a.step:focus-visible .step-circle {
 .stepper-journey .step.active .step-index {
     color: var(--color-primary);
 }
+.stepper-journey .step.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+    box-shadow: none;
+    transform: none;
+}
+.stepper-journey .step.error .step-index {
+    color: var(--color-danger-text);
+}
 .stepper-journey .step-label {
     max-width: none;
     margin-top: 8px;
@@ -176,6 +223,15 @@ a.step:focus-visible .step-circle {
     text-overflow: ellipsis;
     color: var(--color-text);
 }
+// In the journey bar the description sits inside the text column, under the label —
+// wider and left-aligned to match, not the centred compact treatment.
+.stepper-journey .step-desc {
+    max-width: none;
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .stepper-journey .step-line {
     flex: none;
     width: 32px;
@@ -199,8 +255,86 @@ a.step:focus-visible .step-circle {
         display: none;
     }
 }
+// Vertical orientation. The steps run down a side rail instead of across — for a
+// narrow column, a drawer, or a settings wizard.
+// ----------------------------------------------------------------------------
+.stepper-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    // The gap between steps; kept in sync with the ::after `bottom` so the connector
+    // spans it exactly and still meets the next circle.
+    gap: 18px;
+    padding: 0;
+}
+// Each compact step becomes a two-column row: the circle in a fixed rail on the
+// left, the label and its description stacked on the right.
+.stepper-vertical .step {
+    display: grid;
+    grid-template-columns: 28px 1fr;
+    column-gap: 12px;
+    // No gap between the label and its description — they read as one block; the
+    // base .step gap of 10px is for the horizontal circle→label spacing.
+    row-gap: 0;
+    align-items: start;
+    text-align: left;
+}
+// The circle spans the whole text block rather than sitting in the first row: a
+// row sized to the 28px circle would leave dead space below a single-line label
+// before the description. Spanning lets each row size to its text instead.
+.stepper-vertical .step-circle {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: start;
+}
+.stepper-vertical .step-label {
+    grid-column: 2;
+    grid-row: 1;
+    max-width: none;
+    // Centred against the circle when the step has no description (single 28px row);
+    // a no-op when a description makes the row size to the label.
+    align-self: center;
+}
+.stepper-vertical .step-desc {
+    grid-column: 2;
+    grid-row: 2;
+    max-width: none;
+}
+// The compact connector is horizontal (::before); redraw it as a vertical segment
+// down the circle's centre, from below one circle to the top of the next.
+.stepper-vertical .step + .step::before {
+    content: none;
+}
+.stepper-vertical .step:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    // 13px = half the 28px circle minus 1 for the 2px line's own width.
+    left: 13px;
+    top: 28px;
+    // Reaches through the 18px inter-step gap to meet the next circle's top; keep
+    // this in sync with the .stepper-vertical `gap`.
+    bottom: -18px;
+    width: 2px;
+    background: var(--color-border);
+    z-index: 0;
+}
+.stepper-vertical .step.done:not(:last-child)::after {
+    background: var(--color-primary);
+}
+// The journey bar stacked vertically reuses its own narrow-width treatment: a plain
+// column with the horizontal connectors dropped (a real vertical rail here would
+// fight the two-line text blocks for alignment).
+.stepper-journey.stepper-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+}
+.stepper-journey.stepper-vertical .step-line {
+    display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
+    button.step:hover .step-circle,
     .stepper-journey .step-circle {
         transition: none;
         transform: none;
@@ -407,4 +541,79 @@ a.step:focus-visible .step-circle {
     text-align: center;
 }
 
-// ============================================================================
+// ============================================================================
+// Form layout helpers — section, row (grid), actions footer.
+//
+// AppFormSection wraps related fields with a title + description intro.
+// AppFormRow arranges fields in a responsive grid (1/2/3 columns).
+// AppFormActions is an action button footer, optionally sticky-bottom.
+// ============================================================================
+.form-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.form-section-head {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.form-section-title {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+}
+.form-section-desc {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+}
+.form-section-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+// ============================================================================
+.form-row-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--form-cols, 2), minmax(0, 1fr));
+    gap: 16px;
+    align-items: start;
+}
+// Below md, collapse to 1 column.
+@include media-breakpoint-down(md) {
+    .form-row-grid.form-row-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+// ============================================================================
+.form-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    justify-content: flex-end;
+}
+.form-actions-start {
+    justify-content: flex-start;
+}
+.form-actions-between {
+    justify-content: space-between;
+}
+.form-actions-sticky {
+    position: sticky;
+    bottom: 0;
+    padding: 16px 0;
+    margin-top: 24px;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-surface);
+}
+@media (prefers-reduced-motion: reduce) {
+    .form-actions-sticky {
+        transition: none;
+    }
+}

package/scss/wui/_media.scss

@@ -6,26 +6,55 @@
 // here may be overridden by a later partial. Never reorder the imports.
 
 // ── Avatar ──
-// A photo fills the avatar disc edge to edge; the circle is the frame, so
-// the image is cropped to it rather than letterboxed.
+// The initials/icon face is the base layer; a photo overlays it edge to edge, cropped
+// to the disc. While the photo loads — or if it breaks — the face shows through.
+.avatar-face {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
 .avatar > .avatar-img {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     border-radius: inherit;
     object-fit: cover;
     display: block;
+    // Photo fades + scales in so a late-arriving blob doesn't pop.
+    animation: wui-avatar-in 0.28s var(--wui-ease-out-quart, ease) both;
 }
 .avatar {
-    width: 32px;
-    height: 32px;
+    // `--avatar-size` drives the default (md, its 32px fallback) and any custom size. It is
+    // read via `var(… , 32px)` rather than declared here, so an avatar with no size INHERITS
+    // one from an AppAvatarGroup that sets it — while a preset class (explicit width below) or
+    // an avatar's own inline `--avatar-size` still wins. Never re-declare it on `.avatar`.
+    position: relative;
+    width: var(--avatar-size, 32px);
+    height: var(--avatar-size, 32px);
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
     color: var(--color-primary);
-    font-size: 12px;
+    font-size: calc(var(--avatar-size, 32px) * 0.375);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex: none;
+    user-select: none;
+}
+
+// ── Size scale ──
+.avatar-xs {
+    width: 20px;
+    height: 20px;
+    font-size: 8px;
+}
+.avatar-sm {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
 }
 .avatar-lg {
     width: 48px;
@@ -37,10 +66,230 @@
     height: 64px;
     font-size: 22px;
 }
-.avatar-sm {
-    width: 24px;
-    height: 24px;
+.avatar-2xl {
+    width: 96px;
+    height: 96px;
+    font-size: 34px;
+}
+
+// ── Shape ── (`shape`): the disc is the default; rounded/square are card-like.
+.avatar-rounded {
+    border-radius: 25%;
+}
+.avatar-square {
+    border-radius: 12%;
+}
+
+// ── Tone ── (`tone`): the initials fill. `auto` derives a stable hue from the name.
+.avatar-neutral {
+    background: color-mix(in srgb, var(--color-text-muted) 16%, var(--color-surface));
+    color: var(--color-text-muted);
+}
+.avatar-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.avatar-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.avatar-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.avatar-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.avatar-auto {
+    background: hsl(var(--avatar-hue, 0) 60% 90%);
+    color: hsl(var(--avatar-hue, 0) 42% 32%);
+}
+
+// ── Ring ── (`ring`): a tone-coloured ring with a surface gap, separating stacked
+// avatars or marking an active one.
+.avatar-ring {
+    box-shadow:
+        0 0 0 2px var(--color-surface),
+        0 0 0 4px currentColor;
+}
+
+// ── Corner badge ── (`badge`): a small count/marker at the top-right.
+.avatar-badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 999px;
+    background: var(--color-danger);
+    color: #fff;
     font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    box-shadow: 0 0 0 2px var(--color-surface);
+}
+
+// ── Clickable ── (`href` / `onClick`): the whole disc is one control.
+.avatar-clickable {
+    padding: 0;
+    border: 0;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    transition:
+        transform 0.15s var(--wui-ease-out-quart, ease),
+        box-shadow 0.15s ease;
+}
+.avatar-clickable:hover {
+    transform: scale(1.06);
+}
+.avatar-clickable:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// ── Presence status ── (`status`): a dot at the lower-right, ringed in the surface
+// colour so it reads on a photo. Online quietly pulses.
+.avatar-status {
+    position: absolute;
+    right: 2%;
+    bottom: 2%;
+    width: 28%;
+    height: 28%;
+    min-width: 8px;
+    min-height: 8px;
+    max-width: 16px;
+    max-height: 16px;
+    border-radius: 999px;
+    box-shadow: 0 0 0 2px var(--color-surface);
+}
+.avatar-status-online {
+    background: var(--color-success);
+}
+.avatar-status-away {
+    background: var(--color-warning);
+}
+.avatar-status-busy {
+    background: var(--color-danger);
+}
+.avatar-status-offline {
+    background: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-surface));
+}
+.avatar-status-online::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--color-success);
+    animation: wui-avatar-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+// ── Hover label ── (`label`): a tooltip above the avatar, revealed on hover/focus.
+.avatar-label {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    background: var(--color-text);
+    color: var(--color-surface);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 30;
+    transition:
+        opacity 0.16s ease,
+        transform 0.16s var(--wui-ease-out-quart, ease);
+}
+.avatar-label::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: var(--color-text);
+}
+.avatar:hover > .avatar-label,
+.avatar:focus-visible > .avatar-label,
+.avatar:focus-within > .avatar-label {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+// ── Avatar group ── (AppAvatarGroup): a row of overlapping avatars, each ringed in the
+// surface colour so it reads against its neighbour. Hover raises one to the front.
+.avatar-group {
+    display: inline-flex;
+    align-items: center;
+}
+.avatar-group > .avatar {
+    margin-left: -10px;
+    box-shadow: 0 0 0 2px var(--color-surface);
+    transition: transform 0.15s var(--wui-ease-out-quart, ease);
+}
+.avatar-group > .avatar:first-child {
+    margin-left: 0;
+}
+.avatar-group > .avatar:hover {
+    z-index: 1;
+    transform: translateY(-2px);
+}
+.avatar-group-tight > .avatar {
+    margin-left: -14px;
+}
+.avatar-group-loose > .avatar {
+    margin-left: -4px;
+}
+// The "+N" overflow chip — a muted avatar-shaped tail.
+.avatar-more {
+    background: color-mix(in srgb, var(--color-text-muted) 16%, var(--color-surface));
+    color: var(--color-text-muted);
+    font-weight: 600;
+}
+
+@keyframes wui-avatar-in {
+    from {
+        opacity: 0;
+        transform: scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes wui-avatar-ping {
+    0% {
+        opacity: 0.5;
+        transform: scale(1);
+    }
+    70%,
+    100% {
+        opacity: 0;
+        transform: scale(2.2);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .avatar > .avatar-img {
+        animation: none;
+    }
+    .avatar-status-online::after {
+        animation: none;
+    }
+    .avatar-label {
+        transition: opacity 0.16s ease;
+    }
 }
 
 // ── File attach ──
@@ -63,6 +312,14 @@
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
 }
+// The hidden input is a sibling of the label (not a descendant), so :focus-within on
+// .attach-drop never fires — reach the label through the general sibling combinator instead.
+.attach-drop:has(+ input:focus-visible) {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .attach-drop-icon {
     flex: 0 0 auto;
     width: 36px;
@@ -161,7 +418,7 @@
     width: 28px;
     height: 28px;
     border: 0;
-    background: rgba(0, 0, 0, 0.62);
+    background: var(--color-scrim-strong);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     color: #fff;
@@ -524,8 +781,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    // Subtle dim so the glassy CTA reads on any image, without hiding it.
-    background: rgba(16, 24, 40, 0.22);
+    // Subtle dim so the glassy CTA reads on any image, without hiding it —
+    // half the standard scrim strength.
+    background: color-mix(in srgb, var(--color-scrim) 50%, transparent);
     opacity: 0;
     transition: opacity 0.15s ease;
 }
@@ -560,7 +818,7 @@
     padding: 0;
     border: 2px solid transparent;
     border-radius: 50%;
-    background: rgba(16, 24, 40, 0.55);
+    background: var(--color-scrim-strong);
     color: #fff;
     cursor: pointer;
     opacity: 0;
@@ -646,7 +904,7 @@
     align-items: center;
     justify-content: center;
     gap: 4px;
-    background: rgba(20, 26, 33, 0.62);
+    background: var(--color-scrim-strong);
     color: #fff;
     font-size: 11px;
     font-weight: 600;
@@ -794,7 +1052,7 @@
     align-items: center;
     justify-content: center;
     gap: 4px;
-    background: var(--color-scrim);
+    background: var(--color-scrim-strong);
     color: var(--color-on-scrim);
     font-size: 12px;
     font-weight: 600;

package/scss/wui/_navigation.scss

@@ -42,7 +42,9 @@
     height: 100vh;
     background: var(--color-surface);
     border-left: 1px solid var(--color-border);
-    z-index: 200;
+    // Same rung as the mobile sidebar drawer — the highest shell-chrome rung below
+    // the modal ladder, so this panel is never trapped under sticky/fixed shell chrome.
+    z-index: var(--wui-z-shell-drawer);
     transform: translateX(100%);
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
@@ -54,11 +56,11 @@
 .drawer-backdrop {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.4);
+    background: var(--color-scrim);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
-    z-index: 150;
+    z-index: var(--wui-z-shell-scrim);
 }
 .drawer-backdrop.open {
     opacity: 1;

package/scss/wui/_overlays.scss

@@ -15,7 +15,7 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    background: rgba(15, 23, 42, 0.45);
+    background: var(--color-scrim);
     z-index: var(--wui-z-modal-backdrop);
 }
 .modal.wui-modal-shell {
@@ -328,3 +328,47 @@
     font-size: 14px;
     font-weight: 500;
 }
+
+// ── Toast (notifications) ──
+// Bootstrap toast styling + wui extensions for title/action buttons.
+// Used by both React AppToastContainer and Razor WUI.toast.
+
+// Toast header with title
+.wui-toast-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    border: none;
+}
+
+.wui-toast-header strong {
+    font-size: 14px;
+    font-weight: 600;
+    color: inherit;
+}
+
+// Toast action button — inherits text color from the variant tone. Scoped to the
+// component class, not every .btn-link a consumer might place in a toast body.
+.toast .wui-toast-action {
+    color: inherit;
+    text-decoration: none;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 2px 8px;
+    white-space: nowrap;
+    flex: none;
+    opacity: 0.9;
+    transition: opacity 150ms;
+}
+
+.toast .wui-toast-action:hover {
+    opacity: 1;
+    text-decoration: underline;
+}
+
+.toast .wui-toast-action:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}