@webority/theme 0.7.8 → 0.8.0

package/scss/wui/_flow.scss

@@ -5,9 +5,25 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
-// Wizard stepper. Two variants of one component:
+// Wizard stepper. Three variants of one component:
 //   .stepper           — compact: numbered circle above a label, line behind.
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
+//   .stepper-icons     — large connected icon badges with a "STEP n" eyebrow.
+//
+// Fully themable through a small set of `--wui-step-*` custom properties — set them on
+// the stepper (or the wizard host, or any ancestor: they inherit), or flip the whole
+// accent with a `.wui-step-tone-*` class. Every colour/size below reads a var with the
+// historical value as the fallback, so an UNSET wizard looks exactly as before while a
+// product can recolour or resize it without overriding a single selector:
+//   --wui-step-accent      solid state colour (active fill, done fill/rail, active eyebrow)
+//   --wui-step-accent-fg   text/icon on the accent fill
+//   --wui-step-soft        soft tint (active ring; the journey/icons "done" badge bg)
+//   --wui-step-soft-fg     text/icon on the soft tint (the "done" badge check)
+//   --wui-step-connector   the incomplete-rail colour
+//   --wui-step-size        compact/vertical badge diameter (default 28px)
+//   --wui-step-badge-size  icons-variant badge diameter (default 56px)
+// Every variant defaults to the brand primary — active, done and rail share one accent
+// (no multi-colour). Colour variety is opt-in: a `.wui-step-tone-*` class or a var override.
 // ============================================================================
 .stepper {
     // Full width so the flex:1 steps spread evenly across the container. Without it,
@@ -19,6 +35,18 @@
     gap: 0;
     padding: 0 8px;
 }
+// A STANDALONE AppStepper gets the brand (primary) accent as a DECLARED default, so a tone
+// class placed on the stepper element itself overrides it. The wizard is excluded because
+// its tone class rides on the wizard HOST (an ancestor of the generated header): declaring
+// the vars on the header would block that inherited override, so the wizard leans on the
+// var fallbacks instead — which now also default to primary. :where() keeps this at ZERO
+// specificity, so a .wui-step-tone-* class or an inline --wui-step-* override still wins.
+:where(.stepper:not(.wizard-stepper)) {
+    --wui-step-accent: var(--color-primary);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-primary-soft);
+    --wui-step-soft-fg: var(--color-primary);
+}
 .step {
     position: relative;
     flex: 1;
@@ -34,23 +62,23 @@
 .step + .step::before {
     content: "";
     position: absolute;
-    // 13px = half the 28px circle, minus 1 for the 2px line's own height.
-    top: 13px;
-    left: calc(-50% + 18px);
-    right: calc(50% + 18px);
+    // Centred on the badge: half the diameter, minus 1 for the 2px line's own height.
+    top: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    left: calc(-50% + var(--wui-step-size, 28px) / 2 + 4px);
+    right: calc(50% + var(--wui-step-size, 28px) / 2 + 4px);
     height: 2px;
-    background: var(--color-border);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 .step-circle {
     position: relative;
     z-index: 1;
     flex: none;
-    width: 28px;
-    height: 28px;
+    width: var(--wui-step-size, 28px);
+    height: var(--wui-step-size, 28px);
     display: inline-grid;
     place-items: center;
     border: 1.5px solid var(--color-border);
@@ -61,15 +89,15 @@
     color: var(--color-text-subtle);
 }
 .step.active .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
 }
 .step-label {
     max-width: 130px;
@@ -101,12 +129,12 @@ button.step {
 }
 a.step:hover .step-circle,
 button.step:hover .step-circle {
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
     transform: scale(1.04);
 }
 a.step:hover .step-label,
 button.step:hover .step-label {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 a.step:focus-visible,
 button.step:focus-visible {
@@ -116,8 +144,8 @@ button.step:focus-visible {
 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);
+        0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
+        0 0 0 6px var(--wui-step-accent, 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".
@@ -173,12 +201,12 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
+    background: var(--wui-step-soft, var(--color-primary-soft));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-journey .step.active .step-circle {
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -199,10 +227,10 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--color-success-text);
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-journey .step.active .step-index {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-journey .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -240,7 +268,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--color-success);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 // Below xl the four label+title pairs no longer fit side by side, so the bar
 // becomes a vertical list and the connectors go away.
@@ -270,7 +298,7 @@ button.step:focus-visible .step-circle {
 // left, the label and its description stacked on the right.
 .stepper-vertical .step {
     display: grid;
-    grid-template-columns: 28px 1fr;
+    grid-template-columns: var(--wui-step-size, 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.
@@ -307,18 +335,18 @@ button.step:focus-visible .step-circle {
 .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;
+    // Half the badge minus 1 for the 2px line's own width; runs from below the circle.
+    left: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    top: var(--wui-step-size, 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);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, 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
@@ -332,15 +360,169 @@ button.step:focus-visible .step-circle {
     display: none;
 }
 
+// .stepper-icons — large icon badges joined by a rail, with a "STEP n" eyebrow above
+// each title. Done gets a soft-accent tint + filled connector; active is a solid-accent
+// badge; pending is a muted badge — all one accent (brand primary by default). Built for
+// icon-per-step flows — each step sets `icon` (a step with no icon falls back to its number).
+// ----------------------------------------------------------------------------
+.stepper-icons {
+    align-items: flex-start;
+    padding: 8px 8px 0;
+}
+.stepper-icons .step {
+    gap: 6px;
+}
+.stepper-icons .step-circle {
+    width: var(--wui-step-badge-size, 56px);
+    height: var(--wui-step-badge-size, 56px);
+    border: none;
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 22px;
+    transition:
+        background 0.2s ease,
+        color 0.2s ease,
+        transform 0.2s ease;
+}
+// Like every variant, the icons stepper defaults to the brand primary — a solid-primary
+// active badge, a soft-primary done badge, a primary rail. Every colour routes through the
+// shared --wui-step-* vars, so a `.wui-step-tone-*` class or an override recolours it.
+.stepper-icons .step.active .step-circle {
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    // The compact variant rings the active circle; here the solid fill carries it, so
+    // drop the ring to match the flat badge look.
+    box-shadow: none;
+}
+.stepper-icons .step.done .step-circle {
+    border: none;
+    background: var(--wui-step-soft, var(--color-primary-soft));
+    color: var(--wui-step-soft-fg, var(--color-primary));
+}
+.stepper-icons .step.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.stepper-icons .step.skipped .step-circle {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+// The "STEP n" eyebrow sits between the badge and the title, colour-matched to the state.
+.stepper-icons .step-index {
+    margin-top: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-index {
+    color: var(--wui-step-accent, var(--color-primary));
+}
+.stepper-icons .step.done .step-index {
+    color: var(--wui-step-soft-fg, var(--color-primary));
+}
+.stepper-icons .step.error .step-index {
+    color: var(--color-danger-text);
+}
+.stepper-icons .step-label {
+    max-width: 150px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-label,
+.stepper-icons .step.done .step-label {
+    color: var(--color-text);
+}
+// The rail: thicker and rounded, recentred on the badge (half the diameter − 2 for the
+// 4px line's own height), and filled with the accent once the step to its left is done.
+.stepper-icons .step + .step::before {
+    top: calc(var(--wui-step-badge-size, 56px) / 2 - 2px);
+    left: calc(-50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    right: calc(50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    height: 4px;
+    border-radius: 999px;
+    background: var(--wui-step-connector, var(--color-border));
+}
+.stepper-icons .step.done + .step::before {
+    background: var(--wui-step-accent, var(--color-primary));
+}
+// The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
+// lifts on hover instead.
+.stepper-icons a.step:hover .step-circle,
+.stepper-icons button.step:hover .step-circle {
+    box-shadow: none;
+    transform: scale(1.04);
+}
+// Below md the six badges no longer fit across, so the icons stepper stacks into a
+// vertical list — the shared .stepper-vertical rules take over from here.
+@include media-breakpoint-down(md) {
+    .stepper-icons.stepper-icons {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 20px;
+    }
+    .stepper-icons.stepper-icons .step {
+        flex-direction: row;
+        align-items: center;
+        gap: 14px;
+        text-align: left;
+    }
+    .stepper-icons.stepper-icons .step + .step::before {
+        content: none;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
     button.step:hover .step-circle,
-    .stepper-journey .step-circle {
+    .stepper-journey .step-circle,
+    .stepper-icons .step-circle {
         transition: none;
         transform: none;
     }
 }
 
+// Tone presets — flip the whole accent (active fill, done rail, ring, journey/icons
+// done tint) to a semantic ramp in one class. Because custom properties inherit, the
+// class can sit on the stepper itself OR on an ancestor (the wizard host), and an inline
+// `style="--wui-step-accent: …"` on a closer element still wins over it. Placing the
+// class recolours every variant consistently; error steps stay red regardless (semantic).
+// ----------------------------------------------------------------------------
+.wui-step-tone-primary {
+    --wui-step-accent: var(--color-primary);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-primary-soft);
+    --wui-step-soft-fg: var(--color-primary);
+}
+.wui-step-tone-success {
+    --wui-step-accent: var(--color-success);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-success-soft);
+    --wui-step-soft-fg: var(--color-success-text);
+}
+.wui-step-tone-warning {
+    --wui-step-accent: var(--color-warning);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-warning-soft);
+    --wui-step-soft-fg: var(--color-warning-text);
+}
+.wui-step-tone-danger {
+    --wui-step-accent: var(--color-danger);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-danger-soft);
+    --wui-step-soft-fg: var(--color-danger-text);
+}
+.wui-step-tone-info {
+    --wui-step-accent: var(--color-info);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-info-soft);
+    --wui-step-soft-fg: var(--color-info-text);
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //
@@ -616,4 +798,51 @@ button.step:focus-visible .step-circle {
     .form-actions-sticky {
         transition: none;
     }
+}
+
+// ============================================================================
+// AppWizard (<wui-wizard>) — stepper header + one visible step panel + a sticky
+// Back/Skip/Next/Finish footer. Composes .stepper and .form-actions above.
+// ============================================================================
+wui-wizard {
+    display: block;
+    width: 100%;
+}
+// Custom elements don't inherit the UA `[hidden] { display: none }` once we give the
+// tag its own `display`, so the inactive panels need it stated explicitly.
+wui-wizard-step {
+    display: block;
+}
+wui-wizard-step[hidden] {
+    display: none;
+}
+.wizard-stepper {
+    margin-bottom: 24px;
+}
+// A skipped step reads as "passed over", not "achieved": a dashed, muted circle so it
+// is visibly distinct from a ticked (done) step.
+.step.skipped .step-circle {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wizard-panel {
+    // A resting min-height so the footer doesn't jump as steps of different length
+    // swap in; content taller than this simply grows the panel.
+    min-height: 96px;
+}
+.wizard-footer {
+    // The sticky Back/Skip/Next/Finish bar — pinned to the bottom of a scrolling flow
+    // so the actions (and the Skip on an optional step) are always in reach. Runs flush on
+    // the flow (no divider or fill) — the buttons alone read as the footer.
+    position: sticky;
+    bottom: 0;
+    margin-top: 24px;
+    padding: 16px 0;
+    z-index: 1;
+}
+.wizard-footer-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }

package/scss/wui/_menu-motion.scss

@@ -0,0 +1,153 @@
+// ── Menu open motion ──
+// One entrance for every menu-like overlay: Bootstrap dropdown menus (AppDropdown,
+// AppWorkspaceSwitcher), popovers (AppPopover), and every portalled wui-* panel
+// (select / autocomplete / multiselect / phone / date / date-range / time).
+//
+// The motion is a PRODUCT-LEVEL choice, not a per-component prop — menus are opened by
+// Bootstrap/react-bootstrap internals, and mixing motions inside one product reads as a
+// bug. A product picks once, on the root element:
+//
+//   <html data-wui-menu-motion="drop">     zoom + fade + a 6px drop out of the trigger (default)
+//   <html data-wui-menu-motion="zoom">     zoom + fade only (the quietest)
+//   <html data-wui-menu-motion="spring">   elastic overshoot (playful; marketing surfaces)
+//   <html data-wui-menu-motion="unfold">   scales open vertically, like a sheet
+//   <html data-wui-menu-motion="none">     no entrance
+//
+// Two load-bearing choices:
+//   - The keyframes animate the STANDALONE `scale` / `translate` properties, never
+//     `transform` — Popper and anchorOverlay position these panels via transform/fixed
+//     coordinates, and the standalone properties compose with that instead of clobbering.
+//   - Panels shown by removing `hidden` (the wui-* set) replay the animation on every
+//     reveal for free; Bootstrap surfaces key off `.show`. Close stays instant: the wui
+//     elements hide with `hidden` in the same tick, and delaying that for an exit
+//     animation would change observable close timing everywhere.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+:root {
+    --wui-menu-anim: wui-menu-drop;
+    --wui-menu-anim-duration: 200ms;
+    --wui-menu-anim-ease: var(--wui-ease-out-quart);
+}
+:root[data-wui-menu-motion="zoom"] {
+    --wui-menu-anim: wui-menu-zoom;
+    --wui-menu-anim-duration: 160ms;
+}
+:root[data-wui-menu-motion="spring"] {
+    --wui-menu-anim: wui-menu-spring;
+    --wui-menu-anim-duration: 320ms;
+    --wui-menu-anim-ease: var(--wui-ease-elastic);
+}
+:root[data-wui-menu-motion="unfold"] {
+    --wui-menu-anim: wui-menu-unfold;
+    --wui-menu-anim-duration: 220ms;
+}
+:root[data-wui-menu-motion="none"] {
+    --wui-menu-anim: none;
+}
+
+@keyframes wui-menu-drop {
+    from {
+        opacity: 0;
+        scale: 0.95;
+        translate: 0 var(--wui-menu-drop, -6px);
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+@keyframes wui-menu-zoom {
+    from {
+        opacity: 0;
+        scale: 0.95;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+}
+@keyframes wui-menu-spring {
+    from {
+        opacity: 0;
+        scale: 0.9;
+        translate: 0 var(--wui-menu-drop, -4px);
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+@keyframes wui-menu-unfold {
+    from {
+        opacity: 0;
+        scale: 0.97 0.82;
+    }
+    to {
+        opacity: 1;
+        scale: 1 1;
+    }
+}
+
+.dropdown-menu.show,
+.popover.show,
+.search-select-menu:not([hidden]),
+.country-dropdown-menu:not([hidden]),
+.datepicker-pop:not([hidden]),
+.daterange-pop:not([hidden]),
+.timepicker-pop:not([hidden]) {
+    animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+    transform-origin: top;
+}
+
+// End-aligned dropdowns zoom from the corner they attach to.
+.dropdown-menu-end.show {
+    transform-origin: top right;
+}
+
+// Opening upward: origin flips to the bottom edge and the drop comes from below.
+.search-select-menu.drop-up,
+.country-dropdown-menu.drop-up,
+.datepicker-pop.drop-up,
+.daterange-pop.drop-up,
+.timepicker-pop.drop-up,
+.dropdown-menu.show[data-popper-placement^="top"],
+.dropup .dropdown-menu.show {
+    --wui-menu-drop: 6px;
+
+    transform-origin: bottom;
+}
+
+// Popover follows its Popper side; the drop always comes from the trigger's direction.
+.popover.show[data-popper-placement^="top"] {
+    --wui-menu-drop: 6px;
+
+    transform-origin: bottom center;
+}
+.popover.show[data-popper-placement^="right"] {
+    --wui-menu-drop: 0px;
+
+    transform-origin: left center;
+}
+.popover.show[data-popper-placement^="left"] {
+    --wui-menu-drop: 0px;
+
+    transform-origin: right center;
+}
+.popover.show[data-popper-placement^="bottom"] {
+    transform-origin: top center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dropdown-menu.show,
+    .popover.show,
+    .search-select-menu:not([hidden]),
+    .country-dropdown-menu:not([hidden]),
+    .datepicker-pop:not([hidden]),
+    .daterange-pop:not([hidden]),
+    .timepicker-pop:not([hidden]) {
+        animation: none;
+    }
+}