@webority/theme 0.7.9 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.9",
+  "version": "0.8.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": {

package/scss/_wui-components.scss

@@ -58,3 +58,7 @@
 // an accident.
 @import "flags";
 @import "wui/shell";
+@import "wui/dock";
+@import "wui/toolbar";
+// Last: restates the settled state of menus other partials style, so it must win.
+@import "wui/menu-motion";

package/scss/wui/_card.scss

@@ -7,6 +7,23 @@
 // Part of the wui-components layer — see _wui-components.scss for the load
 // order. Order within the layer is LOAD-BEARING; never reorder the imports.
 
+// Default (md) card inset — a uniform 20px on the header, body and footer, driven by one
+// friendly token. A consumer class can retune the padding by setting --wui-card-pad (e.g.
+// `.tight-card { --wui-card-pad: 12px }` with `className`/`class` on the card) without
+// overriding a selector. The padding-scale classes (.card-compact, .card-pad-*) still win —
+// they set `padding` directly on the header/body/footer.
+.card {
+    --wui-card-pad: 20px;
+    --bs-card-spacer-y: var(--wui-card-pad);
+    --bs-card-spacer-x: var(--wui-card-pad);
+    --bs-card-cap-padding-y: var(--wui-card-pad);
+    --bs-card-cap-padding-x: var(--wui-card-pad);
+    // Default card is borderless — a flat surface. The border-STYLE stays solid (Bootstrap's
+    // `border: var(--bs-card-border-width) solid …`), so a variant or a consumer class can
+    // bring the edge back just by giving it a width (set --bs-card-border-width).
+    --bs-card-border-width: 0;
+}
+
 // A card header that carries a title on the left and controls on the right — the
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
@@ -40,8 +57,10 @@
 // ── Variants ──────────────────────────────────────────────────────────────────
 // `default` is the flat surface above. The rest are opt-in visual treatments,
 // chosen by the `variant` prop (React) / attribute (Razor).
-// Flat elevation: no in-page drop shadow — stronger border is the edge cue.
+// Flat elevation: no in-page drop shadow — stronger border is the edge cue. The default card
+// is borderless, so re-assert a width here (this variant's whole cue is that border).
 .card-elevated {
+    --bs-card-border-width: 1px;
     border-color: var(--color-border-strong);
 }
 .card-outlined {

package/scss/wui/_controls.scss

@@ -95,14 +95,29 @@
 .wui-check:hover:not(:disabled):not(:checked),
 .wui-radio:hover:not(:disabled):not(:checked) {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
+// Keyboard focus keeps a restrained brand ring — a keyboard user MUST see where focus is
+// (a11y). :focus-visible matches keyboard/AT focus only, never a plain mouse click.
 .form-check-input:focus-visible,
 .wui-check:focus-visible,
 .wui-radio:focus-visible {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+// A plain MOUSE click must leave NO lingering focus/active glow, ring, border tint or
+// darkening — Bootstrap paints all of them on :focus/:active. Neutralise them for pointer
+// focus + active while the keyboard ring above stays, so a mouse click just toggles cleanly.
+.form-check-input:focus:not(:focus-visible),
+.wui-check:focus:not(:focus-visible),
+.wui-radio:focus:not(:focus-visible),
+.form-check-input:active,
+.wui-check:active,
+.wui-radio:active {
+    outline: none;
+    box-shadow: none;
+    filter: none;
 }
 .form-check-input:checked,
 .wui-check:checked,
@@ -167,7 +182,7 @@
 }
 .form-switch .form-check-input:hover:not(:disabled):not(:checked) {
     border-color: transparent;
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
 .form-switch .form-check-input:checked {
     border-color: transparent;
@@ -176,6 +191,12 @@
     // Re-assert the knob — the checkbox :checked tick has equal specificity.
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
 }
+// On a mouse click the switch's track border reverts to its resting transparent — Bootstrap's
+// :focus otherwise tints it brand-blue, leaving a coloured outline after the click. The shared
+// :focus:not(:focus-visible) rule already dropped the glow; this drops the border tint too.
+.form-switch .form-check-input:focus:not(:focus-visible) {
+    border-color: transparent;
+}
 
 // Circular variant (shape="circle") — a compact round on/off button instead of a sliding
 // pill. The track is a square-sized circle; the knob dot stays CENTRED in both states (no
@@ -194,6 +215,15 @@
 .form-switch-circle .form-check-input:checked {
     background-position: center;
 }
+
+// Rounded-pill variant (shape="round") — the same sliding pill, but with truly circular
+// ends. The switch is a type=checkbox, so it inherits the checkbox's default
+// `corner-shape: squircle`, which superellipses the pill's ends; reset it to `round` for
+// the fully semicircular track in the reference. Only the corner shape changes — size,
+// knob and slide are the base pill's.
+.form-switch-round .form-check-input {
+    corner-shape: round;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,

package/scss/wui/_data.scss

@@ -249,7 +249,10 @@
 // floating 42px header band, airy rows on a hairline rule, and an inset from
 // the card edge. Column geometry is NOT set here.
 .table-wrap:has(> .table-ledger) {
-    padding: 20px 20px 0;
+    // One token drives the whole inset so a consumer can retune the table's padding with a
+    // class (set --wui-table-pad) without overriding this selector. Bottom padding is now
+    // included (was 0) so the last row isn't flush against the card edge.
+    padding: var(--wui-table-pad, 20px);
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_dock.scss

@@ -0,0 +1,102 @@
+// ── Floating dock ──
+// AppFloatingDock / <app-floating-dock> / <wui-dock> — a macOS-style pill of icon
+// links. The element writes --wui-dock-mag (1 → max-scale) per item on pointermove;
+// everything visual lives here. With no JS (or coarse pointer / reduced motion /
+// `static`) the var stays 1 and the dock is a plain icon row.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-dock {
+    --dock-size: 44px;
+
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-xl);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    // Item boxes grow on hover; anchoring the row height to the rest size keeps the
+    // pill from pushing surrounding layout while items magnify upward out of it.
+    height: calc(var(--dock-size) + 20px);
+}
+
+.dock-item {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    height: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    border: none;
+    border-radius: 50%;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+    // Smooths the snap-back when the pointer leaves; during tracking the element
+    // updates per frame, so the short transition just softens the steps.
+    transition:
+        width 120ms var(--wui-ease-ui),
+        height 120ms var(--wui-ease-ui),
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.dock-item:hover,
+.dock-item:focus-visible {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.dock-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    // Keyboard users get no pointer tracking — grow the focused item itself.
+    --wui-dock-mag: 1.25;
+}
+
+.dock-item-icon {
+    display: grid;
+    place-items: center;
+    font-size: calc(18px * var(--wui-dock-mag, 1));
+    line-height: 1;
+}
+// Node icons (SVGs) don't inherit font-size — scale the box instead.
+.dock-item-icon > svg {
+    transform: scale(var(--wui-dock-mag, 1));
+}
+
+.dock-item-tip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    translate: -50% 4px;
+    padding: 4px 10px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    box-shadow: var(--wui-shadow-thumb);
+    color: var(--color-text);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+        opacity 140ms var(--wui-ease-ui),
+        translate 140ms var(--wui-ease-ui);
+    z-index: var(--wui-z-tooltip);
+}
+.dock-item:hover .dock-item-tip,
+.dock-item:focus-visible .dock-item-tip {
+    opacity: 1;
+    translate: -50% 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dock-item,
+    .dock-item-tip {
+        transition: none;
+    }
+}

package/scss/wui/_flow.scss

@@ -22,7 +22,8 @@
 //   --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)
-// The icons variant defaults its accent to success (green); the others to primary.
+// 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,
@@ -34,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;
@@ -188,8 +201,8 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--wui-step-soft, var(--color-success-soft));
-    color: var(--wui-step-soft-fg, 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(--wui-step-accent, var(--color-primary));
@@ -214,7 +227,7 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-journey .step.active .step-index {
     color: var(--wui-step-accent, var(--color-primary));
@@ -255,7 +268,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--wui-step-accent, 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.
@@ -348,9 +361,9 @@ button.step:focus-visible .step-circle {
 }
 
 // .stepper-icons — large icon badges joined by a rail, with a "STEP n" eyebrow above
-// each title. Done tints green with a filled connector; active is a solid primary
-// badge; pending is a muted badge. Built for icon-per-step flows — each step sets `icon`
-// (a step with no icon falls back to its number).
+// 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;
@@ -371,11 +384,11 @@ button.step:focus-visible .step-circle {
         color 0.2s ease,
         transform 0.2s ease;
 }
-// The icons variant defaults its accent to success (green), so an untoned icons wizard
-// reads green — solid-green active badge, soft-green done badge, green rail. Every colour
-// still routes through the shared --wui-step-* vars, so a tone class or an override recolours it.
+// 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-success));
+    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.
@@ -383,8 +396,8 @@ button.step:focus-visible .step-circle {
 }
 .stepper-icons .step.done .step-circle {
     border: none;
-    background: var(--wui-step-soft, var(--color-success-soft));
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    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);
@@ -406,10 +419,10 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-icons .step.active .step-index {
-    color: var(--wui-step-accent, var(--color-success));
+    color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -435,7 +448,7 @@ button.step:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
 }
 .stepper-icons .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-success));
+    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.
@@ -793,6 +806,7 @@ button.step:focus-visible .step-circle {
 // ============================================================================
 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.
@@ -819,13 +833,12 @@ wui-wizard-step[hidden] {
 }
 .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.
+    // 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;
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
     z-index: 1;
 }
 .wizard-footer-actions {

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;
+    }
+}