@webority/theme 0.7.8 → 0.8.0

package/scss/wui/_overlays.scss

@@ -430,10 +430,16 @@
     z-index: var(--wui-z-toast);
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8px;
     max-width: min(92vw, 400px);
 }
 
+// Bootstrap's .toast-container stacks children with margin-bottom: $toast-spacing (1.5rem),
+// which ADDED to the flex gap above — the stack spacing is the gap alone.
+.wui-toast-container > :not(:last-child) {
+    margin-bottom: 0;
+}
+
 .wui-toast {
     --wui-toast-accent: var(--color-primary);
     position: relative;
@@ -441,10 +447,12 @@
     align-items: flex-start;
     gap: 12px;
     width: 100%;
-    padding: 14px 14px 14px 18px;
+    padding: 14px 16px;
     background: var(--color-surface);
     color: var(--color-text);
-    border: 1px solid var(--color-border-light);
+    // The full-strength border, not border-light: on a white page the surface-on-white
+    // card otherwise merges into the background (the overlay shadow alone is too soft).
+    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg, 12px);
     box-shadow: var(--wui-shadow-overlay);
     overflow: hidden;
@@ -456,15 +464,6 @@
     animation: wui-toast-in 0.24s ease;
 }
 
-// The left accent bar reads the variant tint.
-.wui-toast::before {
-    content: "";
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: 4px;
-    background: var(--wui-toast-accent);
-}
-
 // While a swipe is in progress the toast follows the pointer with no transition.
 .wui-toast--dragging {
     transition: none;
@@ -513,21 +512,81 @@
     overflow-wrap: anywhere;
 }
 
+// Hierarchy: with a title present the message reads as the SUBTITLE and drops to muted —
+// title (ink, 600) > message (muted) > action (compact ink, hover reveals the variant tint).
+// A title-less toast keeps full ink, or a bare "Saved" would look washed out.
+.wui-toast-title + .wui-toast-message {
+    color: var(--color-text-muted);
+}
+
+// Determinate task progress (toast `progress` 0–100) — work advancing, not time running out.
+.wui-toast-task {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 7px;
+}
+.wui-toast-track {
+    flex: 1 1 auto;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    overflow: hidden;
+}
+.wui-toast-track-fill {
+    height: 100%;
+    border-radius: 999px;
+    background: var(--wui-toast-accent);
+    transition: width 200ms var(--wui-ease-ui);
+}
+.wui-toast-track-pct {
+    flex: none;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+}
+
 // Action button — tinted with the variant accent, scoped to the toast so it never
 // restyles an arbitrary .btn-link a rich body might contain.
+// Lives in the content column, below the message/progress (never beside them).
+// Deliberately NOT a .btn — Bootstrap's button chrome (padding, hover lift, transitions)
+// has no business on a text-line action, so the element carries only this class and the
+// styling is self-contained. Neutral bold ink like the title; underline on hover, no motion.
+// The 3px/8px padding exists for the hover pill; the negative margins give it back, so the
+// resting text sits exactly where the padding-less version did and the approved rhythm holds.
 .wui-toast-action {
     flex: none;
-    align-self: center;
-    color: var(--wui-toast-accent);
-    text-decoration: none;
+    align-self: flex-start;
+    background: none;
+    border: 0;
+    padding: 3px 8px;
+    margin: -1px 0 -3px -8px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--color-text);
+    font-family: inherit;
     font-size: 0.8125rem;
     font-weight: 600;
-    padding: 2px 8px;
+    line-height: 1.4;
+    text-decoration: none;
     white-space: nowrap;
+    transition: background-color 120ms ease, color 120ms ease;
 }
+// Hover: a soft pill in the toast's variant tint — highlight, not underline, no motion.
 .wui-toast-action:hover {
+    background: color-mix(in srgb, var(--wui-toast-accent) 14%, transparent);
     color: var(--wui-toast-accent);
-    text-decoration: underline;
+}
+.wui-toast-action:focus-visible {
+    outline: 2px solid var(--wui-toast-accent);
+    outline-offset: 1px;
+}
+
+// Geometry: optical space above the action = message half-leading (3.5px) + column gap
+// (2px) + 2px margin + action half-leading (2px) ≈ 9.5px; below = action half-leading
+// (2px) + this padding (7px) ≈ 9px. Equal by construction — don't re-balance one side alone.
+.wui-toast:has(.wui-toast-action) {
+    padding-bottom: 7px;
 }
 .wui-toast-action:focus-visible {
     outline: 2px solid var(--wui-toast-accent);
@@ -540,18 +599,18 @@
     font-size: 0.65rem;
 }
 
-// A pure-CSS auto-dismiss countdown: the bar shrinks over the toast's duration; the JS side
-// listens for animationend to remove it. Because :hover/:focus-within pause the animation,
-// animationend cannot fire while the toast is being read — a self-synchronising timer.
+// The auto-dismiss TIMER, deliberately invisible (height 0): the element still runs the
+// countdown animation because its animationend is what dismisses the toast on both surfaces,
+// and :hover/:focus-within pausing it is what keeps a toast open while being read. Do not
+// remove the element or the animation — only its visibility is retired (a visible countdown
+// reads as pressure).
 .wui-toast-progress {
     position: absolute;
     left: 0;
     bottom: 0;
-    height: 3px;
+    height: 0;
     width: 100%;
     transform-origin: left center;
-    background: var(--wui-toast-accent);
-    opacity: 0.5;
     animation-name: wui-toast-countdown;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
@@ -594,9 +653,146 @@
     }
 }
 
+// ── Entrance variants (toast/WUI.toast `animation`; host default via AppToast/app-toast) ──
+// The base .wui-toast entrance above is `rise`. The variants below animate the STANDALONE
+// scale/translate properties so they never fight the swipe-to-dismiss inline transform.
+
+// `organic` — studied frame-by-frame from Ivan Bjelajac's notification: the surface
+// materializes softly while the status icon grows from a dot with a slight overshoot,
+// and the message trails in last.
+.wui-toast--anim-organic {
+    animation: wui-toast-materialize 360ms var(--wui-ease-out-quart);
+}
+.wui-toast--anim-organic .wui-toast-icon {
+    animation: wui-toast-icon-grow 420ms 60ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
+}
+.wui-toast--anim-organic .wui-toast-content {
+    animation: wui-toast-content-in 300ms 190ms var(--wui-ease-out-quart) backwards;
+}
+
+// `jelly` — drops in with a squash-and-stretch landing.
+.wui-toast--anim-jelly {
+    animation: wui-toast-jelly 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// `spring` — slides up from below with an elastic settle.
+.wui-toast--anim-spring {
+    animation: wui-toast-spring 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes wui-toast-materialize {
+    from {
+        opacity: 0;
+        scale: 0.97;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+@keyframes wui-toast-icon-grow {
+    0% {
+        scale: 0;
+    }
+    70% {
+        scale: 1.18;
+    }
+    100% {
+        scale: 1;
+    }
+}
+@keyframes wui-toast-content-in {
+    from {
+        opacity: 0;
+        translate: 6px 0;
+    }
+    to {
+        opacity: 1;
+        translate: 0 0;
+    }
+}
+@keyframes wui-toast-jelly {
+    0% {
+        opacity: 0;
+        translate: 0 -46px;
+        scale: 0.6 0.6;
+    }
+    55% {
+        opacity: 1;
+        translate: 0 6px;
+        scale: 1.05 0.85;
+    }
+    75% {
+        translate: 0 -2px;
+        scale: 0.97 1.05;
+    }
+    100% {
+        opacity: 1;
+        translate: 0 0;
+        scale: 1 1;
+    }
+}
+@keyframes wui-toast-spring {
+    from {
+        opacity: 0;
+        translate: 0 64px;
+        scale: 0.92;
+    }
+    to {
+        opacity: 1;
+        translate: 0 0;
+        scale: 1;
+    }
+}
+
+// ── Inverse surface (toast/WUI.toast `surface: 'inverse'`) ──
+// The toast renders on the OPPOSITE surface of the active mode — a dark card on a light
+// page, a light card on a dark page — so the stack always contrasts with the content.
+// Everything inside consumes --color-* vars, so re-pointing them here restyles the whole
+// card (icon, text hierarchy, action pill, progress track) in one place.
+.wui-toast--surface-inverse {
+    --color-surface: var(--wui-dark-bg-surface);
+    --color-border: var(--wui-dark-border);
+    --color-text: var(--wui-dark-text);
+    --color-text-muted: var(--wui-dark-text-muted);
+    --color-bg-muted: var(--wui-dark-bg-muted);
+}
+// Bootstrap's .btn-close glyph is ink-dark; on the dark card it needs the white filter.
+.wui-toast--surface-inverse .wui-toast-close {
+    filter: invert(1) grayscale(100%) brightness(200%);
+}
+:root[data-theme="dark"] .wui-toast--surface-inverse,
+:root[data-bs-theme="dark"] .wui-toast--surface-inverse {
+    --color-surface: var(--wui-bg-light);
+    --color-border: var(--wui-border-light);
+    --color-text: var(--wui-text-heading);
+    --color-text-muted: var(--wui-text-2);
+    --color-bg-muted: var(--wui-bg-muted);
+}
+:root[data-theme="dark"] .wui-toast--surface-inverse .wui-toast-close,
+:root[data-bs-theme="dark"] .wui-toast--surface-inverse .wui-toast-close {
+    filter: none;
+}
+
+// ── Corner treatments (toast/WUI.toast `shape`) — `rounded` is the base radius above ──
+.wui-toast--shape-pill {
+    border-radius: 999px;
+    align-items: center;
+    padding-block: 12px;
+}
+.wui-toast--shape-pill .wui-toast-icon,
+.wui-toast--shape-pill .wui-toast-close {
+    margin-top: 0;
+}
+.wui-toast--shape-sharp {
+    border-radius: 4px;
+}
+
 @media (prefers-reduced-motion: reduce) {
-    // Drop the entrance slide; the countdown bar stays — it is the auto-dismiss timer, not decoration.
-    .wui-toast {
+    // Drop the entrance motion; the countdown bar stays — it is the auto-dismiss timer, not decoration.
+    .wui-toast,
+    .wui-toast--anim-organic .wui-toast-icon,
+    .wui-toast--anim-organic .wui-toast-content {
         animation: none;
         transition: none;
     }

package/scss/wui/_tone-pill.scss

@@ -0,0 +1,23 @@
+// ── Shared tone-pill color mixin ──
+// Consolidates the tone→color mapping used by .badge, .status-label, and .chip:
+//   background: var(--color-{tone}-soft)
+//   color:      var(--color-{tone}-text)   (override via $text — see below)
+//   border-color: transparent
+//
+// $text exists because the status tones and `primary` name their on-tint color
+// differently: --color-{status}-text IS the on-tint hue, but --color-primary-text
+// is the text-on-SOLID-primary color (near-black in dark mode) and fails AA on the
+// soft tint — primary pills pass var(--color-primary) instead.
+//
+// Component-specific overrides (e.g. .badge-primary's colored border) are applied
+// after the mixin call.
+
+@mixin wui-tone-pill-colors($tone, $text: null) {
+    background: var(--color-#{$tone}-soft);
+    @if $text {
+        color: $text;
+    } @else {
+        color: var(--color-#{$tone}-text);
+    }
+    border-color: transparent;
+}

package/scss/wui/_toolbar.scss

@@ -0,0 +1,138 @@
+// ── Toolbar ──
+// AppToolbar / <app-toolbar> — a Figma-style tool strip: a pill of icon tools where
+// the active tool expands to reveal its label. Radio-backed (no JS needed on Razor);
+// the expand/collapse is pure CSS off :checked.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+.toolbar {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+}
+.toolbar.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.toolbar-item {
+    display: inline-flex;
+    align-items: center;
+    height: 36px;
+    padding-inline: 9px;
+    border-radius: var(--wui-radius);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    margin-bottom: 0;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.toolbar-item:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+// The active tool: brand fill + the label slides open beside the icon.
+.toolbar-item:has(.toolbar-input:checked) {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+}
+.toolbar-item:has(.toolbar-input:disabled) {
+    opacity: 0.5;
+    cursor: default;
+}
+.toolbar-item:has(.toolbar-input:focus-visible) {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// Visually hidden but focusable/announceable — same trick as .segmented-input.
+.toolbar-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+    appearance: none;
+    opacity: 0;
+}
+
+.toolbar-item-icon {
+    display: grid;
+    place-items: center;
+    line-height: 1;
+}
+
+.toolbar-item-label {
+    max-width: 0;
+    margin-left: 0;
+    opacity: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition:
+        max-width 240ms var(--wui-ease-ui),
+        margin-left 240ms var(--wui-ease-ui),
+        opacity 180ms var(--wui-ease-ui);
+}
+.toolbar-item:has(.toolbar-input:checked) .toolbar-item-label {
+    max-width: 10rem;
+    margin-left: 7px;
+    opacity: 1;
+}
+
+.toolbar-sep {
+    width: 1px;
+    align-self: stretch;
+    margin-block: 6px;
+    margin-inline: 3px;
+    background: var(--color-border);
+}
+
+.toolbar-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.toolbar-action:hover:not(:disabled) {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.toolbar-action:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.toolbar-action:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .toolbar-item,
+    .toolbar-item-label,
+    .toolbar-action {
+        transition: none;
+    }
+}

package/scss/wui/_typography.scss

@@ -121,29 +121,19 @@
 
 /* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
 .chip.primary {
-    border-color: transparent;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
 }
 .chip.success {
-    border-color: transparent;
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
+    @include wui-tone-pill-colors(success);
 }
 .chip.warning {
-    border-color: transparent;
-    background: var(--color-warning-soft);
-    color: var(--color-warning-text);
+    @include wui-tone-pill-colors(warning);
 }
 .chip.danger {
-    border-color: transparent;
-    background: var(--color-danger-soft);
-    color: var(--color-danger-text);
+    @include wui-tone-pill-colors(danger);
 }
 .chip.info {
-    border-color: transparent;
-    background: var(--color-info-soft);
-    color: var(--color-info-text);
+    @include wui-tone-pill-colors(info);
 }
 .chip.primary .chip-ic,
 .chip.success .chip-ic,
@@ -238,6 +228,25 @@
     min-width: 0;
     align-items: center;
 }
+// Chips scale with the control size — the taller the field, the larger its tokens
+// (the element always emits `.chip.chip-sm`; these override it per size tier). The
+// two-class `.ms-chips .chip` outranks the single `.chip-sm`, so md is the base and
+// the sm/lg tiers layer over it.
+.ms-chips .chip {
+    gap: 5px;
+    padding: 3px 9px;
+    font-size: 0.8125rem;
+}
+.search-select-sm .ms-chips .chip {
+    gap: 4px;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+}
+.search-select-lg .ms-chips .chip {
+    gap: 6px;
+    padding: 5px 12px;
+    font-size: 0.875rem;
+}
 // Collapse mode (collapse-chips): chips stay on one row; the JS folds the overflow into
 // a "+N" counter (see WuiMultiSelect._collapseChips).
 wui-multiselect[collapse-chips] .ms-chips {
@@ -295,6 +304,27 @@ wui-multiselect[collapse-chips] .ms-chips {
 .ms-input:focus {
     outline: none;
 }
+// AppTagInput lays the input on the LEFT with the chips filling and wrapping to its
+// right (its template renders the input before the chips). Multiselect keeps its
+// chips-first layout, so these overrides are scoped to `wui-taginput`.
+wui-taginput .ms-input {
+    // Don't grow to fill — hold a modest resting width on the left; the chips take
+    // everything to the right. (align-items:center on the control centres the input
+    // against the chip row, so it needs no min-height of its own.)
+    flex: 0 1 auto;
+    flex-basis: 120px;
+    min-width: 96px;
+}
+wui-taginput .ms-chips {
+    flex: 1 1 auto;
+}
+// Match AppInput's per-size heights: the shared `.search-select-multi` floors md at
+// 40px, but AppInput's md is the 44px control-height token — raise the floor so the
+// sm/md/lg progression lines up with a text field beside it. (sm 36 / lg 52 already
+// come from the size-specific `.search-select-{sm,lg} .search-select-control` rules.)
+wui-taginput .search-select-multi {
+    min-height: var(--wui-control-height);
+}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {

package/scss/wui/_utilities.scss

@@ -73,7 +73,6 @@
     background: transparent;
     color: var(--color-text-subtle);
     cursor: help;
-    transform: scaleY(-1);
     transition: color 0.15s;
 }
 .infotip-btn:hover {
@@ -598,6 +597,35 @@
     color: var(--color-primary);
 }
 
+// AppAlert extras — a leading icon and/or a bold heading line. Bootstrap already
+// styles `.alert`/`.alert-{variant}`; these rules only lay out the icon column and
+// give the plain `.alert-heading` div its type treatment (Bootstrap's own rule is
+// just `color: inherit`, meant for an <h4>).
+.alert-has-icon {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+.alert-icon {
+    flex: none;
+    display: inline-flex;
+    // Nudge onto the first line's optical centre.
+    margin-top: 1px;
+}
+.alert-content {
+    flex: 1;
+    min-width: 0;
+}
+.alert .alert-heading {
+    margin-bottom: 2px;
+    font-size: 1rem;
+    font-weight: 700;
+}
+// The body's trailing paragraph shouldn't add space below the alert.
+.alert .alert-content > :last-child {
+    margin-bottom: 0;
+}
+
 // ============================================================================
 // Inline help glyph — a hint attached to a word rather than to a field label.
 // (For a field label use `.infotip`, which is a real popover button.)