@webority/theme 0.9.13 → 0.9.15

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;

package/scss/wui/_utilities.scss

@@ -430,8 +430,16 @@
 // passwordRequirements) opens on focus. Rendered identically by React (a JSX <ul>) and Razor
 // (the same <ul> built in webority-ui.js), so both surfaces read the same. `.pw-popover` is the
 // custom class both put on Bootstrap's `.popover` panel.
+// The card surface — header and body alike — is pure white, lifted off the page with the shared
+// overlay shadow (the one ink menus/popovers/modals use; not a hand-rolled per-component shadow).
+.pw-popover {
+    --bs-popover-bg: var(--wui-bg-light);
+    --bs-popover-header-bg: var(--wui-bg-light);
+    box-shadow: var(--wui-shadow-overlay);
+}
 .pw-popover .popover-body {
-    padding: 12px 14px;
+    padding: 14px 16px;
+    min-width: 232px;
 }
 .pw-criteria {
     list-style: none;
@@ -439,37 +447,45 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 9px;
 }
 .pw-criteria .pw-rule {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 9px;
     font-size: 13px;
-    line-height: 1.3;
+    line-height: 1.35;
+    font-weight: 500;
+    transition: color 0.15s ease;
 }
-// The state mark is a baked-colour circled ✓/✕ — matched to the AA status ramp. The list TEXT
-// uses the -text token for contrast; the mark itself needs less and uses the vivid ramp value.
+// The state mark is a single mask tinted by the rule's own text colour (`currentColor`), so it
+// tracks the met/unmet colour automatically and stays theme-aware — no baked hex, no light/dark
+// fork. An UNMET rule is a calm hollow circle (a pending step, not an error); it turns into a
+// filled green check the moment the rule is satisfied. Red is deliberately NOT used for "not yet
+// typed" — an empty field should read as a to-do list, not a wall of validation failures.
 .pw-criteria .pw-mark {
     flex: none;
-    width: 18px;
-    height: 18px;
-    background: center / contain no-repeat;
+    width: 17px;
+    height: 17px;
+    background-color: currentColor;
+    -webkit-mask: center / contain no-repeat;
+    mask: center / contain no-repeat;
+    -webkit-mask-image: var(--pw-mark);
+    mask-image: var(--pw-mark);
+    transition: background-color 0.15s ease;
 }
 .pw-criteria .pw-rule-text {
     min-width: 0;
 }
-.pw-criteria .pw-rule.met {
-    color: var(--color-success-text);
-}
-.pw-criteria .pw-rule.met .pw-mark {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317C653' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5 5.5-6'/%3E%3C/svg%3E");
-}
+// Unmet: muted, low-emphasis — a hollow ring.
 .pw-criteria .pw-rule.unmet {
-    color: var(--color-danger-text);
+    color: var(--color-text-subtle);
+    --pw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3C/svg%3E");
 }
-.pw-criteria .pw-rule.unmet .pw-mark {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8285A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
+// Met: success-green — a filled circle with a knocked-out check.
+.pw-criteria .pw-rule.met {
+    color: var(--color-success-text);
+    --pw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm4.03-11.28a.9.9 0 0 0-1.32-1.22l-4.02 4.35-1.4-1.5a.9.9 0 1 0-1.32 1.22l2.06 2.22a.9.9 0 0 0 1.32 0l4.68-5.07Z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
 // The checklist opens with a PLAIN FADE only — no drop / zoom / scale. It opts out of the shared
 // menu-open motion (_menu-motion.scss animates every `.popover.show`) and lets Bootstrap's own