@webority/theme 0.72.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.72.0",
+  "version": "0.74.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/_components.scss

@@ -10,6 +10,9 @@
 // button beside an input lines up in every form row. Heights are min-height with the label flex-centred; sm/lg
 // set theirs in their size blocks below.
 .btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
+    // The height is the field height and the label is flex-centred, so no vertical padding: it
+    // would push a button past its field height.
+    --bs-btn-padding-y: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -19,7 +22,7 @@
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
 // separate from the height rule above so sm/lg (which opt out of the shared
 // control height) still get the nudge. A signal, not a depth cue.
-.btn:not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon):not(.btn-ghost):active:not(:disabled) {
+.btn:not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon):active:not(:disabled) {
     transform: translateY(1px);
 }
 
@@ -137,7 +140,7 @@
     --bs-btn-color: var(--color-text-muted);
     --bs-btn-border-color: var(--color-border-strong);
     --bs-btn-hover-color: var(--color-text);
-    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-hover-border-color: var(--color-border-strong);
     --bs-btn-active-color: var(--color-text);
     --bs-btn-active-bg: var(--color-border);
@@ -169,16 +172,17 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
 }
 
-// Soft neutral tinted button — a quieter alternative to .btn-light for a secondary
-// action that shouldn't compete with a primary/danger CTA in the same row.
-.btn-subtle {
-    --bs-btn-bg: var(--color-bg-muted);
+// Neutral grey button: the secondary button's shape in grey instead of the brand tint, for a
+// supporting action (Back, Skip, Close) that should not carry the brand colour. The fill is the
+// text colour at 8%, 12% on hover and 16% pressed, so it follows the theme in light and dark.
+.btn-neutral {
+    --bs-btn-bg: color-mix(in srgb, var(--color-text) 8%, transparent);
     --bs-btn-color: var(--color-text);
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-bg: var(--color-border);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-text) 12%, transparent);
     --bs-btn-hover-color: var(--color-text);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-bg: var(--color-border-strong);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 16%, transparent);
     --bs-btn-active-color: var(--color-text);
     --bs-btn-active-border-color: transparent;
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
@@ -234,7 +238,7 @@
     opacity: 1;
     cursor: progress;
 }
-// Transparent-fill variants (secondary/ghost/subtle/outline-*) have no fill to tint from —
+// Transparent-fill variants (secondary/ghost/text/neutral/outline-*) have no fill to tint from —
 // key the wash and the label off the accent (text) colour so the hue still shows.
 .btn-secondary.is-loading:disabled,
 .btn-secondary.is-loading.disabled,
@@ -242,8 +246,10 @@
 .btn-secondary-danger.is-loading.disabled,
 .btn-ghost.is-loading:disabled,
 .btn-ghost.is-loading.disabled,
-.btn-subtle.is-loading:disabled,
-.btn-subtle.is-loading.disabled,
+.btn-text.is-loading:disabled,
+.btn-text.is-loading.disabled,
+.btn-neutral.is-loading:disabled,
+.btn-neutral.is-loading.disabled,
 .btn-outline-primary.is-loading:disabled,
 .btn-outline-primary.is-loading.disabled,
 .btn-outline-danger.is-loading:disabled,
@@ -265,33 +271,40 @@
 // sizes step font-size, horizontal padding and radius together (vertical size
 // comes from --wui-control-height, so a button lines up with an input). Weight
 // is 600 on every rung — buttons read as a deliberate action, not body text.
-// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, --wui-control-height tall.
+// Medium (default): 14px / 600, about 20px side padding, 18px squircle radius, --wui-control-height tall.
+// Side padding is always twice the vertical padding. A button is its field's height with the label
+// line centred, so its vertical padding is (height - both borders - one line) / 2 and its side
+// padding the height less both borders and one line: about 7.7/15.4, 10.2/20.3 and 12.6/25.2px at sm,
+// md and lg with the theme's line height.
 .btn {
+    --wui-btn-height: var(--wui-control-height);
     --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 0.875rem;
     --bs-btn-font-weight: 600;
-    --bs-btn-padding-x: 1.5rem;
+    --bs-btn-padding-x: calc(var(--wui-btn-height) - 2 * var(--bs-btn-border-width) - var(--bs-btn-font-size) * var(--bs-btn-line-height));
     // Progressive enhancement only (Chrome/Safari recent). Unsupported engines
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), as tall as a small field.
+// Small: 12px, about 15px side padding, 14px squircle radius (proportional to md), as tall as a small field.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
+    --wui-btn-height: var(--wui-control-height-sm);
+    --bs-btn-padding-y: 0;
     --bs-btn-border-radius: 14px;
     --bs-btn-font-size: 0.75rem;
-    --bs-btn-padding-x: 1.125rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: var(--wui-control-height-sm);
 }
-// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), as tall as a large field.
+// Large: 16px, about 25px side padding, 22px squircle radius (proportional to md), as tall as a large field.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
+    --wui-btn-height: var(--wui-control-height-lg);
+    --bs-btn-padding-y: 0;
     --bs-btn-border-radius: 22px;
     --bs-btn-font-size: 1rem;
-    --bs-btn-padding-x: 2rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -304,7 +317,7 @@
 // with .btn-anim-none. Every option reads on EVERY variant — the moving layer
 // is tinted from the button's OWN colour (color-mix on currentColor / the
 // resolved --bs-btn fill), so it's a pale sheen on solid fills, a brand shimmer
-// on outline/ghost, a neutral gloss on subtle/light. All snap off under
+// on outline/ghost, a neutral gloss on neutral/light. All snap off under
 // prefers-reduced-motion (below). Icon-only / link-style actions never animate.
 //
 //   (default)         royal angled sheen sweep + a restrained −1px lift
@@ -313,6 +326,8 @@
 //   .btn-anim-expand  a radial glow blooms from the centre
 //   .btn-anim-glow    a soft colour-matched glow ring + lift
 //   .btn-anim-none    no hover motion
+//   .btn-anim-roll    the label rolls up and a trailing icon slides through a round well
+//                     (AppButton animation="roll" renders the copies it needs)
 //
 // Shared plumbing — a clipped, isolated box so a z-index:-1 layer can sit above
 // the fill but below the label; overflow clips it to the squircle corners.
@@ -323,8 +338,8 @@
 }
 
 // --- Sheen (default + .btn-anim-sheen): slim angled glossy band sweeps across.
-.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"])::before,
-.btn-anim-sheen:not(.btn-ghost)::before {
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"])::before,
+.btn-anim-sheen::before {
     content: "";
     position: absolute;
     top: 0;
@@ -342,12 +357,12 @@
     transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
     pointer-events: none;
 }
-.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"]):hover:not(:disabled)::before,
-.btn-anim-sheen:not(.btn-ghost):hover:not(:disabled)::before {
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled)::before,
+.btn-anim-sheen:hover:not(:disabled)::before {
     transform: translateX(320%) skewX(-18deg);
 }
-.btn:not(.btn-icon):not(.u-action):not(.btn-ghost):not([class*="btn-anim-"]):hover:not(:disabled),
-.btn-anim-sheen:not(.btn-ghost):hover:not(:disabled) {
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled),
+.btn-anim-sheen:hover:not(:disabled) {
     transform: translateY(-1px);
 }
 
@@ -417,6 +432,129 @@
     box-shadow: none;
 }
 
+// --- Roll (AppButton animation="roll"): the label rolls up and out while a copy rolls in from
+// below, and a trailing icon in a round well slides out to the right while a copy slides in from
+// the left. Colours stay put; no sheen and no lift. The component renders the label copy and the
+// icon copy (aria-hidden), so this class alone on a plain .btn does nothing.
+.btn-anim-roll {
+    --wui-btn-roll-ease: cubic-bezier(0.32, 0.72, 0, 1);
+}
+// The icon well and the pinned icon's end inset scale with the button size, so the well keeps
+// the same share of the button's height and an even gap above, below and beside it.
+:is(.btn-anim-roll, .wui-btn-pin-end) {
+    --wui-btn-roll-well: 28px;
+    --wui-btn-pin-inset: 8px;
+    // How far the arrow sits inside its well: (well - icon) / 2, with the 16, 14 and 20px icons.
+    --wui-btn-well-pad: 6px;
+}
+:is(.btn-anim-roll, .wui-btn-pin-end).btn-sm {
+    --wui-btn-roll-well: 22px;
+    --wui-btn-pin-inset: 6px;
+    --wui-btn-well-pad: 4px;
+}
+:is(.btn-anim-roll, .wui-btn-pin-end).btn-lg {
+    --wui-btn-roll-well: 34px;
+    --wui-btn-pin-inset: 10px;
+    --wui-btn-well-pad: 7px;
+}
+.btn-anim-roll:hover:not(:disabled) {
+    transform: none;
+}
+.wui-btn-roll {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: top;
+}
+.wui-btn-roll__a,
+.wui-btn-roll__b {
+    display: block;
+    transition: transform 0.5s var(--wui-btn-roll-ease);
+}
+.wui-btn-roll__b {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+}
+.btn-anim-roll:is(:hover, :focus-visible):not(:disabled) :is(.wui-btn-roll__a, .wui-btn-roll__b) {
+    transform: translateY(-100%);
+}
+.wui-btn-roll-ico {
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: var(--wui-btn-roll-well);
+    height: var(--wui-btn-roll-well);
+    margin-block: calc((1lh - var(--wui-btn-roll-well)) / 2);
+    border-radius: 50%;
+    overflow: hidden;
+    background: color-mix(in srgb, currentColor 20%, transparent);
+    vertical-align: middle;
+}
+.wui-btn-roll-ico > * {
+    grid-area: 1 / 1;
+    transition: transform 0.5s var(--wui-btn-roll-ease);
+}
+.wui-btn-roll-ico > .wui-btn-roll-ico__next {
+    transform: translateX(calc(var(--wui-btn-roll-well) * -1));
+}
+.btn-anim-roll:is(:hover, :focus-visible):not(:disabled) .wui-btn-roll-ico > :not(.wui-btn-roll-ico__next) {
+    transform: translateX(var(--wui-btn-roll-well));
+}
+.btn-anim-roll:is(:hover, :focus-visible):not(:disabled) .wui-btn-roll-ico > .wui-btn-roll-ico__next {
+    transform: translateX(0);
+}
+
+// Pinned trailing icon (AppButton pinRightIcon): the trailing icon in a round well (the roll
+// animation's well when it rolls) sits at the button's end edge and the label centres across the button. Padding on both
+// sides keeps the label centred and clear of the icon; meant for a wide or full-width button.
+.wui-btn-pin-end {
+    // The label is centred optically: in the space before the pinned icon, with the same gap from
+    // the start edge as from the arrow, so a content-sized button does not look empty on the start
+    // side. The end padding holds the well and its inset on top of that gap. The extra 6px gives
+    // the label more room on each side than a plain button.
+    --wui-btn-pin-extra: 6px;
+    --wui-btn-pin-side: calc(var(--bs-btn-padding-x) + var(--wui-btn-pin-extra));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    // The gap from the start edge to the label equals the gap from the label to the arrow itself
+    // (the eye reads the arrow, not its pale well), so the end side gives back the well's inner pad.
+    // The start gap counts the border.
+    padding-inline: calc(var(--wui-btn-pin-side) - var(--bs-btn-border-width))
+        calc(var(--wui-btn-roll-well, 1.75em) + var(--wui-btn-pin-inset) + var(--wui-btn-pin-side) - var(--wui-btn-well-pad));
+}
+.wui-btn-pin-end > .wui-btn-pin-icon {
+    position: absolute;
+    top: 50%;
+    right: var(--wui-btn-pin-inset);
+    margin: 0;
+    transform: translateY(-50%);
+}
+// Shape (AppButton shape): `rounded` is the default squircle radius of each size; `pill` rounds
+// the ends fully and `sharp` has square corners, on every variant and size. Declared after the
+// size rungs so it wins over their radius. The roll and pinned icon wells stay round.
+.btn.wui-btn-shape-pill {
+    --bs-btn-border-radius: 999px;
+    corner-shape: round;
+}
+.btn.wui-btn-shape-sharp {
+    --bs-btn-border-radius: 0;
+    corner-shape: round;
+}
+
+// Without the roll animation the pinned icon still sits in the round well, tinted from the label.
+.wui-btn-pin-end > .wui-btn-pin-icon:not(.wui-btn-roll-ico) {
+    display: inline-grid;
+    place-items: center;
+    width: var(--wui-btn-roll-well, 1.75em);
+    height: var(--wui-btn-roll-well, 1.75em);
+    border-radius: 50%;
+    background: color-mix(in srgb, currentColor 20%, transparent);
+}
+
 // ---- Dropdown menu (AppDropdown / <app-dropdown>) -------------------
 // Bootstrap ships a bare .dropdown-item; the design system gives the menu real
 // padding, an icon–label gap, a rounded hover highlight tinted with the brand,
@@ -543,9 +681,9 @@
 }
 
 // ---- Ghost button: the tertiary action --------------------------------
-// Brand-coloured text with no box at rest and no underline. Hover lays a light grey fill behind
-// it, pressing deepens that fill a step, and keyboard focus draws the shared ring. No sheen sweep,
-// no lift or press nudge, and no grey box when disabled or loading.
+// Brand-coloured text with no box at rest and no underline. Hover lays the secondary button's fill behind
+// it with the shared sheen sweep and lift, pressing deepens that fill a step with the press nudge,
+// and keyboard focus draws the shared ring. No grey box when disabled or loading.
 // AppButton's `ghost` variant emits this class on both surfaces.
 //
 // No .btn-ghost-sm/-lg rungs: it is an ordinary .btn variant and sizes with Bootstrap's
@@ -555,10 +693,10 @@
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
     --bs-btn-hover-color: var(--color-primary-ink);
-    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-hover-border-color: transparent;
     --bs-btn-active-color: var(--color-primary-ink);
-    --bs-btn-active-bg: color-mix(in srgb, var(--color-bg-muted) 92%, var(--color-text));
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
     --bs-btn-active-border-color: transparent;
     --bs-btn-disabled-color: var(--color-primary-ink);
     --bs-btn-disabled-bg: transparent;
@@ -589,6 +727,75 @@
     opacity: 1;
 }
 
+// ---- Text button: an action that reads as a link --------------------------
+// Brand-coloured text with no box in any state: no fill at rest, on hover or pressed, no sheen and
+// no lift, and no side padding, so it lines up with the text around it. Hover deepens the colour.
+// It pairs with animation="roll", whose label roll and round icon well carry the motion.
+// AppButton's `text` variant emits this class on both surfaces.
+.btn-text {
+    --bs-btn-color: var(--color-primary-ink);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-primary-ink) 80%, var(--color-text));
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: color-mix(in srgb, var(--color-primary-ink) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-primary-ink);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+// After the size rungs and at their weight, so sm and lg text buttons lose the side padding too.
+.btn.btn-text {
+    --bs-btn-padding-x: 0;
+}
+.btn.btn-text,
+.btn.btn-text:hover,
+.btn.btn-text:active,
+.btn.btn-text:focus-visible {
+    text-decoration: none;
+}
+.btn.btn-text::before {
+    display: none;
+}
+.btn.btn-text:hover:not(:disabled) {
+    transform: none;
+}
+.btn.btn-text:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+    box-shadow: none;
+}
+// A text button's icons follow the text: each icon is the text size, and the roll or pinned well
+// is 18, 20 and 22px at sm, md and lg, a snug ring around the icon that never outweighs the label.
+.btn.btn-text {
+    --wui-btn-roll-well: 20px;
+    --wui-btn-well-pad: 3px;
+    --wui-btn-text-icon: 14px;
+}
+.btn.btn-text.btn-sm {
+    --wui-btn-roll-well: 18px;
+    --wui-btn-well-pad: 3px;
+    --wui-btn-text-icon: 12px;
+}
+.btn.btn-text.btn-lg {
+    --wui-btn-roll-well: 22px;
+    --wui-btn-well-pad: 3px;
+    --wui-btn-text-icon: 16px;
+}
+.btn.btn-text svg {
+    width: var(--wui-btn-text-icon);
+    height: var(--wui-btn-text-icon);
+}
+.btn.btn-text.btn-text:disabled,
+.btn.btn-text.btn-text.disabled {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-ink);
+    opacity: 0.55;
+}
+
 // ---- Card hover-lift (name is historical) -----------------------------
 // `.card-lifted` does NOT cast a shadow — in-page cards stay flat. It only
 // nudges 1px on hover (tactile signal). API prop stays `lifted` / class
@@ -900,6 +1107,19 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
         transform: none;
         box-shadow: none;
     }
+    // The roll stays still: the label and the icon keep their resting copy.
+    .wui-btn-roll__a,
+    .wui-btn-roll__b,
+    .wui-btn-roll-ico > * {
+        transition: none;
+    }
+    .btn-anim-roll:is(:hover, :focus-visible):not(:disabled) :is(.wui-btn-roll__a, .wui-btn-roll__b),
+    .btn-anim-roll:is(:hover, :focus-visible):not(:disabled) .wui-btn-roll-ico > :not(.wui-btn-roll-ico__next) {
+        transform: none;
+    }
+    .btn-anim-roll:is(:hover, :focus-visible):not(:disabled) .wui-btn-roll-ico > .wui-btn-roll-ico__next {
+        transform: translateX(calc(var(--wui-btn-roll-well) * -1));
+    }
 }
 
 // ---- Theme-flipped typography utilities ------------------------------------

package/scss/wui/_data.scss

@@ -572,15 +572,21 @@
     min-width: 240px;
 }
 .wui-filter-more-panel > .field,
+.wui-filter-more-panel > .wui-filter-popover-field > .field,
 .wui-filter-more-panel > wui-select,
+.wui-filter-more-panel > .wui-filter-popover-field > wui-select,
 .wui-filter-more-panel > wui-multiselect,
+.wui-filter-more-panel > .wui-filter-popover-field > wui-multiselect,
 .wui-filter-more-panel > wui-date-range,
-.wui-filter-more-panel > .search-wrap {
+.wui-filter-more-panel > .wui-filter-popover-field > wui-date-range,
+.wui-filter-more-panel > .search-wrap,
+.wui-filter-more-panel > .wui-filter-popover-field > .search-wrap {
     flex: none;
     min-width: 0;
     max-width: none;
 }
-.wui-filter-more-panel > wui-date-range .daterange {
+.wui-filter-more-panel > wui-date-range .daterange,
+.wui-filter-more-panel > .wui-filter-popover-field > wui-date-range .daterange {
     width: 100%;
 }
 .wui-filter-more-head {

package/scss/wui/_drawer.scss

@@ -103,8 +103,10 @@
     min-width: 0;
     font-weight: 500;
 }
+// !important: a consumer's footer is often a Bootstrap display utility (.d-flex is display:flex !important),
+// which would otherwise keep Cancel and Submit showing beside the discard question.
 .wui-drawer-discarding > :not(.wui-drawer-discard) {
-    display: none;
+    display: none !important;
 }
 
 // Side drawer: from md up.

package/scss/wui/_theme-toggle.scss

@@ -17,18 +17,6 @@ html.wui-theme-switching::view-transition-new(root) {
     // flashes in full for the frame or two between the snapshot and the animation start.
     clip-path: inset(50%);
 }
-// The pressed control carries its own view-transition-name for the switch (the engine sets it),
-// so it is rendered as its own live layer above the sweep: no old image, no cross-fade, just
-// the control as it now is, with its ring sliding or its glyph swapped the moment it is pressed.
-html.wui-theme-switching::view-transition-group(wui-theme-toggle),
-html.wui-theme-switching::view-transition-new(wui-theme-toggle) {
-    animation: none;
-}
-html.wui-theme-switching::view-transition-old(wui-theme-toggle) {
-    animation: none;
-    opacity: 0;
-}
-
 // The new page is rendered live under the moving clip, so anything still changing on it repaints
 // the whole page every frame. A theme flip starts a colour transition on hundreds of elements at
 // once (Bootstrap's buttons, inputs and links all transition color and background), which is