@webority/theme 0.9.13 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "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/_controls.scss

@@ -45,6 +45,9 @@
 }
 .form-check-label,
 .wui-control-label {
+    // `min-width: 0` lets the label wrap inside its column instead of forcing
+    // the track to overflow.
+    min-width: 0;
     cursor: pointer;
     font-size: 14px;
     line-height: 1.4;
@@ -52,21 +55,23 @@
     user-select: none;
 }
 
-// Checkbox / radio / switch hint & error sit BELOW the label on their own line, indented to
-// align under the label text (past the glyph + gap) — not inline beside it. `.form-check` is a
-// flex row for glyph+label; a full-width flex basis wraps the message to a second line.
+// The block variant is a 2-column grid — glyph in column 1, label in column 2 — so a long
+// label WRAPS inside its own column and stays beside the glyph, never dropping onto a second
+// line below it (a flex-wrap row breaks lines by each item's max-content size, so any label
+// longer than the remaining width is bumped below the glyph regardless of flex sizing). The
+// hint/error occupy column 2 too, landing on the next row aligned under the label text.
 .form-check {
-    flex-wrap: wrap;
-    --wui-check-hint-indent: 28px; // 20px glyph + 8px gap
-}
-.form-switch {
-    --wui-check-hint-indent: 48px; // 40px track + 8px gap
+    display: grid;
+    grid-template-columns: auto 1fr;
+    // Vertically centre the glyph against the whole label block, so it sits in
+    // the middle when the label wraps to multiple lines.
+    align-items: center;
+    column-gap: 12px;
+    row-gap: 2px;
 }
 .form-check > .field-hint,
 .form-check > .field-error {
-    flex-basis: 100%;
-    margin-top: 2px;
-    padding-left: var(--wui-check-hint-indent);
+    grid-column: 2;
 }
 
 // Glyph — shared by BS form-check-input and the wui-check alias.

package/scss/wui/_data.scss

@@ -645,11 +645,15 @@
     white-space: nowrap;
 }
 .u-action {
+    // The disc size is a custom property so the wrapper can scale it with the glyph `size`
+    // (React AppActionIcon / Razor <app-action-icon> set it to `size + 16px` — a constant 8px
+    // ring). Default 36px keeps the historical disc for the default `size=20`.
+    --wui-action-size: 36px;
     display: inline-grid;
     place-items: center;
     flex: none;
-    width: 36px;
-    height: 36px;
+    width: var(--wui-action-size);
+    height: var(--wui-action-size);
     padding: 0;
     border: none;
     background: var(--color-bg-subtle);
@@ -662,9 +666,12 @@
     position: relative;
 }
 // Touch pointers need a 44px minimum target. Grow the hit area, not the
-// ink, so row density and alignment are untouched.
+// ink, so row density and alignment are untouched. This lives on ::before, NOT
+// ::after: an AppActionIcon carries `data-wui-tip` for its tooltip, whose bubble
+// owns `[data-wui-tip]::after` (imported later, same specificity) — sharing ::after
+// would let the tooltip overwrite the hit-area box and silently drop the 44px target.
 @media (pointer: coarse) {
-    .u-action::after {
+    .u-action::before {
         content: "";
         position: absolute;
         top: 50%;

package/scss/wui/_disclosure.scss

@@ -91,17 +91,21 @@
 .faq-a-inner {
     min-height: 0;
     overflow: hidden;
+    // Horizontal padding is CONSTANT in both states. Toggling it with `.open` made the content
+    // jump 18px sideways the instant a pane collapsed (padding isn't transitioned, unlike the
+    // grid-row height) — the "slide left" bug. Side padding adds no height, so keeping it on the
+    // closed pane is safe; only the BOTTOM padding stays conditional (below), because a constant
+    // one leaks height on the collapsed 0fr row.
+    padding: 0 18px;
     font-size: 14px;
     line-height: 1.6;
     color: var(--color-text-muted);
 }
-// Padding lives on a child of the clipped element so it does not add height while
-// the row is collapsed to 0fr.
 .faq-a-inner > :first-child {
     margin-top: 0;
 }
 .faq-item.open .faq-a-inner {
-    padding: 0 18px 16px;
+    padding-bottom: 16px;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/scss/wui/_display.scss

@@ -1121,4 +1121,307 @@ a.info-row:hover .info-value {
 }
 .result-muted .result-code {
     color: var(--color-text-muted);
-}
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// AppLink / <app-link> — a text link with a choice of hover animation.
+// Base is a flat accent-coloured anchor; `.wui-link--<animation>` layers the
+// hover treatment. Every animation is disabled under prefers-reduced-motion,
+// where the link falls back to a static underline. React AppLink + Razor
+// <app-link> emit identical class names, so the two surfaces share this block.
+// ─────────────────────────────────────────────────────────────────────────────
+// The line each animation draws is our own thin ::after (or, for `none`, nothing) —
+// never the browser's text-decoration. Bootstrap's global `a:hover` re-adds
+// `text-decoration: underline` to every anchor, and `.wui-link` is an <a>, so without
+// pinning it off here that global underline bleeds onto the link on hover, sitting under
+// our animated line as a second, thicker underline. Force it off in every state.
+.wui-link,
+.wui-link:hover,
+.wui-link:focus,
+.wui-link:focus-visible,
+.wui-link:active {
+    text-decoration: none;
+}
+.wui-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    position: relative;
+    color: var(--color-primary);
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.25s var(--wui-ease-out-quart);
+}
+.wui-link:hover {
+    color: var(--color-primary);
+}
+.wui-link:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+}
+.wui-link.is-disabled {
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+    opacity: 0.65;
+    pointer-events: none;
+}
+.wui-link__label {
+    position: relative;
+    z-index: 0;
+    white-space: nowrap;
+}
+.wui-link__ic {
+    display: inline-flex;
+    flex: none;
+}
+.wui-link__ic--left,
+.wui-link__ic--right {
+    line-height: 0;
+}
+.wui-link--sm {
+    font-size: 0.8125rem;
+}
+.wui-link--lg {
+    font-size: 1.125rem;
+}
+
+// underline family — one thin single line, drawn with the same 1px ::after on every
+// variant so `static`, `underline`, and `underline-center` never differ in weight.
+// `underline` slides it in from the left, `underline-center` grows it from the middle,
+// `static` shows it always (see below).
+.wui-link--underline .wui-link__label::after,
+.wui-link--underline-center .wui-link__label::after,
+.wui-link--static .wui-link__label::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -2px;
+    height: 1px;
+    background: currentColor;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 0.28s var(--wui-ease-out-quart);
+}
+.wui-link--underline-center .wui-link__label::after {
+    transform-origin: center;
+}
+.wui-link--underline:hover .wui-link__label::after,
+.wui-link--underline:focus-visible .wui-link__label::after,
+.wui-link--underline-center:hover .wui-link__label::after,
+.wui-link--underline-center:focus-visible .wui-link__label::after {
+    transform: scaleX(1);
+}
+
+// slide — the whole link (label + icons) nudges to the right.
+.wui-link--slide {
+    transition: color 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart);
+}
+.wui-link--slide:hover,
+.wui-link--slide:focus-visible {
+    transform: translateX(3px);
+}
+
+// icon — a trailing icon slides and fades in on hover.
+.wui-link--icon .wui-link__ic--right {
+    margin-inline-start: -0.2em;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: opacity 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart), margin 0.25s var(--wui-ease-out-quart);
+}
+.wui-link--icon:hover .wui-link__ic--right,
+.wui-link--icon:focus-visible .wui-link__ic--right {
+    margin-inline-start: 0;
+    opacity: 1;
+    transform: translateX(2px);
+}
+
+// highlight — a tinted background wipes across behind the label.
+.wui-link--highlight .wui-link__label::before {
+    content: "";
+    position: absolute;
+    inset: -0.12em -0.3em;
+    z-index: -1;
+    border-radius: 4px;
+    background: var(--color-primary-soft);
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 0.3s var(--wui-ease-out-quart);
+}
+.wui-link--highlight:hover .wui-link__label::before,
+.wui-link--highlight:focus-visible .wui-link__label::before {
+    transform: scaleX(1);
+}
+
+// bracket — [ ] brackets slide inward around the label on hover.
+.wui-link--bracket .wui-link__label {
+    padding-inline: 0.45em;
+}
+.wui-link--bracket .wui-link__label::before,
+.wui-link--bracket .wui-link__label::after {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+    transition: opacity 0.25s var(--wui-ease-out-quart), transform 0.25s var(--wui-ease-out-quart);
+}
+.wui-link--bracket .wui-link__label::before {
+    content: "[";
+    left: 0;
+    transform: translateX(0.35em);
+}
+.wui-link--bracket .wui-link__label::after {
+    content: "]";
+    right: 0;
+    transform: translateX(-0.35em);
+}
+.wui-link--bracket:hover .wui-link__label::before,
+.wui-link--bracket:focus-visible .wui-link__label::before,
+.wui-link--bracket:hover .wui-link__label::after,
+.wui-link--bracket:focus-visible .wui-link__label::after {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+// fade — starts in body text colour, resolves to the accent on hover.
+.wui-link--fade {
+    color: var(--color-text);
+}
+.wui-link--fade:hover,
+.wui-link--fade:focus-visible {
+    color: var(--color-primary);
+}
+
+// static — the same thin single line, always visible (no text-decoration, so it matches
+// the animated underline's weight exactly). At rest the line is fully drawn; on hover it
+// re-draws with a left→right slide sweep, so the single line still animates.
+.wui-link--static .wui-link__label::after {
+    transform: scaleX(1);
+    transform-origin: left center;
+    transition: none;
+}
+.wui-link--static:hover .wui-link__label::after,
+.wui-link--static:focus-visible .wui-link__label::after {
+    animation: wui-link-underline-slide 0.32s var(--wui-ease-out-quart);
+}
+@keyframes wui-link-underline-slide {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+// grow — the label's letters open up on hover.
+.wui-link--grow {
+    transition: color 0.25s var(--wui-ease-out-quart), letter-spacing 0.25s var(--wui-ease-out-quart);
+}
+.wui-link--grow:hover,
+.wui-link--grow:focus-visible {
+    letter-spacing: 0.035em;
+}
+
+// glow — a soft accent glow blooms behind the text on hover.
+.wui-link--glow {
+    transition: color 0.25s var(--wui-ease-out-quart), text-shadow 0.3s var(--wui-ease-out-quart);
+}
+.wui-link--glow:hover,
+.wui-link--glow:focus-visible {
+    text-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 55%, transparent);
+}
+
+// shine — a light shimmer sweeps across the label on hover. The text is painted with a
+// gradient (mostly the accent, with a lighter band) clipped to the glyphs; hovering
+// animates that band from right to left across the word.
+.wui-link--shine .wui-link__label {
+    background-image: linear-gradient(
+        110deg,
+        var(--color-primary) 0%,
+        var(--color-primary) 42%,
+        color-mix(in srgb, var(--color-primary) 25%, white) 50%,
+        var(--color-primary) 58%,
+        var(--color-primary) 100%
+    );
+    background-size: 220% 100%;
+    background-position: 100% 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+}
+.wui-link--shine:hover .wui-link__label,
+.wui-link--shine:focus-visible .wui-link__label {
+    animation: wui-link-shine 0.9s var(--wui-ease-out-quart);
+}
+@keyframes wui-link-shine {
+    from {
+        background-position: 100% 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+// none — a plain coloured link, no underline, no motion.
+.wui-link--none .wui-link__label {
+    text-decoration: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-link,
+    .wui-link--slide,
+    .wui-link__label::after,
+    .wui-link__label::before,
+    .wui-link--icon .wui-link__ic--right {
+        transition: none;
+    }
+    // Animated underlines settle to a visible static line rather than a hidden one.
+    .wui-link--underline .wui-link__label::after,
+    .wui-link--underline-center .wui-link__label::after {
+        transform: scaleX(1);
+    }
+    // The static line drops its hover re-draw sweep.
+    .wui-link--static:hover .wui-link__label::after,
+    .wui-link--static:focus-visible .wui-link__label::after {
+        animation: none;
+    }
+    .wui-link--slide:hover,
+    .wui-link--slide:focus-visible {
+        transform: none;
+    }
+    .wui-link--icon .wui-link__ic--right {
+        opacity: 1;
+        transform: none;
+        margin-inline-start: 0;
+    }
+    .wui-link--highlight:hover .wui-link__label::before,
+    .wui-link--highlight:focus-visible .wui-link__label::before {
+        transform: none;
+    }
+    .wui-link--bracket .wui-link__label::before,
+    .wui-link--bracket .wui-link__label::after {
+        opacity: 1;
+        transform: none;
+    }
+    // grow / glow settle to their rest state — no letter-spacing shift, no glow bloom.
+    .wui-link--grow:hover,
+    .wui-link--grow:focus-visible {
+        letter-spacing: normal;
+    }
+    .wui-link--glow:hover,
+    .wui-link--glow:focus-visible {
+        text-shadow: none;
+    }
+    // shine drops the shimmer and paints the label a solid accent colour.
+    .wui-link--shine:hover .wui-link__label,
+    .wui-link--shine:focus-visible .wui-link__label {
+        animation: none;
+    }
+    .wui-link--shine .wui-link__label {
+        background-image: none;
+        -webkit-text-fill-color: var(--color-primary);
+        color: var(--color-primary);
+    }
+}

package/scss/wui/_flow.scss

@@ -676,10 +676,13 @@ button.step:focus-visible .step-circle {
     gap: 12px;
 }
 .repeater-row {
+    position: relative;
     display: flex;
     align-items: flex-start;
     gap: 12px;
-    padding: 14px 16px;
+    // Extra top room so the remove control (absolute, top-right) sits in a header
+    // band clear of the fields — the fields start below it and still run full width.
+    padding: 28px 16px 16px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
@@ -705,8 +708,12 @@ button.step:focus-visible .step-circle {
     min-width: 0;
 }
 .repeater-remove {
-    flex: none;
-    margin-top: 4px;
+    // Pulled out of the row's flex flow and parked in the top-right corner, level
+    // with the field labels, so it never steals horizontal room from the fields —
+    // the last field can now run to the row's right edge instead of stopping short.
+    position: absolute;
+    top: 6px;
+    right: 8px;
 }
 .repeater-add {
     align-self: flex-start;

package/scss/wui/_media.scss

@@ -863,10 +863,8 @@
 // Round dropzone uploader (workspace/brand logo) and the settings-page photo
 // ring share this same interactive-uploader pattern.
 .set-uploader {
-    // One knob for the whole control — the ring diameter. Presets and the numeric `size`
-    // prop set it (inline); the ring, initials font and icons all derive from it, so any
-    // px value scales the picker proportionally. md (120px) is the default.
-    --wui-logo-size: 120px;
+    // The ring diameter (--wui-logo-size) is set on the shell, not here, so the sibling remove
+    // control inherits it too; the ring, initials font and icons all derive from it.
     display: inline-flex;
     padding: 0;
     border: none;
@@ -1026,8 +1024,11 @@
     width: max-content;
     max-width: 100%;
 }
-// Positioning context for the remove control, which is a sibling of the button.
+// Positioning context for the remove control, which is a sibling of the button. It also owns the
+// one sizing knob — the ring diameter — so BOTH children (the button and the remove control)
+// inherit it. Presets and the numeric `size` prop set it inline; md (120px) is the default.
 .set-uploader-shell {
+    --wui-logo-size: 120px;
     position: relative;
     display: inline-block;
 }
@@ -1105,8 +1106,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    // Scales with the ring (~23% of the diameter reads well) so it stays proportional at every
+    // size instead of dwarfing a small (sm) ring and vanishing on a large (lg) one. Clamped so it
+    // never shrinks below a comfortable tap target or grows past the badge look; md lands on 28px.
+    width: clamp(20px, calc(var(--wui-logo-size) * 0.23), 34px);
+    height: clamp(20px, calc(var(--wui-logo-size) * 0.23), 34px);
     padding: 0;
     border: 2px solid var(--color-surface);
     border-radius: 50%;
@@ -1115,6 +1119,12 @@
     cursor: pointer;
     transition: transform 0.15s;
 }
+// The × glyph scales with the button (its width/height attributes are set in JS/Razor as a
+// baseline; this overrides them, the way the overlay icon is scaled under its container query).
+.set-uploader-remove > .wui-icon {
+    width: clamp(11px, calc(var(--wui-logo-size) * 0.115), 17px);
+    height: clamp(11px, calc(var(--wui-logo-size) * 0.115), 17px);
+}
 .set-uploader-remove:hover {
     transform: scale(1.08);
 }

package/scss/wui/_navigation.scss

@@ -193,6 +193,9 @@
     color: var(--color-text-muted);
     white-space: nowrap;
     cursor: pointer;
+    // A tab can be a real <a href> (link tab) — strip the browser's link underline so a link
+    // tab is visually identical to a button tab.
+    text-decoration: none;
     transition:
         color 0.12s ease,
         border-color 0.12s ease;
@@ -210,9 +213,18 @@
     object-fit: cover;
     border-radius: var(--radius-sm);
 }
-.app-tab:hover:not(:disabled):not(.active) {
+.app-tab:hover:not(:disabled):not(.disabled):not(.active) {
     color: var(--color-text);
 }
+// A link tab is a real <a>, and Bootstrap's `a:hover` (plus the theme's link hover) re-add an
+// underline that the base `text-decoration: none` above (lower specificity) can't hold off. Scope
+// under `.app-tabs` so these win in every state — a tab must read as a tab, never a link.
+.app-tabs .app-tab,
+.app-tabs .app-tab:hover,
+.app-tabs .app-tab:focus,
+.app-tabs .app-tab:focus-visible {
+    text-decoration: none;
+}
 .app-tab.active {
     color: var(--color-primary);
     // The active tab carries weight as well as colour — colour alone is a weak
@@ -238,10 +250,20 @@
 .app-tabs-vertical .app-tab.active::after {
     display: none;
 }
-.app-tab:disabled {
+// `:disabled` matches a disabled <button> tab; `.disabled`/[aria-disabled] cover a disabled
+// link tab (an <a> can't be truly :disabled). Same inert, muted treatment for both.
+.app-tab:disabled,
+.app-tab.disabled,
+.app-tab[aria-disabled="true"] {
     color: var(--color-text-subtle);
     cursor: not-allowed;
 }
+// A disabled link tab already has no href; also stop it swallowing clicks (a <button:disabled>
+// gets this from the UA — an <a> does not).
+.app-tab.disabled,
+.app-tab[aria-disabled="true"] {
+    pointer-events: none;
+}
 .app-tab:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: -2px;
@@ -251,7 +273,7 @@
 .app-tab.danger {
     color: var(--color-danger-text);
 }
-.app-tab.danger:hover:not(:disabled):not(.active) {
+.app-tab.danger:hover:not(:disabled):not(.disabled):not(.active) {
     color: var(--color-danger-text);
 }
 .app-tab.danger.active {

package/scss/wui/_overlays.scss

@@ -404,16 +404,18 @@
 // It sits above the element; for a collision-aware / richer tooltip, use AppTooltip /
 // <app-tooltip> instead.
 //
-// Two users, for different reasons:
-//   - `.wui-icon-tip`, the wrapper the `tooltip` prop on AppIcon / <app-icon> puts around a
-//     glyph (it adds the inline-flex layout below).
-//   - <app-tabs> tab buttons, which CANNOT use a Bootstrap tooltip: the button already owns a
-//     `bs.tab` instance and Bootstrap permits only one instance per element, so binding
-//     `bs.Tooltip` to it logs "Bootstrap doesn't allow more than one instance per element"
-//     and the tab instance is never registered.
+// Sole remaining user: <app-tabs> tab buttons, which CANNOT use a Bootstrap tooltip — the button
+// already owns a `bs.tab` instance and Bootstrap permits only one instance per element, so binding
+// `bs.Tooltip` to it logs "Bootstrap doesn't allow more than one instance per element" and the tab
+// instance is never registered. Everything else with a `tooltip` prop (AppIcon / <app-icon>
+// included) now routes through the shared collision-aware AppTooltip / Bootstrap-tooltip (Popper)
+// engine instead.
 [data-wui-tip] {
     position: relative;
 }
+// The wrapper the `tooltip` prop on AppIcon / <app-icon> puts around a glyph — now just the
+// inline-flex layout; the tooltip itself rides the shared Popper engine (Bootstrap-tooltip
+// data-attributes on this span, AppTooltip on React), not the CSS bubble above.
 .wui-icon-tip {
     display: inline-flex;
     vertical-align: -0.125em;
@@ -424,7 +426,11 @@
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
-    z-index: var(--wui-z-menu, 1080);
+    // Sits on the dedicated tooltip rung — above menus/popovers/modals, below toasts — so it is
+    // never stacked under an overlay it is meant to annotate. This is a fixed-position CSS bubble
+    // (always above); for a collision-aware tooltip that flips to stay on-screen, use AppTooltip /
+    // <app-tooltip> (Popper), which AppActionIcon wraps for exactly that reason.
+    z-index: var(--wui-z-tooltip, 1650);
     width: max-content;
     max-width: 240px;
     padding: 7px 11px;