@webority/theme 0.7.9 → 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/_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;
+    }
+}