@webority/theme 0.54.0 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.54.0",
+  "version": "0.55.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": {
@@ -22,6 +22,7 @@
       "style": "./dist/webority-theme.css",
       "default": "./index.scss"
     },
+    "./scss/wui/tour/*": "./scss/wui/tour/_*.scss",
     "./scss/wui/*": "./scss/wui/_*.scss",
     "./scss/*": "./scss/_*.scss",
     "./css": "./dist/webority-theme.css",

package/scss/wui/_tour.scss

@@ -1,97 +1,18 @@
 // ── Product tour ──
-// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
-// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>
-// and positions .wui-tour-spot (over the target) and .wui-tour-card (against the target, through
-// anchorOverlay, which sets position, top and left inline). Everything visual is here, every
-// colour a theme token.
+// AppTour / <app-tour> / <wui-tour>. The one entry for every tour rule: the partials under
+// wui/tour/ hold one concern each, matching the element's modules (tourMotion.js, tourProgress.js,
+// tourPlacement.js, tourMedia.js, tourAdvance.js, tourEnd.js). Nothing else imports them, so the
+// tour's styles move as a whole by moving this one import.
+//
+// Isolated tours carry a sealed copy of every .wui-tour-* rule (packages/elements/src/tourIsolated.js),
+// and a test pins that copy to the compiled theme.
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
-// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
-wui-tour,
-wui-tour-step {
-    display: none;
-}
-
-.wui-tour-layer {
-    position: fixed;
-    inset: 0;
-    z-index: var(--wui-z-tour);
-}
-
-// The dim is the spot's own shadow, so the hole around the target needs no clip-path.
-.wui-tour-spot {
-    position: fixed;
-    border-radius: var(--wui-radius-sm);
-    box-shadow:
-        0 0 0 2px var(--color-primary),
-        0 0 0 100vmax var(--color-scrim-strong);
-    pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
-    .wui-tour-spot {
-        transition:
-            top 160ms ease,
-            left 160ms ease,
-            width 160ms ease,
-            height 160ms ease;
-    }
-}
-
-.wui-tour-card {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: min(360px, calc(100vw - 16px));
-    padding: 16px;
-    overflow-y: auto;
-    background: var(--color-surface);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius-lg);
-    corner-shape: squircle;
-    box-shadow: var(--wui-shadow-overlay);
-    &:focus {
-        outline: none;
-    }
-    &:focus-visible {
-        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-        outline-offset: var(--wui-focus-ring-offset);
-    }
-}
-
-.wui-tour-position {
-    margin: 0;
-    font-size: 12px;
-    color: var(--color-text-muted);
-}
-.wui-tour-title {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-}
-.wui-tour-text {
-    margin: 0;
-    font-size: 14px;
-    color: var(--color-text-muted);
-}
-.wui-tour-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    margin-top: 4px;
-}
-.wui-tour-nav {
-    display: flex;
-    gap: 8px;
-}
-// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
-// moving the row, and Skip reads as the quiet action.
-.wui-tour-skip {
-    color: var(--color-text-muted);
-}
-.wui-tour-back,
-.wui-tour-next {
-    min-width: 64px;
-}
+@import "tour/base";
+@import "tour/motion";
+@import "tour/progress";
+@import "tour/placement";
+@import "tour/media";
+@import "tour/advance";
+@import "tour/end";

package/scss/wui/tour/_advance.scss

@@ -0,0 +1,67 @@
+// ── Product tour: click-to-advance steps ──
+// A step with `advance-on="click"` lets clicks through the spotlight to its target, and the
+// tour moves on when the target is used (tourAdvance.js). The cue is one pulse of the ring as the
+// step arrives and the .wui-tour-hint sentence; Next turns into a link there (tourAdvance.js
+// swaps its class).
+//
+// `data-advance` on the layer makes the hole clickable. The layer then lets every click through,
+// and the spot's ::before catches them again everywhere but over the spot: it reaches 100vmax
+// past each edge, as the dim does, and its clip-path cuts the spot's own box out. Riding on the
+// spot, the hole follows the target through the glide and a scroll with nothing to update. A
+// leaving layer keeps the motion rule's click-through for the whole page.
+
+.wui-tour-layer[data-advance] {
+    pointer-events: none;
+}
+.wui-tour-layer[data-advance]:not([data-state="leaving"]) .wui-tour-card {
+    pointer-events: auto;
+}
+.wui-tour-layer[data-advance]:not([data-state="leaving"]) .wui-tour-spot::before {
+    content: "";
+    position: absolute;
+    inset: -100vmax;
+    pointer-events: auto;
+    clip-path: polygon(
+        evenodd,
+        0 0,
+        100% 0,
+        100% 100%,
+        0 100%,
+        0 0,
+        100vmax 100vmax,
+        calc(100% - 100vmax) 100vmax,
+        calc(100% - 100vmax) calc(100% - 100vmax),
+        100vmax calc(100% - 100vmax),
+        100vmax 100vmax
+    );
+}
+
+.wui-tour-hint {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+@keyframes wui-tour-pulse {
+    from {
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 85%, transparent);
+    }
+    to {
+        box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent);
+    }
+}
+
+// The pulse waits out the spot's glide, so the ring grows from where the target is. It runs once
+// per step: tourAdvance.js sets `data-advance` again on each arrival to restart it.
+@media (prefers-reduced-motion: no-preference) {
+    .wui-tour-spot[data-advance]::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        corner-shape: inherit;
+        pointer-events: none;
+        animation: wui-tour-pulse 600ms var(--wui-ease-out-quart) var(--wui-tour-spot-duration);
+    }
+}

package/scss/wui/tour/_base.scss

@@ -0,0 +1,82 @@
+// ── Product tour: layer, spotlight and card ──
+// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
+// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>;
+// tourPlacement.js fits .wui-tour-spot to the target's box and corners and places .wui-tour-card
+// beside the target, over its lower part, or centred for a message, setting both inline. Every
+// colour is a theme token.
+
+// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
+wui-tour,
+wui-tour-step {
+    display: none;
+}
+
+.wui-tour-layer {
+    position: fixed;
+    inset: 0;
+    z-index: var(--wui-z-tour);
+}
+
+// The dim is the spot's own shadow, so the hole around the target needs no clip-path. The spot
+// has no radius of its own: tourPlacement.js copies the target's, so the 2px line runs just
+// outside the target's own edge.
+.wui-tour-spot {
+    position: fixed;
+    box-shadow:
+        0 0 0 2px var(--color-primary),
+        0 0 0 100vmax var(--color-scrim-strong);
+    pointer-events: none;
+}
+
+.wui-tour-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: min(360px, calc(100vw - 16px));
+    padding: 16px;
+    overflow-y: auto;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    &:focus {
+        outline: none;
+    }
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-offset);
+    }
+}
+
+.wui-tour-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+.wui-tour-text {
+    margin: 0;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+.wui-tour-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 4px;
+}
+.wui-tour-nav {
+    display: flex;
+    gap: 8px;
+}
+// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
+// moving the row, and Skip reads as the quiet action.
+.wui-tour-skip {
+    color: var(--color-text-muted);
+}
+.wui-tour-back,
+.wui-tour-next {
+    min-width: 64px;
+}

package/scss/wui/tour/_end.scss

@@ -0,0 +1,82 @@
+// ── Product tour: closing dialog ──
+// The "You're all set" dialog after the last step (.wui-tour-end), shown by tourEnd.js. It is a
+// .wui-tour-card too, so it takes the card's look and its entrance from _motion.scss (a fade under
+// reduced motion), and it is centred here rather than placed by tourPlacement.js. On a phone its
+// button is a 44px touch target through the card rule in _placement.scss.
+
+@keyframes wui-tour-check {
+    from {
+        stroke-dashoffset: 24;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+// As wide as a welcome card, so the default message fits on one line. The standalone `scale` and
+// `translate` of the entrance compose with this `transform`, around the centre.
+.wui-tour-end[data-layout="center"] {
+    --wui-tour-card-lift: 0 0;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transform-origin: center;
+    align-items: center;
+    gap: 8px;
+    width: min(420px, calc(100vw - 16px));
+    max-height: calc(100vh - 16px);
+    padding: 24px;
+    text-align: center;
+    .wui-tour-actions {
+        justify-content: center;
+        margin-top: 8px;
+    }
+}
+
+.wui-tour-end-mark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+    > svg {
+        width: 26px;
+        height: 26px;
+    }
+    path {
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2.5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-dasharray: 24;
+    }
+}
+
+.wui-tour-end-title {
+    font-size: 18px;
+}
+
+// The default message fits on one line; a longer one, or the dialog on a phone, wraps into even
+// lines under the centred title rather than leaving one word alone.
+.wui-tour-end-message {
+    text-wrap: balance;
+}
+
+.wui-tour-end-button {
+    min-width: 120px;
+}
+
+// The check draws once the dialog has entered: its delay adds the card's own entrance delay
+// (set inline by tourMotion.js and inherited). Under reduced motion it shows at once.
+@media (prefers-reduced-motion: no-preference) {
+    .wui-tour-end-mark path {
+        animation: wui-tour-check 300ms var(--wui-ease-out-quart) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both;
+    }
+}

package/scss/wui/tour/_media.scss

@@ -0,0 +1,54 @@
+// ── Product tour: step media ──
+// A step's optional image or short loop, full-bleed at the card top (.wui-tour-media), rendered
+// by tourMedia.js. The frame is 16:9 before the file loads, so the card keeps its size. Its
+// negative margin cancels the card's 16px padding (_base.scss); the card's own overflow and
+// corner radius clip it, so the frame needs no radius.
+
+.wui-tour-media {
+    position: relative;
+    order: -1;
+    flex: none;
+    aspect-ratio: 16 / 9;
+    margin: -16px -16px 4px;
+    overflow: hidden;
+    background: var(--color-border);
+    > img,
+    > video {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+// A card with no target is a welcome card, wider than a step card.
+.wui-tour-card[data-media="welcome"] {
+    width: min(420px, calc(100vw - 16px));
+}
+
+// The pause control sits on the picture, so it carries its own scrim and its ink.
+.wui-tour-media-toggle {
+    position: absolute;
+    inset-block-end: 8px;
+    inset-inline-end: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--color-scrim-strong);
+    color: var(--color-on-scrim);
+    cursor: pointer;
+    > svg {
+        width: 20px;
+        height: 20px;
+        fill: currentColor;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--color-on-scrim);
+        outline-offset: 2px;
+    }
+}

package/scss/wui/tour/_motion.scss

@@ -0,0 +1,133 @@
+// ── Product tour: motion ──
+// The dim fading in and out, the spotlight's glide between targets, and the card's entrance and
+// exit (its `data-state`: entering | shown | leaving, and the layer's `data-state="leaving"`, both
+// set by tourMotion.js). tourMotion.js waits on the animations these rules start, so every
+// duration lives here.
+//
+// The tour's timings are tour-scoped custom properties on the theme's easing tokens, so tuning
+// them never touches the other overlays' motion. As in wui/_menu-motion.scss, the entrance
+// animates the standalone `scale` and `translate` properties, never `transform`, which placement
+// sets inline to centre a message card.
+//
+// Leaving is an opacity transition, not a keyframe animation: a card or layer that leaves halfway
+// through its entrance fades from the opacity it has reached instead of flashing back to full.
+
+:root {
+    --wui-tour-motion-duration: 200ms;
+    --wui-tour-motion-ease: var(--wui-ease-out-quart);
+    --wui-tour-spot-duration: 240ms;
+    --wui-tour-spot-ease: var(--wui-ease-ui);
+}
+
+@keyframes wui-tour-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes wui-tour-card-enter {
+    from {
+        opacity: 0;
+        scale: 0.96;
+        translate: var(--wui-tour-card-lift, 0 6px);
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+
+.wui-tour-layer[data-state="leaving"],
+.wui-tour-card[data-state="leaving"] {
+    opacity: 0;
+}
+
+// A closing layer stays on the page until its fade ends; the page under it is usable at once.
+.wui-tour-layer[data-state="leaving"],
+.wui-tour-layer[data-state="leaving"] * {
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-tour-layer {
+        animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease);
+    }
+    .wui-tour-layer[data-state="leaving"] {
+        transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease);
+    }
+
+    .wui-tour-spot {
+        transition:
+            top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease),
+            left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease),
+            width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease),
+            height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease),
+            border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease);
+    }
+    // Set by WuiTour.js while the spot follows its target through a scroll or resize, so it never trails it.
+    .wui-tour-spot[data-tracking] {
+        transition: none;
+    }
+
+    // The card starts 6px further from its target and scales from the edge facing it, so it
+    // lifts toward the target. A card below its target is the default. A card over its target or
+    // centred for a message has no edge facing it, so it scales in place.
+    .wui-tour-card {
+        --wui-tour-card-lift: 0 6px;
+
+        transform-origin: top center;
+    }
+    .wui-tour-card[data-placement="top"] {
+        --wui-tour-card-lift: 0 -6px;
+
+        transform-origin: bottom center;
+    }
+    .wui-tour-card[data-placement="bottom"] {
+        --wui-tour-card-lift: 0 6px;
+
+        transform-origin: top center;
+    }
+    .wui-tour-card[data-placement="left"] {
+        --wui-tour-card-lift: -6px 0;
+
+        transform-origin: right center;
+    }
+    .wui-tour-card[data-placement="right"] {
+        --wui-tour-card-lift: 6px 0;
+
+        transform-origin: left center;
+    }
+    .wui-tour-card[data-placement="overlap"],
+    .wui-tour-card[data-placement="center"] {
+        --wui-tour-card-lift: 0 0;
+
+        transform-origin: center;
+    }
+
+    // --wui-tour-card-delay is two-thirds of the spot's glide, set by tourMotion.js only while the
+    // spot is moving; `both` keeps the card hidden through that delay.
+    .wui-tour-card[data-state="entering"] {
+        animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both;
+    }
+    .wui-tour-card[data-state="leaving"] {
+        transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease);
+    }
+}
+
+// Nothing moves or scales and the spot jumps: the card hides at once and fades in, and the dim
+// fades, each within 120ms.
+@media (prefers-reduced-motion: reduce) {
+    .wui-tour-layer {
+        animation: wui-tour-fade-in 120ms linear;
+    }
+    .wui-tour-layer[data-state="leaving"] {
+        transition: opacity 120ms linear;
+    }
+    .wui-tour-card[data-state="entering"] {
+        animation: wui-tour-fade-in 120ms linear both;
+    }
+}

package/scss/wui/tour/_placement.scss

@@ -0,0 +1,65 @@
+// ── Product tour: placement ──
+// Where the card sits against its target: the card's `data-placement` (top | bottom | left |
+// right | center | overlap) and the .wui-tour-arrow pointing at the target, set by tourPlacement.js.
+// A center or overlap card has no target edge to point at: tourPlacement.js sets its arrow
+// `hidden`, so it needs no rule here, and the card keeps its own scroll.
+
+// The layer's padding is the device's safe area, which tourPlacement.js reads to keep the card
+// clear of a notch or a home bar. The spot and the card are fixed, so the padding moves neither.
+.wui-tour-layer {
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
+        env(safe-area-inset-left, 0px);
+}
+
+// The arrow sits half outside the card, where the card's own scroll would clip it. It shows only
+// on a card at full height, which never scrolls.
+.wui-tour-card:has(.wui-tour-arrow:not([hidden])) {
+    overflow: visible;
+}
+
+// An 8px square turned 45deg, in the card's colours. The two borders facing into the card are
+// transparent, so the card's border runs on around the point. tourPlacement.js sets its offset
+// along the edge; -5px (half the square plus the card's 1px border) centres it on the edge.
+.wui-tour-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    rotate: 45deg;
+    pointer-events: none;
+}
+.wui-tour-card[data-placement="bottom"] .wui-tour-arrow {
+    top: -5px;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.wui-tour-card[data-placement="top"] .wui-tour-arrow {
+    bottom: -5px;
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.wui-tour-card[data-placement="right"] .wui-tour-arrow {
+    left: -5px;
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.wui-tour-card[data-placement="left"] .wui-tour-arrow {
+    right: -5px;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
+
+// On a phone the card spans the window, 8px from each edge, and stays above or below its target;
+// tourPlacement.js checks the same breakpoint. Each card button is a 44px touch target.
+@include media-breakpoint-down(sm) {
+    .wui-tour-card {
+        width: calc(100vw - 16px);
+    }
+    .wui-tour-actions .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 44px;
+    }
+}

package/scss/wui/tour/_progress.scss

@@ -0,0 +1,26 @@
+// ── Product tour: progress ──
+// The step count above the title: a thin segmented bar (.wui-tour-progress holds
+// .wui-tour-progress-bar, which holds one .wui-tour-progress-segment per counted step) and the
+// "Step N of M" text (.wui-tour-position), all filled by tourProgress.js. The bar is aria-hidden;
+// the text carries the count. The segments up to the current step carry data-filled.
+
+.wui-tour-progress-bar {
+    display: flex;
+    gap: 4px;
+}
+
+.wui-tour-progress-segment {
+    flex: 1 1 0;
+    height: 4px;
+    border-radius: 999px;
+    background: var(--color-border);
+    &[data-filled] {
+        background: var(--color-primary);
+    }
+}
+
+.wui-tour-position {
+    margin: 0;
+    font-size: 12px;
+    color: var(--color-text-muted);
+}