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

---
 .../components/interactive-elements.html      | 77 +++++++++++++++++++
 .../10-components-interactive-elements.css    | 34 ++++++++
 .../styles/37-layouts-page-layout-public.css  |  2 +-
 public/assets/styleguide.upstream.css         | 36 ++++++++-
 public/assets/styleguide.upstream.meta.json   |  4 +-
 public/assets/styles.css                      | 36 ++++++++-
 6 files changed, 184 insertions(+), 5 deletions(-)

diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html
index 28e833c..53e178c 100644
--- a/docs/styleguide/components/interactive-elements.html
+++ b/docs/styleguide/components/interactive-elements.html
@@ -149,6 +149,46 @@
         </div>
       </div>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+
+        <div class="sg-labeled-input-row">
+          <span class="sg-label">Label</span>
+          <div class="sg-input-validation-stack">
+            <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="invalid">
+              <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit Validierung" aria-invalid="true" aria-describedby="pulldown-invalid-feedback" data-component-part="pulldown-trigger">
+                Auswahl
+              </button>
+
+              <div class="sg-pulldown-panel" aria-label="Geöffnetes invalides Pulldown" data-component-part="pulldown-panel">
+                <ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen im invaliden Pulldown">
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 1</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 2</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 3</span>
+                  </li>
+
+                  <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                    <span>Menüpunkt 4</span>
+                  </li>
+
+                  <li class="sg-pulldown-option sg-pulldown-option--disabled">
+                    <span>Menüpunkt 5</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <span class="sg-form-validation-text" id="pulldown-invalid-feedback">Bitte eine gültige Auswahl treffen.</span>
+          </div>
+        </div>
+      </div>
+
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
 
@@ -493,6 +533,19 @@
         </button>
         <span>Option nicht verfügbar</span>
       </label>
+
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <div class="sg-input-validation-stack sg-input-validation-stack--checkbox-invalid">
+          <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="default">
+            <button class="sg-checkbox-field" type="button" role="checkbox" aria-checked="false" aria-label="Standard Checkbox mit Validierung" aria-invalid="true" aria-describedby="checkbox-invalid-feedback">
+              <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
+            </button>
+            <span>Standard Checkbox</span>
+          </label>
+          <span class="sg-form-validation-text" id="checkbox-invalid-feedback">Bitte mindestens eine Option auswählen.</span>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -568,6 +621,30 @@
         </span>
       </label>
 
+      <div class="sg-state-example">
+        <p class="sg-state-example__label sg-table-label">form-invalid</p>
+        <div class="sg-labeled-input-row sg-labeled-input-row--radio-invalid">
+          <span class="sg-label">Label</span>
+          <span class="sg-radio-field-row">
+            <span class="sg-radio-activatable-group__choices">
+              <span class="sg-radio-activatable-group__choice">
+                <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 1 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
+                  <span class="sg-radio-field__mark" aria-hidden="true"></span>
+                </button>
+                <span>Radio 1</span>
+              </span>
+              <span class="sg-radio-activatable-group__choice">
+                <button class="sg-radio-field" type="button" role="radio" aria-checked="false" aria-label="Radio 2 mit Validierung" aria-invalid="true" aria-describedby="radio-invalid-feedback">
+                  <span class="sg-radio-field__mark" aria-hidden="true"></span>
+                </button>
+                <span>Radio 2</span>
+              </span>
+            </span>
+          </span>
+          <span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
+        </div>
+      </div>
+
       <div class="sg-checkbox-field-option sg-body" data-component="radio-field" data-component-state="default">
         <span class="sg-state-example__label sg-table-label">Variante ohne Gesamtlabel</span>
         <span class="sg-radio-field-row sg-radio-field-row--without-label">
diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css
index 8dde8d5..c38db4d 100644
--- a/docs/styleguide/styles/10-components-interactive-elements.css
+++ b/docs/styleguide/styles/10-components-interactive-elements.css
@@ -407,10 +407,44 @@
       box-shadow: 0 0 0 1px var(--color-signal-red) inset;
     }
 
+    .sg-pulldown[aria-invalid="true"],
+    .sg-checkbox-field[aria-invalid="true"],
+    .sg-radio-field[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;
     }
 
+    #component-radio-field .sg-labeled-input-row--radio-invalid {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--spacing-large);
+      row-gap: var(--spacing-small);
+      align-items: start;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: 0;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    #component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
+      gap: calc(var(--spacing-small) / 4);
+    }
+
     .sg-input-multi-line {
       box-sizing: border-box;
       min-height: calc(var(--interaction-height) * 2.75);
diff --git a/docs/styleguide/styles/37-layouts-page-layout-public.css b/docs/styleguide/styles/37-layouts-page-layout-public.css
index 3a3ae74..a1e5c91 100644
--- a/docs/styleguide/styles/37-layouts-page-layout-public.css
+++ b/docs/styleguide/styles/37-layouts-page-layout-public.css
@@ -20,7 +20,7 @@ main {
 }
 
 .sg-page-layout-public__content-mirror {
-  width: 70vw;
+  width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
   max-width: 1100px;
   margin-inline: auto;
   display: flex;
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 2663144..096baf5 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -897,10 +897,44 @@ section + section {
       box-shadow: 0 0 0 1px var(--color-signal-red) inset;
     }
 
+    .sg-pulldown[aria-invalid="true"],
+    .sg-checkbox-field[aria-invalid="true"],
+    .sg-radio-field[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;
     }
 
+    #component-radio-field .sg-labeled-input-row--radio-invalid {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--spacing-large);
+      row-gap: var(--spacing-small);
+      align-items: start;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: 0;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    #component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
+      gap: calc(var(--spacing-small) / 4);
+    }
+
     .sg-input-multi-line {
       box-sizing: border-box;
       min-height: calc(var(--interaction-height) * 2.75);
@@ -3380,7 +3414,7 @@ main {
 }
 
 .sg-page-layout-public__content-mirror {
-  width: 70vw;
+  width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
   max-width: 1100px;
   margin-inline: auto;
   display: flex;
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 8ce92ce..164b065 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": "6c103d1",
-  "syncedAtUtc": "2026-06-22T13:27:18Z",
+  "styleguideCommit": "1f478a8",
+  "syncedAtUtc": "2026-06-22T16:24:15Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 2663144..096baf5 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -897,10 +897,44 @@ section + section {
       box-shadow: 0 0 0 1px var(--color-signal-red) inset;
     }
 
+    .sg-pulldown[aria-invalid="true"],
+    .sg-checkbox-field[aria-invalid="true"],
+    .sg-radio-field[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;
     }
 
+    #component-radio-field .sg-labeled-input-row--radio-invalid {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--spacing-large);
+      row-gap: var(--spacing-small);
+      align-items: start;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: 0;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    #component-checkbox-field .sg-input-validation-stack--checkbox-invalid {
+      gap: calc(var(--spacing-small) / 4);
+    }
+
     .sg-input-multi-line {
       box-sizing: border-box;
       min-height: calc(var(--interaction-height) * 2.75);
@@ -3380,7 +3414,7 @@ main {
 }
 
 .sg-page-layout-public__content-mirror {
-  width: 70vw;
+  width: min(calc(100% - (var(--spacing-large) * 2)), 1100px);
   max-width: 1100px;
   margin-inline: auto;
   display: flex;