From e6b76c88ed3a55a8e2c84e868ccba7454976a525 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:17 +0200
Subject: [PATCH] Tighten checkbox invalid stack spacing

---
 components/interactive-elements.html          | 19 ++++++--------
 styles/10-components-interactive-elements.css | 25 ++-----------------
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index eb2f024..53e178c 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -536,17 +536,14 @@
 
       <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--checkbox-invalid">
-          <span class="sg-label">Label</span>
-          <span class="sg-input-validation-stack">
-            <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>
-          </span>
+        <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>
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 48100cb..c38db4d 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -441,29 +441,8 @@
       grid-row: 2;
     }
 
-    #component-checkbox-field .sg-labeled-input-row--checkbox-invalid {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      column-gap: var(--spacing-large);
-      row-gap: var(--spacing-small);
-      align-items: start;
-    }
-
-    #component-checkbox-field .sg-labeled-input-row--checkbox-invalid .sg-label {
-      grid-column: 1;
-      grid-row: 1;
-      margin-right: 0;
-    }
-
-    #component-checkbox-field .sg-labeled-input-row--checkbox-invalid .sg-input-validation-stack {
-      grid-column: 2;
-      grid-row: 1;
-      gap: calc(var(--spacing-small) / 2);
-    }
-
-    #component-checkbox-field .sg-labeled-input-row--checkbox-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 {