@multiplatform.one/keycloak-theme 7.46.0 → 7.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/keycloak-theme",
-  "version": "7.46.0",
+  "version": "7.47.1",
   "description": "The SHC springboard design language as a Keycloakify login skin",
   "keywords": [
     "keycloak",

package/src/css.ts

@@ -361,17 +361,40 @@ ${scope} .login-pf-page .pf-c-form-control[aria-invalid="true"] {
    composites to mid-grey and the toggle to near-white — which is exactly
    how it rendered before this rule existed. Clearing the parent is what
    makes the two translucent children land on the slab instead. */
+/* LC-149 FIELD-TRAILING-ACTION: the reveal sits inside the password field
+   as a chromeless trailing eye, not a bordered button beside it. The field
+   keeps the end cap clear, and PatternFly's in-field invalid glyph steps
+   aside for it. */
 ${scope} .login-pf-page .pf-c-input-group {
   background: transparent;
+  position: relative;
   display: flex;
   align-items: stretch;
-  gap: 8px;
 }
-${scope} .login-pf-page .pf-c-input-group .pf-c-form-control {
+${scope} .login-pf-page .pf-c-input-group .pf-c-form-control,
+${scope} .login-pf-page .pf-c-input-group .pf-c-form-control[aria-invalid="true"] {
   flex: 1 1 auto;
-}
-${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control {
+  padding-inline-end: ${minPressTargetPx}px;
+  background-image: none;
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control,
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:hover,
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:active {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  width: ${minPressTargetPx}px;
   min-width: ${minPressTargetPx}px;
+  min-height: 0;
+  padding: 0;
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: ${ink.secondary};
+}
+${scope} .login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:hover {
+  color: ${ink.primary};
 }
 
 /* Chrome paints autofilled inputs a fixed pale yellow that no colour
@@ -634,6 +657,14 @@ ${scope} [tabindex]:focus-visible {
   outline-offset: ${focusRingOffsetPx}px !important;
   box-shadow: none !important;
 }
+/* LC-133 FOCUS-IS-BORDER (FZ-7717): a text field is the exception. It
+   focuses with its own border in the accent, at the width it already has,
+   so it changes colour and never size. */
+${scope} .login-pf-page .pf-c-form-control:focus,
+${scope} .login-pf-page .pf-c-form-control:focus-visible {
+  border-color: ${field.borderFocus};
+  outline: none !important;
+}
 
 /* ── small screens keep the slab ───────────────────────────── */
 @media (max-width: 767px) {

package/types/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAezC,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4HD,0EAA0E;AAC1E,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA8b/E"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAezC,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4HD,0EAA0E;AAC1E,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,CA6d/E"}