@webority/theme 0.9.14 → 0.9.15

package/package.json

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

@@ -692,35 +692,6 @@ button.wui-input-leading:focus-visible {
     transform: translateY(-1px);
 }
 
-// ---- Loading shimmer skeleton ----------------------------------------
-.shimmer {
-    position: relative;
-    overflow: hidden;
-    background: var(--wui-bg-muted);
-}
-.shimmer::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg,
-        transparent,
-        rgba(255, 255, 255, 0.5),
-        transparent);
-    transform: translateX(-100%);
-    animation: shimmer 1.4s infinite;
-}
-// Dark mode shimmer — lightens the gradient for visibility on darker surfaces.
-:root[data-theme="dark"] .shimmer::after {
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
-}
-
-// ---- Keyframes -------------------------------------------------------
-
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
-}
-
 // ---- Native scrollbars (document + opt-in) --------------------------
 // Scoped to html/body and `.wui-scroll` — never `*`. Global
 // `*` restyled every nested scroller (modals, tiny panels) and fought
@@ -805,9 +776,6 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
     .press-feedback {
         transition: none;
     }
-    .shimmer::after {
-        animation: none;
-    }
     // Hover animation options: hide the moving layer and drop lift/glow so no
     // option animates, regardless of which .btn-anim-* is applied.
     .btn:not(.btn-icon):not(.u-action)::before {

package/scss/wui/_controls.scss

@@ -716,6 +716,15 @@ textarea.form-control.autosize {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
+.pw-toggle .pw-eye-off {
+    display: none;
+}
+.pw-toggle.pw-revealed .pw-eye {
+    display: none;
+}
+.pw-toggle.pw-revealed .pw-eye-off {
+    display: block;
+}
 
 // Clearable ✕ — a trailing reset button, placed inside .input-wrap / .input-icon. It only
 // renders while the field has a value; .has-clear reserves the room so text never sits under it.

package/scss/wui/_flow.scss

@@ -678,16 +678,34 @@ button.step:focus-visible .step-circle {
 .repeater-row {
     position: relative;
     display: flex;
+    // When present, the row-label line is the full-width FIRST line (a header band) and the
+    // fields wrap to the line beneath it. The markup renders that band only when the row is
+    // labelled or removable (see .repeater-row-label) — a removable row's empty band reserves
+    // the gap that keeps the fields clear of the absolute remove control. A row that is neither
+    // has no band and stays compact; there is no overlap to avoid, since the control is absent too.
+    flex-wrap: wrap;
     align-items: flex-start;
     gap: 12px;
-    // 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;
+    padding: 14px 16px 16px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
 }
+// The row's header band. Rendered only when the row is labelled (shows the label) or removable
+// (an empty band reserving the gap that keeps the fields off the remove control); a row that is
+// neither omits it and stays compact. Full-width so the fields wrap below it; min-height + the row
+// gap clear the 36px remove disc; the right padding keeps any label text clear of the top-right
+// control. Set the text via React rowLabel / Razor <app-repeater-row label="…">.
+.repeater-row-label {
+    flex: 0 0 100%;
+    min-height: 24px;
+    padding-right: 44px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+}
 .repeater-index {
     flex: none;
     width: 22px;
@@ -708,12 +726,13 @@ button.step:focus-visible .step-circle {
     min-width: 0;
 }
 .repeater-remove {
-    // 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.
+    // Pulled out of the row's flex flow and parked in the top-right corner of the header
+    // band, so it never steals horizontal room from the fields — the last field can run to
+    // the row's right edge instead of stopping short. Sits a little below the top edge so it
+    // reads as part of the band rather than pinned to the corner.
     position: absolute;
-    top: 6px;
-    right: 8px;
+    top: 12px;
+    right: 12px;
 }
 .repeater-add {
     align-self: flex-start;