From bcd16e30771f7d163870e619c0d0056bfbdf81e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 25 May 2026 07:30:23 +0200
Subject: [PATCH] Adjust interactive template activation and mobile slider
 layout

---
 components/interactive-elements.html | 14 ++++++++++++--
 styleguide.css                       |  7 ++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 08da3aa..5263192 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -483,13 +483,13 @@
           <span class="sg-label">Label</span>
           <span class="sg-radio-activatable-group__choices">
             <span class="sg-radio-activatable-group__choice">
-              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen">
+              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 1 wählen" disabled>
                 <span class="sg-radio-field__mark" aria-hidden="true"></span>
               </button>
               <span>Option 1</span>
             </span>
             <span class="sg-radio-activatable-group__choice">
-              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen">
+              <button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Option 2 wählen" disabled>
                 <span class="sg-radio-field__mark" aria-hidden="true"></span>
               </button>
               <span>Option 2</span>
@@ -729,6 +729,7 @@
       if (componentType === 'radio-field') {
         const radios = target.querySelectorAll('.sg-radio-field');
         radios.forEach((radio) => {
+          radio.disabled = !isActive;
           if (!isActive) {
             radio.setAttribute('aria-checked', 'false');
           }
@@ -770,6 +771,15 @@
       });
     });
 
+    // Sync activatable targets to the toggle's initial state on load.
+    document.querySelectorAll('.sg-activation-mode-toggle[data-activation-target]').forEach((toggle) => {
+      const target = document.getElementById(toggle.dataset.activationTarget);
+      if (!target) {
+        return;
+      }
+      setActivatableComponentState(target, toggle.dataset.active === 'relative');
+    });
+
     document.querySelectorAll('.sg-tab-button-group').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
         button.addEventListener('click', () => {
diff --git a/styleguide.css b/styleguide.css
index 03770d0..2bbbd93 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1988,7 +1988,8 @@ section + section {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--spacing-small);
+    column-gap: var(--spacing-large);
+    row-gap: var(--spacing-small);
   }
 
   .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1999,8 +2000,8 @@ section + section {
   .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
     min-width: 0;
     max-width: 100%;
-    width: auto;
-    flex: 1 1 auto;
+    width: 100%;
+    flex: 1 1 0;
   }
 
   .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {