From ebe0e59efc44d1e7ba3beca6ce9266b4a94439b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 11 Jun 2026 11:20:37 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 .../components/interactive-elements.html      |  33 +++++
 docs/styleguide/index.html                    |   2 +-
 .../patterns/vsf-register-step-1.html         | 131 +++++-------------
 .../10-components-interactive-elements.css    |  29 ++++
 public/assets/styleguide.upstream.css         |  29 ++++
 public/assets/styleguide.upstream.meta.json   |   4 +-
 public/assets/styles.css                      |  29 ++++
 7 files changed, 154 insertions(+), 103 deletions(-)
diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html
index 1b37e9b..c4ee26f 100644
--- a/docs/styleguide/components/interactive-elements.html
+++ b/docs/styleguide/components/interactive-elements.html
@@ -330,6 +330,23 @@
         </label>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <label class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-input-validation-stack">
+            <input
+              class="sg-interaction-element sg-input-single-line sg-form-active"
+              type="text"
+              value="Ungültige Eingabe"
+              aria-label="Einzeiliges Eingabefeld mit Validierung"
+              aria-invalid="true"
+            >
+            <span class="sg-form-validation-text">Bitte eine gültige Eingabe machen.</span>
+          </span>
+        </label>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">
@@ -388,6 +405,22 @@
         </label>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <label class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <span class="sg-input-validation-stack">
+            <textarea
+              class="sg-input-multi-line sg-form-active"
+              rows="3"
+              aria-label="Mehrzeiliges Eingabefeld mit Validierung"
+              aria-invalid="true"
+            >Ungültige Eingabe über mehrere Zeilen</textarea>
+            <span class="sg-form-validation-text">Bitte einen längeren Text eingeben.</span>
+          </span>
+        </label>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">form-disabled</p>
         <label class="sg-labeled-input-row">
diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html
index 2a7b9ec..5dfd14b 100644
--- a/docs/styleguide/index.html
+++ b/docs/styleguide/index.html
@@ -72,7 +72,7 @@
         <li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
         <li><a href="./patterns/vsf-list-detailseite.html">VSF List Detailseite</a></li>
         <li><a href="./patterns/vsf-meldungen.html">VSF Meldungen</a></li>
-        <li><a href="./patterns/vsf-register-step-1.html">VSF Register Step 1</a></li>
+        <li><a href="./patterns/vsf-register-step-1.html">VFS Keycloak Login</a></li>
         <li><a href="./patterns/vsf-listen-uebersicht-seite-v2.html">VSF Listen Übersicht Seite V2</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
diff --git a/docs/styleguide/patterns/vsf-register-step-1.html b/docs/styleguide/patterns/vsf-register-step-1.html
index e0f9ef4..979d729 100644
--- a/docs/styleguide/patterns/vsf-register-step-1.html
+++ b/docs/styleguide/patterns/vsf-register-step-1.html
@@ -8,73 +8,45 @@
 </head>
 <body class="sg-vsf-register-step-1-page">
 
-  <h1 class="sg-main-heading">Layout – VSF Register Step 1</h1>
-
-  <section id="pattern-portal-header">
-    <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
-      <header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
-        <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
-          <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
-
-          <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
-            <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-                Login
-              </button>
-
-              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
-                Registrieren
-              </button>
-            </div>
-          </div>
-
-          <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Übersicht</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Features</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Preise</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Firma der Woche</button>
-          </nav>
-        </div>
-      </header>
-
-      <div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Registriere dich bei ValueStockFinder" data-component="transparent-card"></div>
-    </article>
-  </section>
+  <h1 class="sg-main-heading">Layout – VFS Keycloak Login</h1>
 
   <main class="sg-vsf-register-step-1">
-    <article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich">
+    <article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Sign in">
       <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
-        <div class="sg-strong">Probiere ValueStockFinder kostenlos und unverbindlich aus</div>
+        <div class="sg-strong">Welcome back to ValueStockFinder!</div>
       </header>
-      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
-        <p class="sg-body">Teste ValueStockFinder 7 Tage kostenlos und unverbindlich. Erhalte direkten Zugriff auf fundierte Aktienanalysen, klare Bewertungen und übersichtliche Entscheidungshilfen – ohne Verpflichtung.</p>
-      </div>
-      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrierungsformular">
-        <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten">
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Sign in form">
+        <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Form with sections">
           <form class="sg-form-sections-card" action="#" method="post">
             <div class="sg-form-sections-card__body" data-pattern-part="form-body">
-              <h2 class="sg-strong sg-form-sections-card__title">Registrieren mit E-Mail und Passwort</h2>
+              <h2 class="sg-strong sg-form-sections-card__title">Sign in to your account</h2>
 
               <div class="sg-form-sections-card__field-group">
                 <label class="sg-labeled-input-row">
-                  <span class="sg-label">E-Mail</span>
-                  <input
-                    class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                    type="email"
-                    placeholder="E-Mail eingeben"
-                    aria-label="E-Mail"
-                    autocomplete="email"
-                  >
+                  <span class="sg-label">Username or email</span>
+                  <span class="sg-input-validation-stack">
+                    <input
+                      class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                      type="text"
+                      value="lkn"
+                      aria-label="Username or email"
+                      aria-invalid="true"
+                      aria-describedby="login-identifier-error"
+                      autocomplete="username"
+                    >
+                    <span class="sg-form-validation-text" id="login-identifier-error">Invalid username or password.</span>
+                  </span>
                 </label>
 
                 <label class="sg-labeled-input-row">
-                  <span class="sg-label">Passwort</span>
+                  <span class="sg-label">Password</span>
                   <input
                     class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
                     type="password"
-                    placeholder="Passwort eingeben"
-                    aria-label="Passwort"
-                    autocomplete="new-password"
+                    placeholder="Enter password"
+                    aria-label="Password"
+                    aria-invalid="true"
+                    autocomplete="current-password"
                   >
                 </label>
               </div>
@@ -82,35 +54,20 @@
 
             <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
               <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
-                <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button>
-                <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button>
+                <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Cancel</button>
+                <button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Sign In</button>
               </div>
             </footer>
           </form>
         </div>
       </footer>
-      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrieren mit">
-        <div class="sg-strong">Registrieren mit</div>
-        <div class="sg-vsf-register-step-1__social-links">
-          <a class="social-logo" href="#" aria-label="Mit Google fortfahren" data-idp="google">
-            <span class="kcLogoIdP-google" aria-hidden="true"></span>
-            <span>Logo Platzhalter</span>
-          </a>
-
-          <a class="social-logo" href="#" aria-label="Mit LinkedIn fortfahren" data-idp="linkedin">
-            <span class="kcLogoIdP-linkedin" aria-hidden="true"></span>
-            <span>Logo Platzhalter</span>
-          </a>
-
-          <a class="social-logo" href="#" aria-label="Mit Microsoft fortfahren" data-idp="microsoft">
-            <span class="kcLogoIdP-microsoft" aria-hidden="true"></span>
-            <span>Logo Platzhalter</span>
-          </a>
-        </div>
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Google login from keycoak">
+        <div class="sg-strong">Or sign in with</div>
+        <div class="sg-body">google login from keycoak</div>
       </footer>
-      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Bereits registriert">
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Already have an account">
         <div class="sg-body">
-          Du hast bereits einen Account? <a class="sg-hyperlink" href="#" data-component="hyperlink">Login</a>.
+          New user? <a class="sg-hyperlink" href="#" data-component="hyperlink">Register</a>.
         </div>
       </footer>
     </article>
@@ -148,32 +105,6 @@
       });
     });
 
-    (() => {
-      const formCard = document.querySelector('.sg-form-sections-card');
-      if (!formCard) {
-        return;
-      }
-
-      const registerButton = formCard.querySelector('.sg-button--process');
-      if (!registerButton) {
-        return;
-      }
-
-      const updateRegisterButtonState = () => {
-        const requiredFields = Array.from(formCard.querySelectorAll('input[type="email"], input[type="password"]'));
-        const allFieldsFilled = requiredFields.every((field) => field.value.trim().length > 0);
-
-        registerButton.disabled = !allFieldsFilled;
-        registerButton.setAttribute('aria-disabled', String(!allFieldsFilled));
-        registerButton.classList.toggle('sg-button--process-inactive', !allFieldsFilled);
-      };
-
-      formCard.querySelectorAll('input[type="email"], input[type="password"]').forEach((field) => {
-        field.addEventListener('input', updateRegisterButtonState);
-      });
-
-      updateRegisterButtonState();
-    })();
   </script>
 
 </body>
diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css
index 9c89d3f..fa8360e 100644
--- a/docs/styleguide/styles/10-components-interactive-elements.css
+++ b/docs/styleguide/styles/10-components-interactive-elements.css
@@ -377,6 +377,35 @@
       max-width: var(--layout-form-input-field-max-width);
     }
 
+    .sg-input-validation-stack {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      min-width: 0;
+      max-width: var(--layout-form-input-field-max-width);
+    }
+
+    .sg-input-validation-stack .sg-input-single-line,
+    .sg-input-validation-stack .sg-input-multi-line {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .sg-form-validation-text {
+      margin: 0;
+      color: var(--text-vsf-list-card-limit-note);
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-base);
+    }
+
+    .sg-input-single-line[aria-invalid="true"],
+    .sg-input-multi-line[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 024a07b..1e82268 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -860,6 +860,35 @@ section + section {
       max-width: var(--layout-form-input-field-max-width);
     }
 
+    .sg-input-validation-stack {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      min-width: 0;
+      max-width: var(--layout-form-input-field-max-width);
+    }
+
+    .sg-input-validation-stack .sg-input-single-line,
+    .sg-input-validation-stack .sg-input-multi-line {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .sg-form-validation-text {
+      margin: 0;
+      color: var(--text-vsf-list-card-limit-note);
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-base);
+    }
+
+    .sg-input-single-line[aria-invalid="true"],
+    .sg-input-multi-line[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 8afe7b5..64173c8 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "8b7d5ef",
-  "syncedAtUtc": "2026-06-11T05:57:07Z",
+  "styleguideCommit": "436eb55",
+  "syncedAtUtc": "2026-06-11T09:20:37Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 024a07b..1e82268 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -860,6 +860,35 @@ section + section {
       max-width: var(--layout-form-input-field-max-width);
     }
 
+    .sg-input-validation-stack {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      gap: var(--spacing-small);
+      min-width: 0;
+      max-width: var(--layout-form-input-field-max-width);
+    }
+
+    .sg-input-validation-stack .sg-input-single-line,
+    .sg-input-validation-stack .sg-input-multi-line {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .sg-form-validation-text {
+      margin: 0;
+      color: var(--text-vsf-list-card-limit-note);
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-small);
+      line-height: var(--line-height-base);
+    }
+
+    .sg-input-single-line[aria-invalid="true"],
+    .sg-input-multi-line[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }
